fix: additional profiles PR comments fixes

public/locales/en/user.json

@@ -61,6 +61,7 @@
   "login": {
     "field_required": "This field is required"
   },
+  "name": "Name",
   "nav": {
     "account": "Account",
     "add_profile": "Add new profile",
@@ -123,6 +124,8 @@
     "delete_description": "Permanently delete your profile along with all of your watch history and favorites.",
     "delete_main": "The main profile cannot be deleted because it’s linked to your account's watch history and favorites.",
     "description": "Profiles allow you to watch content and assemble your own personal collection of favorites.",
+    "done": "Done",
+    "edit": "Edit profile",
     "form_error": "Something went wrong. Please try again later.",
     "info": "Profile info",
     "kids": "Kids",

public/locales/es/user.json

@@ -61,6 +61,7 @@
   "login": {
     "field_required": ""
   },
+  "name": "",
   "nav": {
     "account": "Cuenta",
     "add_profile": "Añade un nuevo perfil",

src/components/Header/Header.tsx

@@ -1,6 +1,7 @@
 import React, { ReactFragment, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import type { UseMutateFunction } from 'react-query';
 
 import styles from './Header.module.scss';
 
@@ -52,6 +53,8 @@ type Props = {
   currentProfile?: Profile;
   profiles?: Profile[];
   profilesEnabled?: boolean;
+  selectProfile?: UseMutateFunction<unknown, unknown, { id: string; avatarUrl: string }, unknown>;
+  isSelectingProfile?: boolean;
   accessModel?: AccessModel;
 };
 
@@ -82,6 +85,8 @@ const Header: React.FC<Props> = ({
   currentProfile,
   profiles,
   profilesEnabled,
+  selectProfile,
+  isSelectingProfile,
   accessModel,
 }) => {
   const { t } = useTranslation('menu');
@@ -145,6 +150,8 @@ const Header: React.FC<Props> = ({
               currentProfile={currentProfile}
               profilesEnabled={profilesEnabled}
               profiles={profiles}
+              selectProfile={selectProfile}
+              isSelectingProfile={!!isSelectingProfile}
             />
           </Panel>
         </Popover>

src/components/ProfileBox/AddNewProfile.tsx

@@ -15,7 +15,7 @@ const AddNewProfile = ({ onClick }: Props) => {
   const keyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => (event.key === 'Enter' || event.key === ' ') && onClick();
 
   return (
-    <div onClick={onClick} tabIndex={0} onKeyDown={keyDownHandler} className={classNames(styles.wrapper, styles.addProfileContainer)}>
+    <div onClick={onClick} tabIndex={0} onKeyDown={keyDownHandler} className={classNames(styles.wrapper, styles.addProfileContainer)} role="button">
       <div className={styles.iconContainer}>
         <div className={`${styles.box} ${styles.circle}`}>
           <Plus />

src/components/ProfileBox/ProfileBox.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 import styles from './ProfileBox.module.scss';
 
@@ -19,14 +20,17 @@ type Props = {
 };
 
 const ProfileBox = ({ name, image, editMode = false, onClick, onEdit, selected = false }: Props) => {
+  const { t } = useTranslation('user');
+  const keyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => (event.key === 'Enter' || event.key === ' ') && onClick();
+
   return (
     <div className={styles.wrapper}>
       <div className={classNames(styles.inner, selected && styles.selected)}>
-        <div onClick={onClick} className={styles.box}>
+        <div onClick={onClick} className={styles.box} role="button" tabIndex={0} onKeyDown={keyDownHandler}>
           <img className={styles.image} src={image || defaultAvatar} alt="" />
         </div>
         {editMode && (
-          <IconButton aria-label="edit-profile-button" onClick={onEdit} className={styles.overlay}>
+          <IconButton aria-label={t('profile.edit')} onClick={onEdit} className={styles.overlay}>
             <Edit />
           </IconButton>
         )}

src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx

@@ -35,7 +35,9 @@ const ProfilesMenu = ({
   <>
     <li className={styles.sectionHeader}>{switchProfilesLabel}</li>
     {selectingProfile ? (
-      <LoadingOverlay inline />
+      <li>
+        <LoadingOverlay inline />
+      </li>
     ) : (
       profiles?.map((profile) => (
         <li key={profile.id}>
@@ -54,11 +56,13 @@ const ProfilesMenu = ({
         <MenuButton small={small} onClick={onCreateButtonClick} startIcon={<Plus />} label={createButtonLabel} />
       </li>
     )}
-    <hr
-      className={classNames(styles.divider, {
-        [styles.small]: small,
-      })}
-    />
+    <li>
+      <hr
+        className={classNames(styles.divider, {
+          [styles.small]: small,
+        })}
+      />
+    </li>
   </>
 );
 

src/components/UserMenu/UserMenu.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
+import type { UseMutateFunction } from 'react-query';
 
 import styles from './UserMenu.module.scss';
 import ProfilesMenu from './ProfilesMenu/ProfilesMenu';
@@ -12,7 +13,6 @@ import BalanceWallet from '#src/icons/BalanceWallet';
 import Exit from '#src/icons/Exit';
 import MenuButton from '#components/MenuButton/MenuButton';
 import { logout } from '#src/stores/AccountController';
-import { useSelectProfile } from '#src/hooks/useProfiles';
 import ProfileCircle from '#src/icons/ProfileCircle';
 import type { AccessModel } from '#types/Config';
 import type { Profile } from '#types/account';
@@ -26,14 +26,24 @@ type Props = {
   currentProfile?: Profile;
   profilesEnabled?: boolean;
   profiles?: Profile[];
+  isSelectingProfile?: boolean;
+  selectProfile?: UseMutateFunction<unknown, unknown, { id: string; avatarUrl: string }, unknown>;
 };
 
-const UserMenu = ({ showPaymentsItem, small = false, onClick, accessModel, currentProfile, profilesEnabled, profiles }: Props) => {
+const UserMenu = ({
+  showPaymentsItem,
+  small = false,
+  onClick,
+  accessModel,
+  currentProfile,
+  profilesEnabled,
+  profiles,
+  isSelectingProfile,
+  selectProfile,
+}: Props) => {
   const { t } = useTranslation('user');
   const navigate = useNavigate();
 
-  const selectProfile = useSelectProfile();
-
   const onLogout = useCallback(async () => {
     if (onClick) {
       onClick();
@@ -45,13 +55,13 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick, accessModel, curre
 
   return (
     <ul className={styles.menuItems}>
-      {accessModel === 'SVOD' && profilesEnabled && (
+      {accessModel === 'SVOD' && profilesEnabled && selectProfile && (
         <ProfilesMenu
           profiles={profiles ?? []}
           currentProfile={currentProfile}
           small={small}
-          selectingProfile={selectProfile.isLoading}
-          selectProfile={selectProfile.mutate}
+          selectingProfile={!!isSelectingProfile}
+          selectProfile={selectProfile}
           defaultAvatar={defaultAvatar}
           createButtonLabel={t('nav.add_profile')}
           switchProfilesLabel={t('nav.switch_profiles')}
@@ -82,7 +92,9 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick, accessModel, curre
           <MenuButton small={small} onClick={onClick} to="/u/payments" label={t('nav.payments')} startIcon={<BalanceWallet />} />
         </li>
       )}
-      <hr className={classNames(styles.divider, { [styles.small]: small })} />
+      <li>
+        <hr className={classNames(styles.divider, { [styles.small]: small })} />
+      </li>
       <li>
         <MenuButton small={small} onClick={onLogout} label={t('nav.logout')} startIcon={<Exit />} />
       </li>

src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap

@@ -97,9 +97,11 @@ exports[`<UserMenu> > renders and matches snapshot 1`] = `
         </span>
       </a>
     </li>
-    <hr
-      class="_divider_457528"
-    />
+    <li>
+      <hr
+        class="_divider_457528"
+      />
+    </li>
     <li>
       <div
         aria-label="nav.logout"

src/containers/Layout/Layout.tsx

@@ -43,6 +43,8 @@ const Layout = () => {
     unpersistProfile();
   }
 
+  const selectProfile = useSelectProfile();
+
   const { searchQuery, searchActive, userMenuOpen, languageMenuOpen } = useUIStore(
     ({ searchQuery, searchActive, userMenuOpen, languageMenuOpen }) => ({
       languageMenuOpen,
@@ -154,6 +156,8 @@ const Layout = () => {
           currentProfile={profile ?? undefined}
           profiles={profiles}
           profilesEnabled={profilesEnabled}
+          selectProfile={selectProfile.mutate}
+          isSelectingProfile={!!selectProfile.isLoading}
           accessModel={accessModel}
         >
           <Button label={t('home')} to="/" variant="text" />

src/containers/Profiles/Form.tsx

@@ -62,7 +62,7 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
         <div className={profileStyles.formFields}>
           {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
           {submitting && <LoadingOverlay inline />}
-          <h2 className={profileStyles.nameHeading}>Name</h2>
+          <h2 className={profileStyles.nameHeading}>{t('name')}</h2>
           <TextField
             required
             name="name"

src/containers/Profiles/Profiles.tsx

@@ -46,7 +46,7 @@ const Profiles = ({ editMode = false }: Props) => {
     <div className={styles.wrapper}>
       {activeProfiles === 0 ? (
         <div className={styles.headings}>
-          <p className={styles.paragarph}>{t('profile.no_one_watching')}</p>
+          <p className={styles.paragraph}>{t('profile.no_one_watching')}</p>
           <h2 className={styles.heading}>{t('profile.create_message')}</h2>
         </div>
       ) : (
@@ -71,7 +71,7 @@ const Profiles = ({ editMode = false }: Props) => {
           {!editMode ? (
             <Button onClick={() => navigate('/u/profiles/edit')} label={t('account.manage_profiles')} variant="outlined" size="large" fullWidth={isMobile} />
           ) : (
-            <Button onClick={() => navigate('/u/profiles')} label="Done" variant="outlined" size="large" fullWidth={isMobile} />
+            <Button onClick={() => navigate('/u/profiles')} label={t('profile.done')} variant="outlined" size="large" fullWidth={isMobile} />
           )}
         </div>
       )}