[MPDX-8091] Hide links in the navbar when the user is on the setup tour

pages/accountLists/[accountListId]/settings/integrations/index.page.test.tsx

@@ -22,6 +22,7 @@ const push = jest.fn();
 
 const router = {
   query: { accountListId },
+  pathname: '/accountLists/[accountListId]/settings/integrations',
   isReady: true,
   push,
 };

pages/accountLists/[accountListId]/settings/integrations/index.page.tsx

@@ -29,15 +29,15 @@ const Integrations: React.FC = () => {
   const accountListId = useAccountListId() || '';
   const { appName } = useGetAppSettings();
   const { enqueueSnackbar } = useSnackbar();
-  const { settingUp } = useSetupContext();
+  const { onSetupTour } = useSetupContext();
   const [setup, setSetup] = useState(0);
 
   const setupAccordions = ['google', 'mailchimp', 'prayerletters.com'];
 
   const [updateUserOptions] = useUpdateUserOptionsMutation();
 
   const handleSetupChange = async () => {
-    if (!settingUp) {
+    if (!onSetupTour) {
       return;
     }
     const nextNav = setup + 1;
@@ -70,18 +70,18 @@ const Integrations: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    if (settingUp) {
+    if (onSetupTour) {
       setExpandedPanel(setupAccordions[0]);
     }
-  }, [settingUp]);
+  }, [onSetupTour]);
 
   return (
     <SettingsWrapper
       pageTitle={t('Connect Services')}
       pageHeading={t('Connect Services')}
       selectedMenuId="integrations"
     >
-      {settingUp && (
+      {onSetupTour && (
         <StickyBox>
           <SetupBanner
             button={
@@ -99,34 +99,34 @@ const Integrations: React.FC = () => {
         <TheKeyAccordion
           handleAccordionChange={handleAccordionChange}
           expandedPanel={expandedPanel}
-          disabled={settingUp}
+          disabled={onSetupTour}
         />
         <OrganizationAccordion
           handleAccordionChange={handleAccordionChange}
           expandedPanel={expandedPanel}
-          disabled={settingUp}
+          disabled={onSetupTour}
         />
       </AccordionGroup>
       <AccordionGroup title={t('External Services')}>
         <GoogleAccordion
           handleAccordionChange={handleAccordionChange}
           expandedPanel={expandedPanel}
-          disabled={settingUp && setup !== 0}
+          disabled={onSetupTour && setup !== 0}
         />
         <MailchimpAccordion
           handleAccordionChange={handleAccordionChange}
           expandedPanel={expandedPanel}
-          disabled={settingUp && setup !== 1}
+          disabled={onSetupTour && setup !== 1}
         />
         <PrayerlettersAccordion
           handleAccordionChange={handleAccordionChange}
           expandedPanel={expandedPanel}
-          disabled={settingUp && setup !== 2}
+          disabled={onSetupTour && setup !== 2}
         />
         <ChalklineAccordion
           handleAccordionChange={handleAccordionChange}
           expandedPanel={expandedPanel}
-          disabled={settingUp}
+          disabled={onSetupTour}
         />
       </AccordionGroup>
     </SettingsWrapper>

pages/accountLists/[accountListId]/settings/notifications.page.test.tsx

@@ -23,6 +23,7 @@ const push = jest.fn();
 
 const router = {
   query: { accountListId },
+  pathname: '/accountLists/[accountListId]/settings/notifications',
   isReady: true,
   push,
 };

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

@@ -19,12 +19,12 @@ const Notifications: React.FC = () => {
   const accountListId = useAccountListId() || '';
   const { push } = useRouter();
   const { enqueueSnackbar } = useSnackbar();
-  const { settingUp } = useSetupContext();
+  const { onSetupTour } = useSetupContext();
 
   const [updateUserOptions] = useUpdateUserOptionsMutation();
 
   const handleSetupChange = async () => {
-    if (!settingUp) {
+    if (!onSetupTour) {
       return;
     }
 
@@ -48,7 +48,7 @@ const Notifications: React.FC = () => {
       pageHeading={t('Notifications')}
       selectedMenuId="notifications"
     >
-      {settingUp && (
+      {onSetupTour && (
         <StickyBox>
           <SetupBanner
             button={

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

@@ -27,6 +27,7 @@ const push = jest.fn();
 
 const router = {
   query: { accountListId },
+  pathname: '/accountLists/[accountListId]/settings/preferences',
   isReady: true,
   push,
 };

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

@@ -46,7 +46,7 @@ const Preferences: React.FC = () => {
   const accountListId = useAccountListId() || '';
   const { push, query } = useRouter();
   const { enqueueSnackbar } = useSnackbar();
-  const { settingUp } = useSetupContext();
+  const { onSetupTour } = useSetupContext();
 
   const setupAccordions = ['locale', 'monthly goal', 'home country'];
   const [setup, setSetup] = useState(0);
@@ -85,10 +85,10 @@ const Preferences: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    if (settingUp) {
+    if (onSetupTour) {
       setExpandedPanel(setupAccordions[0]);
     }
-  }, [settingUp]);
+  }, [onSetupTour]);
 
   const handleAccordionChange = (panel: string) => {
     const panelLowercase = panel.toLowerCase();
@@ -111,7 +111,7 @@ const Preferences: React.FC = () => {
   };
 
   const handleSetupChange = async () => {
-    if (!settingUp) {
+    if (!onSetupTour) {
       return;
     }
     const nextNav = setup + 1;
@@ -154,7 +154,7 @@ const Preferences: React.FC = () => {
       pageHeading={t('Preferences')}
       selectedMenuId={'preferences'}
     >
-      {settingUp && (
+      {onSetupTour && (
         <StickyBox>
           <SetupBanner
             button={
@@ -183,15 +183,15 @@ const Preferences: React.FC = () => {
               handleAccordionChange={handleAccordionChange}
               expandedPanel={expandedPanel}
               locale={personalPreferencesData?.user?.preferences?.locale || ''}
-              disabled={settingUp}
+              disabled={onSetupTour}
             />
             <LocaleAccordion
               handleAccordionChange={handleAccordionChange}
               expandedPanel={expandedPanel}
               localeDisplay={
                 personalPreferencesData?.user?.preferences?.localeDisplay || ''
               }
-              disabled={settingUp && setup !== 0}
+              disabled={onSetupTour && setup !== 0}
               handleSetupChange={handleSetupChange}
             />
             <DefaultAccountAccordion
@@ -202,7 +202,7 @@ const Preferences: React.FC = () => {
               defaultAccountList={
                 personalPreferencesData?.user?.defaultAccountList || ''
               }
-              disabled={settingUp}
+              disabled={onSetupTour}
             />
             <TimeZoneAccordion
               handleAccordionChange={handleAccordionChange}
@@ -211,7 +211,7 @@ const Preferences: React.FC = () => {
                 personalPreferencesData?.user?.preferences?.timeZone || ''
               }
               timeZones={timeZones}
-              disabled={settingUp}
+              disabled={onSetupTour}
             />
             <HourToSendNotificationsAccordion
               handleAccordionChange={handleAccordionChange}
@@ -220,7 +220,7 @@ const Preferences: React.FC = () => {
                 personalPreferencesData?.user?.preferences
                   ?.hourToSendNotifications || null
               }
-              disabled={settingUp}
+              disabled={onSetupTour}
             />
           </>
         )}
@@ -242,7 +242,7 @@ const Preferences: React.FC = () => {
               expandedPanel={expandedPanel}
               name={accountPreferencesData?.accountList?.name || ''}
               accountListId={accountListId}
-              disabled={settingUp}
+              disabled={onSetupTour}
             />
             <MonthlyGoalAccordion
               handleAccordionChange={handleAccordionChange}
@@ -255,7 +255,7 @@ const Preferences: React.FC = () => {
               currency={
                 accountPreferencesData?.accountList?.settings?.currency || ''
               }
-              disabled={settingUp && setup !== 1}
+              disabled={onSetupTour && setup !== 1}
               handleSetupChange={handleSetupChange}
             />
             <HomeCountryAccordion
@@ -266,7 +266,7 @@ const Preferences: React.FC = () => {
               }
               accountListId={accountListId}
               countries={countries}
-              disabled={settingUp && setup !== 2}
+              disabled={onSetupTour && setup !== 2}
               handleSetupChange={handleSetupChange}
             />
             <CurrencyAccordion
@@ -276,7 +276,7 @@ const Preferences: React.FC = () => {
                 accountPreferencesData?.accountList?.settings?.currency || ''
               }
               accountListId={accountListId}
-              disabled={settingUp}
+              disabled={onSetupTour}
             />
             {userOrganizationAccountsData?.userOrganizationAccounts &&
               userOrganizationAccountsData?.userOrganizationAccounts?.length >
@@ -290,7 +290,7 @@ const Preferences: React.FC = () => {
                     ''
                   }
                   accountListId={accountListId}
-                  disabled={settingUp}
+                  disabled={onSetupTour}
                 />
               )}
             <EarlyAdopterAccordion
@@ -300,7 +300,7 @@ const Preferences: React.FC = () => {
                 accountPreferencesData?.accountList?.settings?.tester || false
               }
               accountListId={accountListId}
-              disabled={settingUp}
+              disabled={onSetupTour}
             />
             <MpdInfoAccordion
               handleAccordionChange={handleAccordionChange}
@@ -319,7 +319,7 @@ const Preferences: React.FC = () => {
                 accountPreferencesData?.accountList?.settings?.currency || ''
               }
               accountListId={accountListId}
-              disabled={settingUp}
+              disabled={onSetupTour}
             />
             {canUserExportData?.canUserExportData.allowed && (
               <ExportAllDataAccordion
@@ -330,7 +330,7 @@ const Preferences: React.FC = () => {
                 }
                 accountListId={accountListId}
                 data={personalPreferencesData}
-                disabled={settingUp}
+                disabled={onSetupTour}
               />
             )}
           </>

src/components/Layouts/Primary/LogoLink/LogoLink.test.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+import { TestSetupProvider } from 'src/components/Setup/SetupProvider';
+import { LogoLink } from './LogoLink';
+
+describe('LogoLink', () => {
+  it('renders a link when not on the setup tour', () => {
+    const { getByRole } = render(
+      <TestSetupProvider>
+        <LogoLink />
+      </TestSetupProvider>,
+    );
+    expect(getByRole('link')).toBeInTheDocument();
+  });
+
+  it('does not render a link when on the setup tour', () => {
+    const { queryByRole } = render(
+      <TestSetupProvider onSetupTour>
+        <LogoLink />
+      </TestSetupProvider>,
+    );
+    expect(queryByRole('link')).not.toBeInTheDocument();
+  });
+});

src/components/Layouts/Primary/LogoLink/LogoLink.tsx

@@ -0,0 +1,17 @@
+import NextLink from 'next/link';
+import { useSetupContext } from 'src/components/Setup/SetupProvider';
+
+export const LogoLink: React.FC = () => {
+  const { onSetupTour } = useSetupContext();
+
+  const logo = <img src={process.env.NEXT_PUBLIC_MEDIA_LOGO} alt="logo" />;
+
+  return onSetupTour ? (
+    logo
+  ) : (
+    <NextLink href="/">
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <a>{logo}</a>
+    </NextLink>
+  );
+};