@justifi/webcomponents 4.4.0 → 4.5.0

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

@@ -1,13 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { Api, Payout, PayoutStatuses } from "../../api";
+import { Api, Payout, PayoutStatuses, PayoutStatusesSafeNames } from "../../api";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
-const pagingDefaults = {
-  amount: 25,
-  start_cursor: '',
-  end_cursor: '',
-  has_previous: false,
-  has_next: false,
-};
+import { pagingDefaults } from "../table/table-utils";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -23,18 +17,12 @@ const pagingDefaults = {
   * @exportedPart arrow: Both paging buttons
   * @exportedPart arrow-left: Previous page button
   * @exportedPart arrow-right: Next page button
-  * @exportedPart arrow-disabled: Disabled state for paging buttons
+  * @exportedPart button-disabled: Disabled state for paging buttons
+  * @exportedPart previous-button-text: Text for Previous button
+  * @exportedPart next-button-text: Text for Next button
 */
 export class PayoutsList {
   constructor() {
-    // onChangeAmount = (e) => {
-    //   const newVal = e?.target?.value;
-    //   if (newVal) {
-    //     this.paging = pagingDefaults;
-    //     this.paging.amount = newVal;
-    //     this.fetchData();
-    //   }
-    // }
     this.onPageChange = (direction) => {
       return () => {
         this.fetchData(direction);
@@ -42,24 +30,20 @@ export class PayoutsList {
     };
     this.mapStatusToBadge = (status) => {
       switch (status) {
-        case PayoutStatuses.scheduled || PayoutStatuses.in_transit:
-          return 'bg-primary';
-        case PayoutStatuses.failed || PayoutStatuses.canceled:
-          return 'bg-danger';
+        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 'bg-secondary';
+          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 'bg-success';
-        default:
-          return 'bg-secondary';
+          return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
       }
     };
-    this.emptyState = (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: 10, style: { textAlign: 'center' } }, "No payouts to show")));
-    this.errorState = () => (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: 10, style: { textAlign: 'center' } }, "An unexpected error occurred: ", this.errorMessage)));
-    this.loadingState = (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: 10, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
-    this.paginationBar = () => {
-      return (h("div", { class: "pagination-bar d-flex justify-content-center gap-3" }, h("button", { onClick: this.onPageChange('prev'), part: `arrow arrow-left${this.paging.has_previous ? '' : ' arrow-disabled'}`, disabled: !this.paging.has_previous, class: `btn btn-primary pagination-btn pagination-prev-btn${this.paging.has_previous ? '' : ' disabled'}` }, "\u2190"), h("button", { onClick: this.onPageChange('next'), part: `arrow arrow-right${this.paging.has_next ? '' : ' arrow-disabled'}`, disabled: !this.paging.has_next, class: `btn btn-primary pagination-btn pagination-next-btn${this.paging.has_next ? '' : ' disabled'}` }, "\u2192")));
-    };
     this.accountId = undefined;
     this.authToken = undefined;
     this.payouts = [];
@@ -81,14 +65,11 @@ export class PayoutsList {
       return;
     }
     this.loading = true;
-    const limit = this.paging.amount;
-    const cursor = `${direction === 'prev'
-      ? '&before_cursor=' + this.paging.start_cursor
-      : direction === 'next'
-        ? '&after_cursor=' + this.paging.end_cursor
-        : ''}`;
-    const endpoint = `account/${this.accountId}/payouts?limit=${limit}${cursor ? cursor : ''}`;
-    const response = await Api(this.authToken).get(endpoint);
+    const endpoint = `account/${this.accountId}/payouts`;
+    const response = await Api(this.authToken).get(endpoint, {
+      paging: this.paging,
+      direction: direction
+    });
     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));
@@ -99,16 +80,45 @@ export class PayoutsList {
     }
     this.loading = false;
   }
