@foxy.io/elements 1.18.0-beta.2 → 1.18.0-beta.20

package/dist/elements/public/AdminSubscriptionCard/AdminSubscriptionCard.js

@@ -0,0 +1,304 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { parseFrequency } from "../../../utils/parse-frequency.js";
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+const NS = 'admin-subscription-card';
+const Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));
+export class AdminSubscriptionCard extends Base {
+    constructor() {
+        super(...arguments);
+        this.localeCodes = null;
+        this.__transactionTemplateLoaderId = 'transactionTemplateLoader';
+        this.__defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';
+        this.__localeCodesHelperLoaderId = 'localeCodesLoader';
+        this.__templateSetLoaderId = 'templateSetLoader';
+        this.__itemsLoaderId = 'itemsLoader';
+        this.__storeLoaderId = 'storeLoader';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            localeCodes: { attribute: 'locale-codes' },
+        };
+    }
+    renderBody() {
+        var _a;
+        const isFailed = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.first_failed_transaction_date);
+        const cart = this.__transactionTemplate;
+        const priceKey = this.__priceKey;
+        const priceOptions = this.__priceOptions;
+        const summaryOptions = this.__summaryOptions;
+        const summaryKey = this.__summaryKey;
+        const statusKey = this.__statusKey;
+        const statusOptions = this.__statusOptions;
+        return html `
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__transactionTemplateHref)}
+        id=${this.__transactionTemplateLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__defaultTemplateSetHref)}
+        id=${this.__defaultTemplateSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__localeCodesHelperHref)}
+        id=${this.__localeCodesHelperLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__templateSetHref)}
+        id=${this.__templateSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__itemsHref)}
+        id=${this.__itemsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__storeHref)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <div class="text-left leading-s text-tertiary">
+        <div class="flex items-center space-x-s">
+          <span class="block flex-1 font-semibold text-body truncate">
+            ${summaryOptions && summaryKey
+            ? html `<foxy-i18n infer="" key=${summaryKey} .options=${summaryOptions}></foxy-i18n>`
+            : html `&ZeroWidthSpace;`}
+          </span>
+          <span class="text-s">
+            ${priceOptions && priceKey
+            ? html `<foxy-i18n infer="" key=${priceKey} .options=${priceOptions}></foxy-i18n>`
+            : html `&ZeroWidthSpace;`}
+          </span>
+        </div>
+
+        <div class="truncate text-s ${isFailed ? 'text-error' : 'text-secondary'}">
+          ${statusOptions && statusKey
+            ? html `<foxy-i18n infer="" key=${statusKey} .options=${statusOptions}></foxy-i18n>`
+            : html `&ZeroWidthSpace;`}
+        </div>
+
+        <div class="text-tertiary truncate text-s">${cart === null || cart === void 0 ? void 0 : cart.customer_email}&ZeroWidthSpace;</div>
+      </div>
+    `;
+    }
+    get isBodyReady() {
+        const isLoaded = !!this.__items && !!this.__currencyCode && !!this.__currencyDisplay;
+        return super.isBodyReady && isLoaded;
+    }
+    get __transactionTemplateHref() {
+        var _a, _b;
+        const data = this.data;
+        if (!data)
+            return;
+        if ('_embedded' in data && 'fx:transaction_template' in data._embedded)
+            return;
+        const url = new URL((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:transaction_template'].href) !== null && _b !== void 0 ? _b : '');
+        url.searchParams.set('zoom', 'items');
+        return url.toString();
+    }
+    get __defaultTemplateSetHref() {
+        var _a, _b, _c;
+        const templateSetUri = (_a = this.__transactionTemplate) === null || _a === void 0 ? void 0 : _a.template_set_uri;
+        if (templateSetUri === '') {
+            try {
+                const url = new URL((_c = (_b = this.__store) === null || _b === void 0 ? void 0 : _b._links['fx:template_sets'].href) !== null && _c !== void 0 ? _c : '');
+                url.searchParams.set('code', 'DEFAULT');
+                return url.toString();
+            }
+            catch (_d) {
+                //
+            }
+        }
+    }
+    get __localeCodesHelperHref() {
+        var _a;
+        if (this.__defaultTemplateSetHref || this.__templateSetHref) {
+            return (_a = this.localeCodes) !== null && _a !== void 0 ? _a : void 0;
+        }
+    }
+    get __templateSetHref() {
+        const cart = this.__transactionTemplate;
+        // TODO: remove the directive below once SDK is updated
+        // @ts-expect-error SDK types are incomplete
+        const currencyCode = cart === null || cart === void 0 ? void 0 : cart.currency_code;
+        if (!currencyCode)
+            return (cart === null || cart === void 0 ? void 0 : cart.template_set_uri) || void 0;
+    }
+    get __itemsHref() {
+        const cart = this.__transactionTemplate;
+        if (!cart)
+            return;
+        if ('_embedded' in cart && 'fx:items' in cart._embedded)
+            return;
+        const url = new URL(cart._links['fx:items'].href);
+        url.searchParams.set('limit', '1');
+        return url.toString();
+    }
+    get __storeHref() {
+        var _a, _b;
+        return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:store']) === null || _b === void 0 ? void 0 : _b.href;
+    }
+    get __transactionTemplate() {
+        var _a, _b;
+        const data = this.data;
+        if (data && '_embedded' in data && 'fx:transaction_template' in data._embedded) {
+            return data._embedded['fx:transaction_template'];
+        }
+        else {
+            const selector = `#${this.__transactionTemplateLoaderId}`;
+            return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+        }
+    }
+    get __defaultTemplateSet() {
+        var _a, _b;
+        const selector = `#${this.__defaultTemplateSetLoaderId}`;
+        const loader = this.renderRoot.querySelector(selector);
+        return (_b = (_a = loader === null || loader === void 0 ? void 0 : loader.data) === null || _a === void 0 ? void 0 : _a._embedded['fx:template_sets'][0]) !== null && _b !== void 0 ? _b : null;
+    }
+    get __localeCodesHelper() {
+        var _a, _b;
+        const selector = `#${this.__localeCodesHelperLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __templateSet() {
+        var _a, _b;
+        const selector = `#${this.__templateSetLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __items() {
+        const cart = this.__transactionTemplate;
+        if (cart && '_embedded' in cart && 'fx:items' in cart._embedded) {
+            const items = cart._embedded['fx:items'];
+            return {
+                array: items,
+                count: items.length,
+                isApproximateCount: items.length === 20,
+            };
+        }
+        const loader = this.renderRoot.querySelector(`#${this.__itemsLoaderId}`);
+        if (!(loader === null || loader === void 0 ? void 0 : loader.data))
+            return null;
+        return {
+            array: loader.data._embedded['fx:items'],
+            count: loader.data.total_items,
+            isApproximateCount: false,
+        };
+    }
+    get __store() {
+        var _a, _b;
+        const selector = `#${this.__storeLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __currencyDisplay() {
+        var _a;
+        const useCode = (_a = this.__store) === null || _a === void 0 ? void 0 : _a.use_international_currency_symbol;
+        if (useCode === true)
+            return 'code';
+        if (useCode === false)
+            return 'symbol';
+    }
+    get __summaryOptions() {
+        var _a;
+        const { array, count } = (_a = this.__items) !== null && _a !== void 0 ? _a : {};
+        if (array && count)
+            return { firstItem: array[0], count, countMinus1: count - 1 };
+    }
+    get __summaryKey() {
+        const items = this.__items;
+        if (items)
+            return items.isApproximateCount ? 'summary_approximate' : 'summary';
+    }
+    get __statusOptions() {
+        var _a, _b;
+        const d = this.data;
+        const date = (_b = (_a = d === null || d === void 0 ? void 0 : d.first_failed_transaction_date) !== null && _a !== void 0 ? _a : d === null || d === void 0 ? void 0 : d.end_date) !== null && _b !== void 0 ? _b : d === null || d === void 0 ? void 0 : d.next_transaction_date;
+        if (date)
+            return { date };
+    }
+    get __currencyCode() {
+        var _a, _b, _c;
+        const cart = this.__transactionTemplate;
+        if (cart && 'currency_code' in cart) {
+            // TODO: remove the directive below once the SDK is updated
+            // @ts-expect-error SDK types are incomplete
+            return cart.currency_code;
+        }
+        else {
+            const allLocaleCodes = this.__localeCodesHelper;
+            const localeCode = (_b = ((_a = this.__templateSet) !== null && _a !== void 0 ? _a : this.__defaultTemplateSet)) === null || _b === void 0 ? void 0 : _b.locale_code;
+            const localeInfo = localeCode ? allLocaleCodes === null || allLocaleCodes === void 0 ? void 0 : allLocaleCodes.values[localeCode] : void 0;
+            if (localeInfo)
+                return (_c = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _c === void 0 ? void 0 : _c[1];
+        }
+    }
+    get __priceOptions() {
+        var _a, _b;
+        const currencyDisplay = this.__currencyDisplay;
+        if (currencyDisplay === undefined)
+            return;
+        const currencyCode = this.__currencyCode;
+        if (currencyCode === undefined)
+            return;
+        const totalOrder = (_a = this.__transactionTemplate) === null || _a === void 0 ? void 0 : _a.total_order;
+        if (totalOrder === undefined)
+            return;
+        const frequency = (_b = this.data) === null || _b === void 0 ? void 0 : _b.frequency;
+        if (frequency === undefined)
+            return;
+        return {
+            ...parseFrequency(frequency),
+            amount: `${totalOrder} ${currencyCode}`,
+            currencyDisplay,
+        };
+    }
+    get __statusKey() {
+        const data = this.data;
+        if (data === null)
+            return;
+        if (data.first_failed_transaction_date)
+            return 'subscription_failed';
+        if (data.end_date) {
+            const hasEnded = new Date(data.end_date).getTime() > Date.now();
+            return hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';
+        }
+        return `subscription_${data.is_active ? 'active' : 'inactive'}`;
+    }
+    get __priceKey() {
+        var _a;
+        const frequency = (_a = this.data) === null || _a === void 0 ? void 0 : _a.frequency;
+        if (frequency)
+            return `price_${frequency === '.5m' ? 'twice_a_month' : 'recurring'}`;
+    }
+}
+//# sourceMappingURL=AdminSubscriptionCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminSubscriptionCard/AdminSubscriptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { parseFrequency } from '../../../utils/parse-frequency';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'admin-subscription-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\nexport class AdminSubscriptionCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      localeCodes: { attribute: 'locale-codes' },\n    };\n  }\n\n  localeCodes: string | null = null;\n\n  private readonly __transactionTemplateLoaderId = 'transactionTemplateLoader';\n\n  private readonly __defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';\n\n  private readonly __localeCodesHelperLoaderId = 'localeCodesLoader';\n\n  private readonly __templateSetLoaderId = 'templateSetLoader';\n\n  private readonly __itemsLoaderId = 'itemsLoader';\n\n  private readonly __storeLoaderId = 'storeLoader';\n\n  renderBody(): TemplateResult {\n    const isFailed = !!this.data?.first_failed_transaction_date;\n    const cart = this.__transactionTemplate;\n\n    const priceKey = this.__priceKey;\n    const priceOptions = this.__priceOptions;\n    const summaryOptions = this.__summaryOptions;\n    const summaryKey = this.__summaryKey;\n    const statusKey = this.__statusKey;\n    const statusOptions = this.__statusOptions;\n\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__transactionTemplateHref)}\n        id=${this.__transactionTemplateLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__defaultTemplateSetHref)}\n        id=${this.__defaultTemplateSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__localeCodesHelperHref)}\n        id=${this.__localeCodesHelperLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__templateSetHref)}\n        id=${this.__templateSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__itemsHref)}\n        id=${this.__itemsLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__storeHref)}\n        id=${this.__storeLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"text-left leading-s text-tertiary\">\n        <div class=\"flex items-center space-x-s\">\n          <span class=\"block flex-1 font-semibold text-body truncate\">\n            ${summaryOptions && summaryKey\n              ? html`<foxy-i18n infer=\"\" key=${summaryKey} .options=${summaryOptions}></foxy-i18n>`\n              : html`&ZeroWidthSpace;`}\n          </span>\n          <span class=\"text-s\">\n            ${priceOptions && priceKey\n              ? html`<foxy-i18n infer=\"\" key=${priceKey} .options=${priceOptions}></foxy-i18n>`\n              : html`&ZeroWidthSpace;`}\n          </span>\n        </div>\n\n        <div class=\"truncate text-s ${isFailed ? 'text-error' : 'text-secondary'}\">\n          ${statusOptions && statusKey\n            ? html`<foxy-i18n infer=\"\" key=${statusKey} .options=${statusOptions}></foxy-i18n>`\n            : html`&ZeroWidthSpace;`}\n        </div>\n\n        <div class=\"text-tertiary truncate text-s\">${cart?.customer_email}&ZeroWidthSpace;</div>\n      </div>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    const isLoaded = !!this.__items && !!this.__currencyCode && !!this.__currencyDisplay;\n    return super.isBodyReady && isLoaded;\n  }\n\n  private get __transactionTemplateHref() {\n    const data = this.data;\n\n    if (!data) return;\n    if ('_embedded' in data && 'fx:transaction_template' in data._embedded) return;\n\n    const url = new URL(this.data?._links['fx:transaction_template'].href ?? '');\n    url.searchParams.set('zoom', 'items');\n    return url.toString();\n  }\n\n  private get __defaultTemplateSetHref() {\n    const templateSetUri = this.__transactionTemplate?.template_set_uri;\n\n    if (templateSetUri === '') {\n      try {\n        const url = new URL(this.__store?._links['fx:template_sets'].href ?? '');\n        url.searchParams.set('code', 'DEFAULT');\n        return url.toString();\n      } catch {\n        //\n      }\n    }\n  }\n\n  private get __localeCodesHelperHref() {\n    if (this.__defaultTemplateSetHref || this.__templateSetHref) {\n      return this.localeCodes ?? void 0;\n    }\n  }\n\n  private get __templateSetHref() {\n    const cart = this.__transactionTemplate;\n    // TODO: remove the directive below once SDK is updated\n    // @ts-expect-error SDK types are incomplete\n    const currencyCode = cart?.currency_code as string | undefined;\n\n    if (!currencyCode) return cart?.template_set_uri || void 0;\n  }\n\n  private get __itemsHref() {\n    const cart = this.__transactionTemplate;\n\n    if (!cart) return;\n    if ('_embedded' in cart && 'fx:items' in cart._embedded) return;\n\n    const url = new URL(cart._links['fx:items'].href);\n    url.searchParams.set('limit', '1');\n    return url.toString();\n  }\n\n  private get __storeHref() {\n    return this.data?._links['fx:store']?.href;\n  }\n\n  private get __transactionTemplate() {\n    const data = this.data;\n\n    if (data && '_embedded' in data && 'fx:transaction_template' in data._embedded) {\n      type Cart = Resource<Rels.TransactionTemplate>;\n      type CartWithItems = Resource<Rels.TransactionTemplate, { zoom: 'items' }>;\n      return data._embedded['fx:transaction_template'] as Cart | CartWithItems;\n    } else {\n      type Loader = NucleonElement<Resource<Rels.TransactionTemplate, { zoom: 'items' }>>;\n      const selector = `#${this.__transactionTemplateLoaderId}`;\n      return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n    }\n  }\n\n  private get __defaultTemplateSet() {\n    type Loader = NucleonElement<Resource<Rels.TemplateSets>>;\n    const selector = `#${this.__defaultTemplateSetLoaderId}`;\n    const loader = this.renderRoot.querySelector<Loader>(selector);\n    return loader?.data?._embedded['fx:template_sets'][0] ?? null;\n  }\n\n  private get __localeCodesHelper() {\n    type Loader = NucleonElement<Resource<Rels.LocaleCodes>>;\n    const selector = `#${this.__localeCodesHelperLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __templateSet() {\n    type Loader = NucleonElement<Resource<Rels.TemplateSet>>;\n    const selector = `#${this.__templateSetLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __items() {\n    type Cart = Resource<Rels.TransactionTemplate>;\n    type CartWithItems = Resource<Rels.TransactionTemplate, { zoom: 'items' }>;\n\n    const cart = this.__transactionTemplate as Cart | CartWithItems | null;\n\n    if (cart && '_embedded' in cart && 'fx:items' in cart._embedded) {\n      const items = cart._embedded['fx:items'];\n\n      return {\n        array: items,\n        count: items.length,\n        isApproximateCount: items.length === 20,\n      };\n    }\n\n    type Loader = NucleonElement<Resource<Rels.Items>>;\n    const loader = this.renderRoot.querySelector<Loader>(`#${this.__itemsLoaderId}`);\n    if (!loader?.data) return null;\n\n    return {\n      array: loader.data._embedded['fx:items'],\n      count: loader.data.total_items,\n      isApproximateCount: false,\n    };\n  }\n\n  private get __store() {\n    type Loader = NucleonElement<Resource<Rels.Store>>;\n    const selector = `#${this.__storeLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __currencyDisplay() {\n    const useCode = this.__store?.use_international_currency_symbol;\n\n    if (useCode === true) return 'code';\n    if (useCode === false) return 'symbol';\n  }\n\n  private get __summaryOptions() {\n    const { array, count } = this.__items ?? {};\n    if (array && count) return { firstItem: array[0], count, countMinus1: count - 1 };\n  }\n\n  private get __summaryKey() {\n    const items = this.__items;\n    if (items) return items.isApproximateCount ? 'summary_approximate' : 'summary';\n  }\n\n  private get __statusOptions() {\n    const d = this.data;\n    const date = d?.first_failed_transaction_date ?? d?.end_date ?? d?.next_transaction_date;\n    if (date) return { date };\n  }\n\n  private get __currencyCode() {\n    const cart = this.__transactionTemplate;\n\n    if (cart && 'currency_code' in cart) {\n      // TODO: remove the directive below once the SDK is updated\n      // @ts-expect-error SDK types are incomplete\n      return cart.currency_code as string;\n    } else {\n      const allLocaleCodes = this.__localeCodesHelper;\n      const localeCode = (this.__templateSet ?? this.__defaultTemplateSet)?.locale_code;\n      const localeInfo = localeCode ? allLocaleCodes?.values[localeCode] : void 0;\n\n      if (localeInfo) return /Currency: ([A-Z]{3})/g.exec(localeInfo)?.[1];\n    }\n  }\n\n  private get __priceOptions() {\n    const currencyDisplay = this.__currencyDisplay;\n    if (currencyDisplay === undefined) return;\n\n    const currencyCode = this.__currencyCode;\n    if (currencyCode === undefined) return;\n\n    const totalOrder = this.__transactionTemplate?.total_order;\n    if (totalOrder === undefined) return;\n\n    const frequency = this.data?.frequency;\n    if (frequency === undefined) return;\n\n    return {\n      ...parseFrequency(frequency),\n      amount: `${totalOrder} ${currencyCode}`,\n      currencyDisplay,\n    };\n  }\n\n  private get __statusKey() {\n    const data = this.data;\n\n    if (data === null) return;\n    if (data.first_failed_transaction_date) return 'subscription_failed';\n    if (data.end_date) {\n      const hasEnded = new Date(data.end_date).getTime() > Date.now();\n      return hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n    }\n\n    return `subscription_${data.is_active ? 'active' : 'inactive'}`;\n  }\n\n  private get __priceKey() {\n    const frequency = this.data?.frequency;\n    if (frequency) return `price_${frequency === '.5m' ? 'twice_a_month' : 'recurring'}`;\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+import '../../internal/InternalCard/index';
+import '../I18n/index';
+import { AdminSubscriptionCard } from './AdminSubscriptionCard';
+export { AdminSubscriptionCard };

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

@@ -0,0 +1,6 @@
+import "../../internal/InternalCard/index.js";
+import "../I18n/index.js";
+import { AdminSubscriptionCard } from "./AdminSubscriptionCard.js";
+customElements.define('foxy-admin-subscription-card', AdminSubscriptionCard);
+export { AdminSubscriptionCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminSubscriptionCard/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAE3C,0BAAuB;AAEvB,OAAO,EAAE,qBAAqB,EAAE,mCAAgC;AAEhE,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,qBAAqB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCard/index';\n\nimport '../I18n/index';\n\nimport { AdminSubscriptionCard } from './AdminSubscriptionCard';\n\ncustomElements.define('foxy-admin-subscription-card', AdminSubscriptionCard);\n\nexport { AdminSubscriptionCard };\n"]}

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

@@ -0,0 +1,9 @@
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+export declare type Data = Resource<Rels.Subscription> | Resource<Rels.Subscription, {
+    zoom: 'transaction_template';
+}> | Resource<Rels.Subscription, {
+    zoom: {
+        transaction_template: 'items';
+    };
+}>;

package/dist/elements/public/AdminSubscriptionCard/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminSubscriptionCard/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 =\n  | Resource<Rels.Subscription>\n  | Resource<Rels.Subscription, { zoom: 'transaction_template' }>\n  | Resource<Rels.Subscription, { zoom: { transaction_template: 'items' } }>;\n"]}

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

@@ -16,8 +16,8 @@ export declare class ApiBrowser extends Base<Data> {
     static get properties(): PropertyDeclarations;
     /** Bookmark URL of your API. */
     home: string | null;
+    private __newCurrentUrl;
     private __history;
-    private __debounce;
     private __renderItem;
     private __handleExistingResourceFetch;
     render(): TemplateResult;
@@ -27,5 +27,6 @@ export declare class ApiBrowser extends Base<Data> {
     private set __mode(value);
     private __goBack;
     private __goHome;
+    private __go;
 }
 export {};

package/dist/elements/public/ApiBrowser/ApiBrowser.js

@@ -3,7 +3,6 @@ import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { NucleonElement } from "../NucleonElement/NucleonElement.js";
 import { html } from 'lit-element';
-import debounce from 'lodash-es/debounce';
 const NS = 'api-browser';
 const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));
 /**
@@ -17,8 +16,8 @@ export class ApiBrowser extends Base {
         super(...arguments);
         /** Bookmark URL of your API. */
         this.home = null;
+        this.__newCurrentUrl = null;
         this.__history = [];
-        this.__debounce = debounce((callback) => callback(), 250);
         this.__renderItem = ({ href, html }) => {
             if (!href)
                 return html ``;
@@ -51,6 +50,7 @@ export class ApiBrowser extends Base {
     static get properties() {
         return {
             ...super.properties,
+            __newCurrentUrl: { attribute: false },
             __history: { attribute: false },
             home: { type: String },
         };
@@ -86,25 +86,38 @@ export class ApiBrowser extends Base {
             class="flex-1"
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
-            .value=${this.href || this.parent}
+            .value=${this.__newCurrentUrl || this.href || this.parent}
+            @keydown=${(evt) => evt.key === 'Enter' && this.__go()}
             @input=${(evt) => {
             const field = evt.currentTarget;
-            const value = field.value;
-            const property = this.href ? 'href' : 'parent';
-            this.__debounce(() => (this[property] = value));
+            this.__newCurrentUrl = field.value;
         }}
           >
           </vaadin-text-field>
 
-          <vaadin-button
-            title=${this.t('refresh')}
-            theme="icon contrast"
-            class="p-0"
-            ?disabled=${this.disabled || this.in('busy')}
-            @click=${() => this.refresh()}
-          >
-            <iron-icon class="icon-inline text-m" icon="icons:refresh"></iron-icon>
-          </vaadin-button>
+          ${this.__newCurrentUrl
+            ? html `
+                <vaadin-button
+                  title=${this.t('navigate')}
+                  theme="icon primary"
+                  class="p-0"
+                  ?disabled=${this.disabled || this.in('busy')}
+                  @click=${this.__go}
+                >
+                  <iron-icon class="icon-inline text-m" icon="icons:arrow-forward"></iron-icon>
+                </vaadin-button>
+              `
+            : html `
+                <vaadin-button
+                  title=${this.t('refresh')}
+                  theme="icon contrast"
+                  class="p-0"
+                  ?disabled=${this.disabled || this.in('busy')}
+                  @click=${() => this.refresh()}
+                >
+                  <iron-icon class="icon-inline text-m" icon="icons:refresh"></iron-icon>
+                </vaadin-button>
+              `}
 
           <div class="grid grid-cols-2">
             <vaadin-button
@@ -133,12 +146,14 @@ export class ApiBrowser extends Base {
           @navigate:get=${(evt) => {
             evt.stopPropagation();
             this.__history.push({ href: this.href, parent: this.parent });
+            this.__newCurrentUrl = null;
             this.parent = '';
             this.href = evt.detail;
         }}
           @navigate:post=${(evt) => {
             evt.stopPropagation();
             this.__history.push({ href: this.href, parent: this.parent });
+            this.__newCurrentUrl = null;
             this.parent = evt.detail;
             this.href = '';
         }}
@@ -217,5 +232,13 @@ export class ApiBrowser extends Base {
         this.parent = '';
         this.href = (_a = this.home) !== null && _a !== void 0 ? _a : '';
     }
+    __go() {
+        if (typeof this.__newCurrentUrl === 'string') {
+            this.__history.push({ href: this.href, parent: this.parent });
+            const property = this.href ? 'href' : 'parent';
+            this[property] = this.__newCurrentUrl;
+            this.__newCurrentUrl = null;
+        }
+    }
 }
 //# sourceMappingURL=ApiBrowser.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ApiBrowser.js","sourceRoot":"","sources":["../../../../src/elements/public/ApiBrowser/ApiBrowser.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { InternalApiBrowserResourceForm } from './internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm';\nimport type { ItemRendererContext } from '../CollectionPage/types';\nimport type { FetchEvent } from '../NucleonElement/FetchEvent';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { html } from 'lit-element';\n\nimport debounce from 'lodash-es/debounce';\n\nconst NS = 'api-browser';\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Interactive hAPI explorer.\n *\n * @element foxy-api-explorer\n * @since 1.17.0\n */\nexport class ApiBrowser extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __history: { attribute: false },\n      home: { type: String },\n    };\n  }\n\n  /** Bookmark URL of your API. */\n  home: string | null = null;\n\n  private __history: { href: string; parent: string }[] = [];\n\n  private __debounce = debounce((callback: () => void) => callback(), 250);\n\n  private __renderItem = ({ href, html }: ItemRendererContext<Data>) => {\n    if (!href) return html``;\n    return html`\n      <foxy-internal-api-browser-resource-form infer=\"\" href=${href}>\n      </foxy-internal-api-browser-resource-form>\n    `;\n  };\n\n  private __handleExistingResourceFetch = (evt: FetchEvent) => {\n    if (evt.request.method === 'DELETE') {\n      evt.preventDefault();\n      evt.respondWith(\n        new ApiBrowser.API(this).fetch(evt.request).then(response => {\n          if (response.ok) {\n            if (this.__canGoBack) {\n              this.__goBack();\n            } else if (this.__canGoHome) {\n              this.__goHome();\n            } else {\n              this.parent = '';\n              this.href = '';\n            }\n          }\n\n          return response;\n        })\n      );\n    }\n  };\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"space-y-m\">\n        <div class=\"flex items-center gap-s flex-wrap-reverse\">\n          <vaadin-button\n            title=${this.t('go_back')}\n            theme=\"icon contrast\"\n            class=\"p-0\"\n            ?disabled=${this.disabled || !this.__canGoBack}\n            @click=${() => this.__goBack()}\n          >\n            <iron-icon class=\"icon-inline text-m\" icon=\"icons:arrow-back\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-button\n            title=${this.t('go_home')}\n            theme=\"icon contrast\"\n            class=\"p-0\"\n            ?disabled=${this.disabled || !this.__canGoHome}\n            @click=${() => this.__goHome()}\n          >\n            <iron-icon class=\"icon-inline text-m\" icon=\"icons:home\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-text-field\n            placeholder=\"https://api.foxy.io/stores/0\"\n            aria-label=${this.t('current_url')}\n            class=\"flex-1\"\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            .value=${this.href || this.parent}\n            @input=${(evt: CustomEvent) => {\n              const field = evt.currentTarget as TextFieldElement;\n              const value = field.value;\n              const property = this.href ? 'href' : 'parent';\n\n              this.__debounce(() => (this[property] = value));\n            }}\n          >\n          </vaadin-text-field>\n\n          <vaadin-button\n            title=${this.t('refresh')}\n            theme=\"icon contrast\"\n            class=\"p-0\"\n            ?disabled=${this.disabled || this.in('busy')}\n            @click=${() => this.refresh()}\n          >\n            <iron-icon class=\"icon-inline text-m\" icon=\"icons:refresh\"></iron-icon>\n          </vaadin-button>\n\n          <div class=\"grid grid-cols-2\">\n            <vaadin-button\n              title=${this.t('get_mode')}\n              theme=${this.href ? 'contrast primary' : 'contrast'}\n              class=\"rounded-r-none p-0\"\n              ?disabled=${this.disabled || this.__mode === 'get'}\n              @click=${() => (this.__mode = 'get')}\n            >\n              GET\n            </vaadin-button>\n\n            <vaadin-button\n              title=${this.t('post_mode')}\n              theme=${this.href ? 'contrast' : 'contrast primary'}\n              class=\"rounded-l-none p-0\"\n              ?disabled=${this.disabled || this.__mode === 'post'}\n              @click=${() => (this.__mode = 'post')}\n            >\n              POST\n            </vaadin-button>\n          </div>\n        </div>\n\n        <div\n          @navigate:get=${(evt: CustomEvent<string>) => {\n            evt.stopPropagation();\n            this.__history.push({ href: this.href, parent: this.parent });\n            this.parent = '';\n            this.href = evt.detail;\n          }}\n          @navigate:post=${(evt: CustomEvent<string>) => {\n            evt.stopPropagation();\n            this.__history.push({ href: this.href, parent: this.parent });\n            this.parent = evt.detail;\n            this.href = '';\n          }}\n        >\n          ${this.href\n            ? html`\n                ${this.data?._links.first\n                  ? html`\n                      <foxy-pagination first=${this.href} infer=\"\">\n                        <foxy-collection-page\n                          class=\"block space-y-m mb-m\"\n                          infer=\"\"\n                          .item=${this.__renderItem as any}\n                        >\n                        </foxy-collection-page>\n                      </foxy-pagination>\n                    `\n                  : html`\n                      <foxy-internal-api-browser-resource-form\n                        infer=\"\"\n                        href=${this.href}\n                        open\n                        @fetch=${this.__handleExistingResourceFetch}\n                      >\n                      </foxy-internal-api-browser-resource-form>\n                    `}\n              `\n            : html`\n                <foxy-internal-api-browser-resource-form\n                  infer=\"\"\n                  parent=${this.parent}\n                  open\n                  @update=${(evt: CustomEvent) => {\n                    const form = evt.currentTarget as InternalApiBrowserResourceForm;\n                    if (form.in({ idle: 'snapshot' })) {\n                      this.href = form.data._links.self.href;\n                      this.parent = '';\n                    }\n                  }}\n                >\n                </foxy-internal-api-browser-resource-form>\n              `}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __canGoBack() {\n    return this.__history.length > 0;\n  }\n\n  private get __canGoHome() {\n    return this.href !== this.home;\n  }\n\n  private get __mode() {\n    return this.href ? 'get' : 'post';\n  }\n\n  private set __mode(newValue: 'get' | 'post') {\n    if (newValue === 'get') {\n      this.href = this.parent;\n      this.parent = '';\n    } else {\n      this.parent = this.href;\n      this.href = '';\n    }\n  }\n\n  private __goBack() {\n    const index = this.__history.length - 1;\n    const entry = this.__history[index];\n\n    this.parent = entry?.parent ?? '';\n    this.href = entry?.href ?? '';\n    this.__history = this.__history.slice(0, index);\n  }\n\n  private __goHome() {\n    this.__history = [];\n    this.parent = '';\n    this.href = this.home ?? '';\n  }\n}\n"]}
+{"version":3,"file":"ApiBrowser.js","sourceRoot":"","sources":["../../../../src/elements/public/ApiBrowser/ApiBrowser.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { InternalApiBrowserResourceForm } from './internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm';\nimport type { ItemRendererContext } from '../CollectionPage/types';\nimport type { FetchEvent } from '../NucleonElement/FetchEvent';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { html } from 'lit-element';\n\nconst NS = 'api-browser';\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Interactive hAPI explorer.\n *\n * @element foxy-api-explorer\n * @since 1.17.0\n */\nexport class ApiBrowser extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __newCurrentUrl: { attribute: false },\n      __history: { attribute: false },\n      home: { type: String },\n    };\n  }\n\n  /** Bookmark URL of your API. */\n  home: string | null = null;\n\n  private __newCurrentUrl: string | null = null;\n\n  private __history: { href: string; parent: string }[] = [];\n\n  private __renderItem = ({ href, html }: ItemRendererContext<Data>) => {\n    if (!href) return html``;\n    return html`\n      <foxy-internal-api-browser-resource-form infer=\"\" href=${href}>\n      </foxy-internal-api-browser-resource-form>\n    `;\n  };\n\n  private __handleExistingResourceFetch = (evt: FetchEvent) => {\n    if (evt.request.method === 'DELETE') {\n      evt.preventDefault();\n      evt.respondWith(\n        new ApiBrowser.API(this).fetch(evt.request).then(response => {\n          if (response.ok) {\n            if (this.__canGoBack) {\n              this.__goBack();\n            } else if (this.__canGoHome) {\n              this.__goHome();\n            } else {\n              this.parent = '';\n              this.href = '';\n            }\n          }\n\n          return response;\n        })\n      );\n    }\n  };\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"space-y-m\">\n        <div class=\"flex items-center gap-s flex-wrap-reverse\">\n          <vaadin-button\n            title=${this.t('go_back')}\n            theme=\"icon contrast\"\n            class=\"p-0\"\n            ?disabled=${this.disabled || !this.__canGoBack}\n            @click=${() => this.__goBack()}\n          >\n            <iron-icon class=\"icon-inline text-m\" icon=\"icons:arrow-back\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-button\n            title=${this.t('go_home')}\n            theme=\"icon contrast\"\n            class=\"p-0\"\n            ?disabled=${this.disabled || !this.__canGoHome}\n            @click=${() => this.__goHome()}\n          >\n            <iron-icon class=\"icon-inline text-m\" icon=\"icons:home\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-text-field\n            placeholder=\"https://api.foxy.io/stores/0\"\n            aria-label=${this.t('current_url')}\n            class=\"flex-1\"\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            .value=${this.__newCurrentUrl || this.href || this.parent}\n            @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.__go()}\n            @input=${(evt: CustomEvent) => {\n              const field = evt.currentTarget as TextFieldElement;\n              this.__newCurrentUrl = field.value;\n            }}\n          >\n          </vaadin-text-field>\n\n          ${this.__newCurrentUrl\n            ? html`\n                <vaadin-button\n                  title=${this.t('navigate')}\n                  theme=\"icon primary\"\n                  class=\"p-0\"\n                  ?disabled=${this.disabled || this.in('busy')}\n                  @click=${this.__go}\n                >\n                  <iron-icon class=\"icon-inline text-m\" icon=\"icons:arrow-forward\"></iron-icon>\n                </vaadin-button>\n              `\n            : html`\n                <vaadin-button\n                  title=${this.t('refresh')}\n                  theme=\"icon contrast\"\n                  class=\"p-0\"\n                  ?disabled=${this.disabled || this.in('busy')}\n                  @click=${() => this.refresh()}\n                >\n                  <iron-icon class=\"icon-inline text-m\" icon=\"icons:refresh\"></iron-icon>\n                </vaadin-button>\n              `}\n\n          <div class=\"grid grid-cols-2\">\n            <vaadin-button\n              title=${this.t('get_mode')}\n              theme=${this.href ? 'contrast primary' : 'contrast'}\n              class=\"rounded-r-none p-0\"\n              ?disabled=${this.disabled || this.__mode === 'get'}\n              @click=${() => (this.__mode = 'get')}\n            >\n              GET\n            </vaadin-button>\n\n            <vaadin-button\n              title=${this.t('post_mode')}\n              theme=${this.href ? 'contrast' : 'contrast primary'}\n              class=\"rounded-l-none p-0\"\n              ?disabled=${this.disabled || this.__mode === 'post'}\n              @click=${() => (this.__mode = 'post')}\n            >\n              POST\n            </vaadin-button>\n          </div>\n        </div>\n\n        <div\n          @navigate:get=${(evt: CustomEvent<string>) => {\n            evt.stopPropagation();\n            this.__history.push({ href: this.href, parent: this.parent });\n            this.__newCurrentUrl = null;\n            this.parent = '';\n            this.href = evt.detail;\n          }}\n          @navigate:post=${(evt: CustomEvent<string>) => {\n            evt.stopPropagation();\n            this.__history.push({ href: this.href, parent: this.parent });\n            this.__newCurrentUrl = null;\n            this.parent = evt.detail;\n            this.href = '';\n          }}\n        >\n          ${this.href\n            ? html`\n                ${this.data?._links.first\n                  ? html`\n                      <foxy-pagination first=${this.href} infer=\"\">\n                        <foxy-collection-page\n                          class=\"block space-y-m mb-m\"\n                          infer=\"\"\n                          .item=${this.__renderItem as any}\n                        >\n                        </foxy-collection-page>\n                      </foxy-pagination>\n                    `\n                  : html`\n                      <foxy-internal-api-browser-resource-form\n                        infer=\"\"\n                        href=${this.href}\n                        open\n                        @fetch=${this.__handleExistingResourceFetch}\n                      >\n                      </foxy-internal-api-browser-resource-form>\n                    `}\n              `\n            : html`\n                <foxy-internal-api-browser-resource-form\n                  infer=\"\"\n                  parent=${this.parent}\n                  open\n                  @update=${(evt: CustomEvent) => {\n                    const form = evt.currentTarget as InternalApiBrowserResourceForm;\n                    if (form.in({ idle: 'snapshot' })) {\n                      this.href = form.data._links.self.href;\n                      this.parent = '';\n                    }\n                  }}\n                >\n                </foxy-internal-api-browser-resource-form>\n              `}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __canGoBack() {\n    return this.__history.length > 0;\n  }\n\n  private get __canGoHome() {\n    return this.href !== this.home;\n  }\n\n  private get __mode() {\n    return this.href ? 'get' : 'post';\n  }\n\n  private set __mode(newValue: 'get' | 'post') {\n    if (newValue === 'get') {\n      this.href = this.parent;\n      this.parent = '';\n    } else {\n      this.parent = this.href;\n      this.href = '';\n    }\n  }\n\n  private __goBack() {\n    const index = this.__history.length - 1;\n    const entry = this.__history[index];\n\n    this.parent = entry?.parent ?? '';\n    this.href = entry?.href ?? '';\n    this.__history = this.__history.slice(0, index);\n  }\n\n  private __goHome() {\n    this.__history = [];\n    this.parent = '';\n    this.href = this.home ?? '';\n  }\n\n  private __go() {\n    if (typeof this.__newCurrentUrl === 'string') {\n      this.__history.push({ href: this.href, parent: this.parent });\n      const property = this.href ? 'href' : 'parent';\n      this[property] = this.__newCurrentUrl;\n      this.__newCurrentUrl = null;\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+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;
+};
+/**
+ * Card element displaying an applied coupon code.
+ *
+ * @element foxy-applied-coupon-code-card
+ * @since 1.21.0
+ */
+export declare class AppliedCouponCodeCard extends Base<Data> {
+    private __couponLoaderId;
+    renderBody(): TemplateResult;
+    get isBodyReady(): boolean;
+    private get __couponLoader();
+    private get __coupon();
+}
+export {};

package/dist/elements/public/AppliedCouponCodeCard/AppliedCouponCodeCard.js

@@ -0,0 +1,48 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+const NS = 'applied-coupon-code-card';
+const Base = ResponsiveMixin(TranslatableMixin(InternalCard, NS));
+/**
+ * Card element displaying an applied coupon code.
+ *
+ * @element foxy-applied-coupon-code-card
+ * @since 1.21.0
+ */
+export class AppliedCouponCodeCard extends Base {
+    constructor() {
+        super(...arguments);
+        this.__couponLoaderId = 'couponLoader';
+    }
+    renderBody() {
+        var _a, _b, _c;
+        return html `
+      <foxy-nucleon
+        infer=""
+        class="hidden"
+        href=${ifDefined((_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:coupon'].href)}
+        id=${this.__couponLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <div class="leading-s text-m font-lumo sm-flex sm-justify-between">
+        <div class="font-semibold min-w-0 truncate">${(_b = this.data) === null || _b === void 0 ? void 0 : _b.code}&ZeroWidthSpace;</div>
+        <div class="text-tertiary min-w-0 truncate">${(_c = this.__coupon) === null || _c === void 0 ? void 0 : _c.name}&ZeroWidthSpace;</div>
+      </div>
+    `;
+    }
+    get isBodyReady() {
+        return super.isBodyReady && !!this.__coupon;
+    }
+    get __couponLoader() {
+        return this.renderRoot.querySelector(`#${this.__couponLoaderId}`);
+    }
+    get __coupon() {
+        var _a;
+        return (_a = this.__couponLoader) === null || _a === void 0 ? void 0 : _a.data;
+    }
+}
+//# sourceMappingURL=AppliedCouponCodeCard.js.map