Merge branch 'develop' into ocrvs-10132

Author: Siyasanga

packages/client/src/v2-events/components/forms/FormFieldGenerator/GeneratedInputField.tsx

@@ -91,9 +91,9 @@ import { File } from '@client/v2-events/components/forms/inputs/FileInput/FileIn
 import { FileWithOption } from '@client/v2-events/components/forms/inputs/FileInput/DocumentUploaderWithOption'
 import { DateRangeField } from '@client/v2-events/features/events/registered-fields/DateRangeField'
 import { Name } from '@client/v2-events/features/events/registered-fields/Name'
+import { QueryParamReader } from '@client/v2-events/features/events/registered-fields/QueryParamReader'
 import { makeFormikFieldIdOpenCRVSCompatible } from '../utils'
 import { SignatureField } from '../inputs/SignatureField'
-import { QueryParamReader } from '../inputs/QueryParamReader'
 import {
   makeFormikFieldIdsOpenCRVSCompatible,
   parseFieldReferencesInConfiguration

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

@@ -9,7 +9,7 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 
-import React from 'react'
+import React, { useState } from 'react'
 import { defineMessages, useIntl } from 'react-intl'
 import { Navigate, useNavigate } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
@@ -75,6 +75,7 @@ const TooltipMessage = styled.p`
   ${({ theme }) => theme.fonts.reg19};
   max-width: 200px;
 `
+
 const messages = defineMessages({
   printTitle: {
     id: 'printAction.title',
@@ -87,22 +88,11 @@ const messages = defineMessages({
       'Please confirm that the informant has reviewed that the information on the certificate is correct and that it is ready to print.',
     description: 'The description for print action'
   },
-  printModalTitle: {
-    id: 'print.certificate.review.printModalTitle',
-    defaultMessage: 'Print certificate?',
-    description: 'Print certificate modal title text'
-  },
   printAndIssueModalTitle: {
     id: 'print.certificate.review.printAndIssueModalTitle',
     defaultMessage: 'Print and issue certificate?',
     description: 'Print and issue certificate modal title text'
   },
-  printModalBody: {
-    id: 'print.certificate.review.modal.body.print',
-    defaultMessage:
-      'A Pdf of the certificate will open in a new tab for printing. The record will move to the ready-to-issue queue.',
-    description: 'Print certificate modal body text'
-  },
   printAndIssueModalBody: {
     id: 'print.certificate.review.modal.body.printAndIssue',
     defaultMessage:
@@ -192,6 +182,7 @@ export function Review() {
   const formConfig = getPrintForm(eventConfiguration)
   const { isActionAllowed } = useUserAllowedActions(fullEvent.type)
   const userDetails = useSelector(getUserDetails)
+  const { isPending } = onlineActions.printCertificate
 
   if (!userDetails) {
     throw new Error('User details are not available')
@@ -281,6 +272,7 @@ export function Review() {
           </Button>,
           <Button
             key="print-certificate"
+            disabled={!isOnline || isPending}
             id="print-certificate"
             type="primary"
             onClick={() => close(true)}
@@ -388,7 +380,7 @@ export function Review() {
               >
                 <Button
                   fullWidth
-                  disabled={!isOnline}
+                  disabled={!isOnline || isPending}
                   id="confirm-print"
                   size="large"
                   type="positive"

…orms/inputs/QueryParamReader.stories.tsx …ered-fields/QueryParamReader.stories.tsxpackages/client/src/v2-events/components/forms/inputs/QueryParamReader.stories.tsx renamed to packages/client/src/v2-events/features/events/registered-fields/QueryParamReader.stories.tsx packages/client/src/v2-events/components/forms/inputs/QueryParamReader.stories.tsx renamed to packages/client/src/v2-events/features/events/registered-fields/QueryParamReader.stories.tsx

@@ -20,7 +20,7 @@ import {
   never
 } from '@opencrvs/commons/client'
 import { TRPCProvider } from '@client/v2-events/trpc'
-import { FormFieldGenerator } from '../FormFieldGenerator'
+import { FormFieldGenerator } from '../../../components/forms/FormFieldGenerator'
 import { getTestValidatorContext } from '../../../../../.storybook/decorators'
 
 interface Args {

…onents/forms/inputs/QueryParamReader.tsx …s/registered-fields/QueryParamReader.tsxpackages/client/src/v2-events/components/forms/inputs/QueryParamReader.tsx renamed to packages/client/src/v2-events/features/events/registered-fields/QueryParamReader.tsx packages/client/src/v2-events/components/forms/inputs/QueryParamReader.tsx renamed to packages/client/src/v2-events/features/events/registered-fields/QueryParamReader.tsx

@@ -33,6 +33,7 @@ import { TimeField } from './TimeField'
 import { AlphaPrintButton } from './AlphaPrintButton'
 import { LinkButton } from './LinkButton'
 import { VerificationStatus } from './VerificationStatus'
+import { QueryParamReader } from './QueryParamReader'
 
 export * from './Address'
 export * from './AdministrativeArea'
@@ -109,6 +110,8 @@ export function getRegisteredFieldByFieldConfig<T extends FieldConfig>(
       return LinkButton
     case FieldType.VERIFICATION_STATUS:
       return VerificationStatus
+    case FieldType.QUERY_PARAM_READER:
+      return QueryParamReader
     default:
       return undefined
   }

packages/client/src/v2-events/features/events/registered-fields/index.ts

@@ -150,7 +150,10 @@ export function useEventFormNavigation() {
     closeActionView()
   }
 
-  async function deleteDeclaration(eventId: string) {
+  async function deleteDeclaration(
+    eventId: string,
+    workqueueToGoBackTo?: string
+  ) {
     const deleteConfirm = await openModal<boolean | null>((close) => (
       <ResponsiveModal
         autoHeight
@@ -191,7 +194,7 @@ export function useEventFormNavigation() {
 
     if (deleteConfirm) {
       deleteEvent.mutate({ eventId })
-      closeActionView()
+      closeActionView(workqueueToGoBackTo)
     }
   }
 

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

@@ -465,7 +465,8 @@ export function useEventAction<P extends DecorateMutationProcedure<any>>(
     mutate: (params: ActionMutationInput) =>
       mutation.mutate(getMutationPayload(params)),
     mutateAsync: async (params: ActionMutationInput) =>
-      mutation.mutateAsync(getMutationPayload(params))
+      mutation.mutateAsync(getMutationPayload(params)),
+    isPending: mutation.isPending
   }
 }
 

packages/client/src/v2-events/features/events/useEvents/procedures/actions/action.ts

@@ -0,0 +1,124 @@
+/*
+ * 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 { Meta, StoryObj } from '@storybook/react'
+import { userEvent, waitFor, within, expect } from '@storybook/test'
+import superjson from 'superjson'
+import { createTRPCMsw, httpLink } from '@vafanassieff/msw-trpc'
+import {
+  ActionType,
+  generateEventDocument,
+  getCurrentEventState,
+  tennisClubMembershipEvent
+} from '@opencrvs/commons/client'
+import { ROUTES, routesConfig } from '@client/v2-events/routes'
+import { AppRouter } from '@client/v2-events/trpc'
+import {
+  addLocalEventConfig,
+  setEventData
+} from '@client/v2-events/features/events/useEvents/api'
+import { ActionMenu } from '../ActionMenu'
+
+export default {
+  title: 'ActionMenu/RegistrationAgent/Deleted'
+} as Meta<typeof ActionMenu>
+
+const createdEventDocument = generateEventDocument({
+  configuration: tennisClubMembershipEvent,
+  actions: [ActionType.CREATE, ActionType.ASSIGN],
+  user: {
+    assignedTo: '6821c175dce4d7886d4e8210'
+  }
+})
+
+const eventState = getCurrentEventState(
+  createdEventDocument,
+  tennisClubMembershipEvent
+)
+
+const tRPCMsw = createTRPCMsw<AppRouter>({
+  links: [
+    httpLink({
+      url: '/api/events'
+    })
+  ],
+  transformer: { input: superjson, output: superjson }
+})
+
+export const deletedScenariosForRegistrationAgent: StoryObj<typeof ActionMenu> =
+  {
+    parameters: {
+      layout: 'centered',
+      reactRouter: {
+        router: routesConfig,
+        initialPath: ROUTES.V2.EVENTS.OVERVIEW.buildPath({
+          eventId: createdEventDocument.id
+        })
+      },
+      msw: {
+        events: [
+          tRPCMsw.event.search.query(() => {
+            return {
+              results: [eventState],
+              total: 1
+            }
+          })
+        ]
+      }
+    },
+    beforeEach: () => {
+      /*
+       * Ensure record is "downloaded offline" in the user's browser
+       */
+      addLocalEventConfig(tennisClubMembershipEvent)
+      setEventData(createdEventDocument.id, createdEventDocument)
+    },
+    play: async ({ canvasElement, step }) => {
+      const canvas = within(canvasElement)
+
+      await step(
+        'Renders modal when delete declaration is clicked',
+        async () => {
+          await new Promise((resolve) => setTimeout(resolve, 5000))
+          void canvas.getByTestId('action-dropdownMenu').click()
+
+          // wait for the list to appear
+          const list = await waitFor(() =>
+            document.querySelector('#action-Dropdown-Content')
+          )
+
+          // click the 3rd <li>
+          const items = list?.querySelectorAll('li')
+          if (!items || items.length < 3) {
+            throw new Error('Menu items not found')
+          }
+
+          await userEvent.click(items[2])
+
+          await expect(canvas.getByText('Delete draft?')).toBeInTheDocument()
+          await expect(
+            canvas.getByText(
+              "Are you certain you want to delete this draft declaration form? Please note, this action can't be undone."
+            )
+          ).toBeInTheDocument()
+
+          const cancelDelete = await waitFor(() =>
+            document.querySelector('#cancel_delete')
+          )
+
+          if (!cancelDelete) {
+            throw new Error('Cancel delete button not found')
+          }
+
+          await userEvent.click(cancelDelete)
+        }
+      )
+    }
+  }

packages/client/src/v2-events/features/workqueues/EventOverview/components/ActionMenuStories/Delete.interaction.stories.tsx

@@ -10,7 +10,7 @@
  */
 import { useNavigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
-import React from 'react'
+import React, { useCallback } from 'react'
 import { useIntl } from 'react-intl'
 import {
   ActionType,
@@ -207,13 +207,20 @@ function useViewableActionConfigurations(
     locations.find((l) => l.id === assignedOffice)?.name || ''
   const { archiveModal, onArchive } = useArchiveModal()
 
+  const { modal: deleteModal, deleteDeclaration } = useEventFormNavigation()
+  const onDelete = useCallback(
+    async (workqueue?: string) => {
+      await deleteDeclaration(event.id, workqueue)
+    },
+    [event, deleteDeclaration]
+  )
+
   /**
    * Refer to https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries
    * This does not immediately execute the query but instead prepares it to be fetched conditionally when needed.
    */
   const { refetch: refetchEvent } = events.getEvent.findFromCache(event.id)
 
-  const { mutate: deleteEvent } = events.deleteEvent.useMutation()
   const { eventConfiguration } = useEventConfiguration(event.type)
 
   const assignmentStatus = getAssignmentStatus(event, authentication.sub)
@@ -269,7 +276,7 @@ function useViewableActionConfigurations(
    * If you need to extend the functionality, consider whether it can be done elsewhere.
    */
   return {
-    modals: [assignModal, archiveModal],
+    modals: [assignModal, archiveModal, deleteModal],
     config: {
       [ActionType.READ]: {
         label: actionLabels[ActionType.READ],
@@ -406,14 +413,8 @@ function useViewableActionConfigurations(
       [ActionType.DELETE]: {
         label: actionLabels[ActionType.DELETE],
         icon: 'Trash' as const,
-        onClick: (workqueue?: string) => {
-          deleteEvent({
-            eventId: event.id
-          })
-          // What if there is a workqueue?
-          if (!workqueue) {
-            navigate(ROUTES.V2.buildPath({}))
-          }
+        onClick: async (workqueue?: string) => {
+          await onDelete(workqueue)
         },
         disabled: !isDownloadedAndAssignedToUser
       },

packages/client/src/v2-events/features/workqueues/EventOverview/components/useAllowedActionConfigurations.tsx

@@ -91,7 +91,6 @@ const BaseField = z.object({
     'Reference to a parent field. If a field has a parent, it will be reset when the parent field is changed.'
   ),
   required: requiredSchema,
-  disabled: z.boolean().default(false).optional(),
   conditionals: z.array(FieldConditional).default([]).optional(),
   secured: z.boolean().default(false).optional(),
   placeholder: TranslationConfig.optional(),
@@ -824,7 +823,8 @@ export const FieldConfig: z.ZodType<
     AlphaPrintButton,
     HttpField,
     LinkButtonField,
-    VerificationStatus
+    VerificationStatus,
+    QueryParamReaderField
   ])
   .openapi({
     description: 'Form field configuration',