Merge branch 'develop' into ocrvs-10132

Author: Siyasanga

.github/workflows/build-images-from-branch.yml

@@ -60,10 +60,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        runner: ${{ 
-          ((github.ref_type == 'tag' || inputs.build_arm == true) && fromJSON('["ubuntu-24.04", "ubuntu-24.04-arm"]')) || 
-          fromJSON('["ubuntu-24.04"]') 
-          }}
+        runner: ${{ (inputs.build_arm == true && fromJSON('["ubuntu-24.04", "ubuntu-24.04-arm"]')) || fromJSON('["ubuntu-24.04"]') }}
     runs-on: ${{ matrix.runner }}
     steps:
       - uses: actions/checkout@v5
@@ -143,7 +140,7 @@ jobs:
           password: ${{ secrets.GHCR_PUBLISH_TOKEN }}
       - name: Create and push multi-arch manifest
         env:
-          BUILD_ARM: ${{ github.ref_type == 'tag' || inputs.build_arm == true }}
+          BUILD_ARM: ${{ inputs.build_arm == true }}
         run: |
           REPO="ghcr.io/opencrvs/ocrvs-base"
           for TAG in ${{ needs.base.outputs.branch }} ${{ needs.base.outputs.version }}; do
@@ -162,7 +159,7 @@ jobs:
       fail-fast: false
       matrix:
         runner: ${{ 
-          ((github.ref_type == 'tag' || inputs.build_arm == true) && fromJSON('["ubuntu-24.04", "ubuntu-24.04-arm"]')) || 
+          (inputs.build_arm == true && fromJSON('["ubuntu-24.04", "ubuntu-24.04-arm"]')) || 
           fromJSON('["ubuntu-24.04"]') 
           }}
         service: ${{ fromJSON(needs.base.outputs.services) }}
@@ -230,7 +227,7 @@ jobs:
 
       - name: Create and push multi-arch manifest
         env:
-          BUILD_ARM: ${{ github.ref_type == 'tag' || inputs.build_arm == true }}
+          BUILD_ARM: ${{ inputs.build_arm == true }}
         run: |
           REPO_PREFIX="ghcr.io/opencrvs/ocrvs"
 

packages/client/src/v2-events/features/events/actions/print-certificate/PrintCertificate.interaction.stories.tsx

@@ -15,19 +15,19 @@ import superjson from 'superjson'
 
 import { within, userEvent, expect, waitFor } from '@storybook/test'
 import { Outlet } from 'react-router-dom'
+import { http, HttpResponse } from 'msw'
 import {
   ActionType,
   generateEventDocument,
   generateWorkqueues,
-  tennisClubMembershipEvent
+  tennisClubMembershipEvent,
+  field
 } from '@opencrvs/commons/client'
-import {
-  tennisClubMembershipEventIndex,
-  tennisClubMembershipEventDocument
-} from '@client/v2-events/features/events/fixtures'
+import { tennisClubMembershipEventDocument } from '@client/v2-events/features/events/fixtures'
 import { ROUTES, routesConfig } from '@client/v2-events/routes'
 import { AppRouter } from '@client/v2-events/trpc'
 import { testDataGenerator } from '@client/tests/test-data-generators'
+import { mockOfflineData } from '@client/tests/mock-offline-data'
 import { CERT_TEMPLATE_ID } from '../../useCertificateTemplateSelectorFieldConfig'
 import * as PrintCertificate from './index'
 
@@ -289,3 +289,107 @@ export const RedirectAfterPrint: Story = {
     })
   }
 }
