MPDX-8091 Preferences Setup steps UI

pages/accountLists/[accountListId]/settings/organizations.graphql

@@ -10,3 +10,11 @@ query Organizations {
     }
   }
 }
+
+mutation UpdateUser($input: UserUpdateMutationInput!) {
+  updateUser(input: $input) {
+    user {
+      setup
+    }
+  }
+}

pages/accountLists/[accountListId]/settings/preferences.page.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
-import { Skeleton } from '@mui/material';
+import CampaignIcon from '@mui/icons-material/Campaign';
+import { Alert, Box, Button, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
@@ -29,17 +30,38 @@
 import { useGetTimezones } from 'src/hooks/useGetTimezones';
 import { getCountries } from 'src/lib/data/countries';
 import { suggestArticles } from 'src/lib/helpScout';
+import theme from 'src/theme';
 import { SettingsWrapper } from './Wrapper';
 
 const AccordionLoading = styled(Skeleton)(() => ({
   width: '100%',
   height: '48px',
 }));
 
+const StickyBox = styled(Box)(() => ({
+  position: 'sticky',
+  top: theme.spacing(10),
+  borderBottom: '1px solid',
+  borderBottomColor: theme.palette.grey[200],
+  height: theme.spacing(9),
+  zIndex: '700',
+  background: theme.palette.common.white,
+  paddingY: 1,
+}));
+
 const Preferences: React.FC = () => {
   const { t } = useTranslation();
   const accountListId = useAccountListId() || '';
-  const { query } = useRouter();
+  const { push, query } = useRouter();
+
+  const setupPositions = ['', 'locale', 'monthly_goal', 'home_country'];
+  const accordionPanelPositions = [
+    '',
+    'locale',
+    'monthly goal',
+    'home country',
+  ];
+  const [setup, setSetup] = useState(0);
   const [expandedPanel, setExpandedPanel] = useState(
     typeof query.selectedTab === 'string' ? query.selectedTab : '',
   );
@@ -53,6 +75,45 @@
   const handleAccordionChange = (panel: string) => {
     const panelLowercase = panel.toLowerCase();
     setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase);
+    if (setup > 0) {handleSetupChange();}
+  };
+
+  const handleSetupChange = async () => {
+    const nextNav = setup + 1;
+    if (setupPositions.length === nextNav) {
+      setSetup(0);
+      push(`/accountLists/${accountListId}/settings/notifications`);
+    } else {
+      setSetup(nextNav);
+      setExpandedPanel(accordionPanelPositions[nextNav]);
+      // push({
+      //   pathname: pathname,
+      //   query: {
+      //     accountListId: accountListId,
+      //     selectedTab: accordionPanelPositions[nextNav],
+      //   },
+      // });
+    }
+    // await updateUser({
+    //   variables: {
+    //     input: {
+    //       attributes: {
+    //         setup: position,
+    //       },
+    //     },
+    //   },
+    //   onCompleted: () => {
+    //     enqueueSnackbar(t('Saved successfully.'), {
+    //       variant: 'success',
+    //     });
+    //     handleAccordionChange(label);
+    //   },
+    //   onError: () => {
+    //     enqueueSnackbar(t('Saving failed.'), {
+    //       variant: 'error',
+    //     });
+    //   },
+    // });
   };
 
   const { data: personalPreferencesData, loading: personalPreferencesLoading } =
@@ -77,12 +138,53 @@
   const { data: userOrganizationAccountsData } =
     useGetUsersOrganizationsAccountsQuery();
 
+  let setupData = personalPreferencesData?.user.setup;
+  // TODO: get actual setup data
+  setupData = 'locale';
+
+  useEffect(() => {
+    if (setupData && setupData !== 'finish') {
+      const position = setupPositions.indexOf(setupData);
+      setSetup(position);
+      setExpandedPanel(accordionPanelPositions[position]);
+    }
+  }, [setupData]);
+
   return (
     <SettingsWrapper
       pageTitle={t('Preferences')}
       pageHeading={t('Preferences')}
       selectedMenuId={'preferences'}
     >
+      <StickyBox>
+        <Alert
+          severity="info"
+          variant="outlined"
+          iconMapping={{
+            info: <CampaignIcon fontSize="large" />,
+          }}
+          action={
+            <Button variant="contained" onClick={handleSetupChange}>
+              {t('Skip Step')}
+            </Button>
+          }
+          sx={{ marginY: 2 }}
+        >
+          {setup === 1 && (
+            <Typography variant="h6">{t("Let's set your locale!")}</Typography>
+          )}
+          {setup === 2 && (
+            <Typography variant="h6">
+              {t('Great progress comes from great goals!')}
+            </Typography>
+          )}
+          {setup === 3 && (
+            <Typography variant="h6">
+              {t('What Country are you in?')}
+            </Typography>
+          )}
+        </Alert>
+      </StickyBox>
       <ProfileInfo accountListId={accountListId} />
       <AccordionGroup title={t('Personal Preferences')}>
         {personalPreferencesLoading && (
@@ -100,13 +202,15 @@
               handleAccordionChange={handleAccordionChange}
               expandedPanel={expandedPanel}
               locale={personalPreferencesData?.user?.preferences?.locale || ''}
+              disabled={!!setup}
             />
             <LocaleAccordion
               handleAccordionChange={handleAccordionChange}
               expandedPanel={expandedPanel}
               localeDisplay={
                 personalPreferencesData?.user?.preferences?.localeDisplay || ''
               }
+              disabled={!!setup && setup !== 1}
             />
             <DefaultAccountAccordion
               handleAccordionChange={handleAccordionChange}
@@ -116,6 +220,7 @@
               defaultAccountList={
                 personalPreferencesData?.user?.defaultAccountList || ''
               }
+              disabled={!!setup}
             />
             <TimeZoneAccordion
               handleAccordionChange={handleAccordionChange}
@@ -124,6 +229,7 @@
                 personalPreferencesData?.user?.preferences?.timeZone || ''
               }
               timeZones={timeZones}
+              disabled={!!setup}
             />
             <HourToSendNotificationsAccordion
               handleAccordionChange={handleAccordionChange}
@@ -132,6 +238,7 @@
                 personalPreferencesData?.user?.preferences
                   ?.hourToSendNotifications || null
               }
+              disabled={!!setup}
             />
           </>
         )}
