feat: use markdown to display service terms

City-of-Helsinki · Aug 30, 2023 · 4ade307 · 4ade307
1 parent effb208
commit 4ade307
Show file tree

Hide file tree

Showing 7 changed files with 647 additions and 52 deletions.
diff --git a/frontend/benefit/applicant/package.json b/frontend/benefit/applicant/package.json
@@ -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",
@@ -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",

diff --git a/...it/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx b/...it/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx
@@ -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';
@@ -33,6 +34,7 @@ const ApplicationFormStep6: React.FC<
     textLocale,
     checkedArray,
     applicantTermsInEffectUrl,
+    applicantTermsInEffectMd,
   } = useApplicationFormStep6(data, onSubmit);
 
   if (isSubmittedApplication) {
@@ -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) => (

diff --git a/.../applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts b/.../applicant/src/components/applications/forms/application/step6/useApplicationFormStep6.ts
@@ -30,6 +30,7 @@ type ExtendedComponentProps = {
   textLocale: string;
   checkedArray: boolean[];
   applicantTermsInEffectUrl: string;
+  applicantTermsInEffectMd: string;
 };
 
 const useApplicationFormStep6 = (
@@ -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 &&
@@ -151,6 +171,7 @@ const useApplicationFormStep6 = (
     textLocale,
     checkedArray,
     applicantTermsInEffectUrl,
+    applicantTermsInEffectMd,
   };
 };
 

diff --git a/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx b/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx
@@ -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();
 
@@ -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>

diff --git a/frontend/benefit/applicant/src/hooks/useTermsOfServiceData.ts b/frontend/benefit/applicant/src/hooks/useTermsOfServiceData.ts
@@ -14,7 +14,8 @@ type ExtendedComponentProps = {
   locale: Language;
   theme: DefaultTheme;
   t: TFunction;
-  termsInEffectUrl: string;
+  termsInEffectUrl?: string;
+  termsInEffectMarkdown?: string;
   user: User | undefined;
   approveTermsOfService: () => void;
 };
@@ -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,
   };

diff --git a/frontend/benefit/shared/src/types/application.d.ts b/frontend/benefit/shared/src/types/application.d.ts
@@ -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;
 };
 
@@ -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[];
 };