Skip to content

Commit

Permalink
Stepper builder is now a pusher of states, instead of lister of steps
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrey Aleshintsev committed Jun 27, 2024
1 parent 06623ff commit 4f81667
Show file tree
Hide file tree
Showing 13 changed files with 447 additions and 153 deletions.
3 changes: 3 additions & 0 deletions embedded-components/.yarnrc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,6 @@ nodeLinker: node-modules
npmRegistryServer: https://registry.yarnpkg.com

yarnPath: .yarn/releases/yarn-4.1.1.cjs

httpProxy: "http://proxy.jpmchase.net:8443"
httpsProxy: "http://proxy.jpmchase.net:8443"
8 changes: 5 additions & 3 deletions embedded-components/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@jpmorgan-payments/embedded-banking-components",
"version": "0.3.28",
"name": "@t3mpo/embedded-banking-components",
"version": "0.3.31",
"license": "Apache-2.0",
"type": "module",
"description": "EB components",
Expand Down Expand Up @@ -55,6 +55,7 @@
"deepmerge": "^4.3.1",
"json-diff-ts": "^4.0.1",
"libphonenumber-js": "^1.10.61",
"lodash": "^4.17.21",
"lucide-react": "^0.294.0",
"msw": "^2.3.0",
"public-ip": "^6.0.2",
Expand Down Expand Up @@ -84,6 +85,7 @@
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@types/lodash": "^4",
"@types/react": "^18.2.36",
"@types/react-dom": "^18.2.14",
"@typescript-eslint/eslint-plugin": "^6.9.1",
Expand Down Expand Up @@ -132,7 +134,7 @@
"packageManager": "yarn@4.1.1",
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
"registry": "https://artifacts-publish.gkp.jpmchase.net/artifactory/api/npm/npm-sandbox"
},
"repository": {
"type": "git",
Expand Down
2 changes: 1 addition & 1 deletion embedded-components/src/core/OnboardingWizard/OnboardingWizardSchema.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export const OnboardingWithClientIDWithAttestation: Story = {
isMockResponse: true,
title: 'Welcome back',
jurisdictions: ['US', 'Canada'],
clientId: '3000000316',
clientId: '3000000350',
products: [],
onRegistration: ({ clientId }: onRegistrationProp) => {
console.log('@@clientId', clientId);
Expand Down
2 changes: 1 addition & 1 deletion embedded-components/src/core/OnboardingWizard/OnboardingWizardSchema.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export const OnboardingWizardSchema = ({ title, schema, ...props }: any) => {
<CardTitle>{title || 'Onboarding Wizards'}</CardTitle>
</CardHeader>

{stepsList?.length && (
{!!stepsList?.length && (
<StepperHeader
activeStep={activeStep}
setCurrentStep={setCurrentStep}
Expand Down
31 changes: 24 additions & 7 deletions embedded-components/src/core/OnboardingWizard/Stepper/Stepper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
useMemo,
useState,
} from 'react';
import uniq from 'lodash/uniq';

import {
IndDetails,
Expand All @@ -15,11 +16,12 @@ import {
QuestionsStep,
ReviewStep,
} from '../Steps_';
import { VerificationStep } from '../Steps_/VerificationStep';

type yInitValues = {
activeStep: number;
setCurrentStep: (val: number) => void;
stepsList: string[] | undefined;
stepsList: string[];
stepsListSchema: any[];
currentFormSchema: any;
CurrentStep: any;
Expand All @@ -30,7 +32,7 @@ type yInitValues = {
const initValues: yInitValues = {
activeStep: 0,
setCurrentStep: () => {},
stepsList: undefined,
stepsList: [],
stepsListSchema: [],
CurrentStep: null,
currentFormSchema: null,
Expand All @@ -50,6 +52,7 @@ const stepsWizard: any = {
Individual: IndDetails,
Questions: QuestionsStep,
Review: ReviewStep,
Verification: VerificationStep,
};
const StepperProvider: FC<yStepper> = ({ children }) => {
const [steps, setStepState] = useState(initValues);
Expand All @@ -72,14 +75,23 @@ const StepperProvider: FC<yStepper> = ({ children }) => {
};

const buildStepper = (
stepNames: string[] = ['Init', 'Individual', 'Questions', 'Review']
stepNames: string[] = [
'Init',
'Individual',
'Questions',
'Review',
'Verification',
]
): any => {
console.log('@@LIST::', stepNames);

const stepsListSchemaTemp: any = () => {
return stepNames.map((name: string) => {
return stepsWizard[name];
});
return [
...stepsList,
...stepNames.map((name: string) => {
return stepsWizard[name];
}),
].filter((item) => item);
};

const currentSchemaTemp = stepsListSchemaTemp()[activeStep]?.formSchema;
Expand All @@ -95,9 +107,14 @@ const StepperProvider: FC<yStepper> = ({ children }) => {
);

setStepState((state) => {
console.log(
'@@LIST>$',
uniq([...state.stepsList, ...stepsListSchemaTemp()])
);

return {
...state,
stepsList: stepsListSchemaTemp(),
stepsList: uniq([...state.stepsList, ...stepsListSchemaTemp()]),
currentFormSchema: currentSchemaTemp,
CurrentStep: CurrentStepTemp,
};
Expand Down
2 changes: 1 addition & 1 deletion embedded-components/src/core/OnboardingWizard/Stepper/StepperHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const icons = [
),
},
{
title: 'Attestitation',
title: 'Verification',
icon: <Checklist key="checklistIcon" size={20} color="black"></Checklist>,
},
];
Expand Down
6 changes: 5 additions & 1 deletion embedded-components/src/core/OnboardingWizard/Steps_/IndDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,11 @@ const IndDetails = ({ formSchema, yupSchema }: any) => {

useEffect(() => {
if (!countryFormFields?.optionsList) {
countryFormFields.optionsList = ['US', 'Canada', 'UK'];
countryFormFields.optionsList = [
{ value: 'US', label: 'US' },
{ value: 'Canada', label: 'Canada' },
{ value: 'UK', label: 'UK' },
];
setUpdate(blank + 1);
}
}, [countryFormFields]);
Expand Down
80 changes: 41 additions & 39 deletions embedded-components/src/core/OnboardingWizard/Steps_/ReviewStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,14 @@ import { fromApiToForm } from '../utils/fromApitoForm';
import { useContentData } from '../utils/useContentData';
import { reviewSchema } from './StepsSchema';

const ReviewStep = ({ setActiveStep }: any) => {
const ReviewStep = () => {
const { setOnboardingForm, onboardingForm } = useOnboardingForm();
const form = useFormContext();
const {
setCurrentStep,
setStepState,
buildStepper,
CurrentStep,
currentSchema,
activeStep,
} = useStepper();
const { getContentToken } = useContentData('steps.ReviewStep');
Expand All @@ -57,6 +56,7 @@ const ReviewStep = ({ setActiveStep }: any) => {
const [editIndividual, onEditIndividual] = useState(false);
const [indData, setModalData] = useState(null);
const [open, setOpen] = useState(false);

// const { getContentToken: getValueMap }: any =
// useContentData('steps.valuesMap');

Expand Down Expand Up @@ -111,6 +111,9 @@ const ReviewStep = ({ setActiveStep }: any) => {
if (data?.outstanding?.questionIds?.length) {
buildStepper(['Review', 'Questions']);
}
if (data?.outstanding?.attestationDocumentIds?.length) {
buildStepper(['Verification']);
}
}, [data]);

// TODO: personal information requires the controllerKEY name
Expand All @@ -136,56 +139,54 @@ const ReviewStep = ({ setActiveStep }: any) => {

try {
// TODO: RAW, will need to Update this
const res = await postClient({
data: {
parties: [
{
partyType: 'ORGANIZATION',
email: businessEmail,
roles: ['CLIENT'],
organizationDetails: {
organizationName,
// TODO: update organization Type
organizationType: 'LIMITED_LIABILITY_COMPANY',
countryOfFormation,
},
},
{
partyType: 'INDIVIDUAL',
email: businessEmail,
roles: ['CONTROLLER'],
individualDetails: {
firstName,
lastName,
countryOfResidence,
},
},
],
products: ['EMBEDDED_PAYMENTS'],
},
});
// const res = await postClient({
// data: {
// parties: [
// {
// partyType: 'ORGANIZATION',
// email: businessEmail,
// roles: ['CLIENT'],
// organizationDetails: {
// organizationName,
// // TODO: update organization Type
// organizationType: 'LIMITED_LIABILITY_COMPANY',
// countryOfFormation,
// },
// },
// {
// partyType: 'INDIVIDUAL',
// email: businessEmail,
// roles: ['CONTROLLER'],
// individualDetails: {
// firstName,
// lastName,
// countryOfResidence,
// },
// },
// ],
// products: ['EMBEDDED_PAYMENTS'],
// },
// });

// TODO: do we need clone here?
// const newOnboardingForm = _.cloneDeep(onboardingForm);
// newOnboardingForm.id = res.id;
// newOnboardingForm.outstandingItems = res.outstanding;

if (onRegistration) {
onRegistration({ clientId: res.id });
// onRegistration({ clientId: res.id });
}

setCurrentStep(activeStep + 1);
console.log('@@docs?', res);
setOnboardingForm({
...onboardingForm,
id: res.id,
outstandingItems: res?.outstanding || [],
});
// setOnboardingForm({
// ...onboardingForm,
// id: res.id,
// outstandingItems: res?.outstanding || [],
// });
// setOnboardingForm({
// ...newOnboardingForm,
// attestations: res.outstanding.attestationDocumentIds || [],
// });
// setActiveStep(activeStep + 1);
setCurrentStep(activeStep + 1);
} catch (error) {
console.log(error);
}
Expand Down Expand Up @@ -270,6 +271,7 @@ const ReviewStep = ({ setActiveStep }: any) => {
create
/>
</Dialog>

<form noValidate onSubmit={form.handleSubmit(onSubmit)}>
<NavigationButtons
setActiveStep={setCurrentStep}
Expand Down
Loading

0 comments on commit 4f81667

Please sign in to comment.