fix: remove unnecessary helper text, rename class, fix profile persis…

…t on relog

public/locales/en/user.json

@@ -105,7 +105,6 @@
     "adult": "Adult",
     "avatar": "Avatar",
     "content_rating": "Content rating",
-    "content_rating_helper": "Content 12+ will not be available for kids profiles",
     "create": "Create profile",
     "delete": "Delete profile",
     "delete_description": "Permanently delete your profile along with all of your watch history and favorites.",

public/locales/es/user.json

@@ -106,7 +106,6 @@
     "adult": "",
     "avatar": "",
     "content_rating": "",
-    "content_rating_helper": "",
     "create": "",
     "delete": "",
     "delete_description": "",

src/components/ProfileBox/ProfileBox.module.scss

@@ -40,7 +40,7 @@
       position: relative;
       transition: all 0.5s ease;
     }
-    .kids {
+    .kidsLabel {
       position: absolute;
       top: 5px;
       right: 5px;

src/components/ProfileBox/ProfileBox.tsx

@@ -21,7 +21,7 @@ const ProfileBox = ({ name, image, adult = true, editMode = false, onClick, onEd
       <div className={classNames(styles.inner, selected && styles.selected)}>
         <div onClick={onClick} className={styles.box}>
           <img className={styles.image} src={image} alt="" />
-          {!adult && <span className={styles.kids}>Kids</span>}
+          {!adult && <span className={styles.kidsLabel}>Kids</span>}
         </div>
         {editMode && (
           <div onClick={onEdit} className={styles.overlay}>

src/components/Root/Root.tsx

@@ -46,7 +46,7 @@ const Root: FC = () => {
     registerCustomScreens();
   }, []);
 
-  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user }));
+  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user, profile: s.profile }));
 
   if (userData.user && !userData.loading && window.location.href.includes('#token')) {
     return <Navigate to="/" />; // component instead of hook to prevent extra re-renders
@@ -59,6 +59,10 @@ const Root: FC = () => {
     return <LoadingOverlay />;
   }
 
+  if (!userData.profile) {
+    return <Navigate to="/u/profiles" />;
+  }
+
   if (settingsQuery.isError) {
     return (
       <ErrorPage

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 } from '#src/hooks/useProfiles';
+import { useSelectProfile, useListProfiles, unpersistProfile } from '#src/hooks/useProfiles';
 
 type Props = {
   small?: boolean;
@@ -32,6 +32,11 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
   const { data, isFetching } = useListProfiles();
   const profiles = data?.responseData.collection;
 
+  if (!profiles?.length) {
+    unpersistProfile();
+    navigate('/u/profiles');
+  }
+
   const selectProfile = useSelectProfile();
 
   const onLogout = useCallback(async () => {

src/containers/Profiles/Form.tsx

@@ -79,7 +79,6 @@ const Form = ({ initialValues, formHandler, setFullName, selectedAvatar, showCan
             required
             name="adult"
             label={t('profile.content_rating')}
-            helperText={t('profile.content_rating_helper')}
             className={styles.dropdown}
             options={options}
             value={values?.adult?.toString() || 'true'}

src/hooks/useProfiles.ts

@@ -15,6 +15,11 @@ type ProfileSelectionPayload = {
   navigate: (path: string) => void;
 };
 
+export const unpersistProfile = () => {
+  persist.removeItem(PERSIST_PROFILE);
+  persist.removeItem(PERSIST_KEY_ACCOUNT);
+};
+
 const handleProfileSelection = async ({ id, navigate }: ProfileSelectionPayload) => {
   try {
     useAccountStore.setState({ loading: true });