-  showEmptyState() {
-    return this.payouts ? this.payouts.length < 1 : true;
-  }
   render() {
-    var _a;
-    return (h(Host, { exportparts: "\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-cell,\n        loading-state-cell,loading-state-spinner,error-state,empty-state,\n        pagination-bar,arrow,arrow-left,arrow-right,arrow-disabled\n      " }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light", part: 'table-head-row' }, h("th", { part: "table-head-cell", scope: "col", title: "The date and time each payment was made" }, "Paid Out On"), h("th", { part: "table-head-cell", scope: "col" }, "Type"), h("th", { part: "table-head-cell", scope: "col" }, "Account"), h("th", { part: "table-head-cell", scope: "col" }, "Paid Out To"), h("th", { part: "table-head-cell", scope: "col" }, "Payments"), h("th", { part: "table-head-cell", scope: "col" }, "Refunds"), h("th", { part: "table-head-cell", scope: "col" }, "Fees"), h("th", { part: "table-head-cell", scope: "col" }, "Other"), h("th", { part: "table-head-cell", scope: "col" }, "Payout Amount"), h("th", { part: "table-head-cell", scope: "col" }, "Status"))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading ? this.loadingState :
-      this.errorMessage ? this.errorState() :
-        this.showEmptyState() ? this.emptyState :
-          (_a = this.payouts) === null || _a === void 0 ? void 0 : _a.map((payout, index) => h("tr", { part: `table-row${index % 2 ? ' table-row-even' : ' table-row-odd'}` }, h("th", { scope: "row", part: "table-cell" }, h("div", null, formatDate(payout.created_at)), h("div", null, formatTime(payout.created_at))), h("td", { part: "table-cell" }, payout.payout_type), h("td", { part: "table-cell" }, payout.account_id), h("td", { part: "table-cell" }, payout.bank_account.full_name, " ", payout.bank_account.account_number_last4), h("td", { part: "table-cell" }, formatCurrency(payout.payments_total)), h("td", { part: "table-cell" }, formatCurrency(payout.refunds_total)), h("td", { part: "table-cell" }, formatCurrency(payout.fees_total)), h("td", { part: "table-cell" }, formatCurrency(payout.other_total)), h("td", { part: "table-cell" }, formatCurrency(payout.amount)), h("td", { part: "table-cell" }, h("span", { class: `badge ${this.mapStatusToBadge(payout.status)}` }, payout.status))))), this.paging &&
-      h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: 10 }, this.paginationBar()))))));
+    return (h(Host, null, 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>${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, paging: Object.assign(Object.assign({}, this.paging), { onPrev: this.onPageChange('prev'), onNext: this.onPageChange('next') }) })));
   }
   static get is() { return "justifi-payouts-list"; }
   static get encapsulation() { return "shadow"; }
@@ -168,6 +178,30 @@ export class PayoutsList {
       "paging": {}
     };
   }
+  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",

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

