@justifi/webcomponents 4.18.0 → 4.19.0

package/dist/collection/components/business-forms/payment-provisioning/business-core-info/business-core-info-form-step.js

@@ -1,113 +1,52 @@
-import { Host, h } from "@stencil/core";
-import { FormController } from "../../../form/form";
-import { PHONE_MASKS } from "../../../../utils/form-input-masks";
-import { CoreBusinessInfo } from "../../../../api/Business";
-import { Api } from "../../../../api";
-import { businessCoreInfoSchema } from "../../schemas/business-core-info-schema";
-import { config } from "../../../../../config";
-import { parseCoreInfo } from "../../utils/payload-parsers";
-import { flattenNestedObject } from "../../../../utils/utils";
-import { BusinessFormStep } from "../../utils/business-form-types";
-import { businessClassificationOptions } from "../../utils/business-form-options";
+import { h } from "@stencil/core";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../../api/ComponentError";
-import { numberOnlyHandler } from "../../../form/utils";
+import { makeGetBusiness, makePatchBusiness } from "../payment-provisioning-actions";
+import { BusinessService } from "../../../../api/services/business.service";
 /**
- *
- * The difference between this component and business-generic-info-details
- * is that this component is meant to be a form and send data
- * and the other one  is meant to be just read only.
- *
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
- * @exportedPart input-invalid: Invalid state for inputfs
+ * @exportedPart input-invalid: Invalid state for inputs
  */
 export class BusinessCoreInfoFormStep {
     constructor() {
-        this.fetchData = async () => {
-            this.formLoading.emit(true);
-            try {
-                const response = await this.api.get(this.businessEndpoint);
-                this.coreInfo = new CoreBusinessInfo(response.data);
-                this.formController.setInitialValues(Object.assign({}, this.coreInfo));
-            }
-            catch (error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.FETCH_ERROR,
-                    message: error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                    data: error,
-                });
-            }
-            finally {
-                this.formLoading.emit(false);
-            }
-        };
-        this.sendData = async (onSuccess) => {
-            this.formLoading.emit(true);
-            try {
-                const payload = parseCoreInfo(flattenNestedObject(this.formController.values.getValue()));
-                const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
-                this.handleResponse(response, onSuccess);
-            }
-            catch (error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.PATCH_ERROR,
-                    message: error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                    data: error,
-                });
-            }
-            finally {
-                this.formLoading.emit(false);
-            }
-        };
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-        this.formController = undefined;
-        this.errors = {};
-        this.coreInfo = {};
+        this.getBusiness = undefined;
+        this.patchBusiness = undefined;
         this.authToken = undefined;
         this.businessId = undefined;
         this.allowOptionalFields = undefined;
     }
-    get businessEndpoint() {
-        return `entities/business/${this.businessId}`;
-    }
-    handleResponse(response, onSuccess) {
-        if (response.error) {
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.PATCH_ERROR,
-                message: response.error.message,
-                severity: ComponentErrorSeverity.ERROR,
-                data: response.error,
-            });
-        }
-        else {
-            onSuccess();
-        }
-        this.submitted.emit({ data: response, metadata: { completedStep: BusinessFormStep.coreInfo } });
+    propChanged() {
+        this.initializeApi();
     }
     async validateAndSubmit({ onSuccess }) {
-        this.formController.validateAndSubmit(() => this.sendData(onSuccess));
+        this.coreComponent.validateAndSubmit({ onSuccess });
     }
-    ;
     componentWillLoad() {
-        this.formController = new FormController(businessCoreInfoSchema(this.allowOptionalFields));
-        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
-        if (this.businessId && this.authToken) {
-            this.fetchData();
-        }
+        this.initializeApi();
     }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.coreInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
