@foxy.io/elements 1.25.0-beta.2 → 1.25.0-beta.3

package/dist/elements/public/PaymentCard/PaymentCard.d.ts

@@ -1,46 +1,34 @@
-import { Data, Templates } from './types';
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import type { PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+import { InternalCard } from '../../internal/InternalCard/InternalCard';
+declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
-    styles: import("lit-element").CSSResultArray;
 };
 /**
- * Basic card displaying a payment.
- *
- * Note: payment gateway names need to be loaded separately. You can obtain
- * them from `fx:property_helpers` using your own Backend API proxy or just hardcode the values
- * you need. Once you have the gateway names, call `I18n.setGateways(names)`.
- *
- * @slot title:before
- * @slot title:after
- *
- * @slot subtitle:before
- * @slot subtitle:after
- *
- * @slot card-info:before
- * @slot card-info:after
- *
- * @slot fraud-risk:before
- * @slot fraud-risk:after
- *
- * @slot processor-response:before
- * @slot processor-response:after
+ * Basic card displaying a payment resource (`fx:payment`).
  *
  * @element foxy-payment-card
  * @since 1.11.0
  */
 export declare class PaymentCard extends Base<Data> {
-    templates: Templates;
-    private __currencyDisplay;
-    private __currency;
-    render(): TemplateResult;
-    protected _sendGet(): Promise<Data>;
-    private __renderTitle;
-    private __renderSubtitle;
-    private __renderCardInfo;
-    private __renderFraudRisk;
-    private __renderProcessorResponse;
+    static get properties(): PropertyDeclarations;
+    /** URL of the `fx:hosted_payment_gateways` property helper resource. */
+    hostedPaymentGatewaysHelper: string | null;
+    /** URL of the `fx:payment_gateways` property helper resource. */
+    paymentGatewaysHelper: string | null;
+    private readonly __hostedPaymentGatewaysLoaderId;
+    private readonly __paymentGatewaysLoaderId;
+    private readonly __transactionLoaderId;
+    private readonly __storeLoaderId;
+    renderBody(): TemplateResult;
+    get isBodyReady(): boolean;
+    private get __hostedPaymentGatewaysLoader();
+    private get __paymentGatewaysLoader();
+    private get __transactionLoader();
+    private get __storeLoader();
+    private get __currencyDisplay();
+    private get __currencyCode();
+    private get __gatewayName();
 }
 export {};

package/dist/elements/public/PaymentCard/PaymentCard.js

@@ -1,32 +1,12 @@
 import * as logos from "../PaymentMethodCard/logos.js";
-import { html } from 'lit-html';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
-const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'payment-card')));
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+const NS = 'payment-card';
+const Base = TranslatableMixin(InternalCard, NS);
 /**
- * Basic card displaying a payment.
- *
- * Note: payment gateway names need to be loaded separately. You can obtain
- * them from `fx:property_helpers` using your own Backend API proxy or just hardcode the values
- * you need. Once you have the gateway names, call `I18n.setGateways(names)`.
- *
- * @slot title:before
- * @slot title:after
- *
- * @slot subtitle:before
- * @slot subtitle:after
- *
- * @slot card-info:before
- * @slot card-info:after
- *
- * @slot fraud-risk:before
- * @slot fraud-risk:after
- *
- * @slot processor-response:before
- * @slot processor-response:after
+ * Basic card displaying a payment resource (`fx:payment`).
  *
  * @element foxy-payment-card
  * @since 1.11.0
@@ -34,152 +14,153 @@ const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement,
 export class PaymentCard extends Base {
     constructor() {
         super(...arguments);
-        this.templates = {};
-        this.__currencyDisplay = '';
-        this.__currency = '';
+        /** URL of the `fx:hosted_payment_gateways` property helper resource. */
+        this.hostedPaymentGatewaysHelper = null;
+        /** URL of the `fx:payment_gateways` property helper resource. */
+        this.paymentGatewaysHelper = null;
+        this.__hostedPaymentGatewaysLoaderId = 'hostedPaymentGatewaysLoader';
+        this.__paymentGatewaysLoaderId = 'paymentGatewaysLoader';
+        this.__transactionLoaderId = 'transactionLoader';
+        this.__storeLoaderId = 'storeLoader';
     }
