@justifi/webcomponents 4.18.0 → 4.19.0

package/dist/module/owner-form.js

@@ -1,121 +1,24 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-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 './Pagination.js';
-import './Payment.js';
-import './Payout.js';
-import { O as Owner } from './Business.js';
-import { b as parseIdentityInfo } from './payload-parsers.js';
-import { i as identitySchema } from './business-identity-schema.js';
-import { c as config } from './config.js';
-import { L as LoadingSpinner } from './utils3.js';
-import { d as deconstructDate } from './helpers.js';
-import { O as OwnerFormClickActions } from './business-form-types.js';
-import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
-import { d as defineCustomElement$7 } from './form-control-date2.js';
-import { d as defineCustomElement$6 } from './form-control-error-text2.js';
-import { d as defineCustomElement$5 } from './form-control-help-text2.js';
-import { d as defineCustomElement$4 } from './form-control-number-masked2.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 './identity-address-form.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { b as makeGetIdentity, c as makePatchIdentity, d as makePostIdentity } from './payment-provisioning-actions.js';
+import { I as IdentityService } from './business.service.js';
+import { d as defineCustomElement$9 } from './form-control-date2.js';
+import { d as defineCustomElement$8 } from './form-control-error-text2.js';
+import { d as defineCustomElement$7 } from './form-control-help-text2.js';
+import { d as defineCustomElement$6 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$5 } from './form-control-select2.js';
+import { d as defineCustomElement$4 } from './form-control-text2.js';
+import { d as defineCustomElement$3 } from './identity-address-form.js';
+import { d as defineCustomElement$2 } from './owner-form-core2.js';
+import { d as defineCustomElement$1 } from './owner-form-inputs2.js';
 
 const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerForm extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.submitted = createEvent(this, "submitted", 7);
-        this.clickEvent = createEvent(this, "click-event", 7);
-        this.formLoading = createEvent(this, "formLoading", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
-        this.instantiateOwner = (data) => {
-            this.owner = Object.assign({}, new Owner(data));
-            this.formController.setInitialValues(this.owner);
-        };
-        this.fetchData = async () => {
-            if (!this.ownerId) {
-                this.instantiateOwner({});
-                return;
-            }
-            this.isLoading = true;
-            try {
-                const response = await this.api.get(this.identityEndpoint);
-                this.instantiateOwner(response.data);
-            }
-            catch (error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.FETCH_ERROR,
-                    message: error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                    data: error,
-                });
-            }
-            finally {
-                this.isLoading = false;
-            }
-        };
-        this.sendData = async () => {
-            this.isLoading = true;
-            try {
-                if (this.ownerId) {
-                    const payload = parseIdentityInfo(this.formController.values.getValue());
-                    const response = await this.api.patch(this.identityEndpoint, JSON.stringify(payload));
-                    return this.handleResponse(response);
-                }
-                else {
-                    const payload = Object.assign(Object.assign({}, parseIdentityInfo(this.formController.values.getValue())), { business_id: this.businessId });
-                    const response = await this.api.post(this.identityEndpoint, JSON.stringify(payload));
-                    this.ownerId = response.data.id;
-                    return this.handleResponse(response);
-                }
-            }
-            catch (error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.PATCH_ERROR,
-                    message: error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                    data: error,
-                });
-            }
-            finally {
-                this.isLoading = false;
-            }
-        };
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-        this.onAddressFormUpdate = (values) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { address: Object.assign(Object.assign({}, this.formController.values.getValue().address), values) }));
-        };
-        this.onDateOfBirthUpdate = (event) => {
-            if (event.detail === '') {
-                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { dob_day: null, dob_month: null, dob_year: null }));
-            }
-            else {
-                const dob_values = deconstructDate(event.detail);
-                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }));
-            }
-        };
-        this.handleAddOwner = () => {
-            const eventName = this.ownerId ? OwnerFormClickActions.updateOwner : OwnerFormClickActions.addOwner;
-            this.clickEvent.emit({ name: eventName });
-        };
-        this.handleRemoveOwner = () => {
-            this.removeOwner(this.ownerId);
-            this.clickEvent.emit({ name: OwnerFormClickActions.removeOwner });
-        };
-        this.validateAndSubmit = async (event) => {
-            event.preventDefault();
-            const isValid = await this.validate();
-            if (isValid) {
-                this.submit();
-            }
-        };
-        this.isLoading = false;
-        this.formController = undefined;
-        this.errors = {};
-        this.owner = {};
+        this.getOwner = undefined;
+        this.patchOwner = undefined;
+        this.postOwner = undefined;
         this.authToken = undefined;
         this.ownerId = undefined;
         this.businessId = undefined;
