Skip to content

Commit

Permalink
feat: add separate translations on confirm modal for different scopes
Browse files Browse the repository at this point in the history
  • Loading branch information
@makelicious
makelicious committed Feb 25, 2025
1 parent dac02aa commit 9c8c48c
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 20 deletions.
49 changes: 49 additions & 0 deletions packages/client/src/v2-events/features/events/actions/declare/Review.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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' })
)
})
}
}

Expand Down Expand Up @@ -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' })
)
})
}
}

Expand Down Expand Up @@ -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' })
)
})
}
}

Expand Down
116 changes: 102 additions & 14 deletions packages/client/src/v2-events/features/events/actions/declare/Review.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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,
Expand All @@ -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: {
Expand All @@ -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: {}
}
}
}
Expand All @@ -214,6 +292,7 @@ function getReviewActionConfig({

if (scopes?.includes(SCOPES.RECORD_REGISTER)) {
return {
buttonType: 'positive' as const,
incomplete,
isDisabled,
messages: incomplete
Expand All @@ -224,6 +303,7 @@ function getReviewActionConfig({

if (scopes?.includes(SCOPES.RECORD_SUBMIT_FOR_APPROVAL)) {
return {
buttonType: 'positive' as const,
incomplete,
isDisabled,
messages: incomplete
Expand All @@ -234,6 +314,7 @@ function getReviewActionConfig({

if (scopes?.includes(SCOPES.RECORD_DECLARE)) {
return {
buttonType: 'primary' as const,
incomplete,
isDisabled,
messages: incomplete
Expand Down Expand Up @@ -321,7 +402,11 @@ export function Review() {

async function handleDeclaration() {
const confirmedDeclaration = await openModal<boolean | null>((close) => (
<ReviewComponent.ActionModal action="Declare" close={close} />
<ReviewComponent.ActionModal
action="Declare"
close={close}
copy={reviewActionConfiguration.messages.modal}
/>
))
if (confirmedDeclaration) {
declareMutation.mutate({
Expand Down Expand Up @@ -388,6 +473,7 @@ export function Review() {
formConfig={formConfig}
messages={reviewActionConfiguration.messages}
metadata={metadata}
primaryButtonType={reviewActionConfiguration.buttonType}
onConfirm={handleDeclaration}
onReject={handleReject}
/>
Expand Down Expand Up @@ -422,7 +508,7 @@ function RejectModal({
close(null)
}}
>
{intl.formatMessage(modalMessages.rejectModalCancel)}
{intl.formatMessage(rejectModalMessages.rejectModalCancel)}
</Button>,
<Button
key="confirm_reject_with_archive"
Expand All @@ -435,7 +521,7 @@ function RejectModal({
})
}}
>
{intl.formatMessage(modalMessages.rejectModalArchive)}
{intl.formatMessage(rejectModalMessages.rejectModalArchive)}
</Button>,
<Button
key="confirm_reject_with_update"
Expand All @@ -448,17 +534,17 @@ function RejectModal({
})
}}
>
{intl.formatMessage(modalMessages.rejectModalSendForUpdate)}
{intl.formatMessage(rejectModalMessages.rejectModalSendForUpdate)}
</Button>
]}
handleClose={() => close(null)}
responsive={false}
show={true}
title={intl.formatMessage(modalMessages.rejectModalTitle)}
title={intl.formatMessage(rejectModalMessages.rejectModalTitle)}
>
<Stack alignItems="left" direction="column">
<Text color="grey500" element="p" variant="reg16">
{intl.formatMessage(modalMessages.rejectModalDescription)}
{intl.formatMessage(rejectModalMessages.rejectModalDescription)}
</Text>
<TextInput
required={true}
Expand All @@ -468,7 +554,9 @@ function RejectModal({
}
/>
<Checkbox
label={intl.formatMessage(modalMessages.rejectModalMarkAsDuplicate)}
label={intl.formatMessage(
rejectModalMessages.rejectModalMarkAsDuplicate
)}
name={'markDUplicate'}
selected={state.isDuplicate}
value={''}
Expand Down
16 changes: 10 additions & 6 deletions packages/client/src/v2-events/features/events/components/Review.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -603,7 +603,8 @@ function ReviewActionComponent({
form,
metadata,
onReject,
messages
messages,
primaryButtonType
}: {
onConfirm: () => void
onReject?: () => void
Expand All @@ -615,6 +616,7 @@ function ReviewActionComponent({
description: MessageDescriptor
onConfirm: MessageDescriptor
}
primaryButtonType?: 'positive' | 'primary'
}) {
const intl = useIntl()
const errorExist = validationErrorsInActionFormExist(
Expand All @@ -638,7 +640,7 @@ function ReviewActionComponent({
disabled={errorExist}
id="validateDeclarationBtn"
size="large"
type="positive"
type={primaryButtonType ?? 'positive'}
onClick={onConfirm}
>
<Icon name="Check" />
Expand Down Expand Up @@ -713,8 +715,8 @@ function ActionModal({
action
}: {
copy?: {
cancel?: MessageDescriptor
primaryAction?: MessageDescriptor
onCancel?: MessageDescriptor
onConfirm?: MessageDescriptor
title?: MessageDescriptor
description?: MessageDescriptor
}
Expand All @@ -734,7 +736,9 @@ function ActionModal({
close(null)
}}
>
{intl.formatMessage(copy?.cancel || reviewMessages.actionModalCancel)}
{intl.formatMessage(
copy?.onCancel || reviewMessages.actionModalCancel
)}
</Button>,
<Button
key={'confirm_' + action}
Expand All @@ -745,7 +749,7 @@ function ActionModal({
}}
>
{intl.formatMessage(
copy?.primaryAction || reviewMessages.actionModalPrimaryAction,
copy?.onConfirm || reviewMessages.actionModalPrimaryAction,
{
action
}
Expand Down

0 comments on commit 9c8c48c

Please sign in to comment.