+
+export const NoTemplateAvailable: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    reactRouter: {
+      router: routesConfig,
+      initialPath: ROUTES.V2.EVENTS.PRINT_CERTIFICATE.PAGES.buildPath({
+        eventId: tennisClubMembershipEventDocument.id,
+        pageId: 'collector'
+      })
+    },
+    test: {
+      // Ignoring the failed font request
+      dangerouslyIgnoreUnhandledErrors: true
+    },
+    msw: {
+      handlers: {
+        events: [
+          tRPCMsw.event.config.get.query(() => {
+            return [tennisClubMembershipEvent]
+          }),
+          tRPCMsw.event.get.query(() => {
+            return tennisClubMembershipEventDocument
+          })
+        ],
+        config: [
+          http.get(
+            '/api/countryconfig/certificates/simple-certificate.svg',
+            () => {
+              return HttpResponse.text(
+                `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><text x="10" y="20">Simple Certificate</text></svg>`
+              )
+            }
+          ),
+          http.get('http://localhost:2021/config', () => {
+            return HttpResponse.json({
+              systems: [],
+              config: mockOfflineData.config,
+              certificates: [
+                {
+                  id: 'simple-certificate',
+                  isV2Template: true,
+                  event: 'tennis-club-membership',
+                  label: {
+                    id: 'certificates.simple.certificate.copy',
+                    defaultMessage: 'Simple Certificate copy',
+                    description: 'The label for a simple certificate'
+                  },
+                  conditionals: [
+                    {
+                      type: 'SHOW',
+                      conditional: field('applicant.dob')
+                        .isBefore()
+                        .date('2007-01-01')
+                    }
+                  ],
+                  isDefault: false,
+                  fee: {
+                    onTime: 7,
+                    late: 10.6,
+                    delayed: 18
+                  },
+                  svgUrl:
+                    '/api/countryconfig/certificates/simple-certificate.svg'
+                }
+              ]
+            })
+          })
+        ]
+      }
+    }
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step('Try continuing without filling the form', async () => {
+      await expect(
+        await canvas.findByText('Print certified copy')
+      ).toBeInTheDocument()
+
+      const continueButton = await canvas.findByRole('button', {
+        name: 'Continue'
+      })
+      await userEvent.click(continueButton)
+      const requiredErrors = await canvas.findAllByText('Required')
+
+      await expect(requiredErrors.length).toBe(2)
+    })
+
+    await step(
+      'Click Certification Type and find no options message',
+      async () => {
+        await userEvent.click(
+          await canvas.findByTestId('select__certificateTemplateId')
+        )
+        await expect(
+          await canvas.findByText(
+            'No template available for this event, contact Admin'
+          )
+        ).toBeVisible()
+      }
+    )
+  }
+}

packages/client/src/v2-events/features/events/actions/print-certificate/pdfUtils.ts

