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

package/dist/elements/public/CartForm/CartForm.js

@@ -0,0 +1,603 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+import set from 'lodash-es/set';
+import get from 'lodash-es/get';
+const NS = 'cart-form';
+const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+export class CartForm extends Base {
+    constructor() {
+        super(...arguments);
+        this.itemCategories = null;
+        this.templateSets = null;
+        this.localeCodes = null;
+        this.customers = null;
+        this.countries = null;
+        this.regions = null;
+        this.coupons = null;
+        this.__defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';
+        this.__localeCodesHelperLoaderId = 'localeCodesLoader';
+        this.__shippingRegionsLoaderId = 'shippingRegionsLoader';
+        this.__billingRegionsLoaderId = 'billingRegionsLoader';
+        this.__templateSetLoaderId = 'templateSetLoader';
+        this.__countriesHelperLoaderId = 'countriesHelperLoader';
+        this.__discountsLoaderId = 'discountsLoader';
+        this.__customerLoaderId = 'customerLoader';
+        this.__storeLoaderId = 'storeLoader';
+        this.__customerTypeGetValue = () => {
+            var _a;
+            if (!this.form.customer_uri)
+                return 'new';
+            return ((_a = this.__customer) === null || _a === void 0 ? void 0 : _a.is_anonymous) ? 'guest' : 'regular';
+        };
+        this.__customerTypeSetValue = (newValue) => {
+            this.edit({ customer_uri: '', customer_email: '' });
+            this.__isGuestMode = newValue === 'guest';
+        };
+        this.__customerTypeOptions = [
+            { label: 'option_new', value: 'new' },
+            { label: 'option_guest', value: 'guest' },
+            { label: 'option_regular', value: 'regular' },
+        ];
+        this.__customerGetValue = () => {
+            return this.form.customer_uri || this.form.customer_email;
+        };
+        this.__customerSetValue = (newValue) => {
+            try {
+                // if newValue isn't a fx:customer URI this will error
+                new URL(newValue);
+                // filter customer_email out of edits because when supplying the customer_uri the email must
+                // be that customer's email and it might not be immediately available at the time this getter is called
+                const newEdits = {};
+                const data = this.data;
+                const form = this.form;
+                for (const key in this.form) {
+                    if (key === 'customer_email')
+                        continue;
+                    const formValue = get(form, key);
+                    if (get(data, key) !== formValue)
+                        set(newEdits, key, formValue);
+                }
+                this.undo();
+                this.edit({ ...newEdits, customer_uri: newValue });
+            }
+            catch (_a) {
+                this.edit({ customer_uri: '', customer_email: newValue });
+            }
+        };
+        this.__isGuestMode = false;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            itemCategories: { attribute: 'item-categories' },
+            templateSets: { attribute: 'template-sets' },
+            localeCodes: { attribute: 'locale-codes' },
+            customers: {},
+            countries: {},
+            regions: {},
+            coupons: {},
+            __isGuestMode: { attribute: false },
+        };
+    }
+    static get v8n() {
+        return [
+            ({ billing_first_name: v }) => !v || v.length <= 50 || 'billing_first_name:v8n_too_long',
+            ({ billing_last_name: v }) => !v || v.length <= 50 || 'billing_last_name:v8n_too_long',
+            ({ billing_region: v }) => !v || v.length <= 50 || 'billing_region:v8n_too_long',
+            ({ billing_city: v }) => !v || v.length <= 50 || 'billing_city:v8n_too_long',
+            ({ billing_phone: v }) => !v || v.length <= 50 || 'billing_phone:v8n_too_long',
+            ({ billing_company: v }) => !v || v.length <= 50 || 'billing_company:v8n_too_long',
+            ({ billing_address2: v }) => !v || v.length <= 100 || 'billing_address2:v8n_too_long',
+            ({ billing_address1: v }) => !v || v.length <= 100 || 'billing_address1:v8n_too_long',
+            ({ billing_postal_code: v }) => !v || v.length <= 50 || 'billing_postal_code:v8n_too_long',
+            ({ shipping_first_name: v }) => !v || v.length <= 50 || 'shipping_first_name:v8n_too_long',
+            ({ shipping_last_name: v }) => !v || v.length <= 50 || 'shipping_last_name:v8n_too_long',
+            ({ shipping_region: v }) => !v || v.length <= 50 || 'shipping_region:v8n_too_long',
+            ({ shipping_city: v }) => !v || v.length <= 50 || 'shipping_city:v8n_too_long',
+            ({ shipping_phone: v }) => !v || v.length <= 50 || 'shipping_phone:v8n_too_long',
+            ({ shipping_company: v }) => !v || v.length <= 50 || 'shipping_company:v8n_too_long',
+            ({ shipping_address2: v }) => !v || v.length <= 100 || 'shipping_address2:v8n_too_long',
+            ({ shipping_address1: v }) => !v || v.length <= 100 || 'shipping_address1:v8n_too_long',
+            ({ shipping_postal_code: v }) => !v || v.length <= 50 || 'shipping_postal_code:v8n_too_long',
+        ];
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const shippingRegions = Object.values((_a = this.__shippingRegions) !== null && _a !== void 0 ? _a : {});
+        const billingRegions = Object.values((_b = this.__billingRegions) !== null && _b !== void 0 ? _b : {});
+        const countries = Object.values((_c = this.__countriesHelper) !== null && _c !== void 0 ? _c : {});
+        const shippingRegionOptions = shippingRegions.map(r => ({ label: r.default, value: r.code }));
+        const billingRegionOptions = billingRegions.map(r => ({ label: r.default, value: r.code }));
+        const countryOptions = countries.map(c => ({ label: c.default, value: c.cc2 }));
+        const customerAddresses = (_d = this.__customer) === null || _d === void 0 ? void 0 : _d._links['fx:customer_addresses'].href;
+        const renderItemForm = ctx => {
+            var _a, _b, _c;
+            return html `
+      <foxy-item-form
+        customer-addresses=${ifDefined(customerAddresses !== null && customerAddresses !== void 0 ? customerAddresses : void 0)}
+        item-categories=${ifDefined((_a = this.itemCategories) !== null && _a !== void 0 ? _a : void 0)}
+        locale-codes=${ifDefined((_b = this.localeCodes) !== null && _b !== void 0 ? _b : void 0)}
+        coupons=${ifDefined((_c = this.coupons) !== null && _c !== void 0 ? _c : void 0)}
+        parent=${ctx.dialog.parent}
+        href=${ctx.dialog.href}
+        infer=""
+        id="form"
+        .related=${ctx.dialog.related}
+        @fetch=${ctx.handleFetch}
+        @update=${ctx.handleUpdate}
+      >
+      </foxy-item-form>
+    `;
+        };
+        const renderItemCard = ctx => html `
+      <foxy-item-card
+        locale-codes=${this.localeCodes}
+        parent=${ctx.parent}
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+        infer=""
+        href=${ctx.href}
+        .related=${ctx.related}
+      >
+      </foxy-item-card>
+    `;
+        const currencyDisplay = ((_e = this.__store) === null || _e === void 0 ? void 0 : _e.use_international_currency_symbol) ? 'code' : 'symbol';
+        let currencyCode = null;
+        if ('currency_code' in this.form) {
+            // TODO: remove the directive below once the SDK is updated
+            // @ts-expect-error SDK types are incomplete
+            currencyCode = this.form.currency_code;
+        }
+        else {
+            const allLocaleCodes = this.__localeCodesHelper;
+            const localeCode = (_g = ((_f = this.__templateSet) !== null && _f !== void 0 ? _f : this.__defaultTemplateSet)) === null || _g === void 0 ? void 0 : _g.locale_code;
+            const localeInfo = localeCode ? allLocaleCodes === null || allLocaleCodes === void 0 ? void 0 : allLocaleCodes.values[localeCode] : void 0;
+            if (localeInfo)
+                currencyCode = (_j = (_h = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _h === void 0 ? void 0 : _h[1]) !== null && _j !== void 0 ? _j : null;
+        }
+        return html `
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__shippingRegionsHref)}
+        id=${this.__shippingRegionsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__billingRegionsHref)}
+        id=${this.__billingRegionsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__countriesHref)}
+        id=${this.__countriesHelperLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__customerHref)}
+        id=${this.__customerLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__discountsHref)}
+        id=${this.__discountsLoaderId}
+        @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.__storeHref)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <div class="grid sm-grid-cols-2 gap-l">
+        <div class="sm-col-span-2">
+          <foxy-i18n class="text-l font-bold leading-s block" infer="" key="order_section_title">
+          </foxy-i18n>
+
+          <foxy-i18n
+            class="text-s text-secondary leading-s block"
+            infer=""
+            key="order_section_description"
+          >
+          </foxy-i18n>
+        </div>
+
+        <foxy-internal-select-control
+          infer="customer-type"
+          .getValue=${this.__customerTypeGetValue}
+          .setValue=${this.__customerTypeSetValue}
+          .options=${this.__customerTypeOptions}
+          @update=${() => this.requestUpdate()}
+        >
+        </foxy-internal-select-control>
+
+        <foxy-internal-async-combo-box-control
+          item-label-path="email"
+          item-value-path="_links.self.href"
+          item-id-path="_links.self.href"
+          first=${ifDefined(this.__customersHref)}
+          infer="customer"
+          allow-custom-value
+          .selectedItem=${this.__customer}
+          .getValue=${this.__customerGetValue}
+          .setValue=${this.__customerSetValue}
+        >
+        </foxy-internal-async-combo-box-control>
+
+        <foxy-internal-async-combo-box-control
+          item-label-path="description"
+          item-value-path="_links.self.href"
+          item-id-path="_links.self.href"
+          first=${ifDefined(this.templateSets)}
+          class="sm-col-span-2"
+          infer="template-set-uri"
+          .selectedItem=${(_k = this.__templateSet) !== null && _k !== void 0 ? _k : null}
+        >
+        </foxy-internal-async-combo-box-control>
+
+        <foxy-internal-async-list-control
+          infer="items"
+          class="min-w-0 sm-col-span-2"
+          first=${ifDefined(this.__itemsHref)}
+          limit="5"
+          .item=${renderItemCard}
+          .form=${this.data ? renderItemForm : null}
+        >
+        </foxy-internal-async-list-control>
+
+        <foxy-internal-async-list-control
+          infer="applied-coupon-codes"
+          class="min-w-0 sm-col-span-2"
+          first=${ifDefined((_l = this.data) === null || _l === void 0 ? void 0 : _l._links['fx:applied_coupon_codes'].href)}
+          limit="5"
+          item="foxy-applied-coupon-code-card"
+          form=${ifDefined(this.data ? 'foxy-applied-coupon-code-form' : void 0)}
+          alert
+        >
+        </foxy-internal-async-list-control>
+
+        <foxy-internal-async-list-control
+          infer="custom-fields"
+          class="min-w-0"
+          first=${ifDefined((_m = this.data) === null || _m === void 0 ? void 0 : _m._links['fx:custom_fields'].href)}
+          limit="5"
+          item="foxy-custom-field-card"
+          form=${ifDefined(this.data ? 'foxy-custom-field-form' : void 0)}
+          alert
+        >
+        </foxy-internal-async-list-control>
+
+        <foxy-internal-async-list-control
+          infer="attributes"
+          class="min-w-0"
+          first=${ifDefined((_o = this.data) === null || _o === void 0 ? void 0 : _o._links['fx:attributes'].href)}
+          limit="5"
+          item="foxy-attribute-card"
+          form=${ifDefined(this.data ? 'foxy-attribute-form' : void 0)}
+          alert
+        >
+        </foxy-internal-async-list-control>
+
+        <div class="grid gap-l">
+          <div>
+            <foxy-i18n
+              class="text-l font-bold leading-s block"
+              infer=""
+              key="billing_section_title"
+            >
+            </foxy-i18n>
+
+            <foxy-i18n
+              class="text-s text-secondary leading-s block"
+              infer=""
+              key="billing_section_description"
+            >
+            </foxy-i18n>
+          </div>
+
+          <div class="grid grid-cols-2 gap-m">
+            <foxy-internal-text-control infer="billing-first-name"></foxy-internal-text-control>
+            <foxy-internal-text-control infer="billing-last-name"></foxy-internal-text-control>
+            <foxy-internal-text-control infer="billing-company"></foxy-internal-text-control>
+            <foxy-internal-text-control infer="billing-phone"></foxy-internal-text-control>
+
+            <foxy-internal-text-control infer="billing-address1" class="col-span-2">
+            </foxy-internal-text-control>
+
+            <foxy-internal-text-control infer="billing-address2" class="col-span-2">
+            </foxy-internal-text-control>
+
+            <foxy-internal-select-control infer="billing-country" .options=${countryOptions}>
+            </foxy-internal-select-control>
+
+            <foxy-internal-select-control infer="billing-region" .options=${billingRegionOptions}>
+            </foxy-internal-select-control>
+
+            <foxy-internal-text-control infer="billing-city"></foxy-internal-text-control>
+            <foxy-internal-text-control infer="billing-postal-code"></foxy-internal-text-control>
+          </div>
+        </div>
+
+        <div class="grid gap-l">
+          <div>
+            <foxy-i18n
+              class="text-l font-bold leading-s block"
+              infer=""
+              key="shipping_section_title"
+            >
+            </foxy-i18n>
+
+            <foxy-i18n
+              class="text-s text-secondary leading-s block"
+              infer=""
+              key="shipping_section_description"
+            >
+            </foxy-i18n>
+          </div>
+
+          <div class="grid grid-cols-2 gap-m">
+            <foxy-internal-text-control infer="shipping-first-name"></foxy-internal-text-control>
+            <foxy-internal-text-control infer="shipping-last-name"></foxy-internal-text-control>
+            <foxy-internal-text-control infer="shipping-company"></foxy-internal-text-control>
+            <foxy-internal-text-control infer="shipping-phone"></foxy-internal-text-control>
+
+            <foxy-internal-text-control infer="shipping-address1" class="col-span-2">
+            </foxy-internal-text-control>
+
+            <foxy-internal-text-control infer="shipping-address2" class="col-span-2">
+            </foxy-internal-text-control>
+
+            <foxy-internal-select-control infer="shipping-country" .options=${countryOptions}>
+            </foxy-internal-select-control>
+
+            <foxy-internal-select-control infer="shipping-region" .options=${shippingRegionOptions}>
+            </foxy-internal-select-control>
+
+            <foxy-internal-text-control infer="shipping-city"></foxy-internal-text-control>
+            <foxy-internal-text-control infer="shipping-postal-code"></foxy-internal-text-control>
+          </div>
+        </div>
+
+        <div class="leading-m sm-col-span-2">
+          <div class="text-xl font-bold mb-s">
+            ${this.__renderTotalOrder(currencyCode, currencyDisplay)}
+          </div>
+          <div class="border-t border-contrast-10 mb-s"></div>
+          ${this.__renderTotals(currencyCode, currencyDisplay)}
+          ${this.__renderDiscounts(currencyCode, currencyDisplay)}
+        </div>
+
+        ${this.data
+            ? html `
+              <div class="grid gap-s sm-grid-cols-2 sm-gap-l sm-col-span-2">
+                <foxy-internal-cart-form-view-as-customer-control infer="view-as-customer">
+                </foxy-internal-cart-form-view-as-customer-control>
+                <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
+              </div>
+            `
+            : html `<foxy-internal-create-control infer="create"></foxy-internal-create-control>`}
+      </div>
+    `;
+    }
+    get __defaultTemplateSetHref() {
+        var _a, _b, _c;
+        const templateSetUri = (_a = this.data) === 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 __shippingRegionsHref() {
+        var _a;
+        try {
+            const url = new URL((_a = this.regions) !== null && _a !== void 0 ? _a : '');
+            const code = this.form.shipping_country;
+            if (code)
+                url.searchParams.set('country_code', code);
+            return url.toString();
+        }
+        catch (_b) {
+            //
+        }
+    }
+    get __billingRegionsHref() {
+        var _a;
+        try {
+            const url = new URL((_a = this.regions) !== null && _a !== void 0 ? _a : '');
+            const code = this.form.billing_country;
+            if (code)
+                url.searchParams.set('country_code', code);
+            return url.toString();
+        }
+        catch (_b) {
+            //
+        }
+    }
+    get __templateSetHref() {
+        return this.form.template_set_uri || void 0;
+    }
+    get __customersHref() {
+        var _a;
+        try {
+            const url = new URL((_a = this.customers) !== null && _a !== void 0 ? _a : '');
+            url.searchParams.set('is_anonymous', this.__isGuestMode ? '1' : '0');
+            return url.toString();
+        }
+        catch (_b) {
+            //
+        }
+    }
+    get __countriesHref() {
+        var _a;
+        return (_a = this.countries) !== null && _a !== void 0 ? _a : void 0;
+    }
+    get __discountsHref() {
+        var _a, _b;
+        try {
+            const url = new URL((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:discounts'].href) !== null && _b !== void 0 ? _b : '');
+            url.searchParams.set('limit', '300');
+            return url.toString();
+        }
+        catch (_c) {
+            //
+        }
+    }
+    get __customerHref() {
+        return this.form.customer_uri || void 0;
+    }
+    get __itemsHref() {
+        var _a, _b;
+        try {
+            const url = new URL((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:items'].href) !== null && _b !== void 0 ? _b : '');
+            url.searchParams.set('zoom', 'item_options');
+            return url.toString();
+        }
+        catch (_c) {
+            //
+        }
+    }
+    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 __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 __shippingRegions() {
+        var _a;
+        const loader = this.renderRoot.querySelector(`#${this.__shippingRegionsLoaderId}`);
+        return (_a = loader === null || loader === void 0 ? void 0 : loader.data) === null || _a === void 0 ? void 0 : _a.values;
+    }
+    get __billingRegions() {
+        var _a;
+        const loader = this.renderRoot.querySelector(`#${this.__billingRegionsLoaderId}`);
+        return (_a = loader === null || loader === void 0 ? void 0 : loader.data) === null || _a === void 0 ? void 0 : _a.values;
+    }
+    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 __discounts() {
+        return this.renderRoot.querySelector(`#${this.__discountsLoaderId}`);
+    }
+    get __countriesHelper() {
+        var _a;
+        const loader = this.renderRoot.querySelector(`#${this.__countriesHelperLoaderId}`);
+        return (_a = loader === null || loader === void 0 ? void 0 : loader.data) === null || _a === void 0 ? void 0 : _a.values;
+    }
+    get __customer() {
+        var _a;
+        return (_a = this.renderRoot.querySelector(`#${this.__customerLoaderId}`)) === null || _a === void 0 ? void 0 : _a.data;
+    }
+    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;
+    }
+    __renderTotalOrder(currency, currencyDisplay) {
+        const data = this.data;
+        if (!data)
+            return html `--`;
+        const options = { amount: `${data.total_order} ${currency}`, currencyDisplay };
+        return html `<foxy-i18n infer="totals" key="total_order" .options=${options}></foxy-i18n>`;
+    }
+    __renderTotals(currency, currencyDisplay) {
+        const keys = ['total_item_price', 'total_shipping', 'total_tax'];
+        const data = this.data;
+        return keys.map(key => {
+            const options = { amount: `${data === null || data === void 0 ? void 0 : data[key]} ${currency}`, currencyDisplay };
+            return html `
+        <div class="flex justify-between text-m text-secondary">
+          <foxy-i18n key=${key} infer="totals"></foxy-i18n>
+          ${data
+                ? html `<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
+                : html `<span>--</span>`}
+        </div>
+      `;
+        });
+    }
+    __renderDiscounts(currency, currencyDisplay) {
+        var _a, _b;
+        return (_b = (_a = this.__discounts) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._embedded['fx:discounts'].map(discount => {
+            const options = { amount: `${discount.amount} ${currency}`, currencyDisplay };
+            return html `
+        <div class="flex justify-between text-m text-secondary">
+          <span>${discount.name} &bull; ${discount.code}</span>
+          <foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>
+        </div>
+      `;
+        });
+    }
+}
+//# sourceMappingURL=CartForm.js.map