Merge pull request #1025 from CruGlobal/8094-setup-finish-page

[MPDX-8094] Add setup finish page
CruGlobal · Sep 4, 2024 · e51dddf · e51dddf
2 parents 7760bad + 671879b
commit e51dddf
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 1 deletion.
diff --git a/pages/accountLists/[accountListId]/setup/finish.page.test.tsx b/pages/accountLists/[accountListId]/setup/finish.page.test.tsx
@@ -0,0 +1,69 @@
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import AccountPage from './finish.page';
+
+jest.mock('src/lib/apollo/ssrClient');
+
+const accountListId = 'account-list-1';
+
+const push = jest.fn();
+const router = {
+  query: { accountListId },
+  isReady: true,
+  push,
+};
+
+const mutationSpy = jest.fn();
+
+const TestComponent: React.FC = () => (
+  <TestRouter router={router}>
+    <GqlMockedProvider onCall={mutationSpy}>
+      <AccountPage />
+    </GqlMockedProvider>
+  </TestRouter>
+);
+
+describe('Finish account page', () => {
+  it('immediately sets setup position to finish', async () => {
+    render(<TestComponent />);
+
+    await waitFor(() =>
+      expect(mutationSpy).toHaveGraphqlOperation('UpdateUserOptions', {
+        key: 'setup_position',
+        value: 'finish',
+      }),
+    );
+  });
+
+  it('yes button redirects to tools', async () => {
+    const { getByRole } = render(<TestComponent />);
+
+    userEvent.click(getByRole('button', { name: /Yes/ }));
+
+    await waitFor(() =>
+      expect(mutationSpy).toHaveGraphqlOperation('UpdateUserOptions', {
+        key: 'setup_position',
+        value: '',
+      }),
+    );
+    expect(push).toHaveBeenCalledWith(
+      `/accountLists/${accountListId}/tools?setup=1`,
+    );
+  });
+
+  it('no button redirects to the dashboard', async () => {
+    const { getByRole } = render(<TestComponent />);
+
+    userEvent.click(getByRole('button', { name: /Nope/ }));
+
+    await waitFor(() =>
+      expect(mutationSpy).toHaveGraphqlOperation('UpdateUserOptions', {
+        key: 'setup_position',
+        value: '',
+      }),
+    );
+    expect(push).toHaveBeenCalledWith(`/accountLists/${accountListId}`);
+  });
+});
diff --git a/pages/accountLists/[accountListId]/setup/finish.page.tsx b/pages/accountLists/[accountListId]/setup/finish.page.tsx
@@ -0,0 +1,85 @@
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import React, { useEffect } from 'react';
+import { Button } from '@mui/material';
+import { Trans, useTranslation } from 'react-i18next';
+import { loadSession } from 'pages/api/utils/pagePropsHelpers';
+import { useUpdateUserOptionsMutation } from 'src/components/Contacts/ContactFlow/ContactFlowSetup/UpdateUserOptions.generated';
+import { SetupPage } from 'src/components/Setup/SetupPage';
+import { LargeButton } from 'src/components/Setup/styledComponents';
+import { useAccountListId } from 'src/hooks/useAccountListId';
+import useGetAppSettings from 'src/hooks/useGetAppSettings';
+
+// This is the last page of the tour, and it lets users choose to go to the
+// tools page. It is always shown.
+const FinishPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { appName } = useGetAppSettings();
+  const accountListId = useAccountListId();
+  const { push } = useRouter();
+  const [updateUserOptions] = useUpdateUserOptionsMutation();
+
+  const setSetupPosition = (setupPosition: string) =>
+    updateUserOptions({
+      variables: {
+        key: 'setup_position',
+        value: setupPosition,
+      },
+    });
+
+  useEffect(() => {
+    setSetupPosition('finish');
+  }, []);
+
+  const handleNext = async () => {
+    await setSetupPosition('');
+    push(`/accountLists/${accountListId}/tools?setup=1`);
+  };
+
+  const handleFinish = async () => {
+    await setSetupPosition('');
+    push(`/accountLists/${accountListId}`);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>
+          {appName} | {t('Setup - Finish')}
+        </title>
+      </Head>
+      <SetupPage
+        title={
+          <Trans>
+            Congratulations!
+            <br />
+            You&apos;re all set!
+          </Trans>
+        }
+      >
+        <p>
+          {t(
+            `One of the great features of {{appName}} is its ability to bring in information and contacts from other places you might have used in the past.
+You can import from software like TntConnect, Google Contacts or a Spreadsheet.`,
+            { appName },
+          )}
+        </p>
+        <p>
+          {t(
+            "Would you like to import that data now? (Current users don't need to reimport their data)",
+          )}
+        </p>
+        <LargeButton variant="contained" fullWidth onClick={handleNext}>
+          {t('Yes! Import my stuff!')}
+        </LargeButton>
+        <Button fullWidth onClick={handleFinish}>
+          {t("Nope, I'm all done! Take me to {{appName}}", { appName })}
+        </Button>
+      </SetupPage>
+    </>
+  );
+};
+
+export const getServerSideProps = loadSession;
+
+export default FinishPage;
diff --git a/src/components/Setup/SetupPage.tsx b/src/components/Setup/SetupPage.tsx
@@ -38,18 +38,22 @@ const StyledIcon = styled(CampaignOutlined)(({ theme }) => ({
 }));
 
 const HeaderWrapper = styled('div')(({ theme }) => ({
+  width: '100%',
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'space-around',
   gap: theme.spacing(1),
 }));
 
 const HeaderTypography = styled(Typography)({
   fontSize: '2.75rem',
   fontWeight: 'bold',
+  flex: 1,
+  textAlign: 'center',
 });
 
 interface SetupPageProps {
-  title: string;
+  title: ReactNode;
   children: ReactNode;
 }