@justifi/webcomponents 4.9.1 → 4.10.0

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

@@ -0,0 +1,239 @@
+import { Host, h } from "@stencil/core";
+import { BusinessTypeOptions, BusinessStructureOptions } from "../../utils/business-form-select-options";
+import { FormController } from "../../../form/form";
+import { PHONE_MASKS, TAX_ID_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 { BusinessFormServerErrors } from "../../utils/business-form-types";
+/**
+ *
+ * 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
+ */
+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.serverError.emit({ data: error, message: BusinessFormServerErrors.fetchData });
+            }
+            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.serverError.emit({ data: error, message: BusinessFormServerErrors.patchData });
+            }
+            finally {
+                this.formLoading.emit(false);
+            }
+        };
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.authToken = undefined;
+        this.businessId = undefined;
+        this.formController = undefined;
+        this.errors = {};
+        this.coreInfo = {};
+    }
+    get businessEndpoint() {
+        return `entities/business/${this.businessId}`;
+    }
+    handleResponse(response, onSuccess) {
+        if (response.error) {
+            this.serverError.emit({ data: response.error, message: BusinessFormServerErrors.patchData });
+        }
+        else {
+            onSuccess();
+        }
+        this.submitted.emit({ data: response, metadata: { completedStep: 'coreInfo' } });
+    }
+    async validateAndSubmit({ onSuccess }) {
+        this.formController.validateAndSubmit(() => this.sendData(onSuccess));
+    }
+    ;
+    componentWillLoad() {
+        const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
+        const missingBusinessIdMessage = 'Warning: Missing business-id. The form requires an existing business-id to function.';
+        if (!this.authToken)
+            console.error(missingAuthTokenMessage);
+        if (!this.businessId)
+            console.error(missingBusinessIdMessage);
+        this.formController = new FormController(businessCoreInfoSchema);
+        this.api = Api(this.authToken, config.proxyApiOrigin);
+        this.fetchData();
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.coreInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    render() {
+        const coreInfoDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })))))));
+    }
+    static get is() { return "justifi-business-core-info-form-step"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["business-core-info-form-step.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["business-core-info-form-step.css"]
+        };
+    }
+    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
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formController": {},
+            "errors": {},
+            "coreInfo": {}
+        };
+    }
+    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": "serverError",
+                "name": "serverError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BusinessFormServerErrorEvent",
+                    "resolved": "BusinessFormServerErrorEvent",
+                    "references": {
+                        "BusinessFormServerErrorEvent": {
+                            "location": "import",
+                            "path": "../../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormServerErrorEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    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": []
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,97 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { BusinessCoreInfoFormStep } from "../business-core-info-form-step";
+describe.skip('justifi-business-core-info-form-step', () => {
+    let consoleSpy;
+    // Initialize the spy in the beforeEach
+    beforeEach(() => {
+        consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
+    });
+    // Restore the original function in the afterEach
+    afterEach(() => {
+        consoleSpy.mockRestore();
+    });
+    it('should log a warning if no authToken is provided', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should log a warning if no businessId is provided', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should emit server error event if server error when fetching data', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should emit server error event if server error when patching data', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should render', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should call fetchData if rendered with valid props', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should populate inputs with data from fetchData', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should instantiate new Form Controller on load', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should fire form controller validation when called', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should only call submit after validate returns true', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should call sendData when submit is called', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should send correct data payload', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should emit submitted event when sendData resolves', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+    it('should emit formLoading event when data is being sent or fetched', async () => {
+        await newSpecPage({
+            components: [BusinessCoreInfoFormStep],
+            html: `<justifi-business-core-info-form-step business-id="biz_123" auth-token="some-token"></justifi-business-core-info-form-step>`,
+        });
+    });
+});