fix: add config check for profiles feature

package.json

@@ -30,7 +30,7 @@
     "lint:stylelint": "stylelint '**/*.{css,scss}'",
     "commit-msg": "commitlint --edit $1",
     "codecept:mobile": "cd test-e2e && rm -rf \"./output/mobile\" && codeceptjs --config ./codecept.mobile.js run-workers --suites ${WORKER_COUNT:=8} ",
-    "codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs --config ./codecept.desktop.js run-workers --suites ${WORKER_COUNT:=8} ",
+    "codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs --config ./codecept.desktop.js run-workers --suites ${WORKER_COUNT:=2} ",
     "serve-report:mobile": "cd test-e2e && allure serve \"./output/mobile\"",
     "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
     "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",

src/components/Root/Root.tsx

@@ -15,6 +15,7 @@ import { initSettings } from '#src/stores/SettingsController';
 import AppRoutes from '#src/containers/AppRoutes/AppRoutes';
 import registerCustomScreens from '#src/screenMapping';
 import { useAccountStore } from '#src/stores/AccountStore';
+import { useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 
 const Root: FC = () => {
   const { t } = useTranslation('error');
@@ -47,7 +48,8 @@ const Root: FC = () => {
     registerCustomScreens();
   }, []);
 
-  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user, profile: s.profile, canManageProfiles: s.canManageProfiles }));
+  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user, profile: s.profile }));
+  const profilesEnabled = useProfilesFeatureEnabled();
 
   if (userData.user && !userData.loading && window.location.href.includes('#token')) {
     return <Navigate to="/" />; // component instead of hook to prevent extra re-renders
@@ -60,7 +62,7 @@ const Root: FC = () => {
     return <LoadingOverlay profileImageUrl={userData.profile?.avatar_url} />;
   }
 
-  if (userData.canManageProfiles && userData.user && !userData.profile && !location.pathname.includes('/u/profiles')) {
+  if (profilesEnabled && userData.user && !userData.profile && !location.pathname.includes('/u/profiles')) {
     return <Navigate to="/u/profiles" />;
   }
 

src/components/UserMenu/UserMenu.tsx

@@ -15,7 +15,7 @@ import { useConfigStore } from '#src/stores/ConfigStore';
 import { useAccountStore } from '#src/stores/AccountStore';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import Plus from '#src/icons/Plus';
-import { useSelectProfile, useListProfiles, unpersistProfile } from '#src/hooks/useProfiles';
+import { useSelectProfile, useListProfiles, unpersistProfile, useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 import ProfileCircle from '#src/icons/ProfileCircle';
 
 type Props = {
@@ -28,12 +28,13 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
   const { t } = useTranslation('user');
   const navigate = useNavigate();
   const { accessModel } = useConfigStore();
-  const { canManageProfiles, profile: currentProfile } = useAccountStore();
+  const { profile: currentProfile } = useAccountStore();
+  const profilesEnabled = useProfilesFeatureEnabled();
 
   const { data, isFetching } = useListProfiles();
   const profiles = data?.responseData.collection;
 
-  if (canManageProfiles && !profiles?.length) {
+  if (profilesEnabled && !profiles?.length) {
     unpersistProfile();
     navigate('/u/profiles');
   }
@@ -51,7 +52,7 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
 
   return (
     <ul className={styles.menuItems}>
-      {accessModel === 'SVOD' && canManageProfiles && (
+      {accessModel === 'SVOD' && profilesEnabled && (
         <>
           <div className={styles.sectionHeader}>{t('nav.switch_profiles')}</div>
           {selectProfile.isLoading || isFetching ? (
@@ -82,15 +83,17 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
         </>
       )}
       <div className={styles.sectionHeader}>{t('nav.settings')}</div>
-      <li>
-        <MenuButton
-          small={small}
-          onClick={onClick}
-          to={`/u/my-profile/${currentProfile?.id ?? ''}`}
-          label={t('nav.profile')}
-          startIcon={<ProfileCircle src={currentProfile?.avatar_url ?? ''} alt={currentProfile?.name ?? ''} />}
-        />
-      </li>
+      {profilesEnabled && (
+        <li>
+          <MenuButton
+            small={small}
+            onClick={onClick}
+            to={`/u/my-profile/${currentProfile?.id ?? ''}`}
+            label={t('nav.profile')}
+            startIcon={<ProfileCircle src={currentProfile?.avatar_url ?? ''} alt={currentProfile?.name ?? ''} />}
+          />
+        </li>
+      )}
       <li>
         <MenuButton small={small} onClick={onClick} to="/u/my-account" label={t('nav.account')} startIcon={<AccountCircle />} />
       </li>

src/containers/AppRoutes/AppRoutes.tsx

@@ -19,14 +19,17 @@ import { useConfigStore } from '#src/stores/ConfigStore';
 import { useAccountStore } from '#src/stores/AccountStore';
 import EditProfile from '#src/containers/Profiles/EditProfile';
 import useQueryParam from '#src/hooks/useQueryParam';
+import { useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 
 export default function AppRoutes() {
   const { t } = useTranslation('error');
   const userModal = useQueryParam('u');
 
   const { accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
-  const { canManageProfiles, profile, user } = useAccountStore(({ canManageProfiles, profile, user }) => ({ canManageProfiles, profile, user }), shallow);
-  const shouldManageProfiles = !!user && canManageProfiles && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD') && !userModal;
+  const { profile, user } = useAccountStore(({ profile, user }) => ({ profile, user }), shallow);
+  const profilesEnabled = useProfilesFeatureEnabled();
+
+  const shouldManageProfiles = !!user && profilesEnabled && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD') && !userModal;
 
   return (
     <Routes>

src/containers/Profiles/CreateProfile.tsx

@@ -8,23 +8,23 @@ import type { ProfileFormValues } from './types';
 import AVATARS from './avatarUrls.json';
 
 import styles from '#src/pages/User/User.module.scss';
-import { useAccountStore } from '#src/stores/AccountStore';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import type { UseFormOnSubmitHandler } from '#src/hooks/useForm';
 import { createProfile } from '#src/stores/AccountController';
-import { useListProfiles } from '#src/hooks/useProfiles';
+import { useListProfiles, useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 
 const CreateProfile = () => {
   const navigate = useNavigate();
-  const { canManageProfiles } = useAccountStore.getState();
+  const profilesEnabled = useProfilesFeatureEnabled();
+
   const [fullName, setFullName] = useState<string>('');
   const [avatarUrl, setAvatarUrl] = useState<string>(AVATARS[Math.floor(Math.random() * AVATARS.length)]);
 
   const { t } = useTranslation('user');
 
   useEffect(() => {
-    if (!canManageProfiles) navigate('/');
-  }, [canManageProfiles, navigate]);
+    if (!profilesEnabled) navigate('/');
+  }, [profilesEnabled, navigate]);
 
   // this is only needed so we can set different avatar url which will be temporary
   const listProfiles = useListProfiles();

src/containers/Profiles/Profiles.tsx

@@ -11,7 +11,7 @@ import type { Profile } from '#types/account';
 import AddNewProfile from '#src/components/ProfileBox/AddNewProfile';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import Button from '#src/components/Button/Button';
-import { useSelectProfile, useListProfiles } from '#src/hooks/useProfiles';
+import { useSelectProfile, useListProfiles, useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 const MAX_PROFILES = 4;
 
@@ -22,14 +22,15 @@ type Props = {
 const Profiles = ({ editMode = false }: Props) => {
   const navigate = useNavigate();
   const { t } = useTranslation('user');
-  const { canManageProfiles, loading, user } = useAccountStore(({ canManageProfiles, loading, user }) => ({ canManageProfiles, loading, user }), shallow);
+  const { loading, user } = useAccountStore(({ loading, user }) => ({ loading, user }), shallow);
+  const profilesEnabled = useProfilesFeatureEnabled();
 
   const breakpoint: Breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
 
   useEffect(() => {
-    if (!canManageProfiles || !user?.id) navigate('/');
-  }, [canManageProfiles, navigate, user?.id]);
+    if (!profilesEnabled || !user?.id) navigate('/');
+  }, [profilesEnabled, navigate, user?.id]);
 
   const { data, isLoading, isFetching, refetch } = useListProfiles();
   const activeProfiles = data?.responseData.collection.length || 0;

src/hooks/useProfiles.ts

@@ -6,6 +6,7 @@ import { useFavoritesStore } from '#src/stores/FavoritesStore';
 import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
 import * as persist from '#src/utils/persist';
 import type { AuthData } from '#types/account';
+import { useConfigStore } from '#src/stores/ConfigStore';
 
 const PERSIST_KEY_ACCOUNT = 'auth';
 const PERSIST_PROFILE = 'profile';
@@ -52,3 +53,9 @@ const handleProfileSelection = async ({ id, navigate }: ProfileSelectionPayload)
 export const useSelectProfile = () => useMutation(handleProfileSelection);
 
 export const useListProfiles = () => useQuery(['listProfiles'], listProfiles);
+
+export const useProfilesFeatureEnabled = (): boolean => {
+  const canManageProfiles = useAccountStore((s) => s.canManageProfiles);
+  const profilesFeatureEnabled = useConfigStore((s) => s.config.custom?.profilesFeatureEnabled);
+  return canManageProfiles && !!profilesFeatureEnabled;
+};

src/pages/User/User.tsx

@@ -27,6 +27,7 @@ import { getSubscriptionSwitches } from '#src/stores/CheckoutController';
 import { useCheckoutStore } from '#src/stores/CheckoutStore';
 import { addQueryParam } from '#src/utils/location';
 import EditProfile from '#src/containers/Profiles/EditProfile';
+import { useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 
 const User = (): JSX.Element => {
   const { accessModel, favoritesList } = useConfigStore(
@@ -55,9 +56,11 @@ const User = (): JSX.Element => {
     canRenewSubscription,
     canUpdatePaymentMethod,
     canShowReceipts,
-    canManageProfiles,
     profile,
   } = useAccountStore();
+
+  const profilesEnabled = useProfilesFeatureEnabled();
+
   const offerSwitches = useCheckoutStore((state) => state.offerSwitches);
   const location = useLocation();
 
@@ -120,7 +123,7 @@ const User = (): JSX.Element => {
         <div className={styles.leftColumn}>
           <div className={styles.panel}>
             <ul>
-              {accessModel === 'SVOD' && canManageProfiles && (
+              {accessModel === 'SVOD' && profilesEnabled && (
                 <li>
                   <Button
                     to={`my-profile/${profile?.id}`}
@@ -159,7 +162,7 @@ const User = (): JSX.Element => {
             path="my-account"
             element={<AccountComponent panelClassName={styles.panel} panelHeaderClassName={styles.panelHeader} canUpdateEmail={canUpdateEmail} />}
           />
-          {canManageProfiles && <Route path="my-profile/:id" element={<EditProfile contained />} />}
+          {profilesEnabled && <Route path="my-profile/:id" element={<EditProfile contained />} />}
           {favoritesList && (
             <Route
               path="favorites"

src/stores/ConfigStore.ts

@@ -46,6 +46,9 @@ export const useConfigStore = createStore<ConfigState>('ConfigStore', (_, get) =
     styling: {
       footerText: '',
     },
+    custom: {
+      profiles_feature_enabled: false,
+    },
   },
   accessModel: 'SVOD',
   adScheduleData: null,