@pega/cosmos-react-demos 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1,401 @@
+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 {...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: { ...stepFields[0][2], value: e.target.value }
+        })}/>
+      <Input {...stepFields[0][3]} value={formData.currentCompany} onChange={(e) => dispatch({
+            type: 'setFieldValue',
+            payload: { ...stepFields[0][3], value: e.target.value }
+        })}/>
+      <CurrencyInput {...stepFields[0][4]} value={formData.salaryRequested} currencyISOCode='USD' onChange={value => dispatch({
+            type: 'setFieldValue',
+            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: { ...stepFields[0][5], value: e.target.value }
+            });
+        }} 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>
+        <Option value='senior'>7-10 years (senior)</Option>
+        <Option value='expert'>10+ years (expert)</Option>
+      </Select>
+      <Grid item={{ colStart: '1', colEnd: '-1' }}>
+        <FieldGroup name='Work priorities' headingTag='h3'>
+          <Grid container={{ gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }}>
+            <Input {...stepFields[0][6]} value={formData.priorityOne} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: { ...stepFields[0][6], value: e.target.value }
+            });
+        }}/>
+            <Input {...stepFields[0][7]} value={formData.priorityTwo} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: { ...stepFields[0][7], value: e.target.value }
+            });
+        }}/>
+            <Input {...stepFields[0][8]} value={formData.priorityThree} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: { ...stepFields[0][8], value: e.target.value }
+            });
+        }}/>
+          </Grid>
+        </FieldGroup>
+      </Grid>
+    </Grid>);
+};
+export const InterviewNotesFields = ({ formData, formErrors, dispatch }) => {
+    return (<Grid container={{ gap: 1, cols: '1fr' }}>
+      <TextArea {...stepFields[1][0]} value={formData.interviewNotes} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: { ...stepFields[1][0], value: e.target.value }
+            });
+        }} 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: { ...stepFields[1][1], value: e.target.checked }
+            });
+        }}/>
+    </Grid>);
+};
+export const NextInterviewFields = ({ formData, formErrors, dispatch }) => {
+    return (<Select {...stepFields[2][0]} value={formData.nextInterviewer} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: { ...stepFields[2][0], value: e.target.value }
+            });
+        }} 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>
+      <Option>Seth DeAngelo</Option>
+      <Option>Janet Moore</Option>
+    </Select>);
+};
+export const RecommendationsFields = ({ formData, formErrors, dispatch }) => {
+    return (<Grid container={{ gap: 1, cols: '1fr' }}>
+      <CurrencyInput {...stepFields[3][0]} value={formData.salaryRequested} onChange={() => { }} currencyISOCode='USD' readOnly/>
+
+      <p>$99,000 is the recommended salary for this position.</p>
+
+      <RadioButtonGroup {...stepFields[3][1]} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: {
+                    ...stepFields[3][1],
+                    value: e.target.value
+                }
+            });
+        }} 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'}/>
+        <RadioButton label='High' id='salaryTargetHigh' value='salaryTargetHigh' checked={formData.salaryRequestReview === 'salaryTargetHigh'}/>
+        <RadioButton label='Very high' id='salaryTargetVeryHigh' value='salaryTargetVeryHigh' checked={formData.salaryRequestReview === 'salaryTargetVeryHigh'}/>
+      </RadioButtonGroup>
+
+      <RadioButtonGroup {...stepFields[3][2]} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: {
+                    ...stepFields[3][2],
+                    value: e.target.value
+                }
+            });
+        }} 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'}/>
+        <RadioButton label='Good' id='cultureFitGood' value='cultureFitGood' checked={formData.cultureFit === 'cultureFitGood'}/>
+        <RadioButton label='Perfect' id='cultureFitPerfect' value='cultureFitPerfect' checked={formData.cultureFit === 'cultureFitPerfect'}/>
+      </RadioButtonGroup>
+
+      <RadioButtonGroup {...stepFields[3][3]} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: {
+                    ...stepFields[3][3],
+                    value: e.target.value
+                }
+            });
+        }} 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 {...stepFields[3][4]} value={formData.recommendationComments} onChange={(e) => {
+            dispatch({
+                type: 'setFieldValue',
+                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

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

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

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

@@ -0,0 +1,7 @@
+import { StoryFn } from '@storybook/react';
+import type { MultiStepFormDemoProps } from './MultiStepForm.mocks';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const MultiStepFormDemo: StoryFn<MultiStepFormDemoProps>;
+export declare const MultiStepFormInModalDemo: StoryFn<MultiStepFormDemoProps>;
+//# sourceMappingURL=MultiStepForm.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStepForm.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AA2BjD,OAAO,KAAK,EAEV,sBAAsB,EAEvB,MAAM,uBAAuB,CAAC;;AAE/B,wBAWU;AAEV,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,CAqL7D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,sBAAsB,CAkBpE,CAAC"}

package/jsx/core/MultiStepForm/MultiStepForm.stories.jsx

@@ -0,0 +1,133 @@
+import { useReducer, useMemo, useState, useEffect, useRef } from 'react';
+import { Button, Banner, Flex, MultiStepForm, Text, useModalManager } from '@pega/cosmos-react-core';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
+import { ApplicantDetailsFields, initialState, InterviewNotesFields, MultiStepModal, NextInterviewFields, RecommendationsFields, reducer, stepFields } from './MultiStepForm.mocks';
+export default {
+    title: 'Core/MultiStepForm',
+    component: MultiStepForm,
+    args: {
+        heading: 'HR Screening',
+        stepIndicator: 'horizontal'
+    },
+    argTypes: {
+        heading: { control: { type: 'text' } },
+        stepIndicator: { options: ['horizontal', 'vertical', 'none'], control: { type: 'select' } }
+    }
+};
+export const MultiStepFormDemo = (args) => {
+    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 fieldIndex = state.numSteps === 3 && state.currentStepIndex === 2 ? 3 : state.currentStepIndex;
+        const bannerErrors = Object.keys(state.formErrors)
+            .filter(errorField => {
+            return stepFields[fieldIndex].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, state.numSteps]);
+    const stepData = useMemo(() => {
+        const stepActions = (<>
+        <Button onClick={() => {
+                dispatch({ type: 'cancel' });
+            }} 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>
+      </>);
+        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}/>),
+                actions: stepActions
+            },
+            {
+                id: 'interview_notes',
+                name: 'Interview notes',
+                banners,
+                content: (<InterviewNotesFields formData={state.formData} formErrors={state.formErrors} dispatch={dispatch}/>),
+                actions: stepActions
+            },
+            {
+                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}/>),
+                actions: stepActions
+            }
+        ];
+        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}/>),
+                actions: stepActions
+            });
+        }
+        return steps;
+    }, [state.formData, state.formErrors, state.currentStepIndex, banners, loading]);
+    return (<>
+      {(state.cancelled || state.finished) && (<Flex container={{ gap: 2, alignItems: 'center' }}>
+          <Text variant='h1'>HR screening {state.cancelled ? 'cancelled' : 'finished'}</Text>
+          <Button onClick={() => {
+                dispatch({ type: 'restart' });
+            }}>
+            Restart
+          </Button>
+        </Flex>)}
+
+      {!state.cancelled && !state.finished && (<MultiStepForm heading={args.heading} steps={stepData} currentStepId={stepData[state.currentStepIndex].id} stepIndicator={args.stepIndicator} progress={loading
+                ? `Submitting ${stepData[state.currentStepIndex].name.toLowerCase()}...`
+                : undefined}/>)}
+    </>);
+};
+export const MultiStepFormInModalDemo = (args) => {
+    const { create } = useModalManager();
+    useEffect(() => {
+        create(MultiStepModal, args);
+    }, []);
+    return (<Button onClick={() => {
+            create(MultiStepModal, args);
+        }}>
+      Open Modal
+    </Button>);
+};
+//# sourceMappingURL=MultiStepForm.stories.jsx.map