@justifi/webcomponents 4.7.5 → 4.8.0

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { PHONE_MASKS } from "../../../utils/phone-masks";
+import { PHONE_MASKS } from "../../../utils/form-input-masks";
 class BusinessOwner {
     constructor() {
         this.name = '';
@@ -21,9 +21,11 @@ class BusinessOwner {
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessOwners {
+    get disabledState() {
+        return !!this.formController.getInitialValues().owners && !!this.formController.getInitialValues().owners.length;
+    }
     constructor() {
         this.formController = undefined;
-        this.isEditing = undefined;
         this.errors = [];
         this.owners = [];
         this.inputHandler = this.inputHandler.bind(this);
@@ -64,8 +66,8 @@ export class BusinessOwners {
         const ownersDefaultValue = this.formController.values.getValue().owners || [];
         return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Owners"), h("hr", null), this.owners.map((_owner, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
-            return (h("div", { class: "row gx-2 gy-2 mb-4" }, h("div", { class: "col-12" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: (_a = ownersDefaultValue[index]) === null || _a === void 0 ? void 0 : _a.name, error: (_b = this.errors[index]) === null || _b === void 0 ? void 0 : _b.name, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "title", label: "Title", defaultValue: (_c = ownersDefaultValue[index]) === null || _c === void 0 ? void 0 : _c.title, error: (_d = this.errors[index]) === null || _d === void 0 ? void 0 : _d.title, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.isEditing }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email", defaultValue: (_e = ownersDefaultValue[index]) === null || _e === void 0 ? void 0 : _e.email, error: (_f = this.errors[index]) === null || _f === void 0 ? void 0 : _f.email, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone", defaultValue: (_g = ownersDefaultValue[index]) === null || _g === void 0 ? void 0 : _g.phone, error: (_h = this.errors[index]) === null || _h === void 0 ? void 0 : _h.phone, inputHandler: (name, value) => this.inputHandler(name, value, index), mask: PHONE_MASKS.US, disabled: this.isEditing }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Date of Birth - Day", defaultValue: (_j = ownersDefaultValue[index]) === null || _j === void 0 ? void 0 : _j.dob_day, error: (_k = this.errors[index]) === null || _k === void 0 ? void 0 : _k.dob_day, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "day", disabled: this.isEditing })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Date of Birth - Month", defaultValue: (_l = ownersDefaultValue[index]) === null || _l === void 0 ? void 0 : _l.dob_month, error: (_m = this.errors[index]) === null || _m === void 0 ? void 0 : _m.dob_month, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "month", disabled: this.isEditing })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Date of Birth - Year", defaultValue: (_o = ownersDefaultValue[index]) === null || _o === void 0 ? void 0 : _o.dob_year, error: (_p = this.errors[index]) === null || _p === void 0 ? void 0 : _p.dob_year, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "year", disabled: this.isEditing }))), h("div", { class: "mb-3" }, h("form-control-number", { name: "identification_number", label: "Identification Number", defaultValue: (_q = ownersDefaultValue[index]) === null || _q === void 0 ? void 0 : _q.identification_number, error: (_r = this.errors[index]) === null || _r === void 0 ? void 0 : _r.identification_number, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "grid gap-3" }, h("legend", { class: "mb-3" }, "Owner Address:"), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "line1", label: "Street Address", defaultValue: (_t = (_s = ownersDefaultValue[index]) === null || _s === void 0 ? void 0 : _s.address) === null || _t === void 0 ? void 0 : _t.line1, error: (_v = (_u = this.errors[index]) === null || _u === void 0 ? void 0 : _u.address) === null || _v === void 0 ? void 0 : _v.line1, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "city", label: "City", defaultValue: (_x = (_w = ownersDefaultValue[index]) === null || _w === void 0 ? void 0 : _w.address) === null || _x === void 0 ? void 0 : _x.city, error: (_z = (_y = this.errors[index]) === null || _y === void 0 ? void 0 : _y.address) === null || _z === void 0 ? void 0 : _z.city, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.isEditing }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "state", label: "State", defaultValue: (_1 = (_0 = ownersDefaultValue[index]) === null || _0 === void 0 ? void 0 : _0.address) === null || _1 === void 0 ? void 0 : _1.state, error: (_3 = (_2 = this.errors[index]) === null || _2 === void 0 ? void 0 : _2.address) === null || _3 === void 0 ? void 0 : _3.state, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "col-12 col-md-6" }, h("form-control-number", { name: "postal_code", label: "Postal Code", defaultValue: (_5 = (_4 = ownersDefaultValue[index]) === null || _4 === void 0 ? void 0 : _4.address) === null || _5 === void 0 ? void 0 : _5.postal_code, error: (_7 = (_6 = this.errors[index]) === null || _6 === void 0 ? void 0 : _6.address) === null || _7 === void 0 ? void 0 : _7.postal_code, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.isEditing })))), h("button", { type: "button", class: "btn btn-outline-danger", onClick: event => this.removeOwner(event, index) }, "Remove owner"))));
-        }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("button", { type: "button", class: "btn btn-outline-primary", onClick: event => this.addOwner(event) }, "Add an owner"))))));
+            return (h("div", { class: "row gx-2 gy-2 mb-4" }, h("div", { class: "col-12" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: (_a = ownersDefaultValue[index]) === null || _a === void 0 ? void 0 : _a.name, error: (_b = this.errors[index]) === null || _b === void 0 ? void 0 : _b.name, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "title", label: "Title", defaultValue: (_c = ownersDefaultValue[index]) === null || _c === void 0 ? void 0 : _c.title, error: (_d = this.errors[index]) === null || _d === void 0 ? void 0 : _d.title, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.disabledState }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email", defaultValue: (_e = ownersDefaultValue[index]) === null || _e === void 0 ? void 0 : _e.email, error: (_f = this.errors[index]) === null || _f === void 0 ? void 0 : _f.email, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone", defaultValue: (_g = ownersDefaultValue[index]) === null || _g === void 0 ? void 0 : _g.phone, error: (_h = this.errors[index]) === null || _h === void 0 ? void 0 : _h.phone, inputHandler: (name, value) => this.inputHandler(name, value, index), mask: PHONE_MASKS.US, disabled: this.disabledState }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Date of Birth - Day", defaultValue: (_j = ownersDefaultValue[index]) === null || _j === void 0 ? void 0 : _j.dob_day, error: (_k = this.errors[index]) === null || _k === void 0 ? void 0 : _k.dob_day, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "day", disabled: this.disabledState })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Date of Birth - Month", defaultValue: (_l = ownersDefaultValue[index]) === null || _l === void 0 ? void 0 : _l.dob_month, error: (_m = this.errors[index]) === null || _m === void 0 ? void 0 : _m.dob_month, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "month", disabled: this.disabledState })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Date of Birth - Year", defaultValue: (_o = ownersDefaultValue[index]) === null || _o === void 0 ? void 0 : _o.dob_year, error: (_p = this.errors[index]) === null || _p === void 0 ? void 0 : _p.dob_year, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "year", disabled: this.disabledState }))), h("div", { class: "mb-3" }, h("form-control-number", { name: "identification_number", label: "Identification Number", defaultValue: (_q = ownersDefaultValue[index]) === null || _q === void 0 ? void 0 : _q.identification_number, error: (_r = this.errors[index]) === null || _r === void 0 ? void 0 : _r.identification_number, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "grid gap-3" }, h("legend", { class: "mb-3" }, "Owner Address:"), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "line1", label: "Street Address", defaultValue: (_t = (_s = ownersDefaultValue[index]) === null || _s === void 0 ? void 0 : _s.address) === null || _t === void 0 ? void 0 : _t.line1, error: (_v = (_u = this.errors[index]) === null || _u === void 0 ? void 0 : _u.address) === null || _v === void 0 ? void 0 : _v.line1, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "city", label: "City", defaultValue: (_x = (_w = ownersDefaultValue[index]) === null || _w === void 0 ? void 0 : _w.address) === null || _x === void 0 ? void 0 : _x.city, error: (_z = (_y = this.errors[index]) === null || _y === void 0 ? void 0 : _y.address) === null || _z === void 0 ? void 0 : _z.city, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.disabledState }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "state", label: "State", defaultValue: (_1 = (_0 = ownersDefaultValue[index]) === null || _0 === void 0 ? void 0 : _0.address) === null || _1 === void 0 ? void 0 : _1.state, error: (_3 = (_2 = this.errors[index]) === null || _2 === void 0 ? void 0 : _2.address) === null || _3 === void 0 ? void 0 : _3.state, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "col-12 col-md-6" }, h("form-control-number", { name: "postal_code", label: "Postal Code", defaultValue: (_5 = (_4 = ownersDefaultValue[index]) === null || _4 === void 0 ? void 0 : _4.address) === null || _5 === void 0 ? void 0 : _5.postal_code, error: (_7 = (_6 = this.errors[index]) === null || _6 === void 0 ? void 0 : _6.address) === null || _7 === void 0 ? void 0 : _7.postal_code, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.disabledState })))), h("button", { type: "button", class: "btn btn-outline-danger", onClick: event => this.removeOwner(event, index), disabled: this.disabledState }, "Remove owner"))));
+        }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("button", { type: "button", class: "btn btn-outline-primary", onClick: event => this.addOwner(event), disabled: this.disabledState }, "Add an owner"))))));
     }
     static get is() { return "justifi-business-owners"; }
     static get originalStyleUrls() {
@@ -100,23 +102,6 @@ export class BusinessOwners {
                     "tags": [],
                     "text": ""
                 }
-            },
-            "isEditing": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "is-editing",
-                "reflect": false
             }
         };
     }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { PHONE_MASKS } from "../../../utils/phone-masks";
