fix: create profile service and controller

src/components/Root/Root.tsx

@@ -16,6 +16,7 @@ import AppRoutes from '#src/containers/AppRoutes/AppRoutes';
 import registerCustomScreens from '#src/screenMapping';
 import { useAccountStore } from '#src/stores/AccountStore';
 import { useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
+import { useProfileStore } from '#src/stores/ProfileStore';
 
 const Root: FC = () => {
   const { t } = useTranslation('error');
@@ -48,11 +49,13 @@ const Root: FC = () => {
     registerCustomScreens();
   }, []);
 
-  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user, profile: s.profile, selectingProfileAvatar: s.selectingProfileAvatar }));
+  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user }));
+
+  const { profile, selectingProfileAvatar } = useProfileStore();
   const profilesEnabled = useProfilesFeatureEnabled();
 
-  if (userData.user && profilesEnabled && userData.selectingProfileAvatar !== null) {
-    return <LoadingOverlay profileImageUrl={userData.profile?.avatar_url || userData.selectingProfileAvatar} />;
+  if (userData.user && profilesEnabled && selectingProfileAvatar !== null) {
+    return <LoadingOverlay profileImageUrl={profile?.avatar_url || selectingProfileAvatar} />;
   }
 
   if (userData.user && !userData.loading && window.location.href.includes('#token')) {
@@ -66,7 +69,7 @@ const Root: FC = () => {
     return <LoadingOverlay />;
   }
 
-  if (profilesEnabled && userData.user && !userData.profile && !location.pathname.includes('/u/profiles')) {
+  if (profilesEnabled && userData.user && !profile && !location.pathname.includes('/u/profiles')) {
     return <Navigate to="/u/profiles" />;
   }
 

src/components/UserMenu/UserMenu.tsx

@@ -12,11 +12,11 @@ import Exit from '#src/icons/Exit';
 import MenuButton from '#components/MenuButton/MenuButton';
 import { logout } from '#src/stores/AccountController';
 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, useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 import ProfileCircle from '#src/icons/ProfileCircle';
+import { useProfileStore } from '#src/stores/ProfileStore';
 
 type Props = {
   small?: boolean;
@@ -28,7 +28,7 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
   const { t } = useTranslation('user');
   const navigate = useNavigate();
   const { accessModel } = useConfigStore();
-  const { profile: currentProfile } = useAccountStore();
+  const { profile: currentProfile } = useProfileStore();
   const profilesEnabled = useProfilesFeatureEnabled();
 
   const { data, isFetching } = useListProfiles();

src/containers/AppRoutes/AppRoutes.tsx

@@ -20,13 +20,15 @@ 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';
+import { useProfileStore } from '#src/stores/ProfileStore';
 
 export default function AppRoutes() {
   const { t } = useTranslation('error');
   const userModal = useQueryParam('u');
 
   const { accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
-  const { profile, user } = useAccountStore(({ profile, user }) => ({ profile, user }), shallow);
+  const user = useAccountStore(({ user }) => user, shallow);
+  const { profile } = useProfileStore();
   const profilesEnabled = useProfilesFeatureEnabled();
 
   const shouldManageProfiles = !!user && profilesEnabled && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD') && !userModal;

src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap

@@ -12,7 +12,6 @@ exports[`<Cinema> > renders and matches snapshot 1`] = `
       <div
         class="_loadingOverlay_eb61cb _inline_eb61cb"
       >
-        
         <div
           class="_buffer_d122df"
         >

src/containers/Layout/Layout.tsx

@@ -19,6 +19,7 @@ import MenuButton from '#components/MenuButton/MenuButton';
 import UserMenu from '#components/UserMenu/UserMenu';
 import { addQueryParam } from '#src/utils/location';
 import { getSupportedLanguages } from '#src/i18n/config';
+import { useProfileStore } from '#src/stores/ProfileStore';
 
 const Layout = () => {
   const location = useLocation();
@@ -43,7 +44,8 @@ const Layout = () => {
     shallow,
   );
   const { updateSearchQuery, resetSearchQuery } = useSearchQueryUpdater();
-  const { user, profile } = useAccountStore(({ user, profile }) => ({ user, profile }), shallow);
+  const user = useAccountStore(({ user }) => user, shallow);
+  const { profile } = useProfileStore();
   const isLoggedIn = !!user;
 
   const searchInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;

src/containers/Profiles/CreateProfile.tsx

@@ -9,7 +9,7 @@ import AVATARS from './avatarUrls.json';
 import styles from '#src/pages/User/User.module.scss';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import type { UseFormOnSubmitHandler } from '#src/hooks/useForm';
-import { createProfile } from '#src/stores/AccountController';
+import { createProfile } from '#src/stores/ProfileController';
 import { useListProfiles, useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 

src/containers/Profiles/DeleteProfile.tsx

@@ -9,7 +9,7 @@ import Dialog from '#src/components/Dialog/Dialog';
 import { removeQueryParam } from '#src/utils/location';
 import useQueryParam from '#src/hooks/useQueryParam';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
-import { deleteProfile } from '#src/stores/AccountController';
+import { deleteProfile } from '#src/stores/ProfileController';
 import { useListProfiles } from '#src/hooks/useProfiles';
 
 const DeleteProfile = () => {

src/containers/Profiles/EditProfile.tsx

@@ -14,9 +14,9 @@ import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import type { UseFormOnSubmitHandler } from '#src/hooks/useForm';
 import Button from '#src/components/Button/Button';
 import { addQueryParam } from '#src/utils/location';
-import { getProfileDetails, updateProfile } from '#src/stores/AccountController';
 import { useListProfiles } from '#src/hooks/useProfiles';
 import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
+import { getProfileDetails, updateProfile } from '#src/stores/ProfileController';
 
 type EditProfileProps = {
   contained?: boolean;

src/containers/Profiles/Form.tsx

@@ -16,7 +16,7 @@ import useForm, { UseFormOnSubmitHandler } from '#src/hooks/useForm';
 import styles from '#src/pages/User/User.module.scss';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import ProfileBox from '#components/ProfileBox/ProfileBox';
-import { useAccountStore } from '#src/stores/AccountStore';
+import { useProfileStore } from '#src/stores/ProfileStore';
 
 type Props = {
   initialValues: ProfileFormValues;
@@ -33,7 +33,7 @@ type Props = {
 const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = true, showContentRating = false, isMobile = false }: Props) => {
   const navigate = useNavigate();
   const { t } = useTranslation('user');
-  const profile = useAccountStore((s) => s.profile);
+  const { profile } = useProfileStore();
 
   const options: { value: string; label: string }[] = [
     { label: t('profile.adult'), value: 'true' },

src/hooks/useProfiles.ts

@@ -1,12 +1,14 @@
 import { useMutation, useQuery } from 'react-query';
 
-import { enterProfile, initializeAccount, listProfiles } from '#src/stores/AccountController';
+import { initializeAccount } from '#src/stores/AccountController';
 import { useAccountStore } from '#src/stores/AccountStore';
 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';
+import { enterProfile, listProfiles } from '#src/stores/ProfileController';
+import { useProfileStore } from '#src/stores/ProfileStore';
 
 const PERSIST_KEY_ACCOUNT = 'auth';
 const PERSIST_PROFILE = 'profile';
@@ -24,7 +26,7 @@ export const unpersistProfile = () => {
 
 const handleProfileSelection = async ({ id, navigate, selectingProfileAvatarUrl = '' }: ProfileSelectionPayload) => {
   try {
-    useAccountStore.setState({ selectingProfileAvatar: selectingProfileAvatarUrl, profile: null });
+    useProfileStore.setState({ selectingProfileAvatar: selectingProfileAvatarUrl, profile: null });
     const response = await enterProfile({ id });
     const profile = response?.responseData;
 
@@ -49,7 +51,7 @@ const handleProfileSelection = async ({ id, navigate, selectingProfileAvatarUrl
   } catch {
     throw new Error('Unable to enter profile.');
   } finally {
-    useAccountStore.setState({ selectingProfileAvatar: null });
+    useProfileStore.setState({ selectingProfileAvatar: null });
   }
 };
 

src/hooks/useService.ts

@@ -1,6 +1,7 @@
 import * as inplayerAccountService from '#src/services/inplayer.account.service';
 import * as inplayerSubscriptionService from '#src/services/inplayer.subscription.service';
 import * as inplayerCheckoutService from '#src/services/inplayer.checkout.service';
+import * as inplayerProfileService from '#src/services/inplayer.profile.service';
 import * as cleengCheckoutService from '#src/services/cleeng.checkout.service';
 import * as cleengSubscriptionService from '#src/services/cleeng.subscription.service';
 import * as cleengAccountService from '#src/services/cleeng.account.service';
@@ -10,12 +11,14 @@ import type { AccessModel, Config } from '#types/Config';
 export type CheckoutService = typeof inplayerCheckoutService | typeof cleengCheckoutService | undefined;
 export type SubscriptionService = typeof inplayerSubscriptionService | typeof cleengSubscriptionService | undefined;
 export type AccountService = typeof inplayerAccountService | typeof cleengAccountService;
+export type ProfileService = typeof inplayerProfileService;
 
 function useService<T>(
   callback: (args: {
     accountService: AccountService;
     subscriptionService?: SubscriptionService;
     checkoutService?: CheckoutService;
+    profileService?: ProfileService;
     config: Config;
     accessModel: AccessModel;
     sandbox?: boolean;
@@ -31,6 +34,7 @@ function useService<T>(
       accountService: inplayerAccountService,
       subscriptionService: inplayerSubscriptionService,
       checkoutService: inplayerCheckoutService,
+      profileService: inplayerProfileService,
       config,
       accessModel,
       sandbox: !!jwp?.useSandbox,
@@ -44,6 +48,7 @@ function useService<T>(
       accountService: cleengAccountService,
       subscriptionService: cleengSubscriptionService,
       checkoutService: cleengCheckoutService,
+      profileService: undefined,
       config,
       accessModel,
       sandbox: !!cleeng.useSandbox,

src/pages/User/User.tsx

@@ -26,6 +26,7 @@ import { PersonalShelf, useConfigStore } from '#src/stores/ConfigStore';
 import { clear as clearFavorites } from '#src/stores/FavoritesController';
 import { mediaURL } from '#src/utils/formatting';
 import type { PlaylistItem } from '#types/playlist';
+import { useProfileStore } from '#src/stores/ProfileStore';
 
 const User = (): JSX.Element => {
   const { accessModel, favoritesList } = useConfigStore(
@@ -41,7 +42,8 @@ const User = (): JSX.Element => {
   const [clearFavoritesOpen, setClearFavoritesOpen] = useState(false);
 
   const isLargeScreen = breakpoint > Breakpoint.md;
-  const { user: customer, subscription, loading, canUpdateEmail, profile } = useAccountStore();
+  const { user: customer, subscription, loading, canUpdateEmail } = useAccountStore();
+  const { profile } = useProfileStore();
 
   const profilesEnabled = useProfilesFeatureEnabled();
 

src/services/inplayer.account.service.ts

@@ -1,6 +1,8 @@
-import InPlayer, { AccountData, Env, RegisterField, UpdateAccountData, FavoritesData, WatchHistory } from '@inplayer-org/inplayer.js';
+import InPlayer, { AccountData, Env, FavoritesData, RegisterField, UpdateAccountData, WatchHistory } from '@inplayer-org/inplayer.js';
 import i18next from 'i18next';
 
+import { getCommonResponseData } from '#src/utils/api';
+import type { Config } from '#types/Config';
 import type {
   AuthData,
   Capture,
@@ -9,7 +11,6 @@ import type {
   Consent,
   Customer,
   CustomerConsent,
-  EnterProfile,
   DeleteAccount,
   ExportAccountData,
   ExternalData,
@@ -25,17 +26,10 @@ import type {
   UpdateCustomerArgs,
   UpdateCustomerConsents,
   UpdatePersonalShelves,
-  DeleteProfile,
-  GetProfileDetails,
-  UpdateProfile,
-  CreateProfile,
-  ListProfiles,
 } from '#types/account';
-import type { Config } from '#types/Config';
-import type { InPlayerAuthData, InPlayerError } from '#types/inplayer';
 import type { Favorite } from '#types/favorite';
+import type { InPlayerAuthData, InPlayerError } from '#types/inplayer';
 import type { WatchHistoryItem } from '#types/watchHistory';
-import { getCommonResponseData } from '#src/utils/api';
 
 enum InPlayerEnv {
   Development = 'development',
@@ -338,87 +332,6 @@ export const updatePersonalShelves: UpdatePersonalShelves = async (payload) => {
   }
 };
 
-export const listProfiles: ListProfiles = async () => {
-  try {
-    const response = await InPlayer.Account.getProfiles();
-    return {
-      responseData: {
-        canManageProfiles: true,
-        collection: response.data,
-      },
-      errors: [],
-    };
-  } catch {
-    throw new Error('Unable to fetch profiles.');
-  }
-};
-
-export const createProfile: CreateProfile = async (payload) => {
-  try {
-    const response = await InPlayer.Account.createProfile(payload.name, payload.adult, payload.avatar_url, payload.pin);
-    return {
-      responseData: response.data,
-      errors: [],
-    };
-  } catch {
-    throw new Error('Unable to create profile.');
-  }
-};
-
-export const updateProfile: UpdateProfile = async (payload) => {
-  try {
-    if (!payload.id) {
-      throw new Error('Profile id is required.');
-    }
-    const response = await InPlayer.Account.updateProfile(payload.id, payload.name, payload.avatar_url, payload.adult);
-    return {
-      responseData: response.data,
-      errors: [],
-    };
-  } catch {
-    throw new Error('Unable to update profile.');
-  }
-};
-
-export const enterProfile: EnterProfile = async ({ id, pin }) => {
-  try {
-    const response = await InPlayer.Account.enterProfile(id, pin);
-    return {
-      responseData: response.data,
-      errors: [],
-    };
-  } catch {
-    throw new Error('Unable to enter profile.');
-  }
-};
-
-export const getProfileDetails: GetProfileDetails = async ({ id }) => {
-  try {
-    const response = await InPlayer.Account.getProfileDetails(id);
-    return {
-      responseData: response.data,
-      errors: [],
-    };
-  } catch {
-    throw new Error('Unable to get profile details.');
-  }
-};
-
-export const deleteProfile: DeleteProfile = async ({ id }) => {
-  try {
-    await InPlayer.Account.deleteProfile(id);
-    return {
-      responseData: {
-        message: 'Profile deleted successfully',
-        code: 200,
-      },
-      errors: [],
-    };
-  } catch {
-    throw new Error('Unable to delete profile.');
-  }
-};
-
 export const exportAccountData: ExportAccountData = async () => {
   // password is sent as undefined because it is now optional on BE
   try {