@justifi/webcomponents 4.6.4 → 4.7.0-rc.1

package/dist/collection/components/gross-payment-chart/gross-payment-chart.js

@@ -0,0 +1,127 @@
+import { Host, h } from "@stencil/core";
+import { Api } from "../../api";
+import { Chart, BarController, Colors, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title } from "chart.js";
+import { generateChartOptions } from "./chart-utils";
+import { ErrorState } from "../details/utils";
+export class GrossPaymentChart {
+  constructor() {
+    this.accountId = undefined;
+    this.authToken = undefined;
+    this.data = undefined;
+    this.total = undefined;
+    this.dates = undefined;
+    this.endDate = undefined;
+    this.loading = true;
+    this.errorMessage = '';
+  }
+  updateOnPropChange() {
+    this.fetchData();
+  }
+  connectedCallback() {
+    this.fetchData();
+  }
+  componentDidRender() {
+    this.renderChart();
+  }
+  async fetchData() {
+    if (!this.accountId || !this.authToken) {
+      this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
+      this.loading = false;
+      return;
+    }
+    this.loading = true;
+    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);
+    const endpoint = `account/${this.accountId}/reports/gross_volume`;
+    const response = await api.get(endpoint);
+    if (!response.error) {
+      this.total = response === null || response === void 0 ? void 0 : response.data.total;
+      this.dates = response === null || response === void 0 ? void 0 : response.data.dates.reverse();
+      this.endDate = this.dates[this.dates.length - 1].date;
+    }
+    this.loading = false;
+  }
+  renderChart() {
+    if (this.chart) {
+      this.chart.update();
+    }
+    else if (this.chartRef && this.endDate) {
+      Chart.register(Colors, BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title);
+      this.chart = new Chart(this.chartRef.getContext("2d"), generateChartOptions(this.total, this.dates, this.endDate));
+      this.chart.render();
+    }
+  }
+  render() {
+    return (h(Host, null, this.errorMessage ? ErrorState(this.errorMessage)
+      : h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem })));
+  }
+  static get is() { return "justifi-gross-payment-chart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gross-payment-chart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gross-payment-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accountId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "account-id",
+        "reflect": false
+      },
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "data": {},
+      "total": {},
+      "dates": {},
+      "endDate": {},
+      "loading": {},
+      "errorMessage": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "accountId",
+        "methodName": "updateOnPropChange"
+      }, {
+        "propName": "authToken",
+        "methodName": "updateOnPropChange"
+      }];
+  }
+}
+//# sourceMappingURL=gross-payment-chart.js.map

