@justifi/webcomponents 4.16.0 → 4.18.0

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -13,13 +13,12 @@ export class PaymentMethodSelector {
         this.paymentMethodSelected.emit(event.target.value);
     }
     render() {
-        return (h("div", { key: '2e7b9d75ee4823f1aead28b7a0ca4a2861ca0646', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
+        return (h("div", { key: '1076a0e9d658245823ace79acde858bdaec85e65', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
     }
     static get is() { return "justifi-payment-method-selector"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["payment-method-selector.scss"]
+            "$": ["payment-method-selector.css"]
         };
     }
     static get styleUrls() {

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

@@ -1,6 +1,7 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class PaymentsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
@@ -13,6 +14,9 @@ export class PaymentsListCore {
             delete newParams.before_cursor;
             this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
         };
+        this.handleDateChange = (name, value) => {
+            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        };
         this.getPayments = undefined;
         this.payments = [];
         this.loading = true;
@@ -50,7 +54,7 @@ export class PaymentsListCore {
     }
     ;
     render() {
-        return (h(Host, { key: 'df03cbe50691cb0059217171b0b1a1920d3c95a3' }, h("justifi-table", { key: 'bda00f35a632e0bdc53e049d5af65fba44236693', rowClickHandler: e => {
+        return (h(StyledHost, { key: '84fde18eaf36e21f2b9107bc0527d3ca48d0bf49' }, h("div", { key: '57a7084b5b9fa143209131534119407ed22a6df9', class: "row gy-3 mb-4" }, h("div", { key: 'af0f206b7b2d330614e3c70dc32425a66637b47e', class: "col-2" }, h("form-control-date", { key: '277748b548069199308c2263dffb57bf5327cc1f', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: '8ec2b609f01fe8ab57572cfcefc2842e191579bc', class: "col-2" }, h("form-control-date", { key: 'b646dab8c653b31b2810083335f3e581e86e0344', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("justifi-table", { key: '1f79a0d94391cdf9a86af65aeeccd9bf7d832af3', rowClickHandler: e => {
                 const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
                 if (!clickedPaymentID) {
                     return;
@@ -84,16 +88,6 @@ export class PaymentsListCore {
             ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
     }
     static get is() { return "payments-list-core"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payments-list.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payments-list.css"]
-        };
-    }
     static get properties() {
         return {
             "getPayments": {

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

@@ -5,6 +5,9 @@ import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 /**
+  * @exportedPart label: Label for inputs
+  * @exportedPart input: The input fields
+  * @exportedPart input-invalid: Invalid state for inputs
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
   * @exportedPart table-head-cell: Individual head cell

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

@@ -0,0 +1,19 @@
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
+export const makeGetPayoutCSV = ({ authToken, service }) => async ({ payoutId, onError }) => {
+    try {
+        const { data } = await service.fetchCSV(payoutId, authToken);
+        const a = document.createElement('a');
+        a.href = data.csv_url;
+        a.click();
+    }
+    catch (error) {
+        const errorMessage = getErrorMessage(error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: errorMessage,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};

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

@@ -1,9 +1,24 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class PayoutDetailsCore {
     constructor() {
+        this.downloadCSV = () => {
+            this.getPayoutCSV({
+                payoutId: this.payout.id,
+                onError: ({ error, code, severity }) => {
+                    this.errorMessage = error;
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity,
+                    });
+                },
+            });
+        };
         this.getPayout = undefined;
+        this.getPayoutCSV = undefined;
         this.payout = undefined;
         this.loading = true;
         this.errorMessage = null;
@@ -37,19 +52,9 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2f9a8760ad7629e894cea1bd6e595df184123587' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'fb409148e4fd6856cd643da159ce5ee8cdf53b6c', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '44f2600c2914b962b202c160d6a6e687aab240c3', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: 'c46150dd232d4d817f037d9f4a0a3932733c56c6', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '660a71491d69aa29367ca68af6609ea9109fcfec', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'b30cc79498c03b0d3e8d2178067534ed19681908', title: "ID", value: this.payout.id })), h("div", { key: '7aea03e4206ef6c578055d289b1674a3e4cabb6c', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8d4a7dcc120999cbe0f55caf00c16e54e8eb7a6a', sectionTitle: "Details" }), h("div", { key: '8a4ae9df85e3974692b49efc5184675e3989d516', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2c06519ee2600ade45d719f3b5c93032e702dcd9', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '89096d355e5b21eb47444eadfc9dbc50730e0c74', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'e06ffbc17132d9efe624e9aa295e2cf070a3771e', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'c30dffd25c18a6d7e25828c51202d7695f6681e0', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '635dc85d93419c1a61e0460f09dfc26927110623', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'c7a438841e8caef51e8fe9f9a291b082f281722c', sectionTitle: "Account" }), h("div", { key: '179ed86bab9a564d8f174cf1561605278e93c4e6', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '30cd1ecfcbd1d8c1f535bc2270b1f2526bd60c16', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '59b1885d0b19706808ff0c8de16f77724b0f2df9', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '651f8a31fc61c97614be47ce49da000235775a80', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '72fcca239bde20d0caf044b1e1c73eb1c1372b32', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '438a724f5fddcde519b0c0d8c68a119809be1b50', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '4628fb72059df52662ce7d3b260eafd02310a7a7', sectionTitle: 'Metadata' }), h("div", { key: 'bc538a18cec8021317d243542abd3e964baf312d', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'add1f93295b045d6f00e617ccbf34ae05b49f50a', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: 'da7690d5e4b21e8cb32651080ef2c8df29440c1b' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '4d9a7636e345bc5dd88b910add3a340e22589c52', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '91d6eb90ec40052d858f4736a9c60d9c9a96d40d', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: 'be9f9b43c294b76326f1ce63af79217b8abf5b0d', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2c8fb8d4a4b8f1517028acc410bdb4adbafe67a4', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '4ca663f7bbfa9bdf8fa01fe0b40fc5f6dc65dfbb', title: "ID", value: this.payout.id }), h("div", { key: '44b484491b5ec470270b469de15076d6d55e61d0', class: "m-4" }, h("button", { key: 'ca8b6cb61b56caebbec1eeb01e6de638865219bd', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '2f959d7c549dc1f8e4df2e8d12ab9988255aba03', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '741717a3e056163ee88452998f2d6e5b7dc0ccc1', sectionTitle: "Details" }), h("div", { key: 'd456b3a372525a0eff6c724e507ff325951fa430', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a27cf5fbc2851f74bb4813d0bd49718dfe2f7d8d', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '90f49509ff399a9c164a7aeaf7307077b59e8559', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '52ef8b50065db1a111b003e9ceadfa1cc4076b74', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'ee73a34d15af0cc677fc6d903706df3f10249bdf', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '229827b98fd76bd1dec1beeac0d99517d09dc677', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '1f4bb886e4a07b5054107aa00c2b98644e87859b', sectionTitle: "Account" }), h("div", { key: '78181a7ae216bf3b0013eee0494b4b149a2ec9c3', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '273cabd55194c104d1d421db53030601f5efa83c', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '1751e4b9d5453bc41fd3b29cf7e5d3955e375bb7', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '1d5489f81d96025bdf7d7391623ddcc1ff3a7978', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f17d8096799b7eeba7c550ad828f2ffa97b65f56', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'cf3c83de7f119738940951a9481253ed855c768e', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '458186b5bd7fb0aa954c283dee08e5090b164b27', sectionTitle: 'Metadata' }), h("div", { key: '90866a28028af6c7e46ab89c221016cd698299f2', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'ed25523342b6a751e48d2d7c11cef7e541b6ed3b', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payout-details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payout-details.css"]
-        };
-    }
     static get properties() {
         return {
             "getPayout": {
@@ -71,6 +76,26 @@ export class PayoutDetailsCore {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "getPayoutCSV": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }

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

@@ -4,6 +4,7 @@ import { makeGetPayoutDetails } from "./get-payout-details";
 import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
+import { makeGetPayoutCSV } from "./get-payout-csv";
 export class PayoutDetails {
     constructor() {
         this.handleErrorEvent = (event) => {
@@ -13,25 +14,30 @@ export class PayoutDetails {
         this.payoutId = undefined;
         this.authToken = undefined;
         this.getPayout = undefined;
+        this.getPayoutCSV = undefined;
         this.errorMessage = null;
     }
     componentWillLoad() {
         this.analytics = new JustifiAnalytics(this);
-        this.initializeGetPayout();
+        this.initializeServices();
     }
     disconnectedCallback() {
         this.analytics.cleanup();
     }
     propChanged() {
-        this.initializeGetPayout();
+        this.initializeServices();
     }
-    initializeGetPayout() {
+    initializeServices() {
         if (this.payoutId && this.authToken) {
             this.getPayout = makeGetPayoutDetails({
                 id: this.payoutId,
                 authToken: this.authToken,
                 service: new PayoutService()
             });
+            this.getPayoutCSV = makeGetPayoutCSV({
+                authToken: this.authToken,
+                service: new PayoutService()
+            });
         }
         else {
             this.errorMessage = 'Failed to load payout details. payoutId or authToken is not provided.';
@@ -46,7 +52,7 @@ export class PayoutDetails {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payout-details-core", { getPayout: this.getPayout, "onError-event": this.handleErrorEvent }));
+        return (h("payout-details-core", { getPayout: this.getPayout, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-payout-details"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +97,7 @@ export class PayoutDetails {
     static get states() {
         return {
             "getPayout": {},
+            "getPayoutCSV": {},
             "errorMessage": {}
         };
     }

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

@@ -1,7 +1,10 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults } from "../../api";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { tableExportedParts } from "../table/exported-parts";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
+import StyledHost from "../../utils/styled-host/styled-host";
+import { DownloadIcon } from "../../assets/download-icon";
 export class PayoutsListCore {
     constructor() {
         this.mapStatusToBadge = (status) => {
@@ -30,7 +33,23 @@ export class PayoutsListCore {
             delete newParams.before_cursor;
             this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
         };
+        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.getPayouts = undefined;
+        this.getPayoutCSV = undefined;
         this.payouts = [];
         this.loading = true;
         this.errorMessage = undefined;
@@ -67,7 +86,7 @@ export class PayoutsListCore {
     }
     ;
     render() {
-        return (h(Host, { key: 'ccb86be280ebe0d399eca546b37d476dd730998b', exportedparts: tableExportedParts }, h("justifi-table", { key: '171e00ed81766bec7651702b66bdd7986bd3cffe', rowClickHandler: (e) => {
+        return (h(StyledHost, { key: '469e4d0a5fcb7370d0d076e9f27cf5102235324e', exportedparts: tableExportedParts }, h("div", { key: '883f193b2da3cdd3da3f31422def69d206ead983', class: "row gy-3 mb-4" }, h("div", { key: '585684441aeded4619f9a0f03151b5e8dd2219d8', class: "col-2" }, h("form-control-date", { key: 'bc69d932f1d32074b3f0fdd2c9dba6f9601db891', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: 'd026150a6a09ad49f549ea2b5174a1ed311987dc', class: "col-2" }, h("form-control-date", { key: '2621b14359b8159270d67e53f9ad2f6464cbb467', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("justifi-table", { key: '757c9bbee39356ee23819f0e7e4d3b096bdf38f6', rowClickHandler: (e) => {
                 const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
                 if (!clickedPayoutID) {
                     return;
@@ -83,7 +102,8 @@ export class PayoutsListCore {
                 ['Fees', 'Sum of fees in each payout'],
                 ['Other', 'Sum of less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],
                 ['Payout Amount', 'The net sum of all transactions in each payout. This is the amount you\'ll see reflected on your bank statement'],
-                ['Status', 'The real-time status of each payout']
+                ['Status', 'The real-time status of each payout'],
+                ['Actions', '']
             ], entityId: this.payouts.map((payout) => payout.id), rowData: this.payouts.map((payout) => ([
                 {
                     type: 'head',
@@ -103,20 +123,11 @@ export class PayoutsListCore {
                 {
                     type: 'inner',
                     value: this.mapStatusToBadge(payout.status)
-                }
+                },
+                (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } }))
             ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
     }
     static get is() { return "payouts-list-core"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payouts-list.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payouts-list.css"]
-        };
-    }
     static get properties() {
         return {
             "getPayouts": {
@@ -138,6 +149,26 @@ export class PayoutsListCore {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "getPayoutCSV": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }

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

@@ -5,7 +5,11 @@ import { makeGetPayouts } from "./get-payouts";
 import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
+import { makeGetPayoutCSV } from "../payout-details/get-payout-csv";
 /**
+  * @exportedPart label: Label for inputs
+  * @exportedPart input: The input fields
+  * @exportedPart input-invalid: Invalid state for inputs
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
   * @exportedPart table-head-cell: Individual head cell
@@ -33,25 +37,28 @@ export class PayoutsList {
         this.accountId = undefined;
         this.authToken = undefined;
         this.getPayouts = undefined;
+        this.getPayoutCSV = undefined;
         this.errorMessage = null;
     }
     componentWillLoad() {
         this.analytics = new JustifiAnalytics(this);
-        this.initializeGetPayouts();
+        this.initializeServices();
     }
     disconnectedCallback() {
         this.analytics.cleanup();
     }
     propChanged() {
-        this.initializeGetPayouts();
+        this.initializeServices();
     }
-    initializeGetPayouts() {
+    initializeServices() {
         if (this.accountId && this.authToken) {
-            this.getPayouts = makeGetPayouts({
+            const serviceParams = {
                 id: this.accountId,
                 authToken: this.authToken,
                 service: new PayoutService(),
-            });
+            };
+            this.getPayouts = makeGetPayouts(serviceParams);
+            this.getPayoutCSV = makeGetPayoutCSV(serviceParams);
         }
         else {
             this.errorMessage = 'Account ID and Auth Token are required';
@@ -65,7 +72,7 @@ export class PayoutsList {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts, "onError-event": this.handleOnError })));
+        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleOnError })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -110,6 +117,7 @@ export class PayoutsList {
     static get states() {
         return {
             "getPayouts": {},
+            "getPayoutCSV": {},
             "errorMessage": {}
         };
     }

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

@@ -1,8 +1,9 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Api, pagingDefaults } from "../../api";
 import { formatCurrency, formatDate } from "../../utils/utils";
 import { Proceed, ProceedStatuses, ProceedStatusesSafeNames } from "../../api/Proceed";
 import { config } from "../../../config";
+import StyledHost from "../../utils/styled-host/styled-host";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -86,7 +87,7 @@ export class ProceedsList {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'a8a71597e9af52dc31faf77d3eb0adcae8d3345c' }, h("justifi-table", { key: '59a7f7eb404bc307f332e6d45b0162853f9bfcb1', rowClickHandler: (e) => {
+        return (h(StyledHost, { key: 'ea9ee482e1b439490ed258c37e75c47e5dc5f3bf' }, h("justifi-table", { key: 'a26da8b6e884e00bc0a8eac24025397fdc925d14', rowClickHandler: (e) => {
                 const clickedProceedID = e.target.closest('tr').dataset.rowEntityId;
                 if (!clickedProceedID) {
                     return;
@@ -118,16 +119,6 @@ export class ProceedsList {
     }
     static get is() { return "justifi-proceeds-list"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["proceeds-list.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["proceeds-list.css"]
-        };
-    }
     static get properties() {
         return {
             "accountId": {