@justifi/webcomponents 4.9.1 → 4.10.0

package/dist/collection/components/business-form/business-address/business-address-form-schema.js

@@ -1,13 +0,0 @@
-import { object, string } from "yup";
-export const RegExZip = /^\d{5}/;
-const BusinessAddressFormSchema = object({
-    line1: string().required('Enter street address'),
-    line2: string().nullable(),
-    city: string().required('Enter city'),
-    state: string().required('Choose state'),
-    postal_code: string()
-        .required('Enter ZIP')
-        .matches(RegExZip, 'Enter a valid ZIP')
-        .min(5, 'Enter a valid ZIP')
-});
-export default BusinessAddressFormSchema;

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

@@ -1,159 +0,0 @@
-import { object, string } from "yup";
-import legalAddressSchema from "./legal-address-form/legal-address-form-schema";
-export const RegExZip = /^\d{5}/;
-export class Business {
-    constructor(data) {
-        this.legal_name = '';
-        this.website_url = '';
-        this.email = '';
-        this.phone = '';
-        this.doing_business_as = '';
-        this.business_type = '';
-        this.business_structure = '';
-        this.industry = '';
-        this.metadata = {};
-        if (data) {
-            this.legal_name = data.legal_name;
-            this.website_url = data.website_url;
-            this.email = data.email;
-            this.phone = data.phone;
-            this.doing_business_as = data.doing_business_as;
-            this.business_type = data.business_type;
-            this.business_structure = data.business_structure;
-            this.industry = data.industry;
-            this.metadata = data.metadata;
-        }
-    }
-}
-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',
-    },
-];
-const businessGenericInfoSchema = 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'),
-});
-const addressSchema = object({
-    line1: string().required('Enter street address'),
-    city: string().required('Enter city'),
-    state: string().required('Select state'),
-    postal_code: string().required('Enter postal code'),
-});
-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'),
-    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: addressSchema,
-});
-// 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: addressSchema,
-// });
-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'),
-});
-const businessFormSchema = object(Object.assign(Object.assign({}, businessGenericInfoSchema.fields), { legal_address: legalAddressSchema, additional_questions: additionQuestionsSchema, representative: representativeSchema }));
-export default businessFormSchema;

package/dist/collection/components/business-form/business-form-stepped.js

@@ -1,260 +0,0 @@
-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";
-/**
- * @exportedPart label: Label for inputs
- * @exportedPart input: The input fields
- * @exportedPart input-invalid: Invalid state for inputfs
- */
-export class BusinessFormStepped {
-    constructor() {
-        this.componentStepMapping = {
-            0: (formController) => h("justifi-business-generic-info", { formController: formController }),
-            1: (formController) => h("justifi-legal-address-form", { formController: formController }),
-            2: (formController) => h("justifi-additional-questions", { formController: formController }),
-            3: (formController) => h("justifi-business-representative", { formController: formController })
-        };
-        this.authToken = undefined;
-        this.businessId = undefined;
-        this.testMode = false;
-        this.hideErrors = false;
-        this.isLoading = false;
-        this.currentStep = 0;
-        this.totalSteps = 4;
-        this.serverError = false;
-        this.errorMessage = '';
-        this.sendData = this.sendData.bind(this);
-        this.fetchData = this.fetchData.bind(this);
-    }
-    get disabledState() {
-        return this.isLoading;
-    }
-    get showErrors() {
-        return this.serverError && !this.hideErrors;
-    }
-    get businessEndpoint() {
-        return `entities/business/${this.businessId}`;
-    }
-    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(businessFormSchema);
-        this.api = Api(this.authToken, config.proxyApiOrigin);
-        this.totalSteps = Object.keys(this.componentStepMapping).length - 1;
-        this.fetchData();
-    }
-    handleResponse(response, onSuccess) {
-        if (response.error) {
-            this.serverError = true;
-            this.errorMessage = response.error.message;
-        }
-        else {
-            this.serverError = false;
-            this.businessId = response.data.id;
-            this.formController.setInitialValues(response.data);
-            onSuccess();
-        }
-    }
-    async sendData(onSuccess) {
-        // Stopgap solution to prevent sending data in storybook examples.
-        if (this.testMode) {
-            onSuccess();
-            return;
-        }
-        this.isLoading = true;
-        try {
-            const values = this.formController.values.getValue();
-            const initialValues = this.formController.getInitialValues();
-            const payload = parseForPatching(values, initialValues);
-            const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
-            this.handleResponse(response, onSuccess);
-            this.submitted.emit({ data: response.data });
-        }
-        catch (error) {
-            this.serverError = true;
-            this.errorMessage = error.message;
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async fetchData() {
-        this.isLoading = true;
-        try {
-            const response = await this.api.get(this.businessEndpoint);
-            const business = new Business(response.data);
-            this.formController.setInitialValues(business);
-        }
-        catch (error) {
-            this.serverError = true;
-            this.errorMessage = `Error fetching data: ${error.message}`;
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    validateAndSubmit(event) {
-        event.preventDefault();
-        this.formController.validateAndSubmit(this.sendData);
-    }
-    showPreviousStepButton() {
-        return this.currentStep > 0;
-    }
-    previousStepButtonOnClick() {
-        this.clickEvent.emit({ name: ClickEvents.previousStep });
-        this.sendData(() => this.currentStep--);
-    }
-    showNextStepButton() {
-        return this.currentStep < this.totalSteps;
-    }
-    nextStepButtonOnClick(clickEventName) {
-        this.clickEvent.emit({ name: clickEventName });
-        this.sendData(() => this.currentStep++);
-    }
-    showSubmitButton() {
-        return this.currentStep === this.totalSteps;
-    }
-    currentStepComponent() {
-        return this.componentStepMapping[this.currentStep](this.formController);
-    }
-    render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.showErrors && FormAlert(this.errorMessage), h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.isLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(ClickEvents.nextStep), disabled: this.disabledState }, "Next")), this.showSubmitButton() && (h("button", { type: "submit", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(ClickEvents.submit), disabled: this.disabledState }, "Submit")))))));
-    }
-    static get is() { return "justifi-business-form-stepped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["business-form-stepped.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["business-form-stepped.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
-            },
-            "testMode": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "test-mode",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "hideErrors": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "hide-errors",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isLoading": {},
-            "currentStep": {},
-            "totalSteps": {},
-            "serverError": {},
-            "errorMessage": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "clickEvent",
-                "name": "clickEvent",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ data?: any, name: string }",
-                    "resolved": "{ data?: any; name: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "submitted",
-                "name": "submitted",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ data: any }",
-                    "resolved": "{ data: any; }",
-                    "references": {}
-                }
-            }];
-    }
-}

