@justifi/webcomponents 5.4.4 → 5.6.0

package/dist/collection/components/order-terminals/terminal-quantity-selector/terminal-quantity-selector.js

@@ -1,7 +1,9 @@
 import { h } from "@stencil/core";
-import { buttonLink, image, text } from "../../../styles/parts";
+import { buttonLink, card, image } from "../../../styles/parts";
 export class TerminalQuantitySelector {
     constructor() {
+        this.limit = Infinity;
+        this.selectedQuantity = 0;
         this.removeUnit = () => {
             if (this.selectedQuantity > 0) {
                 this.selectedQuantity--;
@@ -14,21 +16,16 @@ export class TerminalQuantitySelector {
                 this.selectedQuantityChange.emit({ modelName: this.modelName, quantity: this.selectedQuantity });
             }
         };
-        this.modelName = undefined;
-        this.imageUrl = undefined;
-        this.description = undefined;
-        this.helpUrl = undefined;
-        this.limit = Infinity;
-        this.selectedQuantity = 0;
     }
     render() {
-        return (h("div", { key: '2d549b468e071dfcf74977101abbc2d87849fceb', class: "rounded shadow-sm card p-2", part: text }, h("div", { key: 'f12c2934cb878a910bbed78c5a355e06470e0376', class: "d-flex gap-3" }, h("div", { key: 'ac4556722561202bdb4b5a6aa394ee5c022ed008', class: "d-flex align-items-center" }, h("img", { key: '95251b4754303b2d89693bfc77611aa78b602bc9', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '01c92c855b6f4f485981daeb38134214fdd1762d', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '427ae984650fe56887f591203348d930a2cf0c49', class: "row" }, h("div", { key: '36749d30ecbc22bd0841fdd128ecec584b2104a5', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: 'd29543ccf91db6947a4fe38113f251be7bc76e39', helpText: this.description })), h("div", { key: '83452b8b227597a83adaad1a64753609cbe02484', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '88e33206b8b2f29858263481c75fdbc13ee687d1', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'a5fb4209f79529560bb253aef077035fa532e1fc', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'a431b869cebc0a53514731ed69de88bdbb63b4c6', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: '5bbf669ab479523290b2d8a9f5b6ec2000ff0f96', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '47ead96654c97aeae6b24058a4f7759918d3d0ad', class: "d-flex gap-3" }, h("div", { key: '3763eda68e7849c87f0e67b905e09267c10481c8', class: "d-flex align-items-center" }, h("img", { key: 'ef0a61d5c1d27c600fd93813b594ec2ec2fadec3', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '5a632f69e2045fbfcd35932af3c5fd027dcca66f', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'be00d142f07945a15e882d2da4c505ffbf67fe88', class: "row" }, h("div", { key: '1c434628ae872d22efa7d2adb611b04868c85eb1', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '21f571a1b0e5ba7d528727f6476e134b9657e124', helpText: this.description })), h("div", { key: 'f4077bfa6beb4f0070bdbf4bd28021f88bcaf5b1', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '7dc6853fb7641b99a9a9ee82dcb3db8fce1d6c01', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'faab14e72773f12f69ea69e855bafb27ef3328b8', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '390e6b4b049fa64e2b7354a3676621844291feb0', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {
         return {
             "modelName": {
                 "type": "string",
+                "attribute": "model-name",
                 "mutable": false,
                 "complexType": {
                     "original": "TerminalModelName",
@@ -47,11 +44,13 @@ export class TerminalQuantitySelector {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "model-name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "imageUrl": {
                 "type": "string",
+                "attribute": "image-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -64,11 +63,13 @@ export class TerminalQuantitySelector {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "image-url",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -81,11 +82,13 @@ export class TerminalQuantitySelector {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "description",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "helpUrl": {
                 "type": "string",
+                "attribute": "help-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -98,11 +101,13 @@ export class TerminalQuantitySelector {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-url",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "limit": {
                 "type": "number",
+                "attribute": "limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -115,7 +120,8 @@ export class TerminalQuantitySelector {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "limit",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "Infinity"
             }

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

@@ -6,10 +6,7 @@ import { StyledHost } from "../../ui-components";
 import PaymentDetailsLoading from "./payment-details-loading";
 export class PaymentDetailsCore {
     constructor() {
-        this.getPaymentDetails = undefined;
-        this.payment = undefined;
         this.loading = true;
-        this.errorMessage = undefined;
     }
     componentWillLoad() {
         if (this.getPaymentDetails) {
@@ -24,7 +21,6 @@ export class PaymentDetailsCore {
         this.getPaymentDetails({
             onSuccess: ({ payment }) => {
                 this.payment = payment;
-                this.loading = false;
                 this.errorMessage = null;
             },
             onError: ({ error, code, severity }) => {
@@ -34,25 +30,28 @@ export class PaymentDetailsCore {
                     message: error,
                     severity,
                 });
+            },
+            final: () => {
                 this.loading = false;
             },
         });
     }
     render() {
-        return (h(StyledHost, { key: '0c171f991fc4dcf840fe076bc116424cc3a87065' }, this.loading && h(PaymentDetailsLoading, { key: 'a5de7e062c82839d908a47c631130a878a3f2d11' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'd215769880123434e0b6bcad24fc3cacc1a1c1c1', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '015128fa7779e3ffe2c8b533004e419451f688bd', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '2ba936ae059994f61b3a1ec9c7698e0ddda4f76f', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '45adc7bad5275e26a4d3ad977fd26eb70992d60a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '4ddb69de4cc522e38a0557b75260da508f8e7b53', title: "ID", value: this.payment.id })), h("div", { key: '47f2ce116914109f25c97419b2342f142e84870e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'a0e3ddeca8335c441b19b21666eaa8a2cb876ab9', sectionTitle: "Details" }), h("div", { key: 'd284226522d77f14243fe1c01e4397a0e07acf79', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '43eea18419c944fbef79c3e22261430299e3c88c', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'fd1defcd7f3b1fb45fb2c196acf334025f691a49', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '00b9c31a516c9efabf0e9146b7f85e948334cec6', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'a3dbaadb65345af971ae2cbd7b9e2270c71ae5b0', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '93d874d02bed9ef2ff30be2f9da815c2364582ba', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '51a2742e4895e74c07205253b96d28cd42ef9e93', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '465262f8f448f1afd75b5e2f3f4f0d7d70aad7ca', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '5b0db9a8f2d96741568e4622cc7495868491226b', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '0643523eefc49aa046cbfc5802cce2070a25e299', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'c3d885b1be787a7800f1d36811647097264e7f26', sectionTitle: "Payment Method" }),
-            h("div", { key: 'da73b925ba2587e8dc1f860bd4d36dda55dd0d79', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '80410dd5c2de2cdb1f8dfc30fb514df972e30721', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '57d05211be0fbddae3e69637d7936576c3fb745f', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '35cae308ec9a99e3202bafe287e9bd08c2e6632d', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9e3c757e1429a600ecf345c0a6cc1b275058c50e', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '3027147373d335045b62ca1a0c94b408e00de733', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '00ba42c81617d9593246956e97b6b962817cc167' }, this.loading && h(PaymentDetailsLoading, { key: '1c0fee27dec985cad2cc7d41f61d137246ffcc3e' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'e264b42451a8966a4e6313486bc9d1ccaea0141b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'af96a0f502cce1be451160e8ac2f92074b0ee168', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '94f876bd62dd9ccaa6f63f25326390b03c9938d5', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '96c629e2d1a99eca277ec7337cb3e00e88c1b31e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '0d18abfae7e9fd0a692ac54640194033a5c36f41', title: "ID", value: this.payment.id })), h("div", { key: '7f9e14d7e0312ba1136cf5734754bf0af6c19774', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'a11b47796dada4f9678487edf19dcd7928b08e94', sectionTitle: "Details" }), h("div", { key: 'fa8a895e037adbbcf5856aae4f40306b789a90c8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '84a8fa2b0dc39aa331501e00a8eb9bf93e8bb8c2', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '632fa4e703aabc7b606b939e95d1633a43fedfaa', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'bc37a80a15fea95932d04676f2c5a8a57276958b', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '588a76203897cd31b9d0c1c8de1b7b9b0b107421', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: 'c0fea24390417c591327c76568829cbf9f9147a9', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: 'e332a896b55bb58f3fd26ee892556acb08ced52d', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '844fdb40ed55ca0e2f848e7325dcb64f134fa5d6', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'dce95b409eb465e8d6373ad80b7b14a0eecc5aca', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'bed2051bd720b1a790ff59b50bee7f01e3fb222a', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '3283ea5236fab75a32fe569ad29d9b70c62b49a0', sectionTitle: "Payment Method" }),
+            h("div", { key: 'b9a0d9cfca791e3afb4a2e1e73b036319191d485', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '15da44c97292af05a14b3f7840b07bdcf34ae953', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'd8a4a431c3e3ab0d14be8992521ee89b5e126a04', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '1a8ed38a316ea943761d2dd7fda58490180ef3bc', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'db695d1b89896a7a73c83fd8a7d5837ad1e69909', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'd94879fb30ac0a05a16ce9ddb199fb5cb003a8c1', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '0506c560ebc7a95fea06a78a50b8589bf9efeca5', sectionTitle: "Payment Method" }),
-            h("div", { key: '57e5656f56aacd0a85fe800a16c6937fef0a6ac1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0ec754633c7e3f676d87c74507f84736e745d119', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '4cd617f0ebb487021819cd44cc7bde54f9bbcf2f', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: 'bb0bf949bfbd774fa1167ff14f824de494e8930c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '807e0e394ea92e44dd549c96d44911f76e1cf4d8', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '44ac1f6ffd7a0c1dc0785c2cd035c21c6c064bf8', sectionTitle: 'Metadata' }), h("div", { key: '3198fa94234aa237447862fd5b2e6f180d0b716a', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '68f75ac2b481f68de6999f2427cafb7debae55b7', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '84dae904db3c22ff5ed03abaeb57d3b0736d1fbb', sectionTitle: "Payment Method" }),
+            h("div", { key: '400801019a53feec0478273866fffa5683b408aa', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ca7bb52e4275659b18daacfa6367de2f32617e70', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '4885d2b5f05b6a713d61074271c7a95b23604dca', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '604ec4efe78a12a1c36d8416c9fdec70351a6dad', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '1ef77a81232e19d1063af9e863f5c9ada183715f', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '1d0a45dd7b7f44b2bad75db9ddb7886b9fc36c9c', sectionTitle: 'Metadata' }), h("div", { key: '364dfb72b9585b672a510b11ecf794c8293ac88d', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1b9254f2f5f81959ea4e190a3a84129d8c54eccd', metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {
         return {
             "getPaymentDetails": {
                 "type": "unknown",
+                "attribute": "get-payment-details",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -69,7 +68,9 @@ export class PaymentDetailsCore {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

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

@@ -7,15 +7,13 @@ import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class PaymentDetails {
     constructor() {
+        this.apiOrigin = PROXY_API_ORIGIN;
+        this.errorMessage = null;
         this.paymentService = new PaymentService();
         this.handleErrorEvent = event => {
             this.errorMessage = event.detail.message;
             this.errorEvent.emit(event.detail);
         };
-        this.paymentId = undefined;
-        this.authToken = undefined;
-        this.getPaymentDetails = undefined;
-        this.errorMessage = null;
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -35,6 +33,7 @@ export class PaymentDetails {
                 id: this.paymentId,
                 authToken: this.authToken,
                 service: new PaymentService(),
+                apiOrigin: this.apiOrigin
             });
         }
         else {
@@ -58,6 +57,7 @@ export class PaymentDetails {
         return {
             "paymentId": {
                 "type": "string",
+                "attribute": "payment-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -70,11 +70,13 @@ export class PaymentDetails {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "payment-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "authToken": {
                 "type": "string",
+                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -87,8 +89,29 @@ export class PaymentDetails {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "auth-token",
+                "getter": false,
+                "setter": false,
                 "reflect": false
+            },
+            "apiOrigin": {
+                "type": "string",
+                "attribute": "api-origin",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "PROXY_API_ORIGIN"
             }
         };
     }

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

@@ -0,0 +1,248 @@
+import { h } from "@stencil/core";
+import { ComponentErrorCodes, ComponentErrorSeverity, pagingDefaults } from "../../api";
+import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { makeGetPaymentTransactions } from "../../actions/payment/get-payment-transactions";
+import { PaymentService } from "../../api/services/payment.service";
+import { Table } from "../../utils/table";
+import { TableClickActions } from "../../ui-components/table/event-types";
+import { table, tableCell } from "../../styles/parts";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { defaultColumnsKeys, paymentTransactionTableCells, paymentTransactionTableColumns } from "./payment-transactions-table";
+export class PaymentTransactionsList {
+    constructor() {
+        this.balanceTransactions = [];
+        this.isLoading = true;
+        this.errorMessage = null;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+        this.apiOrigin = PROXY_API_ORIGIN;
+        this.columns = defaultColumnsKeys;
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPaymentID)
+                return;
+            const transactionData = this.balanceTransactions.find((payment) => payment.id === clickedPaymentID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: transactionData });
+        };
+    }
+    componentWillLoad() {
+        this.transactionsTable = new Table(this.balanceTransactions, this.columns, paymentTransactionTableColumns, paymentTransactionTableCells);
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeApi();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    propChanged() {
+        this.initializeApi();
+    }
+    handleError(code, errorMessage, severity) {
+        this.isLoading = false;
+        this.errorEvent.emit({ errorCode: code, message: errorMessage, severity });
+    }
+    initializeApi() {
+        if (this.paymentId && this.authToken) {
+            const getPaymentTransactions = makeGetPaymentTransactions({
+                id: this.paymentId,
+                authToken: this.authToken,
+                service: new PaymentService(),
+                apiOrigin: this.apiOrigin
+            });
+            getPaymentTransactions({
+                params: this.pagingParams,
+                onSuccess: ({ balanceTransactions, pagingInfo }) => {
+                    this.balanceTransactions = balanceTransactions;
+                    this.paging = pagingInfo;
+                    this.transactionsTable.collectionData = this.balanceTransactions;
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorMessage = error.message;
+                    this.handleError(error, code, severity);
+                },
+                final: () => {
+                    this.isLoading = false;
+                }
+            });
+        }
+        else {
+            this.errorMessage = 'payment-id and auth-token props are required';
+            this.handleError(ComponentErrorCodes.MISSING_PROPS, this.errorMessage, ComponentErrorSeverity.ERROR);
+        }
+    }
+    get entityId() {
+        return this.balanceTransactions.map((transaction) => transaction.id);
+    }
+    get showEmptyState() {
+        return !this.isLoading && !this.errorMessage && this.transactionsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.isLoading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.isLoading;
+    }
+    render() {
+        return (h(StyledHost, { key: 'b011961e9c9b01720fa7964186e477784a7deddd' }, h("div", { key: '074eb86caf8be83e6cdc51ab496564358dafdeb5', class: "table-wrapper" }, h("table", { key: 'cc1453bcba758c6847d593a545918c449219eac4', class: "table table-hover", part: table }, h("thead", { key: '08bbac43b6484ed2f96061153a3d40a2d9f4da7d', class: "table-head sticky-top" }, h("tr", { key: '424dadd8f7686d62fcf3d3222a77c707d6e69985', class: "table-light text-nowrap" }, this.transactionsTable.columnData.map((column) => column))), h("tbody", { key: '3ef6863f785ff73b467f2c48fa91ed1bac57c7e2', class: "table-body" }, h(TableLoadingState, { key: '69da7b5801f492787ec6ce3b10fbd25e9580c0e1', columnSpan: this.transactionsTable.columnData.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'e6ff1509d0a54aaca9fbaa2e5ebd3e83a62ef17c', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnData.length }), h(TableErrorState, { key: '5cd693d69c7dc34807767d18ad97cc1f5fce52fe', columnSpan: this.transactionsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'c8e1ff59e7db5aeb4db84884360e3d9cf71a1552', class: "sticky-bottom" }, h("tr", { key: 'fd0b29ddeb0ed6114904ce4b875618c469349578', class: "table-light align-middle" }, h("td", { key: '340ae8d8132eb66a8c0cae500d708c4174ed5dc7', part: tableCell, colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'a2ea49ba4478b3e22a4587eed3262bc482cfd9b8', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+    }
+    static get is() { return "justifi-payment-transactions-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "paymentId": {
+                "type": "string",
+                "attribute": "payment-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "attribute": "auth-token",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "apiOrigin": {
+                "type": "string",
+                "attribute": "api-origin",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "PROXY_API_ORIGIN"
+            },
+            "columns": {
+                "type": "string",
+                "attribute": "columns",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "defaultColumnsKeys"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "balanceTransactions": {},
+            "transactionsTable": {},
+            "isLoading": {},
+            "errorMessage": {},
+            "paging": {},
+            "pagingParams": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
+                    "references": {
+                        "ComponentClickEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "pagingParams",
+                "methodName": "propChanged"
+            }, {
+                "propName": "paymentId",
+                "methodName": "propChanged"
+            }, {
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }];
+    }
+}

package/dist/collection/components/payment-transactions-list/payment-transactions-table.js

@@ -0,0 +1,45 @@
+import { h } from "@stencil/core";
+import { convertToLocal } from "../../utils/utils";
+import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
+export const defaultColumnsKeys = 'created_at,type,id,amount,balance';
+export const paymentTransactionTableColumns = {
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time each transaction was made" }, "Processed On")),
+    type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of each transaction" }, "Type")),
+    id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of each transaction" }, "ID")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The dollar amount of each transaction", class: "text-end" }, "Amount")),
+    balance: () => (h("th", { part: tableHeadCell, scope: "col", title: "The running total amount of this payment that belongs to you", class: "text-end" }, "Balance")),
+    currency: () => (h("th", { part: tableHeadCell, scope: "col", title: "The currency of each transaction" }, "Currency")),
+    financial_transaction_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the financial transaction associated with the payment balance transaction" }, "Financial Transaction ID")),
+    payment_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the payment associated with the payment balance transaction" }, "Payment ID")),
+    payment_balance_txn_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of the payment balance transaction" }, "Transaction Type")),
+    source_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the source object associated with the payment balance transaction" }, "Source ID")),
+    source_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of the source object associated with the payment balance transaction" }, "Source Type")),
+};
+export const paymentTransactionTypes = {
+    ach_return: "ACH Return",
+    ach_return_fee: "ACH Return Fee",
+    dispute: "Dispute",
+    dispute_fee: "Dispute Fee",
+    dispute_fee_refund: "Dispute Fee Refund",
+    dispute_refund: "Dispute Refund",
+    payment: "Payment",
+    payment_fee: "Fee",
+    refund: "Refund",
+    fee_refund: "Fee Refund",
+    application_fee_returned: "Application Fee Returned",
+    refund_failure: "Refund Failure",
+    void: "Void",
+};
+export const paymentTransactionTableCells = {
+    created_at: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(balanceTransaction.created_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(balanceTransaction.created_at, { showTime: true })))),
+    type: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, paymentTransactionTypes[balanceTransaction.payment_balance_txn_type])),
+    id: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.id)),
+    amount: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index), class: "text-end" }, balanceTransaction.formattedPaymentAmount(balanceTransaction.amount))),
+    balance: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index), class: "text-end" }, balanceTransaction.formattedPaymentAmount(balanceTransaction.balance))),
+    currency: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.currency)),
+    financial_transaction_id: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.financial_transaction_id)),
+    payment_id: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.payment_id)),
+    payment_balance_txn_type: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.payment_balance_txn_type)),
+    source_id: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.source_id)),
+    source_type: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.source_type)),
+};

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

@@ -8,6 +8,10 @@ import { table, tableCell } from "../../styles/parts";
 import { TableClickActions } from "../../ui-components/table/event-types";
 export class PaymentsListCore {
     constructor() {
+        this.payments = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
         this.handleClickPrevious = (beforeCursor) => {
             this.pagingParams = { before_cursor: beforeCursor };
             this.clickEvent.emit({ name: TableClickActions.previous });
@@ -23,14 +27,6 @@ export class PaymentsListCore {
             const paymentData = this.payments.find((payment) => payment.id === clickedPaymentID);
             this.clickEvent.emit({ name: TableClickActions.row, data: paymentData });
         };
-        this.getPayments = undefined;
-        this.columns = undefined;
-        this.payments = [];
-        this.paymentsTable = undefined;
-        this.loading = true;
-        this.errorMessage = undefined;
-        this.paging = pagingDefaults;
-        this.pagingParams = {};
     }
     updateOnPropChange() {
         this.fetchData();
@@ -88,13 +84,14 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '7650bc8c64b4b727048b748bb899b534159c2ecd' }, h("div", { key: 'ebf919d213a280adea8852c33c53314db3d73279', class: "table-wrapper" }, h("table", { key: '618a5113b68901bef3df0aed342e8cc6e76f672d', class: "table table-hover", part: table }, h("thead", { key: '4978a6a0572f228ce0b67aed63c0123f3c13251a', class: "table-head sticky-top" }, h("tr", { key: '875633307c439d239ed9ff6c9eae5f414729b4fc', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '030a7ab7d92337fa4ee74d206e4a48c79f6eae4d', class: "table-body" }, h(TableLoadingState, { key: '6b3a71f087ac93c2b6487043d1624518b01d7370', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '51a90cd22acfdf55b0c351e6b7f2b1b7e1f156d0', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '47367183f197a6eafe761ac478a435bba5f9f6d6', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '2ca665dbc33b954145cedba2d75e98a3d45ff85f', class: "sticky-bottom" }, h("tr", { key: 'a7ecd6b390fdb960c589e2c463d354afe7b29100', class: "table-light align-middle" }, h("td", { key: '74f32baddb41ff3ca04b2199b1a5d75189fb406e', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '123f359c4a1948ee0189e49b163520d5858936ec', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '83f0460f5b465e1414e4a88dc113fc7155d4decb', class: "table-wrapper" }, h("table", { key: '2a42ee9579d589a667172ea9f97e510029b87bdf', class: "table table-hover", part: table }, h("thead", { key: 'bd4bfb3c9d022f8187925d040316020426efdc18', class: "table-head sticky-top" }, h("tr", { key: '7bc4c05aa456cef8fdf9cec435937a6ee447cf2e', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'c09c5a55310da7506b183914d16dd76d5336c275', class: "table-body" }, h(TableLoadingState, { key: '410e7e5b13049436d24a3d4c830c174264b4d802', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '4461a05a8812955cc9673699b9f26decbfbe3197', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'c49e3e5fadc0b889908e7420a0c3547879cc5af8', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'f6266d84bc0ff50ed9ce7bf0af7016f48e1d57dc', class: "sticky-bottom" }, h("tr", { key: '496fe22cdbaa38becf40402425e9f507625d52b3', class: "table-light align-middle" }, h("td", { key: 'bdd620cd38377ffdcace7b7b810e0379cd089d0b', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '5dab0663b6cf408b88c43177822b01969fd0b2d5', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {
         return {
             "getPayments": {
                 "type": "unknown",
+                "attribute": "get-payments",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -111,10 +108,13 @@ export class PaymentsListCore {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "columns": {
                 "type": "string",
+                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -127,7 +127,8 @@ export class PaymentsListCore {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "columns",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };