diff --git a/packages/client/src/v2-events/features/events/actions/declare/Review.stories.tsx b/packages/client/src/v2-events/features/events/actions/declare/Review.stories.tsx index 314d5374f2..d83e52c596 100644 --- a/packages/client/src/v2-events/features/events/actions/declare/Review.stories.tsx +++ b/packages/client/src/v2-events/features/events/actions/declare/Review.stories.tsx @@ -12,6 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react' import { createTRPCMsw, httpLink } from '@vafanassieff/msw-trpc' import superjson from 'superjson' import { graphql, HttpResponse } from 'msw' +import { userEvent, within } from '@storybook/test' import { tennisClubMembershipEvent } from '@opencrvs/commons/client' import { ROUTES, routesConfig } from '@client/v2-events/routes' import { useEventFormData } from '@client/v2-events/features/events/useEventFormData' @@ -97,6 +98,22 @@ export const ReviewForLocalRegistrarComplete: Story = { ] } } + }, + play: async ({ canvasElement, step }) => { + await step('Modal has scope based content', async () => { + const canvas = within(canvasElement) + await userEvent.click( + await canvas.findByRole('button', { name: 'Register' }) + ) + + const modal = within(await canvas.findByRole('modal')) + + await modal.findByText('Register?') + await modal.findByRole('button', { name: 'Register' }) + await userEvent.click( + await modal.findByRole('button', { name: 'Cancel' }) + ) + }) } } @@ -184,6 +201,22 @@ export const ReviewForRegistrationAgentComplete: Story = { ] } } + }, + play: async ({ canvasElement, step }) => { + await step('Modal has scope based content', async () => { + const canvas = within(canvasElement) + await userEvent.click( + await canvas.findByRole('button', { name: 'Send for approval' }) + ) + + const modal = within(await canvas.findByRole('modal')) + + await modal.findByText('Send for approval?') + await modal.findByRole('button', { name: 'Confirm' }) + await userEvent.click( + await modal.findByRole('button', { name: 'Cancel' }) + ) + }) } } @@ -272,6 +305,22 @@ export const ReviewForFieldAgentComplete: Story = { ] } } + }, + play: async ({ canvasElement, step }) => { + await step('Modal has scope based content', async () => { + const canvas = within(canvasElement) + await userEvent.click( + await canvas.findByRole('button', { name: 'Send for review' }) + ) + + const modal = within(await canvas.findByRole('modal')) + + await modal.findByText('Send for review?') + await modal.findByRole('button', { name: 'Confirm' }) + await userEvent.click( + await modal.findByRole('button', { name: 'Cancel' }) + ) + }) } } diff --git a/packages/client/src/v2-events/features/events/actions/declare/Review.tsx b/packages/client/src/v2-events/features/events/actions/declare/Review.tsx index 7f06b2753a..e43b466b4f 100644 --- a/packages/client/src/v2-events/features/events/actions/declare/Review.tsx +++ b/packages/client/src/v2-events/features/events/actions/declare/Review.tsx @@ -46,7 +46,7 @@ import { getScope } from '@client/profile/profileSelectors' import { validationErrorsInActionFormExist } from '@client/v2-events/components/forms/validation' import { withSuspense } from '@client/v2-events/components/withSuspense' -const modalMessages = defineMessages({ +const rejectModalMessages = defineMessages({ rejectModalCancel: { id: 'v2.rejectModal.cancel', defaultMessage: 'Cancel', @@ -80,6 +80,78 @@ const modalMessages = defineMessages({ } }) +const confirmModalMessages = { + complete: { + declare: { + title: { + id: 'v2.review.declare.confirmModal.title', + defaultMessage: 'Send for review?', + description: 'The title for review action modal when declaring' + }, + description: { + id: 'v2.review.declare.confirmModal.description', + defaultMessage: 'This declaration will be sent for review', + description: 'The description for review action modal when declaring' + }, + onConfirm: { + id: 'v2.review.declare.confirmModal.confirm', + defaultMessage: 'Confirm', + description: 'The label for modal confirm button when declaring' + }, + onCancel: { + id: 'v2.review.declare.confirmModal.cancel', + defaultMessage: 'Cancel', + description: 'The label for modal cancel button when declaring' + } + }, + validate: { + title: { + id: 'v2.review.validate.confirmModal.title', + defaultMessage: 'Send for approval?', + description: 'The title for review action modal when validating' + }, + description: { + id: 'v2.review.validate.confirmModal.description', + defaultMessage: + 'This declaration will be sent for approval prior to registration.', + description: 'The description for review action modal when validating' + }, + onConfirm: { + id: 'v2.review.validate.confirmModal.confirm', + defaultMessage: 'Confirm', + description: 'The label for modal confirm button when validating' + }, + onCancel: { + id: 'v2.review.validate.confirmModal.cancel', + defaultMessage: 'Cancel', + description: 'The label for modal cancel button when validating' + } + }, + register: { + title: { + id: 'v2.review.register.confirmModal.title', + defaultMessage: 'Register the birth?', + description: 'The title for review action modal when registering' + }, + description: { + id: 'v2.review.register.confirmModal.description', + defaultMessage: '‎', // intentionally empty, as the description is not used in v1 + description: 'The description for review action modal when registering' + }, + onConfirm: { + id: 'v2.review.register.confirmModal.confirm', + defaultMessage: 'Register', + description: 'The label for modal confirm button when registering' + }, + onCancel: { + id: 'v2.review.register.confirmModal.cancel', + defaultMessage: 'Cancel', + description: 'The label for modal cancel button when registering' + } + } + } +} + const registerMessages = { title: { id: 'v2.review.register.title', @@ -125,7 +197,8 @@ const reviewMessages = { description: 'The description for registration action when form is complete' }, - onConfirm: registerMessages.onConfirm + onConfirm: registerMessages.onConfirm, + modal: confirmModalMessages.complete.register }, validate: { title: validateMessages.title, @@ -135,7 +208,8 @@ const reviewMessages = { 'The informant will receive an email with a registration number that they can use to collect the certificate', description: 'The description for validate action when form is complete' }, - onConfirm: validateMessages.onConfirm + onConfirm: validateMessages.onConfirm, + modal: confirmModalMessages.complete.validate }, declare: { title: { @@ -150,7 +224,8 @@ const reviewMessages = { 'The informant will receive an email with a registration number that they can use to collect the certificate', description: 'The description for declare action when form is complete' }, - onConfirm: declareMessages.onConfirm + onConfirm: declareMessages.onConfirm, + modal: confirmModalMessages.complete.declare } }, incomplete: { @@ -162,7 +237,8 @@ const reviewMessages = { description: 'The description for registration action when form is incomplete' }, - onConfirm: registerMessages.onConfirm + onConfirm: registerMessages.onConfirm, + modal: {} }, validate: { title: validateMessages.title, @@ -172,7 +248,8 @@ const reviewMessages = { 'Please add mandatory information before sending for approval', description: 'The description for validate action when form is complete' }, - onConfirm: validateMessages.onConfirm + onConfirm: validateMessages.onConfirm, + modal: {} }, declare: { title: { @@ -187,7 +264,8 @@ const reviewMessages = { 'The informant will receive an email with a tracking ID that they can use to provide the additional mandatory information required for registration', description: 'The description for declare action when form is complete' }, - onConfirm: declareMessages.onConfirm + onConfirm: declareMessages.onConfirm, + modal: {} } } } @@ -214,6 +292,7 @@ function getReviewActionConfig({ if (scopes?.includes(SCOPES.RECORD_REGISTER)) { return { + buttonType: 'positive' as const, incomplete, isDisabled, messages: incomplete @@ -224,6 +303,7 @@ function getReviewActionConfig({ if (scopes?.includes(SCOPES.RECORD_SUBMIT_FOR_APPROVAL)) { return { + buttonType: 'positive' as const, incomplete, isDisabled, messages: incomplete @@ -234,6 +314,7 @@ function getReviewActionConfig({ if (scopes?.includes(SCOPES.RECORD_DECLARE)) { return { + buttonType: 'primary' as const, incomplete, isDisabled, messages: incomplete @@ -321,7 +402,11 @@ export function Review() { async function handleDeclaration() { const confirmedDeclaration = await openModal((close) => ( - + )) if (confirmedDeclaration) { declareMutation.mutate({ @@ -388,6 +473,7 @@ export function Review() { formConfig={formConfig} messages={reviewActionConfiguration.messages} metadata={metadata} + primaryButtonType={reviewActionConfiguration.buttonType} onConfirm={handleDeclaration} onReject={handleReject} /> @@ -422,7 +508,7 @@ function RejectModal({ close(null) }} > - {intl.formatMessage(modalMessages.rejectModalCancel)} + {intl.formatMessage(rejectModalMessages.rejectModalCancel)} , , ]} handleClose={() => close(null)} responsive={false} show={true} - title={intl.formatMessage(modalMessages.rejectModalTitle)} + title={intl.formatMessage(rejectModalMessages.rejectModalTitle)} > - {intl.formatMessage(modalMessages.rejectModalDescription)} + {intl.formatMessage(rejectModalMessages.rejectModalDescription)} void onReject?: () => void @@ -615,6 +616,7 @@ function ReviewActionComponent({ description: MessageDescriptor onConfirm: MessageDescriptor } + primaryButtonType?: 'positive' | 'primary' }) { const intl = useIntl() const errorExist = validationErrorsInActionFormExist( @@ -638,7 +640,7 @@ function ReviewActionComponent({ disabled={errorExist} id="validateDeclarationBtn" size="large" - type="positive" + type={primaryButtonType ?? 'positive'} onClick={onConfirm} > @@ -713,8 +715,8 @@ function ActionModal({ action }: { copy?: { - cancel?: MessageDescriptor - primaryAction?: MessageDescriptor + onCancel?: MessageDescriptor + onConfirm?: MessageDescriptor title?: MessageDescriptor description?: MessageDescriptor } @@ -734,7 +736,9 @@ function ActionModal({ close(null) }} > - {intl.formatMessage(copy?.cancel || reviewMessages.actionModalCancel)} + {intl.formatMessage( + copy?.onCancel || reviewMessages.actionModalCancel + )} ,