npm - @justifi/webcomponents - Versions diffs - 4.7.0-rc.1 → 4.7.0 - Mend

@justifi/webcomponents 4.7.0-rc.1 → 4.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (158) hide show

package/dist/components/justifi-payment-balance-transactions.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { A as Api } from './Api.js';
 import { p as pagingDefaults } from './Pagination.js';
 import { P as PaymentBalanceTransaction } from './Payout.js';
 import { a as formatDate, d as formatTime, s as snakeCaseToHumanReadable, b as formatCurrency } from './utils2.js';
+import { c as config } from './config.js';
 import { d as defineCustomElement$3 } from './table.js';
 import { d as defineCustomElement$2 } from './pagination-menu2.js';
@@ -46,7 +47,7 @@ const PaymentBalanceTransactions = /*@__PURE__*/ proxyCustomElement(class Paymen
       return;
     }
     const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;
-    const response = await Api(this.authToken).get(endpoint, this.params);
+    const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint, this.params);
     if (!response.error) {
       this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
       this.balanceTransactions = response.data.map(dataItem => new PaymentBalanceTransaction(dataItem));

package/dist/components/justifi-payment-balance-transactions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"justifi-payment-balance-transactions.js","mappings":"~~;;;;;;;;~~AAAA,MAAM,6BAA6B,GAAG,EAAE;;~~MCsB3B~~,0BAA0B;;;;;IAmBrC,wBAAmB,GAAG,CAAC,YAAoB;MACzC,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,YAAY,CAAC;MAC9B,IAAI,CAAC,MAAM,oCAAS,SAAS,KAAE,aAAa,EAAE,YAAY,IAAG,CAAC;KAC/D,CAAC;IAEF,oBAAe,GAAG,CAAC,WAAmB;MACpC,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,aAAa,CAAC;MAC/B,IAAI,CAAC,MAAM,oCAAS,SAAS,KAAE,YAAY,EAAE,WAAW,IAAG,CAAC;KAC7D,CAAC;;;;+BAzB2D,EAAE;mBACnC,IAAI;;kBAEF,cAAc;;;EAI5C,kBAAkB;IAChB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAcD,MAAM,SAAS;IACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACtC,IAAI,CAAC,YAAY,GAAG,gDAAgD,CAAC;MACrE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,OAAO;KACR;IACD,MAAM,QAAQ,GAAG,WAAW,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,SAAS,+BAA+B,CAAC;IAErG,MAAM,QAAQ,GACZ,MAAM,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;~~IAEvD~~,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;MACnB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,GACX,QAAQ,CAAC,SAAS,CACtB,CAAC;MACF,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAC1C,QAAQ,IAAI,IAAI,yBAAyB,CAAC,QAAQ,CAAC,CACpD,CAAC;KACH;SAAM;MACL,IAAI,CAAC,YAAY;QACf,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ;YAC9B,QAAQ,CAAC,KAAK;YACd,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC;KAC9B;IACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,qBACE,UAAU,EAAE;QACV,CAAC,cAAc,EAAE,oCAAoC,CAAC;QACtD,CAAC,MAAM,EAAE,8BAA8B,CAAC;QACxC,CAAC,IAAI,EAAE,2CAA2C,CAAC;QACnD,CAAC,OAAO,EAAE,uCAAuC,CAAC;QAClD;UACE,SAAS;UACT,8DAA8D;SAC/D;OACF,EACD,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC,EACrE,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,IAAI;QAC1D,eACE,eAAM,UAAU,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAO,EACtD,eAAM,UAAU,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAO,CAClD;QACN,wBAAwB,CACtB,kBAAkB,CAAC,wBAAwB,CAC5C;QACD,kBAAkB,CAAC,UAAU;QAC7B,cAAc,CAAC,kBAAkB,CAAC,MAAM,CAAC;QACzC,cAAc,CAAC,kBAAkB,CAAC,OAAO,CAAC;OAC3C,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,YAAY,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,kCACD,IAAI,CAAC,MAAM,KACd,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,MAE/C,CACG,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/payment-balance-transactions/payment-balance-transactions.scss?tag=justifi-payment-balance-transactions&encapsulation=shadow","src/components/payment-balance-transactions/payment-balance-transactions.tsx"],"sourcesContent":["","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport {\n Api,\n IApiResponseCollection,\n IPaymentBalanceTransaction,\n PagingInfo,\n PaymentBalanceTransaction,\n pagingDefaults,\n} from '../../api';\n\nimport {\n formatCurrency,\n formatDate,\n formatTime,\n snakeCaseToHumanReadable,\n} from '../../utils/utils';\n\n@Component({\n tag: 'justifi-payment-balance-transactions',\n styleUrl: 'payment-balance-transactions.scss',\n shadow: true,\n})\nexport class PaymentBalanceTransactions {\n @Prop() accountId: string;\n @Prop() authToken: string;\n @Prop() paymentId: string;\n @State() balanceTransactions: IPaymentBalanceTransaction[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any\n\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n }~~; \~~n\n async fetchData(): Promise<void> {\n this.loading = true;\n\n if (!this.accountId \|\| !this.paymentId) {\n this.errorMessage = 'Missing required props: accountId or paymentId';\n this.loading = false;\n return;\n }\n const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;\n\n const response: IApiResponseCollection<IPaymentBalanceTransaction[]> =\n await Api(this.authToken).get(endpoint, this.params);\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info,\n };\n this.balanceTransactions = response.data.map(\n dataItem => new PaymentBalanceTransaction(dataItem),\n );\n } else {\n this.errorMessage =\n typeof response.error === 'string'\n ? response.error\n : response.error.message;\n }\n this.loading = false;\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n columnData={[\n ['Processed On', 'The date each transaction occurred'],\n ['Type', 'The type of each transaction'],\n ['ID', 'The unique identifier of each transaction'],\n ['Amout', 'The dollar amount of each transaction'],\n [\n 'Balance',\n 'The running total amount of this payment that belongs to you',\n ],\n ]}\n entityId={this.balanceTransactions.map(transaction => transaction.id)}\n rowData={this.balanceTransactions.map(balanceTransaction => [\n <div>\n <div>{formatDate(balanceTransaction.created_at)}</div>\n <div>{formatTime(balanceTransaction.created_at)}</div>\n </div>,\n snakeCaseToHumanReadable(\n balanceTransaction.payment_balance_txn_type,\n ),\n balanceTransaction.payment_id,\n formatCurrency(balanceTransaction.amount),\n formatCurrency(balanceTransaction.balance),\n ])}\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"justifi-payment-balance-transactions.js","mappings":"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","names":[],"sources":["src/components/payment-balance-transactions/payment-balance-transactions.scss?tag=justifi-payment-balance-transactions&encapsulation=shadow","src/components/payment-balance-transactions/payment-balance-transactions.tsx"],"sourcesContent":["","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport {\n Api,\n IApiResponseCollection,\n IPaymentBalanceTransaction,\n PagingInfo,\n PaymentBalanceTransaction,\n pagingDefaults,\n} from '../../api';\n\nimport {\n formatCurrency,\n formatDate,\n formatTime,\n snakeCaseToHumanReadable,\n} from '../../utils/utils';\nimport { config } from '../../../config';\n\n@Component({\n tag: 'justifi-payment-balance-transactions',\n styleUrl: 'payment-balance-transactions.scss',\n shadow: true,\n})\nexport class PaymentBalanceTransactions {\n @Prop() accountId: string;\n @Prop() authToken: string;\n @Prop() paymentId: string;\n @State() balanceTransactions: IPaymentBalanceTransaction[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any\n\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n };\n\n async fetchData(): Promise<void> {\n this.loading = true;\n\n if (!this.accountId \|\| !this.paymentId) {\n this.errorMessage = 'Missing required props: accountId or paymentId';\n this.loading = false;\n return;\n }\n const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;\n\n const response: IApiResponseCollection<IPaymentBalanceTransaction[]> =\n await Api(this.authToken, config.proxyApiOrigin).get(endpoint, this.params);\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info,\n };\n this.balanceTransactions = response.data.map(\n dataItem => new PaymentBalanceTransaction(dataItem),\n );\n } else {\n this.errorMessage =\n typeof response.error === 'string'\n ? response.error\n : response.error.message;\n }\n this.loading = false;\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n columnData={[\n ['Processed On', 'The date each transaction occurred'],\n ['Type', 'The type of each transaction'],\n ['ID', 'The unique identifier of each transaction'],\n ['Amout', 'The dollar amount of each transaction'],\n [\n 'Balance',\n 'The running total amount of this payment that belongs to you',\n ],\n ]}\n entityId={this.balanceTransactions.map(transaction => transaction.id)}\n rowData={this.balanceTransactions.map(balanceTransaction => [\n <div>\n <div>{formatDate(balanceTransaction.created_at)}</div>\n <div>{formatTime(balanceTransaction.created_at)}</div>\n </div>,\n snakeCaseToHumanReadable(\n balanceTransaction.payment_balance_txn_type,\n ),\n balanceTransaction.payment_id,\n formatCurrency(balanceTransaction.amount),\n formatCurrency(balanceTransaction.balance),\n ])}\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/justifi-payment-details.js CHANGED Viewed

@@ -45,10 +45,8 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
     this.loading = false;
   }
   render() {
-    var _a;
-    return (h(Host, null, this.loading ? LoadingState :
-      !this.payment ? ErrorState(this.errorMessage) :
-        h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: this.payment.payment_method.card.brand }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.card.name })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata }))))));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate((_b = this.payment) === null || _b === void 0 ? void 0 : _b.updated_at)} ${formatTime((_c = this.payment) === null || _c === void 0 ? void 0 : _c.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate((_d = this.payment) === null || _d === void 0 ? void 0 : _d.created_at)} ${formatTime((_e = this.payment) === null || _e === void 0 ? void 0 : _e.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: (_f = this.payment) === null || _f === void 0 ? void 0 : _f.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency((_g = this.payment) === null || _g === void 0 ? void 0 : _g.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency((_h = this.payment) === null || _h === void 0 ? void 0 : _h.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency((_j = this.payment) === null || _j === void 0 ? void 0 : _j.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency((_k = this.payment) === null || _k === void 0 ? void 0 : _k.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge((_l = this.payment) === null || _l === void 0 ? void 0 : _l.status) }), h(DetailItem, { title: "Payment ID", value: (_m = this.payment) === null || _m === void 0 ? void 0 : _m.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency((_o = this.payment) === null || _o === void 0 ? void 0 : _o.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: (_p = this.payment) === null || _p === void 0 ? void 0 : _p.statement_descriptor }), h(DetailItem, { title: "Description", value: (_q = this.payment) === null || _q === void 0 ? void 0 : _q.description })), ((_r = this.payment) === null || _r === void 0 ? void 0 : _r.payment_method.card) && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: (_s = this.payment) === null || _s === void 0 ? void 0 : _s.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: (_t = this.payment) === null || _t === void 0 ? void 0 : _t.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: (_u = this.payment) === null || _u === void 0 ? void 0 : _u.payment_method.card.brand }), h(DetailItem, { title: "Cardholder", value: (_v = this.payment) === null || _v === void 0 ? void 0 : _v.payment_method.card.name }))), ((_w = this.payment) === null || _w === void 0 ? void 0 : _w.payment_method.bank_account) && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: (_x = this.payment) === null || _x === void 0 ? void 0 : _x.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: (_y = this.payment) === null || _y === void 0 ? void 0 : _y.payment_method.bank_account.acct_last_four }), h(DetailItem, { title: "Bank Name", value: (_z = this.payment) === null || _z === void 0 ? void 0 : _z.payment_method.bank_account.bank_name }), h(DetailItem, { title: "Account Owner", value: (_0 = this.payment) === null || _0 === void 0 ? void 0 : _0.payment_method.bank_account.account_owner_name }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: (_1 = this.payment) === null || _1 === void 0 ? void 0 : _1.metadata })))))));
   }
   static get watchers() { return {
     "paymentId": ["updateOnPropChange"],

package/dist/components/justifi-payment-details.js.map CHANGED Viewed

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

package/dist/components/justifi-payments-list.js CHANGED Viewed

@@ -63,6 +63,14 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
   getPaymentMethod(paymentMethod) {
     return paymentMethod.card || paymentMethod.bank_account;
   }
+  getPaymentMethodName(paymentMethod) {
+    if (paymentMethod.card) {
+      return paymentMethod.card.name;
+    }
+    else {
+      return paymentMethod.bank_account.account_owner_name;
+    }
+  }
   render() {
     return (h(Host, null, h("justifi-table", { rowClickHandler: e => {
         const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
@@ -88,7 +96,7 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
         },
         formatCurrency(payment.amount),
         payment.description,
-        this.getPaymentMethod(payment.payment_method).name,
+        this.getPaymentMethodName(payment.payment_method),
         this.getPaymentMethod(payment.payment_method).acct_last_four,
         {
           type: 'inner',

package/dist/components/justifi-payments-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"justifi-payments-list.js","mappings":"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~~gBAAgB~~,CAAC,OAAO,CAAC,cAAc,CAAC~~,CAAC,IAAI~~;~~QAClD~~,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,cAAc;QAC5D;UACE,IAAI,EAAE,OAAO;UACb,KAAK,EAAE,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC;SAC/C;QACD,OAAO,CAAC,EAAE;OACX,CACF,CAAC,EAEJ,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,YAAY,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,kCACD,IAAI,CAAC,MAAM,KACd,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,MAE/C,CACG,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/payments-list/payments-list.scss?tag=justifi-payments-list&encapsulation=shadow","src/components/payments-list/payments-list.tsx"],"sourcesContent":[":host {\n @include host-base-styles;\n}\n","import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, IPaymentMethod, PagingInfo, Payment, pagingDefaults } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { config } from '../../../config';\n\n/*\n @exportedPart table-head: Table head\n * @exportedPart table-head-row: Head row\n * @exportedPart table-head-cell: Individual head cell\n * @exportedPart table-body: Body of the table\n * @exportedPart table-row: Row of the table\n * @exportedPart table-cell: Individual cell of the table\n * @exportedPart loading-state-cell: Row for loading state\n * @exportedPart loading-state-spinner: Spinner element for loading state\n * @exportedPart error-state: Row for Error state\n * @exportedPart empty-state: Row for Emtpy state\n * @exportedPart pagination-bar: Pagination bar\n * @exportedPart arrow: Both paging buttons\n * @exportedPart arrow-left: Previous page button\n * @exportedPart arrow-right: Next page button\n * @exportedPart button-disabled: Disabled state for paging buttons\n * @exportedPart previous-button-text: Text for Previous button\n * @exportedPart next-button-text: Text for Next button\n*/\n@Component({\n tag: 'justifi-payments-list',\n styleUrl: 'payments-list.scss',\n shadow: true,\n})\n\nexport class PaymentsList {\n @Prop() accountId: string;\n @Prop() authToken: string;\n @State() payments: Payment[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any;\n @Event({\n eventName: 'payment-row-clicked',\n bubbles: true,\n }) rowClicked: EventEmitter<Payment>;\n\n @Watch('accountId')\n @Watch('authToken')\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n };\n\n async fetchData(): Promise<void> {\n if (!this.accountId \|\| !this.authToken) {\n this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n this.loading = false;\n return;\n }\n\n this.loading = true;\n\n const api = Api(this.authToken, config.proxyApiOrigin);\n const endpoint = `account/${this.accountId}/payments`;\n\n const response: IApiResponseCollection<Payment[]> = await api.get(endpoint, this.params);\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info\n }\n\n const data = response?.data?.map(dataItem => new Payment(dataItem));\n this.payments = data;\n } else {\n this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n }\n\n this.loading = false;\n }\n\n getPaymentMethod(paymentMethod: IPaymentMethod) {\n return paymentMethod.card \|\| paymentMethod.bank_account\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n rowClickHandler={e => {\n const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;\n if (!clickedPaymentID) { return }\n this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));\n }}\n entityId={this.payments.map((payment) => payment.id)}\n columnData={[\n ['Made On', 'The date and time each payment was made'],\n ['Amount', 'The dollar amount of each payment'],\n ['Description', 'The payment description, if you provided one'],\n ['Cardholder', 'The name associated with the payment method'],\n ['Payment Method', 'The brand and last 4 digits of the payment method'],\n ['Status', 'The current status of each payment'],\n ['Payment ID', 'The unique identifier of each payment']\n ]}\n rowData={\n this.payments.map((payment) => (\n [\n {\n type: 'head',\n value: `\n <div>${formatDate(payment.created_at)}</div>\n <div>${formatTime(payment.created_at)}</div>\n `,\n },\n formatCurrency(payment.amount),\n payment.description,\n this.~~getPaymentMethod~~(payment.payment_method)~~.name~~,\n this.getPaymentMethod(payment.payment_method).acct_last_four,\n {\n type: 'inner',\n value: MapPaymentStatusToBadge(payment.status)\n },\n payment.id\n ]\n ))\n }\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"justifi-payments-list.js","mappings":"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","names":[],"sources":["src/components/payments-list/payments-list.scss?tag=justifi-payments-list&encapsulation=shadow","src/components/payments-list/payments-list.tsx"],"sourcesContent":[":host {\n @include host-base-styles;\n}\n","import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, IPaymentMethod, PagingInfo, Payment, pagingDefaults } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { config } from '../../../config';\n\n/*\n @exportedPart table-head: Table head\n * @exportedPart table-head-row: Head row\n * @exportedPart table-head-cell: Individual head cell\n * @exportedPart table-body: Body of the table\n * @exportedPart table-row: Row of the table\n * @exportedPart table-cell: Individual cell of the table\n * @exportedPart loading-state-cell: Row for loading state\n * @exportedPart loading-state-spinner: Spinner element for loading state\n * @exportedPart error-state: Row for Error state\n * @exportedPart empty-state: Row for Emtpy state\n * @exportedPart pagination-bar: Pagination bar\n * @exportedPart arrow: Both paging buttons\n * @exportedPart arrow-left: Previous page button\n * @exportedPart arrow-right: Next page button\n * @exportedPart button-disabled: Disabled state for paging buttons\n * @exportedPart previous-button-text: Text for Previous button\n * @exportedPart next-button-text: Text for Next button\n*/\n@Component({\n tag: 'justifi-payments-list',\n styleUrl: 'payments-list.scss',\n shadow: true,\n})\n\nexport class PaymentsList {\n @Prop() accountId: string;\n @Prop() authToken: string;\n @State() payments: Payment[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any;\n @Event({\n eventName: 'payment-row-clicked',\n bubbles: true,\n }) rowClicked: EventEmitter<Payment>;\n\n @Watch('accountId')\n @Watch('authToken')\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n };\n\n async fetchData(): Promise<void> {\n if (!this.accountId \|\| !this.authToken) {\n this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n this.loading = false;\n return;\n }\n\n this.loading = true;\n\n const api = Api(this.authToken, config.proxyApiOrigin);\n const endpoint = `account/${this.accountId}/payments`;\n\n const response: IApiResponseCollection<Payment[]> = await api.get(endpoint, this.params);\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info\n }\n\n const data = response?.data?.map(dataItem => new Payment(dataItem));\n this.payments = data;\n } else {\n this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n }\n\n this.loading = false;\n }\n\n getPaymentMethod(paymentMethod: IPaymentMethod) {\n return paymentMethod.card \|\| paymentMethod.bank_account\n }\n\n getPaymentMethodName(paymentMethod: IPaymentMethod) {\n if (paymentMethod.card) {\n return paymentMethod.card.name;\n } else {\n return paymentMethod.bank_account.account_owner_name\n }\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n rowClickHandler={e => {\n const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;\n if (!clickedPaymentID) { return }\n this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));\n }}\n entityId={this.payments.map((payment) => payment.id)}\n columnData={[\n ['Made On', 'The date and time each payment was made'],\n ['Amount', 'The dollar amount of each payment'],\n ['Description', 'The payment description, if you provided one'],\n ['Cardholder', 'The name associated with the payment method'],\n ['Payment Method', 'The brand and last 4 digits of the payment method'],\n ['Status', 'The current status of each payment'],\n ['Payment ID', 'The unique identifier of each payment']\n ]}\n rowData={\n this.payments.map((payment) => (\n [\n {\n type: 'head',\n value: `\n <div>${formatDate(payment.created_at)}</div>\n <div>${formatTime(payment.created_at)}</div>\n `,\n },\n formatCurrency(payment.amount),\n payment.description,\n this.getPaymentMethodName(payment.payment_method),\n this.getPaymentMethod(payment.payment_method).acct_last_four,\n {\n type: 'inner',\n value: MapPaymentStatusToBadge(payment.status)\n },\n payment.id\n ]\n ))\n }\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/payment-method-form.js CHANGED Viewed

@@ -1490,7 +1490,7 @@ const MessageEventType = {
 };
 const name = "@justifi/webcomponents";
-const version = "4.7.0-rc.1";
+const version = "4.7.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/components/index.js";
@@ -1510,10 +1510,7 @@ const files = [
 	"loader/"
 ];
 const scripts = {
-	build: "npm run build:prod",
-	"build:dev": "stencil build --docs",
-	"build:staging": "stencil build --docs",
-	"build:prod": "stencil build --docs",
+	build: "stencil build --docs",
 	start: "concurrently --restart-tries 3 -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"npm run start-stencil\" \"npm run storybook\"",
 	"start-stencil": "stencil build --watch",
 	test: "stencil test --spec",