@pega/cosmos-react-demos 4.0.0-dev.1.0 → 4.0.0-dev.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/jsx/build/ObjectSelect/ObjectSelect.mocks.d.ts.map +1 -1
  2. package/jsx/build/ObjectSelect/ObjectSelect.mocks.jsx +1 -0
  3. package/jsx/build/ObjectSelect/ObjectSelect.mocks.jsx.map +1 -1
  4. package/jsx/condition-builder/ConditionBuilder/props.mock.d.ts.map +1 -1
  5. package/jsx/condition-builder/ConditionBuilder/props.mock.js +1 -0
  6. package/jsx/condition-builder/ConditionBuilder/props.mock.js.map +1 -1
  7. package/jsx/core/MultiStepForm/MultiStepForm.mocks.d.ts +4 -1
  8. package/jsx/core/MultiStepForm/MultiStepForm.mocks.d.ts.map +1 -1
  9. package/jsx/core/MultiStepForm/MultiStepForm.mocks.jsx +25 -3
  10. package/jsx/core/MultiStepForm/MultiStepForm.mocks.jsx.map +1 -1
  11. package/jsx/core/MultiStepForm/MultiStepForm.stories.d.ts.map +1 -1
  12. package/jsx/core/MultiStepForm/MultiStepForm.stories.jsx +49 -29
  13. package/jsx/core/MultiStepForm/MultiStepForm.stories.jsx.map +1 -1
  14. package/lib/build/ObjectSelect/ObjectSelect.mocks.d.ts.map +1 -1
  15. package/lib/build/ObjectSelect/ObjectSelect.mocks.js +1 -0
  16. package/lib/build/ObjectSelect/ObjectSelect.mocks.js.map +1 -1
  17. package/lib/condition-builder/ConditionBuilder/props.mock.d.ts.map +1 -1
  18. package/lib/condition-builder/ConditionBuilder/props.mock.js +1 -0
  19. package/lib/condition-builder/ConditionBuilder/props.mock.js.map +1 -1
  20. package/lib/core/MultiStepForm/MultiStepForm.mocks.d.ts +4 -1
  21. package/lib/core/MultiStepForm/MultiStepForm.mocks.d.ts.map +1 -1
  22. package/lib/core/MultiStepForm/MultiStepForm.mocks.js +17 -4
  23. package/lib/core/MultiStepForm/MultiStepForm.mocks.js.map +1 -1
  24. package/lib/core/MultiStepForm/MultiStepForm.stories.d.ts.map +1 -1
  25. package/lib/core/MultiStepForm/MultiStepForm.stories.js +47 -27
  26. package/lib/core/MultiStepForm/MultiStepForm.stories.js.map +1 -1
  27. package/package.json +9 -9