+import { PHONE_MASKS } from "../../../utils/form-input-masks";
 export class BusinessRepresentative {
     constructor() {
         this.formController = undefined;

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

@@ -1,22 +1,23 @@
 // These props should not be sent to the server
-export const parseForPatching = (data) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    delete data.id;
-    delete data.documents;
-    delete data.bank_accounts;
-    delete data.product_categories;
-    delete data.created_at;
-    delete data.updated_at;
-    (_a = data.legal_address) === null || _a === void 0 ? true : delete _a.id;
-    (_b = data.legal_address) === null || _b === void 0 ? true : delete _b.created_at;
-    (_c = data.legal_address) === null || _c === void 0 ? true : delete _c.updated_at;
-    (_d = data.representative) === null || _d === void 0 ? true : delete _d.id;
-    (_e = data.representative) === null || _e === void 0 ? true : delete _e.documents;
-    (_f = data.representative) === null || _f === void 0 ? true : delete _f.created_at;
-    (_g = data.representative) === null || _g === void 0 ? true : delete _g.updated_at;
-    (_h = data.representative) === null || _h === void 0 ? true : delete _h.address.id;
-    (_j = data.representative) === null || _j === void 0 ? true : delete _j.address.created_at;
-    (_k = data.representative) === null || _k === void 0 ? true : delete _k.address.updated_at;
-    delete data.owners;
-    return data;
+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,7 +1,7 @@
 import * as Yup from "yup";
 const legalAddressSchema = Yup.object({
     line1: Yup.string().required('Enter street address'),
-    line2: Yup.string(),
+    line2: Yup.string().nullable(),
     city: Yup.string().required('Enter city'),
     state: Yup.string().required('Select state'),
     postal_code: Yup.string().required('Enter postal code'),

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

@@ -1,5 +1,4 @@
 import { Host, h } from "@stencil/core";
-import countryOptions from "../../../utils/country-options";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -22,7 +21,7 @@ export class LegalAddressForm {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.city })), h("div", { class: "col-12" }, h("form-control-text", { name: "state", label: "State", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: countryOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.country,
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.city })), h("div", { class: "col-12" }, h("form-control-text", { name: "state", label: "State", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }

package/dist/collection/components/business-form/test/business-form.spec.js

@@ -4,7 +4,7 @@ describe('justifi-business-form', () => {
     let consoleSpy;
     // Initialize the spy in the beforeEach
     beforeEach(() => {
-        consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => { });
+        consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
     });
     // Restore the original function in the afterEach
     afterEach(() => {
@@ -17,26 +17,17 @@ describe('justifi-business-form', () => {
         });
         expect(consoleSpy).toHaveBeenCalledWith('Warning: Missing auth-token. The form will not be functional without it.');
     });
-    it('should disable the submit button if no authToken is provided', async () => {
-        const { root } = await newSpecPage({
+    it('should log a warning if no businessId is provided', async () => {
+        await newSpecPage({
             components: [BusinessForm],
             html: `<justifi-business-form></justifi-business-form>`,
         });
-        const submitButton = root.querySelector('.jfi-submit-button');
-        expect(submitButton).toHaveAttribute('disabled');
-    });
-    it('should not disable the submit button if an authToken is provided', async () => {
-        const { root } = await newSpecPage({
-            components: [BusinessForm],
-            html: `<justifi-business-form auth-token="auth-token"></justifi-business-form>`,
-        });
-        const submitButton = root.querySelector('.jfi-submit-button');
-        expect(submitButton).not.toHaveAttribute('disabled');
+        expect(consoleSpy).toHaveBeenCalledWith('Warning: Missing business-id. The form requires an existing business-id to function.');
     });
     it('should not log a warning if an authToken is provided', async () => {
         await newSpecPage({
             components: [BusinessForm],
-            html: `<justifi-business-form auth-token="some-token"></justifi-business-form>`,
+            html: `<justifi-business-form business-id="biz_123" auth-token="some-token"></justifi-business-form>`,
         });
         expect(consoleSpy).not.toHaveBeenCalled();
     });

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-export const LoadingState = (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading..."))));
+export const LoadingState = () => (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading..."))));
 export const ErrorState = (errorMessage) => (h("main", { part: "detail-empty-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", null, errorMessage)));
-export const DetailSection = ({ sectionTitle }, children) => (h("div", { part: "detail-section", class: "mt-4" }, h("h5", { part: "detail-section-title" }, sectionTitle), h("hr", null), h("div", { class: "d-table gap-2 w-100" }, children)));
+export const DetailSection = (props, children) => (h("div", { part: "detail-section", class: "mt-4" }, h("h5", { part: "detail-section-title" }, props.sectionTitle), h("hr", null), h("div", { class: "d-table gap-2 w-100" }, ...children)));
 export const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold d-table-cell px-2" }, title), h("span", { part: "detail-section-item-data", class: "flex-1 d-table-cell px-2 text-wrap", innerHTML: value }))) : null;
 export const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` }, h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title), h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value)));
 export const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, part: "detail-head", class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: "detail-title" }, title), badge), h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children)));

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

@@ -0,0 +1,2 @@
+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)));

package/dist/collection/components/pagination-menu/test/pagination-menu.spec.js

@@ -0,0 +1,87 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PaginationMenu } from "../pagination-menu";
+import { ExtendedPagingDefaults } from "../../../api";
+const mockExtendedPagingInfo = {
+    has_previous: false,
+    has_next: true,
+    start_cursor: '',
+    end_cursor: '',
+    handleClickNext: jest.fn((after_cursor) => {
+        // Implementation for the mock; could just be empty for basic tests
+        console.log(`Mock handleClickNext called with after_cursor: ${after_cursor}`);
+    }),
+    handleClickPrevious: jest.fn((before_cursor) => {
+        console.log(`Mock handleClickPrevious called with before_cursor: ${before_cursor}`);
+    }),
+    amount: 0
+};
+describe('pagination-menu', () => {
+    it('initializes with default property values', async () => {
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        expect(page.rootInstance.paging).toEqual(ExtendedPagingDefaults);
+        expect(page.rootInstance.params).toEqual({});
+    });
+    it('sets appropriate aria-labels for accessibility', async () => {
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        expect(page.root.shadowRoot.querySelector('nav').getAttribute('aria-label')).toBe('Table pagination');
+    });
+    it('reflects passed properties', async () => {
+        const mockPagingInfo = mockExtendedPagingInfo;
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        page.root.paging = mockPagingInfo;
+        await page.waitForChanges();
+        expect(page.rootInstance.paging).toBe(mockPagingInfo);
+    });
+    it('disables/enables buttons based on paging info', async () => {
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        page.root.paging = {
+            has_previous: false,
+            has_next: true,
+            start_cursor: '',
+            end_cursor: '',
+            handleClickNext: jest.fn(),
+            handleClickPrevious: jest.fn(),
+            amount: 0
+        };
+        await page.waitForChanges();
+        const previousButton = page.root.shadowRoot.querySelector('.page-item:first-child');
+        const nextButton = page.root.shadowRoot.querySelector('.page-item:last-child');
+        // Convert classList to a string for the assertion
+        const previousButtonClasses = previousButton.className;
+        const nextButtonClasses = nextButton.className;
+        expect(previousButtonClasses).toContain('disabled');
+        expect(nextButtonClasses).not.toContain('disabled');
+    });
+    it('emits events on button clicks', async () => {
+        const mockPagingInfo = {
+            has_previous: true,
+            has_next: true,
+            handleClickPrevious: jest.fn(),
+            handleClickNext: jest.fn(),
+        };
+        const page = await newSpecPage({
+            components: [PaginationMenu],
+            html: `<pagination-menu></pagination-menu>`,
+        });
+        page.root.paging = mockPagingInfo;
+        await page.waitForChanges();
+        const previousButton = page.root.shadowRoot.querySelector('.page-item:first-child .page-link');
+        const nextButton = page.root.shadowRoot.querySelector('.page-item:last-child .page-link');
+        previousButton.click();
+        expect(mockPagingInfo.handleClickPrevious).toHaveBeenCalled();
+        nextButton.click();
+        expect(mockPagingInfo.handleClickNext).toHaveBeenCalled();
+    });
+});

package/dist/collection/components/payment-details/get-payment-details.js

@@ -0,0 +1,17 @@
+import { Payment } from "../../api";
+import { getErrorMessage } from "../../api/services/utils";
+export const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    try {
+        const response = await service.fetchPayment(id, authToken);
+        if (!response.error) {
+            onSuccess({ payment: new Payment(response.data) });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            onError(`Error trying to fetch data : ${responseError}`);
+        }
+    }
+    catch (error) {
+        onError(`Error trying to fetch data : ${error}`);
+    }
+};

package/dist/collection/components/payment-details/payment-details-core.js

@@ -0,0 +1,86 @@
+import { Host, h } from "@stencil/core";
+import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
+import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+export class PaymentDetailsCore {
+    constructor() {
+        this.getPaymentDetails = undefined;
+        this.payment = undefined;
+        this.loading = true;
+        this.errorMessage = undefined;
+    }
+    componentWillLoad() {
+        if (this.getPaymentDetails) {
+            this.fetchData();
+        }
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    fetchData() {
+        this.loading = true;
+        this.getPaymentDetails({
+            onSuccess: ({ payment }) => {
+                this.payment = payment;
+                this.loading = false;
+                this.errorMessage = null;
+            },
+            onError: (error) => {
+                this.errorMessage = error;
+                this.loading = false;
+            },
+        });
+    }
+    render() {
+        var _a;
+        return (h(Host, null, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), this.payment.payment_method.card && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.payersName }))), this.payment.payment_method.bank_account && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { title: "Account Owner", value: this.payment.payment_method.payersName }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata })))))));
+    }
+    static get is() { return "payment-details-core"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payment-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payment-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "getPaymentDetails": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "payment": {},
+            "loading": {},
+            "errorMessage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "getPaymentDetails",
+                "methodName": "updateOnPropChange"
+            }];
+    }
+}

package/dist/collection/components/payment-details/payment-details.js

@@ -1,8 +1,7 @@
-import { Host, h } from "@stencil/core";
-import { Api, Payment } from "../../api";
-import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
-import { config } from "../../../config";
+import { h } from "@stencil/core";
+import { PaymentService } from "../../api/services/payment.service";
+import { makeGetPaymentDetails } from "./get-payment-details";
+import { ErrorState } from "../details/utils";
 /**
   * @exportedPart detail-loading-spinner
   * @exportedPart detail-loading-state
@@ -29,61 +28,38 @@ import { config } from "../../../config";
 */
 export class PaymentDetails {
     constructor() {
+        this.paymentService = new PaymentService();
         this.paymentId = undefined;
         this.authToken = undefined;
-        this.payment = undefined;
-        this.loading = true;
-        this.errorMessage = undefined;
+        this.getPaymentDetails = undefined;
+        this.errorMessage = null;
     }
-    updateOnPropChange() {
-        this.fetchData();
+    componentWillLoad() {
+        this.initializeGetPaymentDetails();
     }
-    connectedCallback() {
-        this.fetchData();
+    propChanged() {
+        this.initializeGetPaymentDetails();
     }
-    async fetchData() {
-        if (!this.paymentId || !this.authToken) {
-            this.errorMessage = "Can not fetch any data without a PaymentID and an AuthToken";
-            this.loading = false;
-            return;
+    initializeGetPaymentDetails() {
+        if (this.paymentId && this.authToken) {
+            this.getPaymentDetails = makeGetPaymentDetails({
+                id: this.paymentId,
+                authToken: this.authToken,
+                service: new PaymentService(),
+            });
         }
-        this.loading = true;
-        try {
-            const endpoint = `payments/${this.paymentId}`;
-            const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
-            if (!response.error) {
-                this.payment = new Payment(response.data);
-            }
-            else {
-                const responseError = typeof response.error === 'string' ? response.error : response.error.message;
-                this.errorMessage = `Error trying to fetch data : ${responseError}`;
-                console.error(this.errorMessage);
-            }
-        }
-        catch (error) {
-            this.errorMessage = `Error trying to fetch data : ${error}`;
-            console.error(this.errorMessage);
-        }
-        finally {
-            this.loading = false;
+        else {
+            this.errorMessage = 'Payment ID and Auth Token are required';
         }
     }
     render() {
-        return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), this.payment.payment_method.card && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.payersName }))), this.payment.payment_method.bank_account && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { title: "Account Owner", value: this.payment.payment_method.payersName }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata })))))));
+        if (this.errorMessage) {
+            return ErrorState(this.errorMessage);
+        }
+        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails }));
     }
     static get is() { return "justifi-payment-details"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payment-details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payment-details.css"]
-        };
-    }
     static get properties() {
         return {
             "paymentId": {
@@ -124,18 +100,17 @@ export class PaymentDetails {
     }
     static get states() {
         return {
-            "payment": {},
-            "loading": {},
+            "getPaymentDetails": {},
             "errorMessage": {}
         };
     }
     static get watchers() {
         return [{
                 "propName": "paymentId",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }, {
                 "propName": "authToken",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }];
     }
 }

package/dist/collection/components/payment-details/test/get-payment-details.spec.js

@@ -0,0 +1,64 @@
+import { Payment } from "../../../api";
+import { PaymentService } from "../../../api/services/payment.service";
+import { makeGetPaymentDetails } from "../get-payment-details";
+import mockResponse from "../../../api/mockData/mockPaymentDetailSuccess.json";
+// Mock the PaymentService class
+jest.mock('../../../api/services/payment.service');
+describe('getPaymentDetails', () => {
+    const paymentId = '123';
+    const authToken = '123';
+    let mockServiceInstance;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Create a new instance of the mocked PaymentService
+        mockServiceInstance = new PaymentService();
+        // Explicitly mock fetchPayment as a jest mock function
+        mockServiceInstance.fetchPayment = jest.fn();
+    });
+    it('should call onSuccess with payment on successful fetch', async () => {
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayment to resolve with mockResponse
+        mockServiceInstance.fetchPayment.mockResolvedValue(mockResponse);
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: paymentId,
+            authToken: authToken,
+            service: mockServiceInstance,
+        });
+        await getPaymentDetails({ onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith({
+            payment: expect.any(Payment),
+        });
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('should call onError with an error message on API failure', async () => {
+        const mockError = new Error('Error fetching payment');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayment to reject with mockError
+        mockServiceInstance.fetchPayment.mockRejectedValue(mockError);
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: paymentId,
+            authToken: authToken,
+            service: mockServiceInstance,
+        });
+        await getPaymentDetails({ onSuccess, onError });
+        expect(onSuccess).not.toHaveBeenCalled();
+        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+    });
+    it('should call onError with an error message on API failure', async () => {
+        const mockError = new Error('Error fetching payment');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayment to reject with mockError
+        mockServiceInstance.fetchPayment.mockRejectedValue(mockError);
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: paymentId,
+            authToken: authToken,
+            service: mockServiceInstance,
+        });
+        await getPaymentDetails({ onSuccess, onError });
+        expect(onSuccess).not.toHaveBeenCalled();
+        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+    });
+});