Create setup start page

CruGlobal · Aug 22, 2024 · 95d187f · 95d187f
1 parent 0f63971
commit 95d187f
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 0 deletions.
diff --git a/pages/setup/start.page.test.tsx b/pages/setup/start.page.test.tsx
@@ -0,0 +1,39 @@
+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 StartPage from './start.page';
+
+const push = jest.fn();
+const router = {
+  push,
+};
+
+describe('Setup start page', () => {
+  it('autocomplete renders and button saves and advances to the next page', async () => {
+    Object.defineProperty(window, 'navigator', {
+      value: { ...window.navigator, language: 'fr-FR' },
+    });
+
+    const mutationSpy = jest.fn();
+    const { getByRole } = render(
+      <TestRouter router={router}>
+        <GqlMockedProvider onCall={mutationSpy}>
+          <StartPage />
+        </GqlMockedProvider>
+      </TestRouter>,
+    );
+
+    const autocomplete = getByRole('combobox');
+    expect(autocomplete).toHaveValue('French (français)');
+    userEvent.click(autocomplete);
+    userEvent.click(getByRole('option', { name: 'German (Deutsch)' }));
+    userEvent.click(getByRole('button', { name: "Let's Begin" }));
+    await waitFor(() =>
+      expect(mutationSpy).toHaveGraphqlOperation('UpdatePersonalPreferences', {
+        input: { attributes: { locale: 'de' } },
+      }),
+    );
+    expect(push).toHaveBeenCalledWith('/setup/connect');
+  });
+});
diff --git a/pages/setup/start.page.tsx b/pages/setup/start.page.tsx
@@ -0,0 +1,100 @@
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import React, { ReactElement, useState } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { PrivacyPolicyLink, TermsOfUseLink } from 'src/components/Links/Links';
+import { useUpdatePersonalPreferencesMutation } from 'src/components/Settings/preferences/accordions/UpdatePersonalPreferences.generated';
+import { PageHeader } from 'src/components/Setup/PageHeader';
+import {
+  LargeButton,
+  PageWrapper,
+} from 'src/components/Setup/styledComponents';
+import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { formatLanguage, languages } from 'src/lib/data/languages';
+import { loadSession } from '../api/utils/pagePropsHelpers';
+
+// This is the first page of the tour, and it lets users choose their language. It is always shown.
+const StartPage = (): ReactElement => {
+  const { t } = useTranslation();
+  const { appName } = useGetAppSettings();
+  const { push } = useRouter();
+  const [savePreferences] = useUpdatePersonalPreferencesMutation();
+
+  const [locale, setLocale] = useState<string>(
+    (typeof window === 'undefined'
+      ? null
+      : window.navigator.language.toLowerCase()) || 'en-us',
+  );
+
+  const handleSave = async () => {
+    await savePreferences({
+      variables: {
+        input: {
+          attributes: {
+            locale,
+          },
+        },
+      },
+    });
+    push('/setup/connect');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>
+          {appName} | {t('Setup - Start')}
+        </title>
+      </Head>
+      <PageWrapper>
+        <PageHeader title={t("It's time to get started")} />
+        <p>
+          {t(
+            `Developing a healthy team of ministry partners sets your ministry up to thrive.
+{{ appName }} is designed to help you do the right things, with the right people at the right time to be fully funded.`,
+            { appName },
+          )}
+        </p>
+        <p>
+          {t(
+            `To get started, we're going to walk with you through a few key steps to set you up for success in {{ appName }}!`,
+            { appName },
+          )}
+        </p>
+        <p>{t('It looks like you speak')}</p>
+        <Autocomplete
+          autoHighlight
+          disableClearable
+          value={locale}
+          onChange={(_, value) => {
+            setLocale(value);
+          }}
+          options={languages.map((language) => language.id) || []}
+          getOptionLabel={(locale) => formatLanguage(locale)}
+          fullWidth
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              placeholder={t('Language')}
+              label={t('Language')}
+            />
+          )}
+        />
+        <p>
+          {t('By Clicking "Let\'s Begin!" you have read and agree to the ')}
+          <PrivacyPolicyLink />
+          {t(' and the ')}
+          <TermsOfUseLink />
+        </p>
+        <LargeButton variant="contained" onClick={handleSave}>
+          {t("Let's Begin")}
+        </LargeButton>
+      </PageWrapper>
+    </>
+  );
+};
+
+export const getServerSideProps = loadSession;
+
+export default StartPage;
diff --git a/src/components/Setup/PageHeader.tsx b/src/components/Setup/PageHeader.tsx
@@ -0,0 +1,30 @@
+import { CampaignOutlined } from '@mui/icons-material';
+import { Box, Divider, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const StyledIcon = styled(CampaignOutlined)(({ theme }) => ({
+  width: 'auto',
+  height: theme.spacing(8),
+}));
+
+const Wrapper = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+}));
+
+const StyledTypography = styled(Typography)({ fontWeight: 'bold' });
+
+interface PageHeaderProps {
+  title: string;
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ title }) => (
+  <>
+    <Wrapper>
+      <StyledIcon />
+      <StyledTypography variant="h2">{title}</StyledTypography>
+    </Wrapper>
+    <Divider sx={{ width: '100%' }} />
+  </>
+);
diff --git a/src/components/Setup/styledComponents.ts b/src/components/Setup/styledComponents.ts
@@ -0,0 +1,17 @@
+import { Box, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const PageWrapper = styled(Box)(({ theme }) => ({
+  marginInline: 'auto',
+  padding: theme.spacing(4),
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  alignItems: 'center',
+  textAlign: 'center',
+  maxWidth: theme.spacing(100),
+}));
+
+export const LargeButton = styled(Button)(({ theme }) => ({
+  fontSize: theme.spacing(4),
+}));
diff --git a/src/components/User/GetUser.graphql b/src/components/User/GetUser.graphql
@@ -10,6 +10,7 @@ query GetUser {
       email
     }
     preferences {
+      id
       language: locale
       locale: localeDisplay
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ query GetUser { @@
           email
         }
         preferences {
+          id
           language: locale
           locale: localeDisplay
         }
@@ Expand Down @@