APPT-1668: Fixed multiple bugs around go back button (#1183)

# Description

Aligned "No, go back" links to work same way as "Go back" buttons,
navigating to previous url page, not previous screen on confirmation
page.

# Checklist:

- [ ] My work is behind a feature toggle (if appropriate)
- [ ] If my work is behind a feature toggle, I've added a full suite of
tests for both the ON and OFF state
- [ ] The ticket number is in the Pull Request title, with format
"APPT-XXX: My Title Here"
- [ ] I have ran npm tsc / lint (in the future these will be ran
automatically)
- [ ] My code generates no new .NET warnings (in the future these will
be treated as errors)
- [ ] If I've added a new Function, it is disabled in all but one of the
terraform groups (e.g. http_functions)
- [ ] If I've added a new Function, it has both unit and integration
tests. Any request body validators have unit tests also
- [ ] If I've made UI changes, I've added appropriate Playwright and
Jest tests
- [ ] If I've added/updated an end-point, I've added the appropriate
annotations and tested the Swagger documentation reflects the change

Author: Dave-O-NHS

src/client/src/app/lib/components/session-modification-confirmation.test.tsx

@@ -144,6 +144,31 @@ describe('EditSessionConfirmation', () => {
       ).toBeInTheDocument();
     });
   });
+  it('"No, go back" click resets decision and action to display previous step on a page ', async () => {
+    const { user } = render(
+      <SessionModificationConfirmation
+        newlyUnsupportedBookingsCount={3}
+        clinicalServices={mockMultipleServices}
+        session={btoa(JSON.stringify(mockSessionSummary))}
+        site="site-123"
+        date="2024-06-10"
+        mode="edit"
+      />,
+    );
+
+    await user.click(screen.getByLabelText(/Yes, cancel the appointments/));
+    await user.click(screen.getByRole('button', { name: 'Continue' }));
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'Cancel appointments' }),
+      ).toBeInTheDocument();
+    });
+
+    const href = screen.getByText('No, go back').getAttribute('href');
+    expect(href?.startsWith('/site/site-123/availability/edit?session=')).toBe(
+      true,
+    );
+  });
 });
 
 describe('CancelSessionConfirmation', () => {
@@ -288,19 +313,13 @@ describe('CancelSessionConfirmation', () => {
         screen.getByRole('button', { name: 'Cancel appointments' }),
       ).toBeInTheDocument();
     });
-    await user.click(screen.getByText('No, go back'));
 
+    const href = screen.getByText('No, go back').getAttribute('href');
     expect(
-      screen.getByRole('button', { name: 'Continue' }),
-    ).toBeInTheDocument();
-    expect(
-      screen.queryByRole('button', { name: 'Cancel appointments' }),
-    ).not.toBeInTheDocument();
-
-    const radioYes = screen.getByLabelText(/Yes, cancel the appointments/);
-    const radioNo = screen.getByLabelText(/No, do not cancel the appointments/);
-    expect(radioYes).not.toBeChecked();
-    expect(radioNo).not.toBeChecked();
+      href?.startsWith(
+        '/site/site-123/view-availability/week/edit-session?date=2024-06-10&session',
+      ),
+    ).toBe(true);
   });
 });
 

src/client/src/app/lib/components/session-modification-confirmation.tsx

@@ -246,16 +246,21 @@ export const SessionModificationConfirmation = ({
           </Button>
         )}
 
-        <Link
-          href="#"
-          onClick={e => {
-            e.preventDefault();
-            setDecision(undefined);
-            setValue('action', undefined);
-          }}
-        >
-          No, go back
-        </Link>
+        {mode == 'edit' && (
+          <Link
+            href={`/site/${site}/availability/edit?session=${session}&date=${date}`}
+          >
+            No, go back
+          </Link>
+        )}
+
+        {mode == 'cancel' && (
+          <Link
+            href={`/site/${site}/view-availability/week/edit-session?date=${date}&session=${session}`}
+          >
+            No, go back
+          </Link>
+        )}
       </ButtonGroup>
     </form>
   );

src/client/src/app/site/[site]/availability/cancel/confirmation/page.tsx