package/lib/core/MultiStepForm/MultiStepForm.stories.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useReducer, useMemo } from 'react';
3
3
  import { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-core';
4
- import { ApplicantDetailsFields, InterviewNotesFields, RecommendationsFields } from './MultiStepForm.mocks';
4
+ import { ApplicantDetailsFields, InterviewNotesFields, RecommendationsFields, NextInterviewFields } from './MultiStepForm.mocks';
5
5
  export default {
6
6
  title: 'Core/MultiStepForm',
7
7
  component: MultiStepForm
8
8
  };
9
9
  export const MultiStepFormDemo = () => {
10
10
  const initialState = useMemo(() => ({
11
- currentStep: 1,
11
+ currentStepIndex: 0,
12
12
  cancelled: false,
13
13
  finished: false,
14
14
  numSteps: 3,
@@ -29,6 +29,10 @@ export const MultiStepFormDemo = () => {
29
29
  message: 'This field is required.',
30
30
  validator: (value) => value?.length > 0
31
31
  },
32
+ nextInterviewer: {
33
+ message: 'This field is required.',
34
+ validator: (value) => value?.length > 0
35
+ },
32
36
  salaryRequestReview: {
33
37
  message: 'This field is required.',
34
38
  validator: (value) => value?.length > 0
@@ -43,8 +47,8 @@ export const MultiStepFormDemo = () => {
43
47
  }
44
48
  }), []);
45
49
  const stepFields = useMemo(() => {
46
- return {
47
- '1': [
50
+ return [
51
+ [
48
52
  'firstName',
49
53
  'lastName',
50
54
  'currentTitle',
@@ -55,9 +59,10 @@ export const MultiStepFormDemo = () => {
55
59
  'priorityTwo',
56
60
  'priorityThree'
57
61
  ],
58
- '2': ['interviewNotes'],
59
- '3': ['salaryRequestReview', 'cultureFit', 'finalRecommendation', 'recommendationComments']
60
- };
62
+ ['interviewNotes', 'additionalInterview'],
63
+ ['nextInterviewer'],
64
+ ['salaryRequestReview', 'cultureFit', 'finalRecommendation', 'recommendationComments']
65
+ ];
61
66
  }, []);
62
67
  const reducer = (state, action) => {
63
68
  const type = action.type;
@@ -81,7 +86,8 @@ export const MultiStepFormDemo = () => {
81
86
  case 'setStep': {
82
87
  return {
83
88
  ...state,
84
- currentStep: payload
89
+ currentStepIndex: payload,
90
+ formErrors: {}
85
91
  };
86
92
  }
87
93
  case 'setFieldValue': {
@@ -109,7 +115,9 @@ export const MultiStepFormDemo = () => {
109
115
  };
110
116
  }
111
117
  case 'submitCurrentStep': {
112
- const step = state.currentStep;
118
+ const stepIndex = state.numSteps === 4 || state.currentStepIndex <= 1
119
+ ? state.currentStepIndex
120
+ : state.currentStepIndex + 1;
113
121
  const formErrors = { ...state.formErrors };
114
122
  let isValid = true;
115
123
  const validateFields = (fields) => {
@@ -128,13 +136,14 @@ export const MultiStepFormDemo = () => {
128
136
  }
129
137
  });
130
138
  };
131
- validateFields(stepFields[step]);
139
+ validateFields(stepFields[stepIndex]);
132
140
  return {
133
141
  ...state,
134
- currentStep: isValid && state.currentStep !== state.numSteps
135
- ? state.currentStep + 1
136
- : state.currentStep,
137
- finished: isValid && state.currentStep === state.numSteps,
142
+ numSteps: state.formData.additionalInterview ? 4 : 3,
143
+ currentStepIndex: isValid && state.currentStepIndex !== state.numSteps - 1
144
+ ? state.currentStepIndex + 1
145
+ : state.currentStepIndex,
146
+ finished: isValid && state.currentStepIndex === state.numSteps - 1,
138
147
  formErrors
139
148
  };
140
149
  }
@@ -144,44 +153,55 @@ export const MultiStepFormDemo = () => {
144
153
  };
145
154
  const [state, dispatch] = useReducer(reducer, initialState);
146
155
  const stepData = useMemo(() => {
147
- const stepActions = (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => dispatch({ type: 'cancel' }), children: "Cancel" }), _jsxs("div", { children: [state.currentStep > 1 && (_jsx(Button, { onClick: () => dispatch({ type: 'setStep', payload: state.currentStep - 1 }), children: "Previous" })), state.currentStep !== state.numSteps && (_jsx(Button, { variant: 'primary', onClick: () => dispatch({ type: 'submitCurrentStep' }), children: "Next" })), state.currentStep === state.numSteps && (_jsx(Button, { type: 'submit', variant: 'primary', onClick: (e) => {
156
+ const stepActions = (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => dispatch({ type: 'cancel' }), children: "Cancel" }), _jsxs("div", { children: [state.currentStepIndex > 0 && (_jsx(Button, { onClick: () => dispatch({ type: 'setStep', payload: state.currentStepIndex - 1 }), children: "Previous" })), state.currentStepIndex !== state.numSteps - 1 && (_jsx(Button, { variant: 'primary', onClick: () => dispatch({ type: 'submitCurrentStep' }), children: "Next" })), state.currentStepIndex === state.numSteps - 1 && (_jsx(Button, { type: 'submit', variant: 'primary', onClick: (e) => {
148
157
  e.preventDefault();
149
158
  dispatch({ type: 'submitCurrentStep' });
150
159
  }, children: "Finish" }))] })] }));
151
- const step1Errors = Object.keys(state.formErrors).filter(errorField => {
152
- return stepFields[1].includes(errorField);
160
+ const applicantErrors = Object.keys(state.formErrors).filter(errorField => {
161
+ return stepFields[0].includes(errorField);
153
162
  });
154
- const step3Errors = Object.keys(state.formErrors).filter(errorField => {
163
+ const recommendationErrors = Object.keys(state.formErrors).filter(errorField => {
155
164
  return stepFields[3].includes(errorField);
156
165
  });
157
- return [
166
+ const steps = [
158
167
  {
159
- id: 'step_1',
168
+ id: 'applicant_details',
160
169
  name: 'Applicant details',
161
170
  description: 'This applicant has passed initial screening and has been cleared to have an interview scheduled. ' +
162
171
  'Please confirm their details and have a discussion regarding the open position and the company.',
163
- banners: step1Errors?.length ? (_jsx(Banner, { id: 'formBanner', heading: 'Your submission failed to process.', messages: ['Please correct all errors and try again.'], variant: 'urgent' })) : undefined,
172
+ banners: applicantErrors?.length ? (_jsx(Banner, { id: 'formBanner', heading: 'Your submission failed to process.', messages: ['Please correct all errors and try again.'], variant: 'urgent' })) : undefined,
164
173
  content: (_jsx(ApplicantDetailsFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch })),
165
174
  actions: stepActions
166
175
  },
167
176
  {
168
- id: 'step_2',
177
+ id: 'interview_notes',
169
178
  name: 'Interview notes',
170
179
  content: (_jsx(InterviewNotesFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch })),
171
180
  actions: stepActions
172
181
  },
173
182
  {
174
- id: 'step_3',
175
- name: 'Recommendations',
183
+ id: 'recommendations',
184
+ name: 'Final recommendations',
176
185
  description: 'Based on your screening call with the applicant please submit your recomendations.',
177
- banners: step3Errors?.length ? (_jsx(Banner, { id: 'formBanner', heading: 'Your submission failed to process.', messages: ['Please correct all errors and try again.'], variant: 'urgent' })) : undefined,
186
+ banners: recommendationErrors?.length ? (_jsx(Banner, { id: 'formBanner', heading: 'Your submission failed to process.', messages: ['Please correct all errors and try again.'], variant: 'urgent' })) : undefined,
178
187
  content: (_jsx(RecommendationsFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch })),
179
188
  actions: stepActions
180
189
  }
181
190
  ];
182
- }, [state.formData, state.formErrors, state.currentStep]);
191
+ if (state.numSteps === 4) {
192
+ steps.splice(2, 0, {
193
+ id: 'next_interview',
194
+ name: 'Next interview',
195
+ description: 'Please select an individual to conduct the next interview.',
196
+ banners: undefined,
197
+ content: (_jsx(NextInterviewFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch })),
198
+ actions: stepActions
199
+ });
200
+ }
201
+ return steps;
202
+ }, [state.formData, state.formErrors, state.currentStepIndex]);
183
203
  return (_jsxs(_Fragment, { children: [(state.cancelled || state.finished) && (_jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Text, { variant: 'h1', children: ["HR screening ", state.cancelled ? 'cancelled' : 'finished'] }), _jsx(Button, { onClick: () => {
184
204
  dispatch({ type: 'restart' });
185
- }, children: "Restart" })] })), !state.cancelled && !state.finished && (_jsx(MultiStepForm, { heading: 'HR Screening', steps: stepData, currentStepId: `step_${state.currentStep}` }))] }));
205
+ }, children: "Restart" })] })), !state.cancelled && !state.finished && (_jsx(MultiStepForm, { heading: 'HR Screening', steps: stepData, currentStepId: stepData[state.currentStepIndex].id }))] }));
186
206
  };
