{"version":3,"file":"MultiStepForm.stories.jsx","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useReducer, useMemo, useState, useEffect, useRef } from 'react';\nimport type { ReactNode, Reducer, MouseEvent } from 'react';\n\nimport {\n  Button,\n  Banner,\n  Flex,\n  MultiStepForm,\n  Text,\n  useModalManager\n} from '@pega/cosmos-react-core';\nimport type { BannerHandleValue } from '@pega/cosmos-react-core';\nimport type { Step } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nimport {\n  ApplicantDetailsFields,\n  initialState,\n  InterviewNotesFields,\n  MultiStepModal,\n  NextInterviewFields,\n  RecommendationsFields,\n  reducer,\n  stepFields\n} from './MultiStepForm.mocks';\nimport type {\n  DemoMultiStepState,\n  MultiStepFormDemoProps,\n  ReducerAction\n} from './MultiStepForm.mocks';\n\nexport default {\n  title: 'Core/MultiStepForm',\n  component: MultiStepForm,\n  args: {\n    heading: 'HR Screening',\n    stepIndicator: 'horizontal'\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    stepIndicator: { options: ['horizontal', 'vertical', 'none'], control: { type: 'select' } }\n  }\n} as Meta;\n\nexport const MultiStepFormDemo: StoryFn<MultiStepFormDemoProps> = (\n  args: MultiStepFormDemoProps\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    // Need to adjust which set of fields is represented by the 3rd index depending on the conditional step being shown or not.\n    const fieldIndex =\n      state.numSteps === 3 && state.currentStepIndex === 2 ? 3 : state.currentStepIndex;\n\n    const bannerErrors = Object.keys(state.formErrors)\n      .filter(errorField => {\n        return stepFields[fieldIndex].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, state.numSteps]);\n\n  const stepData: Step[] = useMemo(() => {\n    const stepActions: ReactNode = (\n      <>\n        <Button\n          onClick={() => {\n            dispatch({ type: 'cancel' });\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\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        actions: stepActions\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        actions: stepActions\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        actions: stepActions\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        actions: stepActions\n      });\n    }\n\n    return steps;\n  }, [state.formData, state.formErrors, state.currentStepIndex, banners, loading]);\n\n  return (\n    <>\n      {(state.cancelled || state.finished) && (\n        <Flex container={{ gap: 2, alignItems: 'center' }}>\n          <Text variant='h1'>HR screening {state.cancelled ? 'cancelled' : 'finished'}</Text>\n          <Button\n            onClick={() => {\n              dispatch({ type: 'restart' });\n            }}\n          >\n            Restart\n          </Button>\n        </Flex>\n      )}\n\n      {!state.cancelled && !state.finished && (\n        <MultiStepForm\n          heading={args.heading}\n          steps={stepData}\n          currentStepId={stepData[state.currentStepIndex].id}\n          stepIndicator={args.stepIndicator}\n          progress={\n            loading\n              ? `Submitting ${stepData[state.currentStepIndex].name.toLowerCase()}...`\n              : undefined\n          }\n        />\n      )}\n    </>\n  );\n};\n\nexport const MultiStepFormInModalDemo: StoryFn<MultiStepFormDemoProps> = (\n  args: MultiStepFormDemoProps\n) => {\n  const { create } = useModalManager();\n\n  useEffect(() => {\n    create(MultiStepModal, { heading: args.heading, stepIndicator: args.stepIndicator });\n  }, []);\n\n  return (\n    <Button\n      onClick={() => {\n        create(MultiStepModal, { heading: args.heading, stepIndicator: args.stepIndicator });\n      }}\n    >\n      Open Modal\n    </Button>\n  );\n};\n"]}