@justifi/webcomponents 6.11.0 → 6.12.0

package/dist/module/billing-form-full2.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { f as fullBillingSchema } from './billing-form-schema.js';
+import { w as billingForm } from './parts.js';
+import { H as Header3 } from './header-3.js';
+import './justifi-details2.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
+import { S as StateOptions } from './Business.js';
+import { F as FormController } from './form.js';
+import { c as checkoutStore, o as onChange } from './checkout.store.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const BillingFormFull = /*@__PURE__*/ proxyCustomElement(class BillingFormFull extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new FormController(fullBillingSchema());
+        const fields = checkoutStore.billingFormFields;
+        if (fields && Object.keys(fields).some((k) => fields[k])) {
+            this.formController.setInitialValues(fields);
+        }
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    componentDidLoad() {
+        this.unsubscribeFromStore = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribeFromStore) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async validate() {
+        const isValid = await this.formController.validate();
+        const errors = this.formController.errors.getValue();
+        return { isValid, errors };
+    }
+    render() {
+        if (!this.formController) {
+            return null;
+        }
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
+    }
+}, [256, "billing-form-full", {
+        "legend": [1025],
+        "formController": [32],
+        "billingInfo": [32],
+        "errors": [32],
+        "getValues": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["billing-form-full", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "billing-form-full":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BillingFormFull);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BillingFormFull as B, defineCustomElement as d };

package/dist/module/billing-form-schema.js

@@ -1,5 +1,5 @@
 import { c as create$3 } from './form.js';
-import { p as postalValidation, s as stateValidation, c as cityValidation, l as lineTwoValidation, a as lineOneValidation, i as identityNameValidation } from './schema-validations.js';
+import { a as postalValidation, s as stateValidation, c as cityValidation, l as lineTwoValidation, b as lineOneValidation, i as identityNameValidation } from './schema-validations.js';
 
 const fullBillingSchema = () => create$3({
     name: identityNameValidation.required('Enter full name'),

package/dist/module/billing-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BillingForm extends Components.BillingForm, HTMLElement {}
+export const BillingForm: {
+    prototype: BillingForm;
+    new (): BillingForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/billing-form.js

@@ -1,104 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { P as PAYMENT_METHODS } from './ModularCheckout.js';
-import { d as defineCustomElement$7 } from './custom-popper2.js';
-import { d as defineCustomElement$6 } from './form-control-select2.js';
-import { d as defineCustomElement$5 } from './form-control-text2.js';
-import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$3 } from './bank-account-billing-form-simple.js';
-import { d as defineCustomElement$2 } from './billing-form-full.js';
-import { d as defineCustomElement$1 } from './card-billing-form-simple.js';
+import { B as BillingForm$1, d as defineCustomElement$1 } from './billing-form2.js';
 
-const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get showSimpleCardBillingForm() {
-        return this.paymentMethodType === PAYMENT_METHODS.NEW_CARD && this.hideCardBillingForm;
-    }
-    get showSimpleBankAccountBillingForm() {
-        return this.paymentMethodType === PAYMENT_METHODS.NEW_BANK_ACCOUNT && this.hideBankAccountBillingForm;
-    }
-    async getValues() {
-        var _a;
-        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.getValues();
-    }
-    async fill(fields) {
-        var _a;
-        (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
-    }
-    async validate() {
-        var _a;
-        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.validate();
-    }
-    render() {
-        if (this.showSimpleBankAccountBillingForm) {
-            return (h(Host, null, h("justifi-bank-account-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
-        }
-        if (this.showSimpleCardBillingForm) {
-            return (h(Host, null, h("justifi-card-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
-        }
-        return (h(Host, null, h("justifi-billing-form-full", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
-    }
-}, [256, "justifi-billing-form", {
-        "legend": [1025],
-        "hideCardBillingForm": [4, "hide-card-billing-form"],
-        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
-        "paymentMethodType": [1, "payment-method-type"],
-        "getValues": [64],
-        "fill": [64],
-        "validate": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-billing-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-bank-account-billing-form-simple", "justifi-billing-form-full", "justifi-card-billing-form-simple"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-billing-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BillingForm);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "justifi-bank-account-billing-form-simple":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "justifi-billing-form-full":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "justifi-card-billing-form-simple":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+const BillingForm = BillingForm$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { BillingForm as B, defineCustomElement as d };
+export { BillingForm, defineCustomElement };

package/dist/module/billing-form2.js

@@ -0,0 +1,99 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { P as PAYMENT_METHODS } from './ModularCheckout.js';
+import { d as defineCustomElement$7 } from './bank-account-billing-form-simple2.js';
+import { d as defineCustomElement$6 } from './billing-form-full2.js';
+import { d as defineCustomElement$5 } from './card-billing-form-simple2.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    get showSimpleCardBillingForm() {
+        return this.paymentMethodType === PAYMENT_METHODS.NEW_CARD && this.hideCardBillingForm;
+    }
+    get showSimpleBankAccountBillingForm() {
+        return this.paymentMethodType === PAYMENT_METHODS.NEW_BANK_ACCOUNT && this.hideBankAccountBillingForm;
+    }
+    async getValues() {
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.getValues();
+    }
+    async validate() {
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.validate();
+    }
+    render() {
+        if (this.showSimpleBankAccountBillingForm) {
+            return (h(Host, null, h("bank-account-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        }
+        if (this.showSimpleCardBillingForm) {
+            return (h(Host, null, h("card-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        }
+        return (h(Host, null, h("billing-form-full", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+    }
+}, [256, "billing-form", {
+        "legend": [1025],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "paymentMethodType": [1, "payment-method-type"],
+        "getValues": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["billing-form", "bank-account-billing-form-simple", "billing-form-full", "card-billing-form-simple", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "billing-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BillingForm);
+            }
+            break;
+        case "bank-account-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "billing-form-full":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "card-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BillingForm as B, defineCustomElement as d };

package/dist/module/business-additional-questions-schema.js

@@ -1,5 +1,5 @@
 import { c as create$3 } from './form.js';
-import { o as otherPaymentDetailsValidation, w as whenServiceReceivedValidation, r as revenueValidation, b as paymentVolumeValidation } from './schema-validations.js';
+import { o as otherPaymentDetailsValidation, w as whenServiceReceivedValidation, r as revenueValidation, p as paymentVolumeValidation } from './schema-validations.js';
 
 const additionalQuestionsSchema = (allowOptionalFields) => {
     const schema = create$3({

package/dist/module/business-address-schema.js

@@ -1,5 +1,5 @@
 import { c as create$3, a as create$6 } from './form.js';
-import { c as cityValidation, l as lineTwoValidation, a as lineOneValidation, z as makePostalValidation } from './schema-validations.js';
+import { c as cityValidation, l as lineTwoValidation, b as lineOneValidation, z as makePostalValidation } from './schema-validations.js';
 import { a as CountryCode } from './Business.js';
 
 // Internal USA schemas
@@ -41,4 +41,4 @@ const addressSchemaByCountry = {
     [CountryCode.CAN]: addressSchemaCAN,
 };
 
-export { addressSchemaUSA as a, addressSchemaCAN as b, addressSchemaByCountry as c };
+export { addressSchemaCAN as a, addressSchemaUSA as b, addressSchemaByCountry as c };

package/dist/module/business-bank-account-form-step.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BusinessBankAccountFormStep extends Components.BusinessBankAccountFormStep, HTMLElement {}
+export const BusinessBankAccountFormStep: {
+    prototype: BusinessBankAccountFormStep;
+    new (): BusinessBankAccountFormStep;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;