refactor(events-v2): define domain types (#8068)

* fix: create a routing for the new form

* initial new form

* refactor: event names to common standard

* fix: remove unused import

* chore: use defineEvent instead of satisfies

* fix: only use a placeholder of the form

* fix: disparencies in schema naming

* revert: change defineEvent to defineConfig

* fix: use EventDocument instead of EventInput

* fix: gql resolver compilation

* fix: events tests

* fix: remove unused types

* fix: imports in tests

packages/client/src/App.tsx

@@ -69,8 +69,9 @@ import { ReviewCorrection } from './views/ReviewCorrection/ReviewCorrection'
 import { ReviewCertificate } from './views/PrintCertificate/ReviewCertificateAction'
 import AllUserEmail from './views/SysAdmin/Communications/AllUserEmail/AllUserEmail'
 import { ReloadModal } from './views/Modals/ReloadModal'
-import { Workqueues } from './v2-events/workqueues'
-import { V2_ROOT_ROUTE } from './v2-events/routes'
+import { V2_EVENT_ROUTE, V2_ROOT_ROUTE } from './v2-events/routes/routes'
+import { Workqueues } from './v2-events/features/workqueues'
+import { PublishEvent } from './v2-events/features/events/PublishEvent'
 
 interface IAppProps {
   client?: ApolloClient<NormalizedCacheObject>
@@ -526,6 +527,11 @@ export function App(props: IAppProps) {
                                             path={V2_ROOT_ROUTE}
                                             component={Workqueues}
                                           />
+                                          <ProtectedRoute
+                                            exact
+                                            path={V2_EVENT_ROUTE}
+                                            component={PublishEvent}
+                                          />
                                         </Switch>
                                       </>
                                     )

packages/client/src/v2-events/features/events/PublishEvent.tsx

@@ -0,0 +1,82 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+
+import {
+  Frame,
+  AppBar,
+  Stack,
+  Button,
+  Icon,
+  Content
+} from '@opencrvs/components'
+import React from 'react'
+import { useEvent } from './useEvent'
+import { useParams } from 'react-router-dom'
+
+export function PublishEvent() {
+  const { eventType } = useParams<{ eventType: string }>()
+  const { title, exit, saveAndExit, previous, next, finish } =
+    useEvent(eventType)
+
+  return (
+    <Frame
+      skipToContentText="Skip to form"
+      header={
+        <AppBar
+          mobileLeft={title}
+          desktopLeft={title}
+          desktopRight={
+            <Stack direction="row">
+              <Button type="primary" onClick={saveAndExit}>
+                <Icon name="DownloadSimple" />
+                Save and exit
+              </Button>
+              <Button type="secondary" onClick={exit}>
+                <Icon name="X" />
+                Exit
+              </Button>
+            </Stack>
+          }
+        />
+      }
+    >
+      <Frame.LayoutForm>
+        <Frame.SectionFormBackAction>
+          {previous && (
+            <Button type="tertiary" size="small" onClick={previous}>
+              <Icon name="ArrowLeft" size="medium" />
+              Back
+            </Button>
+          )}
+        </Frame.SectionFormBackAction>
+
+        <Frame.Section>
+          <Content
+            title={title}
+            bottomActionButtons={[
+              <Button
+                key="continue"
+                fullWidth
+                type="primary"
+                size="large"
+                onClick={next ?? finish}
+              >
+                Continue
+              </Button>
+            ]}
+          >
+            <b>This is where the form will be rendered</b>
+          </Content>
+        </Frame.Section>
+      </Frame.LayoutForm>
+    </Frame>
+  )
+}

packages/client/src/v2-events/features/events/fixtures.ts

@@ -0,0 +1,129 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+export const tennisClubMembershipEvent = {
+  id: 'TENNIS_CLUB_MEMBERSHIP',
+  label: {
+    defaultMessage: 'Tennis club membership application',
+    description: 'This is what this event is referred as in the system',
+    id: 'event.tennis-club-membership.label'
+  },
+  actions: [
+    {
+      type: 'DECLARE',
+      label: {
+        defaultMessage: 'Send an application',
+        description:
+          'This is shown as the action name anywhere the user can trigger the action from',
+        id: 'event.tennis-club-membership.action.declare.label'
+      },
+      forms: [
+        {
+          label: {
+            id: 'event.tennis-club-membership.action.declare.form.label',
+            defaultMessage: 'Tennis club membership application',
+            description: 'This is what this form is referred as in the system'
+          },
+          active: true,
+          version: {
+            id: '1.0.0',
+            label: {
+              id: 'event.tennis-club-membership.action.declare.form.version.1',
+              defaultMessage: 'Version 1',
+              description: 'This is the first version of the form'
+            }
+          },
+          pages: [
+            {
+              id: 'applicant',
+              title: {
+                id: 'event.tennis-club-membership.action.declare.form.section.who.title',
+                defaultMessage: 'Who is applying for the membership?',
+                description: 'This is the title of the section'
+              },
+              fields: [
+                {
+                  id: 'applicant.firstname',
+                  type: 'TEXT',
+                  required: true,
+                  label: {
+                    defaultMessage: "Applicant's first name",
+                    description: 'This is the label for the field',
+                    id: 'event.tennis-club-membership.action.declare.form.section.who.field.firstname.label'
+                  }
+                },
+                {
+                  id: 'applicant.surname',
+                  type: 'TEXT',
+                  required: true,
+                  label: {
+                    defaultMessage: "Applicant's surname",
+                    description: 'This is the label for the field',
+                    id: 'event.tennis-club-membership.action.declare.form.section.who.field.surname.label'
+                  }
+                },
+                {
+                  id: 'applicant.dob',
+                  type: 'DATE',
+                  required: true,
+                  label: {
+                    defaultMessage: "Applicant's date of birth",
+                    description: 'This is the label for the field',
+                    id: 'event.tennis-club-membership.action.declare.form.section.who.field.dob.label'
+                  }
+                }
+              ]
+            },
+            {
+              id: 'recommender',
+              title: {
+                id: 'event.tennis-club-membership.action.declare.form.section.recommender.title',
+                defaultMessage: 'Who is recommending the applicant?',
+                description: 'This is the title of the section'
+              },
+              fields: [
+                {
+                  id: 'recommender.firstname',
+                  type: 'TEXT',
+                  required: true,
+                  label: {
+                    defaultMessage: "Recommender's first name",
+                    description: 'This is the label for the field',
+                    id: 'event.tennis-club-membership.action.declare.form.section.recommender.field.firstname.label'
+                  }
+                },
+                {
+                  id: 'recommender.surname',
+                  type: 'TEXT',
+                  required: true,
+                  label: {
+                    defaultMessage: "Recommender's surname",
+                    description: 'This is the label for the field',
+                    id: 'event.tennis-club-membership.action.declare.form.section.recommender.field.surname.label'
+                  }
+                },
+                {
+                  id: 'recommender.id',
+                  type: 'TEXT',
+                  required: true,
+                  label: {
+                    defaultMessage: "Recommender's membership ID",
+                    description: 'This is the label for the field',
+                    id: 'event.tennis-club-membership.action.declare.form.section.recommender.field.id.label'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

packages/client/src/v2-events/features/events/useEvent.ts

@@ -0,0 +1,48 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+
+import { tennisClubMembershipEvent } from './fixtures'
+import { useIntl } from 'react-intl'
+import { usePagination } from './usePagination'
+import { FieldConfig } from '@opencrvs/commons'
+
+const eventTypes = { 'tennis-club-membership': tennisClubMembershipEvent }
+
+export function useEvent(anyEventType: string) {
+  const intl = useIntl()
+
+  if (!eventTypes[anyEventType as keyof typeof eventTypes]) {
+    throw new Error(`Event type ${anyEventType} not found`)
+  }
+
+  const type = anyEventType as keyof typeof eventTypes
+  const { pages, label } = eventTypes[type].actions[0].forms[0]
+
+  const { next, previous, page } = usePagination(pages.length)
+
+  const exit = () => alert('exit')
+  const saveAndExit = () => alert('save and exit')
+  const finish = () => alert('finish')
+
+  const title = intl.formatMessage(label)
+
+  return {
+    type,
+    title,
+    exit,
+    saveAndExit,
+    previous,
+    next,
+    finish,
+    form: pages,
+    fields: pages[page].fields as FieldConfig[]
+  }
+}

packages/client/src/v2-events/features/events/usePagination.ts

@@ -0,0 +1,29 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import { useState } from 'react'
+
+// TODO: Paginate with react-router-dom
+export const usePagination = (
+  /** Amount of pages to iterate through */
+  pages: number
+) => {
+  const [page, setPage] = useState(0)
+
+  const next = page < pages - 1 ? () => setPage(page + 1) : undefined
+  const previous = page > 0 ? () => setPage(page - 1) : undefined
+
+  return {
+    /** Page number between 0 and pages - 1 */
+    page,
+    next,
+    previous
+  }
+}

packages/client/src/v2-events/workqueues/index.tsx → packages/client/src/v2-events/features/workqueues/index.tsx

@@ -8,9 +8,8 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-
 import React from 'react'
 
-export function Workqueues() {
-  return <div>This is where it starts from</div>
+export const Workqueues = () => {
+  return <div>Workqueues</div>
 }

packages/client/src/v2-events/routes.ts → packages/client/src/v2-events/routes/routes.ts

@@ -9,3 +9,4 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 export const V2_ROOT_ROUTE = '/v2'
+export const V2_EVENT_ROUTE = `${V2_ROOT_ROUTE}/event/:eventType`

packages/client/vite.config.ts

@@ -78,7 +78,7 @@ export default defineConfig(({ mode }) => {
       APP_VERSION: JSON.stringify(process.env.npm_package_version)
     },
     optimizeDeps: {
-      include: ['@opencrvs/commons/client']
+      include: ['@opencrvs/commons/client', '@opencrvs/commons/events']
     },
     // This changes the output dir from dist to build
     build: {