@justifi/webcomponents 6.12.3 → 6.12.4

package/dist/cjs/justifi-checkouts-list.cjs.entry.js

@@ -3,24 +3,25 @@
 var index = require('./index-p7cvUYAE.js');
 require('./config-state-BIgGhhe9.js');
 require('./dinero-BwNN_k7x.js');
-var Plaid = require('./Plaid-BlSGeGpn.js');
-require('./Pagination-Dediz133.js');
+var Plaid = require('./Plaid-BRSyOOuw.js');
+var Pagination = require('./Pagination-Dediz133.js');
 require('./Business-oBifyXkW.js');
-require('./Dispute-CruQTF6_.js');
-var utils = require('./utils-DbTucCTO.js');
-var checkPkgVersion = require('./check-pkg-version-DFTQGZz1.js');
-var Analytics = require('./Analytics-DcqsdFaD.js');
-var checkout_service = require('./checkout.service-DZKdHQQq.js');
-var getSubaccounts = require('./get-subaccounts-CVK4O7th.js');
+var utils = require('./utils-FVGp6se3.js');
+var checkPkgVersion = require('./check-pkg-version-ByKpJklZ.js');
+var Analytics = require('./Analytics-BERGweGK.js');
+var checkout_service = require('./checkout.service-BZOyqXgW.js');
+var getSubaccounts = require('./get-subaccounts-B1jmSa2d.js');
 var styledHost = require('./styled-host-DAi5SuFa.js');
-require('./event-types-YOY5TKUN.js');
-var checkoutsTable = require('./checkouts-table-CCxrsy0x.js');
+var table = require('./table-DjbNv28p.js');
+var eventTypes = require('./event-types-YOY5TKUN.js');
+var utils$1 = require('./utils-BHi4j5rB.js');
+var badge = require('./badge-GBNtUypt.js');
+var parts = require('./parts-BXshb_S-.js');
+var checkoutsListParamsState = require('./checkouts-list-params-state-vGJZ6Oe2.js');
 require('./index-W-zoNiyM.js');
-require('./utils-BHi4j5rB.js');
-require('./package-bM0MyhTf.js');
+require('./package-B6L3zyfG.js');
 require('./Api-Bukk55YZ.js');
-require('./badge-GBNtUypt.js');
-require('./parts-BXshb_S-.js');
+require('./spinner-C6ZGOB2P.js');
 
 const makeGetCheckouts = ({ accountId, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -51,29 +52,108 @@ const makeGetCheckouts = ({ accountId, authToken, service }) => async ({ params,
     }
 };
 
+const MapCheckoutStatusToBadge = (status) => {
+    const statusToBadgeProps = {
+        created: {
+            variant: badge.BadgeVariant.PRIMARY,
+            title: 'The checkout has been created',
+            text: 'Created',
+        },
+        completed: {
+            variant: badge.BadgeVariant.SUCCESS,
+            title: 'The checkout has been completed',
+            text: 'Completed',
+        },
+        attempted: {
+            variant: badge.BadgeVariant.SECONDARY,
+            title: 'The checkout has been attempted',
+            text: 'Attempted',
+        },
+        expired: {
+            variant: badge.BadgeVariant.DANGER,
+            title: 'The checkout has expired',
+            text: 'Expired',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return index.h(badge.Badge, Object.assign({}, badgeProps));
+};
+
+const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
+const checkoutTableColumns = {
+    created_at: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The date each checkout occurred" }, "Processed On")),
+    payment_amount: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
+    payment_description: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The description of each checkout" }, "Payment Description")),
+    sub_account_name: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
+    payment_mode: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
+    status: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The current status of each checkout" }, "Status")),
+};
+const checkoutTableCells = {
+    created_at: (checkout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, index.h("div", { class: "fw-bold" }, utils$1.formatDate(checkout.created_at)), index.h("div", { class: "fw-bold" }, utils$1.formatTime(checkout.created_at)))),
+    payment_amount: (checkout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, checkout.formattedPaymentAmount(checkout.payment_amount))),
+    payment_description: (checkout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, checkout.payment_description)),
+    sub_account_name: (checkout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, checkout.sub_account_name)),
+    payment_mode: (checkout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, checkout.payment_mode)),
+    status: (checkout, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, MapCheckoutStatusToBadge(checkout.status))),
+};
+
 const JustifiCheckoutsList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.clickEvent = index.createEvent(this, "click-event", 7);
         this.errorEvent = index.createEvent(this, "error-event", 7);
