@justifi/webcomponents 4.7.0-rc.0 → 4.7.0-rc.2

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { Api, Payout, PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults } from "../../api";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { config } from "../../../config";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -70,7 +71,7 @@ export class PayoutsList {
       return;
     }
     this.loading = true;
-    const api = Api(this.authToken, process.env.PROXY_API_ORIGIN);
+    const api = Api(this.authToken, config.proxyApiOrigin);
     const endpoint = `account/${this.accountId}/payouts`;
     const response = await api.get(endpoint, this.params);
     if (!response.error) {

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 { \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"]}
+{"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';\nimport { config } from '../../../config';\n\n\n/**\n  * @exportedPart table-head: Table head\n  * @exportedPart table-head-row: Head row\n  * @exportedPart table-head-cell: Individual head cell\n  * @exportedPart table-body: Body of the table\n  * @exportedPart table-row: Row of the table\n  * @exportedPart table-cell: Individual cell of the table\n  * @exportedPart loading-state-cell: Row for loading state\n  * @exportedPart loading-state-spinner: Spinner element for loading state\n  * @exportedPart error-state: Row for Error state\n  * @exportedPart empty-state: Row for Emtpy state\n  * @exportedPart pagination-bar: Pagination bar\n  * @exportedPart arrow: Both paging buttons\n  * @exportedPart arrow-left: Previous page button\n  * @exportedPart arrow-right: Next page button\n  * @exportedPart button-disabled: Disabled state for paging buttons\n  * @exportedPart previous-button-text: Text for Previous button\n  * @exportedPart next-button-text: Text for Next button\n*/\n@Component({\n  tag: 'justifi-payouts-list',\n  styleUrl: 'payouts-list.scss',\n  shadow: true,\n})\n\nexport class PayoutsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() payouts: Payout[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any\n  @Event({\n    eventName: 'payout-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Payout>;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  @Watch('params')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  mapStatusToBadge = (status: PayoutStatuses) => {\n    switch (status) {\n      case PayoutStatuses.scheduled:\n        return `<span class=\"badge bg-primary\" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.in_transit:\n        return `<span class=\"badge bg-primary\" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.failed:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.canceled:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.forwarded:\n        return `<span class=\"badge bg-secondary\" title='This payout initially failed; the funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;\n      case PayoutStatuses.paid:\n        return `<span class=\"badge bg-success\" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;\n    }\n  }\n\n  handleClickPrevious = (beforeCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.after_cursor;\n    this.params = ({ ...newParams, before_cursor: beforeCursor });\n  };\n\n  handleClickNext = (afterCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.before_cursor;\n    this.params = ({ ...newParams, after_cursor: afterCursor });\n  };\n\n  async fetchData(): Promise<void> {\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n\n    const api = Api(this.authToken, config.proxyApiOrigin);\n    const endpoint = `account/${this.accountId}/payouts`;\n\n    const response: IApiResponseCollection<Payout[]> = await api.get(endpoint, this.params);\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n\n      const data = response?.data?.map(dataItem => new Payout(dataItem));\n      this.payouts = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={(e) => {\n            const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickedPayoutID) { return }\n            this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));\n          }}\n          columnData={[\n            ['Paid Out On', 'The date each transaction occurred'],\n            ['Type', 'The type of each transaction'],\n            ['Account', 'The ID of the account associated with each payout'],\n            ['Paid Out To', 'The bank account to which each payout was transferred'],\n            ['Payments', 'Sum of payments in each payout'],\n            ['Refunds', 'Sum of refunds in each payout'],\n            ['Fees', 'Sum of fees in each payout'],\n            ['Other', 'Sum of less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],\n            ['Payout Amount', 'The net sum of all transactions in each payout. This is the amount you\\'ll see reflected on your bank statement'],\n            ['Status', 'The real-time status of each payout']\n          ]}\n          entityId={this.payouts.map((payout) => payout.id)}\n          rowData={\n            this.payouts.map((payout) => (\n              [\n                {\n                  type: 'head',\n                  value: `\n                    <div>${formatDate(payout.created_at)}</div>\n                    <div>${formatTime(payout.created_at)}</div>\n                  `,\n                },\n                payout.payout_type,\n                payout.account_id,\n                `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,\n                formatCurrency(payout.payments_total),\n                formatCurrency(payout.refunds_total),\n                formatCurrency(payout.fees_total),\n                formatCurrency(payout.other_total),\n                formatCurrency(payout.amount),\n                {\n                  type: 'inner',\n                  value: this.mapStatusToBadge(payout.status)\n                }\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          params={this.params}\n          paging={{\n            ...this.paging,\n            handleClickNext: this.handleClickNext,\n            handleClickPrevious: this.handleClickPrevious\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,4 @@
+import { config } from "../../../config";
 export default {
   title: 'Components/PayoutsList',
   component: 'justifi-payouts-list',
@@ -15,8 +16,8 @@ export default {
 };
 class PayoutsListArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || process.env.PROXY_AUTH_TOKEN;
-    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PAYMENTS_ACCOUNT_ID;
+    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
+    this['account-id'] = args['account-id'] || config.examplePaymentsAccountId;
   }
 }
 const Template = (args) => {

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

@@ -1 +1 @@
-{"version":3,"file":"payouts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payouts-list/payouts-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,eAAe;EAInB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,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,IAAqB,EAAE,EAAE;EACzC,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["export default {\n  title: 'Components/PayoutsList',\n  component: 'justifi-payouts-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('payout-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass PayoutsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || process.env.PROXY_AUTH_TOKEN;\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PAYMENTS_ACCOUNT_ID;\n  }\n}\n\nconst Template = (args: PayoutsListArgs) => {\n  return (`\n    <justifi-payouts-list\n      data-testid=\"justifi-payouts-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PayoutsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PayoutsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payouts-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-payouts-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-payouts-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-payouts-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}
+{"version":3,"file":"payouts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payouts-list/payouts-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,eAAe;EAInB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,wBAAwB,CAAC;EAC7E,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAqB,EAAE,EAAE;EACzC,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n  title: 'Components/PayoutsList',\n  component: 'justifi-payouts-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('payout-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass PayoutsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;\n    this['account-id'] = args['account-id'] || config.examplePaymentsAccountId;\n  }\n}\n\nconst Template = (args: PayoutsListArgs) => {\n  return (`\n    <justifi-payouts-list\n      data-testid=\"justifi-payouts-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PayoutsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PayoutsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payouts-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-payouts-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-payouts-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-payouts-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-payouts-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { Api, pagingDefaults } from "../../api";
 import { formatCurrency, formatDate } from "../../utils/utils";
 import { Proceed, ProceedStatuses, ProceedStatusesSafeNames } from "../../api/Proceed";
+import { config } from "../../../config";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -72,7 +73,7 @@ export class ProceedsList {
     }
     this.loading = true;
     const endpoint = `account/${this.accountId}/proceeds`;
-    const response = await Api(this.authToken, process.env.PRIVATE_API_ORIGIN)
+    const response = await Api(this.authToken, config.privateApiOrigin)
       .get(endpoint, this.params);
     if (!response.error) {
       this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);

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

@@ -1 +1 @@
-{"version":3,"file":"proceeds-list.js","sourceRoot":"","sources":["../../../../src/components/proceeds-list/proceeds-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\nimport { formatCurrency, formatDate } from '../../utils/utils';\nimport { Proceed, ProceedStatuses, ProceedStatusesSafeNames } from '../../api/Proceed';\n\n/**\n  * @exportedPart table-head: Table head\n  * @exportedPart table-head-row: Head row\n  * @exportedPart table-head-cell: Individual head cell\n  * @exportedPart table-body: Body of the table\n  * @exportedPart table-row: Row of the table\n  * @exportedPart table-cell: Individual cell of the table\n  * @exportedPart loading-state-cell: Row for loading state\n  * @exportedPart loading-state-spinner: Spinner element for loading state\n  * @exportedPart error-state: Row for Error state\n  * @exportedPart empty-state: Row for Emtpy state\n  * @exportedPart pagination-bar: Pagination bar\n  * @exportedPart arrow: Both paging buttons\n  * @exportedPart arrow-left: Previous page button\n  * @exportedPart arrow-right: Next page button\n  * @exportedPart button-disabled: Disabled state for paging buttons\n  * @exportedPart previous-button-text: Text for Previous button\n  * @exportedPart next-button-text: Text for Next button\n*/\n@Component({\n  tag: 'justifi-proceeds-list',\n  styleUrl: 'proceeds-list.scss',\n  shadow: true,\n})\n\nexport class ProceedsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() proceeds: Proceed[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any\n  @Event({\n    eventName: 'proceed-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Proceed>;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  @Watch('params')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  mapStatusToBadge = (status: ProceedStatuses) => {\n    switch (status) {\n      case ProceedStatuses.scheduled:\n        return `<span class=\"badge bg-primary\" title='Batched and scheduled to be transferred'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.in_transit:\n        return `<span class=\"badge bg-primary\" title='Transfer to your bank account has been initiated'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.failed:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.canceled:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.forwarded:\n        return `<span class=\"badge bg-secondary\" title='This payout initially failed; the funds have been forwarded to your next successful batch of proceeds'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.paid:\n        return `<span class=\"badge bg-success\" title='Successfully deposited into your bank account'>${ProceedStatusesSafeNames[status]}</span>`;\n    }\n  }\n\n  handleClickPrevious = (beforeCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.after_cursor;\n    this.params = ({ ...newParams, before_cursor: beforeCursor });\n  };\n\n  handleClickNext = (afterCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.before_cursor;\n    this.params = ({ ...newParams, after_cursor: afterCursor });\n  }; \n\n  async fetchData(): Promise<void> {\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `account/${this.accountId}/proceeds`;\n\n    const response: IApiResponseCollection<Proceed[]> = await Api(this.authToken, process.env.PRIVATE_API_ORIGIN)\n      .get(endpoint, this.params);\n\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n\n      const data = response?.data?.map(dataItem => new Proceed(dataItem));\n      this.proceeds = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={(e) => {\n            const clickedProceedID = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickedProceedID) { return }\n            this.rowClicked.emit(this.proceeds.find((proceed) => proceed.id === clickedProceedID));\n          }}\n          entityId={this.proceeds.map((proceed) => proceed.id)}\n          columnData={[\n            ['Paid Out On', 'The date each batch of proceeds is transferred to your bank account'],\n            ['Paid Out To', 'The bank account to which each payout is sent'],\n            ['From Payments', 'The amount added related to payments in each payout'],\n            ['From Refunds', 'The amount deducted related to refunds in each payout'],\n            ['Other', 'The amount related to less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],\n            ['Proceeds Amount', 'The net sum of all transactions in each payout. This is the amount you\\'ll see reflected on your bank statement.'],\n            ['Status', 'The real-time status of each payout'],\n          ]}\n          rowData={\n            this.proceeds.map((proceed) => (\n              [\n                {\n                  type: 'head',\n                  value: formatDate(proceed.deposits_at),\n                },\n                proceed.bank_account.full_name,\n                formatCurrency(proceed.payments_total),\n                formatCurrency(proceed.refunds_total),\n                formatCurrency(proceed.other_total),\n                formatCurrency(proceed.amount),\n                {\n                  type: 'inner',\n                  value: this.mapStatusToBadge(proceed.status)\n                }\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          params={this.params}\n          paging={{\n            ...this.paging,\n            handleClickNext: this.handleClickNext,\n            handleClickPrevious: this.handleClickPrevious\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"proceeds-list.js","sourceRoot":"","sources":["../../../../src/components/proceeds-list/proceeds-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\nimport { formatCurrency, formatDate } from '../../utils/utils';\nimport { Proceed, ProceedStatuses, ProceedStatusesSafeNames } from '../../api/Proceed';\nimport { config } from '../../../config';\n\n\n/**\n  * @exportedPart table-head: Table head\n  * @exportedPart table-head-row: Head row\n  * @exportedPart table-head-cell: Individual head cell\n  * @exportedPart table-body: Body of the table\n  * @exportedPart table-row: Row of the table\n  * @exportedPart table-cell: Individual cell of the table\n  * @exportedPart loading-state-cell: Row for loading state\n  * @exportedPart loading-state-spinner: Spinner element for loading state\n  * @exportedPart error-state: Row for Error state\n  * @exportedPart empty-state: Row for Emtpy state\n  * @exportedPart pagination-bar: Pagination bar\n  * @exportedPart arrow: Both paging buttons\n  * @exportedPart arrow-left: Previous page button\n  * @exportedPart arrow-right: Next page button\n  * @exportedPart button-disabled: Disabled state for paging buttons\n  * @exportedPart previous-button-text: Text for Previous button\n  * @exportedPart next-button-text: Text for Next button\n*/\n@Component({\n  tag: 'justifi-proceeds-list',\n  styleUrl: 'proceeds-list.scss',\n  shadow: true,\n})\n\nexport class ProceedsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() proceeds: Proceed[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any\n  @Event({\n    eventName: 'proceed-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<Proceed>;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  @Watch('params')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  mapStatusToBadge = (status: ProceedStatuses) => {\n    switch (status) {\n      case ProceedStatuses.scheduled:\n        return `<span class=\"badge bg-primary\" title='Batched and scheduled to be transferred'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.in_transit:\n        return `<span class=\"badge bg-primary\" title='Transfer to your bank account has been initiated'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.failed:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.canceled:\n        return `<span class=\"badge bg-danger\" title='Transfer to your bank account failed'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.forwarded:\n        return `<span class=\"badge bg-secondary\" title='This payout initially failed; the funds have been forwarded to your next successful batch of proceeds'>${ProceedStatusesSafeNames[status]}</span>`;\n      case ProceedStatuses.paid:\n        return `<span class=\"badge bg-success\" title='Successfully deposited into your bank account'>${ProceedStatusesSafeNames[status]}</span>`;\n    }\n  }\n\n  handleClickPrevious = (beforeCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.after_cursor;\n    this.params = ({ ...newParams, before_cursor: beforeCursor });\n  };\n\n  handleClickNext = (afterCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.before_cursor;\n    this.params = ({ ...newParams, after_cursor: afterCursor });\n  };\n\n  async fetchData(): Promise<void> {\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `account/${this.accountId}/proceeds`;\n\n    const response: IApiResponseCollection<Proceed[]> = await Api(this.authToken, config.privateApiOrigin)\n      .get(endpoint, this.params);\n\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n\n      const data = response?.data?.map(dataItem => new Proceed(dataItem));\n      this.proceeds = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={(e) => {\n            const clickedProceedID = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickedProceedID) { return }\n            this.rowClicked.emit(this.proceeds.find((proceed) => proceed.id === clickedProceedID));\n          }}\n          entityId={this.proceeds.map((proceed) => proceed.id)}\n          columnData={[\n            ['Paid Out On', 'The date each batch of proceeds is transferred to your bank account'],\n            ['Paid Out To', 'The bank account to which each payout is sent'],\n            ['From Payments', 'The amount added related to payments in each payout'],\n            ['From Refunds', 'The amount deducted related to refunds in each payout'],\n            ['Other', 'The amount related to less common transactions in each payout (disputes, ACH returns, fee refunds, and forwarded balances due to failed payouts)'],\n            ['Proceeds Amount', 'The net sum of all transactions in each payout. This is the amount you\\'ll see reflected on your bank statement.'],\n            ['Status', 'The real-time status of each payout'],\n          ]}\n          rowData={\n            this.proceeds.map((proceed) => (\n              [\n                {\n                  type: 'head',\n                  value: formatDate(proceed.deposits_at),\n                },\n                proceed.bank_account.full_name,\n                formatCurrency(proceed.payments_total),\n                formatCurrency(proceed.refunds_total),\n                formatCurrency(proceed.other_total),\n                formatCurrency(proceed.amount),\n                {\n                  type: 'inner',\n                  value: this.mapStatusToBadge(proceed.status)\n                }\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          params={this.params}\n          paging={{\n            ...this.paging,\n            handleClickNext: this.handleClickNext,\n            handleClickPrevious: this.handleClickPrevious\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,4 @@
+import { config } from "../../../config";
 export default {
   title: 'dev/Components/ProceedsList',
   component: 'justifi-proceeds-list',
@@ -15,8 +16,8 @@ export default {
 };
 class ProceedsListArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;
-    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;
+    this['auth-token'] = args['auth-token'] || config.privateAuthToken;
+    this['account-id'] = args['account-id'] || config.examplePlatformAccountId;
   }
 }
 const Template = (args) => {

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

@@ -1 +1 @@
-{"version":3,"file":"proceeds-list.stories.js","sourceRoot":"","sources":["../../../../src/components/proceeds-list/proceeds-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;IAC1E,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","sourcesContent":["export default {\n  title: 'dev/Components/ProceedsList',\n  component: 'justifi-proceeds-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('proceed-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass ProceedsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;\n  }\n}\n\nconst Template = (args: ProceedsListArgs) => {\n  return (`\n    <justifi-proceeds-list\n      data-testid=\"justifi-proceeds-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new ProceedsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new ProceedsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-proceeds-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-proceeds-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-proceeds-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-proceeds-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}
+{"version":3,"file":"proceeds-list.stories.js","sourceRoot":"","sources":["../../../../src/components/proceeds-list/proceeds-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,wBAAwB,CAAC;EAC7E,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n  title: 'dev/Components/ProceedsList',\n  component: 'justifi-proceeds-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('proceed-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass ProceedsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || config.privateAuthToken;\n    this['account-id'] = args['account-id'] || config.examplePlatformAccountId;\n  }\n}\n\nconst Template = (args: ProceedsListArgs) => {\n  return (`\n    <justifi-proceeds-list\n      data-testid=\"justifi-proceeds-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new ProceedsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new ProceedsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-proceeds-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-proceeds-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-proceeds-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-proceeds-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-proceeds-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}

package/dist/collection/components/refund-form/refund-form.js

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import RefundFormSchema from "./refund-form-schema";
 import { Api } from "../../api";
 import { FormController } from "../form/form";
+import { config } from "../../../config";
 export class RefundForm {
   constructor() {
     this.authToken = undefined;
@@ -68,7 +69,7 @@ export class RefundForm {
     if (!this.authToken) {
       console.warn('Warning: Missing auth-token.');
     }
-    this.api = Api(this.authToken, process.env.ENTITIES_API_ORIGIN);
+    this.api = Api(this.authToken, config.proxyApiOrigin);
   }
   render() {
     var _a;

package/dist/collection/components/refund-form/refund-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"refund-form.js","sourceRoot":"","sources":["../../../../src/components/refund-form/refund-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n} from '@stencil/core';\nimport RefundFormSchema, { RefundFormFields } from './refund-form-schema';\nimport { Api } from '../../api';\nimport { FormController } from '../form/form';\n\n@Component({\n  tag: 'justifi-refund-form',\n  styleUrl: 'refund-form.scss',\n  shadow: true,\n})\nexport class RefundForm {\n  /**\n   * Authentication token required to authorize the refund transaction.\n   */\n  @Prop() authToken: string;\n\n  /**\n   * The unique identifier for the payment to be refunded.\n   */\n  @Prop() paymentId: string;\n\n  /**\n   * The amount of the payment to be refunded.\n   */\n  @Prop() amount?: number = 0;\n\n  /**\n   * Custom text for the submit button. Defaults to 'Submit'.\n   */\n  @Prop() submitButtonText?: string = 'Submit';\n\n  /**\n   * Flag to control the visibility of the submit button.\n   */\n  @Prop() withButton?: boolean;\n\n  /**\n   * Optional information text displayed above the form.\n   */\n  @Prop() refundInfoText?: string;\n\n  @State() errors: any = {};\n  @State() isSubmitting: boolean = false;\n\n  /**\n   * Event emitted when the refund form is successfully submitted.\n   * The submitted refund fields are passed as the event detail.\n   */\n  @Event() submitted: EventEmitter<RefundFormFields>;\n\n  private formController: FormController;\n  private api: any;\n\n  componentWillLoad() {\n    this.formController = new FormController(RefundFormSchema);\n    this.formController.setInitialValues({\n      amount: this.amount,\n      message: '',\n    });\n    this.initializeApi();\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe(errors => {\n      this.errors = { ...errors };\n    });\n  }\n\n  /**\n   * Handles the form submission.\n   * Prevents the default form action, validates the form, and emits the 'submitted' event.\n   */\n  async handleSubmit(event: Event) {\n    event.preventDefault();\n\n    this.formController.validateAndSubmit(this.submitRefund.bind(this), {\n      amount: this.amount,\n    });\n  }\n\n  /**\n   * Submits the refund request to the API.\n   */\n  private async submitRefund() {\n    this.isSubmitting = true;\n    const refundFields = this.formController.values.getValue();\n\n    try {\n      await this.api.post(`payments/${this.paymentId}/refunds`, refundFields);\n      this.submitted.emit(refundFields);\n    } catch (error) {\n      console.error('Error submitting refund:', error);\n      this.submitted.emit(error);\n    } finally {\n      this.isSubmitting = false;\n    }\n  }\n\n  /**\n   * Handles input changes, updating the refundFields state.\n   */\n  private handleInput(field: keyof RefundFormFields, value: any) {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      [field]: value,\n    });\n  }\n\n  /**\n   * Initializes the API with the given authentication token.\n   * Logs a warning if the auth token is missing.\n   */\n  private initializeApi() {\n    if (!this.authToken) {\n      console.warn('Warning: Missing auth-token.');\n    }\n    this.api = Api(this.authToken, process.env.ENTITIES_API_ORIGIN);\n  }\n\n  render() {\n    return (\n      <Host>\n        <h1>Refund</h1>\n\n        {this.refundInfoText && (\n          <div\n            class=\"d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3\"\n            role=\"alert\"\n          >\n            <img\n              src=\"/info-icon.svg\"\n              alt=\"Information\"\n              height=\"30\"\n              width=\"30\"\n            />\n\n            <p class=\"m-0\" innerHTML={this.refundInfoText} />\n          </div>\n        )}\n\n        <form onSubmit={e => this.handleSubmit(e)} class=\"d-grid gap-4\">\n          <div class=\"form-group\">\n            <form-control-monetary\n              name=\"amount\"\n              label=\"Refund Amount\"\n              defaultValue={this.amount?.toString() || ''}\n              inputHandler={(name: keyof RefundFormFields, value: any) =>\n                this.handleInput(name, value)\n              }\n              error={this.errors.amount}\n            ></form-control-monetary>\n          </div>\n          <div class=\"form-group\">\n            <form-control-text\n              name=\"notes\"\n              label=\"Additional Notes\"\n              inputHandler={(name: keyof RefundFormFields, value: any) =>\n                this.handleInput(name, value)\n              }\n              error={this.errors.notes}\n            ></form-control-text>\n          </div>\n          {this.withButton && (\n            <div class=\"form-group d-flex flex-row-reverse\">\n              <button\n                type=\"submit\"\n                disabled={!!this.isSubmitting}\n                class=\"btn btn-primary ml-auto\"\n              >\n                {this.submitButtonText}\n              </button>\n            </div>\n          )}\n        </form>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"refund-form.js","sourceRoot":"","sources":["../../../../src/components/refund-form/refund-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n} from '@stencil/core';\nimport RefundFormSchema, { RefundFormFields } from './refund-form-schema';\nimport { Api } from '../../api';\nimport { FormController } from '../form/form';\nimport { config } from '../../../config';\n\n\n@Component({\n  tag: 'justifi-refund-form',\n  styleUrl: 'refund-form.scss',\n  shadow: true,\n})\nexport class RefundForm {\n  /**\n   * Authentication token required to authorize the refund transaction.\n   */\n  @Prop() authToken: string;\n\n  /**\n   * The unique identifier for the payment to be refunded.\n   */\n  @Prop() paymentId: string;\n\n  /**\n   * The amount of the payment to be refunded.\n   */\n  @Prop() amount?: number = 0;\n\n  /**\n   * Custom text for the submit button. Defaults to 'Submit'.\n   */\n  @Prop() submitButtonText?: string = 'Submit';\n\n  /**\n   * Flag to control the visibility of the submit button.\n   */\n  @Prop() withButton?: boolean;\n\n  /**\n   * Optional information text displayed above the form.\n   */\n  @Prop() refundInfoText?: string;\n\n  @State() errors: any = {};\n  @State() isSubmitting: boolean = false;\n\n  /**\n   * Event emitted when the refund form is successfully submitted.\n   * The submitted refund fields are passed as the event detail.\n   */\n  @Event() submitted: EventEmitter<RefundFormFields>;\n\n  private formController: FormController;\n  private api: any;\n\n  componentWillLoad() {\n    this.formController = new FormController(RefundFormSchema);\n    this.formController.setInitialValues({\n      amount: this.amount,\n      message: '',\n    });\n    this.initializeApi();\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe(errors => {\n      this.errors = { ...errors };\n    });\n  }\n\n  /**\n   * Handles the form submission.\n   * Prevents the default form action, validates the form, and emits the 'submitted' event.\n   */\n  async handleSubmit(event: Event) {\n    event.preventDefault();\n\n    this.formController.validateAndSubmit(this.submitRefund.bind(this), {\n      amount: this.amount,\n    });\n  }\n\n  /**\n   * Submits the refund request to the API.\n   */\n  private async submitRefund() {\n    this.isSubmitting = true;\n    const refundFields = this.formController.values.getValue();\n\n    try {\n      await this.api.post(`payments/${this.paymentId}/refunds`, refundFields);\n      this.submitted.emit(refundFields);\n    } catch (error) {\n      console.error('Error submitting refund:', error);\n      this.submitted.emit(error);\n    } finally {\n      this.isSubmitting = false;\n    }\n  }\n\n  /**\n   * Handles input changes, updating the refundFields state.\n   */\n  private handleInput(field: keyof RefundFormFields, value: any) {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      [field]: value,\n    });\n  }\n\n  /**\n   * Initializes the API with the given authentication token.\n   * Logs a warning if the auth token is missing.\n   */\n  private initializeApi() {\n    if (!this.authToken) {\n      console.warn('Warning: Missing auth-token.');\n    }\n    this.api = Api(this.authToken, config.proxyApiOrigin);\n  }\n\n  render() {\n    return (\n      <Host>\n        <h1>Refund</h1>\n\n        {this.refundInfoText && (\n          <div\n            class=\"d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3\"\n            role=\"alert\"\n          >\n            <img\n              src=\"/info-icon.svg\"\n              alt=\"Information\"\n              height=\"30\"\n              width=\"30\"\n            />\n\n            <p class=\"m-0\" innerHTML={this.refundInfoText} />\n          </div>\n        )}\n\n        <form onSubmit={e => this.handleSubmit(e)} class=\"d-grid gap-4\">\n          <div class=\"form-group\">\n            <form-control-monetary\n              name=\"amount\"\n              label=\"Refund Amount\"\n              defaultValue={this.amount?.toString() || ''}\n              inputHandler={(name: keyof RefundFormFields, value: any) =>\n                this.handleInput(name, value)\n              }\n              error={this.errors.amount}\n            ></form-control-monetary>\n          </div>\n          <div class=\"form-group\">\n            <form-control-text\n              name=\"notes\"\n              label=\"Additional Notes\"\n              inputHandler={(name: keyof RefundFormFields, value: any) =>\n                this.handleInput(name, value)\n              }\n              error={this.errors.notes}\n            ></form-control-text>\n          </div>\n          {this.withButton && (\n            <div class=\"form-group d-flex flex-row-reverse\">\n              <button\n                type=\"submit\"\n                disabled={!!this.isSubmitting}\n                class=\"btn btn-primary ml-auto\"\n              >\n                {this.submitButtonText}\n              </button>\n            </div>\n          )}\n        </form>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/refund-form/refund-form.stories.js

@@ -1,5 +1,5 @@
 export default {
-  title: 'Pre-release Components/RefundForm',
+  title: 'dev/Components/RefundForm',
   component: 'refund-form',
   argTypes: {
     authToken: { control: 'text' },

package/dist/collection/components/refund-form/refund-form.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"refund-form.stories.js","sourceRoot":"","sources":["../../../../src/components/refund-form/refund-form.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,mCAAmC;EAC1C,SAAS,EAAE,aAAa;EACxB,QAAQ,EAAE;IACR,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC9B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;IAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IACrC,UAAU,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IAClC,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;GACpC;CACF,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,SAAS,EACT,SAAS,EACT,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,YAAY,GACb,EAAE,EAAE;EACH,OAAO;;;sBAGa,SAAS;sBACT,SAAS;kBACb,MAAM;8BACM,gBAAgB;UACpC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;4BACb,cAAc;;QAGlC,CAAC,UAAU;IACT,CAAC,CAAC,yFAAyF;IAC3F,CAAC,CAAC,EACN;;;;UAII,YAAY,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,KAAK,CAAC,IAAI,GAAG;EACX,SAAS,EAAE,EAAE;EACb,SAAS,EAAE,EAAE;EACb,MAAM,EAAE,CAAC;EACT,gBAAgB,EAAE,QAAQ;EAC1B,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,EAAE;EAClB,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,MAAM,CAAC,IAAI,GAAG;EACZ,SAAS,EAAE,EAAE;EACb,SAAS,EAAE,EAAE;EACb,MAAM,EAAE,CAAC;EACT,gBAAgB,EAAE,QAAQ;EAC1B,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,EAAE;EAClB,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDb;CACF,CAAC","sourcesContent":["export default {\n  title: 'Pre-release Components/RefundForm',\n  component: 'refund-form',\n  argTypes: {\n    authToken: { control: 'text' },\n    paymentId: { control: 'text' },\n    amount: { control: 'number' },\n    submitButtonText: { control: 'text' },\n    withButton: { control: 'boolean' },\n    refundInfoText: { control: 'text' },\n  },\n};\n\nconst RefundFormTemplate = ({\n  authToken,\n  paymentId,\n  amount,\n  submitButtonText,\n  withButton,\n  refundInfoText,\n  cssVariables,\n}) => {\n  return `\n    <div>\n      <justifi-refund-form\n        auth-token=\"${authToken}\"\n        payment-id=\"${paymentId}\"\n        amount=\"${amount}\"\n        submit-button-text=\"${submitButtonText}\"\n        ${withButton ? 'with-button' : ''}\n        refund-info-text=\"${refundInfoText}\"\n      ></justifi-refund-form>\n      ${\n        !withButton\n          ? `<button id=\"custom-submit\" type=\"button\" class=\"btn btn-primary\">Custom Submit</button>`\n          : ''\n      }\n    </div>\n    <style>\n      :root {\n        ${cssVariables || ''}\n      }\n\n      #custom-submit {\n        color: #fff;\n        background-color: #007bff;\n        border-color: #007bff;\n        display: inline-block;\n        font-weight: 400;\n        text-align: center;\n        vertical-align: middle;\n        user-select: none;\n        background-clip: border-box;\n        border: 1px solid transparent;\n        padding: .375rem .75rem;\n        font-size: 1rem;\n        line-height: 1.5;\n        border-radius: .25rem;\n        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n        margin-top: 1rem;\n      }\n\n      #custom-submit:hover {\n        color: #fff;\n        background-color: #0069d9;\n        border-color: #0062cc;\n      }\n\n      #custom-submit:focus {\n        outline: 0;\n        box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);\n      }\n\n      #custom-submit:disabled {\n        color: #fff;\n        background-color: #007bff;\n        border-color: #007bff;\n        opacity: .65;\n      }\n    </style>\n    <script>\n    function listenSubmittedEvent() {\n      const refundForm = document.querySelector('refund-form');\n      refundForm.addEventListener('submitted', (event) => {\n        console.log(event.detail);\n      });\n    }\n\n    function bindCustomSubmitButton() {\n      const externalSubmitButton = document.getElementById('custom-submit');\n      if (externalSubmitButton) {\n        externalSubmitButton.addEventListener('click', async () => {\n          const refundForm = document.querySelector('refund-form');\n          refundForm.submit();\n        });\n      }\n    }\n\n    (async () => {\n      await customElements.whenDefined('refund-form');\n      listenSubmittedEvent();\n      bindCustomSubmitButton();\n    })();\n    </script>\n  `;\n};\n\nexport const Basic = RefundFormTemplate.bind({});\nBasic.args = {\n  authToken: '',\n  paymentId: '',\n  amount: 0,\n  submitButtonText: 'Submit',\n  withButton: true,\n  refundInfoText: '',\n  cssVariables: '',\n};\n\nexport const Styled = RefundFormTemplate.bind({});\nStyled.args = {\n  authToken: '',\n  paymentId: '',\n  amount: 0,\n  submitButtonText: 'Submit',\n  withButton: true,\n  refundInfoText: '',\n  cssVariables: `\n    --jfi-primary-color: #212529;\n    --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';\n    --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;\n    --jfi-layout-padding: 4px;\n    --jfi-layout-form-control-spacing-x: .5rem;\n    --jfi-layout-form-control-spacing-y: 1rem;\n    --jfi-form-label-font-weight: 700;\n    --jfi-form-label-font-family: Calibri, sans-serif;\n    --jfi-form-label-margin: 0 0 .5rem 0;\n    --jfi-form-control-background-color: #F4F4F6;\n    --jfi-form-control-background-color-hover: #EEEEF5;\n    --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n    --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n    --jfi-form-control-border-color-focus: #fccc32;\n    --jfi-form-control-border-color-error: #C12727;\n    --jfi-form-control-border-top-width: 0;\n    --jfi-form-control-border-left-width: 0;\n    --jfi-form-control-border-bottom-width: 1px;\n    --jfi-form-control-border-right-width: 0;\n    --jfi-form-control-border-radius: 4px 4px 0 0;\n    --jfi-form-control-border-style: solid;\n    --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    --jfi-form-control-box-shadow-focus: none;\n    --jfi-form-control-box-shadow-error-focus: none;\n    --jfi-form-control-border-style: solid;\n    --jfi-form-control-color: #212529;\n    --jfi-form-control-font-size: 1rem;\n    --jfi-form-control-font-weight: 400;\n    --jfi-form-control-line-height: 2;\n    --jfi-form-control-margin: 0;\n    --jfi-form-control-padding: .5rem .875rem;\n    --jfi-error-message-color: #C12727;\n    --jfi-error-message-margin: .25rem 0 0 0;\n    --jfi-error-message-font-size: .875rem;\n\n    --jfi-submit-button-color: white;\n    --jfi-submit-button-background-color: #3F3F47;\n    --jfi-submit-button-border-color: var(--jfi-primary-color);\n    --jfi-submit-button-padding: 0.375rem 0.75rem;\n    --jfi-submit-button-font-size: 1rem;\n    --jfi-submit-button-border-radius: 1px;\n    --jfi-submit-button-color-hover: white;\n    --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n    --jfi-submit-button-color-focus: white;\n    --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n    --jfi-submit-button-color-active: white;\n    --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n    --jfi-submit-button-width: 100%;\n    --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n  `,\n};\n"]}
+{"version":3,"file":"refund-form.stories.js","sourceRoot":"","sources":["../../../../src/components/refund-form/refund-form.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,SAAS,EAAE,aAAa;EACxB,QAAQ,EAAE;IACR,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC9B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;IAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IACrC,UAAU,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IAClC,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;GACpC;CACF,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,SAAS,EACT,SAAS,EACT,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,YAAY,GACb,EAAE,EAAE;EACH,OAAO;;;sBAGa,SAAS;sBACT,SAAS;kBACb,MAAM;8BACM,gBAAgB;UACpC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;4BACb,cAAc;;QAGlC,CAAC,UAAU;IACT,CAAC,CAAC,yFAAyF;IAC3F,CAAC,CAAC,EACN;;;;UAII,YAAY,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,KAAK,CAAC,IAAI,GAAG;EACX,SAAS,EAAE,EAAE;EACb,SAAS,EAAE,EAAE;EACb,MAAM,EAAE,CAAC;EACT,gBAAgB,EAAE,QAAQ;EAC1B,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,EAAE;EAClB,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,MAAM,CAAC,IAAI,GAAG;EACZ,SAAS,EAAE,EAAE;EACb,SAAS,EAAE,EAAE;EACb,MAAM,EAAE,CAAC;EACT,gBAAgB,EAAE,QAAQ;EAC1B,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,EAAE;EAClB,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDb;CACF,CAAC","sourcesContent":["export default {\n  title: 'dev/Components/RefundForm',\n  component: 'refund-form',\n  argTypes: {\n    authToken: { control: 'text' },\n    paymentId: { control: 'text' },\n    amount: { control: 'number' },\n    submitButtonText: { control: 'text' },\n    withButton: { control: 'boolean' },\n    refundInfoText: { control: 'text' },\n  },\n};\n\nconst RefundFormTemplate = ({\n  authToken,\n  paymentId,\n  amount,\n  submitButtonText,\n  withButton,\n  refundInfoText,\n  cssVariables,\n}) => {\n  return `\n    <div>\n      <justifi-refund-form\n        auth-token=\"${authToken}\"\n        payment-id=\"${paymentId}\"\n        amount=\"${amount}\"\n        submit-button-text=\"${submitButtonText}\"\n        ${withButton ? 'with-button' : ''}\n        refund-info-text=\"${refundInfoText}\"\n      ></justifi-refund-form>\n      ${\n        !withButton\n          ? `<button id=\"custom-submit\" type=\"button\" class=\"btn btn-primary\">Custom Submit</button>`\n          : ''\n      }\n    </div>\n    <style>\n      :root {\n        ${cssVariables || ''}\n      }\n\n      #custom-submit {\n        color: #fff;\n        background-color: #007bff;\n        border-color: #007bff;\n        display: inline-block;\n        font-weight: 400;\n        text-align: center;\n        vertical-align: middle;\n        user-select: none;\n        background-clip: border-box;\n        border: 1px solid transparent;\n        padding: .375rem .75rem;\n        font-size: 1rem;\n        line-height: 1.5;\n        border-radius: .25rem;\n        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n        margin-top: 1rem;\n      }\n\n      #custom-submit:hover {\n        color: #fff;\n        background-color: #0069d9;\n        border-color: #0062cc;\n      }\n\n      #custom-submit:focus {\n        outline: 0;\n        box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);\n      }\n\n      #custom-submit:disabled {\n        color: #fff;\n        background-color: #007bff;\n        border-color: #007bff;\n        opacity: .65;\n      }\n    </style>\n    <script>\n    function listenSubmittedEvent() {\n      const refundForm = document.querySelector('refund-form');\n      refundForm.addEventListener('submitted', (event) => {\n        console.log(event.detail);\n      });\n    }\n\n    function bindCustomSubmitButton() {\n      const externalSubmitButton = document.getElementById('custom-submit');\n      if (externalSubmitButton) {\n        externalSubmitButton.addEventListener('click', async () => {\n          const refundForm = document.querySelector('refund-form');\n          refundForm.submit();\n        });\n      }\n    }\n\n    (async () => {\n      await customElements.whenDefined('refund-form');\n      listenSubmittedEvent();\n      bindCustomSubmitButton();\n    })();\n    </script>\n  `;\n};\n\nexport const Basic = RefundFormTemplate.bind({});\nBasic.args = {\n  authToken: '',\n  paymentId: '',\n  amount: 0,\n  submitButtonText: 'Submit',\n  withButton: true,\n  refundInfoText: '',\n  cssVariables: '',\n};\n\nexport const Styled = RefundFormTemplate.bind({});\nStyled.args = {\n  authToken: '',\n  paymentId: '',\n  amount: 0,\n  submitButtonText: 'Submit',\n  withButton: true,\n  refundInfoText: '',\n  cssVariables: `\n    --jfi-primary-color: #212529;\n    --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';\n    --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;\n    --jfi-layout-padding: 4px;\n    --jfi-layout-form-control-spacing-x: .5rem;\n    --jfi-layout-form-control-spacing-y: 1rem;\n    --jfi-form-label-font-weight: 700;\n    --jfi-form-label-font-family: Calibri, sans-serif;\n    --jfi-form-label-margin: 0 0 .5rem 0;\n    --jfi-form-control-background-color: #F4F4F6;\n    --jfi-form-control-background-color-hover: #EEEEF5;\n    --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n    --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n    --jfi-form-control-border-color-focus: #fccc32;\n    --jfi-form-control-border-color-error: #C12727;\n    --jfi-form-control-border-top-width: 0;\n    --jfi-form-control-border-left-width: 0;\n    --jfi-form-control-border-bottom-width: 1px;\n    --jfi-form-control-border-right-width: 0;\n    --jfi-form-control-border-radius: 4px 4px 0 0;\n    --jfi-form-control-border-style: solid;\n    --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    --jfi-form-control-box-shadow-focus: none;\n    --jfi-form-control-box-shadow-error-focus: none;\n    --jfi-form-control-border-style: solid;\n    --jfi-form-control-color: #212529;\n    --jfi-form-control-font-size: 1rem;\n    --jfi-form-control-font-weight: 400;\n    --jfi-form-control-line-height: 2;\n    --jfi-form-control-margin: 0;\n    --jfi-form-control-padding: .5rem .875rem;\n    --jfi-error-message-color: #C12727;\n    --jfi-error-message-margin: .25rem 0 0 0;\n    --jfi-error-message-font-size: .875rem;\n\n    --jfi-submit-button-color: white;\n    --jfi-submit-button-background-color: #3F3F47;\n    --jfi-submit-button-border-color: var(--jfi-primary-color);\n    --jfi-submit-button-padding: 0.375rem 0.75rem;\n    --jfi-submit-button-font-size: 1rem;\n    --jfi-submit-button-border-radius: 1px;\n    --jfi-submit-button-color-hover: white;\n    --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n    --jfi-submit-button-color-focus: white;\n    --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n    --jfi-submit-button-color-active: white;\n    --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n    --jfi-submit-button-width: 100%;\n    --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n  `,\n};\n"]}

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

@@ -3,6 +3,7 @@ import { Api } from "../../api";
 import { SubAccount } from "../../api/SubAccount";
 import { EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
 import { MapSubAccountStatusToBadge, formatDate, formatTime } from "../../utils/utils";
+import { config } from "../../../config";
 export class SubaccountDetails {
   constructor() {
     this.accountId = undefined;
@@ -20,7 +21,7 @@ export class SubaccountDetails {
     this.fetchData();
   }
   async fetchOnboardingData() {
-    const api = Api(this.authToken, process.env.ACCOUNTS_API_ORIGIN);
+    const api = Api(this.authToken, '');
     const endpoint = `onboarding/${this.subaccountId}`;
     const response = await api.get(endpoint);
     if (!response.error) {
@@ -31,7 +32,7 @@ export class SubaccountDetails {
     }
   }
   async fetchSubAccountData() {
-    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);
+    const api = Api(this.authToken, config.privateApiOrigin);
     const endpoint = `account/${this.accountId}/seller_accounts/${this.subaccountId}`;
     const response = await api.get(endpoint);
     if (!response.error) {

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

@@ -1 +1 @@
-{"version":3,"file":"subaccount-details.js","sourceRoot":"","sources":["../../../../src/components/subaccount-details/subaccount-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponse } from '../../api';\nimport { IOnboardingData, ISubAccount, SubAccount } from '../../api/SubAccount';\nimport { EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\nimport { MapSubAccountStatusToBadge, formatDate, formatTime } from '../../utils/utils';\n\n@Component({\n  tag: 'justifi-subaccount-details',\n  styleUrl: 'subaccount-details.scss',\n  shadow: true,\n})\n\nexport class SubaccountDetails {\n  @Prop() accountId: string;\n  @Prop() subaccountId: string;\n  @Prop() authToken: string;\n  @State() onboardingData: IOnboardingData;\n  @State() subaccount: SubAccount;\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n\n  @Watch('subaccountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  async fetchOnboardingData(): Promise<void> {\n    const api = Api(this.authToken, process.env.ACCOUNTS_API_ORIGIN);\n    const endpoint = `onboarding/${this.subaccountId}`;\n\n    const response: IApiResponse<IOnboardingData> = await api.get(endpoint);\n    if (!response.error) {\n      this.onboardingData = response.data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n  }\n\n  async fetchSubAccountData(): Promise<void> {\n    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);\n    const endpoint = `account/${this.accountId}/seller_accounts/${this.subaccountId}`;\n\n    const response: IApiResponse<ISubAccount> = await api.get(endpoint);\n    if (!response.error) {\n      const data = new SubAccount(response.data);\n      this.subaccount = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n  }\n\n  async fetchData(): Promise<void> {\n    this.loading = true;\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.fetchSubAccountData();\n    this.fetchOnboardingData();\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {\n          this.loading ? LoadingState :\n            !this.subaccount || !this.onboardingData ? ErrorState(this.errorMessage) :\n              <justifi-details>\n                <EntityHeadInfo \n                  slot='head-info' \n                  badge={<span slot='badge' innerHTML={MapSubAccountStatusToBadge(this.subaccount?.status)} />}\n                  title={this.subaccount?.name}>\n                    <EntityHeadInfoItem \n                      classes=\"border-1 border-end\"\n                      title=\"Created At\"\n                      value={`${formatDate(this.subaccount.created_at)} ${formatTime(this.subaccount.created_at)}`}\n                    />\n                    <EntityHeadInfoItem\n                      classes=\"border-1 border-end\"\n                      title=\"Last Updated\"\n                      value={`${formatDate(this.subaccount.updated_at)} ${formatTime(this.subaccount.updated_at)}`}\n                    />\n                    <EntityHeadInfoItem title=\"ID\" value={this.subaccount.id} />  \n                </EntityHeadInfo>\n                <div slot='detail-sections'>\n                  <subaccount-account-details subaccount={this.subaccount} onboardingData={this.onboardingData} />\n                  <subaccount-merchant-details onboardingData={this.onboardingData} />\n                  <subaccount-representative-details data={this.onboardingData?.payload?.representative} />\n                  <subaccount-owners-details data={this.onboardingData?.payload?.owners} />\n                </div>\n              </justifi-details>\n        }\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"subaccount-details.js","sourceRoot":"","sources":["../../../../src/components/subaccount-details/subaccount-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponse } from '../../api';\nimport { IOnboardingData, ISubAccount, SubAccount } from '../../api/SubAccount';\nimport { EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\nimport { MapSubAccountStatusToBadge, formatDate, formatTime } from '../../utils/utils';\nimport { config } from '../../../config';\n\n@Component({\n  tag: 'justifi-subaccount-details',\n  styleUrl: 'subaccount-details.scss',\n  shadow: true,\n})\n\nexport class SubaccountDetails {\n  @Prop() accountId: string;\n  @Prop() subaccountId: string;\n  @Prop() authToken: string;\n  @State() onboardingData: IOnboardingData;\n  @State() subaccount: SubAccount;\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n\n  @Watch('subaccountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  async fetchOnboardingData(): Promise<void> {\n    const api = Api(this.authToken, '');\n    const endpoint = `onboarding/${this.subaccountId}`;\n\n    const response: IApiResponse<IOnboardingData> = await api.get(endpoint);\n    if (!response.error) {\n      this.onboardingData = response.data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n  }\n\n  async fetchSubAccountData(): Promise<void> {\n    const api = Api(this.authToken, config.privateApiOrigin);\n    const endpoint = `account/${this.accountId}/seller_accounts/${this.subaccountId}`;\n\n    const response: IApiResponse<ISubAccount> = await api.get(endpoint);\n    if (!response.error) {\n      const data = new SubAccount(response.data);\n      this.subaccount = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n  }\n\n  async fetchData(): Promise<void> {\n    this.loading = true;\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.fetchSubAccountData();\n    this.fetchOnboardingData();\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {\n          this.loading ? LoadingState :\n            !this.subaccount || !this.onboardingData ? ErrorState(this.errorMessage) :\n              <justifi-details>\n                <EntityHeadInfo\n                  slot='head-info'\n                  badge={<span slot='badge' innerHTML={MapSubAccountStatusToBadge(this.subaccount?.status)} />}\n                  title={this.subaccount?.name}>\n                  <EntityHeadInfoItem\n                    classes=\"border-1 border-end\"\n                    title=\"Created At\"\n                    value={`${formatDate(this.subaccount.created_at)} ${formatTime(this.subaccount.created_at)}`}\n                  />\n                  <EntityHeadInfoItem\n                    classes=\"border-1 border-end\"\n                    title=\"Last Updated\"\n                    value={`${formatDate(this.subaccount.updated_at)} ${formatTime(this.subaccount.updated_at)}`}\n                  />\n                  <EntityHeadInfoItem title=\"ID\" value={this.subaccount.id} />\n                </EntityHeadInfo>\n                <div slot='detail-sections'>\n                  <subaccount-account-details subaccount={this.subaccount} onboardingData={this.onboardingData} />\n                  <subaccount-merchant-details onboardingData={this.onboardingData} />\n                  <subaccount-representative-details data={this.onboardingData?.payload?.representative} />\n                  <subaccount-owners-details data={this.onboardingData?.payload?.owners} />\n                </div>\n              </justifi-details>\n        }\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -1,3 +1,4 @@
+import { config } from "../../../config";
 export default {
   title: 'dev/Components/SubaccountDetails',
   component: 'justifi-subaccount-details',
@@ -5,9 +6,9 @@ export default {
 };
 class SubaccountDetailsArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;
-    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;
-    this['subaccount-id'] = args['subaccount-id'] || process.env.EXAMPLE_SUBACCOUNT_ID;
+    this['auth-token'] = args['auth-token'] || config.privateAuthToken;
+    this['account-id'] = args['account-id'] || config.examplePlatformAccountId;
+    this['subaccount-id'] = args['subaccount-id'] || 'subaccount-id';
   }
 }
 const Template = (args) => {

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

@@ -1 +1 @@
-{"version":3,"file":"subaccount-details.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccount-details/subaccount-details.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,SAAS,EAAE,4BAA4B;EACvC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,qBAAqB;EAKzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;IAC1E,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;IACnF,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC;EACrF,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;uBACf,IAAI,CAAC,eAAe,CAAC;;GAEzC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'dev/Components/SubaccountDetails',\n  component: 'justifi-subaccount-details',\n  parameters: {}\n};\n\nclass SubaccountDetailsArgs {\n  'auth-token': string;\n  'account-id': string;\n  'subaccount-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;\n    this['subaccount-id'] = args['subaccount-id'] || process.env.EXAMPLE_SUBACCOUNT_ID;\n  }\n}\n\nconst Template = (args: SubaccountDetailsArgs) => {\n  return (`\n    <justifi-subaccount-details\n      data-testid=\"justifi-subaccounts-details\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n      subaccount-id=\"${args['subaccount-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new SubaccountDetailsArgs({});\n"]}
+{"version":3,"file":"subaccount-details.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccount-details/subaccount-details.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,SAAS,EAAE,4BAA4B;EACvC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,qBAAqB;EAKzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,wBAAwB,CAAC;IAC3E,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC;EACnE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;uBACf,IAAI,CAAC,eAAe,CAAC;;GAEzC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n  title: 'dev/Components/SubaccountDetails',\n  component: 'justifi-subaccount-details',\n  parameters: {}\n};\n\nclass SubaccountDetailsArgs {\n  'auth-token': string;\n  'account-id': string;\n  'subaccount-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || config.privateAuthToken;\n    this['account-id'] = args['account-id'] || config.examplePlatformAccountId;\n    this['subaccount-id'] = args['subaccount-id'] || 'subaccount-id';\n  }\n}\n\nconst Template = (args: SubaccountDetailsArgs) => {\n  return (`\n    <justifi-subaccount-details\n      data-testid=\"justifi-subaccounts-details\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n      subaccount-id=\"${args['subaccount-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new SubaccountDetailsArgs({});\n"]}

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { SubAccount } from "../../api/SubAccount";
 import { MapSubAccountStatusToBadge } from "../../utils/utils";
 import { Api, pagingDefaults } from "../../api";
+import { config } from "../../../config";
 export class SubaccountsList {
   constructor() {
     this.handleClickPrevious = (beforeCursor) => {
@@ -35,7 +36,7 @@ export class SubaccountsList {
       return;
     }
     this.loading = true;
-    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);
+    const api = Api(this.authToken, config.privateApiOrigin);
     const endpoint = `account/${this.accountId}/seller_accounts`;
     const response = await api.get(endpoint, this.params);
     if (!response.error) {

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

@@ -1 +1 @@
-{"version":3,"file":"subaccounts-list.js","sourceRoot":"","sources":["../../../../src/components/subaccounts-list/subaccounts-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { SubAccount } from '../../api/SubAccount';\nimport { MapSubAccountStatusToBadge } from '../../utils/utils';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\n\n@Component({\n  tag: 'justifi-subaccounts-list',\n  styleUrl: 'subaccounts-list.css',\n  shadow: true,\n})\nexport class SubaccountsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() subaccounts: SubAccount[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any;\n  @Event({\n    eventName: 'subaccount-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<SubAccount>;\n\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    this.loading = true;\n    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);\n    const endpoint = `account/${this.accountId}/seller_accounts`;\n\n\n    const response: IApiResponseCollection<SubAccount[]> = await api.get(endpoint, this.params);\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n      const data = response?.data.map(dataItem => new SubAccount(dataItem));\n      this.subaccounts = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={e => {\n            const clickSubAccountId = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickSubAccountId) { return }\n            this.rowClicked.emit(this.subaccounts.find((subaccount) => subaccount.id === clickSubAccountId));\n          }}\n          entityId={this.subaccounts.map((subaccount) => subaccount.id)}\n          columnData={[\n            ['Created On', 'The date and time each sub account was created'],\n            ['Name', 'The name provided for each sub account'],\n            ['Account\t', 'The unique live or test account ID for each sub account'],\n            ['Card Rate\t', 'The rate that determines the fees charged per payment, when paid by card'],\n            ['ACH Rate\t', 'The rate that determines the fees charged per payment, when paid by eCheck'],\n            ['Status', 'The onboarding status of each sub account']\n          ]}\n          rowData={\n            this.subaccounts.map((subaccount) => (\n              [\n                {\n                  type: 'head',\n                  value: `\n                    <div>${subaccount.dateString}</div>\n                    <div>${subaccount.timeString}</div>\n                  `,\n                },\n                subaccount.name,\n                subaccount.id,\n                subaccount.cardRate,\n                subaccount.achRate,\n                {\n                  type: 'inner',\n                  value: MapSubAccountStatusToBadge(subaccount.status)\n                }\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          params={this.params}\n          paging={{\n            ...this.paging,\n            handleClickNext: this.handleClickNext,\n            handleClickPrevious: this.handleClickPrevious\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"subaccounts-list.js","sourceRoot":"","sources":["../../../../src/components/subaccounts-list/subaccounts-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { SubAccount } from '../../api/SubAccount';\nimport { MapSubAccountStatusToBadge } from '../../utils/utils';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\nimport { config } from '../../../config';\n\n@Component({\n  tag: 'justifi-subaccounts-list',\n  styleUrl: 'subaccounts-list.css',\n  shadow: true,\n})\nexport class SubaccountsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() subaccounts: SubAccount[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any;\n  @Event({\n    eventName: 'subaccount-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<SubAccount>;\n\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    this.loading = true;\n    const api = Api(this.authToken, config.privateApiOrigin);\n    const endpoint = `account/${this.accountId}/seller_accounts`;\n\n\n    const response: IApiResponseCollection<SubAccount[]> = await api.get(endpoint, this.params);\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n      const data = response?.data.map(dataItem => new SubAccount(dataItem));\n      this.subaccounts = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={e => {\n            const clickSubAccountId = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickSubAccountId) { return }\n            this.rowClicked.emit(this.subaccounts.find((subaccount) => subaccount.id === clickSubAccountId));\n          }}\n          entityId={this.subaccounts.map((subaccount) => subaccount.id)}\n          columnData={[\n            ['Created On', 'The date and time each sub account was created'],\n            ['Name', 'The name provided for each sub account'],\n            ['Account\t', 'The unique live or test account ID for each sub account'],\n            ['Card Rate\t', 'The rate that determines the fees charged per payment, when paid by card'],\n            ['ACH Rate\t', 'The rate that determines the fees charged per payment, when paid by eCheck'],\n            ['Status', 'The onboarding status of each sub account']\n          ]}\n          rowData={\n            this.subaccounts.map((subaccount) => (\n              [\n                {\n                  type: 'head',\n                  value: `\n                    <div>${subaccount.dateString}</div>\n                    <div>${subaccount.timeString}</div>\n                  `,\n                },\n                subaccount.name,\n                subaccount.id,\n                subaccount.cardRate,\n                subaccount.achRate,\n                {\n                  type: 'inner',\n                  value: MapSubAccountStatusToBadge(subaccount.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/subaccounts-list/subaccounts-list.stories.js

@@ -1,3 +1,4 @@
+import { config } from "../../../config";
 export default {
   title: 'dev/Components/SubaccountsList',
   component: 'justifi-subaccounts-list',
@@ -15,8 +16,8 @@ export default {
 };
 class SubaccountsListArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;
-    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;
+    this['auth-token'] = args['auth-token'] || config.privateAuthToken;
+    this['account-id'] = args['account-id'] || config.examplePlatformAccountId;
   }
 }
 const Template = (args) => {

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

@@ -1 +1 @@
-{"version":3,"file":"subaccounts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccounts-list/subaccounts-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,gCAAgC;EACvC,SAAS,EAAE,0BAA0B;EACrC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB;EAIvB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;IAC1E,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;EACrF,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAyB,EAAE,EAAE;EAC7C,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,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAC1C,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["export default {\n  title: 'dev/Components/SubaccountsList',\n  component: 'justifi-subaccounts-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('subaccount-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass SubaccountsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;\n  }\n}\n\nconst Template = (args: SubaccountsListArgs) => {\n  return (`\n    <justifi-subaccounts-list\n      data-testid=\"justifi-subaccounts-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 SubaccountsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new SubaccountsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-subaccounts-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-subaccounts-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-subaccounts-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-subaccounts-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}
+{"version":3,"file":"subaccounts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccounts-list/subaccounts-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,gCAAgC;EACvC,SAAS,EAAE,0BAA0B;EACrC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB;EAIvB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,wBAAwB,CAAA;EAC5E,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAyB,EAAE,EAAE;EAC7C,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,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAC1C,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n  title: 'dev/Components/SubaccountsList',\n  component: 'justifi-subaccounts-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('subaccount-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass SubaccountsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || config.privateAuthToken;\n    this['account-id'] = args['account-id'] || config.examplePlatformAccountId\n  }\n}\n\nconst Template = (args: SubaccountsListArgs) => {\n  return (`\n    <justifi-subaccounts-list\n      data-testid=\"justifi-subaccounts-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 SubaccountsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new SubaccountsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-subaccounts-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-subaccounts-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-subaccounts-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-subaccounts-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}

package/dist/collection/utils/utils.js

@@ -47,6 +47,10 @@ export function formatMediumDate(input) {
   };
   return input.toLocaleDateString('en-US', options);
 }
+export function formatDisplayDate(value, endDate) {
+  const isEndingDate = value === endDate;
+  return (isEndingDate) ? 'Today' : format(new Date(value.replace(/-/g, '/')), 'MMM d');
+}
 export function formatTime(dateString) {
   if (!dateString)
     return '';