@justifi/webcomponents 4.7.4 → 4.7.6

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

@@ -23,211 +23,211 @@ import { tableExportedParts } from "../table/exported-parts";
   * @exportedPart next-button-text: Text for Next button
 */
 export class PayoutsList {
-  constructor() {
-    this.mapStatusToBadge = (status) => {
-      switch (status) {
-        case PayoutStatuses.scheduled:
-          return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;
-        case PayoutStatuses.in_transit:
-          return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;
-        case PayoutStatuses.failed:
-          return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-        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>`;
-        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.accountId = undefined;
-    this.authToken = undefined;
-    this.payouts = [];
-    this.loading = true;
-    this.errorMessage = undefined;
-    this.paging = pagingDefaults;
-    this.params = undefined;
-  }
-  updateOnPropChange() {
-    this.fetchData();
-  }
-  connectedCallback() {
-    this.fetchData();
-  }
-  async fetchData() {
-    var _a;
-    if (!this.accountId || !this.authToken) {
-      this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
-      this.loading = false;
-      return;
-    }
-    this.loading = true;
-    try {
-      const api = Api(this.authToken, config.proxyApiOrigin);
-      const endpoint = `account/${this.accountId}/payouts`;
-      const response = await api.get(endpoint, this.params);
-      if (!response.error) {
-        this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-        const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payout(dataItem));
-        this.payouts = data;
-      }
-      else {
-        const responseError = typeof response.error === 'string' ? response.error : response.error.message;
-        console.error(`Error fetching payouts: ${responseError}`);
-        this.errorMessage = 'No results';
-      }
+    constructor() {
+        this.mapStatusToBadge = (status) => {
+            switch (status) {
+                case PayoutStatuses.scheduled:
+                    return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.in_transit:
+                    return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;
+                case PayoutStatuses.failed:
+                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
+                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>`;
+                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.accountId = undefined;
+        this.authToken = undefined;
+        this.payouts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
     }
-    catch (error) {
-      console.error(`Error fetching payouts: ${error}`);
-      this.errorMessage = 'No results';
+    updateOnPropChange() {
+        this.fetchData();
     }
-    finally {
-      this.loading = false;
+    connectedCallback() {
+        this.fetchData();
     }
-  }
-  render() {
-    return (h(Host, { exportedparts: tableExportedParts }, h("justifi-table", { rowClickHandler: (e) => {
-        const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
-        if (!clickedPayoutID) {
-          return;
+    async fetchData() {
+        var _a;
+        if (!this.accountId || !this.authToken) {
+            this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
+            this.loading = false;
+            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>${formatDate(payout.created_at)}</div>
-                    <div>${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 }) })));
-  }
-  static get is() { return "justifi-payouts-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["payouts-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["payouts-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "accountId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "account-id",
-        "reflect": false
-      },
-      "authToken": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "auth-token",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "payouts": {},
-      "loading": {},
-      "errorMessage": {},
-      "paging": {},
-      "params": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "rowClicked",
-        "name": "payout-row-clicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Payout",
-          "resolved": "Payout",
-          "references": {
-            "Payout": {
-              "location": "import",
-              "path": "../../api",
-              "id": "src/api/index.ts::Payout"
+        this.loading = true;
+        try {
+            const api = Api(this.authToken, config.proxyApiOrigin);
+            const endpoint = `account/${this.accountId}/payouts`;
+            const response = await api.get(endpoint, this.params);
+            if (!response.error) {
+                this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
+                const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payout(dataItem));
+                this.payouts = data;
+            }
+            else {
+                const responseError = typeof response.error === 'string' ? response.error : response.error.message;
+                console.error(`Error fetching payouts: ${responseError}`);
+                this.errorMessage = 'No results';
             }
-          }
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "accountId",
-        "methodName": "updateOnPropChange"
-      }, {
-        "propName": "authToken",
-        "methodName": "updateOnPropChange"
-      }, {
-        "propName": "params",
-        "methodName": "updateOnPropChange"
-      }];
-  }
+        catch (error) {
+            console.error(`Error fetching payouts: ${error}`);
+            this.errorMessage = 'No results';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        return (h(Host, { exportedparts: tableExportedParts }, h("justifi-table", { 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 }) })));
+    }
+    static get is() { return "justifi-payouts-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payouts-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payouts-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "payouts": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "params": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowClicked",
+                "name": "payout-row-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Payout",
+                    "resolved": "Payout",
+                    "references": {
+                        "Payout": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Payout"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "accountId",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "authToken",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "params",
+                "methodName": "updateOnPropChange"
+            }];
+    }
 }

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

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;