From 1dbd9647538ed14236acdb7d198bd7382bff7672 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 29 Nov 2023 09:58:17 +0100
Subject: [PATCH] :recycle: [#36] Fix the progress indicator
 overview/confirmation step state

The overview should be navigable once all the preceding steps are
completed, rather than always rendering a placeholder.
---
 .../appointments/CreateAppointment/AppointmentProgress.js | 4 +++-
 .../CreateAppointment/CreateAppointment.stories.js        | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/appointments/CreateAppointment/AppointmentProgress.js b/src/components/appointments/CreateAppointment/AppointmentProgress.js
index f4b909c7c..764773790 100644
--- a/src/components/appointments/CreateAppointment/AppointmentProgress.js
+++ b/src/components/appointments/CreateAppointment/AppointmentProgress.js
@@ -53,13 +53,15 @@ const AppointmentProgress = ({title, currentStep}) => {
       isCompleted: isConfirmation,
       isApplicable: true,
       isCurrent: checkMatchesPath(currentPathname, 'overzicht'),
-      canNavigateTo: false,
+      canNavigateTo: steps.every(step => step.isCompleted),
     },
     {
       to: 'bevestiging',
       label: intl.formatMessage(STEP_LABELS.confirmation),
       isCompleted: isSubmissionComplete,
+      isApplicable: true,
       isCurrent: checkMatchesPath(currentPathname, 'bevestiging'),
+      canNavigateTo: isSubmissionComplete,
     },
   ];
 
diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.stories.js b/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
index 6109de94f..27671bafc 100644
--- a/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
+++ b/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
@@ -219,6 +219,13 @@ export const HappyFlow = {
           /I accept the privacy policy and consent to the processing of my personal data/
         )
       );
+
+      // test that the progress indicator displays all the expected links
+      await canvas.findByRole('link', {name: 'Product'});
+      await canvas.findByRole('link', {name: 'Afspraakdetails'});
+      await canvas.findByRole('link', {name: 'Contactgegevens'});
+      await canvas.findByRole('link', {name: 'Overzicht'});
+
       const submitButton = canvas.getByRole('button', {name: 'Confirm'});
       await waitFor(async () => {
         expect(submitButton).not.toHaveAttribute('aria-disabled', 'true');
@@ -233,6 +240,7 @@ export const HappyFlow = {
         },
         {timeout: 2000, interval: 200}
       );
+      await canvas.findByRole('link', {name: 'Bevestiging'});
     });
   },
 };