@justifi/webcomponents 4.17.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: '30e137216bfc266a9a4eebd8e5d3b5b00d97fdfc', 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: 'd26988b04edadef37245875e037f1f371f1dc24b' }, h("justifi-table", { key: '25ab7f3b3d698e3750f66c99b7bda5a5bbdd11e6', 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: '1764253926acabb4fcdc546dc8f5e07560b930b6' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '6ae394b602d52259dcb572d3a0285ffc284ca5ce', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'af62dd6b22392a3a1d3a66785e47e6a3c1501163', 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: '12877fbc28a24a4e2c0b87f6f7400616c8b1dfb1', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '16f30e456e5bc2a4e307f00545a2b5c504be9ec8', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '57dc008142b99346db4a873989d6bf11ee063dac', title: "ID", value: this.payout.id })), h("div", { key: 'b095ec6cd488fd43328d2ba2d2d758a45a6e6601', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '7370109528db056e6461127234b037734e4673bd', sectionTitle: "Details" }), h("div", { key: 'eb0373e8f0389d415e5fedb90e4961bf78e3f6ab', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '7896af63571e147828252b4bab8efb7c2643281f', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'cd8e2f801982f0fd9e84f5c5b8fb8bb29e81dcb3', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '221321757676642619e59ad335e5dfe35c819afb', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '7dc849e5b73f171196d6b54b27f3259cf723f3c3', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '8dabc9e941d72c250af05d8ef609bbdf79d6fd6b', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '682ffec70fffbb816a6a3285ea41b892b14c2f20', sectionTitle: "Account" }), h("div", { key: 'cf5eb240de052d1606b80f56ce0a65df409ccff1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'daa1eef6b21d5d4a682a4c448d7774212d22a284', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '15e729f8a8af79ced76912253abb1d1d7eb102d5', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'a9391287fe87deddb6777aeaa3800c1ee1df6268', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'b4346e6ad32cfda774e6c3730da4d598c1b3baf2', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'e412bc591706f2cad6f0bc71e0e0e039897a4287', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'e97b9b0824b0502e37b48a4c8c0ebc5bbd4bc210', sectionTitle: 'Metadata' }), h("div", { key: '8f179fbae2ce0eb92d173d268bff2e07ad61d5b8', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'a3dfe22717eec564d2cbb6f8e4ebaed4ac87b086', 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: 'dcbc7c461ec76c6a7b94328a4691f12fa4982c18', exportedparts: tableExportedParts }, h("justifi-table", { key: '7a90e1951f33b03fadb4cb9ac75f6932566042b1', 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: 'e81d11c902a038a7d5ae41c6b3b9b84c0d4eda87' }, h("justifi-table", { key: 'c37b037ed04803465ecd2a026899eca133814033', 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": {