+    initializeApi() {
+        if (this.authToken && this.businessId) {
+            this.getBusiness = makeGetBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+            this.patchBusiness = makePatchBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+        }
+        else {
+            this.errorEvent.emit({
+                message: 'Missing required props',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
     }
     render() {
-        const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: '4ea42b813bdd6e5c59a62ae4ae869e86dfddd7ce', exportparts: 'label,input,input-invalid' }, h("form", { key: 'f5ec3be342eda82dee8a51fe2ee5a6da1ee8902e' }, h("fieldset", { key: 'e07041577f53badc6c172a2c6dc20b1066c03f4c' }, h("legend", { key: '2bcc8cc013eeee4e27c874d0bed4471515b68610' }, "General Info"), h("hr", { key: '6dc6f73cf851b9244c8d797bc5cefdfda848c7bc' }), h("div", { key: 'b2bfad85255ddfa76d405e45df3d668ad02a6fea', class: 'row gy-3' }, h("div", { key: 'a9a65df07f40621513ce4881dd203e90142d7670', class: 'col-12' }, h("form-control-text", { key: '7fe7ac765902c7cd9ed60004dc7be687d43b2e49', name: 'legal_name', label: 'Legal Name', defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { key: '6fe2e395e4391480f4d6dafcfc57619176efc45c', class: 'col-12' }, h("form-control-text", { key: 'd19870345d79e4c44c3e667e2751ff6f344e1d58', name: 'doing_business_as', label: 'Doing Business As (DBA)', defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { key: '39acda8180c70f7684aa2d73ef31bc199233c358', class: 'col-12 col-md-8' }, h("form-control-select", { key: '67f98ac21a69a851bb9489df198e06c8b517d45e', name: 'classification', label: 'Business Classification', options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { key: 'd54631f13e8998170de1f175d52d89d90035e688', class: 'col-12 col-md-4' }, h("form-control-date", { key: '8038e4f909c9bb2e5f3a8dd577f7b7f75e3d4f41', name: 'date_of_incorporation', label: 'Date of Incorporation', defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { key: 'ca43f206b14494ddaa55c625a2c408426ebcf529', class: 'col-12 col-md-6' }, h("form-control-text", { key: '7ccf50e04dad1a7e001c37074925f27f53ec831c', name: 'industry', label: 'Industry', defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler })), h("div", { key: '76136df0a434b7fce1b0307e962e4ea387a063d3', class: 'col-12 col-md-6' }, h("form-control-text", { key: 'ddfd853ed46b3995484dff54d47af0c0d6c93b0c', name: 'tax_id', label: 'Tax ID (EIN or SSN)', defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, maxLength: 9 })), h("div", { key: '1084c4d7a261b8fc0a9ceacc16b5823f09cfb807', class: 'col-12' }, h("form-control-text", { key: 'c9ca186a6f2cc10f43966de56e6a224103ddd1f3', name: 'website_url', label: 'Website URL', defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { key: '55bc2f83a170fc1bec20c208460cc63b8f42a566', class: 'col-12 col-md-6' }, h("form-control-text", { key: '5c35db62f1d7d56e01a839df29b39aa55e569d5c', name: 'email', label: 'Email Address', defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'f74aadc2ea606365918f29091a6f6bb08841bf00', class: 'col-12 col-md-6' }, h("form-control-number-masked", { key: 'ef54ee012cbc30464bcdc7e887d5eb0523e30057', name: 'phone', label: 'Phone Number', defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })))))));
+        return (h("justifi-business-core-info-form-step-core", { key: '4ee53046d16fd42df4e09b10c338a740c22184ef', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-business-core-info-form-step"; }
     static get properties() {
@@ -167,49 +106,12 @@ export class BusinessCoreInfoFormStep {
     }
     static get states() {
         return {
-            "formController": {},
-            "errors": {},
-            "coreInfo": {}
+            "getBusiness": {},
+            "patchBusiness": {}
         };
     }
     static get events() {
         return [{
-                "method": "submitted",
-                "name": "submitted",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "BusinessFormSubmitEvent",
-                    "resolved": "BusinessFormSubmitEvent",
-                    "references": {
-                        "BusinessFormSubmitEvent": {
-                            "location": "import",
-                            "path": "../../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "formLoading",
-                "name": "formLoading",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
                 "method": "errorEvent",
                 "name": "error-event",
                 "bubbles": true,
@@ -257,4 +159,13 @@ export class BusinessCoreInfoFormStep {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }, {
+                "propName": "businessId",
+                "methodName": "propChanged"
+            }];
+    }
 }

package/dist/collection/components/business-forms/payment-provisioning/business-owners/business-owners-form-step-core.js

@@ -0,0 +1,342 @@
+import { h } from "@stencil/core";
+import { BusinessFormClickActions, BusinessFormStep } from "../../utils/business-form-types";
+import { Button } from "../../../../ui-components";
+export class BusinessOwnersFormStepCore {
+    constructor() {
+        this.matchRef = (ref, ownerId) => {
+            const ownerIndex = this.refs.findIndex(ref => ref === ownerId);
+            if (ownerIndex !== -1) {
+                this.refs[ownerIndex] = ref;
+            }
+        };
+        this.getData = () => {
+            this.formLoading.emit(true);
+            this.getBusiness({
+                onSuccess: (response) => {
+                    if (response.data.owners.length) {
+                        this.ownersPayload = response.data.owners.map(owner => ({ id: owner.id }));
+                    }
+                    else {
+                        this.addOwnerForm();
+                    }
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.formLoading.emit(false);
+                    this.manageRefs();
+                }
+            });
+        };
+        this.sendData = async (onSuccess) => {
+            let submittedData;
+            this.formLoading.emit(true);
+            this.patchBusiness({
+                payload: JSON.stringify({ owners: this.ownersPayload }),
+                onSuccess: (response) => {
+                    submittedData = response;
+                    onSuccess();
+                },
+                onError: ({ error, code, severity }) => {
+                    submittedData = error;
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.submitted.emit({ data: submittedData, metadata: { completedStep: BusinessFormStep.owners } });
+                    this.formLoading.emit(false);
+                }
+            });
+        };
+        this.addOwnerForm = (fireClick) => {
+            this.newFormOpen = true;
+            this.ownersPayload = [...this.ownersPayload, { id: '' }];
+            fireClick && this.clickEvent.emit({ name: BusinessFormClickActions.addOwnerForm });
+        };
+        this.removeOwnerForm = (id) => {
+            this.ownersPayload = this.ownersPayload.filter(owner => owner.id !== id);
+            this.newFormOpen && (this.newFormOpen = false);
+        };
+        this.ownersPayload = [];
+        this.refs = [];
+        this.newFormOpen = undefined;
+        this.authToken = undefined;
+        this.businessId = undefined;
+        this.getBusiness = undefined;
+        this.patchBusiness = undefined;
+        this.allowOptionalFields = undefined;
+    }
+    get showAddOwnerButton() {
+        return this.ownersPayload.length < 4 && !this.newFormOpen;
+    }
+    manageRefs() {
+        this.refs = this.ownersPayload.map((owner) => { return owner.id; });
+    }
+    async validateAndSubmit({ onSuccess }) {
+        const formValidations = this.refs.map(ref => ref.validate());
+        const formsValid = (await Promise.all(formValidations)).every(result => result);
+        if (!formsValid) {
+            return;
+        }
+        const formSubmissions = this.refs.map(ref => ref.submit());
+        const submissionsValid = (await Promise.all(formSubmissions)).every(result => result);
+        if (!submissionsValid) {
+            return;
+        }
+        this.sendData(onSuccess);
+    }
+    ;
+    componentWillLoad() {
+        this.getBusiness && this.getData();
+    }
+    ownersWatcher() {
+        this.manageRefs();
+    }
+    handleOwnerSubmit(event) {
+        const submittedOwner = event.detail;
+        const updatedOwners = this.ownersPayload.map(owner => owner.id === submittedOwner.id ? submittedOwner : owner);
+        if (!updatedOwners.includes(submittedOwner)) {
+            const newOwnerIndex = this.ownersPayload.findIndex(owner => !owner.id);
+            updatedOwners[newOwnerIndex] = submittedOwner;
+            this.newFormOpen && (this.newFormOpen = false);
+        }
+        this.ownersPayload = updatedOwners;
+    }
+    render() {
+        return (h("div", { key: '5958d46ae5bc3abb7a82f5c67c597be46898284e' }, h("legend", { key: 'e10085a37e93b96901187e0a926127167ca6dbc5' }, "Owners"), h("hr", { key: 'eb7f84185271c80b87397e49f2ee5c6e20faad99' }), h("div", { key: '0f791f3d3f6c7f6aa363004d0618bd90e16f185b', class: 'row gy-3' }, this.ownersPayload.map((owner) => {
+            return (h("justifi-owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.ownersPayload.length, allowOptionalFields: this.allowOptionalFields, ref: (ref) => this.matchRef(ref, owner.id) }));
+        })), h("div", { key: 'd1f6414e9213d9600eaea7e9c1e033d250f8e49a', class: 'd-flex justify-content-start' }, h("div", { key: 'fd96248f6dddfa0d973744d11e3f1f121353e398', class: 'gap-2' }, h(Button, { key: '514e549632c8f11b4b51c061949b026734ae0113', variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner")))));
+    }
+    static get is() { return "justifi-business-owners-form-step-core"; }
+    static get properties() {
+        return {
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "businessId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "business-id",
+                "reflect": false
+            },
+            "getBusiness": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "patchBusiness": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ownersPayload": {},
+            "refs": {},
+            "newFormOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BusinessFormSubmitEvent",
+                    "resolved": "BusinessFormSubmitEvent",
+                    "references": {
+                        "BusinessFormSubmitEvent": {
+                            "location": "import",
+                            "path": "../../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BusinessFormClickEvent",
+                    "resolved": "BusinessFormClickEvent",
+                    "references": {
+                        "BusinessFormClickEvent": {
+                            "location": "import",
+                            "path": "../../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "formLoading",
+                "name": "formLoading",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "validateAndSubmit": {
+                "complexType": {
+                    "signature": "({ onSuccess }: { onSuccess: any; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ onSuccess: any; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "ownersPayload",
+                "methodName": "ownersWatcher"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "ownerSubmitted",
+                "method": "handleOwnerSubmit",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}