@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.20.0

package/jsx/core/MultiStepForm/MultiStepForm.mocks.d.ts

@@ -1,5 +1,23 @@
 /// <reference types="react" />
-export interface DemoFormDataType {
+import { BannerMessage } from '@pega/cosmos-react-core';
+import MultiStepFormProps from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';
+export interface MultiStepFormDemoProps {
+    heading?: MultiStepFormProps['heading'];
+    stepIndicator?: MultiStepFormProps['stepIndicator'];
+}
+export interface ReducerAction {
+    type: string;
+    payload?: any;
+}
+export interface DemoMultiStepState {
+    formData: DemoFormDataType;
+    formErrors: DemoFormErrorsType;
+    currentStepIndex: number;
+    numSteps: number;
+    cancelled: boolean;
+    finished: boolean;
+}
+interface DemoFormDataType {
     [key: string]: string | boolean | undefined;
     firstName?: string;
     lastName?: string;
@@ -18,8 +36,8 @@ export interface DemoFormDataType {
     finalRecommendation?: string;
     recommendationComments?: string;
 }
-export interface DemoFormErrorsType {
-    [field: string]: string | undefined;
+interface DemoFormErrorsType {
+    [field: string]: BannerMessage;
 }
 interface MockFormArgs {
     formData: DemoFormDataType;
@@ -29,9 +47,24 @@ interface MockFormArgs {
         payload?: any;
     }) => void;
 }
+interface FieldData {
+    name: string;
+    label: string;
+}
+export declare const stepFields: FieldData[][];
+export declare const initialState: DemoMultiStepState;
+export declare const reducer: (state: DemoMultiStepState, action: ReducerAction) => DemoMultiStepState | {
+    currentStepIndex: any;
+    formErrors: {};
+    formData: DemoFormDataType;
+    numSteps: number;
+    cancelled: boolean;
+    finished: boolean;
+};
 export declare const ApplicantDetailsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
 export declare const InterviewNotesFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
 export declare const NextInterviewFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
 export declare const RecommendationsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export declare const MultiStepModal: (args: MultiStepFormDemoProps) => JSX.Element;
 export {};
 //# sourceMappingURL=MultiStepForm.mocks.d.ts.map

package/jsx/core/MultiStepForm/MultiStepForm.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":";AAeA,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,UAAU,YAAY;IACpB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,sBAAsB,uCAAwC,YAAY,gBAuGtF,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAAwC,YAAY,gBA6BpF,CAAC;AAEF,eAAO,MAAM,mBAAmB,uCAAwC,YAAY,gBAuBnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAwC,YAAY,gBAkKrF,CAAC"}
+{"version":3,"file":"MultiStepForm.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":";AAYA,OAAO,EAGL,aAAa,EAgBd,MAAM,yBAAyB,CAAC;AACjC,OAAO,kBAEN,MAAM,0EAA0E,CAAC;AAIlF,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAQD,UAAU,gBAAgB;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,UAAU,kBAAkB;IAC1B,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAAC;CAChC;AAED,UAAU,YAAY;IACpB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5D;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,SAAS,EAAE,EAwBnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,kBAY1B,CAAC;AA6BF,eAAO,MAAM,OAAO,UAAW,kBAAkB,UAAU,aAAa;;;cApH5D,gBAAgB;cAGhB,MAAM;eACL,OAAO;cACR,OAAO;CA8MlB,CAAC;AAEF,eAAO,MAAM,sBAAsB,uCAAwC,YAAY,gBAgGtF,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAAwC,YAAY,gBA2BpF,CAAC;AAEF,eAAO,MAAM,mBAAmB,uCAAwC,YAAY,gBAsBnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAwC,YAAY,gBAiKrF,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,sBAAsB,gBA4K1D,CAAC"}

package/jsx/core/MultiStepForm/MultiStepForm.mocks.jsx

@@ -1,26 +1,179 @@
-import { Input, Grid, FieldGroup, TextArea, RadioButtonGroup, RadioButton, CurrencyInput, Select, Option, Checkbox } from '@pega/cosmos-react-core';
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { Banner, Button, Checkbox, CurrencyInput, FieldGroup, Grid, Input, Modal, MultiStepForm, Option, RadioButton, RadioButtonGroup, Select, TextArea, useModalContext, useToaster } from '@pega/cosmos-react-core';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
+export const stepFields = [
+    [
+        { name: 'firstName', label: 'First name' },
+        { name: 'lastName', label: 'Last name' },
+        { name: 'currentTitle', label: 'Current title' },
+        { name: 'currentCompany', label: 'Current company' },
+        { name: 'salaryRequested', label: 'Salary requested' },
+        { name: 'experienceLevel', label: 'Experience level' },
+        { name: 'priorityOne', label: 'First' },
+        { name: 'priorityTwo', label: 'Second' },
+        { name: 'priorityThree', label: 'Third' }
+    ],
+    [
+        { name: 'interviewNotes', label: 'Impressions' },
+        { name: 'additionalInterview', label: 'Request additional interview' }
+    ],
+    [{ name: 'nextInterviewer', label: 'Next interviewer' }],
+    [
+        { name: 'salaryRequestedReview', label: 'Salary requested' },
+        { name: 'salaryRequestReview', label: 'Salary request fit' },
+        { name: 'cultureFit', label: 'Culture fit' },
+        { name: 'finalRecommendation', label: 'Final recommendation' },
+        { name: 'recommendationComments', label: 'Comments' }
+    ]
+];
+export const initialState = {
+    currentStepIndex: 0,
+    cancelled: false,
+    finished: false,
+    numSteps: 3,
+    formData: {
+        firstName: 'Marcus',
+        lastName: 'Kennedy',
+        currentTitle: 'Data Analyst',
+        currentCompany: 'Acme Co.'
+    },
+    formErrors: {}
+};
+const formValidation = {
+    salaryRequested: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    experienceLevel: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    nextInterviewer: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    salaryRequestReview: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    cultureFit: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    finalRecommendation: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    }
+};
+export const reducer = (state, action) => {
+    const type = action.type;
+    const payload = action.payload;
+    switch (type) {
+        case 'restart': {
+            return initialState;
+        }
+        case 'cancel': {
+            return {
+                ...state,
+                cancelled: true
+            };
+        }
+        case 'finish': {
+            return {
+                ...state,
+                finished: true
+            };
+        }
+        case 'setStep': {
+            return {
+                ...state,
+                currentStepIndex: payload,
+                formErrors: {}
+            };
+        }
+        case 'setFieldValue': {
+            const { name: field, label, value } = payload;
+            const formData = {
+                ...state.formData
+            };
+            const formErrors = {
+                ...state.formErrors
+            };
+            formData[field] = value;
+            if (formErrors[field] && Object.prototype.hasOwnProperty.call(formValidation, field)) {
+                const valid = formValidation[field].validator(value);
+                if (valid) {
+                    delete formErrors[field];
+                }
+                else {
+                    formErrors[field] = { label, description: formValidation[field].message };
+                }
+            }
+            return {
+                ...state,
+                formData,
+                formErrors
+            };
+        }
+        case 'submitCurrentStep': {
+            const stepIndex = state.numSteps === 4 || state.currentStepIndex <= 1
+                ? state.currentStepIndex
+                : state.currentStepIndex + 1;
+            const formErrors = { ...state.formErrors };
+            let isValid = true;
+            const validateFields = (fields) => {
+                if (!fields)
+                    return;
+                fields.forEach(({ name: field, label }) => {
+                    if (Object.prototype.hasOwnProperty.call(formValidation, field)) {
+                        const valid = formValidation[field].validator(state.formData[field]);
+                        if (valid) {
+                            delete formErrors[field];
+                        }
+                        else {
+                            isValid = false;
+                            formErrors[field] = { label, description: formValidation[field].message };
+                        }
+                    }
+                });
+            };
+            validateFields(stepFields[stepIndex]);
+            return {
+                ...state,
+                numSteps: state.formData.additionalInterview ? 4 : 3,
+                currentStepIndex: isValid && state.currentStepIndex !== state.numSteps - 1
+                    ? state.currentStepIndex + 1
+                    : state.currentStepIndex,
+                finished: isValid && state.currentStepIndex === state.numSteps - 1,
+                formErrors
+            };
+        }
+        default:
+            return state;
+    }
+};
 export const ApplicantDetailsFields = ({ formData, formErrors, dispatch }) => {
     return (<Grid container={{ gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }}>
-      <Input name='firstName' label='First name' value={formData.firstName} readOnly/>
-      <Input name='lastName' label='Last name' value={formData.lastName} readOnly/>
-      <Input name='currentTitle' label='Current title' value={formData.currentTitle} onChange={(e) => dispatch({
+      <Input {...stepFields[0][0]} value={formData.firstName} readOnly/>
+      <Input {...stepFields[0][1]} value={formData.lastName} readOnly/>
+      <Input {...stepFields[0][2]} value={formData.currentTitle} onChange={(e) => dispatch({
             type: 'setFieldValue',
-            payload: { field: 'currentTitle', value: e.target.value }
+            payload: { ...stepFields[0][2], value: e.target.value }
         })}/>
-      <Input name='currentCompany' label='Current company' value={formData.currentCompany} onChange={(e) => dispatch({
+      <Input {...stepFields[0][3]} value={formData.currentCompany} onChange={(e) => dispatch({
             type: 'setFieldValue',
-            payload: { field: 'currentCompany', value: e.target.value }
+            payload: { ...stepFields[0][3], value: e.target.value }
         })}/>
-      <CurrencyInput name='salaryRequested' label='Salary requested' value={formData.salaryRequested} currencyISOCode='USD' onChange={value => dispatch({
+      <CurrencyInput {...stepFields[0][4]} value={formData.salaryRequested} currencyISOCode='USD' onChange={value => dispatch({
             type: 'setFieldValue',
-            payload: { field: 'salaryRequested', value }
-        })} status={formErrors.salaryRequested ? 'error' : undefined} info={formErrors.salaryRequested ? formErrors.salaryRequested : undefined} required/>
-      <Select id='experienceLevel' label='Weighted experience' value={formData.experienceLevel} onChange={(e) => {
+            payload: { ...stepFields[0][4], value }
+        })} status={formErrors.salaryRequested ? 'error' : undefined} info={formErrors.salaryRequested ? formErrors.salaryRequested.description : undefined} required/>
+      <Select {...stepFields[0][5]} value={formData.experienceLevel} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'experienceLevel', value: e.target.value }
+                payload: { ...stepFields[0][5], value: e.target.value }
             });
-        }} status={formErrors.experienceLevel ? 'error' : undefined} info={formErrors.experienceLevel ? formErrors.experienceLevel : undefined} required>
+        }} status={formErrors.experienceLevel ? 'error' : undefined} info={formErrors.experienceLevel ? formErrors.experienceLevel.description : undefined} required>
         <Option value=''>--</Option>
         <Option value='junior'>0-3 years (junior)</Option>
         <Option value='mid-level'>4-6 years (mid)</Option>
@@ -28,24 +181,24 @@ export const ApplicantDetailsFields = ({ formData, formErrors, dispatch }) => {
         <Option value='expert'>10+ years (expert)</Option>
       </Select>
       <Grid item={{ colStart: '1', colEnd: '-1' }}>
-        <FieldGroup name='Work priorities'>
+        <FieldGroup name='Work priorities' headingTag='h3'>
           <Grid container={{ gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }}>
-            <Input name='priorityOne' label='First' value={formData.priorityOne} onChange={(e) => {
+            <Input {...stepFields[0][6]} value={formData.priorityOne} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'priorityOne', value: e.target.value }
+                payload: { ...stepFields[0][6], value: e.target.value }
             });
         }}/>
-            <Input name='priorityTwo' label='Second' value={formData.priorityTwo} onChange={(e) => {
+            <Input {...stepFields[0][7]} value={formData.priorityTwo} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'priorityTwo', value: e.target.value }
+                payload: { ...stepFields[0][7], value: e.target.value }
             });
         }}/>
