@justifi/webcomponents 4.2.2 → 4.5.0

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

@@ -0,0 +1,207 @@
+import { Host, h } from "@stencil/core";
+import { Api } from "../../api";
+import { formatCurrency, formatDate } from "../../utils/utils";
+import { pagingDefaults } from "../table/table-utils";
+import { Proceed, ProceedStatuses, ProceedStatusesSafeNames } from "../../api/Proceed";
+/**
+  * @exportedPart table-head: Table head
+  * @exportedPart table-head-row: Head row
+  * @exportedPart table-head-cell: Individual head cell
+  * @exportedPart table-body: Body of the table
+  * @exportedPart table-row: Row of the table
+  * @exportedPart table-cell: Individual cell of the table
+  * @exportedPart loading-state-cell: Row for loading state
+  * @exportedPart loading-state-spinner: Spinner element for loading state
+  * @exportedPart error-state: Row for Error state
+  * @exportedPart empty-state: Row for Emtpy state
+  * @exportedPart pagination-bar: Pagination bar
+  * @exportedPart arrow: Both paging buttons
+  * @exportedPart arrow-left: Previous page button
+  * @exportedPart arrow-right: Next page button
+  * @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 ProceedsList {
+  constructor() {
+    this.onPageChange = (direction) => {
+      return () => {
+        this.fetchData(direction);
+      };
+    };
+    this.mapStatusToBadge = (status) => {
+      switch (status) {
+        case ProceedStatuses.scheduled:
+          return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${ProceedStatusesSafeNames[status]}</span>`;
+        case ProceedStatuses.in_transit:
+          return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${ProceedStatusesSafeNames[status]}</span>`;
+        case ProceedStatuses.failed:
+          return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;
+        case ProceedStatuses.canceled:
+          return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;
+        case ProceedStatuses.forwarded:
+          return `<span class="badge bg-secondary" title='This payout initially failed; the funds have been forwarded to your next successful batch of proceeds'>${ProceedStatusesSafeNames[status]}</span>`;
+        case ProceedStatuses.paid:
+          return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${ProceedStatusesSafeNames[status]}</span>`;
+      }
+    };
+    this.accountId = undefined;
+    this.authToken = undefined;
+    this.proceeds = [];
+    this.loading = true;
+    this.errorMessage = undefined;
+    this.paging = pagingDefaults;
+  }
+  updateOnPropChange() {
+    this.fetchData();
+  }
+  connectedCallback() {
+    this.fetchData();
+  }
+  async fetchData(direction) {
+    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;
+    const endpoint = `account/${this.accountId}/proceeds`;
+    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 Proceed(dataItem));
+      this.proceeds = data;
+    }
+    else {
+      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    }
+    this.loading = false;
+  }
+  render() {
+    return (h(Host, null, h("justifi-table", { rowClickHandler: (e) => {
+        const clickedProceedID = e.target.closest('tr').dataset.rowEntityId;
+        if (!clickedProceedID) {
+          return;
+        }
+        this.rowClicked.emit(this.proceeds.find((proceed) => proceed.id === clickedProceedID));
+      }, entityId: this.proceeds.map((proceed) => proceed.id), columnData: [
+        ['Paid Out On', 'The date each batch of proceeds is transferred to your bank account'],
+        ['Paid Out To', 'The bank account to which each payout is sent'],
+        ['From Payments', 'The amount added related to payments in each payout'],
+        ['From Refunds', 'The amount deducted related to refunds in each payout'],
+        ['Other', 'The amount related to less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],
+        ['Proceeds 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'],
+      ], rowData: this.proceeds.map((proceed) => ([
+        {
+          type: 'head',
+          value: formatDate(proceed.deposits_at),
+        },
+        proceed.bank_account.full_name,
+        formatCurrency(proceed.payments_total),
+        formatCurrency(proceed.refunds_total),
+        formatCurrency(proceed.other_total),
+        formatCurrency(proceed.amount),
+        {
+          type: 'inner',
+          value: this.mapStatusToBadge(proceed.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-proceeds-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["proceeds-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["proceeds-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accountId": {
+        "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 {
+      "proceeds": {},
+      "loading": {},
+      "errorMessage": {},
+      "paging": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "rowClicked",
+        "name": "proceed-row-clicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Proceed",
+          "resolved": "Proceed",
+          "references": {
+            "Proceed": {
+              "location": "import",
+              "path": "../../api/Proceed",
+              "id": "src/api/Proceed.ts::Proceed"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "accountId",
+        "methodName": "updateOnPropChange"
+      }, {
+        "propName": "authToken",
+        "methodName": "updateOnPropChange"
+      }];
+  }
+}
+//# sourceMappingURL=proceeds-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"proceeds-list.js","sourceRoot":"","sources":["../../../../src/components/proceeds-list/proceeds-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection } from '../../api';\nimport { formatCurrency, formatDate } from '../../utils/utils';\nimport { PagingInfo, pagingDefaults } from '../table/table-utils';\nimport { Proceed, ProceedStatuses, ProceedStatusesSafeNames } from '../../api/Proceed';\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-proceeds-list',\n  styleUrl: 'proceeds-list.scss',\n  shadow: true,\n})\n\nexport class ProceedsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() proceeds: Proceed[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @Event({\n    eventName: 'proceed-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Proceed>;\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: ProceedStatuses) => {\n    switch (status) {\n      case ProceedStatuses.scheduled:\n        return `<span class=\"badge bg-primary\" title='Batched and scheduled to be transferred'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.in_transit:\n        return `<span class=\"badge bg-primary\" title='Transfer to your bank account has been initiated'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.failed:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.canceled:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.forwarded:\n        return `<span class=\"badge bg-secondary\" title='This payout initially failed; the funds have been forwarded to your next successful batch of proceeds'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.paid:\n        return `<span class=\"badge bg-success\" title='Successfully deposited into your bank account'>${ProceedStatusesSafeNames[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}/proceeds`;\n\n    const response: IApiResponseCollection<Proceed[]> = 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 Proceed(dataItem));\n      this.proceeds = 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 clickedProceedID = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickedProceedID) { return }\n            this.rowClicked.emit(this.proceeds.find((proceed) => proceed.id === clickedProceedID));\n          }}\n          entityId={this.proceeds.map((proceed) => proceed.id)}\n          columnData={[\n            ['Paid Out On', 'The date each batch of proceeds is transferred to your bank account'],\n            ['Paid Out To', 'The bank account to which each payout is sent'],\n            ['From Payments', 'The amount added related to payments in each payout'],\n            ['From Refunds', 'The amount deducted related to refunds in each payout'],\n            ['Other', 'The amount related to less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],\n            ['Proceeds 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          rowData={\n            this.proceeds.map((proceed) => (\n              [\n                {\n                  type: 'head',\n                  value: formatDate(proceed.deposits_at),\n                },\n                proceed.bank_account.full_name,\n                formatCurrency(proceed.payments_total),\n                formatCurrency(proceed.refunds_total),\n                formatCurrency(proceed.other_total),\n                formatCurrency(proceed.amount),\n                {\n                  type: 'inner',\n                  value: this.mapStatusToBadge(proceed.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/proceeds-list/proceeds-list.stories.js

@@ -0,0 +1,69 @@
+export default {
+  title: 'dev/Components/ProceedsList',
+  component: 'justifi-proceeds-list',
+  parameters: {},
+  decorators: [
+    (Story) => `
+      ${Story()}
+      <script>
+        window.addEventListener('proceed-row-clicked', (e) => {
+          console.log(e);
+        })
+      </script>
+    `
+  ]
+};
+class ProceedsListArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['account-id'] = args['account-id'] || '';
+  }
+}
+const Template = (args) => {
+  return (`
+    <justifi-proceeds-list
+      data-testid="justifi-proceeds-list"
+      auth-token="${args['auth-token']}"
+      account-id="${args['account-id']}"
+    />
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = new ProceedsListArgs({});
+export const Styled = Template.bind({});
+Styled.args = new ProceedsListArgs({});
+Styled.decorators = [
+  (Story) => `
+    ${Story()}
+    <style>
+      justifi-proceeds-list::part(table-head-cell) {
+        background-color: #F4F4F6;
+      }
+      justifi-proceeds-list::part(pagination-bar) {
+        background-color: #F4F4F6;
+      }
+      justifi-proceeds-list::part(arrow) {
+        --bs-btn-disabled-bg: #212529;
+        --bs-btn-disabled-border-color: #212529;
+        --bs-btn-bg: #212529;
+        --bs-btn-border-color: #212529;
+        --bs-btn-hover-bg: #fccc32;
+        --bs-btn-hover-border-color: #fccc32;
+      }
+      justifi-proceeds-list::part(error-state) {
+        color: red;
+        background-color: #EEEEF5;
+      }
+      justifi-proceeds-list::part(loading-state-cell) {
+        background-color: #EEEEF5;
+      }
+      justifi-proceeds-list::part(table-row) {
+        background-color: #EEEEF5;
+      }
+      justifi-proceeds-list::part(table-row-even) {
+        background-color: #F4F4F6;
+      }
+    </style>
+  `
+];
+//# sourceMappingURL=proceeds-list.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"proceeds-list.stories.js","sourceRoot":"","sources":["../../../../src/components/proceeds-list/proceeds-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,gBAAgB;EAIpB,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,IAAsB,EAAE,EAAE;EAC1C,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,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["export default {\n  title: 'dev/Components/ProceedsList',\n  component: 'justifi-proceeds-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('proceed-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass ProceedsListArgs {\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: ProceedsListArgs) => {\n  return (`\n    <justifi-proceeds-list\n      data-testid=\"justifi-proceeds-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 ProceedsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new ProceedsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-proceeds-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-proceeds-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-proceeds-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-proceeds-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}