@justifi/webcomponents 5.4.4 → 5.6.0

package/dist/module/justifi-payout-transactions-list.js

@@ -0,0 +1,237 @@
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { h as convertToLocal } from './utils2.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError.js';
+import './Checkout.js';
+import { p as pagingDefaults } from './Pagination.js';
+import './Payment.js';
+import { d as PayoutBalanceTransaction } from './Refund.js';
+import './Document.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
+import { P as PayoutService } from './payout.service.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types3.js';
+import { n as tableHeadCell, a2 as getAlternateTableCellPart, m as table, o as tableCell } from './parts.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import { d as defineCustomElement$2 } from './pagination-menu2.js';
+
+const makeGetPayoutTransactions = ({ authToken, service, apiOrigin }) => async ({ params, onSuccess, onError, final }) => {
+    var _a;
+    try {
+        const response = await service.fetchPayoutTransactions(authToken, params, apiOrigin);
+        if (!response.error) {
+            const balanceTransactions = response.data.map((dataItem) => new PayoutBalanceTransaction(dataItem));
+            const pagingInfo = Object.assign({}, response.page_info);
+            onSuccess({ balanceTransactions, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: getErrorMessage(error),
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        final();
+    }
+};
+
+const defaultColumnsKeys = 'created_at,txn_type,description,amount,fee,net';
+const payoutTransactionTableColumns = {
+    id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of each transaction" }, "ID")),
+    account_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the account associated with each transaction" }, "Account ID")),
+    payout_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the payout associated with each transaction" }, "Payout ID")),
+    financial_transaction_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the financial transaction associated with the payment balance transaction" }, "Financial Transaction ID")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The dollar amount of each transaction" }, "Amount")),
+    fee: () => (h("th", { part: tableHeadCell, scope: "col", title: "The fee associated with each transaction" }, "Fee")),
+    net: () => (h("th", { part: tableHeadCell, scope: "col", title: "The net amount of each transaction" }, "Net")),
+    currency: () => (h("th", { part: tableHeadCell, scope: "col", title: "The currency of each transaction" }, "Currency")),
+    description: () => (h("th", { part: tableHeadCell, scope: "col", title: "The description of each transaction" }, "Description")),
+    source_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the source object associated with the payment balance transaction" }, "Source ID")),
+    txn_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of each transaction" }, "Type")),
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time each transaction was made" }, "Processed On")),
+    available_on: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time each transaction will be available" }, "Available On")),
+    updated_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time each transaction was last updated" }, "Updated On")),
+};
+const payoutTransactionTypes = {
+    fee: "Fee",
+    payment: "Payment",
+    payout: "Payout",
+    seller_payment_refund: "Seller Payment Refund",
+    dispute_amount_collected: "Dispute Amount Collected",
+    dispute_fee_collected: "Dispute Fee Collected",
+    seller_payment: "Seller Payment",
+    transfer: "Transfer",
+    partner_platform_proceeds_credit: "Partner Platform Proceeds Credit"
+};
+const payoutTransactionTableCells = {
+    id: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.id) }, transaction.id)),
+    account_id: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.account_id) }, transaction.account_id)),
+    payout_id: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.payout_id) }, transaction.payout_id)),
+    financial_transaction_id: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.financial_transaction_id) }, transaction.financial_transaction_id)),
+    amount: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.amount) }, transaction.formattedPaymentAmount(transaction.amount))),
+    fee: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.fee) }, transaction.formattedPaymentAmount(transaction.fee))),
+    net: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.net) }, transaction.formattedPaymentAmount(transaction.net))),
+    currency: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.currency) }, transaction.currency)),
+    description: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.description) }, transaction.description)),
+    source_id: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.source_id) }, transaction.source_id)),
+    txn_type: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.txn_type) }, payoutTransactionTypes[transaction.txn_type])),
+    created_at: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.created_at) },
+        h("div", { class: "fw-bold" }, convertToLocal(transaction.created_at, { showDisplayDate: true })),
+        h("div", { class: "fw-bold" }, convertToLocal(transaction.created_at, { showTime: true })))),
+    available_on: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.available_on) },
+        h("div", { class: "fw-bold" }, convertToLocal(transaction.available_on, { showDisplayDate: true })),
+        h("div", { class: "fw-bold" }, convertToLocal(transaction.available_on, { showTime: true })))),
+    updated_at: (transaction) => (h("td", { part: getAlternateTableCellPart(transaction.updated_at) },
+        h("div", { class: "fw-bold" }, convertToLocal(transaction.updated_at, { showDisplayDate: true })),
+        h("div", { class: "fw-bold" }, convertToLocal(transaction.updated_at, { showTime: true })))),
+};
+
+const PayoutTransactionsList = /*@__PURE__*/ proxyCustomElement(class PayoutTransactionsList extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.clickEvent = createEvent(this, "click-event", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.balanceTransactions = [];
+        this.isLoading = true;
+        this.errorMessage = null;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+        this.apiOrigin = "https://wc-proxy.justifi.ai";
+        this.columns = defaultColumnsKeys;
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedPayoutId = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPayoutId)
+                return;
+            const transactionData = this.balanceTransactions.find((payout) => payout.id === clickedPayoutId);
+            this.clickEvent.emit({ name: TableClickActions.row, data: transactionData });
+        };
+    }
+    componentWillLoad() {
+        this.transactionsTable = new Table(this.balanceTransactions, this.columns, payoutTransactionTableColumns, payoutTransactionTableCells);
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeApi();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    propChanged() {
+        this.initializeApi();
+    }
+    handleError(code, errorMessage, severity) {
+        this.isLoading = false;
+        this.errorEvent.emit({ errorCode: code, message: errorMessage, severity });
+    }
+    initializeApi() {
+        if (this.payoutId && this.authToken) {
+            const getPayoutTransactions = makeGetPayoutTransactions({
+                authToken: this.authToken,
+                service: new PayoutService(),
+                apiOrigin: this.apiOrigin
+            });
+            getPayoutTransactions({
+                params: this.requestParams,
+                onSuccess: ({ balanceTransactions, pagingInfo }) => {
+                    this.balanceTransactions = balanceTransactions;
+                    this.paging = pagingInfo;
+                    this.transactionsTable.collectionData = this.balanceTransactions;
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorMessage = error.message;
+                    this.handleError(error, code, severity);
+                },
+                final: () => {
+                    this.isLoading = false;
+                }
+            });
+        }
+        else {
+            this.errorMessage = 'payout-id and auth-token props are required';
+            this.handleError(ComponentErrorCodes.MISSING_PROPS, this.errorMessage, ComponentErrorSeverity.ERROR);
+        }
+    }
+    get entityId() {
+        return this.balanceTransactions.map((transaction) => transaction.id);
+    }
+    get showEmptyState() {
+        return !this.isLoading && !this.errorMessage && this.transactionsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.isLoading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.isLoading;
+    }
+    get requestParams() {
+        return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
+    }
+    render() {
+        return (h(StyledHost, { key: '90a9bdb7acbaabba3e2d99936ab8ff4af752b89f' }, h("div", { key: '546c52c26422482ebc03c363e1b7251b00628612', class: "table-wrapper" }, h("table", { key: '8cafebb253b276b747be56ffdde3430eebd8165b', class: "table table-hover", part: table }, h("thead", { key: '1b701619c17d926a95ddfb7fbb84fe3a6fd7c9b9', class: "table-head sticky-top" }, h("tr", { key: '94b5d386d8eed15eb54761c450603e3edba05e28', class: "table-light text-nowrap" }, this.transactionsTable.columnData.map((column) => column))), h("tbody", { key: 'cf4057bac5a7b9b49448bc0cc6fe60b031e71428', class: "table-body" }, h(TableLoadingState, { key: '0336b83d2842ba8cc450e6169161c5a32b65d5ca', columnSpan: this.transactionsTable.columnData.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'ecb336f7cf73ae652eafa2068e916055c908b351', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnData.length }), h(TableErrorState, { key: 'fa99aae26090ced86423af1c1458b51880299260', columnSpan: this.transactionsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'e1232dddefdbfaad0616841797235afd61422ec6', class: "sticky-bottom" }, h("tr", { key: 'f399c65e0d5c25206d2194841ba98e88d3fd7ebd', class: "table-light align-middle" }, h("td", { key: 'cb2e12c7d397c5c9be12ff2f3ad53bfba072f814', part: tableCell, colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'b485f5ba2817f9781f53d67b22ea3836caca448a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+    }
+    static get watchers() { return {
+        "pagingParams": ["propChanged"],
+        "payoutId": ["propChanged"],
+        "authToken": ["propChanged"]
+    }; }
+}, [1, "justifi-payout-transactions-list", {
+        "payoutId": [1, "payout-id"],
+        "authToken": [1, "auth-token"],
+        "apiOrigin": [1, "api-origin"],
+        "columns": [1],
+        "balanceTransactions": [32],
+        "transactionsTable": [32],
+        "isLoading": [32],
+        "errorMessage": [32],
+        "paging": [32],
+        "pagingParams": [32]
+    }, undefined, {
+        "pagingParams": ["propChanged"],
+        "payoutId": ["propChanged"],
+        "authToken": ["propChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-payout-transactions-list", "pagination-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-payout-transactions-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PayoutTransactionsList);
+            }
+            break;
+        case "pagination-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JustifiPayoutTransactionsList = PayoutTransactionsList;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiPayoutTransactionsList, defineCustomElement };

package/dist/module/justifi-payouts-list-filters.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { f as filterParams, p as propsParams, c as clearParams } from './payouts-list-params-state.js';
-import { ab as payoutsListFilterMenu, ac as createdAfterPayoutsListFilterParam, ad as createdBeforePayoutsListFilterParam } from './parts.js';
+import { a9 as payoutsListFilterMenu, aa as createdAfterPayoutsListFilterParam, ab as createdBeforePayoutsListFilterParam } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
-import { k as convertToUTC, j as convertToLocal } from './utils2.js';
+import { j as convertToUTC, h as convertToLocal } from './utils2.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-date2.js';
 import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
@@ -21,8 +21,6 @@ const PayoutsListFilters = /*@__PURE__*/ proxyCustomElement(class PayoutsListFil
             const utcDate = convertToUTC(value, { setEndOfDay: true });
             this.setParamsOnChange(name, utcDate);
         };
-        this.createdAfter = undefined;
-        this.createdBefore = undefined;
     }
     componentWillLoad() {
         const propsToSet = {
@@ -37,8 +35,8 @@ const PayoutsListFilters = /*@__PURE__*/ proxyCustomElement(class PayoutsListFil
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '30857b318a635a1420f56799c572f39da85d6317' }, h("table-filters-menu", { key: 'c3b0bdc3d50d9cc3e2cef3adfbba7f0fe7539044', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '9be791ebd77eb197e18e7663c30fa2a12c1e9a4f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '3e172e7f255b4e78b48cb03d2b921b01fdefc4b0', class: "p-2" }, h("form-control-date", { key: '875f2202358370bec6df4b724dbc2db7070b1ff7', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: 'ce324f47aa1b38b6d24f200a7b468076c6998faf', class: "p-2" }, h("form-control-date", { key: '3d2543d40d2f3ac60c7f3f09d905c102425dffc6', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+        return (h(StyledHost, { key: 'e6670cb708b28330f79512d01d582f7a1930fd3c' }, h("table-filters-menu", { key: '366dd0925c68feb2c8482bc27f63c7591ec38882', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: 'd5de9412726c9c3f51675eeba8ba258094632b99', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '3f693842e14574eb3a056db221dc6521d02c0ba4', class: "p-2" }, h("form-control-date", { key: 'ca0697ab9b42ff0bed8aa0cd6747cde11fdf3ab1', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: 'cc8a71a7de29c82644773d356ef063cbf7f97f2a', class: "p-2" }, h("form-control-date", { key: 'f878e0acedced0ed813a7410243f414ba12c6898', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDate: true }), disabled: !!this.createdBefore, part: createdBeforePayoutsListFilterParam }))))));
     }
 }, [1, "justifi-payouts-list-filters", {

package/dist/module/justifi-payouts-list.js

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
-import { m as makeGetPayoutCSV, P as PayoutService } from './get-payout-csv.js';
+import { P as PayoutService } from './payout.service.js';
+import './utils2.js';
 import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
-import { P as Payout } from './SubAccount.js';
+import { P as Payout } from './Refund.js';
 import './Document.js';
-import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
+import { m as makeGetPayoutCSV } from './get-payout-csv.js';
 import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
@@ -55,18 +57,13 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
         this.__registerHost();
         this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.errorMessage = null;
+        this.apiOrigin = "https://wc-proxy.justifi.ai";
+        this.columns = defaultColumnsKeys;
         this.handleOnError = (event) => {
             this.errorMessage = event.detail.message;
             this.errorEvent.emit(event.detail);
         };
-        this.getPayouts = undefined;
-        this.getPayoutCSV = undefined;
-        this.getSubAccounts = undefined;
-        this.errorMessage = null;
-        this.accountId = undefined;
-        this.authToken = undefined;
-        this.apiOrigin = "https://wc-proxy.justifi.ai";
-        this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -114,7 +111,7 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
         }
     }
     render() {
-        return (h(StyledHost, { key: '434171dee57c7d639a894133b36f7dc727e28381', exportedparts: tableExportedParts }, h("payouts-list-core", { key: 'e4ed849e1c839dcdd3990a1b64d2bd132cda86f8', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '8a0fe80740cef6d17900927487aab83287c4ed3f', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '72d7494e2d0f44d4bfec9b2a7bad700c80aae948', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/justifi-refund-payment.js

@@ -1,34 +1,54 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { c as create$3, a as create$6, F as FormController } from './form.js';
 import { f as formatCurrency } from './utils2.js';
-import { A as Api } from './Api.js';
-import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError.js';
 import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
-import './SubAccount.js';
+import { R as RefundReasons, g as RefundPayload } from './Refund.js';
 import './Document.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
+import { P as PaymentService } from './payment.service.js';
+import { m as makeGetPaymentDetails } from './get-payment-details.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
+import { A as Api } from './Api.js';
+import { S as Skeleton } from './skeleton.js';
 import { d as defineCustomElement$7 } from './custom-popper2.js';
-import { d as defineCustomElement$6 } from './form-control-help-text3.js';
+import { d as defineCustomElement$6 } from './form-control-help-text2.js';
 import { d as defineCustomElement$5 } from './form-control-monetary2.js';
 import { d as defineCustomElement$4 } from './form-control-select2.js';
 import { d as defineCustomElement$3 } from './form-control-textarea2.js';
 import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 
+const amountValidation = (maxAmount) => {
+    const max = +maxAmount;
+    return (create$6()
+        .required('Amount is required')
+        .test('max-amount', `Refund amount cannot be more than payment amount: ${formatCurrency(max)}`, function (value) {
+        return +value <= +max;
+    })
+        .test('min-amount', 'Refund amount must be greater than 0', function (value) {
+        return +value > 0;
+    }));
+};
 const RefundPaymentSchema = (maxRefundAmount) => {
-    const maxAmount = +maxRefundAmount;
-    return create$3().shape({
-        amount: create$6()
-            .required('Amount is required')
-            .typeError('Amount must be a number')
-            .test('amount', `Refund amount cannot be more than ${formatCurrency(maxAmount)}`, function (value) {
-            return +value <= maxAmount;
-        })
-            .nullable(),
+    if (!maxRefundAmount) {
+        return;
+    }
+    const schema = create$3({
+        amount: amountValidation(maxRefundAmount),
+        description: create$6().optional(),
+        reason: create$6().optional()
+            .oneOf([
+            RefundReasons.customerRequest,
+            RefundReasons.duplicate,
+            RefundReasons.fraudulent,
+        ], 'Select a reason')
     });
+    return schema;
 };
 
 const refundReasonOptions = [
@@ -50,6 +70,56 @@ const refundReasonOptions = [
     }
 ];
 
+const makePostRefund = ({ authToken, accountId, paymentId, service, apiOrigin }) => async ({ refundBody, onSuccess, onError, final }) => {
+    var _a;
+    try {
+        const response = await service.postRefund(paymentId, accountId, authToken, refundBody, apiOrigin);
+        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();
+    }
+};
+
+class RefundService {
+    async postRefund(paymentId, accountId, authToken, refundBody, apiOrigin = "https://wc-proxy.justifi.ai") {
+        const api = Api({ authToken, apiOrigin });
+        const endpoint = `payments/${paymentId}/refunds`;
+        const headers = { 'Sub-Account': accountId };
+        return api.post({ endpoint, headers, body: refundBody });
+    }
+}
+
+const FormBlock = () => (h("div", { class: "row gap-3" },
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "100%", height: "40px" }))));
+const RefundLoading = () => {
+    return (h(StyledHost, null,
+        h("div", { class: "row gap-5" },
+            h(FormBlock, null),
+            h(FormBlock, null),
+            h(FormBlock, null))));
+};
+
 const RefundPayment = /*@__PURE__*/ proxyCustomElement(class RefundPayment extends HTMLElement {
     constructor() {
         super();
@@ -57,77 +127,130 @@ const RefundPayment = /*@__PURE__*/ proxyCustomElement(class RefundPayment exten
         this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
-        this.authToken = undefined;
-        this.paymentId = undefined;
+        this.refundPayload = {};
+        this.displayAmount = '';
+        this.errors = {};
+        this.paymentLoading = true;
+        this.refundLoading = false;
         this.hideSubmitButton = false;
         this.apiOrigin = "https://wc-proxy.justifi.ai";
-        this.paymentAmountRefundable = 0;
-        this.errorMessage = null;
-        this.errors = {};
-        this.values = {};
-        this.isLoading = false;
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
     }
     componentWillLoad() {
-        this.formController = new FormController(RefundPaymentSchema(this.paymentAmountRefundable.toString()));
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
         this.initializeApi();
+        this.formController = new FormController(RefundPaymentSchema());
     }
-    componentDidLoad() {
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
-        this.formController.values.subscribe(values => {
-            this.values = Object.assign({}, values);
-        });
+    handleError(code, errorMessage, severity) {
+        this.errorEvent.emit({ errorCode: code, message: errorMessage, severity });
     }
-    async handleSubmit(event) {
-        event.preventDefault();
-        this.formController.validateAndSubmit(this.submitRefund);
+    checkAmount(amount) {
+        return amount > 0;
     }
-    async submitRefund(values) {
-        this.isLoading = true;
-        let refundResponse;
-        try {
-            refundResponse = await this.api.post(`payments/${this.paymentId}/refunds`, values);
-        }
-        catch (error) {
-            console.error('Error submitting refund:', error);
-            this.errorEvent.emit(error);
-        }
-        finally {
-            this.submitEvent.emit({ response: refundResponse });
-            this.isLoading = false;
-        }
+    handleInvalidAmount() {
+        this.submitDisabled = true;
+        const errorMessage = 'Refund amount must be greater than 0';
+        this.handleError(ComponentErrorCodes.INVALID_REFUND_AMOUNT, errorMessage, ComponentErrorSeverity.ERROR);
     }
-    handleInput(field, value) {
-        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [field]: value }));
+    initializeFormController() {
+        const amount = this.refundPayload.amount;
+        const amountRefundable = amount ? amount.toString() : '0';
+        this.formController = new FormController(RefundPaymentSchema(amountRefundable));
+        this.formController.setInitialValues({
+            amount: amountRefundable
+        });
+        this.formController.values.subscribe(values => {
+            this.refundPayload = Object.assign({}, values);
+        });
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
     }
     initializeApi() {
         if (this.paymentId && this.authToken) {
-            this.api = Api({ authToken: this.authToken, apiOrigin: "https://wc-proxy.justifi.ai" });
+            const getPayment = makeGetPaymentDetails({
+                id: this.paymentId,
+                authToken: this.authToken,
+                service: new PaymentService(),
+                apiOrigin: this.apiOrigin
+            });
+            getPayment({
+                onSuccess: ({ payment }) => {
+                    this.refundPayload = new RefundPayload({ amount: payment.amount_refundable });
+                },
+                onError: ({ error, code, severity }) => {
+                    this.handleError(code, error, severity);
+                },
+                final: () => {
+                    const amount = this.refundPayload.amount;
+                    const validAmount = this.checkAmount(amount);
+                    !validAmount ? this.handleInvalidAmount() : this.initializeFormController();
+                    this.paymentLoading = false;
+                }
+            });
         }
         else {
-            this.errorMessage = 'Payment ID and Auth Token are required';
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.MISSING_PROPS,
-                message: this.errorMessage,
-                severity: ComponentErrorSeverity.ERROR,
-            });
+            const errorMessage = 'Payment ID and Auth Token are required';
+            this.handleError(ComponentErrorCodes.MISSING_PROPS, errorMessage, ComponentErrorSeverity.ERROR);
         }
     }
+    async refundPayment(event) {
+        event && event.preventDefault();
+        const valid = await this.formController.validate();
+        if (!valid)
+            return;
+        const postRefund = makePostRefund({
+            authToken: this.authToken,
+            accountId: this.accountId,
+            paymentId: this.paymentId,
+            service: new RefundService(),
+            apiOrigin: this.apiOrigin
+        });
+        const values = this.formController.values.getValue();
+        this.refundLoading = true;
+        return new Promise((resolve) => {
+            let refundResponse;
+            postRefund({
+                refundBody: values,
+                onSuccess: (response) => { refundResponse = response; },
+                onError: ({ error, code, severity }) => {
+                    refundResponse = error;
+                    this.handleError(error, code, severity);
+                },
+                final: () => {
+                    this.submitEvent.emit({ response: refundResponse });
+                    this.submitDisabled = true;
+                    this.refundLoading = false;
+                    resolve(refundResponse.data);
+                },
+            });
+        });
+    }
     render() {
-        return (h(StyledHost, { key: 'ea0429d62ea383b6525251150978bb0ebfb2704e' }, h("form", { key: '8f2e00b871ee896ba82311d8975574e5a2cbf6e3' }, h("div", { key: 'fa6476367e4a8b7fd7cdfff906671ef597b453de', class: "row gy-3" }, h("div", { key: '72a48181200d6116ceb4bb511bdd33c8c8197742', class: "form-group" }, h("form-control-monetary", { key: 'f6a3b3a7d8d8c733cb032db96878ad64ff712356', name: "amount", label: "Refund Amount", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount, defaultValue: this.paymentAmountRefundable.toString() })), h("div", { key: '47e6dc07510e192caf00ce959348a2a9472f48f8', class: "form-group" }, h("form-control-select", { key: '9f9b761eea9964c7f6ac1dd907a4fee8cd63c906', label: "Reason for refund (optional)", options: refundReasonOptions, name: "reason", defaultValue: '' })), h("div", { key: 'daa4bf44ec311e0554ea28f97a0932673d542a31', class: "form-group" }, h("form-control-textarea", { key: 'a03d055e6462b9a23e714ca58a942a6da0365919', name: "description", label: "Note (optional)", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.description, maxLength: 250 })), h("div", { key: 'b744d28ff0a2d6aa37b1ebe2b7ea6d9b3edbbc39', class: "form-group d-flex flex-row-reverse" }, h(Button, { key: '3f62881a5fa333277478d35a7c19a8c4ca8bb929', variant: "primary", type: "submit", onClick: e => this.handleSubmit(e), isLoading: this.isLoading, hidden: this.hideSubmitButton }, `Refund ${formatCurrency(+this.values.amount)}`))))));
+        if (this.paymentLoading) {
+            return h(RefundLoading, null);
+        }
+        const defaultValues = this.formController.getInitialValues();
+        const currentRefundAmount = this.refundPayload.amount;
+        return (h(StyledHost, null, h("form", null, h("fieldset", null, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-monetary", { name: "amount", label: "Refund Amount", defaultValue: defaultValues.amount, inputHandler: this.inputHandler, errorText: this.errors.amount })), h("div", { class: "col-12" }, h("form-control-select", { name: "reason", label: "Reason for refund (optional)", defaultValue: defaultValues.reason, inputHandler: this.inputHandler, options: refundReasonOptions, errorText: this.errors.reason })), h("div", { class: "col-12" }, h("form-control-textarea", { name: "description", label: "Note (optional)", defaultValue: defaultValues.description, inputHandler: this.inputHandler, maxLength: 250, errorText: this.errors.description })), h("div", { class: "form-group d-flex flex-row-reverse" }, h(Button, { variant: "primary", type: "submit", onClick: this.refundPayment.bind(this), isLoading: this.paymentLoading || this.refundLoading, hidden: this.hideSubmitButton, disabled: this.submitDisabled }, `Refund ${formatCurrency(+currentRefundAmount)}`)))))));
     }
 }, [1, "justifi-refund-payment", {
         "authToken": [1, "auth-token"],
+        "accountId": [1, "account-id"],
         "paymentId": [1, "payment-id"],
         "hideSubmitButton": [4, "hide-submit-button"],
         "apiOrigin": [1, "api-origin"],
-        "paymentAmountRefundable": [32],
-        "errorMessage": [32],
+        "formController": [32],
+        "refundPayload": [32],
+        "displayAmount": [32],
         "errors": [32],
-        "values": [32],
-        "isLoading": [32],
-        "submitRefund": [64]
+        "paymentLoading": [32],
+        "refundLoading": [32],
+        "submitDisabled": [32],
+        "refundPayment": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {