fix: run i18next, add favorites check

jwplayer · Oct 18, 2023 · 4a7c286 · 4a7c286
1 parent 2043921
commit 4a7c286
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 35 deletions.
diff --git a/public/locales/es/user.json b/public/locales/es/user.json
@@ -118,6 +118,7 @@
   "profile": {
     "adult": "Adultos",
     "avatar": "Avatar",
+    "back_to_profiles": "",
     "content_rating": "Puntuación del contenido",
     "create_message": "Crea tu perfil",
     "created_message": "Creaste exitosamente tu perfil. Ahora ve y mira contenido increíble y reúne tu propia colección personal de favoritos.",

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -49,6 +49,8 @@ type Props = {
   currentLanguage: LanguageDefinition | undefined;
   onLanguageClick: (code: string) => void;
 
+  favoritesEnabled?: boolean;
+
   profilesData?: {
     currentProfile: Profile | null;
     profiles: Profile[];
@@ -82,6 +84,7 @@ const Header: React.FC<Props> = ({
   supportedLanguages,
   currentLanguage,
   onLanguageClick,
+  favoritesEnabled,
   profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
 }) => {
   const { t } = useTranslation('menu');
@@ -150,6 +153,7 @@ const Header: React.FC<Props> = ({
               profiles={profiles}
               selectProfile={selectProfile}
               isSelectingProfile={!!isSelectingProfile}
+              favoritesEnabled={favoritesEnabled}
             />
           </Panel>
         </Popover>

diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -24,9 +24,20 @@ type Props = {
   profiles?: Profile[];
   isSelectingProfile?: boolean;
   selectProfile?: ({ id, avatarUrl }: { id: string; avatarUrl: string }) => void;
+  favoritesEnabled?: boolean;
 };
 
-const UserMenu = ({ showPaymentsItem, small = false, onClick, currentProfile, profilesEnabled, profiles, isSelectingProfile, selectProfile }: Props) => {
+const UserMenu = ({
+  showPaymentsItem,
+  small = false,
+  onClick,
+  currentProfile,
+  profilesEnabled,
+  profiles,
+  isSelectingProfile,
+  selectProfile,
+  favoritesEnabled,
+}: Props) => {
   const { t } = useTranslation('user');
   const navigate = useNavigate();
 
@@ -69,9 +80,11 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick, currentProfile, pr
         <MenuButton small={small} onClick={onClick} to="/u/my-account" label={t('nav.account')} startIcon={<AccountCircle />} />
       </li>
 
-      <li>
-        <MenuButton small={small} onClick={onClick} to="/u/favorites" label={t('nav.favorites')} startIcon={<Favorite />} />
-      </li>
+      {favoritesEnabled && (
+        <li>
+          <MenuButton small={small} onClick={onClick} to="/u/favorites" label={t('nav.favorites')} startIcon={<Favorite />} />
+        </li>
+      )}
       {showPaymentsItem && (
         <li>
           <MenuButton small={small} onClick={onClick} to="/u/payments" label={t('nav.payments')} startIcon={<BalanceWallet />} />

diff --git a/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -39,35 +39,6 @@ exports[`<UserMenu> > renders and matches snapshot 1`] = `
         </span>
       </a>
     </li>
-    <li>
-      <a
-        aria-label="nav.favorites"
-        class="_menuButton_91706b"
-        href="/u/favorites"
-        tabindex="0"
-      >
-        <div
-          class="_startIcon_91706b"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_1e9999"
-            focusable="false"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g>
-              <path
-                d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
-              />
-            </g>
-          </svg>
-        </div>
-        <span>
-          nav.favorites
-        </span>
-      </a>
-    </li>
     <li>
       <a
         aria-label="nav.payments"

diff --git a/src/containers/Layout/Layout.tsx b/src/containers/Layout/Layout.tsx
@@ -21,7 +21,7 @@ import UserMenu from '#components/UserMenu/UserMenu';
 import { addQueryParam } from '#src/utils/location';
 import { getSupportedLanguages } from '#src/i18n/config';
 import { useProfileStore } from '#src/stores/ProfileStore';
-import { useProfiles } from '#src/hooks/useProfiles';
+import { useProfiles, useSelectProfile } from '#src/hooks/useProfiles';
 import { IS_DEVELOPMENT_BUILD } from '#src/utils/common';
 import { unpersistProfile } from '#src/stores/ProfileController';
 
@@ -30,6 +30,7 @@ const Layout = () => {
   const navigate = useNavigate();
   const { t, i18n } = useTranslation('common');
   const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
+  const favoritesEnabled = !!config.features?.favoritesList;
   const { menu, assets, siteName, description, styling, features } = config;
   const metaDescription = description || t('default_description');
   const { clientId } = useClientIntegration();
@@ -110,7 +111,7 @@ const Layout = () => {
     if (!clientId) return null;
 
     return isLoggedIn ? (
-      <UserMenu showPaymentsItem={accessModel !== 'AVOD'} />
+      <UserMenu showPaymentsItem={accessModel !== 'AVOD'} favoritesEnabled={favoritesEnabled} />
     ) : (
       <div className={styles.buttonContainer}>
         <Button fullWidth onClick={loginButtonClickHandler} label={t('sign_in')} />
@@ -157,6 +158,7 @@ const Layout = () => {
           closeLanguageMenu={closeLanguageMenu}
           canLogin={!!clientId}
           showPaymentsMenuItem={accessModel !== 'AVOD'}
+          favoritesEnabled={favoritesEnabled}
           profilesData={{
             currentProfile: profile,
             profiles,