187
207
  //# sourceMappingURL=MultiStepForm.stories.js.map
package/lib/core/MultiStepForm/MultiStepForm.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiStepForm.stories.js","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { type ReactNode, type Reducer, type MouseEvent, useReducer, useMemo } from 'react';\n\nimport { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-core';\nimport { Step } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';\n\nimport {\n type DemoFormDataType,\n type DemoFormErrorsType,\n ApplicantDetailsFields,\n InterviewNotesFields,\n RecommendationsFields\n} from './MultiStepForm.mocks';\n\nexport default {\n title: 'Core/MultiStepForm',\n component: MultiStepForm\n} as Meta;\n\ninterface DemoMultiStepState {\n formData: DemoFormDataType;\n formErrors: DemoFormErrorsType;\n currentStep: number;\n numSteps: number;\n cancelled: boolean;\n finished: boolean;\n}\n\ninterface ReducerAction {\n type: string;\n payload?: any;\n}\n\ninterface FormValidations {\n [field: string]: {\n message?: string;\n validator: (value: any) => boolean;\n };\n}\n\nexport const MultiStepFormDemo: Story = () => {\n const initialState = useMemo<DemoMultiStepState>(\n () => ({\n currentStep: 1,\n cancelled: false,\n finished: false,\n numSteps: 3,\n formData: {\n firstName: 'Marcus',\n lastName: 'Kennedy',\n currentTitle: 'Data Analyst',\n currentCompany: 'Hello Fresh'\n },\n formErrors: {}\n }),\n []\n );\n\n const formValidation = useMemo<FormValidations>(\n () => ({\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 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 []\n );\n\n const stepFields = useMemo<{ [step: string]: string[] }>(() => {\n return {\n '1': [\n 'firstName',\n 'lastName',\n 'currentTitle',\n 'currentCompany',\n 'salaryRequested',\n 'experienceLevel',\n 'priorityOne',\n 'priorityTwo',\n 'priorityThree'\n ],\n '2': ['interviewNotes'],\n '3': ['salaryRequestReview', 'cultureFit', 'finalRecommendation', 'recommendationComments']\n };\n }, []);\n\n 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 currentStep: payload\n };\n }\n case 'setFieldValue': {\n const { field, 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] = formValidation[field].message;\n }\n }\n\n return {\n ...state,\n formData,\n formErrors\n };\n }\n case 'submitCurrentStep': {\n const step = state.currentStep;\n const formErrors = { ...state.formErrors };\n let isValid = true;\n\n const validateFields = (fields: string[]) => {\n if (!fields) return;\n\n fields.forEach(field => {\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] = formValidation[field].message;\n }\n }\n });\n };\n\n validateFields(stepFields[step]);\n\n return {\n ...state,\n currentStep:\n isValid && state.currentStep !== state.numSteps\n ? state.currentStep + 1\n : state.currentStep,\n finished: isValid && state.currentStep === state.numSteps,\n formErrors\n };\n }\n default:\n return state;\n }\n };\n\n const [state, dispatch] = useReducer<Reducer<DemoMultiStepState, ReducerAction>>(\n reducer,\n initialState\n );\n\n const stepData: Step[] = useMemo(() => {\n const stepActions: ReactNode = (\n <>\n <Button onClick={() => dispatch({ type: 'cancel' })}>Cancel</Button>\n <div>\n {state.currentStep > 1 && (\n <Button onClick={() => dispatch({ type: 'setStep', payload: state.currentStep - 1 })}>\n Previous\n </Button>\n )}\n {state.currentStep !== state.numSteps && (\n <Button variant='primary' onClick={() => dispatch({ type: 'submitCurrentStep' })}>\n Next\n </Button>\n )}\n {state.currentStep === state.numSteps && (\n <Button\n type='submit'\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n dispatch({ type: 'submitCurrentStep' });\n }}\n >\n Finish\n </Button>\n )}\n </div>\n </>\n );\n\n const step1Errors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[1].includes(errorField);\n });\n const step3Errors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[3].includes(errorField);\n });\n\n return [\n {\n id: 'step_1',\n name: 'Applicant details',\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: step1Errors?.length ? (\n <Banner\n id='formBanner'\n heading='Your submission failed to process.'\n messages={['Please correct all errors and try again.']}\n variant='urgent'\n />\n ) : undefined,\n content: (\n <ApplicantDetailsFields\n formData={state.formData}\n formErrors={state.formErrors}\n dispatch={dispatch}\n />\n ),\n actions: stepActions\n },\n {\n id: 'step_2',\n name: 'Interview notes',\n content: (\n <InterviewNotesFields\n formData={state.formData}\n formErrors={state.formErrors}\n dispatch={dispatch}\n />\n ),\n actions: stepActions\n },\n {\n id: 'step_3',\n name: 'Recommendations',\n description:\n 'Based on your screening call with the applicant please submit your recomendations.',\n banners: step3Errors?.length ? (\n <Banner\n id='formBanner'\n heading='Your submission failed to process.'\n messages={['Please correct all errors and try again.']}\n variant='urgent'\n />\n ) : undefined,\n content: (\n <RecommendationsFields\n formData={state.formData}\n formErrors={state.formErrors}\n dispatch={dispatch}\n />\n ),\n actions: stepActions\n }\n ];\n }, [state.formData, state.formErrors, state.currentStep]);\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='HR Screening'\n steps={stepData}\n currentStepId={`step_${state.currentStep}`}\n />\n )}\n </>\n );\n};\n"]}
1
+ {"version":3,"file":"MultiStepForm.stories.js","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { type ReactNode, type Reducer, type MouseEvent, useReducer, useMemo } from 'react';\n\nimport { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-core';\nimport { Step } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';\n\nimport {\n type DemoFormDataType,\n type DemoFormErrorsType,\n ApplicantDetailsFields,\n InterviewNotesFields,\n RecommendationsFields,\n NextInterviewFields\n} from './MultiStepForm.mocks';\n\nexport default {\n title: 'Core/MultiStepForm',\n component: MultiStepForm\n} as Meta;\n\ninterface DemoMultiStepState {\n formData: DemoFormDataType;\n formErrors: DemoFormErrorsType;\n currentStepIndex: number;\n numSteps: number;\n cancelled: boolean;\n finished: boolean;\n}\n\ninterface ReducerAction {\n type: string;\n payload?: any;\n}\n\ninterface FormValidations {\n [field: string]: {\n message?: string;\n validator: (value: any) => boolean;\n };\n}\n\nexport const MultiStepFormDemo: Story = () => {\n const initialState = useMemo<DemoMultiStepState>(\n () => ({\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: 'Hello Fresh'\n },\n formErrors: {}\n }),\n []\n );\n\n const formValidation = useMemo<FormValidations>(\n () => ({\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 []\n );\n\n const stepFields = useMemo<string[][]>(() => {\n return [\n [\n 'firstName',\n 'lastName',\n 'currentTitle',\n 'currentCompany',\n 'salaryRequested',\n 'experienceLevel',\n 'priorityOne',\n 'priorityTwo',\n 'priorityThree'\n ],\n ['interviewNotes', 'additionalInterview'],\n ['nextInterviewer'],\n ['salaryRequestReview', 'cultureFit', 'finalRecommendation', 'recommendationComments']\n ];\n }, []);\n\n 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 { field, 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] = 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: string[]) => {\n if (!fields) return;\n\n fields.forEach(field => {\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] = 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\n const [state, dispatch] = useReducer<Reducer<DemoMultiStepState, ReducerAction>>(\n reducer,\n initialState\n );\n\n const stepData: Step[] = useMemo(() => {\n const stepActions: ReactNode = (\n <>\n <Button onClick={() => dispatch({ type: 'cancel' })}>Cancel</Button>\n <div>\n {state.currentStepIndex > 0 && (\n <Button\n onClick={() => dispatch({ type: 'setStep', payload: state.currentStepIndex - 1 })}\n >\n Previous\n </Button>\n )}\n {state.currentStepIndex !== state.numSteps - 1 && (\n <Button variant='primary' onClick={() => dispatch({ type: 'submitCurrentStep' })}>\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 dispatch({ type: 'submitCurrentStep' });\n }}\n >\n Finish\n </Button>\n )}\n </div>\n </>\n );\n\n const applicantErrors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[0].includes(errorField);\n });\n const recommendationErrors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[3].includes(errorField);\n });\n\n const steps = [\n {\n id: 'applicant_details',\n name: 'Applicant details',\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: applicantErrors?.length ? (\n <Banner\n id='formBanner'\n heading='Your submission failed to process.'\n messages={['Please correct all errors and try again.']}\n variant='urgent'\n />\n ) : undefined,\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 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: recommendationErrors?.length ? (\n <Banner\n id='formBanner'\n heading='Your submission failed to process.'\n messages={['Please correct all errors and try again.']}\n variant='urgent'\n />\n ) : undefined,\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: undefined,\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]);\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='HR Screening'\n steps={stepData}\n currentStepId={stepData[state.currentStepIndex].id}\n />\n )}\n </>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-demos",
3
- "version": "4.0.0-dev.1.0",
3
+ "version": "4.0.0-dev.1.2",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,14 +20,14 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-build": "4.0.0-dev.1.0",
24
- "@pega/cosmos-react-condition-builder": "4.0.0-dev.1.0",
25
- "@pega/cosmos-react-core": "4.0.0-dev.1.0",
26
- "@pega/cosmos-react-cs": "4.0.0-dev.1.0",
27
- "@pega/cosmos-react-dnd": "4.0.0-dev.1.0",
28
- "@pega/cosmos-react-rte": "4.0.0-dev.1.0",
29
- "@pega/cosmos-react-social": "4.0.0-dev.1.0",
30
- "@pega/cosmos-react-work": "4.0.0-dev.1.0",
23
+ "@pega/cosmos-react-build": "4.0.0-dev.1.2",
24
+ "@pega/cosmos-react-condition-builder": "4.0.0-dev.1.2",
25
+ "@pega/cosmos-react-core": "4.0.0-dev.1.2",
26
+ "@pega/cosmos-react-cs": "4.0.0-dev.1.2",
27
+ "@pega/cosmos-react-dnd": "4.0.0-dev.1.2",
28
+ "@pega/cosmos-react-rte": "4.0.0-dev.1.2",
29
+ "@pega/cosmos-react-social": "4.0.0-dev.1.2",
30
+ "@pega/cosmos-react-work": "4.0.0-dev.1.2",
31
31
  "@types/emoji-mart": "^3.0.4",
32
32
  "@types/react": "^16.14.24 || ^17.0.38",
33
33
  "@types/react-dom": "^16.9.14 || ^17.0.11",