feat: Ensure "Go to review" is always displayed for forms

CHANGELOG.md

@@ -299,6 +299,7 @@ To see Events V2 in action, check out the example configurations in the **countr
 - Add an Alpha version of configurable "Print" button that will be refactored in a later release - this button can be used to print certificates during declaration/correction flow. [#10039](https://github.com/opencrvs/opencrvs-core/issues/10039)
 - Add bulk import endpoint [#10590](https://github.com/opencrvs/opencrvs-core/pull/10590)
 - Add multi-field search with a single component [#10617](https://github.com/opencrvs/opencrvs-core/issues/10617)
+- Always display a "Go to review" button on every page of any form of events to allow easier navigation between the preview and the form fields. [#10132](https://github.com/opencrvs/opencrvs-core/issues/10132)
 
 ### Improvements
 

packages/client/src/i18n/messages/views/register.ts

@@ -17,6 +17,7 @@ interface IRegisterMessages
   reviewEventRegistration: MessageDescriptor
   submitDescription: MessageDescriptor
   registerFormQueryError: MessageDescriptor
+  goToReviewButton: MessageDescriptor
   backToReviewButton: MessageDescriptor
   saveDeclarationConfirmModalTitle: MessageDescriptor
   saveDeclarationConfirmModalDescription: MessageDescriptor
@@ -63,6 +64,10 @@ const messagesToDefine: IRegisterMessages = {
       'The page cannot be loaded at this time due to low connectivity or a network error. Please click refresh to try again, or try again later.',
     description: 'The error message shown when a search query fails'
   },
+  goToReviewButton: {
+    id: 'register.selectVitalEvent.goToReviewButton',
+    defaultMessage: 'Go to review'
+  },
   backToReviewButton: {
     id: 'register.selectVitalEvent.backToReviewButton',
     defaultMessage: 'Back to review'

packages/client/src/v2-events/features/events/actions/correct/request/CorrectionRequest.interaction.stories.tsx

@@ -160,7 +160,7 @@ export const ReviewWithParentFieldChanges: Story = {
 
     await step('Change senior pass values', async () => {
       await userEvent.click(
-        canvas.getByRole('button', { name: 'Back to review' })
+        canvas.getByRole('button', { name: 'Go to review' })
       )
       await userEvent.click(canvas.getByTestId('change-button-senior-pass.id'))
       await userEvent.type(
@@ -186,7 +186,7 @@ export const ReviewWithParentFieldChanges: Story = {
         })
       )
       await userEvent.click(
-        canvas.getByRole('button', { name: 'Back to review' })
+        canvas.getByRole('button', { name: 'Go to review' })
       )
     })
 
@@ -234,9 +234,9 @@ export const ReviewWithParentFieldChanges: Story = {
       )
     })
 
-    await step('Go back to review', async () => {
+    await step('Go to review', async () => {
       await userEvent.click(
-        canvas.getByRole('button', { name: 'Back to review' })
+        canvas.getByRole('button', { name: 'Go to review' })
       )
     })
 
@@ -249,7 +249,7 @@ export const ReviewWithParentFieldChanges: Story = {
       )
 
       await userEvent.click(
-        canvas.getByRole('button', { name: 'Back to review' })
+        canvas.getByRole('button', { name: 'Go to review' })
       )
     })
 
@@ -332,7 +332,7 @@ export const AddressStaysUnchangedInSummaryWhenNotEdited: Story = {
     const canvas = within(canvasElement)
     await step('Validate review content', async () => {
       await userEvent.click(
-        await canvas.findByRole('button', { name: 'Back to review' })
+        await canvas.findByRole('button', { name: 'Go to review' })
       )
 
       await canvas.findByText("Applicant's address")
@@ -354,7 +354,7 @@ export const AddressStaysUnchangedInSummaryWhenNotEdited: Story = {
       await canvas.findByText("Applicant's address")
 
       await userEvent.click(
-        await canvas.findByRole('button', { name: 'Back to review' })
+        await canvas.findByRole('button', { name: 'Go to review' })
       )
     })
 

packages/client/src/v2-events/features/events/actions/correct/request/FormFieldParentChildReset.stories.tsx

@@ -341,9 +341,9 @@ export const FormFieldParentChildReset: Story = {
       await userEvent.type(canvas.getByTestId('text__recommender____age'), '36')
     })
 
-    await step('Go back to review', async () => {
+    await step('Go to review', async () => {
       await userEvent.click(
-        canvas.getByRole('button', { name: 'Back to review' })
+        canvas.getByRole('button', { name: 'Go to review' })
       )
 
       await expect(

packages/client/src/v2-events/features/events/actions/correct/request/Pages.tsx

@@ -92,7 +92,6 @@ export function Pages() {
         isCorrection={true}
         pageId={currentPageId}
         setFormData={(data) => setFormValues(data)}
-        showReviewButton={searchParams.from === 'review'}
         validatorContext={validatorContext}
         onPageChange={(nextPageId: string) =>
           navigate(

packages/client/src/v2-events/features/events/actions/correct/request/Summary/Summary.tsx

@@ -202,8 +202,8 @@ export function Summary() {
           title={intl.formatMessage(correctionMessages.correctionSummaryTitle)}
           topActionButtons={[
             <SecondaryButton
-              key="back-to-review"
-              id="back-to-review"
+              key="go-to-review"
+              id="go-to-review"
               onClick={() =>
                 navigate(
                   ROUTES.V2.EVENTS.REQUEST_CORRECTION.REVIEW.buildPath(
@@ -215,7 +215,7 @@ export function Summary() {
                 )
               }
             >
-              {intl.formatMessage(registerMessages.backToReviewButton)}
+              {intl.formatMessage(registerMessages.goToReviewButton)}
             </SecondaryButton>
           ]}
         >

packages/client/src/v2-events/features/events/actions/declare/Pages.tsx

@@ -108,7 +108,6 @@ export function Pages() {
         formPages={declarationPages}
         pageId={currentPageId}
         setFormData={(data) => setFormValues(data)}
-        showReviewButton={searchParams.from === 'review'}
         validatorContext={validatorContext}
         onPageChange={(nextPageId: string) =>
           navigate(

packages/client/src/v2-events/features/events/actions/declare/Review.interaction.stories.tsx

@@ -511,8 +511,8 @@ export const ReviewForIncompleteNameInteraction: Story = {
       const surnameInput = await canvas.findByTestId('text__surname')
       await userEvent.clear(surnameInput)
 
-      const backToReviewButton = await canvas.findByText('Back to review')
-      await userEvent.click(backToReviewButton)
+      const goToReviewButton = await canvas.findByText('Go to review')
+      await userEvent.click(goToReviewButton)
       await canvas.findByText('Declaration incomplete')
     })
   }
@@ -577,8 +577,8 @@ export const ChangeFieldInReview: Story = {
     })
 
     await step('Navigate back to review', async () => {
-      const backToReviewButton = await canvas.findByText('Back to review')
-      await userEvent.click(backToReviewButton)
+      const goToReviewButton = await canvas.findByText('Go to review')
+      await userEvent.click(goToReviewButton)
 
       await waitFor(async () => {
         await expect(canvas.getByText("Applicant's name")).toBeInTheDocument()

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

@@ -106,7 +106,7 @@ export function Pages() {
         })}
         pageId={currentPageId}
         setFormData={(data) => setAnnotation(data)}
-        showReviewButton={searchParams.from === 'review'}
+        showReviewButton={false}
         validateBeforeNextPage={true}
         validatorContext={validatorContext}
         onPageChange={(nextPageId: string) => {

packages/client/src/v2-events/features/events/actions/register/Pages.tsx

@@ -85,7 +85,6 @@ export function Pages() {
         formPages={declarationPages}
         pageId={currentPageId}
         setFormData={(data) => setFormValues(data)}
-        showReviewButton={searchParams.from === 'review'}
         validatorContext={validatorContext}
         onPageChange={(nextPageId: string) =>
           navigate(

packages/client/src/v2-events/features/events/actions/validate/Pages.tsx

@@ -87,7 +87,6 @@ export function Pages() {
         formPages={formPages}
         pageId={currentPageId}
         setFormData={(data) => setFormValues(data)}
-        showReviewButton={searchParams.from === 'review'}
         validatorContext={validatorContext}
         onPageChange={(nextPageId: string) =>
           navigate(

packages/client/src/v2-events/features/events/actions/validate/Review.interaction.fileRemoval.stories.tsx

@@ -147,7 +147,7 @@ export const RemovingExistingFileSendsNull: Story = {
 
       await userEvent.click(
         await canvas.findByRole('button', {
-          name: 'Back to review'
+          name: 'Go to review'
         })
       )
     })
@@ -429,7 +429,7 @@ export const RemovingMultipleFilesDeletesAll: Story = {
     await step('Clears file references and sends payload', async () => {
       await userEvent.click(
         await canvas.findByRole('button', {
-          name: 'Back to review'
+          name: 'Go to review'
         })
       )
       await canvas.findByText('No supporting documents')

packages/client/src/v2-events/features/events/components/FormWizard.tsx

@@ -22,10 +22,10 @@ export const messages = defineMessages({
     description: 'Back button text',
     id: 'buttons.back'
   },
-  backToReview: {
-    defaultMessage: 'Back to review',
-    description: 'Back to review button text',
-    id: 'buttons.backToReview'
+  goToReview: {
+    defaultMessage: 'Go to review',
+    description: 'Go to review button text',
+    id: 'buttons.goToReview'
   }
 })
 
@@ -38,7 +38,6 @@ export type FormWizardProps = PropsWithChildren<{
   /** Callback when the user submits the form wizard */
   onSubmit: () => void
   pageTitle: string
-
   showReviewButton?: boolean
 }>
 
@@ -49,8 +48,8 @@ export const FormWizard = ({
   pageTitle,
   onNextPage,
   onPreviousPage,
-  continueButtonText = 'Continue',
-  showReviewButton
+  showReviewButton,
+  continueButtonText = 'Continue'
 }: FormWizardProps & {
   continueButtonText?: string
 }) => {
@@ -79,10 +78,9 @@ export const FormWizard = ({
             >
               {continueButtonText}
             </Button>
-
             {showReviewButton && (
               <Button size="large" type="secondary" onClick={onSubmit}>
-                {intl.formatMessage(messages.backToReview)}
+                {intl.formatMessage(messages.goToReview)}
               </Button>
             )}
           </Stack>

packages/client/src/v2-events/features/events/components/Pages.tsx

@@ -57,7 +57,7 @@ type DeclarationProps =
  */
 export function Pages({
   form,
-  showReviewButton,
+  showReviewButton = true,
   formPages,
   onPageChange,
   onSubmit,

packages/client/src/v2-events/features/events/components/VerificationWizard.interaction.stories.tsx

@@ -70,7 +70,6 @@ export const VerificationWizardModal: Story = {
           }
         }}
         pageTitle="Verification Wizard"
-        showReviewButton={false}
         onNextPage={onNextPageSpy}
         onPreviousPage={noop}
         onSubmit={noop}

packages/client/src/v2-events/features/events/components/VerificationWizard.tsx

@@ -128,7 +128,7 @@ export const VerificationWizard = ({
 
             {showReviewButton && (
               <Button size="large" type="secondary" onClick={onSubmit}>
-                {intl.formatMessage(formWizardMessages.backToReview)}
+                {intl.formatMessage(formWizardMessages.goToReview)}
               </Button>
             )}
           </Stack>

packages/client/src/views/CorrectionForm/CorrectionSummary.tsx

@@ -183,7 +183,7 @@ class CorrectionSummaryComponent extends React.Component<IFullProps, IState> {
         key="back_to_review"
         onClick={this.gotoReviewPage}
       >
-        {intl.formatMessage(registerMessages.backToReviewButton)}
+        {intl.formatMessage(registerMessages.goToReviewButton)}
       </SecondaryButton>
     )
 

packages/client/src/views/RegisterForm/review/ReviewSection.tsx

@@ -795,9 +795,10 @@ class ReviewSectionComp extends React.Component<FullProps, State> {
     groupId: string,
     fieldName?: string
   ) => {
-    const { draft, pageRoute } = this.props
+    const { draft, pageRoute, writeDeclaration } = this.props
     const declaration = draft
     declaration.review = true
+    writeDeclaration(declaration)
 
     this.props.router.navigate(
       generateGoToPageGroupUrl({