-            <Input name='priorityThree' label='Third' value={formData.priorityThree} onChange={(e) => {
+            <Input {...stepFields[0][8]} value={formData.priorityThree} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'priorityThree', value: e.target.value }
+                payload: { ...stepFields[0][8], value: e.target.value }
             });
         }}/>
           </Grid>
@@ -55,27 +208,27 @@ export const ApplicantDetailsFields = ({ formData, formErrors, dispatch }) => {
 };
 export const InterviewNotesFields = ({ formData, formErrors, dispatch }) => {
     return (<Grid container={{ gap: 1, cols: '1fr' }}>
-      <TextArea name='impressions' label='Impressions' value={formData.interviewNotes} onChange={(e) => {
+      <TextArea {...stepFields[1][0]} value={formData.interviewNotes} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'interviewNotes', value: e.target.value }
+                payload: { ...stepFields[1][0], value: e.target.value }
             });
-        }} status={formErrors.impressions ? 'error' : undefined} info={formErrors.impressions ? formErrors.impressions : undefined}/>
-      <Checkbox name='additionalInterview' label='Request additional interview' defaultChecked={formData.additionalInterview} onChange={(e) => {
+        }} status={formErrors.impressions ? 'error' : undefined} info={formErrors.impressions ? formErrors.impressions.description : undefined}/>
+      <Checkbox {...stepFields[1][1]} defaultChecked={formData.additionalInterview} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'additionalInterview', value: e.target.checked }
+                payload: { ...stepFields[1][1], value: e.target.checked }
             });
         }}/>
     </Grid>);
 };
 export const NextInterviewFields = ({ formData, formErrors, dispatch }) => {
-    return (<Select name='nextInterviewer' label='Next interviewer' value={formData.nextInterviewer} onChange={(e) => {
+    return (<Select {...stepFields[2][0]} value={formData.nextInterviewer} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'nextInterviewer', value: e.target.value }
+                payload: { ...stepFields[2][0], value: e.target.value }
             });
-        }} status={formErrors.nextInterviewer ? 'error' : undefined} info={formErrors.nextInterviewer ? formErrors.nextInterviewer : undefined} required>
+        }} status={formErrors.nextInterviewer ? 'error' : undefined} info={formErrors.nextInterviewer ? formErrors.nextInterviewer.description : undefined} required>
       <Option value=''>Choose an option...</Option>
       <Option>Myself</Option>
       <Option>Cindy Turner </Option>
