@foxy.io/elements 1.28.0 → 1.29.0-beta.1

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

@@ -1,10 +1,10 @@
+import { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';
 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 { Type } from "../QueryBuilder/types.js";
 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));
 /**
@@ -16,12 +16,16 @@ const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
 export class CartForm extends Base {
     constructor() {
         super(...arguments);
+        /** Payment Card Embed configuration URL. The form will append template set parameter on its own. */
+        this.paymentCardEmbedUrl = null;
         /** URL of the `fx:item_categories` collection for the store. */
         this.itemCategories = null;
         /** URL of the `fx:template_sets` collection for the store. */
         this.templateSets = null;
         /** URL of the `fx:locale_codes` property helper. */
         this.localeCodes = null;
+        /** URL of the `fx:languages` property helper. */
+        this.languages = null;
         /** URL of the `fx:customers` collection for the store. */
         this.customers = null;
         /** URL of the `fx:countries` property helper. */
@@ -30,76 +34,119 @@ export class CartForm extends Base {
         this.regions = null;
         /** URL of the `fx:coupons` collection for the store. */
         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.__languagesLoaderId = 'languagesLoader';
         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.__paymentMethodUriGetDisplayValueOptions = (payments, defaultContext) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const payment = (_c = (_b = (_a = payments === null || payments === void 0 ? void 0 : payments._embedded) === null || _a === void 0 ? void 0 : _a['fx:payments']) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null;
+            let ccExpMonth;
+            let ccExpYear;
+            let ccLast4;
+            let ccType;
+            if (payment) {
+                ccExpMonth = payment.cc_exp_month;
+                ccExpYear = payment.cc_exp_year;
+                ccLast4 = (_d = payment.cc_number_masked) === null || _d === void 0 ? void 0 : _d.replace(/x/g, '');
+                ccType = payment.cc_type;
+            }
+            else {
+                const customer = this.__customer;
+                const defaultPaymentMethod = customer === null || customer === void 0 ? void 0 : customer._embedded['fx:default_payment_method'];
+                ccExpMonth = (_e = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.cc_exp_month) !== null && _e !== void 0 ? _e : null;
+                ccExpYear = (_f = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.cc_exp_year) !== null && _f !== void 0 ? _f : null;
+                ccLast4 = (_h = (_g = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.cc_number_masked) === null || _g === void 0 ? void 0 : _g.replace(/x/g, '')) !== null && _h !== void 0 ? _h : null;
+                ccType = (_j = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.cc_type) !== null && _j !== void 0 ? _j : null;
+            }
+            return {
+                cc_exp_month: ccExpMonth !== null && ccExpMonth !== void 0 ? ccExpMonth : '',
+                cc_exp_year: ccExpYear !== null && ccExpYear !== void 0 ? ccExpYear : '',
+                cc_last4: ccLast4 !== null && ccLast4 !== void 0 ? ccLast4 : '',
+                cc_type: ccType !== null && ccType !== void 0 ? ccType : '',
+                context: defaultContext || (ccLast4 && ccExpMonth && ccExpYear && ccType ? '' : 'empty'),
+            };
         };
-        this.__customerSetValue = (newValue) => {
+        this.__paymentMethodUriSetValue = (transactionUrl) => {
             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 });
+                // TODO use links instead of constructing the URL manually
+                const url = new URL(transactionUrl);
+                url.search = '';
+                url.pathname += '/payments';
+                this.edit({ payment_method_uri: url.toString() });
             }
-            catch (_a) {
-                this.edit({ customer_uri: '', customer_email: newValue });
+            catch (err) {
+                this.edit({ payment_method_uri: '' });
             }
         };
