[OSDEV-2203] Implemented new multi-step claim flow for production locations with routing skeleton and shared layout.

doc/release/RELEASE-NOTES.md

@@ -11,6 +11,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
 
 ### What's new
 * [OSDEV-2200](https://opensupplyhub.atlassian.net/browse/OSDEV-2200) - Implements a new claim introduction page for the new facility claiming process, accessible via `/claim/:osId`, which can be enabled or activated through a feature flag.
+* [OSDEV-2203](https://opensupplyhub.atlassian.net/browse/OSDEV-2203) - Implemented new multi-step claim flow for production locations with routing skeleton and shared layout. Introduced claim form page (`/claim/:osID/details/`) featuring a four-step stepper (Eligibility Check, Contact Information, Business Details, Production Location Details). Added step-isolated form validation with optimistic button states that enable on initial render and disable after user interaction with errors. Integrated session-based URL access protection and data prefetching for countries, facility processing types, parent companies, and production location data using the existing Redux infrastructure for the claim form steps where this data should be prepopulated.
 
 ### Release instructions
 * Ensure that the following commands are included in the `post_deployment` command:

src/react/src/Routes.jsx

@@ -25,6 +25,7 @@ import RouteNotFound from './components/RouteNotFound';
 import Dashboard from './components/Dashboard';
 import FeatureFlag from './components/FeatureFlag';
 import ClaimFacility from './components/ClaimFacility';
+import ClaimForm from './components/InitialClaimFlow/ClaimForm/ClaimForm';
 import ClaimedFacilities from './components/ClaimedFacilities';
 import SurveyDialogNotification from './components/SurveyDialogNotification';
 import Settings from './components/Settings/Settings';
@@ -57,9 +58,9 @@ import {
     dashboardRoute,
     claimFacilityRoute,
     claimIntroRoute,
+    claimDetailsRoute,
     claimedFacilitiesRoute,
     CLAIM_A_FACILITY,
-    ENABLE_V1_CLAIMS_FLOW,
     settingsRoute,
     InfoLink,
     InfoPaths,
@@ -109,20 +110,6 @@ class Routes extends Component {
                             id="mainPanel"
                         >
                             <Switch>
-                                <Route
-                                    exact
-                                    path={claimIntroRoute}
-                                    render={() => (
-                                        <FeatureFlag
-                                            flag={ENABLE_V1_CLAIMS_FLOW}
-                                            alternative={
-                                                <Route component={Facilities} />
-                                            }
-                                        >
-                                            <Route component={ClaimIntro} />
-                                        </FeatureFlag>
-                                    )}
-                                />
                                 <Route
                                     exact
                                     path={claimFacilityRoute}
@@ -150,6 +137,16 @@ class Routes extends Component {
                                         </FeatureFlag>
                                     )}
                                 />
+                                <Route
+                                    exact
+                                    path={claimIntroRoute}
+                                    component={ClaimIntro}
+                                />
+                                <Route
+                                    exact
+                                    path={claimDetailsRoute}
+                                    component={ClaimForm}
+                                />
                                 <Route
                                     path={facilitiesRoute}
                                     component={Facilities}

src/react/src/__tests__/components/ClaimInfoSection.test.js

@@ -117,10 +117,10 @@ describe('ClaimInfoSection component', () => {
             ).toBeInTheDocument();
         });
 
-        test('displays Step 5 - Get Verified', () => {
+        test('displays Step 5 - Get a Credible and Confirmed Profile', () => {
             const { getByText } = renderComponent();
 
-            expect(getByText(/Get Verified:/)).toBeInTheDocument();
+            expect(getByText(/Get a Credible and Confirmed Profile:/)).toBeInTheDocument();
             expect(
                 getByText(/After the claim is approved, you get a credible/)
             ).toBeInTheDocument();

src/react/src/__tests__/components/ClaimIntro.test.js

@@ -4,7 +4,11 @@ import { fireEvent } from '@testing-library/react';
 import history from '../../util/history';
 import renderWithProviders from '../../util/testUtils/renderWithProviders';
 import ClaimIntro from '../../components/InitialClaimFlow/ClaimIntro/ClaimIntro';
-import { makeClaimDetailsLink } from '../../util/util';
+import { facilityDetailsRoute, claimDetailsRoute } from '../../util/constants';
+
+beforeAll(() => {
+    window.scrollTo = jest.fn();
+});
 
 jest.mock('../../components/InitialClaimFlow/ClaimIntro/ClaimInfoSection', () => () => (
     <div data-testid="claim-info-section">ClaimInfoSection</div>
@@ -80,7 +84,7 @@ describe('ClaimIntro component', () => {
         test('renders both action buttons', () => {
             const { getByText } = renderComponent();
 
-            expect(getByText('GO BACK')).toBeInTheDocument();
+            expect(getByText('Go Back')).toBeInTheDocument();
             expect(getByText('Continue to Claim Form')).toBeInTheDocument();
         });
 
@@ -92,25 +96,26 @@ describe('ClaimIntro component', () => {
     });
 
     describe('Navigation functionality', () => {
-        test('navigates back when GO BACK button is clicked', () => {
-            history.push('/some-page');
-            const previousPath = history.location.pathname;
-
+        test('navigates back when Go Back button is clicked', () => {
             const { getByText } = renderComponent();
-            const backButton = getByText('GO BACK');
+            const backButton = getByText('Go Back');
 
             fireEvent.click(backButton);
 
-            expect(history.location.pathname).toBe(previousPath);
+            expect(history.location.pathname).toBe(facilityDetailsRoute.replace(':osID', mockOsID));
         });
 
         test('navigates to claim details when Continue button is clicked', () => {
             const { getByText } = renderComponent();
-            const continueButton = getByText('Continue to Claim Form');
+            const sessionStorageMock = {
+                setItem: jest.fn(),
+            };
+            global.sessionStorage = sessionStorageMock;
 
+            const continueButton = getByText('Continue to Claim Form');
             fireEvent.click(continueButton);
 
-            const expectedPath = makeClaimDetailsLink(mockOsID);
+            const expectedPath = claimDetailsRoute.replace(':osID', mockOsID);
             expect(history.location.pathname).toBe(expectedPath);
         });
     });

src/react/src/actions/claimForm.js

@@ -0,0 +1,11 @@
+import { createAction } from 'redux-act';
+
+// Step navigation actions.
+export const setActiveClaimFormStep = createAction(
+    'SET_ACTIVE_CLAIM_FORM_STEP',
+);
+export const markStepComplete = createAction('MARK_CLAIM_FORM_STEP_COMPLETE');
+
+// Form data actions.
+export const updateClaimFormField = createAction('UPDATE_CLAIM_FORM_FIELD');
+export const resetClaimForm = createAction('RESET_CLAIM_FORM');