@@ -339,7 +339,7 @@ export function compileSvg({
         return getMixedPath(resolvedMetadata, propertyPath)
       }
 
-      if (isEqual(resolvedDeclaration, obj)) {
+      if (isEqual($declaration, obj)) {
         return getMixedPath(resolvedDeclaration, propertyPath)
       }
 
@@ -564,7 +564,7 @@ export function compileSvg({
   const template = Handlebars.compile(templateString)
 
   const data = {
-    $declaration: resolvedDeclaration,
+    $declaration,
     $metadata,
     $review: review,
     $references: {

packages/client/src/v2-events/features/events/registered-fields/Address.interaction.stories.tsx

@@ -16,17 +16,24 @@ import { userEvent, waitFor, within } from '@storybook/testing-library'
 import React from 'react'
 import * as selectEvent from 'react-select-event'
 import styled from 'styled-components'
+import { useIntl } from 'react-intl'
+import { useSelector } from 'react-redux'
 import {
   AddressType,
   FieldType,
   and,
   not,
   field as createFieldCondition,
-  ConditionalType
+  ConditionalType,
+  FieldValue,
+  AddressFieldValue
 } from '@opencrvs/commons/client'
 import { FormFieldGenerator } from '@client/v2-events/components/forms/FormFieldGenerator'
 import { TRPCProvider } from '@client/v2-events/trpc'
+import { useLocations } from '@client/v2-events/hooks/useLocations'
+import { getOfflineData } from '@client/offline/selectors'
 import { withValidatorContext } from '../../../../../.storybook/decorators'
+import { Address } from './Address'
 
 const meta: Meta<typeof FormFieldGenerator> = {
   title: 'Inputs/Address/Interaction',
@@ -607,3 +614,181 @@ export const AddressFieldInteractionDomesticToInternational: StoryObj<
     )
   }
 }
+
+interface ResolvedAddress {
+  country?: string
+  addressType?: string
+  province?: string
+  district?: string
+  streetLevelDetails?: {
+    state?: string
+    district2?: string
+    town?: string
+    cityOrTown?: string
+  }
+}
+
+export const ToCertificateVariables: StoryObj<typeof FormFieldGenerator> = {
+  name: 'Certificate Variables',
+  parameters: {
+    layout: 'centered'
+  },
+  render: function Component(args) {
+    const intl = useIntl()
+    const [formData, setFormData] = React.useState<Record<string, FieldValue>>({
+      'storybook.address': {
+        country: 'FAR',
+        addressType: 'DOMESTIC'
+      }
+    })
+    const [resolvedAddress, setResolvedAddress] =
+      React.useState<ResolvedAddress>()
+    const { getLocations } = useLocations()
+    const [locations] = getLocations.useSuspenseQuery()
+    const { config: appConfig } = useSelector(getOfflineData)
+
+    const adminLevels = appConfig.ADMIN_STRUCTURE
+    return (
+      <>
+        <StyledFormFieldGenerator
+          {...args}
+          fields={[
+            {
+              id: 'storybook.address',
+              type: FieldType.ADDRESS,
+              label: {
+                id: 'storybook.address.label',
+                defaultMessage: 'Address',
+                description: 'The title for the address input'
+              },
+              configuration: {
+                streetAddressForm: streetAddressConfigs
+              }
+            }
+          ]}
+          id="my-form"
+          initialValues={formData}
+          onChange={(data) => {
+            setFormData((prev) => ({ ...prev, ...data }))
+            const address = AddressFieldValue.safeParse(
+              data['storybook.address']
+            )
+            if (address.success) {
+              const resolved = Address.toCertificateVariables(address.data, {
+                intl,
+                locations,
+                adminLevels
+              })
+              setResolvedAddress((prev) => ({
+                ...prev,
+                ...(resolved satisfies ResolvedAddress)
+              }))
+            }
+          }}
+        />
+        {resolvedAddress && (
+          <div>
+            <div data-testid="country">
+              {'Country:'} {resolvedAddress.country}
+            </div>
+            <div data-testid="addressType">
+              {'Address Type:'} {resolvedAddress.addressType}
+            </div>
+            {resolvedAddress.province && (
+              <div data-testid="province">
+                {'Province:'} {resolvedAddress.province}
+              </div>
+            )}
+            {resolvedAddress.district && (
+              <div data-testid="district">
+                {'District:'} {resolvedAddress.district}
+              </div>
+            )}
+            {resolvedAddress.streetLevelDetails?.state && (
+              <div data-testid="state">
+                {'State:'} {resolvedAddress.streetLevelDetails.state}
+              </div>
+            )}
+            {resolvedAddress.streetLevelDetails?.district2 && (
+              <div data-testid="district2">
+                {'District:'} {resolvedAddress.streetLevelDetails.district2}
+              </div>
+            )}
+
+            {resolvedAddress.streetLevelDetails?.town && (
+              <div data-testid="town">
+                {resolvedAddress.streetLevelDetails.town}
+              </div>
+            )}
+            {resolvedAddress.streetLevelDetails?.cityOrTown && (
+              <div data-testid="cityOrTown">
+                {resolvedAddress.streetLevelDetails.cityOrTown}
+              </div>
+            )}
+          </div>
+        )}
+      </>
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step('Fill up Domestic Address', async () => {
+      const province = await canvas.findByTestId('location__province')
+      await userEvent.click(province)
+      await selectEvent.select(province, 'Central')
+
+      const district = await canvas.findByTestId('location__district')
+      await userEvent.click(district)
+      await selectEvent.select(district, 'Ibombo')
+
+      const town = await canvas.findByTestId('text__town')
+      await userEvent.type(town, 'Dhaka')
+
+      const residentialArea = await canvas.findByTestId('text__residentialArea')
+      await userEvent.type(residentialArea, 'Mirpur')
+
+      await expect(canvas.queryByTestId('country')).toHaveTextContent(
+        'Farajaland'
+      )
+      await expect(canvas.queryByTestId('addressType')).toHaveTextContent(
+        'DOMESTIC'
+      )
+      await expect(canvas.queryByTestId('province')).toHaveTextContent(
+        'Central'
+      )
+      await expect(canvas.queryByTestId('district')).toHaveTextContent('Ibombo')
+      await expect(canvas.queryByTestId('town')).toHaveTextContent('Dhaka')
+    })
+
+    await step('Fill up International Address', async () => {
+      const country = await canvas.findByTestId('location__country')
+      await userEvent.click(country)
+      await selectEvent.select(country, 'Estonia')
+
+      const province = await canvas.findByTestId('text__state')
+      await userEvent.type(province, 'State')
+
+      const district2 = await canvas.findByTestId('text__district2')
+      await userEvent.type(district2, 'District')
+
+      const town = await canvas.findByTestId('text__cityOrTown')
+      await userEvent.type(town, 'Dhaka')
+
+      const residentialArea = await canvas.findByTestId('text__addressLine1')
+      await userEvent.type(residentialArea, 'Mirpur')
+
+      await expect(canvas.queryByTestId('country')).toHaveTextContent('Estonia')
+      await expect(canvas.queryByTestId('addressType')).toHaveTextContent(
+        'INTERNATIONAL'
+      )
+      await expect(canvas.queryByTestId('state')).toHaveTextContent('State')
+      await expect(canvas.queryByTestId('district2')).toHaveTextContent(
+        'District'
+      )
+      await expect(canvas.queryByTestId('cityOrTown')).toHaveTextContent(
+        'Dhaka'
+      )
+    })
+  }
+}