@justifi/webcomponents 4.19.1-rc → 4.19.1-rc-4

package/dist/webcomponents/p-7a70ff09.entry.js

@@ -0,0 +1,133 @@
+import { r as registerInstance, c as createEvent, h } from './p-fad19d75.js';
+import './p-56f6ce4c.js';
+import { a as PaymentMethodTypes } from './p-df21aaad.js';
+import './p-e3fab0e2.js';
+import { l as loadFontsOnParent } from './p-83125497.js';
+import { a as ComponentErrorCodes, C as ComponentErrorSeverity } from './p-14c91ffd.js';
+import { g as getErrorMessage } from './p-8115b2f4.js';
+import { J as JustifiAnalytics } from './p-9282eab8.js';
+import { B as Button } from './p-9c9c7dac.js';
+import { S as StyledHost } from './p-ba4bae6f.js';
+import './p-492588bf.js';
+import './p-29c0b182.js';
+
+const paymentFormCss = ":host{display:block}justifi-payment-method-form{display:block;margin-left:calc(var(--jfi-layout-padding) * -1);margin-right:calc(var(--jfi-layout-padding) * -1)}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){font-family:var(--jfi-layout-font-family);background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}.jfi-submit-button{font-family:var(--jfi-layout-font-family);color:var(--jfi-submit-button-color);background-color:var(--jfi-submit-button-background-color);border-color:var(--jfi-submit-button-border-color);padding:var(--jfi-submit-button-padding);font-size:var(--jfi-submit-button-font-size);border-radius:var(--jfi-submit-button-border-radius);width:var(--jfi-submit-button-width);box-shadow:var(--jfi-submit-button-box-shadow)}.jfi-submit-button:hover{color:var(--jfi-submit-button-color-hover);background-color:var(--jfi-submit-button-background-color-hover);border-color:var(--jfi-submit-button-border-color-hover)}.jfi-submit-button:focus{color:var(--jfi-submit-button-color-focus);background-color:var(--jfi-submit-button-background-color-focus);border-color:var(--jfi-submit-button-border-color-focus)}.btn.jfi-submit-button:active{color:var(--jfi-submit-button-color-active);background-color:var(--jfi-submit-button-background-color-active);border-color:var(--jfi-submit-button-border-color-active)}.btn.jfi-submit-button-loading{min-width:75px;color:var(--jfi-submit-button-color-loading);background-color:var(--jfi-submit-button-background-color-loading);border-color:var(--jfi-submit-button-border-color-loading)}.btn.jfi-submit-button-loading .spinner-border{border-top-color:var(--jfi-submit-button-color-loading);border-bottom-color:var(--jfi-submit-button-color-loading);border-left-color:var(--jfi-submit-button-color-loading)}";
+const JustifiPaymentFormStyle0 = paymentFormCss;
+
+const PaymentForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.submitted = createEvent(this, "submitted", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.bankAccount = undefined;
+        this.card = undefined;
+        this.email = undefined;
+        this.clientId = undefined;
+        this.authToken = undefined;
+        this.accountId = undefined;
+        this.submitButtonText = undefined;
+        this.submitButtonEnabled = true;
+        this.isLoading = false;
+        this.selectedPaymentMethodType = PaymentMethodTypes.card;
+    }
+    componentWillLoad() {
+        this.analytics = new JustifiAnalytics(this);
+        if (!this.validateProps()) {
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: 'clientId or authToken is required',
+                severity: ComponentErrorSeverity.ERROR
+            });
+            this.submitButtonEnabled = false;
+        }
+    }
+    connectedCallback() {
+        loadFontsOnParent();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    async fillBillingForm(fields) {
+        this.billingFormRef.fill(fields);
+    }
+    async enableSubmitButton() {
+        this.submitButtonEnabled = true;
+    }
+    async disableSubmitButton() {
+        this.submitButtonEnabled = false;
+    }
+    showPaymentMethodTypeSelector() {
+        return this.card && this.bankAccount;
+    }
+    getSelectedPaymentMethodType() {
+        if (this.showPaymentMethodTypeSelector()) {
+            return this.selectedPaymentMethodType;
+        }
+        else if (this.card) {
+            return PaymentMethodTypes.card;
+        }
+        else if (this.bankAccount) {
+            return PaymentMethodTypes.bankAccount;
+        }
+        else {
+            return PaymentMethodTypes.card;
+        }
+    }
+    paymentMethodSelectedHandler(event) {
+        const paymentMethodType = event.detail;
+        this.selectedPaymentMethodType = paymentMethodType;
+    }
+    validateProps() {
+        return !!(this.clientId || this.authToken);
+    }
+    getToken() {
+        return this.authToken || this.clientId;
+    }
+    async submit(event) {
+        event.preventDefault();
+        if (!this.paymentMethodFormRef || !this.billingFormRef)
+            return;
+        const billingFormValidation = await this.billingFormRef.validate();
+        const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+        if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
+            return;
+        this.isLoading = true;
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
+            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.getToken(), paymentMethodData, this.accountId);
+            if (tokenizeResponse.error) {
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: tokenizeResponse.error.message,
+                    severity: ComponentErrorSeverity.ERROR
+                });
+            }
+            this.submitted.emit(tokenizeResponse);
+        }
+        catch (error) {
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.UNKNOWN_ERROR,
+                message: getErrorMessage(error),
+                severity: ComponentErrorSeverity.ERROR
+            });
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    render() {
+        return (h(StyledHost, { key: '8cb6e3903a0045fbffed5f17dc29aacc6b57ad7f' }, h("form", { key: '4e8f00c3d29c0db0bc99fd79da46abe7c40e3e30', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '344a1356f6f482493a35015c32f8e9a9b4cc8a80', class: "col-12" }, h("justifi-payment-method-selector", { key: '36b9dd7a9bc8336b4bef0d12f56c811effbc0a0b', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '225a260f817f9dd02a7f0a5b25562179ab80f7de', class: "col-12" }, h("justifi-payment-method-form", { key: '52e2bf20b265cc96ab556571a323370cc27ac278', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: undefined, ref: el => {
+                if (el) {
+                    this.paymentMethodFormRef = el;
+                }
+            } })), h("div", { key: '433a8ac42c0eec9180e37da222da1dbb1112e48e', class: "col-12" }, h("justifi-billing-form", { key: '4f24f1c8b4083e2d9e5bb2272d32d20bb5cc225d', legend: "Billing Info", ref: el => {
+                if (el) {
+                    this.billingFormRef = el;
+                }
+            } })), h("slot", { key: '9397ae7fdd2677cd61a425fcf5818ae14fabbed0', name: 'insurance' }), h("div", { key: 'db9131f6f35165e69d3b59da7fa25b95f1e46168', class: "col-12" }, h(Button, { key: 'c280836cf6445a7132ff9202a09b6fdac8e29f77', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
+    }
+};
+PaymentForm.style = JustifiPaymentFormStyle0;
+
+export { PaymentForm as justifi_payment_form };

package/dist/webcomponents/p-7bbf73bd.entry.js

@@ -0,0 +1,117 @@
+import { r as registerInstance, c as createEvent, h } from './p-fad19d75.js';
+import { c as create$3, F as FormController } from './p-2eab3c90.js';
+import { b as businessCoreInfoSchema, a as additionalQuestionsSchema } from './p-3fd13ca3.js';
+import { a as addressSchema, i as identitySchema, p as parseBusiness } from './p-85fc69e5.js';
+import { A as Api } from './p-29c0b182.js';
+import './p-56f6ce4c.js';
+import './p-df21aaad.js';
+import './p-e3fab0e2.js';
+import { B as BusinessFormServerErrors, a as BusinessFormClickActions } from './p-d89bad72.js';
+import { B as Business } from './p-af244664.js';
+import { J as JustifiAnalytics } from './p-9282eab8.js';
+import { S as StyledHost } from './p-ba4bae6f.js';
+import './p-89887332.js';
+import './p-6078a370.js';
+import './p-ba5fae28.js';
+import './p-1ff8810b.js';
+import './p-492588bf.js';
+
+const businessFormSchema = create$3(Object.assign(Object.assign({}, businessCoreInfoSchema().fields), { legal_address: addressSchema(), additional_questions: additionalQuestionsSchema(), representative: identitySchema('representative') }));
+
+const businessFormCss = ":host{display:block}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){font-family:var(--jfi-layout-font-family);background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-checkbox){font-family:var(--jfi-layout-font-family);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);line-height:var(--jfi-form-control-line-height)}*::part(input-checkbox):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-checkbox-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-checkbox-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}.jfi-submit-button{font-family:var(--jfi-layout-font-family);color:var(--jfi-submit-button-color);background-color:var(--jfi-submit-button-background-color);border-color:var(--jfi-submit-button-border-color);padding:var(--jfi-submit-button-padding);font-size:var(--jfi-submit-button-font-size);border-radius:var(--jfi-submit-button-border-radius);width:var(--jfi-submit-button-width);box-shadow:var(--jfi-submit-button-box-shadow)}.jfi-submit-button:hover{color:var(--jfi-submit-button-color-hover);background-color:var(--jfi-submit-button-background-color-hover);border-color:var(--jfi-submit-button-border-color-hover)}.jfi-submit-button:focus{color:var(--jfi-submit-button-color-focus);background-color:var(--jfi-submit-button-background-color-focus);border-color:var(--jfi-submit-button-border-color-focus)}.btn.jfi-submit-button:active{color:var(--jfi-submit-button-color-active);background-color:var(--jfi-submit-button-background-color-active);border-color:var(--jfi-submit-button-border-color-active)}.btn.jfi-submit-button-loading{min-width:75px;color:var(--jfi-submit-button-color-loading);background-color:var(--jfi-submit-button-background-color-loading);border-color:var(--jfi-submit-button-border-color-loading)}.btn.jfi-submit-button-loading .spinner-border{border-top-color:var(--jfi-submit-button-color-loading);border-bottom-color:var(--jfi-submit-button-color-loading);border-left-color:var(--jfi-submit-button-color-loading)}";
+const JustifiBusinessFormStyle0 = businessFormCss;
+
+const BusinessForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.submitted = createEvent(this, "submitted", 7);
+        this.clickEventNew = createEvent(this, "click-event", 7);
+        this.clickEventOld = createEvent(this, "clickEvent", 7);
+        this.instantiateBusiness = (data) => {
+            const business = new Business(data);
+            this.formController.setInitialValues(Object.assign({}, business));
+        };
+        this.sendData = async () => {
+            this.isLoading = true;
+            try {
+                const values = this.formController.values.getValue();
+                const initialValues = this.formController.getInitialValues();
+                const payload = parseBusiness(values, initialValues);
+                const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
+                this.handleReponse(response);
+            }
+            catch (error) {
+                this.errorMessage = BusinessFormServerErrors.patchData;
+            }
+            finally {
+                this.isLoading = false;
+            }
+        };
+        this.fetchData = async () => {
+            this.isLoading = true;
+            try {
+                const response = await this.api.get(this.businessEndpoint);
+                this.instantiateBusiness(response.data);
+            }
+            catch (error) {
+                this.errorMessage = BusinessFormServerErrors.fetchData;
+            }
+            finally {
+                this.isLoading = false;
+            }
+        };
+        this.validateAndSubmit = (event) => {
+            event.preventDefault();
+            this.formController.validateAndSubmit(this.sendData);
+        };
+        this.authToken = undefined;
+        this.businessId = undefined;
+        this.hideErrors = false;
+        this.formTitle = 'Business Information';
+        this.removeTitle = false;
+        this.isLoading = false;
+        this.errorMessage = undefined;
+    }
+    componentWillLoad() {
+        this.analytics = new JustifiAnalytics(this);
+        const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
+        const missingBusinessIdMessage = 'Warning: Missing business-id. The form requires an existing business-id to function.';
+        if (!this.authToken)
+            console.error(missingAuthTokenMessage);
+        if (!this.businessId)
+            console.error(missingBusinessIdMessage);
+        this.formController = new FormController(businessFormSchema);
+        this.api = Api({ authToken: this.authToken, apiOrigin: undefined });
+        this.fetchData();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    fireClickEvents(event) {
+        console.warn('`clickEvent` is deprecated and will be removed in the next major release. Please use `click-event` instead.');
+        this.clickEventNew.emit(event);
+        this.clickEventOld.emit(event);
+    }
+    get title() {
+        return this.removeTitle ? '' : this.formTitle;
+    }
+    get disabledState() {
+        return this.isLoading;
+    }
+    get businessEndpoint() {
+        return `entities/business/${this.businessId}`;
+    }
+    handleReponse(response) {
+        if (response.error) {
+            this.errorMessage = BusinessFormServerErrors.patchData;
+        }
+        this.submitted.emit({ data: response });
+        this.instantiateBusiness(response.data);
+    }
+    render() {
+        return (h(StyledHost, { key: '8fb79d577c13246fcf3ec1ee8460713fee07d01a', exportparts: "label,input,input-invalid" }, h("form", { key: '1fe23a8cc8714aee257b6c73c6b7b096d684ea1c', onSubmit: this.validateAndSubmit }, h("div", { key: 'e501f6963ed5bfd9eb80f67df13108289db6eba7', class: "row gap-3" }, h("h1", { key: 'f81f22704bda1480c467b872cd3fd309505b0e94' }, this.title), h("form-alert", { key: '15b2ff75d4db6447bfd1892542e8e972ede0ac7e', text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { key: 'fd6a375fd187426940df3f28262be7aec3fedbe5', class: "col-12 mb-4" }, h("justifi-business-core-info", { key: 'd16818a2124cb04dd5a5e84ea40639991fb04a80', formController: this.formController })), h("div", { key: 'd48b04718cf938484cf65cc956bf798f44ed17a7', class: "col-12 mb-4" }, h("justifi-legal-address-form", { key: '3a2bc6babfe8a0a265b2a7f9e7bea1abebd3eb43', formController: this.formController })), h("div", { key: '5c4d5d1fa1e2aba32f42c2bb9e97c0d796ecf709', class: "col-12 mb-4" }, h("justifi-additional-questions", { key: 'c888fb627380d05302cb106c5642e39b1f2652fa', formController: this.formController })), h("div", { key: '623e94d84976cfe29f4501a781c750d1bb537605', class: "col-12 mb-4" }, h("justifi-business-representative", { key: '594c893c0976b58a309679a031f6f1c787e66f48', formController: this.formController })), h("div", { key: '9fbc36ed183b1ebf171da14276092195c7aaf3a9', class: "col-12 d-flex flex-row-reverse" }, h("button", { key: 'a60da6fdda5193d3c41c589b00b040c05ae425ac', type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.fireClickEvents({ name: BusinessFormClickActions.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
+    }
+};
+BusinessForm.style = JustifiBusinessFormStyle0;
+
+export { BusinessForm as justifi_business_form };

package/dist/webcomponents/p-7d85af5c.js

@@ -1 +1,16 @@
-import{d as b}from"./p-1ff8810b.js";const t=(b,t)=>{b.setValues(Object.assign(Object.assign({},b.values.getValue()),t))},e=(b,e)=>{t(b,{address:Object.assign(Object.assign({},b.values.getValue().address),e)})},o=(e,o)=>{const s=b(e.detail);t(o,Object.assign(Object.assign({},o.values.getValue()),{dob_day:s.dob_day,dob_month:s.dob_month,dob_year:s.dob_year}))};export{e as a,o as b,t as u}
+import { d as deconstructDate } from './p-1ff8810b.js';
+
+const updateFormValues = (formController, newValues) => {
+    formController.setValues(Object.assign(Object.assign({}, formController.values.getValue()), newValues));
+};
+const updateAddressFormValues = (formController, newValues) => {
+    updateFormValues(formController, {
+        address: Object.assign(Object.assign({}, formController.values.getValue().address), newValues),
+    });
+};
+const updateDateOfBirthFormValues = (event, formController) => {
+    const dob_values = deconstructDate(event.detail);
+    updateFormValues(formController, Object.assign(Object.assign({}, formController.values.getValue()), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }));
+};
+
+export { updateAddressFormValues as a, updateDateOfBirthFormValues as b, updateFormValues as u };

package/dist/webcomponents/p-800d31fe.entry.js

@@ -0,0 +1,162 @@
+import { h, r as registerInstance, c as createEvent } from './p-fad19d75.js';
+import { p as pagingDefaults } from './p-56f6ce4c.js';
+import './p-df21aaad.js';
+import { a as PayoutStatuses, b as PayoutStatusesSafeNames } from './p-e3fab0e2.js';
+import { b as formatDate, c as formatTime, f as formatCurrency } from './p-83125497.js';
+import { a as ComponentErrorCodes, C as ComponentErrorSeverity } from './p-14c91ffd.js';
+import { t as tableExportedParts } from './p-2b6c9c4f.js';
+import { S as StyledHost } from './p-ba4bae6f.js';
+import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './p-e333620e.js';
+
+const DownloadIcon = (props) => (h("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' }, props),
+    h("path", { d: 'M12 15.5l-5-5 1.41-1.41L12 12.67l3.59-3.58L17 10.5l-5 5z' }),
+    h("path", { d: 'M11 4h2v9h-2z' }),
+    h("path", { d: 'M5 18h14v2H5z' })));
+
+const PayoutsListCore = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rowClicked = createEvent(this, "payout-row-clicked", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.downloadCSV = (payoutId) => {
+            this.getPayoutCSV({
+                payoutId,
+                onError: () => {
+                    this.errorEvent.emit({
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        message: 'Failed to download CSV',
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                },
+            });
+        };
+        this.handleDateChange = (name, value) => {
+            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        };
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
+        };
+        this.handleClickNext = (afterCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.before_cursor;
+            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+        };
+        this.mapStatusToBadge = (status) => {
+            switch (status) {
+                case PayoutStatuses.scheduled:
+                    return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.in_transit:
+                    return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.failed:
+                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.canceled:
+                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.forwarded:
+                    return `<span class="badge bg-secondary" title='The funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.paid:
+                    return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
+            }
+        };
+        this.rowClickHandler = (e) => {
+            const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPayoutID)
+                return;
+            this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
+        };
+        this.getPayouts = undefined;
+        this.getPayoutCSV = undefined;
+        this.payouts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    componentWillLoad() {
+        if (this.getPayouts) {
+            this.fetchData();
+        }
+    }
+    fetchData() {
+        this.loading = true;
+        this.getPayouts({
+            params: this.params,
+            onSuccess: ({ payouts, pagingInfo }) => {
+                this.payouts = payouts;
+                this.paging = pagingInfo;
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get entityId() {
+        return this.payouts.map((payout) => payout.id);
+    }
+    get columnData() {
+        return [
+            ['Paid Out On', 'The date each transaction occurred'],
+            ['Type', 'The type of each transaction'],
+            ['Account', 'The ID of the account associated with each payout'],
+            ['Paid Out To', 'The bank account to which each payout was transferred'],
+            ['Payments', 'Sum of payments in each payout'],
+            ['Refunds', 'Sum of refunds in each payout'],
+            ['Fees', 'Sum of fees in each payout'],
+            ['Other', 'Sum of less common transactions in each payout'],
+            ['Payout Amount', 'The net sum of all transactions in each payout'],
+            ['Status', 'The real-time status of each payout'],
+            ['Actions', ''],
+        ];
+    }
+    get rowData() {
+        return this.payouts.map((payout) => [
+            {
+                type: 'head',
+                value: `
+          <div class='fw-bold'>${formatDate(payout.created_at)}</div>
+          <div class='fw-bold'>${formatTime(payout.created_at)}</div>
+        `,
+            },
+            payout.payout_type,
+            payout.account_id,
+            `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
+            formatCurrency(payout.payments_total),
+            formatCurrency(payout.refunds_total),
+            formatCurrency(payout.fees_total),
+            formatCurrency(payout.other_total),
+            formatCurrency(payout.amount),
+            { type: 'inner', value: this.mapStatusToBadge(payout.status) },
+            (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } })),
+        ]);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
+    }
+    render() {
+        return (h(StyledHost, { key: '594c52003f897f4c50f79935e42a7042fb5ec168', exportedparts: tableExportedParts }, h("div", { key: 'f2b1d971e1e7bc5596459c071c3aa931ba4cb4b9', class: "row gy-3 mb-4" }, h("div", { key: 'd98e3ed56421493a60bd0a285079aa99ae705506', class: "col-2" }, h("form-control-date", { key: 'c9c899884bcc6fa6d306b95473ef0a7354e57bd5', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '0059a75bf2f478b107d59bd9d7cc29de10dffe57', class: "col-2" }, h("form-control-date", { key: 'ef9a31ac8a8e7336386664b70289ee34677152a4', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '65da1114a66ac4cdf8d6ec012a42b2f760af5c76', class: "table-wrapper" }, h("table", { key: 'd68d8f61835cc4dc5dc988ff61843e6254494ace', class: "table table-hover" }, h("thead", { key: 'aa691db8fbfbcdad59acbdc1ef38497b552928ab', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'aa9f61cbf05b9420026861cb14e6a30a6c9e347e', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: 'cf0127f26e8bc5b7afbbfc4a36fab4de948d1727', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'd6b832786c4959176974c7a343442c8d1c50b5c2', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '398a20957f76ba14e1b0677fbd6fbfbacce61fbb', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd9f755a07a6f8cd4967eac60beff92f36322dcdd', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: '503fa3a3a7ffe5d52b614153b286dd0326c02091', class: "sticky-bottom" }, h("tr", { key: 'e3af74b96bfc1f5ac1f0f0655eaed096102d0e89', class: "table-light align-middle" }, h("td", { key: 'a53f9d37181ea29a9fcb6ab46b2daf7cc66509be', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: 'b0779289444747e0b18bb63e6a17cdc89bd390ca', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+    }
+    static get watchers() { return {
+        "params": ["updateOnPropChange"],
+        "getPayouts": ["updateOnPropChange"]
+    }; }
+};
+
+export { PayoutsListCore as payouts_list_core };

package/dist/webcomponents/p-8115b2f4.js

@@ -1 +1,28 @@
-import{a as t}from"./p-14c91ffd.js";const a=t=>"string"==typeof t?t:t.message,e=a=>{switch(a){case"not_authenticated":return t.NOT_AUTHENTICATED;case"invalid_parameter":return t.INVALID_PARAMETER;default:return t.FETCH_ERROR}};export{e as a,a as g}
+import { a as ComponentErrorCodes } from './p-14c91ffd.js';
+
+// Errors on [capital]/config/locales/en.yml
+// Add more errors as needed
+const API_ERRORS = {
+    NOT_AUTHENTICATED: 'not_authenticated',
+    INVALID_PARAMETER: 'invalid_parameter',
+};
+
+const getErrorMessage = (error) => {
+    if (typeof error === 'string') {
+        return error;
+    }
+    return error.message;
+};
+const getErrorCode = (code) => {
+    switch (code) {
+        case API_ERRORS.NOT_AUTHENTICATED:
+            return ComponentErrorCodes.NOT_AUTHENTICATED;
+        case API_ERRORS.INVALID_PARAMETER:
+            return ComponentErrorCodes.INVALID_PARAMETER;
+        // add more cases as needed
+        default:
+            return ComponentErrorCodes.FETCH_ERROR;
+    }
+};
+
+export { getErrorCode as a, getErrorMessage as g };