-    render() {
-        var _a, _b;
-        const hidden = this.hiddenSelector;
-        const isCardInfoHidden = hidden.matches('card-info', true);
-        const isFraudRiskHidden = hidden.matches('fraud-risk', true);
+    static get properties() {
+        return {
+            ...super.properties,
+            hostedPaymentGatewaysHelper: { attribute: 'hosted-payment-gateways-helper' },
+            paymentGatewaysHelper: { attribute: 'payment-gateways-helper' },
+        };
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const data = this.data;
+        const amount = `${(_a = data === null || data === void 0 ? void 0 : data.amount) !== null && _a !== void 0 ? _a : ''} ${this.__currencyCode}`;
+        const amountOptions = { currencyDisplay: this.__currencyDisplay, amount };
+        const infoKeys = [
+            'processor_response',
+            'paypal_payer_id',
+            'third_party_id',
+            'purchase_order',
+        ];
+        const score = (_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b.fraud_protection_score) !== null && _c !== void 0 ? _c : 0;
+        const scoreColor = score > 0 ? 'text-error' : 'text-success';
+        const scoreBackground = score > 0 ? 'bg-error-10' : 'bg-success-10';
+        const type = ((_d = data === null || data === void 0 ? void 0 : data.cc_type) !== null && _d !== void 0 ? _d : 'unknown').toLowerCase();
+        const year = (_e = data === null || data === void 0 ? void 0 : data.cc_exp_year) === null || _e === void 0 ? void 0 : _e.substring(2);
+        const month = data === null || data === void 0 ? void 0 : data.cc_exp_month;
+        const last4Digits = (_f = data === null || data === void 0 ? void 0 : data.cc_number_masked) === null || _f === void 0 ? void 0 : _f.replace(/x/gi, '');
         return html `
-      <div
-        aria-busy=${!this.data && this.in('busy')}
-        aria-live="polite"
-        class="relative text-body text-m font-lumo leading-m focus-outline-none"
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined((_g = this.hostedPaymentGatewaysHelper) !== null && _g !== void 0 ? _g : undefined)}
+        id=${this.__hostedPaymentGatewaysLoaderId}
+        @update=${() => this.requestUpdate()}
       >
-        <div
-          class=${classMap({
-            'relative transition duration-250 ease-in-out': true,
-            'opacity-0 pointer-events-none': !this.data,
-        })}
-        >
-          ${hidden.matches('title', true) ? '' : this.__renderTitle()}
-          ${hidden.matches('subtitle', true) ? '' : this.__renderSubtitle()}
-          ${isCardInfoHidden && isFraudRiskHidden
-            ? ''
-            : html `
-                <div class="my-s flex space-x-s overflow-auto">
-                  ${isCardInfoHidden ? '' : this.__renderCardInfo()}
-                  ${isFraudRiskHidden ? '' : this.__renderFraudRisk()}
-                </div>
-              `}
-          ${hidden.matches('processor-response', true) ? '' : this.__renderProcessorResponse()}
-        </div>
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined((_h = this.paymentGatewaysHelper) !== null && _h !== void 0 ? _h : undefined)}
+        id=${this.__paymentGatewaysLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
 
-        <div
-          class=${classMap({
-            'transition duration-250 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !!this.data,
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(data === null || data === void 0 ? void 0 : data._links['fx:transaction'].href)}
+        id=${this.__transactionLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(data === null || data === void 0 ? void 0 : data._links['fx:store'].href)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <p class="leading-s">
+        <span class="block font-medium text-m" data-testid="line-1">
+          <foxy-i18n .options=${amountOptions} infer="" key="price"></foxy-i18n>
+          <span>&nbsp;&bull;&nbsp;</span>
+          <foxy-i18n .options=${{ value: data === null || data === void 0 ? void 0 : data.date_created }} infer="" key="date"></foxy-i18n>
+        </span>
+
+        <span class="block text-s text-secondary">
+          ${this.__gatewayName || html `<foxy-i18n infer="" key="unknown"></foxy-i18n>`}
+        </span>
+
+        ${infoKeys.map(key => {
+            if (!(data === null || data === void 0 ? void 0 : data[key]))
+                return;
+            const css = 'block text-s text-tertiary';
+            return html `<foxy-i18n class=${css} infer="" key=${key} .options=${data}></foxy-i18n>`;
         })}
-        >
-          <foxy-spinner
-            data-testid="spinner"
-            class="m-auto"
-            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
-            lang=${this.lang}
-            ns="${this.ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
+
+        <span class="mt-s flex space-x-s overflow-auto">
+          ${month && year && last4Digits
+            ? html `
+                <span
+                  class="truncate flex items-center h-xs rounded-s overflow-hidden bg-contrast-5"
+                  data-testid="card-info"
+                >
+                  <span class="h-xs">${(_j = logos[type]) !== null && _j !== void 0 ? _j : logos.unknown}</span>
+                  <span class="font-medium px-s">•••• ${last4Digits} ${month}/${year}</span>
+                </span>
+              `
+            : ''}
+
+          <foxy-i18n
+            class="truncate flex font-medium h-xs items-center px-s rounded-s text-s ${scoreColor} ${scoreBackground}"
+            infer=""
+            key="fraud_risk"
+            .options=${{ score }}
           >
-          </foxy-spinner>
-        </div>
-      </div>
+          </foxy-i18n>
+        </span>
+      </p>
     `;
     }
-    async _sendGet() {
-        const payment = await super._sendGet();
-        const [transaction, store] = await Promise.all([
-            super._fetch(payment._links['fx:transaction'].href),
-            super._fetch(payment._links['fx:store'].href),
-        ]);
-        this.__currency = transaction.currency_code;
-        this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';
-        return payment;
+    get isBodyReady() {
+        if (!super.isBodyReady)
+            return false;
+        if (!this.__currencyCode)
+            return false;
+        if (!this.__currencyDisplay)
+            return false;
+        return !this.hostedPaymentGatewaysHelper || !this.paymentGatewaysHelper || !!this.__gatewayName;
     }
-    __renderTitle() {
-        const key = this.data ? `gateways.${this.data.gateway_type}` : '';
-        const ns = `${this.ns} gateways`;
-        return html `
-      <div class="text-m flex text-secondary" data-testid="title">
-        ${this.renderTemplateOrSlot('title:before')}
-        <foxy-i18n lang=${this.lang} key=${key} ns=${ns}></foxy-i18n>&ZeroWidthSpace;
-        ${this.renderTemplateOrSlot('title:after')}
-      </div>
-    `;
+    get __hostedPaymentGatewaysLoader() {
+        return this.renderRoot.querySelector(`#${this.__hostedPaymentGatewaysLoaderId}`);
     }
-    __renderSubtitle() {
-        var _a, _b, _c, _d;
-        const amount = `${(_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : ''} ${this.__currency}`;
-        const amountOptions = JSON.stringify({ amount, currencyDisplay: this.__currencyDisplay });
-        const date = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.date_created) !== null && _d !== void 0 ? _d : '';
-        const dateOptions = JSON.stringify({ value: date });
-        const lang = this.lang;
-        const ns = this.ns;
-        return html `
-      <div class="flex font-medium text-m" data-testid="subtitle">
-        ${this.renderTemplateOrSlot('subtitle:before')}
-
-        <foxy-i18n options=${amountOptions} lang=${lang} key="price" ns=${ns}></foxy-i18n>
-        <span>&nbsp;&bull;&nbsp;</span>
-        <foxy-i18n options=${dateOptions} lang=${lang} key="date" ns=${ns}></foxy-i18n>
-
-        ${this.renderTemplateOrSlot('subtitle:after')}
-      </div>
-    `;
+    get __paymentGatewaysLoader() {
+        return this.renderRoot.querySelector(`#${this.__paymentGatewaysLoaderId}`);
     }
-    __renderCardInfo() {
-        var _a, _b, _c, _d;
-        const data = this.data;
-        const type = ((_a = data === null || data === void 0 ? void 0 : data.cc_type) !== null && _a !== void 0 ? _a : 'unknown').toLowerCase();
-        const year = (_b = data === null || data === void 0 ? void 0 : data.cc_exp_year) === null || _b === void 0 ? void 0 : _b.substring(2);
-        const month = data === null || data === void 0 ? void 0 : data.cc_exp_month;
-        const last4Digits = (_c = data === null || data === void 0 ? void 0 : data.cc_number_masked) === null || _c === void 0 ? void 0 : _c.replace(/x/gi, '');
-        if (!month || !year || !last4Digits)
-            return;
-        return html `
-      <div class="flex" data-testid="card-info">
-        ${this.renderTemplateOrSlot('card-info:before')}
-
-        <div class="truncate flex items-center h-s rounded overflow-hidden bg-contrast-5">
-          <div class="h-s">${(_d = logos[type]) !== null && _d !== void 0 ? _d : logos.unknown}</div>
-          <div class="text-m font-medium px-s">•••• ${last4Digits} ${month}/${year}</div>
-        </div>
-
-        ${this.renderTemplateOrSlot('card-info:after')}
-      </div>
-    `;
+    get __transactionLoader() {
+        return this.renderRoot.querySelector(`#${this.__transactionLoaderId}`);
     }
-    __renderFraudRisk() {
-        var _a, _b;
-        const score = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.fraud_protection_score) !== null && _b !== void 0 ? _b : 0;
-        const color = score > 0 ? 'text-error' : 'text-success';
-        const background = score > 0 ? 'bg-error-10' : 'bg-success-10';
-        return html `
-      <div class="flex" data-testid="fraud-risk">
-        ${this.renderTemplateOrSlot('fraud-risk:before')}
-
-        <foxy-i18n
-          options=${JSON.stringify({ score })}
-          class="truncate flex font-medium h-s items-center px-s rounded text-m ${color} ${background}"
-          lang=${this.lang}
-          key="fraud_risk"
-          ns=${this.ns}
-        >
-        </foxy-i18n>
-
-        ${this.renderTemplateOrSlot('fraud-risk:after')}
-      </div>
-    `;
+    get __storeLoader() {
+        return this.renderRoot.querySelector(`#${this.__storeLoaderId}`);
     }
-    __renderProcessorResponse() {
+    get __currencyDisplay() {
         var _a;
-        return html `
-      <div class="text-m text-tertiary" data-testid="processor-response">
-        ${this.renderTemplateOrSlot('processor-response:before')}
-        ${(_a = this.data) === null || _a === void 0 ? void 0 : _a.processor_response}&ZeroWidthSpace;
-        ${this.renderTemplateOrSlot('processor-response:after')}
-      </div>
-    `;
+        const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
+        return store ? (store.use_international_currency_symbol ? 'code' : 'symbol') : void 0;
+    }
+    get __currencyCode() {
+        var _a, _b;
+        return (_b = (_a = this.__transactionLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.currency_code;
+    }
+    get __gatewayName() {
+        var _a, _b, _c, _d, _e, _f;
+        const type = (_a = this.data) === null || _a === void 0 ? void 0 : _a.gateway_type;
+        if (type) {
+            const gateway = (_c = (_b = this.__paymentGatewaysLoader) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.values[type];
+            const hostedGateway = (_e = (_d = this.__hostedPaymentGatewaysLoader) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.values[type];
+            return (_f = gateway === null || gateway === void 0 ? void 0 : gateway.name) !== null && _f !== void 0 ? _f : hostedGateway === null || hostedGateway === void 0 ? void 0 : hostedGateway.name;
+        }
     }
 }
 //# sourceMappingURL=PaymentCard.js.map

package/dist/elements/public/PaymentCard/PaymentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCard/PaymentCard.ts"],"names":[],"mappings":"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","sourcesContent":["import * as logos from '../PaymentMethodCard/logos';\n\nimport { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'payment-card')));\n\n/**\n * Basic card displaying a payment.\n *\n * Note: payment gateway names need to be loaded separately. You can obtain\n * them from `fx:property_helpers` using your own Backend API proxy or just hardcode the values\n * you need. Once you have the gateway names, call `I18n.setGateways(names)`.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @slot card-info:before\n * @slot card-info:after\n *\n * @slot fraud-risk:before\n * @slot fraud-risk:after\n *\n * @slot processor-response:before\n * @slot processor-response:after\n *\n * @element foxy-payment-card\n * @since 1.11.0\n */\nexport class PaymentCard extends Base<Data> {\n  templates: Templates = {};\n\n  private __currencyDisplay = '';\n\n  private __currency = '';\n\n  render(): TemplateResult {\n    const hidden = this.hiddenSelector;\n    const isCardInfoHidden = hidden.matches('card-info', true);\n    const isFraudRiskHidden = hidden.matches('fraud-risk', true);\n\n    return html`\n      <div\n        aria-busy=${!this.data && this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative text-body text-m font-lumo leading-m focus-outline-none\"\n      >\n        <div\n          class=${classMap({\n            'relative transition duration-250 ease-in-out': true,\n            'opacity-0 pointer-events-none': !this.data,\n          })}\n        >\n          ${hidden.matches('title', true) ? '' : this.__renderTitle()}\n          ${hidden.matches('subtitle', true) ? '' : this.__renderSubtitle()}\n          ${isCardInfoHidden && isFraudRiskHidden\n            ? ''\n            : html`\n                <div class=\"my-s flex space-x-s overflow-auto\">\n                  ${isCardInfoHidden ? '' : this.__renderCardInfo()}\n                  ${isFraudRiskHidden ? '' : this.__renderFraudRisk()}\n                </div>\n              `}\n          ${hidden.matches('processor-response', true) ? '' : this.__renderProcessorResponse()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const payment = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(payment._links['fx:transaction'].href),\n      super._fetch<Store>(payment._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return payment;\n  }\n\n  private __renderTitle() {\n    const key = this.data ? `gateways.${this.data.gateway_type}` : '';\n    const ns = `${this.ns} gateways`;\n\n    return html`\n      <div class=\"text-m flex text-secondary\" data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n        <foxy-i18n lang=${this.lang} key=${key} ns=${ns}></foxy-i18n>&ZeroWidthSpace;\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  }\n\n  private __renderSubtitle() {\n    const amount = `${this.data?.amount ?? ''} ${this.__currency}`;\n    const amountOptions = JSON.stringify({ amount, currencyDisplay: this.__currencyDisplay });\n\n    const date = this.data?.date_created ?? '';\n    const dateOptions = JSON.stringify({ value: date });\n\n    const lang = this.lang;\n    const ns = this.ns;\n\n    return html`\n      <div class=\"flex font-medium text-m\" data-testid=\"subtitle\">\n        ${this.renderTemplateOrSlot('subtitle:before')}\n\n        <foxy-i18n options=${amountOptions} lang=${lang} key=\"price\" ns=${ns}></foxy-i18n>\n        <span>&nbsp;&bull;&nbsp;</span>\n        <foxy-i18n options=${dateOptions} lang=${lang} key=\"date\" ns=${ns}></foxy-i18n>\n\n        ${this.renderTemplateOrSlot('subtitle:after')}\n      </div>\n    `;\n  }\n\n  private __renderCardInfo() {\n    const data = this.data;\n    const type = (data?.cc_type ?? 'unknown').toLowerCase() as keyof typeof logos;\n    const year = data?.cc_exp_year?.substring(2);\n    const month = data?.cc_exp_month;\n    const last4Digits = data?.cc_number_masked?.replace(/x/gi, '');\n\n    if (!month || !year || !last4Digits) return;\n\n    return html`\n      <div class=\"flex\" data-testid=\"card-info\">\n        ${this.renderTemplateOrSlot('card-info:before')}\n\n        <div class=\"truncate flex items-center h-s rounded overflow-hidden bg-contrast-5\">\n          <div class=\"h-s\">${logos[type] ?? logos.unknown}</div>\n          <div class=\"text-m font-medium px-s\">•••• ${last4Digits} ${month}/${year}</div>\n        </div>\n\n        ${this.renderTemplateOrSlot('card-info:after')}\n      </div>\n    `;\n  }\n\n  private __renderFraudRisk() {\n    const score = this.data?.fraud_protection_score ?? 0;\n    const color = score > 0 ? 'text-error' : 'text-success';\n    const background = score > 0 ? 'bg-error-10' : 'bg-success-10';\n\n    return html`\n      <div class=\"flex\" data-testid=\"fraud-risk\">\n        ${this.renderTemplateOrSlot('fraud-risk:before')}\n\n        <foxy-i18n\n          options=${JSON.stringify({ score })}\n          class=\"truncate flex font-medium h-s items-center px-s rounded text-m ${color} ${background}\"\n          lang=${this.lang}\n          key=\"fraud_risk\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('fraud-risk:after')}\n      </div>\n    `;\n  }\n\n  private __renderProcessorResponse() {\n    return html`\n      <div class=\"text-m text-tertiary\" data-testid=\"processor-response\">\n        ${this.renderTemplateOrSlot('processor-response:before')}\n        ${this.data?.processor_response}&ZeroWidthSpace;\n        ${this.renderTemplateOrSlot('processor-response:after')}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"PaymentCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCard/PaymentCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport * as logos from '../PaymentMethodCard/logos';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'payment-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\n/**\n * Basic card displaying a payment resource (`fx:payment`).\n *\n * @element foxy-payment-card\n * @since 1.11.0\n */\nexport class PaymentCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      hostedPaymentGatewaysHelper: { attribute: 'hosted-payment-gateways-helper' },\n      paymentGatewaysHelper: { attribute: 'payment-gateways-helper' },\n    };\n  }\n\n  /** URL of the `fx:hosted_payment_gateways` property helper resource. */\n  hostedPaymentGatewaysHelper: string | null = null;\n\n  /** URL of the `fx:payment_gateways` property helper resource. */\n  paymentGatewaysHelper: string | null = null;\n\n  private readonly __hostedPaymentGatewaysLoaderId = 'hostedPaymentGatewaysLoader';\n\n  private readonly __paymentGatewaysLoaderId = 'paymentGatewaysLoader';\n\n  private readonly __transactionLoaderId = 'transactionLoader';\n\n  private readonly __storeLoaderId = 'storeLoader';\n\n  renderBody(): TemplateResult {\n    const data = this.data;\n    const amount = `${data?.amount ?? ''} ${this.__currencyCode}`;\n    const amountOptions = { currencyDisplay: this.__currencyDisplay, amount };\n\n    const infoKeys = [\n      'processor_response',\n      'paypal_payer_id',\n      'third_party_id',\n      'purchase_order',\n    ] as const;\n\n    const score = this.data?.fraud_protection_score ?? 0;\n    const scoreColor = score > 0 ? 'text-error' : 'text-success';\n    const scoreBackground = score > 0 ? 'bg-error-10' : 'bg-success-10';\n\n    const type = (data?.cc_type ?? 'unknown').toLowerCase() as keyof typeof logos;\n    const year = data?.cc_exp_year?.substring(2);\n    const month = data?.cc_exp_month;\n    const last4Digits = data?.cc_number_masked?.replace(/x/gi, '');\n\n    return html`\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(this.hostedPaymentGatewaysHelper ?? undefined)}\n        id=${this.__hostedPaymentGatewaysLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(this.paymentGatewaysHelper ?? undefined)}\n        id=${this.__paymentGatewaysLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(data?._links['fx:transaction'].href)}\n        id=${this.__transactionLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(data?._links['fx:store'].href)}\n        id=${this.__storeLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <p class=\"leading-s\">\n        <span class=\"block font-medium text-m\" data-testid=\"line-1\">\n          <foxy-i18n .options=${amountOptions} infer=\"\" key=\"price\"></foxy-i18n>\n          <span>&nbsp;&bull;&nbsp;</span>\n          <foxy-i18n .options=${{ value: data?.date_created }} infer=\"\" key=\"date\"></foxy-i18n>\n        </span>\n\n        <span class=\"block text-s text-secondary\">\n          ${this.__gatewayName || html`<foxy-i18n infer=\"\" key=\"unknown\"></foxy-i18n>`}\n        </span>\n\n        ${infoKeys.map(key => {\n          if (!data?.[key]) return;\n          const css = 'block text-s text-tertiary';\n          return html`<foxy-i18n class=${css} infer=\"\" key=${key} .options=${data}></foxy-i18n>`;\n        })}\n\n        <span class=\"mt-s flex space-x-s overflow-auto\">\n          ${month && year && last4Digits\n            ? html`\n                <span\n                  class=\"truncate flex items-center h-xs rounded-s overflow-hidden bg-contrast-5\"\n                  data-testid=\"card-info\"\n                >\n                  <span class=\"h-xs\">${logos[type] ?? logos.unknown}</span>\n                  <span class=\"font-medium px-s\">•••• ${last4Digits} ${month}/${year}</span>\n                </span>\n              `\n            : ''}\n\n          <foxy-i18n\n            class=\"truncate flex font-medium h-xs items-center px-s rounded-s text-s ${scoreColor} ${scoreBackground}\"\n            infer=\"\"\n            key=\"fraud_risk\"\n            .options=${{ score }}\n          >\n          </foxy-i18n>\n        </span>\n      </p>\n    `;\n  }\n\n  get isBodyReady() {\n    if (!super.isBodyReady) return false;\n    if (!this.__currencyCode) return false;\n    if (!this.__currencyDisplay) return false;\n    return !this.hostedPaymentGatewaysHelper || !this.paymentGatewaysHelper || !!this.__gatewayName;\n  }\n\n  private get __hostedPaymentGatewaysLoader() {\n    type Loader = NucleonElement<Resource<Rels.HostedPaymentGatewaysHelper>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__hostedPaymentGatewaysLoaderId}`);\n  }\n\n  private get __paymentGatewaysLoader() {\n    type Loader = NucleonElement<Resource<Rels.PaymentGatewaysHelper>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__paymentGatewaysLoaderId}`);\n  }\n\n  private get __transactionLoader() {\n    type Loader = NucleonElement<Resource<Rels.Transaction>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__transactionLoaderId}`);\n  }\n\n  private get __storeLoader() {\n    type Loader = NucleonElement<Resource<Rels.Store>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__storeLoaderId}`);\n  }\n\n  private get __currencyDisplay() {\n    const store = this.__storeLoader?.data;\n    return store ? (store.use_international_currency_symbol ? 'code' : 'symbol') : void 0;\n  }\n\n  private get __currencyCode() {\n    return this.__transactionLoader?.data?.currency_code;\n  }\n\n  private get __gatewayName() {\n    const type = this.data?.gateway_type;\n    if (type) {\n      const gateway = this.__paymentGatewaysLoader?.data?.values[type];\n      const hostedGateway = this.__hostedPaymentGatewaysLoader?.data?.values[type];\n      return gateway?.name ?? hostedGateway?.name;\n    }\n  }\n}\n"]}

package/dist/elements/public/PaymentCard/index.d.ts

@@ -1,5 +1,5 @@
-import '../../internal/InternalSandbox/index';
+import '../../internal/InternalCard/index';
+import '../NucleonElement/index';
 import '../I18n/index';
-import '../Spinner/index';
 import { PaymentCard } from './PaymentCard';
 export { PaymentCard };

package/dist/elements/public/PaymentCard/index.js

@@ -1,6 +1,6 @@
-import "../../internal/InternalSandbox/index.js";
+import "../../internal/InternalCard/index.js";
+import "../NucleonElement/index.js";
 import "../I18n/index.js";
-import "../Spinner/index.js";
 import { PaymentCard } from "./PaymentCard.js";
 customElements.define('foxy-payment-card', PaymentCard);
 export { PaymentCard };

package/dist/elements/public/PaymentCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAC9C,0BAAuB;AACvB,6BAA0B;AAE1B,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAE5C,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\nimport '../I18n/index';\nimport '../Spinner/index';\n\nimport { PaymentCard } from './PaymentCard';\n\ncustomElements.define('foxy-payment-card', PaymentCard);\n\nexport { PaymentCard };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCard/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAC3C,oCAAiC;AACjC,0BAAuB;AAEvB,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAE5C,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCard/index';\nimport '../NucleonElement/index';\nimport '../I18n/index';\n\nimport { PaymentCard } from './PaymentCard';\n\ncustomElements.define('foxy-payment-card', PaymentCard);\n\nexport { PaymentCard };\n"]}

package/dist/elements/public/PaymentCard/types.d.ts

@@ -1,17 +1,3 @@
-import { PaymentCard } from './PaymentCard';
-import { Rels } from '@foxy.io/sdk/backend';
-import { Renderer } from '../../../mixins/configurable';
-import { Resource } from '@foxy.io/sdk/core';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
 export declare type Data = Resource<Rels.Payment>;
-export declare type Templates = {
-    'title:before'?: Renderer<PaymentCard>;
-    'title:after'?: Renderer<PaymentCard>;
-    'subtitle:before'?: Renderer<PaymentCard>;
-    'subtitle:after'?: Renderer<PaymentCard>;
-    'card-info:before'?: Renderer<PaymentCard>;
-    'card-info:after'?: Renderer<PaymentCard>;
-    'fraud-risk:before'?: Renderer<PaymentCard>;
-    'fraud-risk:after'?: Renderer<PaymentCard>;
-    'processor-response:before'?: Renderer<PaymentCard>;
-    'processor-response:after'?: Renderer<PaymentCard>;
-};

package/dist/elements/public/PaymentCard/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import { PaymentCard } from './PaymentCard';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.Payment>;\nexport type Templates = {\n  'title:before'?: Renderer<PaymentCard>;\n  'title:after'?: Renderer<PaymentCard>;\n  'subtitle:before'?: Renderer<PaymentCard>;\n  'subtitle:after'?: Renderer<PaymentCard>;\n  'card-info:before'?: Renderer<PaymentCard>;\n  'card-info:after'?: Renderer<PaymentCard>;\n  'fraud-risk:before'?: Renderer<PaymentCard>;\n  'fraud-risk:after'?: Renderer<PaymentCard>;\n  'processor-response:before'?: Renderer<PaymentCard>;\n  'processor-response:after'?: Renderer<PaymentCard>;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Data = Resource<Rels.Payment>;\n"]}

package/dist/elements/public/ShipmentCard/ShipmentCard.d.ts

@@ -1,27 +1,23 @@
 import type { TemplateResult } from 'lit-html';
 import type { Data } from './types';
-import { BooleanSelector } from '@foxy.io/sdk/core';
-import { PropertyDeclarations } from 'lit-element';
 import { InternalCard } from '../../internal/InternalCard/InternalCard';
 declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+};
 /**
- * Basic card displaying a shipment.
+ * Basic card displaying a shipment (`fx:shipment`).
  *
  * @element foxy-shipment-card
  * @since 1.17.0
  */
 export declare class ShipmentCard extends Base<Data> {
-    static get properties(): PropertyDeclarations;
-    __customerAddresses: string;
-    __currencyDisplay: string;
-    __itemCategories: string;
-    __editable: boolean;
-    __currency: string;
-    __coupons: string;
-    get readonlySelector(): BooleanSelector;
+    private readonly __transactionLoaderId;
+    private readonly __storeLoaderId;
     renderBody(): TemplateResult;
-    protected _sendGet(): Promise<Data>;
+    get isBodyReady(): boolean;
+    private get __transactionLoader();
+    private get __storeLoader();
+    private get __currencyDisplay();
+    private get __currencyCode();
 }
 export {};