Events v2 collect certificate workflow boilerplate code

debug-service-in-chrome.sh

@@ -12,6 +12,7 @@
 SERVICES=(
   "auth:4040"
   "workflow:5050"
+  "events:5555"
   "config:2021"
   "gateway:7070"
   "metrics:1050"

packages/client/.storybook/default-request-handlers.ts

@@ -8,18 +8,19 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-import { http } from 'msw'
 
-import { graphql, HttpResponse } from 'msw'
+/* eslint-disable import/no-relative-parent-imports */
+import { http, graphql, HttpResponse } from 'msw'
+import { createTRPCMsw, httpLink } from '@vafanassieff/msw-trpc'
+import superjson from 'superjson'
 import { mockOfflineData } from '../src/tests/mock-offline-data'
 import forms from '../src/tests/forms.json'
-import superjson from 'superjson'
 import { AppRouter } from '../src/v2-events/trpc'
-import { createTRPCMsw, httpLink } from '@vafanassieff/msw-trpc'
 import {
   tennisClubMembershipEvent,
   tennisClubMembershipEventIndex
 } from '../src/v2-events/features/events/fixtures'
+import { tennisClubMembershipCertifiedCertificateTemplate } from './tennisClubMembershipCertifiedCertificateTemplate'
 
 const tRPCMsw = createTRPCMsw<AppRouter>({
   links: [
@@ -1106,11 +1107,91 @@ export const handlers = {
     })
   ],
   config: [
+    http.get(
+      'http://localhost:6006/api/countryconfig/certificates/tennis-club-membership-certificate.svg',
+      () => {
+        return HttpResponse.text(
+          tennisClubMembershipCertifiedCertificateTemplate
+        )
+      }
+    ),
+    http.get(
+      'http://localhost:6006/api/countryconfig/certificates/tennis-club-membership-certified-certificate.svg',
+      () => {
+        return HttpResponse.text(
+          tennisClubMembershipCertifiedCertificateTemplate
+        )
+      }
+    ),
+
+    http.get(
+      'http://localhost:6006/api/countryconfig/fonts/NotoSans-Regular.ttf',
+      async () => {
+        const fontResponse = await fetch(
+          'http://localhost:3040/fonts/NotoSans-Regular.ttf'
+        )
+        const fontArrayBuffer = await fontResponse.arrayBuffer()
+        return HttpResponse.arrayBuffer(fontArrayBuffer)
+      }
+    ),
+
     http.get('http://localhost:2021/config', () => {
       return HttpResponse.json({
         systems: [],
         config: mockOfflineData.config,
-        certificates: []
+        certificates: [
+          {
+            id: 'tennis-club-membership-certificate',
+            event: 'TENNIS_CLUB_MEMBERSHIP',
+            label: {
+              id: 'certificates.tennis-club-membership.certificate.copy',
+              defaultMessage: 'Tennis Club Membership Certificate copy',
+              description: 'The label for a tennis-club-membership certificate'
+            },
+            isDefault: false,
+            fee: {
+              onTime: 7,
+              late: 10.6,
+              delayed: 18
+            },
+            svgUrl:
+              '/api/countryconfig/certificates/tennis-club-membership-certificate.svg',
+            fonts: {
+              'Noto Sans': {
+                normal: '/api/countryconfig/fonts/NotoSans-Regular.ttf',
+                bold: '/api/countryconfig/fonts/NotoSans-Bold.ttf',
+                italics: '/api/countryconfig/fonts/NotoSans-Regular.ttf',
+                bolditalics: '/api/countryconfig/fonts/NotoSans-Regular.ttf'
+              }
+            }
+          },
+          {
+            id: 'tennis-club-membership-certified-certificate',
+            event: 'TENNIS_CLUB_MEMBERSHIP',
+            label: {
+              id: 'certificates.tennis-club-membership.certificate.certified-copy',
+              defaultMessage:
+                'Tennis Club Membership Certificate certified copy',
+              description: 'The label for a tennis-club-membership certificate'
+            },
+            isDefault: false,
+            fee: {
+              onTime: 7,
+              late: 10.6,
+              delayed: 18
+            },
+            svgUrl:
+              '/api/countryconfig/certificates/tennis-club-membership-certified-certificate.svg',
+            fonts: {
+              'Noto Sans': {
+                normal: '/api/countryconfig/fonts/NotoSans-Regular.ttf',
+                bold: '/api/countryconfig/fonts/NotoSans-Bold.ttf',
+                italics: '/api/countryconfig/fonts/NotoSans-Regular.ttf',
+                bolditalics: '/api/countryconfig/fonts/NotoSans-Regular.ttf'
+              }
+            }
+          }
+        ]
       })
     })
   ],

packages/client/src/offline/selectors.ts

@@ -47,6 +47,14 @@ export const getOfflineData = (store: IStoreState): IOfflineData => {
   return data
 }
 
+export const getLanguage = createSelector(
+  getOfflineData,
+  (data) => data.languages[0]
+)
+export const getCertificateTemplates = createSelector(
+  getOfflineData,
+  (data) => data.templates.certificates
+)
 export const getLocations = createSelector(getOfflineData, (data) => ({
   ...data.locations,
   ...data.facilities,

packages/client/src/v2-events/STYLEGUIDE.md

@@ -0,0 +1,95 @@
+# Styleguide
+
+## Zod Schemas and types
+
+good:
+
+```
+// This way we can import both the type and validator under same alias.
+const FontFamily = z.object({
+  normal: z.string(),
+  bold: z.string(),
+  italics: z.string(),
+  bolditalics: z.string()
+})
+
+type FontFamily = z.infer<typeof FontFamily>
+```
+
+- Use the same name for file and the main export
+- Prefer variable names without postfix (e.g. schema, data)
+
+## Naming files
+
+good:
+
+```
+- ZodInterfacePascalCase.ts
+- ReactComponentPascalCase.tsx
+- useHookCamelCase.ts
+- anything-else-in-kebab-case.ts
+```
+
+## Naming interfaces
+
+good:
+
+```
+interface ApplicationConfig {
+  certificateTemplates: CertificateTemplateConfig[]
+  language?: LanguageConfig
+}
+```
+
+not-so-good:
+
+```
+interface IApplicationConfig {
+  certificateTemplates: ICertificateTemplateConfig[]
+  language?: ILanguageConfig
+}
+```
+
+# Coding conventions, definition of done
+
+- When introducing a new `MessageDescriptor` create a new row in `client.csv`
+- They should all have `v2.`-prefix
+
+## Naming, abbreviation
+
+When naming things with known abbreviations use camel case format despite of it.
+
+good:
+
+```
+export interface SvgTemplate {
+  definition: string
+}
+
+export function printPdf(template: PdfTemplate, declarationId: string) {
+  const pdf = pdfMake.createPdf(template.definition, undefined, template.fonts)
+  if (isMobileDevice()) {
+    pdf.download(`${declarationId}`)
+  } else {
+    pdf.print()
+  }
+}
+```
+
+not-so-good:
+
+```
+export interface ISVGTemplate {
+  definition: string
+}
+
+export function printPDF(template: PDFTemplate, declarationId: string) {
+ // note: example uses external lib with the same convention.
+  const PDF = pdfMake.createPdf(template.definition, undefined, template.fonts)
+  if (isMobileDevice()) {
+    PDF.download(`${declarationId}`)
+  } else {
+    PDF.print()
+  }
+}
+```

packages/client/src/v2-events/features/events/actions/correct/request/Pages.tsx

@@ -74,13 +74,9 @@ export function Pages() {
   }, [pageId, currentPageId, navigate, eventId])
 
   return (
-    <FormLayout
-      canSaveAndExit={false}
-      route={ROUTES.V2.EVENTS.REQUEST_CORRECTION}
-    >
+    <FormLayout route={ROUTES.V2.EVENTS.REQUEST_CORRECTION}>
       {modal}
       <PagesComponent
-        eventId={eventId}
         form={form}
         formPages={formPages}
         pageId={currentPageId}

packages/client/src/v2-events/features/events/actions/correct/request/Review.tsx

@@ -99,7 +99,7 @@ export function Review() {
   }
 
   return (
-    <FormLayout canSaveAndExit={false} route={ROUTES.V2.EVENTS.REGISTER}>
+    <FormLayout route={ROUTES.V2.EVENTS.REGISTER}>
       <ReviewComponent.Body
         eventConfig={config}
         form={form}

packages/client/src/v2-events/features/events/actions/declare/Pages.tsx

@@ -111,7 +111,6 @@ export function Pages() {
     >
       {modal}
       <PagesComponent
-        eventId={eventId}
         form={formValues}
         formPages={formPages}
         pageId={currentPageId}

packages/client/src/v2-events/features/events/actions/declare/Review.tsx

@@ -22,6 +22,7 @@ import {
   Text,
   TextInput
 } from '@opencrvs/components'
+import { ActionType } from '@opencrvs/commons/client'
 import { useEventConfiguration } from '@client/v2-events/features/events/useEventConfiguration'
 import { useEventFormData } from '@client/v2-events/features/events/useEventFormData'
 import { useEventFormNavigation } from '@client/v2-events/features/events/useEventFormNavigation'