@@ -1 +1 @@
-{"version":3,"file":"payouts-list.js","sourceRoot":"","sources":["../../../../src/components/payouts-list/payouts-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payout, PayoutStatuses } from '../../api';\nimport { formatCurrency, formatDate, formatTime } from '../../utils/utils';\n\ninterface PagingInfo {\n  amount: number,\n  start_cursor: string,\n  end_cursor: string,\n  has_previous: boolean,\n  has_next: boolean,\n}\n\nconst pagingDefaults = {\n  amount: 25,\n  start_cursor: '',\n  end_cursor: '',\n  has_previous: false,\n  has_next: false,\n}\n\n/**\n  * @exportedPart table-head: Table head\n  * @exportedPart table-head-row: Head row\n  * @exportedPart table-head-cell: Individual head cell\n  * @exportedPart table-body: Body of the table\n  * @exportedPart table-row: Row of the table\n  * @exportedPart table-cell: Individual cell of the table\n  * @exportedPart loading-state-cell: Row for loading state\n  * @exportedPart loading-state-spinner: Spinner element for loading state\n  * @exportedPart error-state: Row for Error state\n  * @exportedPart empty-state: Row for Emtpy state\n  * @exportedPart pagination-bar: Pagination bar\n  * @exportedPart arrow: Both paging buttons\n  * @exportedPart arrow-left: Previous page button\n  * @exportedPart arrow-right: Next page button\n  * @exportedPart arrow-disabled: Disabled state for paging buttons\n*/\n@Component({\n  tag: 'justifi-payouts-list',\n  styleUrl: 'payouts-list.scss',\n  shadow: true,\n})\n\nexport class PayoutsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() payouts: Payout[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  // onChangeAmount = (e) => {\n  //   const newVal = e?.target?.value;\n  //   if (newVal) {\n  //     this.paging = pagingDefaults;\n  //     this.paging.amount = newVal;\n  //     this.fetchData();\n  //   }\n  // }\n\n  onPageChange = (direction: string) => {\n    return () => {\n      this.fetchData(direction);\n    }\n  }\n\n  mapStatusToBadge = (status: PayoutStatuses) => {\n    switch (status) {\n      case PayoutStatuses.scheduled || PayoutStatuses.in_transit:\n        return 'bg-primary';\n      case PayoutStatuses.failed || PayoutStatuses.canceled:\n        return 'bg-danger';\n      case PayoutStatuses.forwarded:\n        return 'bg-secondary';\n      case PayoutStatuses.paid:\n        return 'bg-success';\n      default:\n        return 'bg-secondary';\n    }\n  }\n\n  async fetchData(direction?: string): Promise<void> {\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const limit = this.paging.amount;\n    const cursor = `${\n      direction === 'prev'\n      ? '&before_cursor='+this.paging.start_cursor\n      : direction === 'next'\n        ? '&after_cursor='+this.paging.end_cursor\n        : ''\n    }`;\n    const endpoint = `account/${this.accountId}/payouts?limit=${limit}${cursor ? cursor : ''}`;\n\n    const response: IApiResponseCollection<Payout[]> = await Api(this.authToken).get(endpoint);\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n\n      const data = response?.data?.map(dataItem => new Payout(dataItem));\n      this.payouts = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  showEmptyState() {\n    return this.payouts ? this.payouts.length < 1 : true;\n  }\n\n  emptyState = (\n    <tr>\n      <td class=\"empty-state\" part=\"empty-state\" colSpan={10} style={{ textAlign: 'center' }}>No payouts to show</td>\n    </tr>\n  );\n\n  errorState = () => (\n    <tr>\n      <td class=\"error-state\" part=\"error-state\" colSpan={10} style={{ textAlign: 'center' }}>\n        An unexpected error occurred: {this.errorMessage}\n      </td>\n    </tr>\n  );\n\n  loadingState = (\n    <tr>\n      <td class=\"loading-state\" part=\"loading-state-cell\" colSpan={10} style={{ textAlign: 'center' }}>\n        <div part=\"loading-state-spinner\" class=\"spinner-border\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      </td>\n    </tr>\n  );\n\n  paginationBar = () => {\n    return (\n      <div class=\"pagination-bar d-flex justify-content-center gap-3\">\n        <button\n          onClick={this.onPageChange('prev')}\n          part={`arrow arrow-left${this.paging.has_previous ? '' : ' arrow-disabled'}`}\n          disabled={!this.paging.has_previous}\n          class={`btn btn-primary pagination-btn pagination-prev-btn${this.paging.has_previous ? '' : ' disabled'}`}\n        >&larr;</button>\n        {/* <select class=\"amount-select\" part=\"amount-select\" onChange={this.onChangeAmount}>\n          <option selected={this.paging.amount === 10} value={10}>10</option>\n          <option selected={this.paging.amount === 25} value={25}>25</option>\n          <option selected={this.paging.amount === 50} value={50}>50</option>\n        </select> */}\n        <button\n          onClick={this.onPageChange('next')}\n          part={`arrow arrow-right${this.paging.has_next ? '' : ' arrow-disabled'}`}\n          disabled={!this.paging.has_next}\n          class={`btn btn-primary pagination-btn pagination-next-btn${this.paging.has_next ? '' : ' disabled'}`}\n        >&rarr;</button>\n      </div>\n    )\n  };\n\n  render() {\n    return (\n      <Host exportparts=\"\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-cell,\n        loading-state-cell,loading-state-spinner,error-state,empty-state,\n        pagination-bar,arrow,arrow-left,arrow-right,arrow-disabled\n      \">\n        <table class=\"table table-hover\">\n          <thead class=\"table-head sticky-top\" part=\"table-head\">\n            <tr class=\"table-light\" part='table-head-row'>\n              <th part=\"table-head-cell\" scope=\"col\" title=\"The date and time each payment was made\">\n                Paid Out On\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\">\n                Type\n              </th>\n              <th part=\"table-head-cell\" scope=\"col\">Account</th>\n              <th part=\"table-head-cell\" scope=\"col\">Paid Out To</th>\n              <th part=\"table-head-cell\" scope=\"col\">Payments</th>\n              <th part=\"table-head-cell\" scope=\"col\">Refunds</th>\n              <th part=\"table-head-cell\" scope=\"col\">Fees</th>\n              <th part=\"table-head-cell\" scope=\"col\">Other</th>\n              <th part=\"table-head-cell\" scope=\"col\">Payout Amount</th>\n              <th part=\"table-head-cell\" scope=\"col\">Status</th>\n            </tr>\n          </thead>\n          <tbody class=\"table-body\" part='table-body'>\n            {\n              this.loading ? this.loadingState :\n              this.errorMessage ? this.errorState() :\n              this.showEmptyState() ? this.emptyState :\n              this.payouts?.map((payout, index) =>\n                <tr part={`table-row${index%2 ? ' table-row-even' : ' table-row-odd'}`}>\n                  <th scope=\"row\" part=\"table-cell\">\n                    <div>{formatDate(payout.created_at)}</div>\n                    <div>{formatTime(payout.created_at)}</div>\n                  </th>\n                  <td part=\"table-cell\">{payout.payout_type}</td>\n                  <td part=\"table-cell\">{payout.account_id}</td>\n                  <td part=\"table-cell\">{payout.bank_account.full_name} {payout.bank_account.account_number_last4}</td>\n                  <td part=\"table-cell\">{formatCurrency(payout.payments_total)}</td>\n                  <td part=\"table-cell\">{formatCurrency(payout.refunds_total)}</td>\n                  <td part=\"table-cell\">{formatCurrency(payout.fees_total)}</td>\n                  <td part=\"table-cell\">{formatCurrency(payout.other_total)}</td>\n                  <td part=\"table-cell\">{formatCurrency(payout.amount)}</td>\n                  <td part=\"table-cell\"><span class={`badge ${this.mapStatusToBadge(payout.status)}`}>{payout.status}</span></td>\n                </tr>\n              )\n            }\n          </tbody>\n          {this.paging &&\n            <tfoot class=\"sticky-bottom\">\n              <tr class=\"table-light align-middle\">\n                <td part=\"pagination-bar\" colSpan={10}>\n                  {this.paginationBar()}\n                </td>\n              </tr>\n            </tfoot>\n          }\n        </table>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"payouts-list.js","sourceRoot":"","sources":["../../../../src/components/payouts-list/payouts-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payout, PayoutStatuses, PayoutStatusesSafeNames } from '../../api';\nimport { formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { PagingInfo, pagingDefaults } from '../table/table-utils';\n\n/**\n  * @exportedPart table-head: Table head\n  * @exportedPart table-head-row: Head row\n  * @exportedPart table-head-cell: Individual head cell\n  * @exportedPart table-body: Body of the table\n  * @exportedPart table-row: Row of the table\n  * @exportedPart table-cell: Individual cell of the table\n  * @exportedPart loading-state-cell: Row for loading state\n  * @exportedPart loading-state-spinner: Spinner element for loading state\n  * @exportedPart error-state: Row for Error state\n  * @exportedPart empty-state: Row for Emtpy state\n  * @exportedPart pagination-bar: Pagination bar\n  * @exportedPart arrow: Both paging buttons\n  * @exportedPart arrow-left: Previous page button\n  * @exportedPart arrow-right: Next page button\n  * @exportedPart button-disabled: Disabled state for paging buttons\n  * @exportedPart previous-button-text: Text for Previous button\n  * @exportedPart next-button-text: Text for Next button\n*/\n@Component({\n  tag: 'justifi-payouts-list',\n  styleUrl: 'payouts-list.scss',\n  shadow: true,\n})\n\nexport class PayoutsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() payouts: Payout[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @Event({\n    eventName: 'payout-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Payout>;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  onPageChange = (direction: string) => {\n    return () => {\n      this.fetchData(direction);\n    }\n  }\n\n  mapStatusToBadge = (status: PayoutStatuses) => {\n    switch (status) {\n      case PayoutStatuses.scheduled:\n        return `<span class=\"badge bg-primary\" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.in_transit:\n        return `<span class=\"badge bg-primary\" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.failed:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.canceled:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.forwarded:\n        return `<span class=\"badge bg-secondary\" title='This payout initially failed; the funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.paid:\n        return `<span class=\"badge bg-success\" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;\n    }\n  }\n\n  async fetchData(direction?: string): Promise<void> {\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `account/${this.accountId}/payouts`;\n\n    const response: IApiResponseCollection<Payout[]> = await Api(this.authToken).get(endpoint, {\n      paging: this.paging,\n      direction: direction\n    });\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n\n      const data = response?.data?.map(dataItem => new Payout(dataItem));\n      this.payouts = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={(e) => {\n            const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickedPayoutID) { return }\n            this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));\n          }}\n          columnData={[\n            ['Paid Out On', 'The date each transaction occurred'],\n            ['Type', 'The type of each transaction'],\n            ['Account', 'The ID of the account associated with each payout'],\n            ['Paid Out To', 'The bank account to which each payout was transferred'],\n            ['Payments', 'Sum of payments in each payout'],\n            ['Refunds', 'Sum of refunds in each payout'],\n            ['Fees', 'Sum of fees in each payout'],\n            ['Other', 'Sum of less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],\n            ['Payout Amount', 'The net sum of all transactions in each payout. This is the amount you\\'ll see reflected on your bank statement'],\n            ['Status', 'The real-time status of each payout']\n          ]}\n          entityId={this.payouts.map((payout) => payout.id)}\n          rowData={\n            this.payouts.map((payout) => (\n              [\n                {\n                  type: 'head',\n                  value: `\n                    <div>${formatDate(payout.created_at)}</div>\n                    <div>${formatTime(payout.created_at)}</div>\n                  `,\n                },\n                payout.payout_type,\n                payout.account_id,\n                `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,\n                formatCurrency(payout.payments_total),\n                formatCurrency(payout.refunds_total),\n                formatCurrency(payout.fees_total),\n                formatCurrency(payout.other_total),\n                formatCurrency(payout.amount),\n                {\n                  type: 'inner',\n                  value: this.mapStatusToBadge(payout.status)\n                }\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          paging={{\n            ...this.paging,\n            onPrev: this.onPageChange('prev'),\n            onNext: this.onPageChange('next')\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,20 +2,21 @@ export default {
   title: 'dev/Components/PayoutsList',
   component: 'justifi-payouts-list',
   parameters: {},
-  argTypes: {
-    'client-id': {
-      control: 'text',
-      table: {
-        category: 'props',
-      }
-    },
-  },
+  decorators: [
+    (Story) => `
+      ${Story()}
+      <script>
+        window.addEventListener('payout-row-clicked', (e) => {
+          console.log(e);
+        })
+      </script>
+    `
+  ]
 };
 class PayoutsListArgs {
   constructor(args) {
     this['auth-token'] = args['auth-token'] || '';
     this['account-id'] = args['account-id'] || '';
-    this['client-id'] = args['client-id'] || '';
   }
 }
 const Template = (args) => {
@@ -24,7 +25,6 @@ const Template = (args) => {
       data-testid="justifi-payouts-list"
       auth-token="${args['auth-token']}"
       account-id="${args['account-id']}"
-      client-id="${args['client-id']}"
     />
   `);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"payouts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payouts-list/payouts-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,EAAE;EACd,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,eAAe;EAKnB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;EAC9C,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAqB,EAAE,EAAE;EACzC,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;mBACnB,IAAI,CAAC,WAAW,CAAC;;GAEjC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["export default {\n  title: 'dev/Components/PayoutsList',\n  component: 'justifi-payouts-list',\n  parameters: {},\n  argTypes: {\n    'client-id': {\n      control: 'text',\n      table: {\n        category: 'props',\n      }\n    },\n  },\n};\n\nclass PayoutsListArgs {\n  'auth-token': string;\n  'account-id': string;\n  'client-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['account-id'] = args['account-id'] || '';\n    this['client-id'] = args['client-id'] || '';\n  }\n}\n\nconst Template = (args: PayoutsListArgs) => {\n  return (`\n    <justifi-payouts-list\n      data-testid=\"justifi-payouts-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n      client-id=\"${args['client-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PayoutsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PayoutsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payouts-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-payouts-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-payouts-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-payouts-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}
+{"version":3,"file":"payouts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payouts-list/payouts-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,eAAe;EAInB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;EAChD,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAqB,EAAE,EAAE;EACzC,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["export default {\n  title: 'dev/Components/PayoutsList',\n  component: 'justifi-payouts-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('payout-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass PayoutsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['account-id'] = args['account-id'] || '';\n  }\n}\n\nconst Template = (args: PayoutsListArgs) => {\n  return (`\n    <justifi-payouts-list\n      data-testid=\"justifi-payouts-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PayoutsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PayoutsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payouts-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-payouts-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-payouts-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-payouts-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}

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

@@ -0,0 +1,12 @@
+import { head } from '../../../storybook-pages/example-parts';
+
+export default `<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+${head('justifi-proceeds-list')}
+
+<body>
+  <justifi-proceeds-list></justifi-proceeds-list>
+</body>
+
+</html>`;