@justifi/webcomponents 4.6.4 → 4.7.0-rc.1

package/dist/components/justifi-payout-details.js.map

@@ -1 +1 @@
-{"file":"justifi-payout-details.js","mappings":"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","names":[],"sources":["src/components/payout-details/payout-details.scss?tag=justifi-payout-details&encapsulation=shadow","src/components/payout-details/payout-details.tsx"],"sourcesContent":["@import \"reboot\";\n@import \"tables\";\n@import \"buttons\";\n@import \"badge\";\n@import \"grid\";\n@import \"bootstrap-utilities\";\n\n:host {\n  @include host-base-styles;\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payout } from '../../api';\nimport { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\n\n/**\n  * @exportedPart detail-loading-spinner\n  * @exportedPart detail-loading-state\n  * @exportedPart detail-empty-state\n  * @exportedPart detail-head\n  * @exportedPart detail-title\n  * @exportedPart detail-method\n  * @exportedPart detail-info\n  * @exportedPart detail-info-item\n  * @exportedPart detail-info-item-title\n  * @exportedPart detail-info-item-data\n  * @exportedPart detail-metadata\n  * @exportedPart detail-metadata-title\n  * @exportedPart detail-method-title\n  * @exportedPart detail-method-data\n*/\n@Component({\n  tag: 'justifi-payout-details',\n  styleUrl: 'payout-details.scss',\n  shadow: true,\n})\n\nexport class PaymentDetails {\n  @Prop() payoutId: string;\n  @Prop() authToken: string;\n  @State() payout: Payout;\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n\n  @Watch('payoutId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  async fetchData(): Promise<void> {\n    this.errorMessage = '';\n    if (!this.payoutId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without a PayoutID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `payouts/${this.payoutId}`;\n\n    const response: IApiResponseCollection<Payout> = await Api(this.authToken).get(endpoint);\n    if (!response.error) {\n      this.payout = response.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        {\n          this.loading ? LoadingState :\n          !this.payout ? ErrorState(this.errorMessage) :\n          <justifi-details\n            error-message={this.errorMessage}\n            entity={{ metadata: this.payout.metadata }}\n          >\n            <EntityHeadInfo slot=\"head-info\" badge={<span slot='badge' innerHTML={MapPayoutStatusToBadge(this.payout?.status)} />} title={`${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}`}>\n              <EntityHeadInfoItem\n                classes=\"border-1 border-end\"\n                title=\"Updated At\"\n                value={`${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}`}\n              />\n              <EntityHeadInfoItem\n                classes=\"border-1 border-end\"\n                title=\"Created At\"\n                value={`${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}`}\n              />\n              <EntityHeadInfoItem title=\"ID\" value={this.payout.id} />\n            </EntityHeadInfo>\n            <div slot='detail-sections'>\n              <DetailSection sectionTitle=\"Details\">\n                <DetailItem title=\"Date paid\" value={formatDate(this.payout.deposits_at)} />\n                <DetailItem title=\"Statement Description\" value={this.payout.description} />\n                <DetailItem title=\"Payout Method\" value={this.payout.delivery_method} />\n                <DetailItem title=\"Amount\" value={formatCurrency(this.payout.amount)} />\n                <DetailItem title=\"Fee\" value={formatCurrency(this.payout.fees_total)} />\n              </DetailSection>\n              <DetailSection sectionTitle=\"Account\">\n                <DetailItem title=\"ID\" value={this.payout.account_id} />\n                <DetailItem title=\"Account Type\" value={this.payout.bank_account.account_type} />\n                <DetailItem title=\"Institution\" value={this.payout.bank_account.account_type} />\n                <DetailItem title=\"Routing Number\" value={this.payout.bank_account.routing_number} />\n                <DetailItem title=\"Account Number\" value={this.payout.bank_account.account_number_last4} />\n              </DetailSection>\n            </div>\n          </justifi-details>\n        }\n      </Host>\n    )\n  }\n}\n"],"version":3}
+{"file":"justifi-payout-details.js","mappings":"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","names":[],"sources":["src/components/payout-details/payout-details.scss?tag=justifi-payout-details&encapsulation=shadow","src/components/payout-details/payout-details.tsx"],"sourcesContent":["@import \"reboot\";\n@import \"tables\";\n@import \"buttons\";\n@import \"badge\";\n@import \"grid\";\n@import \"bootstrap-utilities\";\n\n:host {\n  @include host-base-styles;\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payout } from '../../api';\nimport { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\nimport { config } from '../../../config';\n\n/**\n  * @exportedPart detail-loading-spinner\n  * @exportedPart detail-loading-state\n  * @exportedPart detail-empty-state\n  * @exportedPart detail-head\n  * @exportedPart detail-title\n  * @exportedPart detail-method\n  * @exportedPart detail-info\n  * @exportedPart detail-info-item\n  * @exportedPart detail-info-item-title\n  * @exportedPart detail-info-item-data\n  * @exportedPart detail-metadata\n  * @exportedPart detail-metadata-title\n  * @exportedPart detail-method-title\n  * @exportedPart detail-method-data\n  * @exportedPart detail-section\n  * @exportedPart detail-section-title\n  * @exportedPart detail-section-item-title\n  * @exportedPart detail-section-item-data\n  * @exportedPart detail-head-info\n  * @exportedPart detail-head-info-item\n  * @exportedPart detail-head-info-item-title\n  * @exportedPart detail-head-info-item-data\n*/\n@Component({\n  tag: 'justifi-payout-details',\n  styleUrl: 'payout-details.scss',\n  shadow: true,\n})\n\nexport class PaymentDetails {\n  @Prop() payoutId: string;\n  @Prop() authToken: string;\n  @State() payout: Payout;\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n\n  @Watch('payoutId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  async fetchData(): Promise<void> {\n    this.errorMessage = '';\n    if (!this.payoutId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without a PayoutID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `payouts/${this.payoutId}`;\n\n    const response: IApiResponseCollection<Payout> = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);\n    if (!response.error) {\n      this.payout = response.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        {\n          this.loading ? LoadingState :\n            !this.payout ? ErrorState(this.errorMessage) :\n              <justifi-details error-message={this.errorMessage}>\n                <EntityHeadInfo slot=\"head-info\" badge={<span slot='badge' innerHTML={MapPayoutStatusToBadge(this.payout?.status)} />} title={`${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}`}>\n                  <EntityHeadInfoItem\n                    classes=\"border-1 border-end\"\n                    title=\"Updated At\"\n                    value={`${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}`}\n                  />\n                  <EntityHeadInfoItem\n                    classes=\"border-1 border-end\"\n                    title=\"Created At\"\n                    value={`${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}`}\n                  />\n                  <EntityHeadInfoItem title=\"ID\" value={this.payout.id} />\n                </EntityHeadInfo>\n                <div slot='detail-sections'>\n                  <DetailSection sectionTitle=\"Details\">\n                    <DetailItem title=\"Date paid\" value={formatDate(this.payout.deposits_at)} />\n                    <DetailItem title=\"Statement Description\" value={this.payout.description} />\n                    <DetailItem title=\"Payout Method\" value={this.payout.delivery_method} />\n                    <DetailItem title=\"Amount\" value={formatCurrency(this.payout.amount)} />\n                    <DetailItem title=\"Fee\" value={formatCurrency(this.payout.fees_total)} />\n                  </DetailSection>\n                  <DetailSection sectionTitle=\"Account\">\n                    <DetailItem title=\"ID\" value={this.payout.account_id} />\n                    <DetailItem title=\"Account Type\" value={this.payout.bank_account.account_type} />\n                    <DetailItem title=\"Institution\" value={this.payout.bank_account.account_type} />\n                    <DetailItem title=\"Routing Number\" value={this.payout.bank_account.routing_number} />\n                    <DetailItem title=\"Account Number\" value={this.payout.bank_account.account_number_last4} />\n                  </DetailSection>\n                  <DetailSection sectionTitle='Metadata'>\n                    <CodeBlock metadata={this.payout.metadata} />\n                  </DetailSection>\n                </div>\n              </justifi-details>\n        }\n      </Host>\n    )\n  }\n}"],"version":3}

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