package/dist/collection/components/business-form/business-generic-info/business-generic-info.js

@@ -1,77 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { BusinessStructureOptions, BusinessTypeOptions, } from "../business-form-schema";
-import { PHONE_MASKS, TAX_ID_MASKS } from "../../../utils/form-input-masks";
-import { CoreBusinessInfo } from "../../../api/Business";
-/**
- *
- * 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 BusinessGenericInfo {
-    constructor() {
-        this.formController = undefined;
-        this.errors = {};
-        this.genericInfo = {};
-        this.inputHandler = this.inputHandler.bind(this);
-    }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => (this.genericInfo = 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 genericInfoDefaultValue = 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: genericInfoDefaultValue.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: genericInfoDefaultValue.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: genericInfoDefaultValue.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: genericInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: genericInfoDefaultValue.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: genericInfoDefaultValue.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: genericInfoDefaultValue.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: genericInfoDefaultValue.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: genericInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
-    }
-    static get is() { return "justifi-business-generic-info"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["business-generic-info.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["business-generic-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": {},
-            "genericInfo": {}
-        };
-    }
-}

package/dist/collection/components/business-form/business-representative/business-representative-schema.js

@@ -1 +0,0 @@
-export const RegExZip = /^\d{5}/;

package/dist/collection/components/business-form/helpers.js

@@ -1,23 +0,0 @@
-// These props should not be sent to the server
-export const parseForPatching = (values, initialValues) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    delete values.id;
-    delete values.documents;
-    delete values.bank_accounts;
-    delete values.product_categories;
-    delete values.created_at;
-    delete values.updated_at;
-    (_a = values.legal_address) === null || _a === void 0 ? true : delete _a.id;
-    (_b = values.legal_address) === null || _b === void 0 ? true : delete _b.created_at;
-    (_c = values.legal_address) === null || _c === void 0 ? true : delete _c.updated_at;
-    (_d = values.representative) === null || _d === void 0 ? true : delete _d.id;
-    (_e = values.representative) === null || _e === void 0 ? true : delete _e.documents;
-    (_f = values.representative) === null || _f === void 0 ? true : delete _f.created_at;
-    (_g = values.representative) === null || _g === void 0 ? true : delete _g.updated_at;
-    (_h = values.representative) === null || _h === void 0 ? true : delete _h.address.id;
-    (_j = values.representative) === null || _j === void 0 ? true : delete _j.address.created_at;
-    (_k = values.representative) === null || _k === void 0 ? true : delete _k.address.updated_at;
-    (_l = values.representative) === null || _l === void 0 ? true : delete _l.business_id;
-    ((_m = initialValues.owners) === null || _m === void 0 ? void 0 : _m.length) && delete values.owners;
-    return values;
-};

package/dist/collection/components/business-form/legal-address-form/legal-address-form-schema.js

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

package/dist/esm/BusinessFormEventTypes-182e20be.js

@@ -1,39 +0,0 @@
-import { h } from './index-fb5ca346.js';
-
-// These props should not be sent to the server
-const parseForPatching = (values, initialValues) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    delete values.id;
-    delete values.documents;
-    delete values.bank_accounts;
-    delete values.product_categories;
-    delete values.created_at;
-    delete values.updated_at;
-    (_a = values.legal_address) === null || _a === void 0 ? true : delete _a.id;
-    (_b = values.legal_address) === null || _b === void 0 ? true : delete _b.created_at;
-    (_c = values.legal_address) === null || _c === void 0 ? true : delete _c.updated_at;
-    (_d = values.representative) === null || _d === void 0 ? true : delete _d.id;
-    (_e = values.representative) === null || _e === void 0 ? true : delete _e.documents;
-    (_f = values.representative) === null || _f === void 0 ? true : delete _f.created_at;
-    (_g = values.representative) === null || _g === void 0 ? true : delete _g.updated_at;
-    (_h = values.representative) === null || _h === void 0 ? true : delete _h.address.id;
-    (_j = values.representative) === null || _j === void 0 ? true : delete _j.address.created_at;
-    (_k = values.representative) === null || _k === void 0 ? true : delete _k.address.updated_at;
-    (_l = values.representative) === null || _l === void 0 ? true : delete _l.business_id;
-    ((_m = initialValues.owners) === null || _m === void 0 ? void 0 : _m.length) && delete values.owners;
-    return values;
-};
-
-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)));
-
-var ClickEvents;
-(function (ClickEvents) {
-    ClickEvents["nextStep"] = "nextStep";
-    ClickEvents["previousStep"] = "previousStep";
-    ClickEvents["submit"] = "submit";
-})(ClickEvents || (ClickEvents = {}));
-
-export { ClickEvents as C, FormAlert as F, parseForPatching as p };