@justifi/webcomponents 4.9.1 → 4.10.0

package/dist/collection/components/business-forms/owner-form/owner-form.js

@@ -0,0 +1,367 @@
+import { Host, h } from "@stencil/core";
+import { FormController } from "../../form/form";
+import { PHONE_MASKS } from "../../../utils/form-input-masks";
+import { Api } from "../../../api";
+import { Owner } from "../../../api/Identity";
+import { parseIdentityInfo } from "../utils/payload-parsers";
+import { ownerSchema } from "../schemas/business-identity-schema";
+import { config } from "../../../../config";
+import { LoadingSpinner } from "../../form/utils";
+import { OwnerFormServerErrors } from "../utils/business-form-types";
+export class BusinessOwnerForm {
+    constructor() {
+        this.fetchData = async () => {
+            if (!this.ownerId) {
+                return;
+            }
+            this.isLoading = true;
+            try {
+                const response = await this.api.get(this.identityEndpoint);
+                this.owner = Object.assign({}, new Owner(response.data));
+                this.formController.setInitialValues(this.owner);
+            }
+            catch (error) {
+                this.serverError.emit({ data: error, message: OwnerFormServerErrors.fetchData });
+            }
+            finally {
+                this.isLoading = false;
+            }
+        };
+        this.sendData = async () => {
+            this.isLoading = true;
+            try {
+                if (this.ownerId) {
+                    const payload = parseIdentityInfo(this.formController.values.getValue());
+                    const response = await this.api.patch(this.identityEndpoint, JSON.stringify(payload));
+                    return this.handleResponse(response);
+                }
+                else {
+                    const payload = Object.assign(Object.assign({}, parseIdentityInfo(this.formController.values.getValue())), { business_id: this.businessId });
+                    const response = await this.api.post(this.identityEndpoint, JSON.stringify(payload));
+                    this.ownerId = response.data.id;
+                    return this.handleResponse(response);
+                }
+            }
+            catch (error) {
+                console.warn(error);
+            }
+            finally {
+                this.isLoading = false;
+            }
+        };
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.onAddressFormUpdate = (values) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { address: Object.assign(Object.assign({}, this.formController.values.getValue().address), values) }));
+        };
+        this.validateAndSubmit = (event) => {
+            event.preventDefault();
+            const isValid = this.formController.validate();
+            if (isValid) {
+                this.submit();
+            }
+        };
+        this.authToken = undefined;
+        this.ownerId = undefined;
+        this.businessId = undefined;
+        this.removeOwner = undefined;
+        this.newFormOpen = undefined;
+        this.ownersLength = undefined;
+        this.isLoading = false;
+        this.formController = undefined;
+        this.errors = {};
+        this.owner = {};
+    }
+    get identityEndpoint() {
+        return this.ownerId ? `entities/identity/${this.ownerId}` : 'entities/identity';
+    }
+    get formTitle() {
+        return this.ownerId ? 'Edit Business Owner' : 'Add Business Owner';
+    }
+    get submitButtonText() {
+        return this.ownerId ? 'Update' : 'Add';
+    }
+    get showRemoveButton() {
+        const blankForm = !this.ownerId && this.newFormOpen;
+        if (this.ownersLength <= 1) {
+            return false;
+        }
+        else {
+            if (blankForm) {
+                return true;
+            }
+            else if (this.ownerId && !this.newFormOpen) {
+                return true;
+            }
+        }
+    }
+    loadingWatcher() {
+        this.formLoading.emit(this.isLoading);
+    }
+    handleResponse(response) {
+        this.submitted.emit({ data: response, metadata: { ownerId: this.ownerId } });
+        let errorMessage = this.ownerId ? OwnerFormServerErrors.patchData : OwnerFormServerErrors.postData;
+        if (response.error) {
+            this.serverError.emit({ data: response.error, message: errorMessage });
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    componentWillLoad() {
+        const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
+        if (!this.authToken)
+            console.error(missingAuthTokenMessage);
+        this.formController = new FormController(ownerSchema);
+        this.api = Api(this.authToken, config.proxyApiOrigin);
+        this.fetchData();
+    }
+    componentDidLoad() {
+        this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
+        this.formController.values.subscribe(values => (this.owner = Object.assign({}, values)));
+    }
+    async validate() {
+        return this.formController.validate();
+    }
+    async submit() {
+        return this.sendData();
+    }
+    render() {
+        const ownerDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: this.validateAndSubmit }, h("fieldset", null, h("legend", null, this.formTitle), h("div", { class: 'row gy-3' }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-select", { name: "title", label: "Prefix", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.title, options: [
+                { label: 'Select Prefix', value: '' },
+                { label: 'Mrs.', value: 'Mrs.' },
+            ], error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), h("div", { class: "col-12" }, h("form-control-number", { name: "identification_number", label: "EIN/SSN", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-business-address-form", { errors: this.errors.address, defaultValues: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.address, handleFormUpdate: values => this.onAddressFormUpdate(values) })), h("div", { class: "container d-flex gap-2" }, h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`, disabled: this.isLoading }, this.isLoading ? LoadingSpinner() : this.submitButtonText), this.showRemoveButton &&
+            h("button", { type: "button", class: "btn btn-danger", onClick: () => this.removeOwner(this.ownerId) }, "Remove owner"))), h("hr", null)))));
+    }
+    static get is() { return "justifi-owner-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["owner-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["owner-form.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
+            },
+            "ownerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "owner-id",
+                "reflect": false
+            },
+            "businessId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "business-id",
+                "reflect": false
+            },
+            "removeOwner": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(id: string) => void",
+                    "resolved": "(id: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "newFormOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "new-form-open",
+                "reflect": false
+            },
+            "ownersLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "owners-length",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "formController": {},
+            "errors": {},
+            "owner": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OwnerFormSubmitEvent",
+                    "resolved": "OwnerFormSubmitEvent",
+                    "references": {
+                        "OwnerFormSubmitEvent": {
+                            "location": "import",
+                            "path": "../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::OwnerFormSubmitEvent"
+                        }
+                    }
+                }
+            }, {
+                "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": "OwnerFormServerErrorEvent",
+                    "resolved": "OwnerFormServerErrorEvent",
+                    "references": {
+                        "OwnerFormServerErrorEvent": {
+                            "location": "import",
+                            "path": "../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::OwnerFormServerErrorEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "submit": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "isLoading",
+                "methodName": "loadingWatcher"
+            }];
+    }
+}