package/dist/collection/components/gross-payment-chart/gross-payment-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gross-payment-chart.js","sourceRoot":"","sources":["../../../../src/components/gross-payment-chart/gross-payment-chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { Api, IApiResponseCollection } from '../../api';\nimport { Chart, BarController, Colors, BarElement, CategoryScale, LinearScale, Legend, Tooltip, Title, ChartConfiguration} from 'chart.js'\nimport { GrossVolumeReport, GrossVolumeReportDate } from '../../api/GrossVolume';\nimport { generateChartOptions } from './chart-utils';\nimport { ErrorState } from '../details/utils';\n\n@Component({\n  tag: 'justifi-gross-payment-chart',\n  styleUrl: 'gross-payment-chart.scss',\n  shadow: true,\n})\nexport class GrossPaymentChart {\n  chart: Chart\n  chartRef: HTMLCanvasElement\n\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() data: GrossVolumeReport;\n  @State() total: number;\n  @State() dates: GrossVolumeReportDate[];\n  @State() endDate: string;\n  @State() loading: boolean = true;\n  @State() errorMessage: string = '';\n\n  @Watch('accountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n  \n  componentDidRender() {\n    this.renderChart();\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.PRIVATE_API_ORIGIN);\n    const endpoint = `account/${this.accountId}/reports/gross_volume`;\n    const response: IApiResponseCollection<GrossVolumeReport> = await api.get(endpoint);\n\n    if (!response.error) {\n      this.total = response?.data.total;\n      this.dates = response?.data.dates.reverse();\n      this.endDate = this.dates[this.dates.length - 1].date;\n    }\n\n    this.loading = false;\n  }\n\n  renderChart() {\n    if (this.chart) {\n      this.chart.update()\n    } else if (this.chartRef && this.endDate) {\n      Chart.register(\n        Colors,\n        BarController,\n        BarElement,\n        CategoryScale,\n        LinearScale,\n        Legend,\n        Tooltip,\n        Title\n      )\n      this.chart = new Chart(\n        this.chartRef.getContext(\"2d\"),\n        generateChartOptions(this.total, this.dates, this.endDate) as ChartConfiguration\n      );\n      this.chart.render()\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {\n          this.errorMessage ? ErrorState(this.errorMessage) \n            : <canvas id=\"chart\" ref={(elem) => this.chartRef = elem} />\n        }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/gross-payment-chart/gross-payment-chart.stories.js

@@ -0,0 +1,22 @@
+export default {
+  title: 'dev/Components/GrossPaymentChart',
+  component: 'justifi-gross-payment-chart',
+  parameters: {}
+};
+class GrossChartArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['account-id'] = args['account-id'] || '';
+  }
+}
+const Template = (args) => {
+  return (`
+    <justifi-gross-payment-chart 
+      auth-token="${args['auth-token']}"
+      account-id="${args['account-id']}"
+    />
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = new GrossChartArgs({});
+//# sourceMappingURL=gross-payment-chart.stories.js.map

package/dist/collection/components/gross-payment-chart/gross-payment-chart.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gross-payment-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/gross-payment-chart/gross-payment-chart.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,SAAS,EAAE,6BAA6B;EACxC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,cAAc;EAIlB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;EAChD,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAoB,EAAE,EAAE;EACxC,OAAO,CAAC;;oBAEU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'dev/Components/GrossPaymentChart',\n  component: 'justifi-gross-payment-chart',\n  parameters: {}\n};\n\nclass GrossChartArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['account-id'] = args['account-id'] || '';\n  }\n}\n\nconst Template = (args: GrossChartArgs) => {\n  return (`\n    <justifi-gross-payment-chart \n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `)\n}\n\nexport const Basic = Template.bind({});\nBasic.args = new GrossChartArgs({});\n"]}

package/dist/collection/components/gross-payment-chart/test/gross-payment-chart.spec.js

@@ -0,0 +1,15 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { GrossPaymentChart } from "../gross-payment-chart";
+describe('gross-payment-chart', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [GrossPaymentChart],
+      html: `<gross-payment-chart></gross-payment-chart>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <gross-payment-chart>
+      </gross-payment-chart>
+    `);
+  });
+});
+//# sourceMappingURL=gross-payment-chart.spec.js.map

package/dist/collection/components/gross-payment-chart/test/gross-payment-chart.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gross-payment-chart.spec.js","sourceRoot":"","sources":["../../../../../src/components/gross-payment-chart/test/gross-payment-chart.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,6CAA6C;KACpD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;KAG7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { GrossPaymentChart } from '../gross-payment-chart';\n\ndescribe('gross-payment-chart', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [GrossPaymentChart],\n      html: `<gross-payment-chart></gross-payment-chart>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <gross-payment-chart>\n      </gross-payment-chart>\n    `);\n  });\n});\n"]}

package/dist/collection/components/pagination-menu/pagination-menu.js

@@ -0,0 +1,78 @@
+import { Host, h } from "@stencil/core";
+import { ExtendedPagingDefaults } from "../../api/Pagination";
+export class PaginationMenu {
+  constructor() {
+    this.paging = ExtendedPagingDefaults;
+    this.params = {};
+  }
+  render() {
+    return (h(Host, null, h("nav", { "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { class: "pagination m-0" }, h("li", { onClick: (e) => {
+        e.preventDefault();
+        this.paging.handleClickPrevious(this.paging.start_cursor);
+      }, part: `previous-button${this.paging.has_previous ? '' : ' button-disabled'}`, class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { href: "#", class: "page-link" }, h("span", { class: "me-1", part: "arrow arrow-left" }, "\u00AB"), h("span", { part: "previous-button-text" }, "Previous"))), h("li", { onClick: (e) => {
+        e.preventDefault();
+        this.paging.handleClickNext(this.paging.end_cursor);
+      }, part: `${this.paging.has_next ? '' : ' button-disabled'}`, class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { href: "#", class: "page-link" }, h("span", { part: "next-button-text" }, "Next"), h("span", { class: "ms-1", part: "arrow arrow-right" }, "\u00BB")))))));
+  }
+  static get is() { return "pagination-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../table/table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../table/table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "paging": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "PaginationProps['paging']",
+          "resolved": "ExtendedPagingInfo",
+          "references": {
+            "PaginationProps": {
+              "location": "local",
+              "path": "/home/runner/work/web-component-library/web-component-library/stencil-library/src/components/pagination-menu/pagination-menu.tsx",
+              "id": "src/components/pagination-menu/pagination-menu.tsx::PaginationProps"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "ExtendedPagingDefaults"
+      },
+      "params": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "PaginationProps['params']",
+          "resolved": "{}",
+          "references": {
+            "PaginationProps": {
+              "location": "local",
+              "path": "/home/runner/work/web-component-library/web-component-library/stencil-library/src/components/pagination-menu/pagination-menu.tsx",
+              "id": "src/components/pagination-menu/pagination-menu.tsx::PaginationProps"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
+      }
+    };
+  }
+}
+//# sourceMappingURL=pagination-menu.js.map

package/dist/collection/components/pagination-menu/pagination-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-menu.js","sourceRoot":"","sources":["../../../../src/components/pagination-menu/pagination-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAsB,MAAM,sBAAsB,CAAC;AAalF,MAAM,OAAO,cAAc;;kBACmB,sBAAsB;kBACtB,EAAE;;EAE9C,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,yBAAgB,kBAAkB,EAAC,KAAK,EAAC,kCAAkC;QACzE,UAAI,KAAK,EAAC,gBAAgB;UACxB,UACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;cACb,CAAC,CAAC,cAAc,EAAE,CAAC;cACnB,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC5D,CAAC,EACD,IAAI,EAAE,kBAAkB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,EAC5E,KAAK,EAAE,aAAa,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;YAEjE,SAAG,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,WAAW;cAC3B,YAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,kBAAkB,aAAe;cACzD,YAAM,IAAI,EAAC,sBAAsB,eAAgB,CAC/C,CACD;UACL,UACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;cACb,CAAC,CAAC,cAAc,EAAE,CAAC;cACnB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACtD,CAAC,EACD,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,EACzD,KAAK,EAAE,aAAa,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;YAE7D,SAAG,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,WAAW;cAC3B,YAAM,IAAI,EAAC,kBAAkB,WAAY;cACzC,YAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,mBAAmB,aAAe,CACxD,CACD,CACF,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { ExtendedPagingDefaults, ExtendedPagingInfo } from '../../api/Pagination';\n\nexport interface PaginationProps {\n  paging: ExtendedPagingInfo;\n  params?: {};\n}\n\n@Component({\n  tag: 'pagination-menu',\n  styleUrl: '../table/table.scss',\n  shadow: true,\n})\n\nexport class PaginationMenu {\n  @Prop() paging: PaginationProps['paging'] = ExtendedPagingDefaults;\n  @Prop() params: PaginationProps['params'] = {};\n\n  render() {\n    return (\n      <Host>\n        <nav aria-label=\"Table pagination\" class=\"d-flex justify-content-end gap-3\">\n          <ul class=\"pagination m-0\">\n            <li\n              onClick={(e) => {\n                e.preventDefault();\n                this.paging.handleClickPrevious(this.paging.start_cursor);\n              }}\n              part={`previous-button${this.paging.has_previous ? '' : ' button-disabled'}`}\n              class={`page-item ${this.paging.has_previous ? '' : ' disabled'}`}\n            >\n              <a href=\"#\" class=\"page-link\">\n                <span class=\"me-1\" part=\"arrow arrow-left\">&laquo;</span>\n                <span part=\"previous-button-text\">Previous</span>\n              </a>\n            </li>\n            <li\n              onClick={(e) => {\n                e.preventDefault();\n                this.paging.handleClickNext(this.paging.end_cursor);\n              }}\n              part={`${this.paging.has_next ? '' : ' button-disabled'}`}\n              class={`page-item ${this.paging.has_next ? '' : ' disabled'}`}\n            >\n              <a href=\"#\" class=\"page-link\">\n                <span part=\"next-button-text\">Next</span>\n                <span class=\"ms-1\" part=\"arrow arrow-right\">&raquo;</span>\n              </a>\n            </li>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.js

@@ -0,0 +1,153 @@
+import { Host, h } from "@stencil/core";
+import { Api, PaymentBalanceTransaction, pagingDefaults, } from "../../api";
+import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable, } from "../../utils/utils";
+export class PaymentBalanceTransactions {
+  constructor() {
+    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.paymentId = undefined;
+    this.balanceTransactions = [];
+    this.loading = true;
+    this.errorMessage = undefined;
+    this.paging = pagingDefaults;
+    this.params = undefined;
+  }
+  updateOnPropChange() {
+    this.fetchData();
+  }
+  connectedCallback() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.loading = true;
+    if (!this.accountId || !this.paymentId) {
+      this.errorMessage = 'Missing required props: accountId or paymentId';
+      this.loading = false;
+      return;
+    }
+    const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;
+    const response = await Api(this.authToken).get(endpoint, this.params);
+    if (!response.error) {
+      this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
+      this.balanceTransactions = response.data.map(dataItem => new PaymentBalanceTransaction(dataItem));
+    }
+    else {
+      this.errorMessage =
+        typeof response.error === 'string'
+          ? response.error
+          : response.error.message;
+    }
+    this.loading = false;
+  }
+  render() {
+    return (h(Host, null, h("justifi-table", { columnData: [
+        ['Processed On', 'The date each transaction occurred'],
+        ['Type', 'The type of each transaction'],
+        ['ID', 'The unique identifier of each transaction'],
+        ['Amout', 'The dollar amount of each transaction'],
+        [
+          'Balance',
+          'The running total amount of this payment that belongs to you',
+        ],
+      ], entityId: this.balanceTransactions.map(transaction => transaction.id), rowData: this.balanceTransactions.map(balanceTransaction => [
+        h("div", null, h("div", null, formatDate(balanceTransaction.created_at)), h("div", null, formatTime(balanceTransaction.created_at))),
+        snakeCaseToHumanReadable(balanceTransaction.payment_balance_txn_type),
+        balanceTransaction.payment_id,
+        formatCurrency(balanceTransaction.amount),
+        formatCurrency(balanceTransaction.balance),
+      ]), 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-payment-balance-transactions"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["payment-balance-transactions.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["payment-balance-transactions.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accountId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "account-id",
+        "reflect": false
+      },
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      },
+      "paymentId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "payment-id",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "balanceTransactions": {},
+      "loading": {},
+      "errorMessage": {},
+      "paging": {},
+      "params": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "params",
+        "methodName": "updateOnPropChange"
+      }];
+  }
+}
+//# sourceMappingURL=payment-balance-transactions.js.map

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-balance-transactions.js","sourceRoot":"","sources":["../../../../src/components/payment-balance-transactions/payment-balance-transactions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EACL,GAAG,EAIH,yBAAyB,EACzB,cAAc,GACf,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,cAAc,EACd,UAAU,EACV,UAAU,EACV,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,0BAA0B;;IAmBrC,wBAAmB,GAAG,CAAC,YAAoB,EAAE,EAAE;MAC7C,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,YAAY,CAAC;MAC9B,IAAI,CAAC,MAAM,GAAG,iCAAM,SAAS,KAAE,aAAa,EAAE,YAAY,IAAG,CAAC;IAChE,CAAC,CAAC;IAEF,oBAAe,GAAG,CAAC,WAAmB,EAAE,EAAE;MACxC,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,aAAa,CAAC;MAC/B,IAAI,CAAC,MAAM,GAAG,iCAAM,SAAS,KAAE,YAAY,EAAE,WAAW,IAAG,CAAC;IAC9D,CAAC,CAAC;;;;+BAzB2D,EAAE;mBACnC,IAAI;;kBAEF,cAAc;;;EAI5C,kBAAkB;IAChB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAcD,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACtC,IAAI,CAAC,YAAY,GAAG,gDAAgD,CAAC;MACrE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,OAAO;KACR;IACD,MAAM,QAAQ,GAAG,WAAW,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,SAAS,+BAA+B,CAAC;IAErG,MAAM,QAAQ,GACZ,MAAM,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAEvD,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;MACnB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,GACX,QAAQ,CAAC,SAAS,CACtB,CAAC;MACF,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,yBAAyB,CAAC,QAAQ,CAAC,CACpD,CAAC;KACH;SAAM;MACL,IAAI,CAAC,YAAY;QACf,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ;UAChC,CAAC,CAAC,QAAQ,CAAC,KAAK;UAChB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC;KAC9B;IACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,qBACE,UAAU,EAAE;UACV,CAAC,cAAc,EAAE,oCAAoC,CAAC;UACtD,CAAC,MAAM,EAAE,8BAA8B,CAAC;UACxC,CAAC,IAAI,EAAE,2CAA2C,CAAC;UACnD,CAAC,OAAO,EAAE,uCAAuC,CAAC;UAClD;YACE,SAAS;YACT,8DAA8D;WAC/D;SACF,EACD,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EACrE,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;UAC1D;YACE,eAAM,UAAU,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAO;YACtD,eAAM,UAAU,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAO,CAClD;UACN,wBAAwB,CACtB,kBAAkB,CAAC,wBAAwB,CAC5C;UACD,kBAAkB,CAAC,UAAU;UAC7B,cAAc,CAAC,kBAAkB,CAAC,MAAM,CAAC;UACzC,cAAc,CAAC,kBAAkB,CAAC,OAAO,CAAC;SAC3C,CAAC,EACF,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,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport {\n  Api,\n  IApiResponseCollection,\n  IPaymentBalanceTransaction,\n  PagingInfo,\n  PaymentBalanceTransaction,\n  pagingDefaults,\n} from '../../api';\n\nimport {\n  formatCurrency,\n  formatDate,\n  formatTime,\n  snakeCaseToHumanReadable,\n} from '../../utils/utils';\n\n@Component({\n  tag: 'justifi-payment-balance-transactions',\n  styleUrl: 'payment-balance-transactions.scss',\n  shadow: true,\n})\nexport class PaymentBalanceTransactions {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @Prop() paymentId: string;\n  @State() balanceTransactions: IPaymentBalanceTransaction[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any\n\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    this.loading = true;\n\n    if (!this.accountId || !this.paymentId) {\n      this.errorMessage = 'Missing required props: accountId or paymentId';\n      this.loading = false;\n      return;\n    }\n    const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;\n\n    const response: IApiResponseCollection<IPaymentBalanceTransaction[]> =\n      await Api(this.authToken).get(endpoint, this.params);\n\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info,\n      };\n      this.balanceTransactions = response.data.map(\n        dataItem => new PaymentBalanceTransaction(dataItem),\n      );\n    } else {\n      this.errorMessage =\n        typeof response.error === 'string'\n          ? response.error\n          : response.error.message;\n    }\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          columnData={[\n            ['Processed On', 'The date each transaction occurred'],\n            ['Type', 'The type of each transaction'],\n            ['ID', 'The unique identifier of each transaction'],\n            ['Amout', 'The dollar amount of each transaction'],\n            [\n              'Balance',\n              'The running total amount of this payment that belongs to you',\n            ],\n          ]}\n          entityId={this.balanceTransactions.map(transaction => transaction.id)}\n          rowData={this.balanceTransactions.map(balanceTransaction => [\n            <div>\n              <div>{formatDate(balanceTransaction.created_at)}</div>\n              <div>{formatTime(balanceTransaction.created_at)}</div>\n            </div>,\n            snakeCaseToHumanReadable(\n              balanceTransaction.payment_balance_txn_type,\n            ),\n            balanceTransaction.payment_id,\n            formatCurrency(balanceTransaction.amount),\n            formatCurrency(balanceTransaction.balance),\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/payment-balance-transactions/payment-balance-transactions.stories.js

@@ -0,0 +1,32 @@
+export default {
+  title: 'Components/PaymentBalanceTransactions',
+  component: 'justifi-payment-balance-transactions',
+  parameters: {},
+};
+class PaymentBalanceTransactionsArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['payment-id'] = args['payment-id'] || '';
+    this['account-id'] = args['account-id'] || '';
+  }
+}
+const Template = (args) => {
+  return `
+    <justifi-payment-balance-transactions
+      data-testid="justifi-payment-balance-transactions"
+      auth-token="${args['auth-token']}"
+      payment-id="${args['payment-id']}"
+      account-id="${args['account-id']}"
+    />
+  `;
+};
+export const Basic = Template.bind({});
+Basic.args = new PaymentBalanceTransactionsArgs({});
+export const Styled = Template.bind({});
+Styled.args = new PaymentBalanceTransactionsArgs({});
+Styled.decorators = [
+  Story => `
+    ${Story()}
+  `,
+];
+//# sourceMappingURL=payment-balance-transactions.stories.js.map

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-balance-transactions.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-balance-transactions/payment-balance-transactions.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,uCAAuC;EAC9C,SAAS,EAAE,sCAAsC;EACjD,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,8BAA8B;EAKlC,YAAc,IAAI;IAChB,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;EAChD,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAoC,EAAE,EAAE;EACxD,OAAO;;;oBAGW,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,8BAA8B,CAAC,EAAE,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,8BAA8B,CAAC,EAAE,CAAC,CAAC;AACrD,MAAM,CAAC,UAAU,GAAG;EAClB,KAAK,CAAC,EAAE,CAAC;MACL,KAAK,EAAE;GACV;CACF,CAAC","sourcesContent":["export default {\n  title: 'Components/PaymentBalanceTransactions',\n  component: 'justifi-payment-balance-transactions',\n  parameters: {},\n};\n\nclass PaymentBalanceTransactionsArgs {\n  'auth-token': string;\n  'payment-id': string;\n  'account-id': string;\n\n  'constructor'(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['payment-id'] = args['payment-id'] || '';\n    this['account-id'] = args['account-id'] || '';\n  }\n}\n\nconst Template = (args: PaymentBalanceTransactionsArgs) => {\n  return `\n    <justifi-payment-balance-transactions\n      data-testid=\"justifi-payment-balance-transactions\"\n      auth-token=\"${args['auth-token']}\"\n      payment-id=\"${args['payment-id']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentBalanceTransactionsArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentBalanceTransactionsArgs({});\nStyled.decorators = [\n  Story => `\n    ${Story()}\n  `,\n];\n"]}

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