-        this.errorMessage = null;
-        this.columns = checkoutsTable.defaultColumnsKeys;
-        this.handleErrorEvent = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        this.columns = defaultColumnsKeys;
+        this.checkouts = [];
+        this.subAccounts = [];
+        this.loading = true;
+        this.paging = Pagination.pagingDefaults;
+        this.pagingParams = {};
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: eventTypes.TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: eventTypes.TableClickActions.next });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedCheckoutID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedCheckoutID)
+                return;
+            const checkoutData = this.checkouts.find((checkout) => checkout.id === clickedCheckoutID);
+            this.clickEvent.emit({ name: eventTypes.TableClickActions.row, data: checkoutData });
         };
     }
     componentWillLoad() {
         checkPkgVersion.checkPkgVersion();
         this.analytics = new Analytics.JustifiAnalytics(this);
+        this.checkoutsTable = new table.Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
         this.initializeGetData();
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
+        checkoutsListParamsState.onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        checkoutsListParamsState.onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
-    propChanged() {
+    authPropChanged() {
         this.initializeGetData();
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
+    }
+    pagingOrColumnsChanged() {
+        if (this.getCheckouts) {
+            this.fetchData();
+        }
     }
     initializeGetData() {
         this.initializeGetCheckouts();
@@ -85,7 +165,7 @@ const JustifiCheckoutsList = class {
             this.getCheckouts = makeGetCheckouts({
                 accountId: accountToUse,
                 authToken: this.authToken,
-                service: new checkout_service.CheckoutService()
+                service: new checkout_service.CheckoutService(),
             });
         }
         else {
@@ -102,17 +182,100 @@ const JustifiCheckoutsList = class {
             this.getSubAccounts = getSubaccounts.makeGetSubAccounts({
                 primaryAccountId: this.accountId,
                 authToken: this.authToken,
-                service: new getSubaccounts.SubAccountService()
+                service: new getSubaccounts.SubAccountService(),
             });
         }
     }
+    fetchData() {
+        if (!this.getCheckouts) {
+            return;
+        }
+        this.loading = true;
+        this.getCheckouts({
+            params: this.checkoutParams,
+            onSuccess: async ({ checkouts, pagingInfo }) => {
+                this.checkouts = checkouts;
+                this.paging = pagingInfo;
+                this.checkoutsTable.collectionData = this.checkouts;
+                const shouldFetchSubAccounts = this.checkoutsTable.columnKeys.includes('sub_account_name');
+                if (shouldFetchSubAccounts) {
+                    await this.fetchSubAccounts();
+                }
+                else {
+                    this.loading = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    async fetchSubAccounts() {
+        if (!this.getSubAccounts) {
+            this.loading = false;
+            return;
+        }
+        this.getSubAccounts({
+            params: this.subAccountParams,
+            onSuccess: ({ subAccounts }) => {
+                this.subAccounts = subAccounts;
+                this.checkouts = this.checkouts.map((checkout) => {
+                    var _a;
+                    checkout.sub_account_name = (_a = this.subAccounts.find((subAccount) => subAccount.id === checkout.account_id)) === null || _a === void 0 ? void 0 : _a.name;
+                    return checkout;
+                });
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get checkoutParams() {
+        const requestParams = checkoutsListParamsState.getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
+    }
+    get subAccountParams() {
+        const accountIdNumbers = this.checkouts.map((checkout) => checkout.account_id);
+        const uniqueAccountIds = [...new Set(accountIdNumbers)];
+        const accountIdString = uniqueAccountIds.join(',');
+        return { sub_account_id: accountIdString };
+    }
+    get entityId() {
+        return this.checkouts.map((checkout) => checkout.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.checkoutsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '27491f40eb96742cee1fe81023a9e423ab5b22a5' }, index.h("checkouts-list-core", { key: '2b2526aa7dee3cd216bc481144d3239a5389872c', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (index.h(styledHost.StyledHost, { key: '2f9efac8723333029415ef131516946912bb313c' }, index.h(table.TableWrapper, { key: '024c7a532533721acda9740a0888b1c15fa624fe' }, index.h(table.TableComponent, { key: '06bf1c6db731eb5857b08615222ca47a85ffc4a8' }, index.h(table.TableHead, { key: '0754f9cd87a3b32a5368e7fb7538071cf6be0505' }, index.h(table.TableHeadRow, { key: '5db4c5beea0e6e9afc29e16b5789a32ad94509dd' }, this.checkoutsTable.columnData.map((column) => column))), index.h(table.TableBody, { key: '9140294035b04b549578d74374271f8a9fd78162' }, index.h(table.TableLoadingState, { key: 'bf495d00b9bc4ee28b67c8f1b3258306f9202142', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), index.h(table.TableEmptyState, { key: '92f8a1245cc022fa3b254bb1fe8d659f75c62923', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), index.h(table.TableErrorState, { key: '2e6ab100026afb29f199dd33e52de5ae77e6576c', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.checkoutsTable.rowData.map((data, index$1) => (index.h(table.TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h(table.TableFoot, { key: '3a1b55572eb0fc2ffcef1a39f6bfae5693056752' }, index.h(table.TableFootRow, { key: 'f61a3cc86fda3ec95075381403916f5fb1c46ca6' }, index.h(table.TableFootCell, { key: '7d937a0d228062f42f49dca5bdb436d54354563e', colSpan: this.checkoutsTable.columnData.length }, index.h("pagination-menu", { key: '05454876b7faeeb73fb8f896a2425e5f9db12ee3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
-        "accountId": ["propChanged"],
-        "authToken": ["propChanged"],
-        "subAccountId": ["propChanged"]
+        "accountId": ["authPropChanged"],
+        "authToken": ["authPropChanged"],
+        "subAccountId": ["authPropChanged"],
+        "pagingParams": ["pagingOrColumnsChanged"],
+        "columns": ["pagingOrColumnsChanged"]
     }; }
 };
 

package/dist/cjs/justifi-dispute-management.cjs.entry.js

@@ -1,15 +1,16 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
-var Plaid = require('./Plaid-BlSGeGpn.js');
-var Analytics = require('./Analytics-DcqsdFaD.js');
-var checkPkgVersion = require('./check-pkg-version-DFTQGZz1.js');
-var Dispute = require('./Dispute-CruQTF6_.js');
-var utils = require('./utils-DbTucCTO.js');
-var dispute_service = require('./dispute.service-BbtwY673.js');
+var Plaid = require('./Plaid-BRSyOOuw.js');
+var Analytics = require('./Analytics-BERGweGK.js');
+var checkPkgVersion = require('./check-pkg-version-ByKpJklZ.js');
+var utils = require('./utils-FVGp6se3.js');
+var eventTypes = require('./event-types-AU1B76Vm.js');
+var styledHost = require('./styled-host-DAi5SuFa.js');
+require('./event-types-YOY5TKUN.js');
 require('./utils-BHi4j5rB.js');
 require('./dinero-BwNN_k7x.js');
-require('./package-bM0MyhTf.js');
+require('./package-B6L3zyfG.js');
 require('./Api-Bukk55YZ.js');
 require('./config-state-BIgGhhe9.js');
 require('./index-W-zoNiyM.js');
@@ -22,7 +23,7 @@ const makeGetDispute = ({ id, authToken, service }) => async ({ onSuccess, onErr
         const response = await service.fetchDispute(id, authToken);
         if (!response.error) {
             const pagingInfo = Object.assign({}, response.page_info);
-            const dispute = new Dispute.Dispute(response.data);
+            const dispute = new Plaid.Dispute(response.data);
             onSuccess({ dispute, pagingInfo });
         }
         else {
@@ -49,44 +50,90 @@ const JustifiDisputeManagement = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.errorEvent = index.createEvent(this, "error-event", 7);
-        this.errorMessage = null;
-        this.handleErrorEvent = event => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
-        };
+        this.isLoading = true;
+        this.showDisputeResponseForm = false;
+        this.fetchDisputePending = false;
+    }
+    scheduleFetchDispute() {
+        if (!this.getDispute || this.fetchDisputePending) {
+            return;
+        }
+        this.fetchDisputePending = true;
+        queueMicrotask(() => {
+            this.fetchDisputePending = false;
+            if (this.getDispute) {
+                this.fetchData();
+            }
+        });
+    }
+    disputeResponseHandler(event) {
+        if (event.detail.name === eventTypes.DisputeManagementClickActions.respondToDispute) {
+            this.showDisputeResponseForm = true;
+        }
+        if (event.detail.name === eventTypes.DisputeManagementClickActions.cancelDispute) {
+            this.showDisputeResponseForm = false;
+        }
+    }
+    disputeSubmittedHandler() {
+        this.fetchData();
     }
     componentWillLoad() {
         checkPkgVersion.checkPkgVersion();
         this.analytics = new Analytics.JustifiAnalytics(this);
         this.initializeGetDispute();
     }
+    componentDidLoad() {
+        this.scheduleFetchDispute();
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
     propChanged() {
         this.initializeGetDispute();
+        this.scheduleFetchDispute();
     }
     initializeGetDispute() {
         if (this.disputeId && this.authToken) {
             this.getDispute = makeGetDispute({
                 id: this.disputeId,
                 authToken: this.authToken,
-                service: new dispute_service.DisputeService()
+                service: new eventTypes.DisputeService(),
             });
         }
         else {
-            this.errorMessage = 'Dispute ID and Auth Token are required';
             this.errorEvent.emit({
-                message: this.errorMessage,
+                message: 'Dispute ID and Auth Token are required',
                 errorCode: Plaid.ComponentErrorCodes.MISSING_PROPS,
                 severity: Plaid.ComponentErrorSeverity.ERROR,
             });
         }
     }
+    fetchData() {
+        if (!this.getDispute) {
+            return;
+        }
+        this.isLoading = true;
+        this.getDispute({
+            onSuccess: ({ dispute }) => {
+                this.dispute = new Plaid.Dispute(dispute);
+                this.isLoading = false;
+                if (this.dispute.status !== Plaid.DisputeStatus.needsResponse) {
+                    this.showDisputeResponseForm = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.isLoading = false;
+            },
+        });
+    }
     render() {
-        return (index.h("justifi-dispute-management-core", { key: 'db9bf0998d45a71d9c2a72f4cedbe4276e67a238', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (index.h(styledHost.StyledHost, { key: 'a9185f55e6f2704ec8ba85c5061e8c46338481e3' }, index.h("div", { key: 'e4851b3fa85ec428929b7868c0748b56c0172c8b' }, this.showDisputeResponseForm ? (index.h("dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (index.h("dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading })))));
     }
     static get watchers() { return {
         "disputeId": ["propChanged"],