@justifi/webcomponents 4.6.4 → 4.7.0-rc.0

package/dist/collection/components/payment-method-form/test/payment-method-form.spec.js

@@ -5,77 +5,77 @@ describe('justifi-payment-method-form', () => {
   it('renders an iframe', async () => {
     const page = await newSpecPage({
       components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "card" }),
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card' }),
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+      <iframe id='justifi-payment-method-form-card' src='${process.env.IFRAME_ORIGIN}/card'></iframe>
     </justifi-payment-method-form>
   `);
   });
   it('renders a card iframe when paymentMethodFormType is card', async () => {
     const page = await newSpecPage({
       components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "card" }),
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card' }),
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+      <iframe id='justifi-payment-method-form-card' src='${process.env.IFRAME_ORIGIN}/card'></iframe>
     </justifi-payment-method-form>
   `);
   });
   it('renders a bank iframe when paymentMethodFormType is bank', async () => {
     const page = await newSpecPage({
       components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "bankAccount" }),
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount' }),
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount"></iframe>
+      <iframe id='justifi-payment-method-form-bankAccount' src='${process.env.IFRAME_ORIGIN}/bankAccount'></iframe>
     </justifi-payment-method-form>
   `);
   });
   it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
     const page = await newSpecPage({
       components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "bankAccount", paymentMethodFormValidationMode: "onChange" }),
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount', paymentMethodFormValidationMode: 'onChange' }),
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onChange"></iframe>
+        <iframe id='justifi-payment-method-form-bankAccount' src='${process.env.IFRAME_ORIGIN}/bankAccount?validationMode=onChange'></iframe>
       </justifi-payment-method-form>
     `);
   });
   it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
     const page = await newSpecPage({
       components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "bankAccount", paymentMethodFormValidationMode: "onBlur" }),
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount', paymentMethodFormValidationMode: 'onBlur' }),
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onBlur"></iframe>
+        <iframe id='justifi-payment-method-form-bankAccount' src='${process.env.IFRAME_ORIGIN}/bankAccount?validationMode=onBlur'></iframe>
       </justifi-payment-method-form>
     `);
   });
   it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {
     const page = await newSpecPage({
       components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "card", iframeOrigin: "https://js.justifi.ai/v2" }),
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card', iframeOrigin: '${process.env.IFRAME_ORIGIN}' }),
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+        <iframe id='justifi-payment-method-form-card' src='${process.env.IFRAME_ORIGIN}/card'></iframe>
       </justifi-payment-method-form>
     `);
   });
   it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {
     const page = await newSpecPage({
       components: [PaymentMethodForm],
-      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "card", singleLine: true }),
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card', singleLine: true }),
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card?singleLine=true"></iframe>
+        <iframe id='justifi-payment-method-form-card' src='${process.env.IFRAME_ORIGIN}/card?singleLine=true'></iframe>
       </justifi-payment-method-form>
     `);
   });

package/dist/collection/components/payment-method-form/test/payment-method-form.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-method-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/payment-method-form/test/payment-method-form.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { PaymentMethodForm } from '../payment-method-form';\n\ndescribe('justifi-payment-method-form', () => {\n  it('renders an iframe', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe when paymentMethodFormType is card', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a bank iframe when paymentMethodFormType is bank', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onChange\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onChange\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onBlur\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onBlur\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" iframeOrigin=\"https://js.justifi.ai/v2\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" singleLine={true}></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card?singleLine=true\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"payment-method-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/payment-method-form/test/payment-method-form.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { PaymentMethodForm } from '../payment-method-form';\n\ndescribe('justifi-payment-method-form', () => {\n  it('renders an iframe', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType='card'></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id='justifi-payment-method-form-card' src='${process.env.IFRAME_ORIGIN}/card'></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe when paymentMethodFormType is card', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType='card'></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id='justifi-payment-method-form-card' src='${process.env.IFRAME_ORIGIN}/card'></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a bank iframe when paymentMethodFormType is bank', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType='bankAccount'></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id='justifi-payment-method-form-bankAccount' src='${process.env.IFRAME_ORIGIN}/bankAccount'></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType='bankAccount' paymentMethodFormValidationMode='onChange'></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id='justifi-payment-method-form-bankAccount' src='${process.env.IFRAME_ORIGIN}/bankAccount?validationMode=onChange'></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType='bankAccount' paymentMethodFormValidationMode='onBlur'></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id='justifi-payment-method-form-bankAccount' src='${process.env.IFRAME_ORIGIN}/bankAccount?validationMode=onBlur'></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType='card' iframeOrigin='${process.env.IFRAME_ORIGIN}'></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id='justifi-payment-method-form-card' src='${process.env.IFRAME_ORIGIN}/card'></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType='card' singleLine={true}></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id='justifi-payment-method-form-card' src='${process.env.IFRAME_ORIGIN}/card?singleLine=true'></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n});\n"]}

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

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { Api, Payment } from "../../api";
+import { Api, Payment, pagingDefaults } from "../../api";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { pagingDefaults } from "../table/table-utils";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -23,10 +22,15 @@ import { pagingDefaults } from "../table/table-utils";
 */
 export class PaymentsList {
   constructor() {
-    this.onPageChange = (direction) => {
-      return () => {
-        this.fetchData(direction);
-      };
+    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;
@@ -34,6 +38,7 @@ export class PaymentsList {
     this.loading = true;
     this.errorMessage = undefined;
     this.paging = pagingDefaults;
+    this.params = undefined;
   }
   updateOnPropChange() {
     this.fetchData();
@@ -41,7 +46,7 @@ export class PaymentsList {
   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";
@@ -49,11 +54,9 @@ export class PaymentsList {
       return;
     }
     this.loading = true;
+    const api = Api(this.authToken, process.env.PROXY_API_ORIGIN);
     const endpoint = `account/${this.accountId}/payments`;
-    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 Payment(dataItem));
@@ -99,7 +102,7 @@ export class PaymentsList {
           value: MapPaymentStatusToBadge(payment.status)
         },
         payment.id
-      ])), 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 is() { return "justifi-payments-list"; }
   static get encapsulation() { return "shadow"; }
@@ -156,7 +159,8 @@ export class PaymentsList {
       "payments": {},
       "loading": {},
       "errorMessage": {},
-      "paging": {}
+      "paging": {},
+      "params": {}
     };
   }
   static get events() {
@@ -190,6 +194,9 @@ export class PaymentsList {
       }, {
         "propName": "authToken",
         "methodName": "updateOnPropChange"
+      }, {
+        "propName": "params",
+        "methodName": "updateOnPropChange"
       }];
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"payments-list.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, IPaymentMethod, Payment } from '../../api';\nimport { MapPaymentStatusToBadge, 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-payments-list',\n  styleUrl: 'payments-list.scss',\n  shadow: true,\n})\n\nexport class PaymentsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() payments: Payment[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @Event({\n    eventName: 'payment-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Payment>;\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  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}/payments`;\n\n    const response: IApiResponseCollection<Payment[]> = 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 Payment(dataItem));\n      this.payments = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  getPaymentMethod(paymentMethod: IPaymentMethod) {\n    return paymentMethod.card || paymentMethod.bank_account\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={e => {\n            const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickedPaymentID) { return }\n            this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));\n          }}\n          entityId={this.payments.map((payment) => payment.id)}\n          columnData={[\n            ['Made On', 'The date and time each payment was made'],\n            ['Amount', 'The dollar amount of each payment'],\n            ['Description', 'The payment description, if you provided one'],\n            ['Cardholder', 'The name associated with the payment method'],\n            ['Payment Method', 'The brand and last 4 digits of the payment method'],\n            ['Status', 'The current status of each payment'],\n            ['Payment ID', 'The unique identifier of each payment']\n          ]}\n          rowData={\n            this.payments.map((payment) => (\n              [\n                {\n                  type: 'head',\n                  value: `\n                    <div>${formatDate(payment.created_at)}</div>\n                    <div>${formatTime(payment.created_at)}</div>\n                  `,\n                },\n                formatCurrency(payment.amount),\n                payment.description,\n                this.getPaymentMethod(payment.payment_method).name,\n                this.getPaymentMethod(payment.payment_method).acct_last_four,\n                {\n                  type: 'inner',\n                  value: MapPaymentStatusToBadge(payment.status)\n                },\n                payment.id\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":"payments-list.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, IPaymentMethod, PagingInfo, Payment, pagingDefaults } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/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-payments-list',\n  styleUrl: 'payments-list.scss',\n  shadow: true,\n})\n\nexport class PaymentsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() payments: Payment[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any;\n  @Event({\n    eventName: 'payment-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Payment>;\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  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\n    this.loading = true;\n\n    const api = Api(this.authToken, process.env.PROXY_API_ORIGIN);\n    const endpoint = `account/${this.accountId}/payments`;\n\n    const response: IApiResponseCollection<Payment[]> = await api.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 Payment(dataItem));\n      this.payments = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  getPaymentMethod(paymentMethod: IPaymentMethod) {\n    return paymentMethod.card || paymentMethod.bank_account\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={e => {\n            const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickedPaymentID) { return }\n            this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));\n          }}\n          entityId={this.payments.map((payment) => payment.id)}\n          columnData={[\n            ['Made On', 'The date and time each payment was made'],\n            ['Amount', 'The dollar amount of each payment'],\n            ['Description', 'The payment description, if you provided one'],\n            ['Cardholder', 'The name associated with the payment method'],\n            ['Payment Method', 'The brand and last 4 digits of the payment method'],\n            ['Status', 'The current status of each payment'],\n            ['Payment ID', 'The unique identifier of each payment']\n          ]}\n          rowData={\n            this.payments.map((payment) => (\n              [\n                {\n                  type: 'head',\n                  value: `\n                    <div>${formatDate(payment.created_at)}</div>\n                    <div>${formatTime(payment.created_at)}</div>\n                  `,\n                },\n                formatCurrency(payment.amount),\n                payment.description,\n                this.getPaymentMethod(payment.payment_method).name,\n                this.getPaymentMethod(payment.payment_method).acct_last_four,\n                {\n                  type: 'inner',\n                  value: MapPaymentStatusToBadge(payment.status)\n                },\n                payment.id\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"]}

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

@@ -1,6 +1,5 @@
-import config from "../../../config";
 export default {
-  title: 'Pre-release Components/PaymentsList',
+  title: 'Components/PaymentsList',
   component: 'justifi-payments-list',
   parameters: {},
   decorators: [
@@ -16,8 +15,8 @@ export default {
 };
 class PaymentsListArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.authToken;
-    this['account-id'] = args['account-id'] || config.accountId;
+    this['auth-token'] = args['auth-token'] || process.env.PROXY_AUTH_TOKEN;
+    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PAYMENTS_ACCOUNT_ID;
   }
 }
 const Template = (args) => {

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

@@ -1 +1 @@
-{"version":3,"file":"payments-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,qCAAqC;EAC5C,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,MAAM,CAAC,SAAS,CAAC;IAC5D,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC;EAC9D,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;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import config from '../../../config';\n\nexport default {\n  title: 'Pre-release Components/PaymentsList',\n  component: 'justifi-payments-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('payment-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass PaymentsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || config.authToken;\n    this['account-id'] = args['account-id'] || config.accountId;\n  }\n}\n\nconst Template = (args: PaymentsListArgs) => {\n  return (`\n    <justifi-payments-list\n      data-testid=\"justifi-payments-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 PaymentsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payments-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-payments-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-payments-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-payments-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-payments-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-payments-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-payments-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n  (Story) => `\n    <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n      ${Story()}\n    </div>\n  `\n]\nContained.args = new PaymentsListArgs({});\n"]}
+{"version":3,"file":"payments-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,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,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC;IACxE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;EACrF,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;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'Components/PaymentsList',\n  component: 'justifi-payments-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('payment-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass PaymentsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || process.env.PROXY_AUTH_TOKEN;\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PAYMENTS_ACCOUNT_ID;\n  }\n}\n\nconst Template = (args: PaymentsListArgs) => {\n  return (`\n    <justifi-payments-list\n      data-testid=\"justifi-payments-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 PaymentsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payments-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-payments-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-payments-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-payments-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-payments-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-payments-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-payments-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n  (Story) => `\n    <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n      ${Story()}\n    </div>\n  `\n]\nContained.args = new PaymentsListArgs({});\n"]}

package/dist/collection/components/payout-details/payout-details.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { Api } from "../../api";
 import { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
 /**
   * @exportedPart detail-loading-spinner
   * @exportedPart detail-loading-state
@@ -17,6 +17,14 @@ import { DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorSta
   * @exportedPart detail-metadata-title
   * @exportedPart detail-method-title
   * @exportedPart detail-method-data
+  * @exportedPart detail-section
+  * @exportedPart detail-section-title
+  * @exportedPart detail-section-item-title
+  * @exportedPart detail-section-item-data
+  * @exportedPart detail-head-info
+  * @exportedPart detail-head-info-item
+  * @exportedPart detail-head-info-item-title
+  * @exportedPart detail-head-info-item-data
 */
 export class PaymentDetails {
   constructor() {
@@ -41,7 +49,7 @@ export class PaymentDetails {
     }
     this.loading = true;
     const endpoint = `payouts/${this.payoutId}`;
-    const response = await Api(this.authToken).get(endpoint);
+    const response = await Api(this.authToken, process.env.PROXY_API_ORIGIN).get(endpoint);
     if (!response.error) {
       this.payout = response.data;
     }
@@ -54,7 +62,7 @@ export class PaymentDetails {
     var _a;
     return (h(Host, null, this.loading ? LoadingState :
       !this.payout ? ErrorState(this.errorMessage) :
-        h("justifi-details", { "error-message": this.errorMessage, entity: { metadata: this.payout.metadata } }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payout.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { title: "Statement Description", value: this.payout.description }), h(DetailItem, { title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSection, { sectionTitle: "Account" }, h(DetailItem, { title: "ID", value: this.payout.account_id }), h(DetailItem, { title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { title: "Account Number", value: this.payout.bank_account.account_number_last4 }))))));
+        h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payout.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { title: "Statement Description", value: this.payout.description }), h(DetailItem, { title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSection, { sectionTitle: "Account" }, h(DetailItem, { title: "ID", value: this.payout.account_id }), h(DetailItem, { title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payout.metadata }))))));
   }
   static get is() { return "justifi-payout-details"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"payout-details.js","sourceRoot":"","sources":["../../../../src/components/payout-details/payout-details.tsx"],"names":[],"mappings":"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","sourcesContent":["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":"payout-details.js","sourceRoot":"","sources":["../../../../src/components/payout-details/payout-details.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\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, process.env.PROXY_API_ORIGIN).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}"]}

package/dist/collection/components/payout-details/payout-details.stories.js

@@ -1,13 +1,12 @@
-import config from "../../../config";
 export default {
-  title: 'Pre-release Components/PayoutDetails',
+  title: 'Components/PayoutDetails',
   component: 'justifi-payout-details',
   parameters: {}
 };
 class PayoutDetailsArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.authToken;
-    this['payment-id'] = args['payment-id'] || 'po_zBUZ6WvMEzoPzwS0qUmWE';
+    this['auth-token'] = args['auth-token'] || process.env.PROXY_AUTH_TOKEN;
+    this['payout-id'] = args['payout-id'] || process.env.EXAMPLE_PAYOUT_ID;
   }
 }
 const Template = (args) => {

package/dist/collection/components/payout-details/payout-details.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"payout-details.stories.js","sourceRoot":"","sources":["../../../../src/components/payout-details/payout-details.stories.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,sCAAsC;EAC7C,SAAS,EAAE,wBAAwB;EACnC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,iBAAiB;EAIrB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC;IAC5D,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,0BAA0B,CAAC;EACxE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;EAC3C,OAAO,CAAC;;;oBAGU,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,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,iBAAiB,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;GAkBV;CACF,CAAA","sourcesContent":["import config from '../../../config';\n\nexport default {\n  title: 'Pre-release Components/PayoutDetails',\n  component: 'justifi-payout-details',\n  parameters: {}\n};\n\nclass PayoutDetailsArgs {\n  'auth-token': string;\n  'payout-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || config.authToken;\n    this['payment-id'] = args['payment-id'] || 'po_zBUZ6WvMEzoPzwS0qUmWE';\n  }\n}\n\nconst Template = (args: PayoutDetailsArgs) => {\n  return (`\n    <justifi-payout-details\n      data-testid=\"justifi-payout-details\"\n      auth-token=\"${args['auth-token']}\"\n      payout-id=\"${args['payout-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PayoutDetailsArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PayoutDetailsArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payout-details::part(detail-head) {\n        background-color: rgba(100, 200, 250, 0.2);\n        border-left: 4px solid rgba(100, 200, 250, 1);\n      }\n      justifi-payout-details::part(detail-info-item-title),\n      justifi-payout-details::part(detail-method-item-title) {\n        border-radius: 3px;\n        background-color: rgba(0, 0, 0, 0.8);\n        text-align: center;\n        padding: 0 10px;\n        color: white !important;\n      }\n      justifi-payout-details::part(detail-metadata) {\n        background-color: rgba(100,100,100,0.2)\n      }\n    </style>\n  `\n]\n"]}
+{"version":3,"file":"payout-details.stories.js","sourceRoot":"","sources":["../../../../src/components/payout-details/payout-details.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,0BAA0B;EACjC,SAAS,EAAE,wBAAwB;EACnC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,iBAAiB;EAIrB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC;IACxE,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC;EACzE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;EAC3C,OAAO,CAAC;;;oBAGU,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,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,iBAAiB,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;GAkBV;CACF,CAAA","sourcesContent":["export default {\n  title: 'Components/PayoutDetails',\n  component: 'justifi-payout-details',\n  parameters: {}\n};\n\nclass PayoutDetailsArgs {\n  'auth-token': string;\n  'payout-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || process.env.PROXY_AUTH_TOKEN;\n    this['payout-id'] = args['payout-id'] || process.env.EXAMPLE_PAYOUT_ID;\n  }\n}\n\nconst Template = (args: PayoutDetailsArgs) => {\n  return (`\n    <justifi-payout-details\n      data-testid=\"justifi-payout-details\"\n      auth-token=\"${args['auth-token']}\"\n      payout-id=\"${args['payout-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PayoutDetailsArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PayoutDetailsArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payout-details::part(detail-head) {\n        background-color: rgba(100, 200, 250, 0.2);\n        border-left: 4px solid rgba(100, 200, 250, 1);\n      }\n      justifi-payout-details::part(detail-info-item-title),\n      justifi-payout-details::part(detail-method-item-title) {\n        border-radius: 3px;\n        background-color: rgba(0, 0, 0, 0.8);\n        text-align: center;\n        padding: 0 10px;\n        color: white !important;\n      }\n      justifi-payout-details::part(detail-metadata) {\n        background-color: rgba(100,100,100,0.2)\n      }\n    </style>\n  `\n]\n"]}

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

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { Api, Payout, PayoutStatuses, PayoutStatusesSafeNames } from "../../api";
+import { Api, Payout, PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults } from "../../api";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { pagingDefaults } from "../table/table-utils";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -23,11 +22,6 @@ import { pagingDefaults } from "../table/table-utils";
 */
 export class PayoutsList {
   constructor() {
-    this.onPageChange = (direction) => {
-      return () => {
-        this.fetchData(direction);
-      };
-    };
     this.mapStatusToBadge = (status) => {
       switch (status) {
         case PayoutStatuses.scheduled:
@@ -44,12 +38,23 @@ export class PayoutsList {
           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();
@@ -57,7 +62,7 @@ export class PayoutsList {
   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";
@@ -65,11 +70,9 @@ export class PayoutsList {
       return;
     }
     this.loading = true;
+    const api = Api(this.authToken, process.env.PROXY_API_ORIGIN);
     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));
@@ -118,7 +121,7 @@ export class PayoutsList {
           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 is() { return "justifi-payouts-list"; }
   static get encapsulation() { return "shadow"; }
@@ -175,7 +178,8 @@ export class PayoutsList {
       "payouts": {},
       "loading": {},
       "errorMessage": {},
-      "paging": {}
+      "paging": {},
+      "params": {}
     };
   }
   static get events() {
@@ -209,6 +213,9 @@ export class PayoutsList {
       }, {
         "propName": "authToken",
         "methodName": "updateOnPropChange"
+      }, {
+        "propName": "params",
+        "methodName": "updateOnPropChange"
       }];
   }
 }

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, 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":"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 { \n  Api, \n  IApiResponseCollection, \n  PagingInfo, \n  Payout, \n  PayoutStatuses, \n  PayoutStatusesSafeNames, \n  pagingDefaults \n} from '../../api';\nimport { formatCurrency, formatDate, formatTime } from '../../utils/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  @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, process.env.PROXY_API_ORIGIN);\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"]}

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

@@ -1,6 +1,5 @@
-import config from "../../../config";
 export default {
-  title: 'Pre-release Components/PayoutsList',
+  title: 'Components/PayoutsList',
   component: 'justifi-payouts-list',
   parameters: {},
   decorators: [
@@ -16,8 +15,8 @@ export default {
 };
 class PayoutsListArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.authToken;
-    this['payment-id'] = args['payment-id'] || config.accountId;
+    this['auth-token'] = args['auth-token'] || process.env.PROXY_AUTH_TOKEN;
+    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PAYMENTS_ACCOUNT_ID;
   }
 }
 const Template = (args) => {