@@ -85,19 +238,19 @@ export const NextInterviewFields = ({ formData, formErrors, dispatch }) => {
 };
 export const RecommendationsFields = ({ formData, formErrors, dispatch }) => {
     return (<Grid container={{ gap: 1, cols: '1fr' }}>
-      <CurrencyInput name='salaryRequestedReview' label='Salary requested' value={formData.salaryRequested} onChange={() => { }} currencyISOCode='USD' readOnly/>
+      <CurrencyInput {...stepFields[3][0]} value={formData.salaryRequested} onChange={() => { }} currencyISOCode='USD' readOnly/>
 
       <p>$99,000 is the recommended salary for this position.</p>
 
-      <RadioButtonGroup label='Salary request fit' name='salaryRequestReview' onChange={(e) => {
+      <RadioButtonGroup {...stepFields[3][1]} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
                 payload: {
-                    field: 'salaryRequestReview',
+                    ...stepFields[3][1],
                     value: e.target.value
                 }
             });
-        }} status={formErrors.salaryRequestReview ? 'error' : undefined} info={formErrors.salaryRequestReview ? formErrors.salaryRequestReview : undefined} inline required>
+        }} status={formErrors.salaryRequestReview ? 'error' : undefined} info={formErrors.salaryRequestReview ? formErrors.salaryRequestReview.description : undefined} inline required>
         <RadioButton label='Very low' id='salaryTargetVeryLow' value='salaryTargetVeryLow' checked={formData.salaryRequestReview === 'salaryTargetVeryLow'}/>
         <RadioButton label='Low' id='salaryTargetLow' value='salaryTargetLow' checked={formData.salaryRequestReview === 'salaryTargetLow'}/>
         <RadioButton label='On trend' id='salaryTargetOnTrend' value='salaryTargetOnTrend' checked={formData.salaryRequestReview === 'salaryTargetOnTrend'}/>
