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 committed Aug 30, 2023
1 parent effb208 commit 4ade307
Show file tree
Hide file tree
Showing 7 changed files with 647 additions and 52 deletions.
3 changes: 2 additions & 1 deletion frontend/benefit/applicant/package.json
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 --experimental-proxyless"
},
"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
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import NotificationView from 'benefit/applicant/components/notificationView/NotificationView';
import PdfViewer from 'benefit/applicant/components/pdfViewer/PdfViewer';
import { $Markdown } from 'benefit/applicant/components/termsOfService/TermsOfService';
import { DynamicFormStepComponentProps } from 'benefit/applicant/types/common';
import { TextProp } from 'benefit-shared/types/application';
import { Button } from 'hds-react';
Expand Down Expand Up @@ -33,6 +34,7 @@ const ApplicationFormStep6: React.FC<
textLocale,
checkedArray,
applicantTermsInEffectUrl,
applicantTermsInEffectMd,
} = useApplicationFormStep6(data, onSubmit);

if (isSubmittedApplication) {
Expand All @@ -50,30 +52,39 @@ const ApplicationFormStep6: React.FC<
);
}

// todo: implement resizing for pdf reader (f. ex. react-sizeme), styling as in design
return (
<form onSubmit={handleSubmit} noValidate>
<FormSection>
<>
{data && (
<>
<$GridCell $colSpan={12}>
<PdfViewer file={applicantTermsInEffectUrl} scale={1.8} />
</$GridCell>
<$GridCell
$colSpan={5}
css={`
margin-bottom: var(--spacing-l);
`}
>
<Button
theme="black"
variant="secondary"
onClick={() => openFileInNewTab(applicantTermsInEffectUrl)}
>
{t('common:applications.actions.openTermsAsPDF')}
</Button>
</$GridCell>
{applicantTermsInEffectMd ? (
<$Markdown>{applicantTermsInEffectMd}</$Markdown>
) : null}
{applicantTermsInEffectUrl.length > 0 ? (
<>
<$GridCell $colSpan={12}>
<PdfViewer file={applicantTermsInEffectUrl} scale={1.8} />
</$GridCell>

<$GridCell
$colSpan={5}
css={`
margin-bottom: var(--spacing-l);
`}
>
<Button
theme="black"
variant="secondary"
onClick={() =>
openFileInNewTab(applicantTermsInEffectUrl)
}
>
{t('common:applications.actions.openTermsAsPDF')}
</Button>
</$GridCell>
</>
) : null}
</>
)}
{data?.applicantTermsInEffect?.applicantConsents.map((consent, i) => (
Expand Down
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,25 @@ const useApplicationFormStep6 = (
void onDelete(application.id ?? '');
};

const getTermsMarkdownByLanguage = (): string => {
if (!application.applicantTermsInEffect) return '';
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 +171,7 @@ const useApplicationFormStep6 = (
textLocale,
checkedArray,
applicantTermsInEffectUrl,
applicantTermsInEffectMd,
};
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,50 @@ 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)`
* {
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 +66,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
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
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 @@ -517,9 +520,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 4ade307

Please sign in to comment.