@justifi/webcomponents 5.4.3 → 5.5.0

package/dist/collection/components/order-terminals/order-terminals.js

@@ -16,10 +16,6 @@ import { makeOrderTerminals } from "../../actions/terminal/order-terminals";
 import { formatPhoneNumber } from "../../utils/utils";
 export class OrderTerminals {
     constructor() {
-        this.addressHeader = this.shipping ? "Shipping Address:" : "Business Address:";
-        this.businessId = undefined;
-        this.authToken = undefined;
-        this.accountId = undefined;
         this.shipping = false;
         this.apiOrigin = PROXY_API_ORIGIN;
         this.submitButtonText = 'Submit Order';
@@ -29,10 +25,6 @@ export class OrderTerminals {
         };
         this.submitting = false;
         this.error = null;
-        this.business = undefined;
-        this.terminalModels = undefined;
-        this.orderLimit = undefined;
-        this.order = undefined;
         this.totalQuantity = 0;
     }
     componentWillLoad() {
@@ -121,7 +113,7 @@ export class OrderTerminals {
     renderBusinessDetails() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!this.loading.business && this.business) {
-            return (h("div", { class: "d-flex flex-column gap-4 mb-5 pt-5" }, h("div", { class: "row" }, h("div", { class: "col-12" }, h("h2", { part: heading4 }, this.business.legal_name))), h("div", { class: "row" }, h("div", { class: "col-6" }, h("h5", { part: heading5 }, "Representative:"), h("div", null, h("div", null, (_b = (_a = this.business) === null || _a === void 0 ? void 0 : _a.representative) === null || _b === void 0 ? void 0 : _b.name), h("div", null, (_d = (_c = this.business) === null || _c === void 0 ? void 0 : _c.representative) === null || _d === void 0 ? void 0 : _d.title), h("div", null, (_f = (_e = this.business) === null || _e === void 0 ? void 0 : _e.representative) === null || _f === void 0 ? void 0 : _f.email), h("div", null, formatPhoneNumber((_h = (_g = this.business) === null || _g === void 0 ? void 0 : _g.representative) === null || _h === void 0 ? void 0 : _h.phone)))), h("div", { class: "col-6" }, h("h5", { part: heading5 }, this.addressHeader), h("div", null, this.business.legal_address.line1, this.business.legal_address.line2 ? `, ${this.business.legal_address.line2}` : "", h("br", null), this.business.legal_address.city, ", ", this.business.legal_address.state, " ", this.business.legal_address.postal_code)))));
+            return (h("div", { class: "d-flex flex-column gap-4 mb-5 pt-5" }, h("div", { class: "row" }, h("div", { class: "col-12" }, h("h2", { part: heading4 }, this.business.legal_name))), h("div", { class: "row" }, h("div", { class: "col-6" }, h("h5", { part: heading5 }, "Representative:"), h("div", null, h("div", null, (_b = (_a = this.business) === null || _a === void 0 ? void 0 : _a.representative) === null || _b === void 0 ? void 0 : _b.name), h("div", null, (_d = (_c = this.business) === null || _c === void 0 ? void 0 : _c.representative) === null || _d === void 0 ? void 0 : _d.title), h("div", null, (_f = (_e = this.business) === null || _e === void 0 ? void 0 : _e.representative) === null || _f === void 0 ? void 0 : _f.email), h("div", null, formatPhoneNumber((_h = (_g = this.business) === null || _g === void 0 ? void 0 : _g.representative) === null || _h === void 0 ? void 0 : _h.phone)))), h("div", { class: "col-6" }, h("h5", { part: heading5 }, this.shipping ? "Shipping Address:" : "Business Address:"), h("div", null, this.business.legal_address.line1, this.business.legal_address.line2 ? `, ${this.business.legal_address.line2}` : "", h("br", null), this.business.legal_address.city, ", ", this.business.legal_address.state, " ", this.business.legal_address.postal_code)))));
         }
     }
     renderTerminals() {
@@ -133,7 +125,7 @@ export class OrderTerminals {
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: 'e41920bc976c976932d5abdbb2da088a0e35a9f3' }, h("div", { key: '5237d2dcb456ee143f75b5562cf655ed695ab0e8', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: 'b56073a8c5df425a77c0e322a855c41a820b848b' }, h("div", { key: 'f714b27a51bd21a58d20088016cfa3fabb6659b2', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }
@@ -141,6 +133,7 @@ export class OrderTerminals {
         return {
             "businessId": {
                 "type": "string",
+                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -153,11 +146,13 @@ export class OrderTerminals {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "business-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "authToken": {
                 "type": "string",
+                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -170,11 +165,13 @@ export class OrderTerminals {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "auth-token",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "accountId": {
                 "type": "string",
+                "attribute": "account-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -187,11 +184,13 @@ export class OrderTerminals {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "account-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "shipping": {
                 "type": "boolean",
+                "attribute": "shipping",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -204,12 +203,14 @@ export class OrderTerminals {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "shipping",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "apiOrigin": {
                 "type": "string",
+                "attribute": "api-origin",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -222,12 +223,14 @@ export class OrderTerminals {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "api-origin",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "PROXY_API_ORIGIN"
             },
             "submitButtonText": {
                 "type": "string",
+                "attribute": "submit-button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -240,7 +243,8 @@ export class OrderTerminals {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "submit-button-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'Submit Order'"
             }

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: 'b1beb8bf42e51a46170d968a773f44a5ad70d192', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: 'd577a7dcb6f065dc2e9f4ae62213dc140f3c5332', class: "d-flex gap-3" }, h("div", { key: 'c6c2a3ad7548af6f2a97d1961fe936b6a11931fd', class: "d-flex align-items-center" }, h("img", { key: '34389c41c40e9665abb781ab71de2e02ad57756d', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '598e28694854767c98fe89a3516fbdc980dc6365', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '66dcdb30e300a5f79a807911bd167bb4b3c3cc57', class: "row" }, h("div", { key: '683b9eb30c4a5bff878551f2f22309a3615941ab', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '4446db6e9f9f2a1557b1693e2f92a0493a1851df', helpText: this.description })), h("div", { key: 'c425f4dc3df14a697739d8a8fe98d890dc8abcb8', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: 'edb7d30cd3e583a482671f17d36b4974f842ec1a', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '484e27c0b4ceb8c50ee09bc7bf74b8b681a397ae', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'd6d39955ab4705d157c25a4bcfa7f67edc02a3ee', 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: '6c6d4c1944655b7ef98605f6f8a4f827bc8634df' }, this.loading && h(PaymentDetailsLoading, { key: '95e2c50f26884542cc0b7c2751a795b25ebc427a' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '6a88471b5b00d282c2ca11e5c651d4bf1f73d533', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'c7f441da3722aab3a022fe4ae395e1fd84512d2f', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: 'd173a2178f4323801790b705632804920fa4a25b', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '6d170aa5a8da7693807571433000342e4107efe8', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'fb3386eaa1cb9128dea10fd4b33c65eab2c00a31', title: "ID", value: this.payment.id })), h("div", { key: '6ee8fc00a0d22c27460900c4e854c2d6bb2127c2', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '5d15d0eacc9ba08db6cbd49e42c56d249eda9d2c', sectionTitle: "Details" }), h("div", { key: '1d9c1980fa1f771f4b2e6498582cb33ae5b3f0f2', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'd492ab80dedc1b8da82da5d7d4c27724aaf71144', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'f77a002fed17be11e28b636ed7e69ed4afb3b158', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'c1e7fadb89586e4adf8e7094cc3ea20f447cd2f5', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'eb2ea81491557f0a45ece5cdef706aaeb3b933cf', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '42e5aa97bf59223ad8bfe8f68c74baa5ff2ab8b9', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '3143407816860e5174f15fccbd9d379b65bd7ea9', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '5d63b760f25736f838aafe478e601e51d0db6792', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'c8aaca658cbef97146307f3f517d1122abe1106f', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '95bef3fe28e0370e8a7d5e4d32d6f86925188132', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '72a4a1c0d6612f437dce1b98609491c4d7983198', sectionTitle: "Payment Method" }),
+            h("div", { key: '5b420f9f45eded927b062b218c8e049cd325597c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '265f90b4184492bbbdfdd3a146cb69fe2bd7bde0', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '4cd08a2bd200576e04b1802304be38e39cf320aa', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '9618c6b0ff0823d48c86bae538e207096fc3f7ce', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'c9ae3d23296fe3ed1cfea0138165570a15111929', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '3284de2e6a6b39d5b38d1ecd6753cdec09f9b20f', 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: 'cd5a23e6ea98b026b9461963c7448df11461ed16', sectionTitle: "Payment Method" }),
+            h("div", { key: '315bea1f8b0d24fc0403328c44124b5210e4d068', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '036c1e1be093e303fa80999f437c92a2200dce7a', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'a35d0f9ca8771cb76bb3d6ac65ca604742896023', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '8a981d79ce65d5b3936a2fe4c7f2d0759627500c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '9b123abe36f38d66eb7e4dacc1a73e58d6b03305', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: 'e8cdca72a94f04208acb36b444b70d31bad38978', sectionTitle: 'Metadata' }), h("div", { key: '662f7fd2cbab2a5574359957fcbab772e3f3f429', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '0d5a67e7290a79c9f5236780254d4eb32a1516af', 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/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: 'f86d52669c90effcd3d9d53f6de3d968c7e0e5b8' }, h("div", { key: 'c550036e844e432b64d28fd7fe126bbb4201e30d', class: "table-wrapper" }, h("table", { key: '17789379d288ad3fad03fb74b2a230563f891ebe', class: "table table-hover", part: table }, h("thead", { key: '8dbc48e378bb5f0d2bced430709156c944502dbf', class: "table-head sticky-top" }, h("tr", { key: '1d1d84f81bfe1a8f8cb7eafd9faedaed8cef5895', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '0700177245ac7d6a6d631410957a71f259922dad', class: "table-body" }, h(TableLoadingState, { key: '055582e228ec1f955bb5a136f17801711f9fc4eb', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '061f7fed30e4c5337dc0608bf5674c5d25918348', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '9c011ecc196eb30da5b78c8b365d96af2b041a5b', 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: '2518be1d8d308549a1c531ff87760b279fdaeea1', class: "sticky-bottom" }, h("tr", { key: '81b14b10f51177f45b71aa5bdb39109e2b02214f', class: "table-light align-middle" }, h("td", { key: '9e61c80405503b5e1e78eb946e099d57fe9685c7', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'ce881fdc8fc0b5a1ce50eea97f9adc8237f9a880', 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
             }
         };

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

@@ -13,11 +13,6 @@ export class PaymentsListFilters {
             const utcDate = convertToUTC(value, { setExactTime: true });
             this.setParamsOnChange(name, utcDate);
         };
-        this.paymentId = undefined;
-        this.terminalId = undefined;
-        this.paymentStatus = undefined;
-        this.createdAfter = undefined;
-        this.createdBefore = undefined;
     }
     componentWillLoad() {
         // debounced input handler for text input
@@ -48,8 +43,8 @@ export class PaymentsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'c213f44219409851784f62f38932d6165e933e2a' }, h("table-filters-menu", { key: 'b0f67131ad7812cf51e475809c4e6b1d57577cf1', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '8d259cfe28fdeb67096383c317392f99642b4266', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a593eae6541085b1d2ad46e8fac7a5e53c11c38e', class: "p-2" }, h("form-control-text", { key: 'a32b07e6635bbc31c2ca11e91cd3f95edf558cb1', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '989e3f4d1f48549210e982e2c55329841bdd1926', class: "p-2" }, h("form-control-text", { key: 'a54152f1052642448ccd1e50561af65c32d976bf', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: 'f5d484ca692420c508c8c33392a73ed84544ab97', class: "p-2" }, h("form-control-select", { key: '1f8d609f065cae6830b28ce268fb299eff9bf549', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '8db078f3a5272b61f3843119b4da4344df70e02d', class: "p-2" }, h("form-control-date", { key: '6e20e715d77f116f93484d417a0ac1c95d0e9a5e', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '5a011a17767ad4cfd89a40b0f3d77ec92df433b3', class: "p-2" }, h("form-control-date", { key: '5064f46b779239aabc5d0fcb11479634e14e050d', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '0f60343035418f02bfb4c5a334281035cc572957' }, h("table-filters-menu", { key: 'f3fbf51df04aab4de27aec6c16b1154a9c68cf89', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: 'f16d287033fcd5738a248c46f055ca880afa100d', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'c732920f08adcc06e730bc37989dfab19ab1ca70', class: "p-2" }, h("form-control-text", { key: 'd627c54541b7ef5d18047eeeb1d123974903a7b4', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '9d0808c36388cd9e6d44ad911ce2b35c8ef3d481', class: "p-2" }, h("form-control-text", { key: '75bd80ea108dfd17260a494fb616c4b59c9a6d17', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '67d9241d539eb9dbde85b36d2b46c03557988aac', class: "p-2" }, h("form-control-select", { key: '6cc1f7f8d660d6d7dd71231c0fadcd487dec598d', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '286c868036528e6c0d8d57eba384a1cbf7e9fe46', class: "p-2" }, h("form-control-date", { key: '74507753f003841539d9b6c4e233428d8cdef85e', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: 'd028a802f375b553e7504dfaec3232af5b3d7849', class: "p-2" }, h("form-control-date", { key: '3f4f89061c6f50b38aaab0d950b8bd6ed53e1290', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }
@@ -58,6 +53,7 @@ export class PaymentsListFilters {
         return {
             "paymentId": {
                 "type": "string",
+                "attribute": "payment-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -70,11 +66,13 @@ export class PaymentsListFilters {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "payment-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "terminalId": {
                 "type": "string",
+                "attribute": "terminal-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -87,11 +85,13 @@ export class PaymentsListFilters {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "terminal-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "paymentStatus": {
                 "type": "string",
+                "attribute": "payment-status",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -104,11 +104,13 @@ export class PaymentsListFilters {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "payment-status",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "createdAfter": {
                 "type": "string",
+                "attribute": "created-after",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -121,11 +123,13 @@ export class PaymentsListFilters {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "created-after",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "createdBefore": {
                 "type": "string",
+                "attribute": "created-before",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -138,7 +142,8 @@ export class PaymentsListFilters {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "created-before",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };