@justifi/webcomponents 4.17.0 → 4.19.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: 'a0cd592094f7f69955469de84addde1d4bc5af4d', 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/payment-method-form/payment-method-form.js

@@ -13,6 +13,7 @@ export class PaymentMethodForm {
             const eventTypeMessage = MessageEventType[this.paymentMethodFormType];
             if (eventType === eventTypeMessage.ready) {
                 this.paymentMethodFormReady.emit(data);
+                this.sendStyleOverrides();
             }
             else if (eventType === eventTypeMessage.tokenize) {
                 this.paymentMethodFormTokenized.emit(data);
@@ -70,14 +71,13 @@ export class PaymentMethodForm {
         (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
     }
     render() {
-        return (h(Host, { key: '91a69ce3f918c98248d6bb5df6dc5ec0dffe3c26' }, h("iframe", { key: '99c06be5a78a3849e687f7f95f8fe3382cc2c4cd', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+        return (h(Host, { key: '10987c92745fbff8bb85367db69b76e2bc786c88' }, h("iframe", { key: '0622dd0201a04a3c918fd3d175d2a29f24609759', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, onLoad: () => {
                 iFrameResize({
                     scrollbars: false,
                 }, this.iframeElement);
-                this.sendStyleOverrides();
             } })));
     }
     static get is() { return "justifi-payment-method-form"; }

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

@@ -1,17 +1,28 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { tableExportedParts } from "../table/exported-parts";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 export class PaymentsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
             const newParams = Object.assign({}, this.params);
             delete newParams.after_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
+            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
         };
         this.handleClickNext = (afterCursor) => {
             const newParams = Object.assign({}, this.params);
             delete newParams.before_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
+            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPaymentID)
+                return;
+            this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
+        };
+        this.handleDateChange = (name, value) => {
+            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
         };
         this.getPayments = undefined;
         this.payments = [];
@@ -20,14 +31,14 @@ export class PaymentsListCore {
         this.paging = pagingDefaults;
         this.params = undefined;
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     componentWillLoad() {
         if (this.getPayments) {
             this.fetchData();
         }
     }
-    updateOnPropChange() {
-        this.fetchData();
-    }
     fetchData() {
         this.loading = true;
         this.getPayments({
@@ -48,52 +59,63 @@ export class PaymentsListCore {
             },
         });
     }
-    ;
+    get entityId() {
+        return this.payments.map((payment) => payment.id);
+    }
+    get columnData() {
+        return [
+            ['Made On', 'The date and time each payment was made'],
+            ['Amount', 'The dollar amount of each payment'],
+            ['Description', 'The payment description, if you provided one'],
+            ['Cardholder', 'The name associated with the payment method'],
+            ['Payment Method', 'The brand and last 4 digits of the payment method'],
+            ['Status', 'The current status of each payment'],
+            ['Payment ID', 'The unique identifier of each payment'],
+        ];
+    }
+    get rowData() {
+        return this.payments.map((payment) => [
+            {
+                type: 'head',
+                value: `
+          <div class='fw-bold'>${formatDate(payment.created_at)}</div>
+          <div class='fw-bold'>${formatTime(payment.created_at)}</div>
+        `,
+            },
+            formatCurrency(payment.amount),
+            payment.description,
+            payment.payment_method.payersName,
+            payment.payment_method.lastFourDigits,
+            {
+                type: 'inner',
+                value: MapPaymentStatusToBadge(payment.status),
+            },
+            payment.id,
+        ]);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
+    }
     render() {
-        return (h(Host, { key: 'd26988b04edadef37245875e037f1f371f1dc24b' }, h("justifi-table", { key: '25ab7f3b3d698e3750f66c99b7bda5a5bbdd11e6', rowClickHandler: e => {
-                const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
-                if (!clickedPaymentID) {
-                    return;
+        var _a, _b;
+        return (h(StyledHost, { key: 'e4a4b64b2927a009f7ad4e9e2ebb4c020401423c', exportparts: tableExportedParts }, h("div", { key: '6ac1c84338b84972ca9b001ecd2b90134c99de6b', class: "row gy-3 mb-4" }, h("div", { key: '1d279ec66bc0755b876e29f06ac24d51baa77caa', class: "col-2" }, h("form-control-date", { key: '65b29c031021f3f782c9a4597167dc5e3a44e7da', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: 'a032497a94cc8108fda6efbb741069407e1a5afe', class: "col-2" }, h("form-control-date", { key: '5dd62ebdbf3836567a9ccb03dec850ebe675cb79', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("div", { key: 'be4094afd3aec1d742d9d3245c2f6fc50cb95fa0', class: "table-wrapper" }, h("table", { key: 'ed493e35f2bddd59d1034dffe2bcd8b54a6390d6', class: "table table-hover" }, h("thead", { key: 'fae77bda1ffc35ac5414743ab51c2fe1dfbbc29e', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '5be3b1e9883d337046c386046565fb6ac3366324', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: 'ba950a1da1ec0dffd7bc8457cdb3ce65d0f8b69b', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '8d13d8f6b64377f560d06410c09d24293708b6a8', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c75d61977b26ca5d4aa3711bae1ce6e571b3e3b2', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '08e3f88116de5783f018a0c06d21d0d9cc4f5feb', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => {
+                let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
+                if (nestedHtml) {
+                    return h("td", { part: "table-cell", innerHTML: dataEntry.value });
                 }
-                this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
-            }, entityId: this.payments.map((payment) => payment.id), columnData: [
-                ['Made On', 'The date and time each payment was made'],
-                ['Amount', 'The dollar amount of each payment'],
-                ['Description', 'The payment description, if you provided one'],
-                ['Cardholder', 'The name associated with the payment method'],
-                ['Payment Method', 'The brand and last 4 digits of the payment method'],
-                ['Status', 'The current status of each payment'],
-                ['Payment ID', 'The unique identifier of each payment']
-            ], rowData: this.payments.map((payment) => ([
-                {
-                    type: 'head',
-                    value: `
-                    <div class='fw-bold'>${formatDate(payment.created_at)}</div>
-                    <div class='fw-bold'>${formatTime(payment.created_at)}</div>
-                  `,
-                },
-                formatCurrency(payment.amount),
-                payment.description,
-                payment.payment_method.payersName,
-                payment.payment_method.lastFourDigits,
-                {
-                    type: 'inner',
-                    value: MapPaymentStatusToBadge(payment.status)
-                },
-                payment.id
-            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+                else {
+                    return h("td", { part: "table-cell" }, dataEntry);
+                }
+            }))))), this.paging && (h("tfoot", { key: '728f671ab03923c90e11901a0d3aac4bc30e72a7', class: "sticky-bottom" }, h("tr", { key: 'd0df9b7c857287eec9568157ecf8f547a01f2fc5', class: "table-light align-middle" }, h("td", { key: 'e0de54912240b3e812f37ea675b2eef50d9545c4', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: 'f2d7846030a5aaa0c2311cad61f4d5865440a904', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     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 "../../ui-components";
 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: 'fdf7905cdc7696414b765d61d0f78c7193cbbc76' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'f79827c287d68484a87232ae956a1c15e3d7044d', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'dfa9c228f2cd1b0b2d14dc6ce44478ee8fc35d00', 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: '6b5907e3f7753d4e2f6ba59bfe509d97e2a4c1c0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '63b7497217a00268190eaea1475639fc5e0b43ca', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'e26e56abbac3e12584c187f6f1b560b0f4b33a6f', title: "ID", value: this.payout.id }), h("div", { key: 'e84dd653fb1adc566b0afbfdfc87cce40ed47280', class: "m-4" }, h("button", { key: 'fac0022786dc03349a65dc54729dc2f508c9441f', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9cf642b803c59146895b762eaff40f5026c9f94b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '90ed8aafabf9eebb47da15c6c8b8d1f527d23557', sectionTitle: "Details" }), h("div", { key: '592b8489fa30441bbf11a52d3daf6a2debcc121f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0885f3ece509936d1e1bad64d4a998fbc487ee3a', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b8a7da2bfeada94c8c7c080b516c1bc7fc26f414', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'd8928341e89161d4bafc2940f1aa738b345779dd', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '570bd2a2d44f094870e61debca61c2b5aa772679', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '2882865db185d1668103d819e62cf61edc711697', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'f9735ff73c650ad318d771df5c22c7d8834a09f6', sectionTitle: "Account" }), h("div", { key: 'd7d53fd77e704035a19dc15bc04ee06dfaa0c51a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '486ae1c4ae990928bf24cc687cb4456bbc6e18ea', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '528d7d6a299aa1019125f34fc903ea622d09de53', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'eafb132e84de81d41bd154aec55974d8496995dd', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '7f565f8dfacab4cf8edc7025d839dff1d8de2719', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '61338f5ed539d70b4caa08ffa200d8e47f52ebde', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'cea128826f004ece9e6c29c97c07e98a3d45706c', sectionTitle: 'Metadata' }), h("div", { key: 'bf884c3dafa50cd1b8e0d98711f0fe5fc9d60391', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2d92e2f8d6f032cbaff741da43ca97424b8decaf', 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,9 +1,37 @@
-import { Host, h } from "@stencil/core";
-import { PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults } from "../../api";
+import { h } from "@stencil/core";
+import { PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults, } from "../../api";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
+import { DownloadIcon } from "../../assets/download-icon";
 import { tableExportedParts } from "../table/exported-parts";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 export class PayoutsListCore {
     constructor() {
+        this.downloadCSV = (payoutId) => {
+            this.getPayoutCSV({
+                payoutId,
+                onError: () => {
+                    this.errorEvent.emit({
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        message: 'Failed to download CSV',
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                },
+            });
+        };
+        this.handleDateChange = (name, value) => {
+            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        };
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
+        };
+        this.handleClickNext = (afterCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.before_cursor;
+            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+        };
         this.mapStatusToBadge = (status) => {
             switch (status) {
                 case PayoutStatuses.scheduled:
@@ -15,36 +43,33 @@ export class PayoutsListCore {
                 case PayoutStatuses.canceled:
                     return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
                 case PayoutStatuses.forwarded:
-                    return `<span class="badge bg-secondary" title='This payout initially failed; the funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
+                    return `<span class="badge bg-secondary" title='The funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
                 case PayoutStatuses.paid:
                     return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
             }
         };
-        this.handleClickPrevious = (beforeCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.after_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
-        };
-        this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
+        this.rowClickHandler = (e) => {
+            const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPayoutID)
+                return;
+            this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
         };
         this.getPayouts = undefined;
+        this.getPayoutCSV = undefined;
         this.payouts = [];
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
         this.params = undefined;
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     componentWillLoad() {
         if (this.getPayouts) {
             this.fetchData();
         }
     }
-    updateOnPropChange() {
-        this.fetchData();
-    }
     fetchData() {
         this.loading = true;
         this.getPayouts({
@@ -59,64 +84,65 @@ export class PayoutsListCore {
                 this.errorEvent.emit({
                     errorCode: code,
                     message: error,
-                    severity
+                    severity,
                 });
                 this.loading = false;
             },
         });
     }
-    ;
-    render() {
-        return (h(Host, { key: 'dcbc7c461ec76c6a7b94328a4691f12fa4982c18', exportedparts: tableExportedParts }, h("justifi-table", { key: '7a90e1951f33b03fadb4cb9ac75f6932566042b1', rowClickHandler: (e) => {
-                const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
-                if (!clickedPayoutID) {
-                    return;
-                }
-                this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
-            }, columnData: [
-                ['Paid Out On', 'The date each transaction occurred'],
-                ['Type', 'The type of each transaction'],
-                ['Account', 'The ID of the account associated with each payout'],
-                ['Paid Out To', 'The bank account to which each payout was transferred'],
-                ['Payments', 'Sum of payments in each payout'],
-                ['Refunds', 'Sum of refunds in each payout'],
-                ['Fees', 'Sum of fees in each payout'],
-                ['Other', 'Sum of less common transactions in each payout (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']
-            ], entityId: this.payouts.map((payout) => payout.id), rowData: this.payouts.map((payout) => ([
-                {
-                    type: 'head',
-                    value: `
-                    <div class='fw-bold'>${formatDate(payout.created_at)}</div>
-                    <div class='fw-bold'>${formatTime(payout.created_at)}</div>
-                  `,
-                },
-                payout.payout_type,
-                payout.account_id,
-                `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
-                formatCurrency(payout.payments_total),
-                formatCurrency(payout.refunds_total),
-                formatCurrency(payout.fees_total),
-                formatCurrency(payout.other_total),
-                formatCurrency(payout.amount),
-                {
-                    type: 'inner',
-                    value: this.mapStatusToBadge(payout.status)
-                }
-            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+    get entityId() {
+        return this.payouts.map((payout) => payout.id);
     }
-    static get is() { return "payouts-list-core"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payouts-list.scss"]
-        };
+    get columnData() {
+        return [
+            ['Paid Out On', 'The date each transaction occurred'],
+            ['Type', 'The type of each transaction'],
+            ['Account', 'The ID of the account associated with each payout'],
+            ['Paid Out To', 'The bank account to which each payout was transferred'],
+            ['Payments', 'Sum of payments in each payout'],
+            ['Refunds', 'Sum of refunds in each payout'],
+            ['Fees', 'Sum of fees in each payout'],
+            ['Other', 'Sum of less common transactions in each payout'],
+            ['Payout Amount', 'The net sum of all transactions in each payout'],
+            ['Status', 'The real-time status of each payout'],
+            ['Actions', ''],
+        ];
     }
-    static get styleUrls() {
-        return {
-            "$": ["payouts-list.css"]
-        };
+    get rowData() {
+        return this.payouts.map((payout) => [
+            {
+                type: 'head',
+                value: `
+          <div class='fw-bold'>${formatDate(payout.created_at)}</div>
+          <div class='fw-bold'>${formatTime(payout.created_at)}</div>
+        `,
+            },
+            payout.payout_type,
+            payout.account_id,
+            `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
+            formatCurrency(payout.payments_total),
+            formatCurrency(payout.refunds_total),
+            formatCurrency(payout.fees_total),
+            formatCurrency(payout.other_total),
+            formatCurrency(payout.amount),
+            { type: 'inner', value: this.mapStatusToBadge(payout.status) },
+            (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } })),
+        ]);
     }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
+    }
+    render() {
+        return (h(StyledHost, { key: '594c52003f897f4c50f79935e42a7042fb5ec168', exportedparts: tableExportedParts }, h("div", { key: 'f2b1d971e1e7bc5596459c071c3aa931ba4cb4b9', class: "row gy-3 mb-4" }, h("div", { key: 'd98e3ed56421493a60bd0a285079aa99ae705506', class: "col-2" }, h("form-control-date", { key: 'c9c899884bcc6fa6d306b95473ef0a7354e57bd5', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '0059a75bf2f478b107d59bd9d7cc29de10dffe57', class: "col-2" }, h("form-control-date", { key: 'ef9a31ac8a8e7336386664b70289ee34677152a4', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '65da1114a66ac4cdf8d6ec012a42b2f760af5c76', class: "table-wrapper" }, h("table", { key: 'd68d8f61835cc4dc5dc988ff61843e6254494ace', class: "table table-hover" }, h("thead", { key: 'aa691db8fbfbcdad59acbdc1ef38497b552928ab', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'aa9f61cbf05b9420026861cb14e6a30a6c9e347e', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: 'cf0127f26e8bc5b7afbbfc4a36fab4de948d1727', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'd6b832786c4959176974c7a343442c8d1c50b5c2', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '398a20957f76ba14e1b0677fbd6fbfbacce61fbb', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd9f755a07a6f8cd4967eac60beff92f36322dcdd', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: '503fa3a3a7ffe5d52b614153b286dd0326c02091', class: "sticky-bottom" }, h("tr", { key: 'e3af74b96bfc1f5ac1f0f0655eaed096102d0e89', class: "table-light align-middle" }, h("td", { key: 'a53f9d37181ea29a9fcb6ab46b2daf7cc66509be', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: 'b0779289444747e0b18bb63e6a17cdc89bd390ca', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+    }
+    static get is() { return "payouts-list-core"; }
     static get properties() {
         return {
             "getPayouts": {
@@ -138,6 +164,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": ""
+                }
             }
         };
     }