@@ -124,77 +27,40 @@ const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFo
         this.newFormOpen = undefined;
         this.ownersLength = undefined;
     }
-    get identityEndpoint() {
-        return this.ownerId ? `entities/identity/${this.ownerId}` : 'entities/identity';
-    }
-    get formTitle() {
-        return this.ownerId ? 'Edit Business Owner' : 'Add Business Owner';
-    }
-    get submitButtonText() {
-        return this.ownerId ? 'Update' : 'Add';
-    }
-    get showRemoveButton() {
-        const blankForm = !this.ownerId && this.newFormOpen;
-        if (this.ownersLength <= 1) {
-            return false;
-        }
-        else {
-            if (blankForm) {
-                return true;
-            }
-            else if (this.ownerId && !this.newFormOpen) {
-                return true;
-            }
-        }
+    async validate() {
+        return this.coreComponent.validate();
     }
-    loadingWatcher() {
-        this.formLoading.emit(this.isLoading);
+    async submit() {
+        return this.coreComponent.submit();
     }
-    handleResponse(response) {
-        this.submitted.emit({ data: response, metadata: { ownerId: this.ownerId } });
-        let errorCode = this.ownerId ? ComponentErrorCodes.PATCH_ERROR : ComponentErrorCodes.POST_ERROR;
-        if (response.error) {
-            this.errorEvent.emit({
-                errorCode: errorCode,
-                message: response.error.message,
-                severity: ComponentErrorSeverity.ERROR,
-                data: response.error,
-            });
-            return false;
-        }
-        else {
-            this.instantiateOwner(response.data);
-            return true;
-        }
+    async validateAndSubmit({ onSuccess }) {
+        this.coreComponent.validateAndSubmit({ onSuccess });
     }
     componentWillLoad() {
-        this.formController = new FormController(identitySchema('owner', this.allowOptionalFields));
-        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
-        if (this.authToken) {
-            this.fetchData();
-        }
+        this.initializeApi();
     }
-    componentDidLoad() {
-        this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
-        this.formController.values.subscribe(values => (this.owner = Object.assign({}, values)));
-    }
-    async validate() {
-        return this.formController.validate();
-    }
-    async submit() {
-        const isValid = await this.validate();
-        if (isValid) {
-            return this.sendData();
+    initializeApi() {
+        if (!this.authToken) {
+            return;
         }
+        this.getOwner = makeGetIdentity({
+            authToken: this.authToken,
+            identityId: this.ownerId,
+            service: new IdentityService()
+        });
+        this.patchOwner = makePatchIdentity({
+            authToken: this.authToken,
+            identityId: this.ownerId,
+            service: new IdentityService()
+        });
+        this.postOwner = makePostIdentity({
+            authToken: this.authToken,
+            service: new IdentityService()
+        });
     }
     render() {
-        const ownerDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: '3a578c58fa8c11c2baf46a95e623414a694c18a2', exportparts: 'label,input,input-invalid' }, h("form", { key: 'ef53b26ec0ed5a41559bf3d4dbf85f8b79c8d8db', onSubmit: this.validateAndSubmit }, h("fieldset", { key: 'f23d280aa2ff12c685b87dcd3dc3dcb34bbf1784' }, h("legend", { key: '3d825e9ec1ad52471e175d78e8f012d1f1de2594', class: 'fw-semibold fs-5' }, this.formTitle), h("br", { key: '38d6a4fb10ddf4be97950e2eb985f0e136d295c4' }), h("div", { key: '3d1ede4480f325cc18ba22458527a8ba60159360', class: 'row gy-3' }, h("div", { key: '5f542713f105488bcf0b83d7f8cbd3702e8fd2da', class: 'col-12 col-md-6' }, h("form-control-text", { key: '4b415df939665d4a2ae29a78b0d6f3036b824233', name: 'name', label: 'Full Name', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'f92a0fdd5fa3288586ddc3815aa8e475b48687e3', class: 'col-12 col-md-4' }, h("form-control-text", { key: 'f3defa8f646072654ff528c4c3f7029a3e94e188', name: 'title', label: 'Title', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'cf0ad4643b076a5611526a30b753b349326fdc5c', class: 'col-12 col-md-6' }, h("form-control-text", { key: '4dff997ae72b053586ab9a89c8cfa253d786c2e6', name: 'email', label: 'Email Address', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'baf2251fe3813beca1943ea3c37090ae31cff04c', class: 'col-12 col-md-6' }, h("form-control-number-masked", { key: '465c8e61db06d11cf7fe85cf49868fc50375ca01', name: 'phone', label: 'Phone Number', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '862ec747120b5b4a05091545bbba8e8e0649a063', class: 'col-12 col-md-4' }, h("form-control-date", { key: '1724de6338244e687135d992df528ffc9286284b', name: 'dob_full', label: 'Birth Date', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '9289f44bcb62e4b7baa36f6d5a88d1f2eab8f9dc', class: 'col-12 col-md-8' }, h("form-control-number-masked", { key: '4e2ac4ee3edc0cce36e97014184029b09be47e80', name: 'identification_number', label: 'SSN', defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: '1373375140a0c071c80764b69c2bacc26c22cf42', class: 'col-12' }, h("justifi-identity-address-form", { key: 'cc01cfc035e53ff6d995f387cd1dce713c5a6199', errors: this.errors.address, defaultValues: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })), h("div", { key: 'f51f56934730f45b5ea8cad8c051c7995a101d01', class: 'col-12 d-flex gap-2' }, h("button", { key: 'e267c7f93110b5b45fea9e170718dd74fd2dba3e', type: 'submit', class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`, onClick: () => this.handleAddOwner(), disabled: this.isLoading }, this.isLoading ? LoadingSpinner() : this.submitButtonText), this.showRemoveButton &&
-            h("button", { key: '61486f9ae64c488abf267c15ddcbc61537b3e433', type: 'button', class: 'btn btn-danger', onClick: () => this.handleRemoveOwner() }, "Remove owner"))), h("hr", { key: 'c599a8b0f3f41f58691cb353f91d3b167bbcab11' })))));
+        return (h("owner-form-core", { key: '332d1e77d01886f13aba09b32b2d5f2199131619', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, ref: ref => this.coreComponent = ref }));
     }
-    static get watchers() { return {
-        "isLoading": ["loadingWatcher"]
-    }; }
 }, [0, "justifi-owner-form", {
         "authToken": [1, "auth-token"],
         "ownerId": [1, "owner-id"],
@@ -203,20 +69,18 @@ const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFo
         "removeOwner": [16],
         "newFormOpen": [4, "new-form-open"],
         "ownersLength": [2, "owners-length"],
-        "isLoading": [32],
-        "formController": [32],
-        "errors": [32],
-        "owner": [32],
+        "getOwner": [32],
+        "patchOwner": [32],
+        "postOwner": [32],
         "validate": [64],
-        "submit": [64]
-    }, undefined, {
-        "isLoading": ["loadingWatcher"]
+        "submit": [64],
+        "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-owner-form", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form"];
+    const components = ["justifi-owner-form", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-owner-form":
             if (!customElements.get(tagName)) {
@@ -225,35 +89,45 @@ function defineCustomElement() {
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
             }
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$6();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$5();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$4();
             }
             break;
         case "justifi-identity-address-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "owner-form-core":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "owner-form-inputs":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "4.18.0";
+const version = "4.19.0";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";

package/dist/module/pagination-menu2.js

@@ -9,13 +9,13 @@ const PaginationMenu = /*@__PURE__*/ proxyCustomElement(class PaginationMenu ext
         this.params = {};
     }
     render() {
-        return (h(Host, { key: 'e0211a01fc44ec29eec8085f31055c060f77f56f', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '191b1603b6cc559d3ef0cf45a37074e41513ea5a', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '775613b2ce03a1bc6a8abf5c918d099e13ac06d2', class: "pagination m-0" }, h("li", { key: 'cf7fef25e80e446688f31f13236c3e71a1378aef', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'bb671bda6ab5f6921d34c7fdf5b33a62bc076154', href: "#", class: "page-link", onClick: (e) => {
+        return (h(Host, { key: '645df5028861aa714a814f908ccace8dcd0986f8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '6cb86ce01c625db9c31204f63258570f8a5d0a0f', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '7ffb5771a1c51553d64735721b937e53c699949d', class: "pagination m-0" }, h("li", { key: 'b439c2f7fe81ccdfa29670a6fc04715681ed5ab3', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'dc59152e834a3076f09304f6fcd0195058ebefec', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'da88de236d134f950a48d9a1d2ebf70742e80788', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: '9ae148f746d5d04fcaf4981b0f1aa3d7fc1b509d', part: "page-button-text" }, "Previous"))), h("li", { key: '7340b9d89574c9c95b15fd50f3444aacdbb4c496', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '827e68669eeb7b83a28185312108adde796a331e', href: "#", class: "page-link", onClick: (e) => {
+            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'fc640fb9ae2ca672bfed89d23c5641cb346c673d', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: 'fb6fcd31ebd4d194b37f53a071537133b8c4d369', part: "page-button-text" }, "Previous"))), h("li", { key: 'b10e12ec7bc4a89cd897e868ec7b303c62599cd3', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '51f91eb7cfef91dcbcfd9f11522213308bf717b5', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: '29ce5f0e9ae4b19d3116ac6bd883c52168c5fbb8', part: "page-button-text" }, "Next"), h("span", { key: '2d58cffc46031c9db1ad7c4b061730bc083dded8', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
+            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: 'd89f50a44dead676d19b8862a92ba636947fe6b1', part: "page-button-text" }, "Next"), h("span", { key: 'f5dd2ddddef86931d935df56101f1fed8118e4f6', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
     }
 }, [0, "pagination-menu", {
         "paging": [16],

package/dist/module/payment-details-core2.js

@@ -43,14 +43,14 @@ const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetails
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'b0a4e021ebaf00cf1750c7d40510aa9754bc622b' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '5b7858536120f8a1d3016f1f110f51e6b8605f3e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '93db7fd2d30fb1ef0099e58fd6d90e703f921c44', 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, { key: '6c1b97d494b92618092710986ff6cbfb4c183cad', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '1ef1fe7899d47959bb3ce8dbe511222cc69185ef', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'd0a12d9abfc6d4c71249af65cef35902554cc3a7', title: "ID", value: this.payment.id })), h("div", { key: 'b12d205fb50d310525045261967a383e93458cb3', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'cdcae0f279389849946017963762c9a1294204ee', sectionTitle: "Details" }), h("div", { key: '91693665801878a7b87729412a10469dac21130d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'c58427d3a5543caa9f83fe62dca71612c92a200e', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'd6a0b3df90839ad1fdd34058f3582482a9eb1b20', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '6c08a4a3bcc7d6bf726959b451e3231598d7e920', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '4d2d8d897cd0d5a4be06b44741cf85366eebe9af', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'b3df303d6c12b1327b3f20245c3c50657eb422f8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6a535b4f0c91fb37077e09912e4fa3c1d333db48', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '982514de79780e97b0aa3f120d7fcc11b51301ac', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '967e82d6fe2bcf55110e6881811d38af9ea63c17', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'bee37b7e5b7c22f0ec596104097c1408284c5ac1', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'da950a7706cf51aa72eeff3faedfb00fa824075f', sectionTitle: "Payment Method" }),
-            h("div", { key: 'c8ab64e8f0021fcfe4ce5e7a9bac9d867e3aa650', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '70ebccad09e67f53b13673d1f2d19c6438053ac5', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '1cbdb8b281b70a600568d7b82499084695c6a48a', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'd9696130b92a28560d2a437996d53d3ba6df39ec', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'e93b235819d5b6386ea6f6283f21da7442fd4661', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '9ba28b4b099b775cc4f77cff13c74295b12fdfd4', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: 'aaaea4076938af5a74197256dba1093265f0e2d6' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '12f06fa05915380403e244cbed053d0c04bfa1d4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '4d496def6abfc728e6f184fb0729ac648fb2deaf', 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, { key: '78dcff13206646d594bdc80f6297d45dc9932694', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'dfa0de667ebd28efd217b6bdf548b9b1b728b57e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b449b180034f28504007a9c2fb0598607dc00efb', title: "ID", value: this.payment.id })), h("div", { key: '62af84e244e38b24b32f791d13f1b21b49942597', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0ddb0366b4ab737c7b08a37764b8ce2f7ec4a1e9', sectionTitle: "Details" }), h("div", { key: 'cb699194db16cb8608834779f560e882f6f9da7c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '3b6eb4a8b782668951bba90be3b5d522f3f7c69b', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7a59ab0b12a263c38c40a98acbff6492d370b28b', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'a9eaa5d1959425205c144dc2aa7c7fad77014290', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'd70c3a4bf48c9c69625d5f27f1095f9b0744a71e', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '28f526b1adcd475c2ae88a8bf09ae4aea7935df6', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '700f51d787f20f575e3e11aa72a8da29a9587c2a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ea72ecc9c2f5055d4b0f6b37cd16cb318f9a797c', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9d66af2c0c0baef4e8b7b021daf0b4d6adb267d2', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '3f21501c1e08feeee1e7427a42faf1c5d1d9c84d', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'b7767b93e090c0195aca6c99b66b48d61b6134b3', sectionTitle: "Payment Method" }),
+            h("div", { key: 'a363c7a7e69932a8ffeddb5e0d53f7df13119a9a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'fb0e1f64fcec23e513590b3048593565685d8400', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'bc181b1b94039e1aad341a8e563ba923976c806b', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '88b21dd2368b88232cd0f464c381d4423fe3c774', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '040fd71315ead633f9c89e9a9dad906889759d77', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '35ebc74de2c5c8fafd95fc5b15ff4f2ca85220cc', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '4f046825e2eeef87ddb614b6eca623fca187b0d3', sectionTitle: "Payment Method" }),
-            h("div", { key: 'b8a01fdd5596adafa252b4fd67df2e30c2e34990', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcd3c8418ebd465812c1dd1fb9b5559ce79e2855', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '86246e11c8c494beb3f2571650f8d78e33b8dbae', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'd3cd7eec7d55ae90d0fd4bc55fad73add0d6d88c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '43d7a0b7e37172da32aff94fe01877a32491fba8', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'd59695a94c44c10615020313be585c0e69374e1c', sectionTitle: 'Metadata' }), h("div", { key: '984dd0d2d0bd5c816dd7098b4e8eebf19e2ebf70', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b2d8cf824ae9aba9d714e688fddbf14a8fdd92d6', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: 'f10eef0b4e4067fb78dbff16719a6f266f4e6bab', sectionTitle: "Payment Method" }),
+            h("div", { key: '6c1ef713b5dcabba5b516f3cbbd088d098873303', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8880fd0fb2b16ee6f177aba15d6f4485c95af252', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'baa70304d2972f69ce8a5d077a076b16f986745b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'dcb63b9258bea698bf2d165c611dfa05cb320f30', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '806696c15aa5ef242c230d9c9aea642ddfdfd93d', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '83289d8f2cf57a624678260555f00af4ea96a566', sectionTitle: 'Metadata' }), h("div", { key: '02e248b962e0c06f4d83bae75a5759b234fea36b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5d81879c7815102219ed010dab9f573ad6b7985d', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]

package/dist/module/payment-method-form.js

@@ -1612,6 +1612,7 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class PaymentMethodFo
             const eventTypeMessage = MessageEventType[this.paymentMethodFormType];
             if (eventType === eventTypeMessage.ready) {
                 this.paymentMethodFormReady.emit(data);
+                this.sendStyleOverrides();
             }
             else if (eventType === eventTypeMessage.tokenize) {
                 this.paymentMethodFormTokenized.emit(data);
@@ -1669,14 +1670,13 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class PaymentMethodFo
         (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
     }
     render() {
-        return (h(Host, { key: '91a69ce3f918c98248d6bb5df6dc5ec0dffe3c26' }, h("iframe", { key: '99c06be5a78a3849e687f7f95f8fe3382cc2c4cd', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+        return (h(Host, { key: '10987c92745fbff8bb85367db69b76e2bc786c88' }, h("iframe", { key: '0622dd0201a04a3c918fd3d175d2a29f24609759', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, onLoad: () => {
                 iFrameResize({
                     scrollbars: false,
                 }, this.iframeElement);
-                this.sendStyleOverrides();
             } })));
     }
     static get style() { return JustifiPaymentMethodFormStyle0; }

package/dist/module/payment-method-options.js

@@ -78,7 +78,7 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b432005ef4b36d46f54ed57f22f070d7cbfffe11' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '86e309b90ab00f530dd803b00e5aab511f92300f' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;

package/dist/module/payment-method-selector.js

@@ -22,7 +22,7 @@ const PaymentMethodSelector = /*@__PURE__*/ proxyCustomElement(class PaymentMeth
         this.paymentMethodSelected.emit(event.target.value);
     }
     render() {
-        return (h("div", { key: '1076a0e9d658245823ace79acde858bdaec85e65', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
+        return (h("div", { key: 'a0cd592094f7f69955469de84addde1d4bc5af4d', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
     }
     static get style() { return JustifiPaymentMethodSelectorStyle0; }
 }, [0, "justifi-payment-method-selector", {

package/dist/module/payment-provisioning-actions.js

@@ -0,0 +1,178 @@
+import { a as ComponentErrorSeverity } from './ComponentError.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
+
+// Entity API Actions
+const makeGetBusiness = ({ authToken, businessId, service }) => async ({ onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.fetchBusiness(businessId, authToken);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+const makePatchBusiness = ({ authToken, businessId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.patchBusiness(authToken, businessId, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+const makePostProvisioning = ({ authToken, businessId, product, service }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.postProvisioning(authToken, businessId, product);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+// Identity API Actions
+const makeGetIdentity = ({ authToken, identityId, service }) => async ({ onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.fetchIdentity(identityId, authToken);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+const makePatchIdentity = ({ authToken, identityId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.patchIdentity(authToken, identityId, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+const makePostIdentity = ({ authToken, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.postIdentity(authToken, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+
+export { makePatchBusiness as a, makeGetIdentity as b, makePatchIdentity as c, makePostIdentity as d, makePostProvisioning as e, makeGetBusiness as m };