@justifi/webcomponents 4.9.0 → 4.10.0-rc.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/schemas/business-additional-questions-schema.js

@@ -0,0 +1,7 @@
+import { object, string } from "yup";
+export const additionQuestionsSchema = object({
+    business_revenue: string().required('Enter business revenue'),
+    business_payment_volume: string().required('Enter business payment volume'),
+    business_dispute_volume: string().required('Enter business dispute volume'),
+    business_receivable_volume: string().required('Enter business receivable volume'),
+});

package/dist/collection/components/business-forms/schemas/business-address-schema.js

@@ -0,0 +1,15 @@
+import { object, string } from "yup";
+export const legalAddressSchema = object({
+    line1: string().required('Enter street address'),
+    line2: string().nullable(),
+    city: string().required('Enter city'),
+    state: string().required('Select state'),
+    postal_code: string().required('Enter postal code'),
+    country: string().required('Select country'),
+});
+export const identityAddressSchema = object({
+    line1: string().required('Enter street address'),
+    city: string().required('Enter city'),
+    state: string().required('Select state'),
+    postal_code: string().required('Enter postal code'),
+});

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

@@ -0,0 +1,13 @@
+import { object, string } from "yup";
+export const businessCoreInfoSchema = object({
+    legal_name: string().required('Enter legal name'),
+    website_url: string()
+        .url('Enter valid website url')
+        .required('Enter website url'),
+    email: string().email('Enter valid email').required('Enter email'),
+    phone: string().required('Enter phone number'),
+    doing_business_as: string().required('Enter doing business as'),
+    business_type: string().required('Select business type'),
+    business_structure: string().required('Select business structure'),
+    industry: string().required('Enter a business industry'),
+});

package/dist/collection/components/business-forms/schemas/business-form-schema.js

@@ -0,0 +1,6 @@
+import { object } from "yup";
+import { businessCoreInfoSchema } from "./business-core-info-schema";
+import { additionQuestionsSchema } from "./business-additional-questions-schema";
+import { representativeSchema } from "./business-identity-schema";
+import { legalAddressSchema } from "./business-address-schema";
+export const businessFormSchema = object(Object.assign(Object.assign({}, businessCoreInfoSchema.fields), { legal_address: legalAddressSchema, additional_questions: additionQuestionsSchema, representative: representativeSchema }));

package/dist/collection/components/business-forms/schemas/business-identity-schema.js

@@ -0,0 +1,35 @@
+import { object, string } from "yup";
+import { identityAddressSchema } from "./business-address-schema";
+export const phoneRegex = /^[0-9]+$/;
+export const representativeSchema = object({
+    name: string().required('Enter representative name'),
+    email: string()
+        .email('Enter valid representative email')
+        .required('Enter representative email'),
+    phone: string()
+        .required('Enter representative phone number')
+        .matches(phoneRegex, 'Phone number must contain only numbers')
+        .min(10, 'Phone number must contain 10 digits')
+        .max(10, 'Phone number must contain 10 digits'),
+    dob_day: string().required('Enter representative birth day'),
+    dob_month: string().required('Enter representative birth month'),
+    dob_year: string().required('Enter representative birth year'),
+    identification_number: string(),
+    address: identityAddressSchema,
+});
+export const ownerSchema = object({
+    name: string().required('Enter owner name'),
+    email: string()
+        .email('Enter valid owner email')
+        .required('Enter owner email'),
+    phone: string()
+        .required('Enter owner phone number')
+        .matches(phoneRegex, 'Phone number must contain only numbers')
+        .min(10, 'Phone number must contain 10 digits')
+        .max(10, 'Phone number must contain 10 digits'),
+    dob_day: string().required('Enter owner birth day'),
+    dob_month: string().required('Enter owner birth month'),
+    dob_year: string().required('Enter owner birth year'),
+    identification_number: string(),
+    address: identityAddressSchema,
+});

package/dist/collection/components/business-forms/schemas/business-owners-schema.js

@@ -0,0 +1,16 @@
+import { object, string, boolean } from "yup";
+import { identityAddressSchema } from "./business-address-schema";
+export const ownerSchema = object({
+    name: string().required('Enter owner name'),
+    title: string().required('Enter owner title'),
+    email: string()
+        .email('Enter valid owner email')
+        .required('Enter owner email'),
+    phone: string().required('Enter owner phone number'),
+    dob_day: string().required('Enter owner birth day'),
+    dob_month: string().required('Enter owner birth month'),
+    dob_year: string().required('Enter owner birth year'),
+    identification_number: string(),
+    is_owner: boolean(),
+    address: identityAddressSchema,
+});

package/dist/collection/components/business-forms/utils/business-form-select-options.js

