From 2fa0f88fc47d4131472b015f94f5c25ccfb571d2 Mon Sep 17 00:00:00 2001
From: vasileios <zigras00@gmail.com>
Date: Fri, 10 Nov 2023 14:55:23 +0100
Subject: [PATCH] [#36] Refactored appointments

---
 src/components/Form.js                        | 140 ++++++------------
 .../ProgressIndicatorNew/MobileButton.js      |  15 +-
 .../ProgressIndicatorNew.stories.js           |   3 +-
 src/components/ProgressIndicatorNew/index.js  |  35 ++---
 src/components/ProgressIndicatorNew/utils.js  |  93 ++++++++++++
 .../CreateAppointment/AppointmentProgress.js  |  83 ++++++++---
 src/components/utils/routes.js                |  11 --
 src/i18n/compiled/en.json                     |  42 ++++++
 src/i18n/compiled/nl.json                     |  42 ++++++
 src/i18n/messages/en.json                     |  15 ++
 src/i18n/messages/nl.json                     |  15 ++
 11 files changed, 338 insertions(+), 156 deletions(-)
 create mode 100644 src/components/ProgressIndicatorNew/utils.js
 delete mode 100644 src/components/utils/routes.js

diff --git a/src/components/Form.js b/src/components/Form.js
index dbd6a3809..d2cd2becc 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -20,7 +20,6 @@ import SubmissionSummary from 'components/Summary';
 import {START_FORM_QUERY_PARAM} from 'components/constants';
 import {findNextApplicableStep} from 'components/utils';
 import {createSubmission, flagActiveSubmission, flagNoActiveSubmission} from 'data/submissions';
-import {IsFormDesigner} from 'headers';
 import useAutomaticRedirect from 'hooks/useAutomaticRedirect';
 import useFormContext from 'hooks/useFormContext';
 import usePageViews from 'hooks/usePageViews';
@@ -28,8 +27,8 @@ import useQuery from 'hooks/useQuery';
 import useRecycleSubmission from 'hooks/useRecycleSubmission';
 import useSessionTimeout from 'hooks/useSessionTimeout';
 
-import {STEP_LABELS, SUBMISSION_ALLOWED} from './constants';
-import {checkMatchesPath} from './utils/routes';
+import {addFixedSteps, getStepsInfo} from './ProgressIndicatorNew/utils';
+import {SUBMISSION_ALLOWED} from './constants';
 
 const initialState = {
   submission: null,
@@ -102,7 +101,11 @@ const Form = () => {
   const intl = useIntl();
   const prevLocale = usePrevious(intl.locale);
   const {pathname: currentPathname} = useLocation();
+
+  // TODO replace absolute path check with relative
   const stepMatch = useMatch('/stap/:step');
+  const summaryMatch = useMatch('/overzicht');
+  const confirmationMatch = useMatch('/bevestiging');
 
   // extract the declared properties and configuration
   const {steps} = form;
@@ -268,116 +271,69 @@ const Form = () => {
 
   // Progress Indicator
 
-  const isSummary = checkMatchesPath(currentPathname, 'overzicht');
-  const isStep = checkMatchesPath(currentPathname, 'stap/:step');
-  const isConfirmation = checkMatchesPath(currentPathname, 'bevestiging');
-  const isStartPage = !isSummary && !isStep && !isConfirmation;
+  const isStartPage = !summaryMatch && stepMatch == null && !confirmationMatch;
   const submissionAllowedSpec = state.submission?.submissionAllowed ?? form.submissionAllowed;
   const showOverview = submissionAllowedSpec !== SUBMISSION_ALLOWED.noWithoutOverview;
   const showConfirmation = submissionAllowedSpec === SUBMISSION_ALLOWED.yes;
   const submission = state.submission || state.submittedSubmission;
-  const hasSubmission = !!submission;
-
-  const applicableSteps = hasSubmission ? submission.steps.filter(step => step.isApplicable) : [];
-  const applicableAndCompletedSteps = applicableSteps.filter(step => step.completed);
-  const applicableCompleted =
-    hasSubmission && applicableSteps.length === applicableAndCompletedSteps.length;
-
-  // If any step cannot be submitted, there should NOT be an active link to the overview page.
-  const canSubmitSteps = hasSubmission
-    ? submission.steps.filter(step => !step.canSubmit).length === 0
-    : false;
+  const isCompleted = state.completed;
+  const formName = form.name;
 
-  // figure out the slug from the currently active step IF we're looking at a step
+  // Figure out the slug from the currently active step IF we're looking at a step
   const stepSlug = stepMatch ? stepMatch.params.step : '';
 
   // figure out the title for the mobile menu based on the state
   let activeStepTitle;
   if (isStartPage) {
-    activeStepTitle = STEP_LABELS.login;
-  } else if (isSummary) {
-    activeStepTitle = STEP_LABELS.overview;
-  } else if (isConfirmation) {
-    activeStepTitle = STEP_LABELS.confirmation;
+    activeStepTitle = intl.formatMessage({
+      description: 'Start page title',
+      defaultMessage: 'Start page',
+    });
+  } else if (summaryMatch) {
+    activeStepTitle = intl.formatMessage({
+      description: 'Summary page title',
+      defaultMessage: 'Summary',
+    });
+  } else if (confirmationMatch) {
+    activeStepTitle = intl.formatMessage({
+      description: 'Confirmation page title',
+      defaultMessage: 'Confirmation',
+    });
   } else {
     const step = steps.find(step => step.slug === stepSlug);
     activeStepTitle = step.formDefinition;
   }
 
-  const canNavigateToStep = index => {
-    // The user can navigate to a step when:
-    // 1. All previous steps have been completed
-    // 2. The user is a form designer
-    if (IsFormDesigner.getValue()) return true;
-
-    if (!submission) return false;
-
-    const previousSteps = submission.steps.slice(0, index);
-    const previousApplicableButNotCompletedSteps = previousSteps.filter(
-      step => step.isApplicable && !step.completed
-    );
-
-    return !previousApplicableButNotCompletedSteps.length;
-  };
-
-  // prepare steps - add the fixed steps-texts as well
-  const getStepsInfo = () => {
-    return form.steps.map((step, index) => ({
-      uuid: step.uuid,
-      slug: step.slug,
-      to: `/stap/${step.slug}` || '#',
-      formDefinition: step.formDefinition,
-      isCompleted: submission ? submission.steps[index].completed : false,
-      isApplicable: submission ? submission.steps[index].isApplicable : step.isApplicable ?? true,
-      isCurrent: checkMatchesPath(currentPathname, `/stap/${step.slug}`),
-      canNavigateTo: canNavigateToStep(index),
-    }));
-  };
-
-  const updatedSteps = getStepsInfo();
-
-  updatedSteps.splice(0, 0, {
-    slug: 'startpagina',
-    to: '#',
-    formDefinition: 'Start page',
-    isCompleted: hasSubmission,
-    isApplicable: true,
-    canNavigateTo: true,
-    isCurrent: checkMatchesPath(currentPathname, 'startpagina'),
-    fixedText: STEP_LABELS.login,
+  const ariaMobileIconLabel = intl.formatMessage({
+    description: 'Progress step indicator toggle icon (mobile)',
+    defaultMessage: 'Toggle the progress status display',
   });
 
-  if (showOverview) {
-    updatedSteps.splice(updatedSteps.length, 0, {
-      slug: 'overzicht',
-      to: 'overzicht',
-      formDefinition: 'Summary',
-      isCompleted: isConfirmation,
-      isApplicable: applicableCompleted && canSubmitSteps,
-      isCurrent: checkMatchesPath(currentPathname, 'overzicht'),
-      fixedText: STEP_LABELS.overview,
-    });
-    const summaryPage = updatedSteps[updatedSteps.length - 1];
-    summaryPage.canNavigateTo = canNavigateToStep(updatedSteps.length - 1);
-  }
-
-  if (showConfirmation) {
-    updatedSteps.splice(updatedSteps.length, 0, {
-      slug: 'bevestiging',
-      to: 'bevestiging',
-      formDefinition: 'Confirmation',
-      isCompleted: state ? state.completed : false,
-      isCurrent: checkMatchesPath(currentPathname, 'bevestiging'),
-      fixedText: STEP_LABELS.confirmation,
-    });
-  }
+  const accessibleToggleStepsLabel = intl.formatMessage(
+    {
+      description: 'Active step accessible label in mobile progress indicator',
+      defaultMessage: 'Current step in form {formName}: {activeStepTitle}',
+    },
+    {formName, activeStepTitle}
+  );
 
+  const updatedSteps = getStepsInfo(form.steps, submission, currentPathname);
+  const stepsToRender = addFixedSteps(
+    updatedSteps,
+    submission,
+    currentPathname,
+    showOverview,
+    showConfirmation,
+    isCompleted
+  );
+  debugger;
   const progressIndicatorNew = form.showProgressIndicator ? (
     <ProgressIndicatorNew
       progressIndicatorTitle="Progress"
-      formTitle={form.name}
-      steps={updatedSteps}
-      activeStepTitle={activeStepTitle}
+      formTitle={formName}
+      steps={stepsToRender}
+      ariaMobileIconLabel={ariaMobileIconLabel}
+      accessibleToggleStepsLabel={accessibleToggleStepsLabel}
     />
   ) : null;
 
diff --git a/src/components/ProgressIndicatorNew/MobileButton.js b/src/components/ProgressIndicatorNew/MobileButton.js
index d769cfce0..81114f934 100644
--- a/src/components/ProgressIndicatorNew/MobileButton.js
+++ b/src/components/ProgressIndicatorNew/MobileButton.js
@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
-import {FormattedMessage} from 'react-intl';
 
 import FAIcon from 'components/FAIcon';
 import {getBEMClassName} from 'utils';
 
 const MobileButton = ({
-  ariaIconLabel,
+  ariaMobileIconLabel,
   accessibleToggleStepsLabel,
   formTitle,
   expanded,
@@ -20,7 +19,7 @@ const MobileButton = ({
       <FAIcon
         icon={expanded ? 'chevron-up' : 'chevron-down'}
         modifiers={['normal']}
-        aria-label={ariaIconLabel}
+        aria-label={ariaMobileIconLabel}
       />
       <span
         className={getBEMClassName('progress-indicator__form-title')}
@@ -33,11 +32,11 @@ const MobileButton = ({
 };
 
 MobileButton.propTypes = {
-  ariaIconLabel: PropTypes.string.isRequired,
-  accessibleToggleStepsLabel: PropTypes.oneOfType([PropTypes.string, FormattedMessage]),
-  formTitle: PropTypes.string.isRequired,
-  expanded: PropTypes.bool.isRequired,
-  onExpandClick: PropTypes.func.isRequired,
+  ariaMobileIconLabel: PropTypes.string,
+  accessibleToggleStepsLabel: PropTypes.string,
+  formTitle: PropTypes.string,
+  expanded: PropTypes.bool,
+  onExpandClick: PropTypes.func,
 };
 
 export default MobileButton;
diff --git a/src/components/ProgressIndicatorNew/ProgressIndicatorNew.stories.js b/src/components/ProgressIndicatorNew/ProgressIndicatorNew.stories.js
index aa1afd223..36c5af660 100644
--- a/src/components/ProgressIndicatorNew/ProgressIndicatorNew.stories.js
+++ b/src/components/ProgressIndicatorNew/ProgressIndicatorNew.stories.js
@@ -63,7 +63,8 @@ export default {
         fixedText: STEP_LABELS.overview,
       },
     ],
-    activeStepTitle: 'Stap 2',
+    ariaMobileIconLabel: 'Progress step indicator toggle icon (mobile)',
+    accessibleToggleStepsLabel: 'Current step in form Formulier: Stap 2',
   },
 };
 
diff --git a/src/components/ProgressIndicatorNew/index.js b/src/components/ProgressIndicatorNew/index.js
index 60879ef07..b762cc5a4 100644
--- a/src/components/ProgressIndicatorNew/index.js
+++ b/src/components/ProgressIndicatorNew/index.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 import {useLocation} from 'react-router-dom';
 
 import Caption from 'components/Caption';
@@ -11,24 +11,16 @@ import {STEP_LABELS} from 'components/constants';
 import MobileButton from './MobileButton';
 import ProgressIndicatorItem from './ProgressIndicatorItem';
 
-const ProgressIndicatorNew = ({progressIndicatorTitle, formTitle, steps, activeStepTitle}) => {
-  const intl = useIntl();
+const ProgressIndicatorNew = ({
+  progressIndicatorTitle,
+  formTitle,
+  steps,
+  ariaMobileIconLabel,
+  accessibleToggleStepsLabel,
+}) => {
   const {pathname: currentPathname} = useLocation();
   const [expanded, setExpanded] = useState(false);
 
-  const ariaIconLabel = intl.formatMessage({
-    description: 'Progress step indicator toggle icon (mobile)',
-    defaultMessage: 'Toggle the progress status display',
-  });
-
-  const accessibleToggleStepsLabel = intl.formatMessage(
-    {
-      description: 'Active step accessible label in mobile progress indicator',
-      defaultMessage: 'Current step in form {formTitle}: {activeStepTitle}',
-    },
-    {formTitle, activeStepTitle}
-  );
-
   const modifiers = [];
   if (!expanded) {
     modifiers.push('mobile-collapsed');
@@ -48,7 +40,7 @@ const ProgressIndicatorNew = ({progressIndicatorTitle, formTitle, steps, activeS
     <Card blockClassName="progress-indicator" modifiers={modifiers}>
       <nav>
         <MobileButton
-          ariaIconLabel={ariaIconLabel}
+          ariaMobileIconLabel={ariaMobileIconLabel}
           accessibleToggleStepsLabel={accessibleToggleStepsLabel}
           formTitle={formTitle}
           expanded={expanded}
@@ -81,14 +73,14 @@ const ProgressIndicatorNew = ({progressIndicatorTitle, formTitle, steps, activeS
 };
 
 ProgressIndicatorNew.propTypes = {
-  progressIndicatorTitle: PropTypes.string.isRequired,
+  progressIndicatorTitle: PropTypes.string,
   formTitle: PropTypes.string,
   steps: PropTypes.arrayOf(
     PropTypes.shape({
       uuid: PropTypes.string,
-      slug: PropTypes.string.isRequired,
+      slug: PropTypes.string,
       to: PropTypes.string,
-      formDefinition: PropTypes.string.isRequired,
+      formDefinition: PropTypes.string,
       isCompleted: PropTypes.bool,
       isApplicable: PropTypes.bool,
       isCurrent: PropTypes.bool,
@@ -96,7 +88,8 @@ ProgressIndicatorNew.propTypes = {
       fixedText: PropTypes.oneOf(Object.values(STEP_LABELS)),
     })
   ).isRequired,
-  activeStepTitle: PropTypes.string,
+  ariaMobileIconLabel: PropTypes.string,
+  accessibleToggleStepsLabel: PropTypes.string,
 };
 
 export default ProgressIndicatorNew;
diff --git a/src/components/ProgressIndicatorNew/utils.js b/src/components/ProgressIndicatorNew/utils.js
new file mode 100644
index 000000000..88dfdb802
--- /dev/null
+++ b/src/components/ProgressIndicatorNew/utils.js
@@ -0,0 +1,93 @@
+import {checkMatchesPath} from 'components/appointments/CreateAppointment/routes';
+import {STEP_LABELS} from 'components/constants';
+import {IsFormDesigner} from 'headers';
+
+const canNavigateToStep = (index, submission) => {
+  // The user can navigate to a step when:
+  // 1. All previous steps have been completed
+  // 2. The user is a form designer
+  if (IsFormDesigner.getValue()) return true;
+
+  if (!submission) return false;
+
+  const previousSteps = submission.steps.slice(0, index);
+  const previousApplicableButNotCompletedSteps = previousSteps.filter(
+    step => step.isApplicable && !step.completed
+  );
+
+  return !previousApplicableButNotCompletedSteps.length;
+};
+
+const getStepsInfo = (formSteps, submission, currentPathname) => {
+  return formSteps.map((step, index) => ({
+    uuid: step.uuid,
+    slug: step.slug,
+    to: `/stap/${step.slug}` || '#',
+    formDefinition: step.formDefinition,
+    isCompleted: submission ? submission.steps[index].completed : false,
+    isApplicable: submission ? submission.steps[index].isApplicable : step.isApplicable ?? true,
+    isCurrent: checkMatchesPath(currentPathname, step.slug),
+    canNavigateTo: canNavigateToStep(index, submission),
+  }));
+};
+
+const addFixedSteps = (
+  steps,
+  submission,
+  currentPathname,
+  showOverview,
+  showConfirmation,
+  completed = false
+) => {
+  const hasSubmission = !!submission;
+  const isConfirmation = checkMatchesPath(currentPathname, 'bevestiging');
+  const applicableSteps = hasSubmission ? submission.steps.filter(step => step.isApplicable) : [];
+  const applicableAndCompletedSteps = applicableSteps.filter(step => step.completed);
+  const applicableCompleted =
+    hasSubmission && applicableSteps.length === applicableAndCompletedSteps.length;
+
+  // If any step cannot be submitted, there should NOT be an active link to the overview page.
+  const canSubmitSteps = hasSubmission
+    ? submission.steps.filter(step => !step.canSubmit).length === 0
+    : false;
+
+  steps.splice(0, 0, {
+    slug: 'startpagina',
+    to: '#',
+    formDefinition: 'Start page',
+    isCompleted: hasSubmission,
+    isApplicable: true,
+    canNavigateTo: true,
+    isCurrent: checkMatchesPath(currentPathname, 'startpagina'),
+    fixedText: STEP_LABELS.login,
+  });
+
+  if (showOverview) {
+    steps.splice(steps.length, 0, {
+      slug: 'overzicht',
+      to: 'overzicht',
+      formDefinition: 'Summary',
+      isCompleted: isConfirmation,
+      isApplicable: applicableCompleted && canSubmitSteps,
+      isCurrent: checkMatchesPath(currentPathname, 'overzicht'),
+      fixedText: STEP_LABELS.overview,
+    });
+    const summaryPage = steps[steps.length - 1];
+    summaryPage.canNavigateTo = canNavigateToStep(steps.length - 1, submission);
+  }
+
+  if (showConfirmation) {
+    steps.splice(steps.length, 0, {
+      slug: 'bevestiging',
+      to: 'bevestiging',
+      formDefinition: 'Confirmation',
+      isCompleted: completed,
+      isCurrent: checkMatchesPath(currentPathname, 'bevestiging'),
+      fixedText: STEP_LABELS.confirmation,
+    });
+  }
+
+  return steps;
+};
+
+export {addFixedSteps, getStepsInfo};
diff --git a/src/components/appointments/CreateAppointment/AppointmentProgress.js b/src/components/appointments/CreateAppointment/AppointmentProgress.js
index facd1a7e9..750fd5cde 100644
--- a/src/components/appointments/CreateAppointment/AppointmentProgress.js
+++ b/src/components/appointments/CreateAppointment/AppointmentProgress.js
@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
-import React, {useContext, useState} from 'react';
+import React, {useContext} from 'react';
 import {useIntl} from 'react-intl';
 import {useLocation} from 'react-router-dom';
 
 import {ConfigContext} from 'Context';
-import ProgressIndicatorDisplay from 'components/ProgressIndicator/ProgressIndicatorDisplay';
+import ProgressIndicatorNew from 'components/ProgressIndicatorNew';
+import {addFixedSteps} from 'components/ProgressIndicatorNew/utils';
+import {STEP_LABELS} from 'components/constants';
 
 import {useCreateAppointmentContext} from './CreateAppointmentState';
 import {APPOINTMENT_STEPS, APPOINTMENT_STEP_PATHS, checkMatchesPath} from './routes';
@@ -15,12 +17,14 @@ const AppointmentProgress = ({title, currentStep}) => {
   const intl = useIntl();
   const {pathname: currentPathname} = useLocation();
 
-  const isSummary = checkMatchesPath(currentPathname, 'overzicht');
   const isConfirmation = checkMatchesPath(currentPathname, 'bevestiging');
-
-  const [expanded, setExpanded] = useState(false);
+  const isSummary = checkMatchesPath(currentPathname, 'overzicht');
+  const isStartPage =
+    !isSummary && !isConfirmation && !APPOINTMENT_STEP_PATHS.includes(currentStep);
 
   const isSubmissionComplete = isConfirmation && submission === null;
+  const showOverview = true;
+  const showConfirmation = true;
 
   const currentStepIndex = APPOINTMENT_STEP_PATHS.indexOf(currentStep);
   const steps = APPOINTMENT_STEPS.map(({path, name}) => {
@@ -47,26 +51,59 @@ const AppointmentProgress = ({title, currentStep}) => {
     };
   });
 
-  const ProgressIndicatorDisplayComponent =
-    config?.displayComponents?.progressIndicator ?? ProgressIndicatorDisplay;
+  // Add the fixed steps to the the original steps array
+  const stepsToRender = addFixedSteps(
+    steps,
+    submission,
+    currentPathname,
+    showOverview,
+    showConfirmation,
+    isSubmissionComplete
+  );
+
+  // Figure out the title for the mobile menu based on the state
+  let activeStepTitle;
+  if (isStartPage) {
+    activeStepTitle = intl.formatMessage({
+      description: 'Start page title',
+      defaultMessage: 'Start page',
+    });
+  } else if (isSummary) {
+    activeStepTitle = intl.formatMessage({
+      description: 'Summary page title',
+      defaultMessage: 'Summary',
+    });
+  } else if (isConfirmation) {
+    activeStepTitle = intl.formatMessage({
+      description: 'Confirmation page title',
+      defaultMessage: 'Confirmation',
+    });
+  } else {
+    activeStepTitle = currentStep;
+  }
+
+  const ariaMobileIconLabel = intl.formatMessage({
+    description: 'Progress step indicator toggle icon (mobile)',
+    defaultMessage: 'Toggle the progress status display',
+  });
+
+  const accessibleToggleStepsLabel = intl.formatMessage(
+    {
+      description: 'Active step accessible label in mobile progress indicator',
+      defaultMessage: 'Current step in form {title}: {activeStepTitle}',
+    },
+    {title, activeStepTitle}
+  );
+
+  const ProgressIndicatorNewComponent =
+    config?.displayComponents?.progressIndicator ?? ProgressIndicatorNew;
   return (
-    <ProgressIndicatorDisplayComponent
-      activeStepTitle={steps[currentStepIndex].formDefinition}
+    <ProgressIndicatorNewComponent
+      progressIndicatorTitle="Progress"
       formTitle={title}
-      steps={steps}
-      hasSubmission
-      isStartPage={false}
-      summaryTo="overzicht"
-      isSummary={isSummary}
-      isConfirmation={isConfirmation}
-      isSubmissionComplete={isSubmissionComplete}
-      areApplicableStepsCompleted={
-        isSubmissionComplete || submittedSteps.length === APPOINTMENT_STEPS.length
-      }
-      showOverview
-      showConfirmation
-      expanded={expanded}
-      onExpandClick={() => setExpanded(!expanded)}
+      steps={stepsToRender}
+      ariaMobileIconLabel={ariaMobileIconLabel}
+      accessibleToggleStepsLabel={accessibleToggleStepsLabel}
     />
   );
 };
diff --git a/src/components/utils/routes.js b/src/components/utils/routes.js
deleted file mode 100644
index d62a3a66c..000000000
--- a/src/components/utils/routes.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {matchPath} from 'react-router-dom';
-
-/**
- * Check if a given relative path from the routes matches the current location.
- * @param currentPathname The current router location.pathname, from useLocation.
- * @param path            The relative path to check for matches
- */
-export const checkMatchesPath = (currentPathname, path) => {
-  const match = matchPath(path, currentPathname);
-  return match !== null;
-};
diff --git a/src/i18n/compiled/en.json b/src/i18n/compiled/en.json
index 3934b1d00..1e3944157 100644
--- a/src/i18n/compiled/en.json
+++ b/src/i18n/compiled/en.json
@@ -55,6 +55,12 @@
       "value": "Log out"
     }
   ],
+  "1a96bc": [
+    {
+      "type": 1,
+      "value": "progressIndicatorTitle"
+    }
+  ],
   "1hdvgS": [
     {
       "type": 0,
@@ -1241,6 +1247,24 @@
       "value": "Times are in your local time"
     }
   ],
+  "hFqzG6": [
+    {
+      "type": 0,
+      "value": "Current step in form "
+    },
+    {
+      "type": 1,
+      "value": "title"
+    },
+    {
+      "type": 0,
+      "value": ": "
+    },
+    {
+      "type": 1,
+      "value": "activeStepTitle"
+    }
+  ],
   "hHS5vj": [
     {
       "type": 0,
@@ -1341,6 +1365,24 @@
       "value": "Your products"
     }
   ],
+  "jdzNwf": [
+    {
+      "type": 0,
+      "value": "Current step in form "
+    },
+    {
+      "type": 1,
+      "value": "formName"
+    },
+    {
+      "type": 0,
+      "value": ": "
+    },
+    {
+      "type": 1,
+      "value": "activeStepTitle"
+    }
+  ],
   "jnYRyz": [
     {
       "type": 0,
diff --git a/src/i18n/compiled/nl.json b/src/i18n/compiled/nl.json
index 02671942d..7ce9e4f38 100644
--- a/src/i18n/compiled/nl.json
+++ b/src/i18n/compiled/nl.json
@@ -55,6 +55,12 @@
       "value": "Uitloggen"
     }
   ],
+  "1a96bc": [
+    {
+      "type": 1,
+      "value": "progressIndicatorTitle"
+    }
+  ],
   "1hdvgS": [
     {
       "type": 0,
@@ -1245,6 +1251,24 @@
       "value": "U wordt op dit tijdstip op de afspraak verwacht"
     }
   ],
+  "hFqzG6": [
+    {
+      "type": 0,
+      "value": "Current step in form "
+    },
+    {
+      "type": 1,
+      "value": "title"
+    },
+    {
+      "type": 0,
+      "value": ": "
+    },
+    {
+      "type": 1,
+      "value": "activeStepTitle"
+    }
+  ],
   "hHS5vj": [
     {
       "type": 0,
@@ -1345,6 +1369,24 @@
       "value": "Uw producten"
     }
   ],
+  "jdzNwf": [
+    {
+      "type": 0,
+      "value": "Current step in form "
+    },
+    {
+      "type": 1,
+      "value": "formName"
+    },
+    {
+      "type": 0,
+      "value": ": "
+    },
+    {
+      "type": 1,
+      "value": "activeStepTitle"
+    }
+  ],
   "jnYRyz": [
     {
       "type": 0,
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 03e72a82a..2a9903b02 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -19,6 +19,11 @@
     "description": "Log out button text",
     "originalDefault": "Log out"
   },
+  "1a96bc": {
+    "defaultMessage": "{progressIndicatorTitle}",
+    "description": "Title of progress indicator",
+    "originalDefault": "{progressIndicatorTitle}"
+  },
   "1hdvgS": {
     "defaultMessage": "Something went wrong while presenting the login option. Please contact the municipality.",
     "description": "Co-sign auth option not available on form",
@@ -599,6 +604,11 @@
     "description": "Appoinments: time select help text",
     "originalDefault": "Times are in your local time"
   },
+  "hFqzG6": {
+    "defaultMessage": "Current step in form {title}: {activeStepTitle}",
+    "description": "Active step accessible label in mobile progress indicator",
+    "originalDefault": "Current step in form {title}: {activeStepTitle}"
+  },
   "hHS5vj": {
     "defaultMessage": "Something went wrong while submitting the form.",
     "description": "Generic submission error",
@@ -659,6 +669,11 @@
     "description": "Product summary on appointments location and time step heading",
     "originalDefault": "Your products"
   },
+  "jdzNwf": {
+    "defaultMessage": "Current step in form {formName}: {activeStepTitle}",
+    "description": "Active step accessible label in mobile progress indicator",
+    "originalDefault": "Current step in form {formName}: {activeStepTitle}"
+  },
   "jnYRyz": {
     "defaultMessage": "Expected {expected}, received {received}.",
     "description": "ZOD 'invalid_type' error message",
diff --git a/src/i18n/messages/nl.json b/src/i18n/messages/nl.json
index af0937c2b..91892cc5b 100644
--- a/src/i18n/messages/nl.json
+++ b/src/i18n/messages/nl.json
@@ -19,6 +19,11 @@
     "description": "Log out button text",
     "originalDefault": "Log out"
   },
+  "1a96bc": {
+    "defaultMessage": "{progressIndicatorTitle}",
+    "description": "Title of progress indicator",
+    "originalDefault": "{progressIndicatorTitle}"
+  },
   "1hdvgS": {
     "defaultMessage": "Er is iets fout gegaan bij het presenteren van de inlogopties. Neem alstublieft contact met ons op.",
     "description": "Co-sign auth option not available on form",
@@ -605,6 +610,11 @@
     "description": "Appoinments: time select help text",
     "originalDefault": "Times are in your local time"
   },
+  "hFqzG6": {
+    "defaultMessage": "Current step in form {title}: {activeStepTitle}",
+    "description": "Active step accessible label in mobile progress indicator",
+    "originalDefault": "Current step in form {title}: {activeStepTitle}"
+  },
   "hHS5vj": {
     "defaultMessage": "Er is iets fout gegaan bij het verzenden.",
     "description": "Generic submission error",
@@ -666,6 +676,11 @@
     "description": "Product summary on appointments location and time step heading",
     "originalDefault": "Your products"
   },
+  "jdzNwf": {
+    "defaultMessage": "Current step in form {formName}: {activeStepTitle}",
+    "description": "Active step accessible label in mobile progress indicator",
+    "originalDefault": "Current step in form {formName}: {activeStepTitle}"
+  },
   "jnYRyz": {
     "defaultMessage": "Verwachtte type {expected} maar kreeg {received}.",
     "description": "ZOD 'invalid_type' error message",