@@ -105,15 +258,15 @@ export const RecommendationsFields = ({ formData, formErrors, dispatch }) => {
         <RadioButton label='Very high' id='salaryTargetVeryHigh' value='salaryTargetVeryHigh' checked={formData.salaryRequestReview === 'salaryTargetVeryHigh'}/>
       </RadioButtonGroup>
 
-      <RadioButtonGroup label='Culture fit' name='cultureFit' onChange={(e) => {
+      <RadioButtonGroup {...stepFields[3][2]} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
                 payload: {
-                    field: 'cultureFit',
+                    ...stepFields[3][2],
                     value: e.target.value
                 }
             });
-        }} status={formErrors.cultureFit ? 'error' : undefined} info={formErrors.cultureFit ? formErrors.cultureFit : undefined} inline required>
+        }} status={formErrors.cultureFit ? 'error' : undefined} info={formErrors.cultureFit ? formErrors.cultureFit.description : undefined} inline required>
         <RadioButton label='High risk' id='cultureFitHighRisk' value='cultureFitHighRisk' checked={formData.cultureFit === 'cultureFitHighRisk'}/>
         <RadioButton label='Signs of risk' id='cultureFitSomeRisk' value='cultureFitSomeRisk' checked={formData.cultureFit === 'cultureFitSomeRisk'}/>
         <RadioButton label='Indeterminate' id='cultureFitIndeterminate' value='cultureFitIndeterminate' checked={formData.cultureFit === 'cultureFitIndeterminate'}/>
@@ -121,26 +274,128 @@ export const RecommendationsFields = ({ formData, formErrors, dispatch }) => {
         <RadioButton label='Perfect' id='cultureFitPerfect' value='cultureFitPerfect' checked={formData.cultureFit === 'cultureFitPerfect'}/>
       </RadioButtonGroup>
 
-      <RadioButtonGroup label='Final recomendation' name='finalRecommendation' onChange={(e) => {
+      <RadioButtonGroup {...stepFields[3][3]} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
                 payload: {
-                    field: 'finalRecommendation',
+                    ...stepFields[3][3],
                     value: e.target.value
                 }
             });
-        }} status={formErrors.finalRecommendation ? 'error' : undefined} info={formErrors.finalRecommendation ? formErrors.finalRecommendation : undefined} inline required>
+        }} status={formErrors.finalRecommendation ? 'error' : undefined} info={formErrors.finalRecommendation ? formErrors.finalRecommendation.description : undefined} inline required>
         <RadioButton label='Do not recommend' id='doNotRecommend' value='doNotRecommend' checked={formData.finalRecommendation === 'doNotRecommend'}/>
         <RadioButton label='Indeterminate' id='noRecommendation' value='noRecommendation' checked={formData.finalRecommendation === 'noRecommendation'}/>
         <RadioButton label='Recommend' id='recommend' value='recommend' checked={formData.finalRecommendation === 'recommend'}/>
       </RadioButtonGroup>
 
-      <TextArea name='comments' label='Comments' value={formData.recommendationComments} onChange={(e) => {
+      <TextArea {...stepFields[3][4]} value={formData.recommendationComments} onChange={(e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'recommendationComments', value: e.target.value }
+                payload: { ...stepFields[3][4], value: e.target.value }
             });
         }}/>
     </Grid>);
 };
