@justifi/webcomponents 4.13.0 → 4.15.0

package/dist/module/business-representative-form-step.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { F as FormController } from './form.js';
+import { F as FormController } from './index.esm.js';
 import { P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks.js';
 import { A as Api } from './Api.js';
 import { b as parseIdentityInfo } from './payload-parsers.js';
@@ -76,6 +76,9 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
     get businessEndpoint() {
         return `entities/business/${this.businessId}`;
     }
+    get identificationNumberLabel() {
+        return this.representative.ssn_last4 ? 'Update SSN (optional)' : 'SSN';
+    }
     handleResponse(response, onSuccess) {
         if (response.error) {
             this.serverError.emit({ data: response.error, message: BusinessFormServerErrors.patchData });
@@ -97,7 +100,7 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
         this.formController = new FormController(identitySchema('representative', this.allowOptionalFields));
-        this.api = Api(this.authToken, config.proxyApiOrigin);
+        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
         this.fetchData();
     }
     componentDidLoad() {
@@ -106,7 +109,7 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, 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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number-masked", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, 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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number-masked", { name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
     }
     static get style() { return businessRepresentativeFormStepCss; }
 }, [0, "justifi-business-representative-form-step", {

package/dist/module/business-representative.js

@@ -27,13 +27,16 @@ const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRe
         this.errors = {};
         this.representative = {};
     }
+    get identificationNumberLabel() {
+        return this.representative.ssn_last4 ? 'Update SSN (optional)' : 'SSN';
+    }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
         this.formController.values.subscribe(values => (this.representative = Object.assign({}, values.representative)));
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, 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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number-masked", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, 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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number-masked", { name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
     static get style() { return businessRepresentativeCss; }
 }, [0, "justifi-business-representative", {

package/dist/module/checkout-core.js

@@ -2,14 +2,14 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as extractComputedFontsToLoad, a as formatCurrency } from './utils2.js';
 import { c as config } from './config.js';
 import { C as ComponentErrorSeverity } from './ComponentError.js';
-import { d as defineCustomElement$8 } from './billing-form.js';
-import { d as defineCustomElement$7 } from './new-payment-method.js';
-import { d as defineCustomElement$6 } from './payment-method-form.js';
-import { d as defineCustomElement$5 } from './payment-method-options.js';
-import { d as defineCustomElement$4 } from './saved-payment-method.js';
-import { d as defineCustomElement$3 } from './sezzel-payment-method.js';
-import { d as defineCustomElement$2 } from './select-input2.js';
-import { d as defineCustomElement$1 } from './text-input2.js';
+import { d as defineCustomElement$8 } from './form-control-select2.js';
+import { d as defineCustomElement$7 } from './form-control-text2.js';
+import { d as defineCustomElement$6 } from './billing-form.js';
+import { d as defineCustomElement$5 } from './new-payment-method.js';
+import { d as defineCustomElement$4 } from './payment-method-form.js';
+import { d as defineCustomElement$3 } from './payment-method-options.js';
+import { d as defineCustomElement$2 } from './saved-payment-method.js';
+import { d as defineCustomElement$1 } from './sezzle-payment-method.js';
 
 class Checkout {
     constructor(data) {
@@ -44,6 +44,10 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         this.getCheckout = undefined;
         this.complete = undefined;
         this.checkoutId = undefined;
+        this.disableCreditCard = undefined;
+        this.disableBankAccount = undefined;
+        this.disableBnpl = undefined;
+        this.disablePaymentMethodGroup = undefined;
         this.hasLoadedFonts = false;
         this.isLoading = false;
         this.checkout = undefined;
@@ -122,8 +126,8 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, null, h("div", { class: "row gy-3 jfi-checkout-core" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.checkout && (h("div", null, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+this.checkout.payment_amount)))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": ((_c = (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.payment_settings) === null || _c === void 0 ? void 0 : _c.credit_card_payments) || true, "show-ach": ((_e = (_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_settings) === null || _e === void 0 ? void 0 : _e.ach_payments) || true, bnpl: (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.bnpl, "client-id": (_g = this.checkout) === null || _g === void 0 ? void 0 : _g.payment_client_id, "account-id": (_h = this.checkout) === null || _h === void 0 ? void 0 : _h.account_id, savedPaymentMethods: ((_j = this.checkout) === null || _j === void 0 ? void 0 : _j.payment_methods) || [], paymentAmount: (_k = this.checkout) === null || _k === void 0 ? void 0 : _k.payment_amount }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
+        var _a, _b, _c, _d, _e, _f;
+        return (h(Host, null, h("div", { class: "row gy-3 jfi-checkout-core" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.checkout && (h("div", null, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+this.checkout.payment_amount)))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, "client-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.payment_client_id, "account-id": (_d = this.checkout) === null || _d === void 0 ? void 0 : _d.account_id, savedPaymentMethods: ((_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_methods) || [], paymentAmount: (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.payment_amount }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
     }
     static get style() { return checkoutCoreCss; }
 }, [1, "justifi-checkout-core", {
@@ -132,6 +136,10 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         "getCheckout": [16],
         "complete": [16],
         "checkoutId": [1, "checkout-id"],
+        "disableCreditCard": [4, "disable-credit-card"],
+        "disableBankAccount": [4, "disable-bank-account"],
+        "disableBnpl": [4, "disable-bnpl"],
+        "disablePaymentMethodGroup": [4, "disable-payment-method-group"],
         "hasLoadedFonts": [32],
         "isLoading": [32],
         "checkout": [32],
@@ -143,49 +151,49 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-checkout-core", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-saved-payment-method", "justifi-sezzel-payment-method", "select-input", "text-input"];
+    const components = ["justifi-checkout-core", "form-control-select", "form-control-text", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CheckoutCore);
             }
             break;
-        case "justifi-billing-form":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "justifi-new-payment-method":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-payment-method-form":
+        case "justifi-billing-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-payment-method-options":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-saved-payment-method":
+        case "justifi-payment-method-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-sezzel-payment-method":
+        case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "select-input":
+        case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "text-input":
+        case "justifi-sezzle-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/identity-address-form.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { S as StateOptions } from './state-options.js';
-import { f as filterPostalInput } from './utils4.js';
+import { f as filterPostalInput } from './utils3.js';
 import { d as defineCustomElement$2 } from './form-control-select2.js';
 import { d as defineCustomElement$1 } from './form-control-text2.js';