@justifi/webcomponents 5.6.0 → 5.7.0

package/dist/collection/components/config-provider/config-provider.js

@@ -0,0 +1,83 @@
+import { setConfigState } from "./config-state";
+export class ConfigProvider {
+    constructor() {
+        this.apiOrigin = PROXY_API_ORIGIN;
+        this.iframeOrigin = IFRAME_ORIGIN;
+        this.accountId = '';
+    }
+    componentWillLoad() {
+        setConfigState({
+            apiOrigin: this.apiOrigin,
+            iframeOrigin: this.iframeOrigin,
+            accountId: this.accountId
+        });
+    }
+    render() {
+        return null;
+    }
+    static get is() { return "justifi-config-provider"; }
+    static get properties() {
+        return {
+            "apiOrigin": {
+                "type": "string",
+                "attribute": "api-origin",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "PROXY_API_ORIGIN"
+            },
+            "iframeOrigin": {
+                "type": "string",
+                "attribute": "iframe-origin",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "IFRAME_ORIGIN"
+            },
+            "accountId": {
+                "type": "string",
+                "attribute": "account-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/config-provider/config-state.js

@@ -0,0 +1,36 @@
+import { createStore } from "@stencil/store";
+const initialState = {
+    apiOrigin: PROXY_API_ORIGIN,
+    iframeOrigin: IFRAME_ORIGIN,
+    accountId: '',
+};
+const configStore = createStore(() => initialState);
+const { state: configState, on: onConfigChange } = configStore;
+// resolver for the “ready” promise
+let resolveConfigReady;
+// initial “handshake” promise
+const configReady = new Promise(r => {
+    resolveConfigReady = r;
+});
+// called by <justifi-config-provider>
+const setConfigState = (vals) => {
+    Object.assign(configState, vals);
+    resolveConfigReady();
+};
+/**
+ * Wait for configProvider to run, but safe guard against never mounting.
+ * @param timeoutMs max time to wait before resolving with default values
+ */
+const waitForConfig = (timeoutMs = 200) => {
+    return new Promise(resolve => {
+        const timer = setTimeout(() => {
+            // timeout expired, proceed with default config state values
+            resolve();
+        }, timeoutMs);
+        configReady.then(() => {
+            clearTimeout(timer);
+            resolve();
+        });
+    });
+};
+export { configState, onConfigChange, setConfigState, waitForConfig };

package/dist/collection/components/dispute-management/dispute-management.js

@@ -6,7 +6,6 @@ import { makeGetDispute } from "../../actions/dispute/dispute-actions";
 import { DisputeService } from "../../api/services/dispute.service";
 export class DisputeManagement {
     constructor() {
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.errorMessage = null;
         this.handleErrorEvent = event => {
             this.errorMessage = event.detail.message;
@@ -30,8 +29,7 @@ export class DisputeManagement {
             this.getDispute = makeGetDispute({
                 id: this.disputeId,
                 authToken: this.authToken,
-                service: new DisputeService(),
-                apiOrigin: this.apiOrigin,
+                service: new DisputeService()
             });
         }
         else {
@@ -44,7 +42,7 @@ export class DisputeManagement {
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: 'ae0e4a208d6250c4da7033e1d8bf8c33ec041c36', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '12e281244496ede936b191dbc5b4069404d931e9', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-dispute-management"; }
     static get properties() {
@@ -86,26 +84,6 @@ export class DisputeManagement {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
             }
         };
     }

package/dist/collection/components/dispute-management/dispute-response/dispute-response-actions.js

@@ -1,9 +1,9 @@
 import { ComponentErrorSeverity } from "../../../api/ComponentError";
 import { getErrorCode, getErrorMessage } from "../../../api/services/utils";
-export const makeGetDisputeResponse = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
+export const makeGetDisputeResponse = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a;
     try {
-        const response = await service.fetchDisputeResponse(id, authToken, params, apiOrigin);
+        const response = await service.fetchDisputeResponse(id, authToken, params);
         if (!response.error) {
             const pagingInfo = Object.assign({}, response.page_info);
             const disputeResponse = response.data;

package/dist/collection/{ui-components → components}/filters/table-filters-menu.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { Button } from "../button";
+import { Button } from "../../ui-components/button";
 import { hasFilters } from "./utils";
-import { dropdownMenu } from "../../styles/parts";
+import { dropdownMenu, dropdownMenuButton } from "../../styles/parts";
 export class TableFiltersMenu {
     constructor() {
         this.showClearButton = false;
@@ -19,7 +19,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'b55be2aa2f9d4677989da12bb114f620a9ec2e45', class: "d-flex gap-2" }, h("div", { key: 'dffb2be68ead3abb60a8740869e48bb48bbf558c', class: "dropdown pb-3" }, h(Button, { key: '2e7b2d3afc80963abfe9c8c2690a61b911a1b747', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '9e2b1b988bc5440f18d26c5b8402f5e30e73cdad', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '573161a7515d1b16665138ba739133379b9b6850', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '9597e79f125e1e41c343fa3d2d583b5cf7ab9c31' })))), h("div", { key: '67ed29ac8e10f3ae1380514ae1a1e1e8aed7d9b6' }, h(Button, { key: '9b3dc6176c11226e82ecb1f9f88705ad40bf6e32', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: '73b213c0381a163e3ccd4b4df158daf8dc128d83', class: "d-flex gap-2" }, h("div", { key: '817823777638fc8501bb7230d0b061c110e4f82b', class: "dropdown pb-3" }, h("button", { key: '6ad7b2c32bfc44b836071db2706e86d649c5ccb3', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '124ac66fe0be636f74009bdd07e392fa82fd943e', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'b1421bdd7f7318012dcbd280eab4d8aeabbfee8c', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '7a251b4a2b2840f435d07605a6333b86180ab88e' })))), h("div", { key: '2badf2863bb80ef70508347049becdd0aec5196e' }, h(Button, { key: 'ee90184cb3aa0e7c4ff8d69cf299aef4fda114bd', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

package/dist/collection/components/order-terminals/order-terminals.js

@@ -17,7 +17,6 @@ import { formatPhoneNumber } from "../../utils/utils";
 export class OrderTerminals {
     constructor() {
         this.shipping = false;
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.submitButtonText = 'Submit Order';
         this.loading = {
             business: true,
@@ -53,8 +52,7 @@ export class OrderTerminals {
         makeGetBusiness({
             id: this.businessId,
             authToken: this.authToken,
-            service: new BusinessService(),
-            apiOrigin: this.apiOrigin,
+            service: new BusinessService()
         })({
             onSuccess: ({ business }) => {
                 this.business = new Business(business);
@@ -70,8 +68,7 @@ export class OrderTerminals {
         makeGetTerminalModels({
             id: this.accountId,
             authToken: this.authToken,
-            service: new TerminalService(),
-            apiOrigin: this.apiOrigin,
+            service: new TerminalService()
         })({
             onSuccess: ({ terminals, orderLimit }) => {
                 this.terminalModels = terminals;
@@ -87,8 +84,7 @@ export class OrderTerminals {
     submitOrder() {
         const orderTerminals = makeOrderTerminals({
             authToken: this.authToken,
-            service: new TerminalService(),
-            apiOrigin: this.apiOrigin,
+            service: new TerminalService()
         });
         this.submitting = true;
         orderTerminals({
@@ -125,7 +121,7 @@ export class OrderTerminals {
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: '0a63280f2a9b41e5d2493131d8150c5d124e78bb' }, h("div", { key: 'ec3e1d2c3a90377dd622982de1435989d81f60e8', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: '47251af3261d16cfc067bca3b3810805d93ba36d' }, h("div", { key: '13c73bb09cdbad48ee7b15089daf1b6bf56cf256', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }
@@ -208,26 +204,6 @@ export class OrderTerminals {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
-            },
             "submitButtonText": {
                 "type": "string",
                 "attribute": "submit-button-text",

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

@@ -44,7 +44,10 @@ export class PaymentDetailsCore {
         ], this.payment.payment_method.bank_account && [
             h(DetailSectionTitle, { key: '84dae904db3c22ff5ed03abaeb57d3b0736d1fbb', sectionTitle: "Payment Method" }),
             h("div", { key: '400801019a53feec0478273866fffa5683b408aa', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ca7bb52e4275659b18daacfa6367de2f32617e70', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '4885d2b5f05b6a713d61074271c7a95b23604dca', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '604ec4efe78a12a1c36d8416c9fdec70351a6dad', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '1ef77a81232e19d1063af9e863f5c9ada183715f', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '1d0a45dd7b7f44b2bad75db9ddb7886b9fc36c9c', sectionTitle: 'Metadata' }), h("div", { key: '364dfb72b9585b672a510b11ecf794c8293ac88d', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1b9254f2f5f81959ea4e190a3a84129d8c54eccd', metadata: this.payment.metadata })))))));
+        ], this.payment.metadata && [
+            h(DetailSectionTitle, { key: '703ee104edf87c55034c38bb9fe0de6907980a0e', sectionTitle: 'Metadata' }),
+            h("div", { key: 'c10b66a975c6a221f86226893e13cbf57bf0d8dd', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'e73dfd81f110ec7c275fd37d1ecc71bbc22580b5', metadata: this.payment.metadata }))
+        ])))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {

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

@@ -7,7 +7,6 @@ import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class PaymentDetails {
     constructor() {
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.errorMessage = null;
         this.paymentService = new PaymentService();
         this.handleErrorEvent = event => {
@@ -32,8 +31,7 @@ export class PaymentDetails {
             this.getPaymentDetails = makeGetPaymentDetails({
                 id: this.paymentId,
                 authToken: this.authToken,
-                service: new PaymentService(),
-                apiOrigin: this.apiOrigin
+                service: new PaymentService()
             });
         }
         else {
@@ -92,26 +90,6 @@ export class PaymentDetails {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
             }
         };
     }

package/dist/collection/components/payment-transactions-list/payment-transactions-list.js

@@ -5,10 +5,9 @@ import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { makeGetPaymentTransactions } from "../../actions/payment/get-payment-transactions";
 import { PaymentService } from "../../api/services/payment.service";
 import { Table } from "../../utils/table";
-import { TableClickActions } from "../../ui-components/table/event-types";
-import { table, tableCell } from "../../styles/parts";
 import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { defaultColumnsKeys, paymentTransactionTableCells, paymentTransactionTableColumns } from "./payment-transactions-table";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class PaymentTransactionsList {
     constructor() {
         this.balanceTransactions = [];
@@ -16,7 +15,6 @@ export class PaymentTransactionsList {
         this.errorMessage = null;
         this.paging = pagingDefaults;
         this.pagingParams = {};
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
         this.handleClickPrevious = (beforeCursor) => {
             this.pagingParams = { before_cursor: beforeCursor };
@@ -55,8 +53,7 @@ export class PaymentTransactionsList {
             const getPaymentTransactions = makeGetPaymentTransactions({
                 id: this.paymentId,
                 authToken: this.authToken,
-                service: new PaymentService(),
-                apiOrigin: this.apiOrigin
+                service: new PaymentService()
             });
             getPaymentTransactions({
                 params: this.pagingParams,
@@ -92,7 +89,7 @@ export class PaymentTransactionsList {
         return !this.showEmptyState && !this.showErrorState && !this.isLoading;
     }
     render() {
-        return (h(StyledHost, { key: 'b011961e9c9b01720fa7964186e477784a7deddd' }, h("div", { key: '074eb86caf8be83e6cdc51ab496564358dafdeb5', class: "table-wrapper" }, h("table", { key: 'cc1453bcba758c6847d593a545918c449219eac4', class: "table table-hover", part: table }, h("thead", { key: '08bbac43b6484ed2f96061153a3d40a2d9f4da7d', class: "table-head sticky-top" }, h("tr", { key: '424dadd8f7686d62fcf3d3222a77c707d6e69985', class: "table-light text-nowrap" }, this.transactionsTable.columnData.map((column) => column))), h("tbody", { key: '3ef6863f785ff73b467f2c48fa91ed1bac57c7e2', class: "table-body" }, h(TableLoadingState, { key: '69da7b5801f492787ec6ce3b10fbd25e9580c0e1', columnSpan: this.transactionsTable.columnData.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'e6ff1509d0a54aaca9fbaa2e5ebd3e83a62ef17c', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnData.length }), h(TableErrorState, { key: '5cd693d69c7dc34807767d18ad97cc1f5fce52fe', 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: 'c8e1ff59e7db5aeb4db84884360e3d9cf71a1552', class: "sticky-bottom" }, h("tr", { key: 'fd0b29ddeb0ed6114904ce4b875618c469349578', class: "table-light align-middle" }, h("td", { key: '340ae8d8132eb66a8c0cae500d708c4174ed5dc7', part: tableCell, colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'a2ea49ba4478b3e22a4587eed3262bc482cfd9b8', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '95b1793a1b1dd1f30857a2da18884569bb37673a' }, h(TableWrapper, { key: '213c53810f28609c5166c4b7865a4b923db64148' }, h(TableComponent, { key: 'c4c9ad468955900dd3dadf55bf74961b347db725' }, h(TableHead, { key: '0aaa96e09c54865f5bbe74abf236db20a69c0df9' }, h(TableHeadRow, { key: '69258a4be5ddba8c3db1f2e801c7101a51efadd2' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '961a12de0888c9ab76ae708f1694955cadc05ffb' }, h(TableLoadingState, { key: 'd5d5b788698eb28ff2dcccf902694fb166f7e805', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '311f9238c5ed98e1801cd482967814e2d1b98547', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '86c6728fb2a4ff6a1de0032cda9a5e6fdfb2a19c', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '4fe703ff7a69a534424fde0154203a0f1f0a2240' }, h(TableFootRow, { key: 'b6dafac49888c3745461a18723b74f46d1353478' }, h(TableFootCell, { key: '1906f0ab8f62c94cb976a37eb12ffb479ccb8333', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '114ec152e59ddd485f465774a7f8f656d618083a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payment-transactions-list"; }
     static get encapsulation() { return "shadow"; }
@@ -136,26 +133,6 @@ export class PaymentTransactionsList {
                 "setter": false,
                 "reflect": false
             },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
-            },
             "columns": {
                 "type": "string",
                 "attribute": "columns",

package/dist/collection/components/payments-list/payments-list-core.js

@@ -4,8 +4,7 @@ import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-co
 import { paymentTableCells, paymentTableColumns } from "./payments-table";
 import { Table } from "../../utils/table";
 import { getRequestParams, onQueryParamsChange } from "./payments-list-params-state";
-import { table, tableCell } from "../../styles/parts";
-import { TableClickActions } from "../../ui-components/table/event-types";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class PaymentsListCore {
     constructor() {
         this.payments = [];
@@ -84,7 +83,7 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '83f0460f5b465e1414e4a88dc113fc7155d4decb', class: "table-wrapper" }, h("table", { key: '2a42ee9579d589a667172ea9f97e510029b87bdf', class: "table table-hover", part: table }, h("thead", { key: 'bd4bfb3c9d022f8187925d040316020426efdc18', class: "table-head sticky-top" }, h("tr", { key: '7bc4c05aa456cef8fdf9cec435937a6ee447cf2e', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'c09c5a55310da7506b183914d16dd76d5336c275', class: "table-body" }, h(TableLoadingState, { key: '410e7e5b13049436d24a3d4c830c174264b4d802', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '4461a05a8812955cc9673699b9f26decbfbe3197', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'c49e3e5fadc0b889908e7420a0c3547879cc5af8', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.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: 'f6266d84bc0ff50ed9ce7bf0af7016f48e1d57dc', class: "sticky-bottom" }, h("tr", { key: '496fe22cdbaa38becf40402425e9f507625d52b3', class: "table-light align-middle" }, h("td", { key: 'bdd620cd38377ffdcace7b7b810e0379cd089d0b', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '5dab0663b6cf408b88c43177822b01969fd0b2d5', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '1317635730164f2193e9556589c1c8584b70cfbb' }, h(TableComponent, { key: '98f458d904f17105aa7f6fde313487fa1af08034' }, h(TableHead, { key: 'a70f53dc6484a001d51f2c937e9696ad4ea68d2c' }, h(TableHeadRow, { key: '93a807d6627175ff4030fc4de8e067809486b274' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '4051081286f20f72d3e34f2484ada5413327b608' }, h(TableLoadingState, { key: 'e94bc4c5d2d4f2a24ee8ec906aa936ad0d497b84', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'be3fe38c674d7a587f77d91c4133d39359954135', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '55bb4161c9677940b78badbbc2a621e29404e213', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '23e336810c59ab014b4a11fa5f9f087db2de9fa1' }, h(TableFootRow, { key: '848eb4d2cfd643472de22f6cd86d9a7121acdca6' }, h(TableFootCell, { key: 'b0c325d98775e1784173d45375018d94f8fc71cc', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'b61510a421ed0fcf54ff3b3318bc8b80db18c6b1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

package/dist/collection/components/payments-list/payments-list.js

@@ -9,7 +9,6 @@ import { defaultColumnsKeys } from "./payments-table";
 export class PaymentsList {
     constructor() {
         this.errorMessage = null;
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
         this.handleErrorEvent = (event) => {
             this.errorMessage = event.detail.message;
@@ -32,8 +31,7 @@ export class PaymentsList {
             this.getPayments = makeGetPayments({
                 id: this.accountId,
                 authToken: this.authToken,
-                service: new PaymentService(),
-                apiOrigin: this.apiOrigin,
+                service: new PaymentService()
             });
         }
         else {
@@ -46,7 +44,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '97f98385d5b9f4664776f920183901136b1e3d1a' }, h("payments-list-core", { key: 'be6558d801908c60c8c0c0f66741d2ee7049d5e3', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '1527d43387894949810bae0fa5ebeb172f71bbaf' }, h("payments-list-core", { key: '198cbb929b4793c37a0963554d841ac7999e3c29', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }
@@ -90,26 +88,6 @@ export class PaymentsList {
                 "setter": false,
                 "reflect": false
             },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
-            },
             "columns": {
                 "type": "string",
                 "attribute": "columns",

package/dist/collection/components/payout-details/get-payout-csv.js

@@ -1,8 +1,8 @@
 import { ComponentErrorSeverity } from "../../api/ComponentError";
 import { getErrorCode, getErrorMessage } from "../../api/services/utils";
-export const makeGetPayoutCSV = ({ authToken, service, apiOrigin }) => async ({ payoutId, onError }) => {
+export const makeGetPayoutCSV = ({ authToken, service }) => async ({ payoutId, onError }) => {
     try {
-        const { data } = await service.fetchCSV(payoutId, authToken, apiOrigin);
+        const { data } = await service.fetchCSV(payoutId, authToken);
         const a = document.createElement('a');
         a.href = data.csv_url;
         a.click();

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

@@ -51,7 +51,10 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '62711161d74a4d4e76ea5dba50cdf658722ba3a5' }, this.loading && h(PayoutDetailsLoading, { key: '170bf58456fb93c687a9e5b71e364ed6d54ec965' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'eafc4215df8ecba2f3e767e91df54a67c48e0e69', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '849a324f0d5f545e502c1632a5af30da3f6caf74', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'ae0b4f158d3baf397880061f6fe25916ca870ac6', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2e2f16f8c1e2f5b34fe986a311be4ae084d385ab', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '724abe3799d1a1c8f9a54130af715a2057218510', title: "ID", value: this.payout.id }), h("div", { key: '7ac70b4b6eee073384e223b01304d0ad0aaf0a64', class: "m-4" }, h(Button, { key: 'fc78f5a3b14e58aa3861592e81bc60c155d520e3', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9ebede365566df145b3412b24d255e1b90740541', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '71cfc2676e1ac51b44de391547589fafb5189266', sectionTitle: "Details" }), h("div", { key: 'cba9946a2406c577d3b190cfbfe4b1eeaa27001e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1af9837addfc6fd3829fac3df8376958b7dbfbc7', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'f54690ff4578b7383feadd6420b14df1c79d398b', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '5013c67ee0ac8bd9495209fb5854a36665317d84', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '41cd7f0989ff44be01d78475e03486b2fb158911', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '6f047db81aae911ed4553fecda7baacdc5ff9209', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'b342e899b13489045a82051e563ff56c027107e8', sectionTitle: "Account" }), h("div", { key: '709be895334d0a4963ceeb762ac6e66a5a603d07', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1e14ae8f0b329038ee2aea938be0ab4c1d2c35c9', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '54ef8f31b5dd0698d50efe617db9fbdb8a2088eb', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '3cbe4043e92bc3d2a07d2970473b06bd92e56f33', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '482efcf4498b79cf724a50dd0d3ba0f38d02576d', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '7b3b961659e263e83268e178991627d04a2fcd46', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '49b355b672f7fabe75798931e7e36bb1ccfe7370', sectionTitle: 'Metadata' }), h("div", { key: '66669969009dda1eacc194a4ad035836e5fd83c7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5700a8404cb548fd4c2a62fde70e56bd78ea8ac6', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '62711161d74a4d4e76ea5dba50cdf658722ba3a5' }, this.loading && h(PayoutDetailsLoading, { key: '170bf58456fb93c687a9e5b71e364ed6d54ec965' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'eafc4215df8ecba2f3e767e91df54a67c48e0e69', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '849a324f0d5f545e502c1632a5af30da3f6caf74', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'ae0b4f158d3baf397880061f6fe25916ca870ac6', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2e2f16f8c1e2f5b34fe986a311be4ae084d385ab', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '724abe3799d1a1c8f9a54130af715a2057218510', title: "ID", value: this.payout.id }), h("div", { key: '7ac70b4b6eee073384e223b01304d0ad0aaf0a64', class: "m-4" }, h(Button, { key: 'fc78f5a3b14e58aa3861592e81bc60c155d520e3', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9ebede365566df145b3412b24d255e1b90740541', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '71cfc2676e1ac51b44de391547589fafb5189266', sectionTitle: "Details" }), h("div", { key: 'cba9946a2406c577d3b190cfbfe4b1eeaa27001e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1af9837addfc6fd3829fac3df8376958b7dbfbc7', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'f54690ff4578b7383feadd6420b14df1c79d398b', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '5013c67ee0ac8bd9495209fb5854a36665317d84', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '41cd7f0989ff44be01d78475e03486b2fb158911', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '6f047db81aae911ed4553fecda7baacdc5ff9209', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'b342e899b13489045a82051e563ff56c027107e8', sectionTitle: "Account" }), h("div", { key: '709be895334d0a4963ceeb762ac6e66a5a603d07', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1e14ae8f0b329038ee2aea938be0ab4c1d2c35c9', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '54ef8f31b5dd0698d50efe617db9fbdb8a2088eb', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '3cbe4043e92bc3d2a07d2970473b06bd92e56f33', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '482efcf4498b79cf724a50dd0d3ba0f38d02576d', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '7b3b961659e263e83268e178991627d04a2fcd46', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'ea5e5e83e0889ee8b542fba2ddaedc7c0adcf15a', sectionTitle: 'Metadata' }),
+            h("div", { key: '52ed0e8f84b2a22e9846040877850b336db53a2a', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '50e37d3e2a27191b6e4899fcef64f9bd39241c9e', metadata: this.payout.metadata }))
+        ])))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

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

@@ -8,7 +8,6 @@ import { makeGetPayoutCSV } from "./get-payout-csv";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class PayoutDetails {
     constructor() {
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.errorMessage = null;
         this.handleErrorEvent = (event) => {
             this.errorMessage = event.detail.message;
@@ -35,8 +34,7 @@ export class PayoutDetails {
             });
             this.getPayoutCSV = makeGetPayoutCSV({
                 authToken: this.authToken,
-                service: new PayoutService(),
-                apiOrigin: this.apiOrigin
+                service: new PayoutService()
             });
         }
         else {
@@ -95,26 +93,6 @@ export class PayoutDetails {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
             }
         };
     }