@@ -56,7 +56,7 @@ const Page = async ({ searchParams, params }: PageProps) => {
       caption={site.name}
       originPage="edit-session"
       backLink={{
-        href: `/site/${site.id}/availability/cancel?session=${session}&date=${date}`,
+        href: `/site/${site.id}/view-availability/week/edit-session?date=${date}&session=${session}`,
         renderingStrategy: 'server',
         text: 'Go back',
       }}

src/client/src/app/site/[site]/availability/edit-services/confirmation/edit-services-confirmation.test.tsx

@@ -38,32 +38,7 @@ jest.mock('@services/timeService', () => ({
   toTimeFormat: jest.fn(),
 }));
 
-describe('EditSessionConfirmation', () => {
-  it('No unsupported bookings, renders question to change session', () => {
-    render(
-      <EditServicesConfirmationPage
-        newlyUnsupportedBookingsCount={0}
-        clinicalServices={mockMultipleServices}
-        session={btoa(JSON.stringify(mockSessionSummary))}
-        removedServicesSession={btoa(JSON.stringify(mockRemovedService))}
-        site="site-123"
-        date="2024-06-10"
-      />,
-    );
-
-    expect(
-      screen.getByRole('button', { name: 'Remove service' }),
-    ).toBeInTheDocument();
-    expect(
-      screen.queryByRole('button', { name: 'Continue' }),
-    ).not.toBeInTheDocument();
-    expect(
-      screen.getByText('Are you sure you want to remove this service?'),
-    ).toBeInTheDocument();
-  });
-});
-
-describe('CancelSessionConfirmation', () => {
+describe('Edit Service Confirmation', () => {
   it('No unsupported bookings, renders question to remove the service', () => {
     render(
       <EditServicesConfirmationPage
@@ -160,6 +135,31 @@ describe('CancelSessionConfirmation', () => {
       ).toBeInTheDocument();
     });
   });
+
+  it('"No, go back" click resets decision and action to display previous step on a page ', async () => {
+    const { user } = render(
+      <EditServicesConfirmationPage
+        newlyUnsupportedBookingsCount={3}
+        clinicalServices={mockMultipleServices}
+        session={btoa(JSON.stringify(mockSessionSummary))}
+        site="site-123"
+        date="2024-06-10"
+      />,
+    );
+
+    await user.click(screen.getByLabelText(/Yes, cancel the appointments/));
+    await user.click(screen.getByRole('button', { name: 'Continue' }));
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'Cancel appointments' }),
+      ).toBeInTheDocument();
+    });
+
+    const href = screen.getByText('No, go back').getAttribute('href');
+    expect(
+      href?.startsWith('/site/site-123/availability/edit-services?session='),
+    ).toBe(true);
+  });
 });
 
 describe('submitForm', () => {

src/client/src/app/site/[site]/availability/edit-services/confirmation/edit-services-confirmation.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { SessionSummaryTable } from '@components/session-summary-table';
 import {
   Button,
@@ -72,14 +72,17 @@ export const EditServicesConfirmationPage = ({
   const {
     handleSubmit,
     register,
-    formState: { errors, isSubmitted },
-    getValues,
+    formState: { errors },
     setValue,
   } = useForm<FormData>({
     defaultValues: { action: undefined },
   });
+  const [decision, setDecision] = useState<
+    SessionModificationAction | undefined
+  >();
 
   const recordDecision: SubmitHandler<FormData> = form => {
+    setDecision(form.action as SessionModificationAction);
     setValue('action', form.action);
   };
 
@@ -210,9 +213,8 @@ export const EditServicesConfirmationPage = ({
   );
 
   const renderUnsupportedDecision = () => {
-    if (!isSubmitted) return renderRadioForm();
-    const action = getValues('action');
-    return renderConfirmationQuestion(action);
+    if (!decision) return renderRadioForm();
+    return renderConfirmationQuestion(decision);
   };
 
   return (
@@ -226,9 +228,9 @@ export const EditServicesConfirmationPage = ({
 
       {newlyUnsupportedBookingsCount > 0 ? (
         <>
-          {isSubmitted && getValues('action') ? (
+          {decision ? (
             <div className="margin-top-bottom">
-              {getValues('action') === 'remove-services'
+              {decision === 'remove-services'
                 ? newlyUnsupportedBookingsCount > 1
                   ? `You have chosen not to cancel ${newlyUnsupportedBookingsCount} bookings.`
                   : 'You have chosen not to cancel 1 booking.'
@@ -246,22 +248,21 @@ export const EditServicesConfirmationPage = ({
             </div>
           )}
 
-          {newlyUnsupportedBookingsCount &&
-            getValues('action') != 'remove-services' && (
-              <Card
-                title={String(newlyUnsupportedBookingsCount)}
-                description={
-                  newlyUnsupportedBookingsCount > 1
-                    ? 'Bookings may have to be cancelled'
-                    : 'Booking may have to be cancelled'
-                }
-                maxWidth={250}
-              />
-            )}
+          {newlyUnsupportedBookingsCount && decision != 'remove-services' && (
+            <Card
+              title={String(newlyUnsupportedBookingsCount)}
+              description={
+                newlyUnsupportedBookingsCount > 1
+                  ? 'Bookings may have to be cancelled'
+                  : 'Booking may have to be cancelled'
+              }
+              maxWidth={250}
+            />
+          )}
 
-          {isSubmitted && getValues('action') && (
+          {decision && (
             <div className="margin-top-bottom">
-              {getValues('action') === 'cancel-appointments'
+              {decision === 'cancel-appointments'
                 ? 'People will be sent a text message or email confirming their appointment has been cancelled.'
                 : ''}
             </div>

src/client/src/app/site/[site]/view-availability/week/edit-session/edit-session-decision.tsx

@@ -76,13 +76,17 @@ export const EditSessionDecision = ({
         sessionSummaries={[session]}
         clinicalServices={clinicalServices}
       />
-      <InsetText>
-        <p>
-          You can only reduce time, capacity or services from this screen. If
-          you want to increase availability for this day, you must create a new
-          session.
-        </p>
-      </InsetText>
+
+      {!cancelSessionUpliftedJourneyFlag && (
+        <InsetText>
+          <p>
+            You can only reduce time, capacity or services from this screen. If
+            you want to increase availability for this day, you must create a
+            new session.
+          </p>
+        </InsetText>
+      )}
+
       <form onSubmit={handleSubmit(submitForm)}>
         <FormGroup
           legend="What do you want to do?"