+export const MultiStepModal = (args) => {
+    const { dismiss } = useModalContext();
+    const { push: pushToaster } = useToaster();
+    const [loading, setLoading] = useState(false);
+    const [banners, setBanners] = useState();
+    const bannerHandleRef = useRef(null);
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const submitStep = () => {
+        setLoading(true);
+        setTimeout(() => {
+            dispatch({ type: 'submitCurrentStep' });
+            setLoading(false);
+        }, loadingTimeoutMS);
+    };
+    useEffect(() => {
+        if (banners && bannerHandleRef.current)
+            bannerHandleRef.current.focus();
+    }, [banners]);
+    useEffect(() => {
+        const bannerErrors = Object.keys(state.formErrors)
+            .filter(errorField => {
+            return stepFields[state.currentStepIndex].find(field => field.name === errorField);
+        })
+            .map(errorField => state.formErrors[errorField]);
+        if (bannerErrors.length) {
+            setBanners(<Banner messages={bannerErrors} variant='urgent' handle={bannerHandleRef}/>);
+        }
+        else {
+            setBanners(undefined);
+        }
+    }, [state.currentStepIndex, state.formErrors]);
+    const stepActions = useMemo(() => {
+        return (<>
+        <Button onClick={() => {
+                dispatch({ type: 'cancel' });
+                dismiss();
+            }} disabled={loading}>
+          Cancel
+        </Button>
+        <div>
+          {state.currentStepIndex > 0 && (<Button onClick={() => dispatch({ type: 'setStep', payload: state.currentStepIndex - 1 })} disabled={loading}>
+              Previous
+            </Button>)}
+          {state.currentStepIndex !== state.numSteps - 1 && (<Button variant='primary' onClick={submitStep} disabled={loading}>
+              Next
+            </Button>)}
+          {state.currentStepIndex === state.numSteps - 1 && (<Button type='submit' variant='primary' onClick={(e) => {
+                    e.preventDefault();
+                    submitStep();
+                }} disabled={loading}>
+              Finish
+            </Button>)}
+        </div>
+      </>);
+    }, [state.currentStepIndex, loading]);
+    const stepData = useMemo(() => {
+        const steps = [
+            {
+                id: 'applicant_details',
+                name: 'Applicant details - personal information',
+                description: 'This applicant has passed initial screening and has been cleared to have an interview scheduled. ' +
+                    'Please confirm their details and have a discussion regarding the open position and the company.',
+                banners,
+                content: (<ApplicantDetailsFields formData={state.formData} formErrors={state.formErrors} dispatch={dispatch}/>)
+            },
+            {
+                id: 'interview_notes',
+                name: 'Interview notes',
+                banners,
+                content: (<InterviewNotesFields formData={state.formData} formErrors={state.formErrors} dispatch={dispatch}/>)
+            },
+            {
+                id: 'recommendations',
+                name: 'Final recommendations',
+                description: 'Based on your screening call with the applicant please submit your recomendations.',
+                banners,
+                content: (<RecommendationsFields formData={state.formData} formErrors={state.formErrors} dispatch={dispatch}/>)
+            }
+        ];
+        if (state.numSteps === 4) {
+            steps.splice(2, 0, {
+                id: 'next_interview',
+                name: 'Next interview',
+                description: 'Please select an individual to conduct the next interview.',
+                banners,
+                content: (<NextInterviewFields formData={state.formData} formErrors={state.formErrors} dispatch={dispatch}/>)
+            });
+        }
+        return steps;
+    }, [state.formData, state.formErrors, state.currentStepIndex, banners, loading]);
+    useEffect(() => {
+        if (state.finished) {
+            dismiss();
+            pushToaster({ content: 'Interview successfully submitted!' });
+        }
+    }, [state.finished]);
+    return (<Modal heading={args.heading} progress={loading
+            ? { message: `Submitting ${stepData[state.currentStepIndex].name.toLowerCase()}...` }
+            : undefined} actions={stepActions} onRequestDismiss={() => !loading}>
+      <MultiStepForm steps={stepData} currentStepId={stepData[state.currentStepIndex].id} stepIndicator={args.stepIndicator}/>
+    </Modal>);
+};
 //# sourceMappingURL=MultiStepForm.mocks.jsx.map