-        this.__isGuestMode = false;
+        this.__paymentMethodUriFilters = [
+            {
+                label: 'filter_type',
+                type: Type.String,
+                path: 'payments:type',
+                list: [
+                    { label: 'filter_type_value_purchase_order', value: 'purchase_order' },
+                    { label: 'filter_type_value_amazon_mws', value: 'amazon_mws' },
+                    { label: 'filter_type_value_paypal_ec', value: 'paypal_ec' },
+                    { label: 'filter_type_value_paypal', value: 'paypal' },
+                    { label: 'filter_type_value_hosted', value: 'hosted' },
+                    { label: 'filter_type_value_ogone', value: 'ogone' },
+                ],
+            },
+            {
+                label: 'filter_cc_type',
+                type: Type.String,
+                path: 'payments:cc_type',
+                list: [
+                    { label: 'filter_cc_type_value_mastercard', value: 'mastercard' },
+                    { label: 'filter_cc_type_value_discover', value: 'discover' },
+                    { label: 'filter_cc_type_value_unionpay', value: 'unionpay' },
+                    { label: 'filter_cc_type_value_maestro', value: 'maestro' },
+                    { label: 'filter_cc_type_value_diners', value: 'diners' },
+                    { label: 'filter_cc_type_value_visa', value: 'visa' },
+                    { label: 'filter_cc_type_value_amex', value: 'amex' },
+                    { label: 'filter_cc_type_value_jcb', value: 'jcb' },
+                ],
+            },
+            {
+                label: 'filter_cc_number_masked',
+                type: Type.String,
+                path: 'payments:cc_number_masked',
+            },
+        ];
+        this.__customerUriSetValue = (newValue) => {
+            this.edit({ customer_uri: newValue, customer_email: '' });
+        };
+        this.__customerUriOptions = [
+            { label: 'filter_email', path: 'email', type: Type.String },
+            {
+                label: 'filter_is_anonymous',
+                path: 'is_anonymous',
+                type: Type.String,
+                list: [
+                    { value: 'false', label: 'filter_is_anonymous_value_false' },
+                    { value: 'true', label: 'filter_is_anonymous_value_true' },
+                ],
+            },
+        ];
     }
     static get properties() {
         return {
             ...super.properties,
+            paymentCardEmbedUrl: { attribute: 'payment-card-embed-url' },
             itemCategories: { attribute: 'item-categories' },
             templateSets: { attribute: 'template-sets' },
             localeCodes: { attribute: 'locale-codes' },
+            languages: {},
             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_state: v }) => !v || v.length <= 50 || 'billing-state: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',
