@justifi/webcomponents 4.17.0 → 4.19.0-rc

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 "../../../ui-components";
 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: '7b1384ddbc83b5f92d3a2c4f8e544c8bd06fa716' }, !this.isLoading &&
+            h("div", { key: 'd94a61158ceb79c30d81ee5186195d3454c01323' }, h("h2", { key: '05d5b1499cf7de28823ec98ebd2c220eca7471f1', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: 'fa26cf97a06a9910d7f4cb04d149bbcd9f30d103', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '287de8ed4ca603b3162b4158d18d7e8a53e3b453' }, h("input", { key: '59adbc8ac892e572bc1aa68f3c626beab76af282', 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: '469ac2622be0c76564de8102a499d3d3790380b2', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '7a8827c4261d5978ecca31fc42397f233b3e37fc', class: "mb-2" }, h("input", { key: 'e25994c491ca5d74d20ec5f5787ff88ee9575ca0', 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: '0a5f13213a19e13258c72ccbbe7a2e148daf1750', htmlFor: "decline" }, "Decline coverage")), h("div", { key: '33a190aa52dfefd6accf77a9e00598563a8f5e6c', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: 'f10e4ebd9a896fc792bb3d18d6014100013cb0b7', 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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { InsuranceService } from "../../../api/services/insurance.service";
 import { makeGetQuote, makeToggleCoverage } from "../insurance-actions";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../api/ComponentError";
+import JustifiAnalytics from "../../../api/Analytics";
 export class SeasonInterruptionInsurance {
     constructor() {
         this.authToken = undefined;
@@ -25,9 +26,12 @@ export class SeasonInterruptionInsurance {
         return this.seasonInterruptionCoreRef.validate();
     }
     componentWillLoad() {
-        console.log('### componentWillLoad ins season interruption');
+        this.analytics = new JustifiAnalytics(this);
         this.initializeServiceMethods();
     }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
     initializeServiceMethods() {
         if (!this.authToken) {
             this.errorEvent.emit({
@@ -47,7 +51,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: '256d45d39c5d297abb7f955229b0e0e9fbc9504a', 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: '645df5028861aa714a814f908ccace8dcd0986f8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '6cb86ce01c625db9c31204f63258570f8a5d0a0f', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '7ffb5771a1c51553d64735721b937e53c699949d', class: "pagination m-0" }, h("li", { key: 'b439c2f7fe81ccdfa29670a6fc04715681ed5ab3', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'dc59152e834a3076f09304f6fcd0195058ebefec', 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: 'fc640fb9ae2ca672bfed89d23c5641cb346c673d', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: 'fb6fcd31ebd4d194b37f53a071537133b8c4d369', part: "page-button-text" }, "Previous"))), h("li", { key: 'b10e12ec7bc4a89cd897e868ec7b303c62599cd3', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '51f91eb7cfef91dcbcfd9f11522213308bf717b5', 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: 'd89f50a44dead676d19b8862a92ba636947fe6b1', part: "page-button-text" }, "Next"), h("span", { key: 'f5dd2ddddef86931d935df56101f1fed8118e4f6', 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-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 "../../ui-components";
 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: 'aaaea4076938af5a74197256dba1093265f0e2d6' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '12f06fa05915380403e244cbed053d0c04bfa1d4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '4d496def6abfc728e6f184fb0729ac648fb2deaf', 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: '78dcff13206646d594bdc80f6297d45dc9932694', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'dfa0de667ebd28efd217b6bdf548b9b1b728b57e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b449b180034f28504007a9c2fb0598607dc00efb', title: "ID", value: this.payment.id })), h("div", { key: '62af84e244e38b24b32f791d13f1b21b49942597', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0ddb0366b4ab737c7b08a37764b8ce2f7ec4a1e9', sectionTitle: "Details" }), h("div", { key: 'cb699194db16cb8608834779f560e882f6f9da7c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '3b6eb4a8b782668951bba90be3b5d522f3f7c69b', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7a59ab0b12a263c38c40a98acbff6492d370b28b', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'a9eaa5d1959425205c144dc2aa7c7fad77014290', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'd70c3a4bf48c9c69625d5f27f1095f9b0744a71e', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '28f526b1adcd475c2ae88a8bf09ae4aea7935df6', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '700f51d787f20f575e3e11aa72a8da29a9587c2a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ea72ecc9c2f5055d4b0f6b37cd16cb318f9a797c', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9d66af2c0c0baef4e8b7b021daf0b4d6adb267d2', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '3f21501c1e08feeee1e7427a42faf1c5d1d9c84d', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'b7767b93e090c0195aca6c99b66b48d61b6134b3', sectionTitle: "Payment Method" }),
+            h("div", { key: 'a363c7a7e69932a8ffeddb5e0d53f7df13119a9a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'fb0e1f64fcec23e513590b3048593565685d8400', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'bc181b1b94039e1aad341a8e563ba923976c806b', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '88b21dd2368b88232cd0f464c381d4423fe3c774', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '040fd71315ead633f9c89e9a9dad906889759d77', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '35ebc74de2c5c8fafd95fc5b15ff4f2ca85220cc', 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: 'f10eef0b4e4067fb78dbff16719a6f266f4e6bab', sectionTitle: "Payment Method" }),
+            h("div", { key: '6c1ef713b5dcabba5b516f3cbbd088d098873303', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8880fd0fb2b16ee6f177aba15d6f4485c95af252', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'baa70304d2972f69ce8a5d077a076b16f986745b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'dcb63b9258bea698bf2d165c611dfa05cb320f30', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '806696c15aa5ef242c230d9c9aea642ddfdfd93d', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '83289d8f2cf57a624678260555f00af4ea96a566', sectionTitle: 'Metadata' }), h("div", { key: '02e248b962e0c06f4d83bae75a5759b234fea36b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5d81879c7815102219ed010dab9f573ad6b7985d', 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": {