@@ -1,8 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
-import { b as PayoutStatuses, c as PayoutStatusesSafeNames, d as Payout } from './Payout.js';
-import { f as formatDate, b as formatTime, a as formatCurrency } from './utils.js';
-import { p as pagingDefaults, d as defineCustomElement$2 } from './table.js';
+import { p as pagingDefaults } from './Pagination.js';
+import { c as PayoutStatuses, d as PayoutStatusesSafeNames, e as Payout } from './Payout.js';
+import { a as formatDate, d as formatTime, b as formatCurrency } from './utils2.js';
+import { c as config } from './config.js';
+import { d as defineCustomElement$3 } from './table.js';
+import { d as defineCustomElement$2 } from './pagination-menu2.js';
 
 const payoutsListCss = ":root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13, 110, 253;--bs-secondary-rgb:108, 117, 125;--bs-success-rgb:25, 135, 84;--bs-info-rgb:13, 202, 240;--bs-warning-rgb:255, 193, 7;--bs-danger-rgb:220, 53, 69;--bs-light-rgb:248, 249, 250;--bs-dark-rgb:33, 37, 41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13, 110, 253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10, 88, 202;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222, 226, 230;--bs-body-bg:#212529;--bs-body-bg-rgb:33, 37, 41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255, 255, 255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222, 226, 230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52, 58, 64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222, 226, 230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43, 48, 53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110, 168, 254;--bs-link-hover-color-rgb:139, 185, 254;--bs-code-color:#e685b5;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}.spinner-grow,.spinner-border{display:inline-block;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg) }}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion: reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.clearfix::after{display:block;clear:both;content:\"\"}.text-bg-primary{color:#fff !important;background-color:RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-secondary{color:#fff !important;background-color:RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-success{color:#fff !important;background-color:RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-info{color:#000 !important;background-color:RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-warning{color:#000 !important;background-color:RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-danger{color:#fff !important;background-color:RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-light{color:#000 !important;background-color:RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-dark{color:#fff !important;background-color:RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important}.link-primary{color:RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-primary:hover,.link-primary:focus{color:RGBA(10, 88, 202, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important}.link-secondary{color:RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-secondary:hover,.link-secondary:focus{color:RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important}.link-success{color:RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-success:hover,.link-success:focus{color:RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important}.link-info{color:RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-info:hover,.link-info:focus{color:RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important}.link-warning{color:RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-warning:hover,.link-warning:focus{color:RGBA(255, 205, 57, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important}.link-danger{color:RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-danger:hover,.link-danger:focus{color:RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important}.link-light{color:RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-light:hover,.link-light:focus{color:RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important}.link-dark{color:RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-dark:hover,.link-dark:focus{color:RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important}.link-body-emphasis{color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-body-emphasis:hover,.link-body-emphasis:focus{color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important}.focus-ring:focus{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.icon-link{display:inline-flex;gap:0.375rem;align-items:center;text-decoration-color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));text-underline-offset:0.25em;backface-visibility:hidden}.icon-link>.bi{flex-shrink:0;width:1em;height:1em;fill:currentcolor;transition:0.2s ease-in-out transform}@media (prefers-reduced-motion: reduce){.icon-link>.bi{transition:none}}.icon-link-hover:hover>.bi,.icon-link-hover:focus-visible>.bi{transform:var(--bs-icon-link-transform, translate3d(0.25em, 0, 0))}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:\"\"}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:sticky;top:0;z-index:1020}.sticky-bottom{position:sticky;bottom:0;z-index:1020}@media (min-width: 576px){.sticky-sm-top{position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 768px){.sticky-md-top{position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 992px){.sticky-lg-top{position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 1200px){.sticky-xl-top{position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 1400px){.sticky-xxl-top{position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption),.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute !important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:\"\"}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:0.25}:host{font-family:system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1rem;font-weight:400;line-height:1.5;color:#212529}";
 