@@ -108,7 +155,7 @@ export class CartForm extends Base {
             ({ 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_state: v }) => !v || v.length <= 50 || 'shipping-state: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',
@@ -117,292 +164,170 @@ export class CartForm extends Base {
             ({ 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;
-        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}
-        infer=""
-        href=${ctx.href}
-        .related=${ctx.related}
-      >
-      </foxy-item-card>
-    `;
-        const store = this.__store;
-        const currencyDisplay = store
-            ? store.use_international_currency_symbol
-                ? 'code'
-                : 'symbol'
-            : void 0;
-        let currencyCode = null;
-        if (this.form.currency_code) {
-            currencyCode = this.form.currency_code;
+    get hiddenSelector() {
+        const alwaysMatch = [super.hiddenSelector.toString()];
+        if (this.form.customer_uri) {
+            alwaysMatch.unshift('general:customer-email');
+        }
+        else {
+            alwaysMatch.unshift('billing:payment-method-uri');
+        }
+        if (this.data) {
+            if (!this.form.use_customer_shipping_address) {
+                alwaysMatch.unshift('shipping:shipping-address');
+            }
         }
         else {
-            const allLocaleCodes = this.__localeCodesHelper;
-            const localeCode = (_f = ((_e = this.__templateSet) !== null && _e !== void 0 ? _e : this.__defaultTemplateSet)) === null || _f === void 0 ? void 0 : _f.locale_code;
-            const localeInfo = localeCode ? allLocaleCodes === null || allLocaleCodes === void 0 ? void 0 : allLocaleCodes.values[localeCode] : void 0;
-            if (localeInfo)
-                currencyCode = (_h = (_g = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : null;
+            alwaysMatch.unshift('applied-coupon-codes', 'custom-fields', 'attributes', 'shipping', 'billing', 'totals', 'items');
         }
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
+    }
+    renderHeaderActions() {
+        return html `
+      <foxy-internal-cart-form-create-session-action infer="view-as-customer">
+      </foxy-internal-cart-form-create-session-action>
+    `;
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const links = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links;
+        const customer = this.__customer;
+        const customerAddresses = customer === null || customer === void 0 ? void 0 : customer._links['fx:customer_addresses'].href;
         return html `
       ${this.renderHeader()}
 
-      <div class="grid sm-grid-cols-2 gap-l">
-        <div class="sm-col-span-2">
-          <foxy-i18n class="text-l font-medium 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-summary-control infer="general">
+        <foxy-internal-resource-picker-control
+          layout="summary-item"
+          first=${ifDefined((_b = this.templateSets) !== null && _b !== void 0 ? _b : void 0)}
+          infer="template-set-uri"
+          item="foxy-template-set-card"
+        >
+        </foxy-internal-resource-picker-control>
 
         <foxy-internal-select-control
-          infer="customer-type"
-          .getValue=${this.__customerTypeGetValue}
-          .setValue=${this.__customerTypeSetValue}
-          .options=${this.__customerTypeOptions}
-          @update=${() => this.requestUpdate()}
+          layout="summary-item"
+          infer="language"
+          .options=${this.__languageOptions}
         >
         </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=${(_j = this.__templateSet) !== null && _j !== void 0 ? _j : 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-resource-picker-control
+          layout="summary-item"
+          first=${ifDefined((_c = this.customers) !== null && _c !== void 0 ? _c : void 0)}
+          infer="customer-uri"
+          item="foxy-customer-card"
+          .setValue=${this.__customerUriSetValue}
+          .filters=${this.__customerUriOptions}
         >
-        </foxy-internal-async-list-control>
-
-        <foxy-internal-async-list-control
-          infer="applied-coupon-codes"
-          class="min-w-0 sm-col-span-2"
-          first=${ifDefined((_k = this.data) === null || _k === void 0 ? void 0 : _k._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-resource-picker-control>
+
+        <foxy-internal-text-control layout="summary-item" infer="customer-email">
+        </foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-async-list-control
+        infer="items"
+        class="min-w-0"
+        first=${ifDefined(this.__itemsHref)}
+        alert
+        item="foxy-item-card"
+        form="foxy-item-form"
+        .related=${this.href ? [this.href] : []}
+        .itemProps=${{ 'locale-codes': (_d = this.localeCodes) !== null && _d !== void 0 ? _d : '' }}
+        .formProps=${{
+            'customer-addresses': customerAddresses !== null && customerAddresses !== void 0 ? customerAddresses : '',
+            'item-categories': (_e = this.itemCategories) !== null && _e !== void 0 ? _e : '',
+            'locale-codes': (_f = this.localeCodes) !== null && _f !== void 0 ? _f : '',
+            'coupons': (_g = this.coupons) !== null && _g !== void 0 ? _g : '',
+        }}
+      >
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-cart-form-totals-control class="min-w-0" infer="totals">
+      </foxy-internal-cart-form-totals-control>
+
+      <foxy-internal-async-list-control
+        infer="applied-coupon-codes"
+        class="min-w-0"
+        first=${ifDefined(links === null || links === void 0 ? void 0 : links['fx:applied_coupon_codes'].href)}
+        item="foxy-applied-coupon-code-card"
+        form="foxy-applied-coupon-code-form"
+        alert
+        .related=${this.href ? [this.href] : []}
+      >
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-summary-control infer="billing">
+        <foxy-internal-resource-picker-control
+          layout="summary-item"
+          first=${ifDefined(this.__transactionsWithPaymentsUrl)}
+          infer="payment-method-uri"
+          item="foxy-internal-cart-form-payment-method-card"
+          form="foxy-internal-cart-form-payment-method-form"
+          .getDisplayValueOptions=${this.__paymentMethodUriGetDisplayValueOptions}
+          .formProps=${{
+            'default-payment-method': (_h = customer === null || customer === void 0 ? void 0 : customer._links['fx:default_payment_method'].href) !== null && _h !== void 0 ? _h : '',
+            'payment-card-embed-url': (_j = this.__pickerPaymentCardEmbedUrl) !== null && _j !== void 0 ? _j : '',
+        }}
+          .setValue=${this.__paymentMethodUriSetValue}
+          .filters=${this.__paymentMethodUriFilters}
         >
-        </foxy-internal-async-list-control>
-
-        <foxy-internal-async-list-control
-          infer="custom-fields"
-          class="min-w-0"
-          first=${ifDefined((_l = this.data) === null || _l === void 0 ? void 0 : _l._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-resource-picker-control>
+
+        <foxy-internal-cart-form-address-summary-item
+          countries=${ifDefined((_k = this.countries) !== null && _k !== void 0 ? _k : void 0)}
+          regions=${ifDefined((_l = this.regions) !== null && _l !== void 0 ? _l : void 0)}
+          infer="billing-address"
+          type="billing"
+          .customer=${customer}
         >
-        </foxy-internal-async-list-control>
-
-        <foxy-internal-async-list-control
-          infer="attributes"
-          class="min-w-0"
-          first=${ifDefined((_m = this.data) === null || _m === void 0 ? void 0 : _m._links['fx:attributes'].href)}
-          limit="5"
-          item="foxy-attribute-card"
-          form=${ifDefined(this.data ? 'foxy-attribute-form' : void 0)}
-          alert
+        </foxy-internal-cart-form-address-summary-item>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="shipping">
+        <foxy-internal-switch-control infer="use-customer-shipping-address" invert>
+        </foxy-internal-switch-control>
+
+        <foxy-internal-cart-form-address-summary-item
+          countries=${ifDefined((_m = this.countries) !== null && _m !== void 0 ? _m : void 0)}
+          regions=${ifDefined((_o = this.regions) !== null && _o !== void 0 ? _o : void 0)}
+          infer="shipping-address"
+          type="shipping"
+          .customer=${customer}
         >
-        </foxy-internal-async-list-control>
-
-        <div class="grid gap-l">
-          <div>
-            <foxy-i18n
-              class="text-l font-medium 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
-              property="billing_address1"
-              infer="billing-address-one"
-              class="col-span-2"
-            >
-            </foxy-internal-text-control>
-
-            <foxy-internal-text-control
-              property="billing_address2"
-              infer="billing-address-two"
-              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-medium 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
-              property="shipping_address1"
-              infer="shipping-address-one"
-              class="col-span-2"
-            >
-            </foxy-internal-text-control>
-
-            <foxy-internal-text-control
-              property="shipping_address2"
-              infer="shipping-address-two"
-              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-medium 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-submit-control infer="create"></foxy-internal-submit-control>`}
-      </div>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__shippingRegionsHref)}
-        id=${this.__shippingRegionsLoaderId}
-        @update=${() => this.requestUpdate()}
+        </foxy-internal-cart-form-address-summary-item>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-async-list-control
+        infer="custom-fields"
+        class="min-w-0"
+        first=${ifDefined(links === null || links === void 0 ? void 0 : links['fx:custom_fields'].href)}
+        limit="5"
+        item="foxy-custom-field-card"
+        form="foxy-custom-field-form"
+        alert
       >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__billingRegionsHref)}
-        id=${this.__billingRegionsLoaderId}
-        @update=${() => this.requestUpdate()}
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-async-list-control
+        infer="attributes"
+        class="min-w-0"
+        first=${ifDefined(links === null || links === void 0 ? void 0 : links['fx:attributes'].href)}
+        limit="5"
+        item="foxy-attribute-card"
+        form="foxy-attribute-form"
+        alert
       >
-      </foxy-nucleon>
+      </foxy-internal-async-list-control>
+
+      ${super.renderBody()}
 
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined(this.__countriesHref)}
-        id=${this.__countriesHelperLoaderId}
+        href=${ifDefined((_p = this.languages) !== null && _p !== void 0 ? _p : void 0)}
+        id=${this.__languagesLoaderId}
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
@@ -415,130 +340,43 @@ export class CartForm extends Base {
         @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>
     `;
     }
-    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;
+    get __transactionsWithPaymentsUrl() {
+        var _a, _b;
         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);
+            const url = new URL((_b = (_a = this.__customer) === null || _a === void 0 ? void 0 : _a._links['fx:transactions'].href) !== null && _b !== void 0 ? _b : '');
+            url.searchParams.set('zoom', 'payments');
             return url.toString();
         }
-        catch (_b) {
-            //
+        catch (_c) {
+            // ignore
         }
     }
-    get __billingRegionsHref() {
-        var _a;
+    get __pickerPaymentCardEmbedUrl() {
+        var _a, _b;
         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();
+            const url = new URL((_a = this.paymentCardEmbedUrl) !== null && _a !== void 0 ? _a : '');
+            const id = getResourceId((_b = this.form.template_set_uri) !== null && _b !== void 0 ? _b : '');
+            if (id !== null) {
+                url.searchParams.set('template_set_id', String(id));
+                return url.toString();
+            }
         }
-        catch (_b) {
-            //
+        catch (_c) {
+            // ignore
         }
     }
-    get __templateSetHref() {
-        return this.form.template_set_uri || void 0;
-    }
-    get __customersHref() {
+    get __customerHref() {
         var _a;
         try {
-            const url = new URL((_a = this.customers) !== null && _a !== void 0 ? _a : '');
-            url.searchParams.set('is_anonymous', this.__isGuestMode ? '1' : '0');
+            const url = new URL((_a = this.form.customer_uri) !== null && _a !== void 0 ? _a : '');
+            url.searchParams.set('zoom', 'default_payment_method,default_billing_address,default_shipping_address');
             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();
+            // ignore
         }
-        catch (_c) {
-            //
-        }
-    }
-    get __customerHref() {
-        return this.form.customer_uri || void 0;
     }
     get __itemsHref() {
         var _a, _b;
@@ -551,91 +389,15 @@ export class CartForm extends Base {
             //
         }
     }
-    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() {
+    get __languageOptions() {
         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;
+        const loader = this.renderRoot.querySelector(`#${this.__languagesLoaderId}`);
+        const values = Object.entries((_b = (_a = loader === null || loader === void 0 ? void 0 : loader.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {});
+        return values.map(([value, rawLabel]) => ({ rawLabel, value }));
     }
     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 || !currency || !currencyDisplay)
-            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;
-        const isPriceReady = data && currency && currencyDisplay;
-        return keys.map(key => {
-            const options = { amount: `${data === null || data === void 0 ? void 0 : data[key]} ${currency}`, currencyDisplay };
-            return html `
-        <div data-testid=${key} class="flex justify-between text-m text-secondary">
-          <foxy-i18n key=${key} infer="totals"></foxy-i18n>
-          ${isPriceReady
-                ? html `<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
-                : html `<span>--</span>`}
-        </div>
-      `;
-        });
-    }
-    __renderDiscounts(currency, currencyDisplay) {
-        var _a, _b;
-        const discounts = (_b = (_a = this.__discounts) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._embedded['fx:discounts'];
-        const isPriceReady = currency && currencyDisplay;
-        return discounts === null || discounts === void 0 ? void 0 : discounts.map(discount => {
-            const options = { amount: `${discount.amount} ${currency}`, currencyDisplay };
-            return html `
-        <div data-testclass="discount" class="flex justify-between text-m text-secondary">
-          <span>${discount.name} &bull; ${discount.code}</span>
-          ${isPriceReady
-                ? html `<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
-                : html `<span>--</span>`}
-        </div>
-      `;
-        });
-    }
 }
 //# sourceMappingURL=CartForm.js.map