Skip to content

Commit

Permalink
feat: use markdown to display service terms
Browse files Browse the repository at this point in the history
  • Loading branch information
@sirtawast
sirtawast committed Aug 16, 2023
1 parent d1b6b56 commit b12ddbc
Show file tree
Hide file tree
Showing 7 changed files with 621 additions and 34 deletions.
3 changes: 2 additions & 1 deletion frontend/benefit/applicant/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
"browser-test:ci": "testcafe 'chrome:headless --disable-gpu --window-size=\"1249,720\" --ignore-certificate-errors-spki-list=\"8sg/cl7YabrOFqSqH+Bu0e+P27Av33gWgi8Lq28DW1I=,gJt+wt/T3afCRkxtMMSjXcl/99sgzWc2kk1c1PC9tG0=,zrQI2/1q8i2SRPmMZ1sMntIkG+lMW0legPFokDo3nrY=\"' --screenshots path=report --video report --reporter spec,custom,html:report/index.html browser-tests/newApplication/company.testcafe.ts"
},
"dependencies": {
"@frontend/shared": "*",
"@frontend/benefit-shared": "*",
"@frontend/shared": "*",
"@react-pdf/renderer": "^3.1.12",
"@sentry/browser": "^7.16.0",
"@sentry/nextjs": "^7.16.0",
Expand All @@ -39,6 +39,7 @@
"react-dom": "^18.0.0",
"react-input-mask": "^2.0.4",
"react-loading-skeleton": "^3.0.3",
"react-markdown": "^8.0.7",
"react-pdf": "^7.1.2",
"react-query": "^3.34.0",
"react-toastify": "^9.0.4",
Expand Down
3 changes: 3 additions & 0 deletions ...it/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { openFileInNewTab } from 'shared/utils/file.utils';

import StepperActions from '../stepperActions/StepperActions';
import { useApplicationFormStep6 } from './useApplicationFormStep6';
import { $Markdown } from 'benefit/applicant/components/termsOfService/TermsOfService';

type ExtendedProps = {
isSubmittedApplication?: boolean;
Expand All @@ -33,6 +34,7 @@ const ApplicationFormStep6: React.FC<
textLocale,
checkedArray,
applicantTermsInEffectUrl,
applicantTermsInEffectMd,
} = useApplicationFormStep6(data, onSubmit);

if (isSubmittedApplication) {
Expand All @@ -57,6 +59,7 @@ const ApplicationFormStep6: React.FC<
<>
{data && (
<>
<$Markdown>{applicantTermsInEffectMd}</$Markdown>
<$GridCell $colSpan={12}>
<PdfViewer file={applicantTermsInEffectUrl} scale={1.8} />
</$GridCell>
Expand Down
20 changes: 20 additions & 0 deletions .../applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ type ExtendedComponentProps = {
textLocale: string;
checkedArray: boolean[];
applicantTermsInEffectUrl: string;
applicantTermsInEffectMd: string;
};

const useApplicationFormStep6 = (
Expand Down Expand Up @@ -127,6 +128,24 @@ const useApplicationFormStep6 = (
void onDelete(application.id ?? '');
};

const getTermsMarkdownByLanguage = (): string => {
switch (locale) {
case 'fi':
return application.applicantTermsInEffect.termsMdFi;

case 'sv':
return application.applicantTermsInEffect.termsMdSv;

case 'en':
return application.applicantTermsInEffect.termsMdEn;

default:
return '';
}
};

const applicantTermsInEffectMd = getTermsMarkdownByLanguage();

const applicantTermsInEffectUrl = React.useMemo(() => {
if (
application.applicantTermsInEffect &&
Expand All @@ -151,6 +170,7 @@ const useApplicationFormStep6 = (
textLocale,
checkedArray,
applicantTermsInEffectUrl,
applicantTermsInEffectMd,
};
};

Expand Down
91 changes: 66 additions & 25 deletions frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,51 @@ import { $PageHeading } from 'benefit/applicant/components/applications/Applicat
import { Button } from 'hds-react';
import { GetStaticProps } from 'next';
import React from 'react';
import ReactMarkdown from 'react-markdown';
import Container from 'shared/components/container/Container';
import FormSection from 'shared/components/forms/section/FormSection';
import { $GridCell, $Hr } from 'shared/components/forms/section/FormSection.sc';
import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
import { openFileInNewTab } from 'shared/utils/file.utils';
import styled from 'styled-components';

import useApproveTermsOfServiceMutation from '../../hooks/useApproveTermsOfServiceMutation';
import useLogout from '../../hooks/useLogout';
import useTermsOfServiceData from '../../hooks/useTermsOfServiceData';
import PdfViewer from '../pdfViewer/PdfViewer';

export const $Markdown = styled(ReactMarkdown)`
* {
font-size: 18px;
line-height: 1.35;
}
ul {
margin-left: var(--spacing-xl);
margin-bottom: var(--spacing-m);
}
ul li {
list-style: disc;
margin-bottom: var(--spacing-xs);
}
`;

type TermsOfServiceProps = {
setIsTermsOfSerivceApproved: (isTermsOfServiceApproved: boolean) => void;
};

const TermsOfService: React.FC<TermsOfServiceProps> = ({
setIsTermsOfSerivceApproved,
}) => {
const { theme, t, termsInEffectUrl, user, approveTermsOfService } =
useTermsOfServiceData(setIsTermsOfSerivceApproved);
const {
theme,
t,
termsInEffectUrl,
termsInEffectMarkdown,
user,
approveTermsOfService,
} = useTermsOfServiceData(setIsTermsOfSerivceApproved);

const { mutate } = useApproveTermsOfServiceMutation();

Expand All @@ -42,30 +67,46 @@ const TermsOfService: React.FC<TermsOfServiceProps> = ({
{t('common:login.termsOfServiceHeader')}
</h2>
</$GridCell>
<$GridCell
$colSpan={12}
css={`
margin-bottom: var(--spacing-xl);
margin-top: var(--spacing-xl);
`}
>
<PdfViewer file={termsInEffectUrl} scale={1.8} />
</$GridCell>
<$GridCell
$colSpan={5}
css={`
margin-bottom: var(--spacing-xl);
margin-top: var(--spacing-xl);
`}
>
<Button
theme="black"
variant="secondary"
onClick={() => openFileInNewTab(termsInEffectUrl)}
{termsInEffectMarkdown?.length > 0 ? (
<$GridCell
$colSpan={12}
css={`
margin-bottom: var(--spacing-xl);
margin-top: var(--spacing-xl);
`}
>
{t('common:applications.actions.openTermsAsPDF')}
</Button>
</$GridCell>
<$Markdown>{termsInEffectMarkdown}</$Markdown>
</$GridCell>
) : null}
{termsInEffectUrl?.length > 0 ? (
<>
<$GridCell
$colSpan={12}
css={`
margin-bottom: var(--spacing-xl);
margin-top: var(--spacing-xl);
`}
>
<PdfViewer file={termsInEffectUrl} scale={1.8} />
</$GridCell>

<$GridCell
$colSpan={5}
css={`
margin-bottom: var(--spacing-xl);
margin-top: var(--spacing-xl);
`}
>
<Button
theme="black"
variant="secondary"
onClick={() => openFileInNewTab(termsInEffectUrl)}
>
{t('common:applications.actions.openTermsAsPDF')}
</Button>
</$GridCell>
</>
) : null}
<$GridCell $colSpan={12}>
<$Hr />
</$GridCell>
Expand Down
22 changes: 21 additions & 1 deletion frontend/benefit/applicant/src/hooks/useTermsOfServiceData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ type ExtendedComponentProps = {
locale: Language;
theme: DefaultTheme;
t: TFunction;
termsInEffectUrl: string;
termsInEffectUrl?: string;
termsInEffectMarkdown?: string;
user: User | undefined;
approveTermsOfService: () => void;
};
Expand Down Expand Up @@ -46,11 +47,30 @@ const useTermsOfServiceData = (
);
};

const getTermsMarkdownByLanguage = (): string => {
switch (locale) {
case 'fi':
return user.termsOfServiceInEffect.termsMdFi;

case 'sv':
return user.termsOfServiceInEffect.termsMdSv;

case 'en':
return user.termsOfServiceInEffect.termsMdSv;

default:
return '';
}
};

const termsInEffectMarkdown = getTermsMarkdownByLanguage();

return {
locale,
theme,
t,
termsInEffectUrl,
termsInEffectMarkdown,
user,
approveTermsOfService,
};
Expand Down
18 changes: 12 additions & 6 deletions frontend/benefit/shared/src/types/application.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,12 @@ export type ApplicantTerms = {
applicantConsents: ApplicantConsent[];
effectiveFrom: string;
id: string;
termsPdfEn: string;
termsPdfFi: string;
termsPdfSv: string;
termsPdfEn?: string;
termsPdfFi?: string;
termsPdfSv?: string;
termsMdEn?: string;
termsMdFi?: string;
termsMdSv?: string;
termsType: ATTACHMENT_TYPES;
};

Expand Down Expand Up @@ -516,9 +519,12 @@ export type ApplicantConsents = {

export type TermsOfServiceInEffect = {
id: string;
termsPdfFi: string;
termsPdfEn: string;
termsPdfSv: string;
termsPdfFi?: string;
termsPdfEn?: string;
termsPdfSv?: string;
termsMdFi?: string;
termsMdEn?: string;
termsMdSv?: string;
applicantConsents: ApplicantConsents[];
};

Expand Down
Loading

0 comments on commit b12ddbc

Please sign in to comment.