@@ -153,6 +260,7 @@
               expandedPanel={expandedPanel}
               name={accountPreferencesData?.accountList?.name || ''}
               accountListId={accountListId}
+              disabled={!!setup}
             />
             <MonthlyGoalAccordion
               handleAccordionChange={handleAccordionChange}
@@ -165,6 +273,7 @@
               currency={
                 accountPreferencesData?.accountList?.settings?.currency || ''
               }
+              disabled={!!setup && setup !== 2}
             />
             <HomeCountryAccordion
               handleAccordionChange={handleAccordionChange}
@@ -174,6 +283,7 @@
               }
               accountListId={accountListId}
               countries={countries}
+              disabled={!!setup && setup !== 3}
             />
             <CurrencyAccordion
               handleAccordionChange={handleAccordionChange}

src/components/Settings/preferences/GetPersonalPreferences.graphql

@@ -2,6 +2,7 @@ query GetPersonalPreferences($accountListId: ID!) {
   user {
     id
     defaultAccountList
+    setup
     preferences {
       id
       timeZone

src/components/Settings/preferences/accordions/AccountNameAccordion/AccountNameAccordion.tsx

@@ -21,13 +21,15 @@ interface AccountNameAccordionProps {
   expandedPanel: string;
   accountListId: string;
   name: string;
+  disabled?: boolean;
 }
 
 export const AccountNameAccordion: React.FC<AccountNameAccordionProps> = ({
   handleAccordionChange,
   expandedPanel,
   name,
   accountListId,
+  disabled,
 }) => {
   const { t } = useTranslation();
   const { appName } = useGetAppSettings();
@@ -67,6 +69,7 @@ export const AccountNameAccordion: React.FC<AccountNameAccordionProps> = ({
       label={label}
       value={name}
       fullWidth
+      disabled={disabled}
     >
       <Formik
         initialValues={{

src/components/Settings/preferences/accordions/DefaultAccountAccordion/DefaultAccountAccordion.tsx

@@ -18,6 +18,7 @@ interface DefaultAccountAccordionProps {
   data: GetPersonalPreferencesQuery | undefined;
   accountListId: string;
   defaultAccountList: string;
+  disabled?: boolean;
 }
 
 const preferencesSchema: yup.SchemaOf<Pick<User, 'defaultAccountList'>> =
@@ -27,7 +28,13 @@ const preferencesSchema: yup.SchemaOf<Pick<User, 'defaultAccountList'>> =
 
 export const DefaultAccountAccordion: React.FC<
   DefaultAccountAccordionProps
-> = ({ handleAccordionChange, expandedPanel, data, defaultAccountList }) => {
+> = ({
+  handleAccordionChange,
+  expandedPanel,
+  data,
+  defaultAccountList,
+  disabled,
+}) => {
   const { t } = useTranslation();
   const { appName } = useGetAppSettings();
   const { enqueueSnackbar } = useSnackbar();
@@ -71,6 +78,7 @@ export const DefaultAccountAccordion: React.FC<
       label={label}
       value={selectedAccount}
       fullWidth
+      disabled={disabled}
     >
       <Formik
         initialValues={{

src/components/Settings/preferences/accordions/HomeCountryAccordion/HomeCountryAccordion.tsx

@@ -22,6 +22,7 @@ interface HomeCountryAccordionProps {
   homeCountry: string;
   accountListId: string;
   countries: { name: string; code: string }[];
+  disabled?: boolean;
 }
 
 export const HomeCountryAccordion: React.FC<HomeCountryAccordionProps> = ({
@@ -30,6 +31,7 @@ export const HomeCountryAccordion: React.FC<HomeCountryAccordionProps> = ({
   homeCountry,
   accountListId,
   countries,
+  disabled,
 }) => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
@@ -78,6 +80,7 @@ export const HomeCountryAccordion: React.FC<HomeCountryAccordionProps> = ({
       label={label}
       value={selectedCountry}
       fullWidth
+      disabled={disabled}
     >
       <Formik
         initialValues={{

src/components/Settings/preferences/accordions/HourToSendNotificationsAccordion/HourToSendNotificationsAccordion.tsx

@@ -22,11 +22,17 @@ interface HourToSendNotificationsAccordionProps {
   handleAccordionChange: (panel: string) => void;
   expandedPanel: string;
   hourToSendNotifications: number | null;
+  disabled?: boolean;
 }
 
 export const HourToSendNotificationsAccordion: React.FC<
   HourToSendNotificationsAccordionProps
-> = ({ handleAccordionChange, expandedPanel, hourToSendNotifications }) => {
+> = ({
+  handleAccordionChange,
+  expandedPanel,
+  hourToSendNotifications,
+  disabled,
+}) => {
   const { t } = useTranslation();
   const { appName } = useGetAppSettings();
   const { enqueueSnackbar } = useSnackbar();
@@ -77,6 +83,7 @@ export const HourToSendNotificationsAccordion: React.FC<
       label={label}
       value={selectedHour || ''}
       fullWidth
+      disabled={disabled}
     >
       <Formik
         initialValues={{

src/components/Settings/preferences/accordions/LanguageAccordion/LanguageAccordion.tsx

@@ -20,12 +20,14 @@ interface LanguageAccordionProps {
   handleAccordionChange: (panel: string) => void;
   expandedPanel: string;
   locale: string;
+  disabled?: boolean;
 }
 
 export const LanguageAccordion: React.FC<LanguageAccordionProps> = ({
   handleAccordionChange,
   expandedPanel,
   locale,
+  disabled,
 }) => {
   const { t } = useTranslation();
   const { appName } = useGetAppSettings();
@@ -69,6 +71,7 @@ export const LanguageAccordion: React.FC<LanguageAccordionProps> = ({
       label={label}
       value={selectedLanguage}
       fullWidth
+      disabled={disabled}
     >
       <Formik
         initialValues={{

src/components/Settings/preferences/accordions/LocaleAccordion/LocaleAccordion.tsx

@@ -20,12 +20,14 @@ interface LocaleAccordionProps {
   handleAccordionChange: (panel: string) => void;
   expandedPanel: string;
   localeDisplay: string;
+  disabled?: boolean;
 }
 
 export const LocaleAccordion: React.FC<LocaleAccordionProps> = ({
   handleAccordionChange,
   expandedPanel,
   localeDisplay,
+  disabled,
 }) => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
@@ -80,6 +82,7 @@ export const LocaleAccordion: React.FC<LocaleAccordionProps> = ({
       label={label}
       value={selectedLocale || ''}
       fullWidth
+      disabled={disabled}
     >
       <Formik
         initialValues={{