@justifi/webcomponents 4.9.0 → 4.10.0-rc.0

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

@@ -0,0 +1,77 @@
+import { Host, h } from "@stencil/core";
+import { BusinessTypeOptions, BusinessStructureOptions } from "../../utils/business-form-select-options";
+import { PHONE_MASKS, TAX_ID_MASKS } from "../../../../utils/form-input-masks";
+import { CoreBusinessInfo } from "../../../../api/Business";
+/**
+ *
+ * The difference between this component and business-core-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 BusinessCoreInfo {
+    constructor() {
+        this.formController = undefined;
+        this.errors = {};
+        this.coreInfo = {};
+        this.inputHandler = this.inputHandler.bind(this);
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => (this.coreInfo = Object.assign({}, new CoreBusinessInfo(values))));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    inputHandler(name, value) {
+        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+    }
+    render() {
+        const coreInfoDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { exportparts: "label,input,input-invalid" }, 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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["business-core-info.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["business-core-info.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "formController": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormController",
+                    "resolved": "FormController",
+                    "references": {
+                        "FormController": {
+                            "location": "import",
+                            "path": "../../../form/form",
+                            "id": "src/components/form/form.ts::FormController"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "errors": {},
+            "coreInfo": {}
+        };
+    }
+}

package/dist/collection/components/{business-form → business-forms/business-form}/business-form.js

@@ -1,12 +1,12 @@
 import { Host, h } from "@stencil/core";
-import { FormController } from "../form/form";
-import businessFormSchema from "./business-form-schema";
-import { Api } from "../../api";
-import { parseForPatching } from "./helpers";
-import { config } from "../../../config";
-import { FormAlert } from "../form/utils";
-import { ClickEvents } from "./BusinessFormEventTypes";
-import { Business } from "../../api/Business";
+import { FormController } from "../../form/form";
+import { businessFormSchema } from "../schemas/business-form-schema";
+import { Api } from "../../../api";
+import { parseBusiness } from "../utils/payload-parsers";
+import { config } from "../../../../config";
+import { FormAlert } from "../../form/utils";
+import { BusinessFormClickActions, BusinessFormServerErrors } from "../utils/business-form-types";
+import { Business } from "../../../api/Business";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -17,7 +17,7 @@ export class BusinessForm {
         return this.isLoading;
     }
     get showErrors() {
-        return this.serverError && !this.hideErrors;
+        return this.errorMessage && !this.hideErrors;
     }
     get businessEndpoint() {
         return `entities/business/${this.businessId}`;
@@ -27,8 +27,7 @@ export class BusinessForm {
         this.businessId = undefined;
         this.hideErrors = false;
         this.isLoading = false;
-        this.serverError = false;
-        this.errorMessage = '';
+        this.errorMessage = undefined;
         this.sendData = this.sendData.bind(this);
         this.fetchData = this.fetchData.bind(this);
         this.validateAndSubmit = this.validateAndSubmit.bind(this);
@@ -49,13 +48,12 @@ export class BusinessForm {
         try {
             const values = this.formController.values.getValue();
             const initialValues = this.formController.getInitialValues();
-            const payload = parseForPatching(values, initialValues);
+            const payload = parseBusiness(values, initialValues);
             const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
             this.submitted.emit({ data: response });
         }
         catch (error) {
-            this.serverError = true;
-            this.errorMessage = error.message;
+            this.errorMessage = BusinessFormServerErrors.patchData;
         }
         finally {
             this.isLoading = false;
@@ -69,8 +67,7 @@ export class BusinessForm {
             this.formController.setInitialValues(Object.assign({}, business));
         }
         catch (error) {
-            this.serverError = true;
-            this.errorMessage = `Error fetching data: ${error.message}`;
+            this.errorMessage = BusinessFormServerErrors.fetchData;
         }
         finally {
             this.isLoading = false;
@@ -81,7 +78,7 @@ export class BusinessForm {
         this.formController.validateAndSubmit(this.sendData);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), this.showErrors && FormAlert(this.errorMessage), h("div", { class: "col-12 mb-4" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.clickEvent.emit({ name: ClickEvents.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), this.showErrors && FormAlert(this.errorMessage), h("div", { class: "col-12 mb-4" }, h("justifi-business-core-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.clickEvent.emit({ name: BusinessFormClickActions.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
     }
     static get is() { return "justifi-business-form"; }
     static get originalStyleUrls() {
@@ -153,7 +150,6 @@ export class BusinessForm {
     static get states() {
         return {
             "isLoading": {},
-            "serverError": {},
             "errorMessage": {}
         };
     }
@@ -169,9 +165,15 @@ export class BusinessForm {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ data?: any, name: string }",
-                    "resolved": "{ data?: any; name: string; }",
-                    "references": {}
+                    "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": "submitted",
@@ -184,9 +186,15 @@ export class BusinessForm {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ data: any }",
-                    "resolved": "{ data: any; }",
-                    "references": {}
+                    "original": "BusinessFormSubmitEvent",
+                    "resolved": "BusinessFormSubmitEvent",
+                    "references": {
+                        "BusinessFormSubmitEvent": {
+                            "location": "import",
+                            "path": "../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                        }
+                    }
                 }
             }];
     }