@@ -0,0 +1,80 @@
+export const BusinessTypeOptions = [
+    {
+        label: 'Choose business type',
+        value: '',
+    },
+    {
+        label: 'Individual',
+        value: 'individual',
+    },
+    {
+        label: 'For Profit',
+        value: 'for_profit',
+    },
+    {
+        label: 'Non Profit',
+        value: 'non_profit',
+    },
+    {
+        label: 'Government Entity',
+        value: 'government_entity',
+    },
+];
+export const BusinessStructureOptions = [
+    {
+        label: 'Choose business structure',
+        value: '',
+    },
+    {
+        label: 'Sole Proprietorship',
+        value: 'sole_proprietorship',
+    },
+    {
+        label: 'LLC (Single)',
+        value: 'single_llc',
+    },
+    {
+        label: 'LLC (Multiple)',
+        value: 'multi_llc',
+    },
+    {
+        label: 'Private Partnership',
+        value: 'private_partnership',
+    },
+    {
+        label: 'Private Corporation',
+        value: 'private_corporation',
+    },
+    {
+        label: 'Unincorporated Association',
+        value: 'unincorporated_association',
+    },
+    {
+        label: 'Public Partnership',
+        value: 'public_partnership',
+    },
+    {
+        label: 'Public Corporation',
+        value: 'public_corporation',
+    },
+    {
+        label: 'Incorporated',
+        value: 'incorporated',
+    },
+    {
+        label: 'Unincorporated',
+        value: 'unincorporated',
+    },
+    {
+        label: 'Government Unit',
+        value: 'government_unit',
+    },
+    {
+        label: 'Government Instrumentality',
+        value: 'government_instrumentality',
+    },
+    {
+        label: 'Tax Exempt Government Instrumentality',
+        value: 'tax_exempt_government_instrumentality',
+    },
+];

package/dist/collection/components/business-forms/utils/business-form-types.js

@@ -0,0 +1,17 @@
+export var BusinessFormServerErrors;
+(function (BusinessFormServerErrors) {
+    BusinessFormServerErrors["fetchData"] = "Error retrieving business data";
+    BusinessFormServerErrors["patchData"] = "Error updating business data";
+})(BusinessFormServerErrors || (BusinessFormServerErrors = {}));
+export var BusinessFormClickActions;
+(function (BusinessFormClickActions) {
+    BusinessFormClickActions["nextStep"] = "nextStep";
+    BusinessFormClickActions["previousStep"] = "previousStep";
+    BusinessFormClickActions["submit"] = "submit";
+})(BusinessFormClickActions || (BusinessFormClickActions = {}));
+export var OwnerFormServerErrors;
+(function (OwnerFormServerErrors) {
+    OwnerFormServerErrors["fetchData"] = "Error retrieving owner data";
+    OwnerFormServerErrors["patchData"] = "Error updating owner data";
+    OwnerFormServerErrors["postData"] = "Error adding owner data";
+})(OwnerFormServerErrors || (OwnerFormServerErrors = {}));

package/dist/collection/components/business-forms/utils/payload-parsers.js

@@ -0,0 +1,37 @@
+// These props should not be sent to the server
+// This function is for the larger business form. 
+export const parseBusiness = (values, initialValues) => {
+    var _a;
+    parseCoreInfo(values);
+    parseAddressInfo(values.legal_address);
+    parseIdentityInfo(values.representative);
+    ((_a = initialValues.owners) === null || _a === void 0 ? void 0 : _a.length) && delete values.owners;
+    return values;
+};
+// These functions are for the stepped business form.
+export const parseCoreInfo = (values) => {
+    delete values.id;
+    delete values.documents;
+    delete values.bank_accounts;
+    delete values.product_categories;
+    delete values.created_at;
+    delete values.updated_at;
+    return values;
+};
+export const parseAddressInfo = (values) => {
+    delete values.id;
+    delete values.created_at;
+    delete values.updated_at;
+    return values;
+};
+export const parseIdentityInfo = (values) => {
+    delete values.id;
+    delete values.documents;
+    delete values.created_at;
+    delete values.updated_at;
+    delete values.address.id;
+    delete values.address.created_at;
+    delete values.address.updated_at;
+    delete values.business_id;
+    return values;
+};

package/dist/collection/components/form/utils.js

@@ -1,2 +1,3 @@
 import { h } from "@stencil/core";
 export const FormAlert = (message) => (h("div", { class: 'alert alert-danger d-flex align-items-center', role: 'alert' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", class: "bi bi-exclamation-triangle-fill flex-shrink-0 me-2", viewBox: "0 0 16 16", role: "img", "aria-label": "Warning:" }, h("path", { d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })), h("div", null, message)));
+export const LoadingSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));

package/dist/collection/utils/utils.js

@@ -1,5 +1,6 @@
 import { format } from "date-fns";
 import Dinero from "dinero.js";
+export const RegExZip = /^\d{5}/;
 export function formatCurrency(amount, withSymbol = true) {
     if (!amount)
         amount = 0;
@@ -153,6 +154,21 @@ export function snakeCaseToHumanReadable(snakeCaseStr) {
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ');
 }
+export function flattenNestedObject(obj) {
+    const result = {};
+    for (const key in obj) {
+        if (typeof obj[key] === 'object' && obj[key] !== null) {
+            const nestedObj = flattenNestedObject(obj[key]);
+            for (const nestedKey in nestedObj) {
+                result[nestedKey] = nestedObj[nestedKey];
+            }
+        }
+        else {
+            result[key] = obj[key];
+        }
+    }
+    return result;
+}
 export function composeQueryParams(values) {
     const queryParams = values.map((value) => {
         if (value === values[0]) {