@@ -1,8 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { Api } from "../../api";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { DetailItem, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
-import { DetailSection } from "../details/utils";
+import { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import { config } from "../../../config";
 /**
   * @exportedPart detail-loading-spinner
   * @exportedPart detail-loading-state
@@ -18,6 +18,14 @@ import { DetailSection } from "../details/utils";
   * @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() {
@@ -42,7 +50,7 @@ export class PaymentDetails {
     }
     this.loading = true;
     const endpoint = `payments/${this.paymentId}`;
-    const response = await Api(this.authToken).get(endpoint);
+    const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);
     if (!response.error) {
       this.payment = response.data;
     }
@@ -55,9 +63,7 @@ export class PaymentDetails {
     var _a;
     return (h(Host, null, this.loading ? LoadingState :
       !this.payment ? ErrorState(this.errorMessage) :
-        h("justifi-details", { "error-message": this.errorMessage, entity: {
-            metadata: this.payment.metadata
-          } }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: this.payment.payment_method.card.brand }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.card.name }))))));
+        h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: this.payment.payment_method.card.brand }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.card.name })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata }))))));
   }
   static get is() { return "justifi-payment-details"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"payment-details.js","sourceRoot":"","sources":["../../../../src/components/payment-details/payment-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payment } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { DetailItem, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\nimport { DetailSection } 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-payment-details',\n  styleUrl: 'payment-details.scss',\n  shadow: true,\n})\n\nexport class PaymentDetails {\n  @Prop() paymentId: string;\n  @Prop() authToken: string;\n  @State() payment: Payment;\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n\n  @Watch('paymentId')\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.paymentId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without a PaymentID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `payments/${this.paymentId}`;\n\n    const response: IApiResponseCollection<Payment> = await Api(this.authToken).get(endpoint);\n    if (!response.error) {\n      this.payment = 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.payment ? ErrorState(this.errorMessage) :\n          <justifi-details\n            error-message={this.errorMessage}\n            entity={{\n              metadata: this.payment.metadata\n            }}\n          >\n            <EntityHeadInfo slot=\"head-info\" badge={<span slot='badge' innerHTML={MapPaymentStatusToBadge(this.payment?.status)} />} title={`${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}`}>\n              <EntityHeadInfoItem\n                classes=\"border-1 border-end\"\n                title=\"Updated At\"\n                value={`${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}`}\n              />\n              <EntityHeadInfoItem\n                classes=\"border-1 border-end\"\n                title=\"Created At\"\n                value={`${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}`}\n              />\n              <EntityHeadInfoItem title=\"ID\" value={this.payment.id} />\n            </EntityHeadInfo>\n            <div slot='detail-sections'>\n              <DetailSection sectionTitle=\"Details\">\n                <DetailItem title=\"Amount\" value={formatCurrency(this.payment.amount)} />\n                <DetailItem title=\"Fees\" value={formatCurrency(this.payment.fee_amount)} />\n                <DetailItem title=\"Refunded\" value={formatCurrency(this.payment.amount_refunded)} />\n                <DetailItem title=\"Net\" value={formatCurrency(this.payment.balance)} />\n                <DetailItem title=\"Status\" value={MapPaymentStatusToBadge(this.payment.status)} />\n                <DetailItem title=\"Payment ID\" value={this.payment.id} />\n                <DetailItem title=\"Processing Fees\" value={formatCurrency(this.payment.fee_amount)} />\n                <DetailItem title=\"Statement Descriptor\" value={this.payment.statement_descriptor} />\n                <DetailItem title=\"Description\" value={this.payment.description} />\n              </DetailSection>\n              <DetailSection sectionTitle=\"Payment Method\">\n                <DetailItem title=\"ID\" value={this.payment.payment_method.card.id} />\n                <DetailItem title=\"Payment Type\" value=\"Card\" />\n                <DetailItem title=\"Last 4 Numbers\" value={this.payment.payment_method.card.acct_last_four} />\n                <DetailItem title=\"Brand\" value={this.payment.payment_method.card.brand} />\n                <DetailItem title=\"Cardholder\" value={this.payment.payment_method.card.name} />\n              </DetailSection>\n            </div>\n          </justifi-details>\n          }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"payment-details.js","sourceRoot":"","sources":["../../../../src/components/payment-details/payment-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payment } from '../../api';\nimport { MapPaymentStatusToBadge, 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-payment-details',\n  styleUrl: 'payment-details.scss',\n  shadow: true,\n})\n\nexport class PaymentDetails {\n  @Prop() paymentId: string;\n  @Prop() authToken: string;\n  @State() payment: Payment;\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n\n  @Watch('paymentId')\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.paymentId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without a PaymentID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `payments/${this.paymentId}`;\n\n    const response: IApiResponseCollection<Payment> = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);\n    if (!response.error) {\n      this.payment = 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.payment ? ErrorState(this.errorMessage) :\n              <justifi-details error-message={this.errorMessage}>\n                <EntityHeadInfo slot=\"head-info\" badge={<span slot='badge' innerHTML={MapPaymentStatusToBadge(this.payment?.status)} />} title={`${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}`}>\n                  <EntityHeadInfoItem\n                    classes=\"border-1 border-end\"\n                    title=\"Updated At\"\n                    value={`${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}`}\n                  />\n                  <EntityHeadInfoItem\n                    classes=\"border-1 border-end\"\n                    title=\"Created At\"\n                    value={`${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}`}\n                  />\n                  <EntityHeadInfoItem title=\"ID\" value={this.payment.id} />\n                </EntityHeadInfo>\n                <div slot='detail-sections'>\n                  <DetailSection sectionTitle=\"Details\">\n                    <DetailItem title=\"Amount\" value={formatCurrency(this.payment.amount)} />\n                    <DetailItem title=\"Fees\" value={formatCurrency(this.payment.fee_amount)} />\n                    <DetailItem title=\"Refunded\" value={formatCurrency(this.payment.amount_refunded)} />\n                    <DetailItem title=\"Net\" value={formatCurrency(this.payment.balance)} />\n                    <DetailItem title=\"Status\" value={MapPaymentStatusToBadge(this.payment.status)} />\n                    <DetailItem title=\"Payment ID\" value={this.payment.id} />\n                    <DetailItem title=\"Processing Fees\" value={formatCurrency(this.payment.fee_amount)} />\n                    <DetailItem title=\"Statement Descriptor\" value={this.payment.statement_descriptor} />\n                    <DetailItem title=\"Description\" value={this.payment.description} />\n                  </DetailSection>\n                  <DetailSection sectionTitle=\"Payment Method\">\n                    <DetailItem title=\"ID\" value={this.payment.payment_method.card.id} />\n                    <DetailItem title=\"Payment Type\" value=\"Card\" />\n                    <DetailItem title=\"Last 4 Numbers\" value={this.payment.payment_method.card.acct_last_four} />\n                    <DetailItem title=\"Brand\" value={this.payment.payment_method.card.brand} />\n                    <DetailItem title=\"Cardholder\" value={this.payment.payment_method.card.name} />\n                  </DetailSection>\n                  <DetailSection sectionTitle='Metadata'>\n                    <CodeBlock metadata={this.payment.metadata} />\n                  </DetailSection>\n                </div>\n              </justifi-details>\n        }\n      </Host>\n    );\n  }\n}"]}

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

@@ -1,13 +1,13 @@
-import config from "../../../config";
+import { config } from "../../../config";
 export default {
-  title: 'Pre-release Components/PaymentDetails',
+  title: 'Components/PaymentDetails',
   component: 'justifi-payment-details',
   parameters: {},
 };
 class PaymentDetailsArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.authToken;
-    this['payment-id'] = args['payment-id'] || 'py_76nDkjHlXOEFQue5o3tzMj';
+    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
+    this['payment-id'] = args['payment-id'] || config.examplePaymentId;
   }
 }
 const Template = (args) => {

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

@@ -1 +1 @@
-{"version":3,"file":"payment-details.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-details/payment-details.stories.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,uCAAuC;EAC9C,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,kBAAkB;EAItB,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,2BAA2B,CAAC;EACzE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAwB,EAAE,EAAE;EAC5C,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,kBAAkB,CAAC,EAAE,CAAC,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,kBAAkB,CAAC,EAAE,CAAC,CAAC;AACzC,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/PaymentDetails',\n  component: 'justifi-payment-details',\n  parameters: {},\n};\n\nclass PaymentDetailsArgs {\n  'auth-token': string;\n  'payment-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || config.authToken;\n    this['payment-id'] = args['payment-id'] || 'py_76nDkjHlXOEFQue5o3tzMj';\n  }\n}\n\nconst Template = (args: PaymentDetailsArgs) => {\n  return (`\n    <justifi-payment-details\n      data-testid=\"justifi-payment-details\"\n      auth-token=\"${args['auth-token']}\"\n      payment-id=\"${args['payment-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentDetailsArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentDetailsArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payment-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-payment-details::part(detail-info-item-title),\n      justifi-payment-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-payment-details::part(detail-metadata) {\n        background-color: rgba(100,100,100,0.2)\n      }\n    </style>\n  `\n]\n"]}
+{"version":3,"file":"payment-details.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-details/payment-details.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,kBAAkB;EAItB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;EACrE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAwB,EAAE,EAAE;EAC5C,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,kBAAkB,CAAC,EAAE,CAAC,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,kBAAkB,CAAC,EAAE,CAAC,CAAC;AACzC,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: 'Components/PaymentDetails',\n  component: 'justifi-payment-details',\n  parameters: {},\n};\n\nclass PaymentDetailsArgs {\n  'auth-token': string;\n  'payment-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;\n    this['payment-id'] = args['payment-id'] || config.examplePaymentId;\n  }\n}\n\nconst Template = (args: PaymentDetailsArgs) => {\n  return (`\n    <justifi-payment-details\n      data-testid=\"justifi-payment-details\"\n      auth-token=\"${args['auth-token']}\"\n      payment-id=\"${args['payment-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentDetailsArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentDetailsArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payment-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-payment-details::part(detail-info-item-title),\n      justifi-payment-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-payment-details::part(detail-metadata) {\n        background-color: rgba(100,100,100,0.2)\n      }\n    </style>\n  `\n]\n"]}