@justifi/webcomponents 4.17.0 → 4.18.0

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance-core.js

@@ -1,6 +1,7 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { formatCurrency } from "../../../utils/utils";
 import { insuranceValues, insuranceErrors, validateInsuranceValues } from "../insurance-state";
+import StyledHost from "../../../utils/styled-host/styled-host";
 export class SeasonInterruptionInsuranceCore {
     constructor() {
         this.checkoutId = undefined;
@@ -25,9 +26,7 @@ export class SeasonInterruptionInsuranceCore {
         return validateInsuranceValues();
     }
     componentWillLoad() {
-        console.log('### componentWillLoad');
         if (this.getQuote) {
-            console.log('### fetching data');
             this.fetchData();
         }
     }
@@ -97,19 +96,19 @@ export class SeasonInterruptionInsuranceCore {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '639f1c1451fb4e790fe510345e7260975b67a393' }, !this.isLoading &&
-            h("div", { key: '1d72430a8ce8407c9ff2be3ee10dd37e9055adc5' }, h("h2", { key: '68f9f7044f586240699fadbb98b662947a78ae78', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: '0cdc4d3cec9dd78c1700c96dcb91913f3ec5bffb', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: 'ea84def1c420f63217686d8f1c1ab745b2e11225' }, h("input", { key: '72399093d1caaaadb0f2889fa257b45b98cca4cf', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'c3fea13863a81a0ca666c67cd44e80a2cc734cad', htmlFor: "accept", class: "btn btn-outline-primary jfi-btn-radio-label" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '4e22ffbf216eeefdb57c6fdc013aa7ce7c4bf6c8' }, h("input", { key: '33ea76c2f7393e8a7d6aa55d890fa393e7253a68', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '1193479577bd98c5e02053c190d300e976f8c880', htmlFor: "decline", class: "btn btn-outline-primary jfi-btn-radio-label" }, "Decline coverage")), h("div", { key: '05a9e01a2853a9d94df220b98afd7c310c3f5ebc', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: 'dd328e16d7584ccb5e36743fb059bbeb7e2d5b14', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
+        return (h(StyledHost, { key: '0be38bd7c1f08be48d5347a3a0362ea3871d41bc' }, !this.isLoading &&
+            h("div", { key: '277a315ceba771959b1133b7cfc734e1d000325a' }, h("h2", { key: '34e5984345ec9300ca13327340b474f596c8b378', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: 'c428d4a485e449d1b7dc0eb7fe586d3927d4ea3f', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '8c55f87d401c2f438de4725cf6023ebd6d2e0276' }, h("input", { key: '6c0a57e4de37607948de68d41afbe24639ca59dd', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'aaede6dee33658ba36a14b2bcaf2c6a2320e4c2f', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '839e12e3f207b0ce32788f5da81b097ae80d55bf', class: "mb-2" }, h("input", { key: '15bafd8a8ad1601d2c69eed86ff6a2256fb79959', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '00b328473f2a44bed3e22f7746dc83596e449008', htmlFor: "decline" }, "Decline coverage")), h("div", { key: '48e00af5825cd476329b591a906afa818bedc6d4', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '4196d6073a8d0e96ed3de4bcb8a77acd4241a5ab', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
     }
     static get is() { return "justifi-season-interruption-insurance-core"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["season-interruption-insurance-core.scss"]
+            "$": ["season-interruption-insurance-core.css", "../../checkout/form-check-input.css", "../../checkout/header.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["season-interruption-insurance-core.css"]
+            "$": ["season-interruption-insurance-core.css", "../../checkout/form-check-input.css", "../../checkout/header.css"]
         };
     }
     static get properties() {

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance.js

@@ -25,7 +25,6 @@ export class SeasonInterruptionInsurance {
         return this.seasonInterruptionCoreRef.validate();
     }
     componentWillLoad() {
-        console.log('### componentWillLoad ins season interruption');
         this.initializeServiceMethods();
     }
     initializeServiceMethods() {
@@ -47,7 +46,7 @@ export class SeasonInterruptionInsurance {
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: 'fc932dc338e0fe28348d3cb24701d46315199ea1', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '8401ef19ea5bf566b9ef3f678382271173332421', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
     static get is() { return "justifi-season-interruption-insurance"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,26 +6,15 @@ export class PaginationMenu {
         this.params = {};
     }
     render() {
-        return (h(Host, { key: '62a40b19e7bbff01d8fea8ae5fbe5f1012738bd8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: 'c438f649a6653cc2828b1e537ef30b29e16282e2', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '66861f47d96322616cc62ae928779e4330406218', class: "pagination m-0" }, h("li", { key: '78806f5a6e3413a22d47689fa80a02bf35f48d15', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: '1474a484905df0849aed63c4e83945901fe4d962', href: "#", class: "page-link", onClick: (e) => {
+        return (h(Host, { key: 'e0211a01fc44ec29eec8085f31055c060f77f56f', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '191b1603b6cc559d3ef0cf45a37074e41513ea5a', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '775613b2ce03a1bc6a8abf5c918d099e13ac06d2', class: "pagination m-0" }, h("li", { key: 'cf7fef25e80e446688f31f13236c3e71a1378aef', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'bb671bda6ab5f6921d34c7fdf5b33a62bc076154', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'c5dad043936ad6815bcfc1d7855a5edbcc1a9753', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: '1cb11a6470b14f355e45b115f72be1bec8ba9f5e', part: "page-button-text" }, "Previous"))), h("li", { key: 'b44e95865be4005de0a84f4685bba5da4be5e071', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '9e3757a4fb8b282bbf1167e28d4a5940a60feeb7', href: "#", class: "page-link", onClick: (e) => {
+            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'da88de236d134f950a48d9a1d2ebf70742e80788', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: '9ae148f746d5d04fcaf4981b0f1aa3d7fc1b509d', part: "page-button-text" }, "Previous"))), h("li", { key: '7340b9d89574c9c95b15fd50f3444aacdbb4c496', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '827e68669eeb7b83a28185312108adde796a331e', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: '448bd361bb8af168152fa59e7cb633b8ffa25087', part: "page-button-text" }, "Next"), h("span", { key: '2aa556fac6d716c40abf0a049d752e7bccafbf58', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
+            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: '29ce5f0e9ae4b19d3116ac6bd883c52168c5fbb8', part: "page-button-text" }, "Next"), h("span", { key: '2d58cffc46031c9db1ad7c4b061730bc083dded8', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
     }
     static get is() { return "pagination-menu"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["../table/table.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["../table/table.css"]
-        };
-    }
     static get properties() {
         return {
             "paging": {

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

@@ -1,7 +1,8 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Api, PaymentBalanceTransaction, pagingDefaults, } from "../../api";
 import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable, } from "../../utils/utils";
 import { config } from "../../../config";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class PaymentBalanceTransactions {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
@@ -51,7 +52,7 @@ export class PaymentBalanceTransactions {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'b1280a1b4c01852333d7f7786c441556b2be7704' }, h("justifi-table", { key: 'eecf276d17dcf70cb6b52a1756d5699e90b11ea8', columnData: [
+        return (h(StyledHost, { key: 'ec76a5bb9d5222491facd9bea6bf5f3c404bb5c4' }, h("justifi-table", { key: 'bfecb9c52a10750e01b2cc82dd5d558cf4e83081', columnData: [
                 ['Processed On', 'The date each transaction occurred'],
                 ['Type', 'The type of each transaction'],
                 ['ID', 'The unique identifier of each transaction'],
@@ -69,17 +70,6 @@ export class PaymentBalanceTransactions {
             ]), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
     }
     static get is() { return "justifi-payment-balance-transactions"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payment-balance-transactions.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payment-balance-transactions.css"]
-        };
-    }
     static get properties() {
         return {
             "accountId": {

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

@@ -1,6 +1,7 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class PaymentDetailsCore {
     constructor() {
         this.getPaymentDetails = undefined;
@@ -37,26 +38,16 @@ export class PaymentDetailsCore {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bd8ae58c2bdc531eaf600ee1496cd7c83e08e65e' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '63b8181d5ee4bf0de531ce03db9246ed6ae0fb0a', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '8081e264446dad39ddfc047f532ee6c14132b479', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '9dff116d0a3d458cded839834c1709082064c59b', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '8e3cf65ddc5200d9c53acee5c612512f82313439', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'e290ebaee2819eb9028b59dbd8999aa9aa1f633a', title: "ID", value: this.payment.id })), h("div", { key: '9450cfae9e007c9ee51e5afdfe528ddde0b0f20c', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'aa7e4d50f0e5f9c018c6b992b37c72d77bdc13c5', sectionTitle: "Details" }), h("div", { key: '427c2d09562f414f4addc4be7a888c737974aa4e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '56d1a94073dfd1d188c2ffaae3a04718c49ba7e4', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'a43806e99a08c291b0d9549c1e190be3f1ab859e', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1aac77568d812bfc0c59dbe32de7057c91e84c77', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'b872e82bc21f8861420a88acaa17fcf21242f8cc', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '4938fd45955e365069699f02520315e2ca644141', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: 'df86a116579d10f6fb881d7aa6b5df09e0fbbb3f', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '9cdda05db1f2fd2de06efb49dcd91cc04a4bcd6f', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'e85406a153ab40873a32ce80d915b4985bd265ec', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '5d73dfa6965e6f10c2cce84538e8ff6652267525', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'bd668c1a85d1b70e13ea72f2aa1ce507900b8282', sectionTitle: "Payment Method" }),
-            h("div", { key: '5d48d49397c47b72ebad7acccce02fe8668a036b', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f126c5c16e80236e14daf9cf08cec9f87e90b0c3', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '6c067dc28b2927f4154da58aaedc020458c865a9', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'a270e68e938e00bfbb0ff8ceeb7146b5067c14a8', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9fb53acc8b99e50e7a512fa6386251e30218bfd2', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'fedeaed5473baabd39571bf4ae85811e5ee6b7a1', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: 'b0a4e021ebaf00cf1750c7d40510aa9754bc622b' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '5b7858536120f8a1d3016f1f110f51e6b8605f3e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '93db7fd2d30fb1ef0099e58fd6d90e703f921c44', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '6c1b97d494b92618092710986ff6cbfb4c183cad', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '1ef1fe7899d47959bb3ce8dbe511222cc69185ef', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'd0a12d9abfc6d4c71249af65cef35902554cc3a7', title: "ID", value: this.payment.id })), h("div", { key: 'b12d205fb50d310525045261967a383e93458cb3', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'cdcae0f279389849946017963762c9a1294204ee', sectionTitle: "Details" }), h("div", { key: '91693665801878a7b87729412a10469dac21130d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'c58427d3a5543caa9f83fe62dca71612c92a200e', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'd6a0b3df90839ad1fdd34058f3582482a9eb1b20', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '6c08a4a3bcc7d6bf726959b451e3231598d7e920', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '4d2d8d897cd0d5a4be06b44741cf85366eebe9af', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'b3df303d6c12b1327b3f20245c3c50657eb422f8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6a535b4f0c91fb37077e09912e4fa3c1d333db48', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '982514de79780e97b0aa3f120d7fcc11b51301ac', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '967e82d6fe2bcf55110e6881811d38af9ea63c17', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'bee37b7e5b7c22f0ec596104097c1408284c5ac1', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'da950a7706cf51aa72eeff3faedfb00fa824075f', sectionTitle: "Payment Method" }),
+            h("div", { key: 'c8ab64e8f0021fcfe4ce5e7a9bac9d867e3aa650', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '70ebccad09e67f53b13673d1f2d19c6438053ac5', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '1cbdb8b281b70a600568d7b82499084695c6a48a', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'd9696130b92a28560d2a437996d53d3ba6df39ec', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'e93b235819d5b6386ea6f6283f21da7442fd4661', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '9ba28b4b099b775cc4f77cff13c74295b12fdfd4', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'a7f9afc09d110fb8bb9eb7b186d853502691cd18', sectionTitle: "Payment Method" }),
-            h("div", { key: '11cc2b588e33d76994daac92e7ed38c410e73354', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9eae0589fac515298613ad8eaf63733de0f87df8', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '15e1c30ff5dd7f47739f93bb7e55cb3d01dbe874', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '7b8694aec9a33412cc923039f4f5c2dd6c8e3582', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'cc4ea781cb71b7bad5ab8070c23b8a7613785ec6', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '32d72a16d74b4f2c86375ee441ad3c37649a8dd4', sectionTitle: 'Metadata' }), h("div", { key: 'f8ba0111eb568c65c3c7f2c980dea5dbaa29feea', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b687420b7b51d0254bf08f423ce661fbf1805d36', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '4f046825e2eeef87ddb614b6eca623fca187b0d3', sectionTitle: "Payment Method" }),
+            h("div", { key: 'b8a01fdd5596adafa252b4fd67df2e30c2e34990', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcd3c8418ebd465812c1dd1fb9b5559ce79e2855', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '86246e11c8c494beb3f2571650f8d78e33b8dbae', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'd3cd7eec7d55ae90d0fd4bc55fad73add0d6d88c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '43d7a0b7e37172da32aff94fe01877a32491fba8', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: 'd59695a94c44c10615020313be585c0e69374e1c', sectionTitle: 'Metadata' }), h("div", { key: '984dd0d2d0bd5c816dd7098b4e8eebf19e2ebf70', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b2d8cf824ae9aba9d714e688fddbf14a8fdd92d6', metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payment-details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payment-details.css"]
-        };
-    }
     static get properties() {
         return {
             "getPaymentDetails": {