Render additional info summary PDF (#1452)

* Use form definition instead of schemas when rendering summary PDF * Render additional information in summary PDF * Regenerate assets * Regenerate snapshots * Extract TermsAndConditions to own component --------- Co-authored-by: Marek Bodinger <marek.bodinger@gmail.com>
bratislava · Sep 24, 2024 · 631ad4f · 631ad4f
1 parent be621d8
commit 631ad4f
Show file tree

Hide file tree

Showing 21 changed files with 82 additions and 30 deletions.
diff --git a/forms-shared/src/generated-assets/summaryPdfCss.ts b/forms-shared/src/generated-assets/summaryPdfCss.ts
diff --git a/forms-shared/src/summary-pdf/SummaryPdf.tsx b/forms-shared/src/summary-pdf/SummaryPdf.tsx
@@ -11,12 +11,16 @@ import {
 } from '../summary-renderer/SummaryRenderer'
 import { SummaryJsonForm } from '../summary-json/summaryJsonTypes'
 import Markdown from 'react-markdown'
-import { generalTermsAndConditions } from '../definitions/termsAndConditions'
 import cx from 'classnames'
 import { ValidatedSummary } from '../summary-renderer/validateSummary'
+import { FormDefinition } from '../definitions/formDefinitionTypes'
+import { GenericObjectType } from '@rjsf/utils'
+import { renderFormAdditionalInfo } from '../string-templates/renderTemplate'
 
 type SummaryPdfProps = {
+  formDefinition: FormDefinition
   cssToInject: string
+  formData: GenericObjectType
   summaryJson: SummaryJsonForm
   validatedSummary: ValidatedSummary
 }
@@ -111,7 +115,69 @@ const ArrayItemRenderer = ({ arrayItem, children }: SummaryArrayItemRendererProp
   )
 }
 
-export const SummaryPdf = ({ cssToInject, summaryJson, validatedSummary }: SummaryPdfProps) => {
+const SummaryMarkdown = ({ className, children }: { className: string; children: string }) => {
+  return (
+    <Markdown
+      className={className}
+      components={{
+        h2: ({ children }) => <h2 className="text-h-xl font-semibold mb-4">{children}</h2>,
+        h3: ({ children }) => <h3 className="text-h-lg font-semibold mb-3">{children}</h3>,
+        h4: ({ children }) => <h4 className="text-h-md font-semibold mb-2">{children}</h4>,
+        h5: ({ children }) => <h5 className="text-h-base font-semibold mb-2">{children}</h5>,
+        h6: ({ children }) => <h6 className="text-h-xs font-semibold mb-2">{children}</h6>,
+        p: ({ children }) => <p className="text-p-md font-normal mb-4">{children}</p>,
+        strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+        ol: ({ children }) => <ol className="list-decimal pl-8 mb-4">{children}</ol>,
+        ul: ({ children }) => <ul className="list-disc pl-8 mb-4">{children}</ul>,
+        li: ({ children }) => <li className="text-p-md font-normal mb-2">{children}</li>,
+        a: ({ children, href }) => (
+          <a href={href} className="font-semibold underline" target="_blank">
+            {children}
+          </a>
+        ),
+      }}
+    >
+      {children}
+    </Markdown>
+  )
+}
+
+const AdditionalInfo = ({
+  formDefinition,
+  formData,
+}: Pick<SummaryPdfProps, 'formDefinition' | 'formData'>) => {
+  const additionalInfo = renderFormAdditionalInfo(formDefinition, formData)
+
+  if (!additionalInfo) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-xl font-semibold">Doplňujúce informácie</h2>
+      <SummaryMarkdown className="rounded-xl bg-gray-50 p-6">{additionalInfo}</SummaryMarkdown>
+    </div>
+  )
+}
+
+const TermsAndConditions = ({ formDefinition }: Pick<SummaryPdfProps, 'formDefinition'>) => {
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-xl font-semibold">Ochrana osobných údajov</h2>
+      <SummaryMarkdown className="rounded-xl bg-gray-50 p-6">
+        {formDefinition.termsAndConditions}
+      </SummaryMarkdown>
+    </div>
+  )
+}
+
+export const SummaryPdf = ({
+  formDefinition,
+  cssToInject,
+  summaryJson,
+  validatedSummary,
+  formData,
+}: SummaryPdfProps) => {
   return (
     <html>
       <head>
@@ -133,22 +199,8 @@ export const SummaryPdf = ({ cssToInject, summaryJson, validatedSummary }: Summa
             renderNoneValue={NoneValueRenderer}
             renderInvalidValue={InvalidValueRenderer}
           />
-          <div className="flex flex-col gap-4">
-            <h2 className="text-xl font-semibold">Ochrana osobných údajov</h2>
-            <Markdown
-              className="rounded-xl bg-gray-50 p-6"
-              components={{
-                a: ({ children, href }) => (
-                  <a href={href} className="font-semibold underline" target="_blank">
-                    {children}
-                  </a>
-                ),
-              }}
-            >
-              {/* TODO: Use from form definition. */}
-              {generalTermsAndConditions}
-            </Markdown>
-          </div>
+          <AdditionalInfo formDefinition={formDefinition} formData={formData} />
+          <TermsAndConditions formDefinition={formDefinition} />
         </div>
       </body>
     </html>

diff --git a/forms-shared/src/summary-pdf/renderSummaryPdf.tsx b/forms-shared/src/summary-pdf/renderSummaryPdf.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import type { Browser } from 'playwright'
-import { GenericObjectType, RJSFSchema, UiSchema } from '@rjsf/utils'
+import { GenericObjectType } from '@rjsf/utils'
 import { getSummaryJsonNode } from '../summary-json/getSummaryJsonNode'
 import { renderToString } from 'react-dom/server'
 import { SummaryPdf } from './SummaryPdf'
@@ -9,10 +9,10 @@ import { ClientFileInfo } from '../form-files/fileStatus'
 import { mergeClientAndServerFilesSummary } from '../form-files/mergeClientAndServerFiles'
 import { validateSummary } from '../summary-renderer/validateSummary'
 import summaryPdfCss from '../generated-assets/summaryPdfCss'
+import { FormDefinition } from '../definitions/formDefinitionTypes'
 
 export type RenderSummaryPdfPayload = {
-  jsonSchema: RJSFSchema
-  uiSchema: UiSchema
+  formDefinition: FormDefinition
   formData: GenericObjectType
   /**
    * Playwright must be installed and managed by the consumer of this function (e.g. in Docker) to run correctly, and is
@@ -27,23 +27,25 @@ export type RenderSummaryPdfPayload = {
  * Renders a summary PDF from the given JSON schema, UI schema and data.
  */
 export const renderSummaryPdf = async ({
-  jsonSchema,
-  uiSchema,
+  formDefinition,
   formData,
   launchBrowser,
   clientFiles,
   serverFiles,
 }: RenderSummaryPdfPayload) => {
-  const summaryJson = getSummaryJsonNode(jsonSchema, uiSchema, formData)
+  const { schema, uiSchema } = formDefinition.schemas
+  const summaryJson = getSummaryJsonNode(schema, uiSchema, formData)
 
   const fileInfos = mergeClientAndServerFilesSummary(clientFiles, serverFiles)
-  const validatedSummary = validateSummary(jsonSchema, formData, fileInfos)
+  const validatedSummary = validateSummary(schema, formData, fileInfos)
 
   const renderedString = renderToString(
     <SummaryPdf
+      formDefinition={formDefinition}
       cssToInject={summaryPdfCss.toString()}
       summaryJson={summaryJson}
       validatedSummary={validatedSummary}
+      formData={formData}
     ></SummaryPdf>,
   )
   const browser = await launchBrowser()

diff --git a/...ary-json-komunitne-zahrady-example-summary-pdf-should-match-snapshot-3-snap.png b/...ary-json-komunitne-zahrady-example-summary-pdf-should-match-snapshot-3-snap.png
diff --git a/...-summary-json-predzahradky-example-summary-pdf-should-match-snapshot-2-snap.png b/...-summary-json-predzahradky-example-summary-pdf-should-match-snapshot-2-snap.png
diff --git a/...e-k-dani-z-nehnutelnosti-example-1-summary-pdf-should-match-snapshot-3-snap.png b/...e-k-dani-z-nehnutelnosti-example-1-summary-pdf-should-match-snapshot-3-snap.png
diff --git a/...e-k-dani-z-nehnutelnosti-example-1-summary-pdf-should-match-snapshot-4-snap.png b/...e-k-dani-z-nehnutelnosti-example-1-summary-pdf-should-match-snapshot-4-snap.png
diff --git a/...e-k-dani-z-nehnutelnosti-example-2-summary-pdf-should-match-snapshot-4-snap.png b/...e-k-dani-z-nehnutelnosti-example-2-summary-pdf-should-match-snapshot-4-snap.png
diff --git a/...e-k-dani-z-nehnutelnosti-example-2-summary-pdf-should-match-snapshot-5-snap.png b/...e-k-dani-z-nehnutelnosti-example-2-summary-pdf-should-match-snapshot-5-snap.png
diff --git a/...e-k-dani-z-nehnutelnosti-example-3-summary-pdf-should-match-snapshot-4-snap.png b/...e-k-dani-z-nehnutelnosti-example-3-summary-pdf-should-match-snapshot-4-snap.png
diff --git a/...e-k-dani-z-nehnutelnosti-example-4-summary-pdf-should-match-snapshot-2-snap.png b/...e-k-dani-z-nehnutelnosti-example-4-summary-pdf-should-match-snapshot-2-snap.png
diff --git a/...e-k-dani-z-nehnutelnosti-example-4-summary-pdf-should-match-snapshot-3-snap.png b/...e-k-dani-z-nehnutelnosti-example-4-summary-pdf-should-match-snapshot-3-snap.png
diff --git a/...-k-dani-z-nehnutelnosti-example-5-summary-pdf-should-match-snapshot-10-snap.png b/...-k-dani-z-nehnutelnosti-example-5-summary-pdf-should-match-snapshot-10-snap.png
diff --git a/...e-k-dani-z-nehnutelnosti-example-5-summary-pdf-should-match-snapshot-9-snap.png b/...e-k-dani-z-nehnutelnosti-example-5-summary-pdf-should-match-snapshot-9-snap.png
diff --git a/...isko-k-investicnemu-zameru-example-summary-pdf-should-match-snapshot-2-snap.png b/...isko-k-investicnemu-zameru-example-summary-pdf-should-match-snapshot-2-snap.png
diff --git a/...sko-k-investicnej-cinnosti-example-summary-pdf-should-match-snapshot-3-snap.png b/...sko-k-investicnej-cinnosti-example-summary-pdf-should-match-snapshot-3-snap.png
diff --git a/...-json-ziadost-o-najom-bytu-example-summary-pdf-should-match-snapshot-7-snap.png b/...-json-ziadost-o-najom-bytu-example-summary-pdf-should-match-snapshot-7-snap.png
diff --git a/...-json-ziadost-o-najom-bytu-example-summary-pdf-should-match-snapshot-8-snap.png b/...-json-ziadost-o-najom-bytu-example-summary-pdf-should-match-snapshot-8-snap.png
diff --git a/...-json-ziadost-o-najom-bytu-example-summary-pdf-should-match-snapshot-9-snap.png b/...-json-ziadost-o-najom-bytu-example-summary-pdf-should-match-snapshot-9-snap.png
diff --git a/forms-shared/tests/summary-pdf/renderSummaryPdf.ts b/forms-shared/tests/summary-pdf/renderSummaryPdf.ts
@@ -17,8 +17,7 @@ describe('getSummaryJson', () => {
       )
 
       const pdfBuffer = await renderSummaryPdf({
-        jsonSchema: formDefinition.schemas.schema,
-        uiSchema: formDefinition.schemas.uiSchema,
+        formDefinition,
         formData: exampleForm.formData,
         launchBrowser: launchPlaywrightTest,
         serverFiles: exampleForm.serverFiles,

diff --git a/nest-forms-backend/src/convert/convert.service.ts b/nest-forms-backend/src/convert/convert.service.ts
@@ -296,8 +296,7 @@ export default class ConvertService {
     let pdfBuffer: Buffer
     try {
       pdfBuffer = await renderSummaryPdf({
-        jsonSchema: formDefinition.schemas.schema,
-        uiSchema: formDefinition.schemas.uiSchema,
+        formDefinition,
         formData: jsonForm as GenericObjectType,
         launchBrowser: () => chromium.launch(),
         clientFiles,