@@ -12,11 +15,6 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
     this.__registerHost();
     this.__attachShadow();
     this.rowClicked = createEvent(this, "payout-row-clicked", 7);
-    this.onPageChange = (direction) => {
-      return () => {
-        this.fetchData(direction);
-      };
-    };
     this.mapStatusToBadge = (status) => {
       switch (status) {
         case PayoutStatuses.scheduled:
@@ -33,12 +31,23 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
           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();
@@ -46,7 +55,7 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
   connectedCallback() {
     this.fetchData();
   }
-  async fetchData(direction) {
+  async fetchData() {
     var _a;
     if (!this.accountId || !this.authToken) {
       this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
@@ -54,11 +63,9 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
       return;
     }
     this.loading = true;
+    const api = Api(this.authToken, config.proxyApiOrigin);
     const endpoint = `account/${this.accountId}/payouts`;
-    const response = await Api(this.authToken).get(endpoint, {
-      paging: this.paging,
-      direction: direction
-    });
+    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));
@@ -107,11 +114,12 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
           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') }) })));
+      ])), 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 watchers() { return {
     "accountId": ["updateOnPropChange"],
-    "authToken": ["updateOnPropChange"]
+    "authToken": ["updateOnPropChange"],
+    "params": ["updateOnPropChange"]
   }; }
   static get style() { return payoutsListCss; }
 }, [1, "justifi-payouts-list", {
@@ -120,13 +128,14 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
     "payouts": [32],
     "loading": [32],
     "errorMessage": [32],
-    "paging": [32]
+    "paging": [32],
+    "params": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["justifi-payouts-list", "justifi-table"];
+  const components = ["justifi-payouts-list", "justifi-table", "pagination-menu"];
   components.forEach(tagName => { switch (tagName) {
     case "justifi-payouts-list":
       if (!customElements.get(tagName)) {
@@ -134,6 +143,11 @@ function defineCustomElement$1() {
       }
       break;
     case "justifi-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pagination-menu":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

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

@@ -1 +1 @@
-{"file":"justifi-payouts-list.js","mappings":"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","names":[],"sources":["src/components/payouts-list/payouts-list.scss?tag=justifi-payouts-list&encapsulation=shadow","src/components/payouts-list/payouts-list.tsx"],"sourcesContent":[":host {\n  @include host-base-styles;\n}\n","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"],"version":3}
+{"file":"justifi-payouts-list.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,+vbAA+vb;;MCuCzwb,WAAW;;;;;;IAwBtB,qBAAgB,GAAG,CAAC,MAAsB;MACxC,QAAQ,MAAM;QACZ,KAAK,cAAc,CAAC,SAAS;UAC3B,OAAO,kFAAkF,uBAAuB,CAAC,MAAM,CAAC,SAAS,CAAC;QACpI,KAAK,cAAc,CAAC,UAAU;UAC5B,OAAO,2FAA2F,uBAAuB,CAAC,MAAM,CAAC,SAAS,CAAC;QAC7I,KAAK,cAAc,CAAC,MAAM;UACxB,OAAO,8EAA8E,uBAAuB,CAAC,MAAM,CAAC,SAAS,CAAC;QAChI,KAAK,cAAc,CAAC,QAAQ;UAC1B,OAAO,8EAA8E,uBAAuB,CAAC,MAAM,CAAC,SAAS,CAAC;QAChI,KAAK,cAAc,CAAC,SAAS;UAC3B,OAAO,uIAAuI,uBAAuB,CAAC,MAAM,CAAC,SAAS,CAAC;QACzL,KAAK,cAAc,CAAC,IAAI;UACtB,OAAO,wFAAwF,uBAAuB,CAAC,MAAM,CAAC,SAAS,CAAC;OAC3I;KACF,CAAA;IAED,wBAAmB,GAAG,CAAC,YAAoB;MACzC,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,YAAY,CAAC;MAC9B,IAAI,CAAC,MAAM,oCAAS,SAAS,KAAE,aAAa,EAAE,YAAY,IAAG,CAAC;KAC/D,CAAC;IAEF,oBAAe,GAAG,CAAC,WAAmB;MACpC,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,aAAa,CAAC;MAC/B,IAAI,CAAC,MAAM,oCAAS,SAAS,KAAE,YAAY,EAAE,WAAW,IAAG,CAAC;KAC7D,CAAC;;;mBAhD2B,EAAE;mBACH,IAAI;;kBAEF,cAAc;;;EAU5C,kBAAkB;IAChB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EA+BD,MAAM,SAAS;;IACb,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACtC,IAAI,CAAC,YAAY,GAAG,8DAA8D,CAAC;MACnF,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,OAAO;KACR;IACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,WAAW,IAAI,CAAC,SAAS,UAAU,CAAC;IAErD,MAAM,QAAQ,GAAqC,MAAM,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACxF,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;MACnB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,GACX,QAAQ,CAAC,SAAS,CACtB,CAAA;MAED,MAAM,IAAI,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,GAAG,CAAC,QAAQ,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;MACnE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC;KAClG;IAED,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,qBACE,eAAe,EAAE,CAAC,CAAC;QACjB,MAAM,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC;QACnE,IAAI,CAAC,eAAe,EAAE;UAAE,OAAM;SAAE;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,KAAK,eAAe,CAAC,CAAC,CAAC;OACpF,EACD,UAAU,EAAE;QACV,CAAC,aAAa,EAAE,oCAAoC,CAAC;QACrD,CAAC,MAAM,EAAE,8BAA8B,CAAC;QACxC,CAAC,SAAS,EAAE,mDAAmD,CAAC;QAChE,CAAC,aAAa,EAAE,uDAAuD,CAAC;QACxE,CAAC,UAAU,EAAE,gCAAgC,CAAC;QAC9C,CAAC,SAAS,EAAE,+BAA+B,CAAC;QAC5C,CAAC,MAAM,EAAE,4BAA4B,CAAC;QACtC,CAAC,OAAO,EAAE,mIAAmI,CAAC;QAC9I,CAAC,eAAe,EAAE,iHAAiH,CAAC;QACpI,CAAC,QAAQ,EAAE,qCAAqC,CAAC;OAClD,EACD,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,CAAC,EACjD,OAAO,EACL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACtB;QACE;UACE,IAAI,EAAE,MAAM;UACZ,KAAK,EAAE;2BACE,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC;2BAC7B,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC;mBACrC;SACF;QACD,MAAM,CAAC,WAAW;QAClB,MAAM,CAAC,UAAU;QACjB,GAAG,MAAM,CAAC,YAAY,CAAC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,oBAAoB,EAAE;QAC9E,cAAc,CAAC,MAAM,CAAC,cAAc,CAAC;QACrC,cAAc,CAAC,MAAM,CAAC,aAAa,CAAC;QACpC,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC;QACjC,cAAc,CAAC,MAAM,CAAC,WAAW,CAAC;QAClC,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC;QAC7B;UACE,IAAI,EAAE,OAAO;UACb,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC;SAC5C;OACF,CACF,CAAC,EAEJ,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,YAAY,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,kCACD,IAAI,CAAC,MAAM,KACd,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,MAE/C,CACG,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/payouts-list/payouts-list.scss?tag=justifi-payouts-list&encapsulation=shadow","src/components/payouts-list/payouts-list.tsx"],"sourcesContent":[":host {\n  @include host-base-styles;\n}\n","import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport {\n  Api,\n  IApiResponseCollection,\n  PagingInfo,\n  Payout,\n  PayoutStatuses,\n  PayoutStatusesSafeNames,\n  pagingDefaults\n} from '../../api';\nimport { formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { config } from '../../../config';\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 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  @State() params: any\n  @Event({\n    eventName: 'payout-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Payout>;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  @Watch('params')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\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  handleClickPrevious = (beforeCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.after_cursor;\n    this.params = ({ ...newParams, before_cursor: beforeCursor });\n  };\n\n  handleClickNext = (afterCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.before_cursor;\n    this.params = ({ ...newParams, after_cursor: afterCursor });\n  };\n\n  async fetchData(): 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\n    const api = Api(this.authToken, config.proxyApiOrigin);\n    const endpoint = `account/${this.accountId}/payouts`;\n\n    const response: IApiResponseCollection<Payout[]> = await api.get(endpoint, this.params);\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          params={this.params}\n          paging={{\n            ...this.paging,\n            handleClickNext: this.handleClickNext,\n            handleClickPrevious: this.handleClickPrevious\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,8 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { A as Api } from './Api.js';
+import { p as pagingDefaults } from './Pagination.js';
 import './Payout.js';
-import { f as formatDate, a as formatCurrency } from './utils.js';
-import { p as pagingDefaults, d as defineCustomElement$2 } from './table.js';
+import { a as formatDate, b as formatCurrency } from './utils2.js';
+import { c as config } from './config.js';
+import { d as defineCustomElement$3 } from './table.js';
+import { d as defineCustomElement$2 } from './pagination-menu2.js';
 
 var ProceedStatuses;
 (function (ProceedStatuses) {
@@ -54,11 +57,6 @@ const ProceedsList = /*@__PURE__*/ proxyCustomElement(class ProceedsList extends
     this.__registerHost();
     this.__attachShadow();
     this.rowClicked = createEvent(this, "proceed-row-clicked", 7);
-    this.onPageChange = (direction) => {
-      return () => {
-        this.fetchData(direction);
-      };
-    };
     this.mapStatusToBadge = (status) => {
       switch (status) {
         case ProceedStatuses.scheduled:
@@ -75,12 +73,23 @@ const ProceedsList = /*@__PURE__*/ proxyCustomElement(class ProceedsList extends
           return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${ProceedStatusesSafeNames[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.proceeds = [];
     this.loading = true;
     this.errorMessage = undefined;
     this.paging = pagingDefaults;
+    this.params = undefined;
   }
   updateOnPropChange() {
     this.fetchData();
@@ -88,7 +97,7 @@ const ProceedsList = /*@__PURE__*/ proxyCustomElement(class ProceedsList extends
   connectedCallback() {
     this.fetchData();
   }
-  async fetchData(direction) {
+  async fetchData() {
     var _a;
     if (!this.accountId || !this.authToken) {
       this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
@@ -97,10 +106,8 @@ const ProceedsList = /*@__PURE__*/ proxyCustomElement(class ProceedsList extends
     }
     this.loading = true;
     const endpoint = `account/${this.accountId}/proceeds`;
-    const response = await Api(this.authToken).get(endpoint, {
-      paging: this.paging,
-      direction: direction
-    });
+    const response = await Api(this.authToken, config.privateApiOrigin)
+      .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 Proceed(dataItem));
@@ -140,11 +147,12 @@ const ProceedsList = /*@__PURE__*/ proxyCustomElement(class ProceedsList extends
           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') }) })));
+      ])), 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 watchers() { return {
     "accountId": ["updateOnPropChange"],
-    "authToken": ["updateOnPropChange"]
+    "authToken": ["updateOnPropChange"],
+    "params": ["updateOnPropChange"]
   }; }
   static get style() { return proceedsListCss; }
 }, [1, "justifi-proceeds-list", {
@@ -153,13 +161,14 @@ const ProceedsList = /*@__PURE__*/ proxyCustomElement(class ProceedsList extends
     "proceeds": [32],
     "loading": [32],
     "errorMessage": [32],
-    "paging": [32]
+    "paging": [32],
+    "params": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["justifi-proceeds-list", "justifi-table"];
+  const components = ["justifi-proceeds-list", "justifi-table", "pagination-menu"];
   components.forEach(tagName => { switch (tagName) {
     case "justifi-proceeds-list":
       if (!customElements.get(tagName)) {
@@ -167,6 +176,11 @@ function defineCustomElement$1() {
       }
       break;
     case "justifi-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pagination-menu":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

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

@@ -1 +1 @@
-{"file":"justifi-proceeds-list.js","mappings":"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","names":[],"sources":["src/api/Proceed.ts","src/components/proceeds-list/proceeds-list.scss?tag=justifi-proceeds-list&encapsulation=shadow","src/components/proceeds-list/proceeds-list.tsx"],"sourcesContent":["import { BankAccount } from \"./shared\";\n\nexport enum ProceedStatuses {\n  paid = 'paid',\n  failed = 'failed',\n  forwarded = 'forwarded',\n  scheduled = 'scheduled',\n  in_transit = 'in_transit',\n  canceled = 'canceled',\n}\n\nexport enum ProceedStatusesSafeNames {\n  paid = 'Paid',\n  failed = 'Failed',\n  forwarded = 'Forwarded',\n  scheduled = 'Scheduled',\n  in_transit = 'In Transit',\n  canceled = 'Canceled',\n}\n\nexport interface IProceed {\n  id: string;\n  account_id: string;\n  amount: number;\n  bank_account: BankAccount;\n  currency: 'usd';\n  delivery_method: string;\n  description: string;\n  deposits_at: string;\n  fees_total: number;\n  refunds_count: number;\n  refunds_total: number;\n  payments_count: number;\n  payments_total: number;\n  payout_type: 'ach' | 'cc';\n  other_total: number;\n  status: ProceedStatuses;\n  metadata: any;\n  created_at: string;\n  updated_at: string;\n}\n\nexport class Proceed implements IProceed {\n  public id: string;\n  public account_id: string;\n  public amount: number;\n  public bank_account: BankAccount;\n  public currency: 'usd';\n  public delivery_method: string;\n  public description: string;\n  public deposits_at: string;\n  public fees_total: number;\n  public refunds_count: number;\n  public refunds_total: number;\n  public payments_count: number;\n  public payments_total: number;\n  public payout_type: 'ach' | 'cc';\n  public other_total: number;\n  public status: ProceedStatuses;\n  public metadata: any;\n  public created_at: string;\n  public updated_at: string;\n\n  constructor(payout: IProceed) {\n    this.id = payout.id;\n    this.account_id = payout.account_id;\n    this.amount = payout.amount;\n    this.bank_account = payout.bank_account;\n    this.currency = payout.currency;\n    this.delivery_method = payout.delivery_method || 'standard';\n    this.description = payout.description;\n    this.deposits_at = payout.deposits_at;\n    this.fees_total = payout.fees_total;\n    this.refunds_count = payout.refunds_count;\n    this.refunds_total = payout.refunds_total;\n    this.payments_count = payout.payments_count;\n    this.payments_total = payout.payments_total;\n    this.payout_type = payout.payout_type;\n    this.other_total = payout.other_total;\n    this.status = payout.status;\n    this.metadata = payout.metadata;\n    this.created_at = payout.created_at;\n    this.updated_at = payout.updated_at;\n  }\n}\n",":host {\n  @include host-base-styles;\n}\n","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"],"version":3}
+{"file":"justifi-proceeds-list.js","mappings":"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","names":[],"sources":["src/api/Proceed.ts","src/components/proceeds-list/proceeds-list.scss?tag=justifi-proceeds-list&encapsulation=shadow","src/components/proceeds-list/proceeds-list.tsx"],"sourcesContent":["import { BankAccount } from \"./shared\";\n\nexport enum ProceedStatuses {\n  paid = 'paid',\n  failed = 'failed',\n  forwarded = 'forwarded',\n  scheduled = 'scheduled',\n  in_transit = 'in_transit',\n  canceled = 'canceled',\n}\n\nexport enum ProceedStatusesSafeNames {\n  paid = 'Paid',\n  failed = 'Failed',\n  forwarded = 'Forwarded',\n  scheduled = 'Scheduled',\n  in_transit = 'In Transit',\n  canceled = 'Canceled',\n}\n\nexport interface IProceed {\n  id: string;\n  account_id: string;\n  amount: number;\n  bank_account: BankAccount;\n  currency: 'usd';\n  delivery_method: string;\n  description: string;\n  deposits_at: string;\n  fees_total: number;\n  refunds_count: number;\n  refunds_total: number;\n  payments_count: number;\n  payments_total: number;\n  payout_type: 'ach' | 'cc';\n  other_total: number;\n  status: ProceedStatuses;\n  metadata: any;\n  created_at: string;\n  updated_at: string;\n}\n\nexport class Proceed implements IProceed {\n  public id: string;\n  public account_id: string;\n  public amount: number;\n  public bank_account: BankAccount;\n  public currency: 'usd';\n  public delivery_method: string;\n  public description: string;\n  public deposits_at: string;\n  public fees_total: number;\n  public refunds_count: number;\n  public refunds_total: number;\n  public payments_count: number;\n  public payments_total: number;\n  public payout_type: 'ach' | 'cc';\n  public other_total: number;\n  public status: ProceedStatuses;\n  public metadata: any;\n  public created_at: string;\n  public updated_at: string;\n\n  constructor(payout: IProceed) {\n    this.id = payout.id;\n    this.account_id = payout.account_id;\n    this.amount = payout.amount;\n    this.bank_account = payout.bank_account;\n    this.currency = payout.currency;\n    this.delivery_method = payout.delivery_method || 'standard';\n    this.description = payout.description;\n    this.deposits_at = payout.deposits_at;\n    this.fees_total = payout.fees_total;\n    this.refunds_count = payout.refunds_count;\n    this.refunds_total = payout.refunds_total;\n    this.payments_count = payout.payments_count;\n    this.payments_total = payout.payments_total;\n    this.payout_type = payout.payout_type;\n    this.other_total = payout.other_total;\n    this.status = payout.status;\n    this.metadata = payout.metadata;\n    this.created_at = payout.created_at;\n    this.updated_at = payout.updated_at;\n  }\n}\n",":host {\n  @include host-base-styles;\n}\n","import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\nimport { formatCurrency, formatDate } from '../../utils/utils';\nimport { Proceed, ProceedStatuses, ProceedStatusesSafeNames } from '../../api/Proceed';\nimport { config } from '../../../config';\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 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  @State() params: any\n  @Event({\n    eventName: 'proceed-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Proceed>;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  @Watch('params')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\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  handleClickPrevious = (beforeCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.after_cursor;\n    this.params = ({ ...newParams, before_cursor: beforeCursor });\n  };\n\n  handleClickNext = (afterCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.before_cursor;\n    this.params = ({ ...newParams, after_cursor: afterCursor });\n  };\n\n  async fetchData(): 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, config.privateApiOrigin)\n      .get(endpoint, this.params);\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          params={this.params}\n          paging={{\n            ...this.paging,\n            handleClickNext: this.handleClickNext,\n            handleClickPrevious: this.handleClickPrevious\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/justifi-refund-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiRefundForm extends Components.JustifiRefundForm, HTMLElement {}
+export const JustifiRefundForm: {
+  prototype: JustifiRefundForm;
+  new (): JustifiRefundForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;