package/dist/collection/components/business-forms/payment-provisioning/additional-questions/business-additional-questions-form-step.js

@@ -0,0 +1,219 @@
+import { Host, h } from "@stencil/core";
+import { FormController } from "../../../form/form";
+import { AdditionalQuestions } from "../../../../api/Business";
+import { Api } from "../../../../api";
+import { config } from "../../../../../config";
+import { additionQuestionsSchema } from "../../schemas/business-additional-questions-schema";
+import { BusinessFormServerErrors } from "../../utils/business-form-types";
+/**
+ * @exportedPart label: Label for inputs
+ * @exportedPart input: The input fields
+ * @exportedPart input-invalid: Invalid state for inputfs
+ */
+export class AdditionalQuestionsFormStep {
+    constructor() {
+        this.fetchData = async () => {
+            this.formLoading.emit(true);
+            try {
+                const response = await this.api.get(this.businessEndpoint);
+                this.additional_questions = new AdditionalQuestions(response.data.additional_questions || {});
+                this.formController.setInitialValues(Object.assign({}, this.additional_questions));
+            }
+            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 = this.formController.values.getValue();
+                const response = await this.api.patch(this.businessEndpoint, JSON.stringify({ additional_questions: 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.additional_questions = {};
+    }
+    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: 'additionalQuestions' } });
+    }
+    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(additionQuestionsSchema);
+        this.api = Api(this.authToken, config.proxyApiOrigin);
+        this.fetchData();
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.additional_questions = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const additionalQuestionsDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Additional Questions"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-monetary", { name: "business_revenue", label: "Business Revenue", inputHandler: this.inputHandler, error: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.business_revenue, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_revenue })), h("div", { class: "col-12" }, h("form-control-monetary", { name: "business_payment_volume", label: "Business Payment Volume", inputHandler: this.inputHandler, error: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.business_payment_volume, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_payment_volume })), h("div", { class: "col-12" }, h("form-control-monetary", { name: "business_dispute_volume", label: "Business Dispute Volume", inputHandler: this.inputHandler, error: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.business_dispute_volume, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_dispute_volume })), h("div", { class: "col-12" }, h("form-control-monetary", { name: "business_receivable_volume", label: "Business Receivable Volume", inputHandler: this.inputHandler, error: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.business_receivable_volume, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_receivable_volume })))))));
+    }
+    static get is() { return "justifi-additional-questions-form-step"; }
+    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": {},
+            "additional_questions": {}
+        };
+    }
+    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": []
+                }
+            }
+        };
+    }
+}