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

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

@@ -6,13 +6,18 @@ declare const Base: typeof InternalCard & import("lit-element").Constructor<impo
     defaultNS: string;
 } & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
 /**
- * Card element displaying cart summary.
+ * Card element representing cart resource (`fx:cart`).
  *
  * @element foxy-cart-card
- * @since 1.19.0
+ * @since 1.21.0
  */
 export declare class CartCard extends Base<Data> {
     static get properties(): PropertyDeclarations;
+    /**
+     * URL of the `fx:locale_codes` property helper.
+     * This will be used to determine the currency code for carts created with hAPI
+     * since it isn't included in them.
+     */
     localeCodes: string | null;
     private readonly __defaultTemplateSetLoaderId;
     private readonly __localeCodesHelperLoaderId;

package/dist/elements/public/CartCard/CartCard.js

@@ -6,14 +6,19 @@ import { html } from 'lit-html';
 const NS = 'cart-card';
 const Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));
 /**
- * Card element displaying cart summary.
+ * Card element representing cart resource (`fx:cart`).
  *
  * @element foxy-cart-card
- * @since 1.19.0
+ * @since 1.21.0
  */
 export class CartCard extends Base {
     constructor() {
         super(...arguments);
+        /**
+         * URL of the `fx:locale_codes` property helper.
+         * This will be used to determine the currency code for carts created with hAPI
+         * since it isn't included in them.
+         */
         this.localeCodes = null;
         this.__defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';
         this.__localeCodesHelperLoaderId = 'localeCodesLoader';
@@ -243,17 +248,19 @@ export class CartCard extends Base {
             return items.isApproximateCount ? 'line_1_approximate' : 'line_1';
     }
     get __line2Options() {
+        var _a;
+        return (_a = this.__items) === null || _a === void 0 ? void 0 : _a.array[0];
+    }
+    get __line2Key() {
         const items = this.__items;
         if (items === undefined)
             return;
         if (items.count === 0)
-            return;
-        return { firstItem: items.array[0], count: items.count };
-    }
-    get __line2Key() {
-        const items = this.__items;
-        if (items)
-            return items.count === 0 ? 'line_2_no_items' : 'line_2';
+            return 'line_2_empty';
+        if (items.count === 1)
+            return 'line_2_one';
+        if (items.count > 1)
+            return 'line_2_many';
     }
     get __statusOptions() {
         const data = this.data;

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

@@ -1 +1 @@
-{"version":3,"file":"CartCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CartCard/CartCard.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 { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'cart-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Card element displaying cart summary.\n *\n * @element foxy-cart-card\n * @since 1.19.0\n */\nexport class CartCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      localeCodes: { type: String, attribute: 'locale-codes' },\n    };\n  }\n\n  localeCodes: string | null = null;\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 statusOptions = this.__statusOptions;\n    const line1Options = this.__line1Options;\n    const line1Key = this.__line1Key;\n    const line2Options = this.__line2Options;\n    const line2Key = this.__line2Key;\n    const data = this.data;\n\n    return html`\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.__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.__storeHref)}\n        id=${this.__storeLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"text-left leading-s\">\n        <div class=\"flex items-center space-x-s\">\n          <span class=\"flex-1 font-semibold text-body truncate\">\n            ${line1Options && line1Key\n              ? html`<foxy-i18n infer=\"\" key=${line1Key} .options=${line1Options}></foxy-i18n>`\n              : html`&ZeroWidthSpace;`}\n          </span>\n          <span class=\"text-s text-tertiary\">\n            ${data\n              ? html`<foxy-i18n infer=\"\" key=\"status\" .options=${statusOptions}></foxy-i18n>`\n              : html`&ZeroWidthSpace;`}\n          </span>\n        </div>\n\n        <div class=\"truncate text-s text-secondary\">\n          ${line2Key\n            ? html`<foxy-i18n infer=\"\" key=${line2Key} .options=${line2Options}></foxy-i18n>`\n            : html`&ZeroWidthSpace;`}\n        </div>\n\n        <div class=\"text-tertiary truncate text-s\">\n          ${data\n            ? data.customer_email\n              ? html`${data.customer_email}`\n              : html`<foxy-i18n infer=\"\" key=\"no_customer\"></foxy-i18n>`\n            : html`&ZeroWidthSpace;`}\n        </div>\n      </div>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    const isLoaded = !!this.__line1Options && !!this.__statusOptions && !!this.__line2Key;\n    return super.isBodyReady && isLoaded;\n  }\n\n  private get __defaultTemplateSetHref() {\n    const templateSetUri = this.data?.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    // TODO: remove the directive below once SDK is updated\n    // @ts-expect-error SDK types are incomplete\n    const currencyCode = this.data?.currency_code as string | undefined;\n\n    if (!currencyCode) return this.data?.template_set_uri || void 0;\n  }\n\n  private get __itemsHref() {\n    const data = this.data;\n\n    if (!data) return;\n    if ('_embedded' in data && 'fx:items' in data._embedded) return;\n\n    const url = new URL(data._links['fx:items'].href);\n\n    url.searchParams.set('order', 'price desc');\n    url.searchParams.set('limit', '1');\n\n    return url.toString();\n  }\n\n  private get __storeHref() {\n    return this.data?._links['fx:store']?.href;\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    const data = this.data;\n\n    if (data && '_embedded' in data && 'fx:items' in data._embedded) {\n      const items = data._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\n    if (!loader?.data) return;\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 __currencyCode() {\n    const data = this.data;\n\n    if (data && 'currency_code' in data) {\n      // TODO: remove the directive below once the SDK is updated\n      // @ts-expect-error SDK types are incomplete\n      return data.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 __line1Options() {\n    const totalOrder = this.data?.total_order;\n    if (totalOrder === undefined) return;\n\n    const currencyDisplay = this.__currencyDisplay;\n    if (currencyDisplay === undefined) return;\n\n    const currencyCode = this.__currencyCode;\n    if (currencyCode === undefined) return;\n\n    const count = this.__items?.count;\n    if (count === undefined) return;\n\n    return { amount: `${totalOrder} ${currencyCode}`, currencyDisplay, count };\n  }\n\n  private get __line1Key() {\n    const items = this.__items;\n    if (items) return items.isApproximateCount ? 'line_1_approximate' : 'line_1';\n  }\n\n  private get __line2Options() {\n    const items = this.__items;\n\n    if (items === undefined) return;\n    if (items.count === 0) return;\n\n    return { firstItem: items.array[0], count: items.count };\n  }\n\n  private get __line2Key() {\n    const items = this.__items;\n    if (items) return items.count === 0 ? 'line_2_no_items' : 'line_2';\n  }\n\n  private get __statusOptions() {\n    const data = this.data;\n    if (data) return { dateCreated: data.date_created };\n  }\n}\n"]}
+{"version":3,"file":"CartCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CartCard/CartCard.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 { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'cart-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Card element representing cart resource (`fx:cart`).\n *\n * @element foxy-cart-card\n * @since 1.21.0\n */\nexport class CartCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      localeCodes: { type: String, attribute: 'locale-codes' },\n    };\n  }\n\n  /**\n   * URL of the `fx:locale_codes` property helper.\n   * This will be used to determine the currency code for carts created with hAPI\n   * since it isn't included in them.\n   */\n  localeCodes: string | null = null;\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 statusOptions = this.__statusOptions;\n    const line1Options = this.__line1Options;\n    const line1Key = this.__line1Key;\n    const line2Options = this.__line2Options;\n    const line2Key = this.__line2Key;\n    const data = this.data;\n\n    return html`\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.__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.__storeHref)}\n        id=${this.__storeLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"text-left leading-s\">\n        <div class=\"flex items-center space-x-s\">\n          <span class=\"flex-1 font-semibold text-body truncate\">\n            ${line1Options && line1Key\n              ? html`<foxy-i18n infer=\"\" key=${line1Key} .options=${line1Options}></foxy-i18n>`\n              : html`&ZeroWidthSpace;`}\n          </span>\n          <span class=\"text-s text-tertiary\">\n            ${data\n              ? html`<foxy-i18n infer=\"\" key=\"status\" .options=${statusOptions}></foxy-i18n>`\n              : html`&ZeroWidthSpace;`}\n          </span>\n        </div>\n\n        <div class=\"truncate text-s text-secondary\">\n          ${line2Key\n            ? html`<foxy-i18n infer=\"\" key=${line2Key} .options=${line2Options}></foxy-i18n>`\n            : html`&ZeroWidthSpace;`}\n        </div>\n\n        <div class=\"text-tertiary truncate text-s\">\n          ${data\n            ? data.customer_email\n              ? html`${data.customer_email}`\n              : html`<foxy-i18n infer=\"\" key=\"no_customer\"></foxy-i18n>`\n            : html`&ZeroWidthSpace;`}\n        </div>\n      </div>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    const isLoaded = !!this.__line1Options && !!this.__statusOptions && !!this.__line2Key;\n    return super.isBodyReady && isLoaded;\n  }\n\n  private get __defaultTemplateSetHref() {\n    const templateSetUri = this.data?.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    // TODO: remove the directive below once SDK is updated\n    // @ts-expect-error SDK types are incomplete\n    const currencyCode = this.data?.currency_code as string | undefined;\n\n    if (!currencyCode) return this.data?.template_set_uri || void 0;\n  }\n\n  private get __itemsHref() {\n    const data = this.data;\n\n    if (!data) return;\n    if ('_embedded' in data && 'fx:items' in data._embedded) return;\n\n    const url = new URL(data._links['fx:items'].href);\n\n    url.searchParams.set('order', 'price desc');\n    url.searchParams.set('limit', '1');\n\n    return url.toString();\n  }\n\n  private get __storeHref() {\n    return this.data?._links['fx:store']?.href;\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    const data = this.data;\n\n    if (data && '_embedded' in data && 'fx:items' in data._embedded) {\n      const items = data._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\n    if (!loader?.data) return;\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 __currencyCode() {\n    const data = this.data;\n\n    if (data && 'currency_code' in data) {\n      // TODO: remove the directive below once the SDK is updated\n      // @ts-expect-error SDK types are incomplete\n      return data.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 __line1Options() {\n    const totalOrder = this.data?.total_order;\n    if (totalOrder === undefined) return;\n\n    const currencyDisplay = this.__currencyDisplay;\n    if (currencyDisplay === undefined) return;\n\n    const currencyCode = this.__currencyCode;\n    if (currencyCode === undefined) return;\n\n    const count = this.__items?.count;\n    if (count === undefined) return;\n\n    return { amount: `${totalOrder} ${currencyCode}`, currencyDisplay, count };\n  }\n\n  private get __line1Key() {\n    const items = this.__items;\n    if (items) return items.isApproximateCount ? 'line_1_approximate' : 'line_1';\n  }\n\n  private get __line2Options() {\n    return this.__items?.array[0];\n  }\n\n  private get __line2Key() {\n    const items = this.__items;\n    if (items === undefined) return;\n\n    if (items.count === 0) return 'line_2_empty';\n    if (items.count === 1) return 'line_2_one';\n    if (items.count > 1) return 'line_2_many';\n  }\n\n  private get __statusOptions() {\n    const data = this.data;\n    if (data) return { dateCreated: data.date_created };\n  }\n}\n"]}

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

@@ -1,20 +1,125 @@
 import type { PropertyDeclarations } from 'lit-element';
+import type { Templates, Data } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
-import type { Data } from './types';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
+/**
+ * Form element for creating or editing carts (`fx:cart`).
+ *
+ * @slot customer-type:before
+ * @slot customer-type:after
+ *
+ * @slot customer:before
+ * @slot customer:after
+ *
+ * @slot template-set-uri:before
+ * @slot template-set-uri:after
+ *
+ * @slot items:before
+ * @slot items:after
+ *
+ * @slot applied-coupon-codes:before
+ * @slot applied-coupon-codes:after
+ *
+ * @slot custom-fields:before
+ * @slot custom-fields:after
+ *
+ * @slot attributes:before
+ * @slot attributes:after
+ *
+ * @slot billing-first-name:before
+ * @slot billing-first-name:after
+ *
+ * @slot billing-last-name:before
+ * @slot billing-last-name:after
+ *
+ * @slot billing-company:before
+ * @slot billing-company:after
+ *
+ * @slot billing-phone:before
+ * @slot billing-phone:after
+ *
+ * @slot billing-address-one:before
+ * @slot billing-address-one:after
+ *
+ * @slot billing-address-two:before
+ * @slot billing-address-two:after
+ *
+ * @slot billing-country:before
+ * @slot billing-country:after
+ *
+ * @slot billing-region:before
+ * @slot billing-region:after
+ *
+ * @slot billing-city:before
+ * @slot billing-city:after
+ *
+ * @slot billing-postal-code:before
+ * @slot billing-postal-code:after
+ *
+ * @slot shipping-first-name:before
+ * @slot shipping-first-name:after
+ *
+ * @slot shipping-last-name:before
+ * @slot shipping-last-name:after
+ *
+ * @slot shipping-company:before
+ * @slot shipping-company:after
+ *
+ * @slot shipping-phone:before
+ * @slot shipping-phone:after
+ *
+ * @slot shipping-address-one:before
+ * @slot shipping-address-one:after
+ *
+ * @slot shipping-address-two:before
+ * @slot shipping-address-two:after
+ *
+ * @slot shipping-country:before
+ * @slot shipping-country:after
+ *
+ * @slot shipping-region:before
+ * @slot shipping-region:after
+ *
+ * @slot shipping-city:before
+ * @slot shipping-city:after
+ *
+ * @slot shipping-postal-code:before
+ * @slot shipping-postal-code:after
+ *
+ * @slot view-as-customer:before
+ * @slot view-as-customer:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @element foxy-cart-form
+ * @since 1.21.0
+ */
 export declare class CartForm extends Base<Data> {
     static get properties(): PropertyDeclarations;
     static get v8n(): NucleonV8N<Data>;
+    /** URL of the `fx:item_categories` collection for the store. */
     itemCategories: string | null;
+    /** URL of the `fx:template_sets` collection for the store. */
     templateSets: string | null;
+    /** URL of the `fx:locale_codes` property helper. */
     localeCodes: string | null;
+    /** URL of the `fx:customers` collection for the store. */
     customers: string | null;
+    /** URL of the `fx:countries` property helper. */
     countries: string | null;
+    /** Template render functions mapped to their name. */
+    templates: Templates;
+    /** URL of the `fx:regions` property helper. */
     regions: string | null;
+    /** URL of the `fx:coupons` collection for the store. */
     coupons: string | null;
     private readonly __defaultTemplateSetLoaderId;
     private readonly __localeCodesHelperLoaderId;

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

@@ -7,15 +7,120 @@ import set from 'lodash-es/set';
 import get from 'lodash-es/get';
 const NS = 'cart-form';
 const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+/**
+ * Form element for creating or editing carts (`fx:cart`).
+ *
+ * @slot customer-type:before
+ * @slot customer-type:after
+ *
+ * @slot customer:before
+ * @slot customer:after
+ *
+ * @slot template-set-uri:before
+ * @slot template-set-uri:after
+ *
+ * @slot items:before
+ * @slot items:after
+ *
+ * @slot applied-coupon-codes:before
+ * @slot applied-coupon-codes:after
+ *
+ * @slot custom-fields:before
+ * @slot custom-fields:after
+ *
+ * @slot attributes:before
+ * @slot attributes:after
+ *
+ * @slot billing-first-name:before
+ * @slot billing-first-name:after
+ *
+ * @slot billing-last-name:before
+ * @slot billing-last-name:after
+ *
+ * @slot billing-company:before
+ * @slot billing-company:after
+ *
+ * @slot billing-phone:before
+ * @slot billing-phone:after
+ *
+ * @slot billing-address-one:before
+ * @slot billing-address-one:after
+ *
+ * @slot billing-address-two:before
+ * @slot billing-address-two:after
+ *
+ * @slot billing-country:before
+ * @slot billing-country:after
+ *
+ * @slot billing-region:before
+ * @slot billing-region:after
+ *
+ * @slot billing-city:before
+ * @slot billing-city:after
+ *
+ * @slot billing-postal-code:before
+ * @slot billing-postal-code:after
+ *
+ * @slot shipping-first-name:before
+ * @slot shipping-first-name:after
+ *
+ * @slot shipping-last-name:before
+ * @slot shipping-last-name:after
+ *
+ * @slot shipping-company:before
+ * @slot shipping-company:after
+ *
+ * @slot shipping-phone:before
+ * @slot shipping-phone:after
+ *
+ * @slot shipping-address-one:before
+ * @slot shipping-address-one:after
+ *
+ * @slot shipping-address-two:before
+ * @slot shipping-address-two:after
+ *
+ * @slot shipping-country:before
+ * @slot shipping-country:after
+ *
+ * @slot shipping-region:before
+ * @slot shipping-region:after
+ *
+ * @slot shipping-city:before
+ * @slot shipping-city:after
+ *
+ * @slot shipping-postal-code:before
+ * @slot shipping-postal-code:after
+ *
+ * @slot view-as-customer:before
+ * @slot view-as-customer:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @element foxy-cart-form
+ * @since 1.21.0
+ */
 export class CartForm extends Base {
     constructor() {
         super(...arguments);
+        /** 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:customers` collection for the store. */
         this.customers = null;
+        /** URL of the `fx:countries` property helper. */
         this.countries = null;
+        /** Template render functions mapped to their name. */
+        this.templates = {};
+        /** URL of the `fx:regions` property helper. */
         this.regions = null;
+        /** URL of the `fx:coupons` collection for the store. */
         this.coupons = null;
         this.__defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';
         this.__localeCodesHelperLoaderId = 'localeCodesLoader';
@@ -84,28 +189,28 @@ export class CartForm extends Base {
     }
     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',
+            ({ 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-address-two:v8n_too_long',
+            ({ billing_address1: v }) => !v || v.length <= 100 || 'billing-address-one: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-address-two:v8n_too_long',
+            ({ shipping_address1: v }) => !v || v.length <= 100 || 'shipping-address-one: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;
+        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 : {});
@@ -136,14 +241,18 @@ export class CartForm extends Base {
       <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';
+        const store = this.__store;
+        const currencyDisplay = store
+            ? store.use_international_currency_symbol
+                ? 'code'
+                : 'symbol'
+            : void 0;
         let currencyCode = null;
         if ('currency_code' in this.form) {
             // TODO: remove the directive below once the SDK is updated
@@ -152,10 +261,10 @@ export class CartForm extends Base {
         }
         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 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 = (_j = (_h = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _h === void 0 ? void 0 : _h[1]) !== null && _j !== void 0 ? _j : null;
+                currencyCode = (_h = (_g = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : null;
         }
         return html `
       <foxy-nucleon
@@ -281,7 +390,7 @@ export class CartForm extends Base {
           first=${ifDefined(this.templateSets)}
           class="sm-col-span-2"
           infer="template-set-uri"
-          .selectedItem=${(_k = this.__templateSet) !== null && _k !== void 0 ? _k : null}
+          .selectedItem=${(_j = this.__templateSet) !== null && _j !== void 0 ? _j : null}
         >
         </foxy-internal-async-combo-box-control>
 
@@ -298,7 +407,7 @@ export class CartForm extends Base {
         <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)}
+          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)}
@@ -309,7 +418,7 @@ export class CartForm extends Base {
         <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)}
+          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)}
@@ -320,7 +429,7 @@ export class CartForm extends Base {
         <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)}
+          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)}
@@ -351,10 +460,18 @@ export class CartForm extends Base {
             <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
+              property="billing_address1"
+              infer="billing-address-one"
+              class="col-span-2"
+            >
             </foxy-internal-text-control>
 
-            <foxy-internal-text-control infer="billing-address2" class="col-span-2">
+            <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}>
@@ -391,10 +508,18 @@ export class CartForm extends Base {
             <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
+              property="shipping_address1"
+              infer="shipping-address-one"
+              class="col-span-2"
+            >
             </foxy-internal-text-control>
 
-            <foxy-internal-text-control infer="shipping-address2" class="col-span-2">
+            <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}>
@@ -567,7 +692,7 @@ export class CartForm extends Base {
     }
     __renderTotalOrder(currency, currencyDisplay) {
         const data = this.data;
-        if (!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>`;
@@ -575,12 +700,13 @@ export class CartForm extends Base {
     __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 class="flex justify-between text-m text-secondary">
+        <div data-testid=${key} class="flex justify-between text-m text-secondary">
           <foxy-i18n key=${key} infer="totals"></foxy-i18n>
-          ${data
+          ${isPriceReady
                 ? html `<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
                 : html `<span>--</span>`}
         </div>
@@ -589,12 +715,16 @@ export class CartForm extends Base {
     }
     __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 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 class="flex justify-between text-m text-secondary">
+        <div data-testclass="discount" 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>
+          ${isPriceReady
+                ? html `<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
+                : html `<span>--</span>`}
         </div>
       `;
         });