@foxy.io/elements 1.39.0-beta.3 → 1.39.0-beta.4

package/dist/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.js

@@ -2,7 +2,7 @@ import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-html';
+import { html, svg } from 'lit-html';
 const NS = 'store-shipping-method-form';
 const Base = TranslatableMixin(InternalForm, NS);
 const getKbSize = (value) => new Blob([value]).size / 1024;
@@ -81,7 +81,7 @@ export class StoreShippingMethodForm extends Base {
                 'CUSTOM': 'general account endpoint custom-code',
                 'FedEx': 'endpoint custom-code',
                 'USPS': 'account endpoint custom-code',
-                'UPS': 'endpoint custom-code',
+                'UPS': 'endpoint custom-code account:accountid account:password account:authentication-key',
             };
             if (codeToHiddenControls[code])
                 hiddenControls = codeToHiddenControls[code];
@@ -103,7 +103,7 @@ export class StoreShippingMethodForm extends Base {
         return { ...super.headerTitleOptions, provider: (_a = this.__shippingMethod) === null || _a === void 0 ? void 0 : _a.name };
     }
     renderBody() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const shippingMethod = this.__shippingMethod;
         return html `
       ${this.renderHeader()}
@@ -155,6 +155,27 @@ export class StoreShippingMethodForm extends Base {
         </foxy-internal-text-control>
         <foxy-internal-password-control layout="summary-item" infer="password">
         </foxy-internal-password-control>
+        ${this.__useCustomAccountGetValue() && ((_c = this.__shippingMethod) === null || _c === void 0 ? void 0 : _c.code) === 'UPS'
+            ? html `
+              <div
+                class="flex items-start"
+                style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+              >
+                ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-primary" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`}
+                <p>
+                  <foxy-i18n infer="" key="ups_use_legacy_admin_message"></foxy-i18n>
+                  <br />
+                  <a
+                    target="_blank"
+                    class="mt-xs inline-block rounded font-medium text-primary transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+                    href="https://admin.foxycart.com"
+                  >
+                    admin.foxycart.com
+                  </a>
+                </p>
+              </div>
+            `
+            : ''}
       </foxy-internal-summary-control>
 
       <foxy-internal-text-control infer="endpoint" property="accountid">
@@ -169,7 +190,7 @@ export class StoreShippingMethodForm extends Base {
         own-uri=${ifDefined(shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod._links.self.href)}
         embed-key="fx:store_shipping_services"
         options-href=${ifDefined(shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod._links['fx:shipping_services'].href)}
-        links-href=${ifDefined((_c = this.data) === null || _c === void 0 ? void 0 : _c._links['fx:store_shipping_services'].href)}
+        links-href=${ifDefined((_d = this.data) === null || _d === void 0 ? void 0 : _d._links['fx:store_shipping_services'].href)}
         infer="services"
         limit="200"
         item="foxy-shipping-service-card"

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

@@ -1 +1 @@
-{"version":3,"file":"StoreShippingMethodForm.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\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 { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'store-shipping-method-form';\nconst Base = TranslatableMixin(InternalForm, NS);\nconst getKbSize = (value: string) => new Blob([value]).size / 1024;\nconst isURL = (value: string) => {\n  try {\n    new URL(value);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\n/**\n * Form element for creating and editing store shipping methods (`fx:store_shipping_method`).\n *\n * @element foxy-store-shipping-method-form\n * @since 1.21.0\n */\nexport class StoreShippingMethodForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      shippingMethods: { attribute: 'shipping-methods' },\n      __useCustomAccount: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ shipping_method_uri: v }) => (v && isURL(v)) || 'shipping-method-uri:v8n_required',\n      ({ accountid: v }) => !v || v.length <= 50 || 'accountid:v8n_too_long',\n      ({ password: v }) => !v || v.length <= 50 || 'password:v8n_too_long',\n      ({ meter_number: v }) => !v || v.length <= 50 || 'meter-number:v8n_too_long',\n      ({ authentication_key: v }) => !v || v.length <= 50 || 'authentication-key:v8n_too_long',\n      ({ custom_code: v }) => !v || getKbSize(v) <= 64 || 'custom-code:v8n_too_long',\n    ];\n  }\n\n  /** URL of the `fx:shipping_methods` property helper. */\n  shippingMethods: string | null = null;\n\n  private readonly __shippingMethodLoaderId = 'shippingMethodLoader';\n\n  private readonly __shippingMethodUriSetValue = (newValue: string) => {\n    this.undo();\n    this.edit({ shipping_method_uri: newValue });\n  };\n\n  private __useCustomAccount = false;\n\n  private readonly __useCustomAccountGetValue = () => {\n    return Boolean(\n      this.__useCustomAccount ||\n        this.form.authentication_key ||\n        this.form.meter_number ||\n        this.form.accountid ||\n        this.form.password\n    );\n  };\n\n  private readonly __useCustomAccountSetValue = (value: boolean) => {\n    if (!value) {\n      this.edit({\n        authentication_key: '',\n        meter_number: '',\n        accountid: '',\n        password: '',\n      });\n    }\n\n    this.__useCustomAccount = value;\n  };\n\n  get hiddenSelector(): BooleanSelector {\n    const hasData = !!this.data;\n    const code = this.__shippingMethod?.code;\n\n    // prettier-ignore\n    let hiddenControls = 'general:shipping-container-uri general:shipping-drop-type-uri destinations account endpoint custom-code';\n\n    if (code) {\n      const codeToHiddenControls: Record<string, string> = {\n        'CUSTOM-ENDPOINT-POST': 'general destinations account custom-code',\n        'CUSTOM-CODE': 'general destinations account endpoint',\n        'CUSTOM': 'general account endpoint custom-code',\n        'FedEx': 'endpoint custom-code',\n        'USPS': 'account endpoint custom-code',\n        'UPS': 'endpoint custom-code',\n      };\n\n      if (codeToHiddenControls[code]) hiddenControls = codeToHiddenControls[code];\n    }\n\n    if (!hasData || code?.startsWith('CUSTOM-')) hiddenControls += ' services';\n    if (hasData) hiddenControls = `general:shipping-method-uri ${hiddenControls}`;\n\n    // prettier-ignore\n    if (!this.__useCustomAccountGetValue()) hiddenControls += ' account:accountid account:password account:authentication-key account:meter-number';\n\n    return new BooleanSelector(`${hiddenControls} ${super.hiddenSelector}`.trim());\n  }\n\n  get headerSubtitleOptions(): Record<string, unknown> {\n    return { id: this.headerCopyIdValue };\n  }\n\n  get headerTitleOptions(): Record<string, unknown> {\n    return { ...super.headerTitleOptions, provider: this.__shippingMethod?.name };\n  }\n\n  renderBody(): TemplateResult {\n    const shippingMethod = this.__shippingMethod;\n\n    return html`\n      ${this.renderHeader()}\n\n      <foxy-internal-summary-control infer=\"general\">\n        <foxy-internal-resource-picker-control\n          layout=\"summary-item\"\n          infer=\"shipping-method-uri\"\n          first=${ifDefined(this.shippingMethods ?? this.form._links?.['fx:shipping_methods'].href)}\n          item=\"foxy-shipping-method-card\"\n          .setValue=${this.__shippingMethodUriSetValue}\n        >\n        </foxy-internal-resource-picker-control>\n\n        <foxy-internal-resource-picker-control\n          layout=\"summary-item\"\n          infer=\"shipping-container-uri\"\n          first=${ifDefined(shippingMethod?._links['fx:shipping_containers'].href)}\n          item=\"foxy-shipping-container-card\"\n        >\n        </foxy-internal-resource-picker-control>\n\n        <foxy-internal-resource-picker-control\n          layout=\"summary-item\"\n          infer=\"shipping-drop-type-uri\"\n          first=${ifDefined(shippingMethod?._links['fx:shipping_drop_types'].href)}\n          item=\"foxy-shipping-drop-type-card\"\n        >\n        </foxy-internal-resource-picker-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"destinations\">\n        <foxy-internal-switch-control infer=\"use-for-domestic\"></foxy-internal-switch-control>\n        <foxy-internal-switch-control infer=\"use-for-international\"></foxy-internal-switch-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"account\">\n        <foxy-internal-switch-control\n          infer=\"use-custom-account\"\n          .getValue=${this.__useCustomAccountGetValue}\n          .setValue=${this.__useCustomAccountSetValue}\n        >\n        </foxy-internal-switch-control>\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"authentication-key\">\n        </foxy-internal-text-control>\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"meter-number\">\n        </foxy-internal-text-control>\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"accountid\">\n        </foxy-internal-text-control>\n        <foxy-internal-password-control layout=\"summary-item\" infer=\"password\">\n        </foxy-internal-password-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-text-control infer=\"endpoint\" property=\"accountid\">\n      </foxy-internal-text-control>\n\n      <foxy-internal-source-control infer=\"custom-code\"></foxy-internal-source-control>\n\n      <foxy-internal-async-resource-link-list-control\n        foreign-key-for-uri=\"shipping_service_uri\"\n        foreign-key-for-id=\"shipping_service_id\"\n        own-key-for-uri=\"shipping_method_uri\"\n        own-uri=${ifDefined(shippingMethod?._links.self.href)}\n        embed-key=\"fx:store_shipping_services\"\n        options-href=${ifDefined(shippingMethod?._links['fx:shipping_services'].href)}\n        links-href=${ifDefined(this.data?._links['fx:store_shipping_services'].href)}\n        infer=\"services\"\n        limit=\"200\"\n        item=\"foxy-shipping-service-card\"\n      >\n      </foxy-internal-async-resource-link-list-control>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.form.shipping_method_uri || undefined)}\n        id=${this.__shippingMethodLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      ${super.renderBody()}\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    if (changes.has('href')) this.__useCustomAccount = false;\n  }\n\n  protected async _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult> {\n    try {\n      return await super._fetch(...args);\n    } catch (err) {\n      const errors: string[] = [];\n\n      try {\n        for (const error of (await (err as Response).json())._embedded['fx:errors']) {\n          if (error.message.startsWith('shipping_container_id must be')) {\n            errors.push('shipping-container-uri:v8n_required');\n          } else if (error.message.startsWith('shipping_drop_type_id must be')) {\n            errors.push('shipping-drop-type-uri:v8n_required');\n          }\n        }\n      } catch {\n        // no-op\n      }\n\n      throw errors.length > 0 ? errors : err;\n    }\n  }\n\n  private get __shippingMethodLoader() {\n    type Loader = NucleonElement<Resource<Rels.ShippingMethod>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__shippingMethodLoaderId}`);\n  }\n\n  private get __shippingMethod() {\n    return this.__shippingMethodLoader?.data;\n  }\n}\n"]}
+{"version":3,"file":"StoreShippingMethodForm.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\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 { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\n\nconst NS = 'store-shipping-method-form';\nconst Base = TranslatableMixin(InternalForm, NS);\nconst getKbSize = (value: string) => new Blob([value]).size / 1024;\nconst isURL = (value: string) => {\n  try {\n    new URL(value);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\n/**\n * Form element for creating and editing store shipping methods (`fx:store_shipping_method`).\n *\n * @element foxy-store-shipping-method-form\n * @since 1.21.0\n */\nexport class StoreShippingMethodForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      shippingMethods: { attribute: 'shipping-methods' },\n      __useCustomAccount: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ shipping_method_uri: v }) => (v && isURL(v)) || 'shipping-method-uri:v8n_required',\n      ({ accountid: v }) => !v || v.length <= 50 || 'accountid:v8n_too_long',\n      ({ password: v }) => !v || v.length <= 50 || 'password:v8n_too_long',\n      ({ meter_number: v }) => !v || v.length <= 50 || 'meter-number:v8n_too_long',\n      ({ authentication_key: v }) => !v || v.length <= 50 || 'authentication-key:v8n_too_long',\n      ({ custom_code: v }) => !v || getKbSize(v) <= 64 || 'custom-code:v8n_too_long',\n    ];\n  }\n\n  /** URL of the `fx:shipping_methods` property helper. */\n  shippingMethods: string | null = null;\n\n  private readonly __shippingMethodLoaderId = 'shippingMethodLoader';\n\n  private readonly __shippingMethodUriSetValue = (newValue: string) => {\n    this.undo();\n    this.edit({ shipping_method_uri: newValue });\n  };\n\n  private __useCustomAccount = false;\n\n  private readonly __useCustomAccountGetValue = () => {\n    return Boolean(\n      this.__useCustomAccount ||\n        this.form.authentication_key ||\n        this.form.meter_number ||\n        this.form.accountid ||\n        this.form.password\n    );\n  };\n\n  private readonly __useCustomAccountSetValue = (value: boolean) => {\n    if (!value) {\n      this.edit({\n        authentication_key: '',\n        meter_number: '',\n        accountid: '',\n        password: '',\n      });\n    }\n\n    this.__useCustomAccount = value;\n  };\n\n  get hiddenSelector(): BooleanSelector {\n    const hasData = !!this.data;\n    const code = this.__shippingMethod?.code;\n\n    // prettier-ignore\n    let hiddenControls = 'general:shipping-container-uri general:shipping-drop-type-uri destinations account endpoint custom-code';\n\n    if (code) {\n      const codeToHiddenControls: Record<string, string> = {\n        'CUSTOM-ENDPOINT-POST': 'general destinations account custom-code',\n        'CUSTOM-CODE': 'general destinations account endpoint',\n        'CUSTOM': 'general account endpoint custom-code',\n        'FedEx': 'endpoint custom-code',\n        'USPS': 'account endpoint custom-code',\n        'UPS': 'endpoint custom-code account:accountid account:password account:authentication-key',\n      };\n\n      if (codeToHiddenControls[code]) hiddenControls = codeToHiddenControls[code];\n    }\n\n    if (!hasData || code?.startsWith('CUSTOM-')) hiddenControls += ' services';\n    if (hasData) hiddenControls = `general:shipping-method-uri ${hiddenControls}`;\n\n    // prettier-ignore\n    if (!this.__useCustomAccountGetValue()) hiddenControls += ' account:accountid account:password account:authentication-key account:meter-number';\n\n    return new BooleanSelector(`${hiddenControls} ${super.hiddenSelector}`.trim());\n  }\n\n  get headerSubtitleOptions(): Record<string, unknown> {\n    return { id: this.headerCopyIdValue };\n  }\n\n  get headerTitleOptions(): Record<string, unknown> {\n    return { ...super.headerTitleOptions, provider: this.__shippingMethod?.name };\n  }\n\n  renderBody(): TemplateResult {\n    const shippingMethod = this.__shippingMethod;\n\n    return html`\n      ${this.renderHeader()}\n\n      <foxy-internal-summary-control infer=\"general\">\n        <foxy-internal-resource-picker-control\n          layout=\"summary-item\"\n          infer=\"shipping-method-uri\"\n          first=${ifDefined(this.shippingMethods ?? this.form._links?.['fx:shipping_methods'].href)}\n          item=\"foxy-shipping-method-card\"\n          .setValue=${this.__shippingMethodUriSetValue}\n        >\n        </foxy-internal-resource-picker-control>\n\n        <foxy-internal-resource-picker-control\n          layout=\"summary-item\"\n          infer=\"shipping-container-uri\"\n          first=${ifDefined(shippingMethod?._links['fx:shipping_containers'].href)}\n          item=\"foxy-shipping-container-card\"\n        >\n        </foxy-internal-resource-picker-control>\n\n        <foxy-internal-resource-picker-control\n          layout=\"summary-item\"\n          infer=\"shipping-drop-type-uri\"\n          first=${ifDefined(shippingMethod?._links['fx:shipping_drop_types'].href)}\n          item=\"foxy-shipping-drop-type-card\"\n        >\n        </foxy-internal-resource-picker-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"destinations\">\n        <foxy-internal-switch-control infer=\"use-for-domestic\"></foxy-internal-switch-control>\n        <foxy-internal-switch-control infer=\"use-for-international\"></foxy-internal-switch-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"account\">\n        <foxy-internal-switch-control\n          infer=\"use-custom-account\"\n          .getValue=${this.__useCustomAccountGetValue}\n          .setValue=${this.__useCustomAccountSetValue}\n        >\n        </foxy-internal-switch-control>\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"authentication-key\">\n        </foxy-internal-text-control>\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"meter-number\">\n        </foxy-internal-text-control>\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"accountid\">\n        </foxy-internal-text-control>\n        <foxy-internal-password-control layout=\"summary-item\" infer=\"password\">\n        </foxy-internal-password-control>\n        ${this.__useCustomAccountGetValue() && this.__shippingMethod?.code === 'UPS'\n          ? html`\n              <div\n                class=\"flex items-start\"\n                style=\"gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n              >\n                ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" class=\"flex-shrink-0 text-primary\" style=\"width: 1.25em\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\"></path></svg>`}\n                <p>\n                  <foxy-i18n infer=\"\" key=\"ups_use_legacy_admin_message\"></foxy-i18n>\n                  <br />\n                  <a\n                    target=\"_blank\"\n                    class=\"mt-xs inline-block rounded font-medium text-primary transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                    href=\"https://admin.foxycart.com\"\n                  >\n                    admin.foxycart.com\n                  </a>\n                </p>\n              </div>\n            `\n          : ''}\n      </foxy-internal-summary-control>\n\n      <foxy-internal-text-control infer=\"endpoint\" property=\"accountid\">\n      </foxy-internal-text-control>\n\n      <foxy-internal-source-control infer=\"custom-code\"></foxy-internal-source-control>\n\n      <foxy-internal-async-resource-link-list-control\n        foreign-key-for-uri=\"shipping_service_uri\"\n        foreign-key-for-id=\"shipping_service_id\"\n        own-key-for-uri=\"shipping_method_uri\"\n        own-uri=${ifDefined(shippingMethod?._links.self.href)}\n        embed-key=\"fx:store_shipping_services\"\n        options-href=${ifDefined(shippingMethod?._links['fx:shipping_services'].href)}\n        links-href=${ifDefined(this.data?._links['fx:store_shipping_services'].href)}\n        infer=\"services\"\n        limit=\"200\"\n        item=\"foxy-shipping-service-card\"\n      >\n      </foxy-internal-async-resource-link-list-control>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.form.shipping_method_uri || undefined)}\n        id=${this.__shippingMethodLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      ${super.renderBody()}\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    if (changes.has('href')) this.__useCustomAccount = false;\n  }\n\n  protected async _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult> {\n    try {\n      return await super._fetch(...args);\n    } catch (err) {\n      const errors: string[] = [];\n\n      try {\n        for (const error of (await (err as Response).json())._embedded['fx:errors']) {\n          if (error.message.startsWith('shipping_container_id must be')) {\n            errors.push('shipping-container-uri:v8n_required');\n          } else if (error.message.startsWith('shipping_drop_type_id must be')) {\n            errors.push('shipping-drop-type-uri:v8n_required');\n          }\n        }\n      } catch {\n        // no-op\n      }\n\n      throw errors.length > 0 ? errors : err;\n    }\n  }\n\n  private get __shippingMethodLoader() {\n    type Loader = NucleonElement<Resource<Rels.ShippingMethod>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__shippingMethodLoaderId}`);\n  }\n\n  private get __shippingMethod() {\n    return this.__shippingMethodLoader?.data;\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
+import type { PropertyDeclarations } from 'lit-element';
+import type { Data, Settings } from './types';
 import { TemplateResult } from 'lit-html';
-import { Data } from './types';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
 declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
@@ -13,6 +14,8 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  * @since 1.4.0
  */
 export declare class SubscriptionCard extends Base<Data> {
+    static get properties(): PropertyDeclarations;
+    settings: Settings | null;
     render(): TemplateResult;
     private __getSummaryOptions;
     private __getPriceOptions;

package/dist/elements/public/SubscriptionCard/SubscriptionCard.js

@@ -6,7 +6,7 @@ import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { classMap } from "../../../utils/class-map.js";
 import { parseFrequency } from "../../../utils/parse-frequency.js";
-import { getSubscriptionStatus } from "../../../utils/get-subscription-status.js";
+import { getExtendedSubscriptionStatus, getSubscriptionStatus, } from "../../../utils/get-subscription-status.js";
 const NS = 'subscription-card';
 const Base = ConfigurableMixin(ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS))));
 /**
@@ -16,11 +16,23 @@ const Base = ConfigurableMixin(ResponsiveMixin(ThemeableMixin(TranslatableMixin(
  * @since 1.4.0
  */
 export class SubscriptionCard extends Base {
+    constructor() {
+        super(...arguments);
+        this.settings = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            settings: { type: Object },
+        };
+    }
     render() {
-        var _a, _b, _c;
-        const status = getSubscriptionStatus(this.data);
+        var _a, _b, _c, _d, _e;
+        const status = this.settings
+            ? getExtendedSubscriptionStatus(this.data, this.settings)
+            : getSubscriptionStatus(this.data);
         const isRed = status === 'failed';
-        const isGreen = status === 'next_payment' || !!(status === null || status === void 0 ? void 0 : status.startsWith('will_end'));
+        const isGreen = (status === null || status === void 0 ? void 0 : status.startsWith('next_payment')) || !!(status === null || status === void 0 ? void 0 : status.startsWith('will_end'));
         const isNormal = !isGreen && !isRed;
         return html `
       <div class="relative text-left">
@@ -87,7 +99,8 @@ export class SubscriptionCard extends Base {
                 options=${JSON.stringify(this.__getPriceOptions())}
                 class="text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block"
                 lang=${this.lang}
-                key="price_${((_a = this.data) === null || _a === void 0 ? void 0 : _a.frequency) === '.5m' ? 'twice_a_month' : 'recurring'}"
+                key="price${((_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.cart_display_config.show_sub_frequency) !== null && _b !== void 0 ? _b : true) ? `_${((_c = this.data) === null || _c === void 0 ? void 0 : _c.frequency) === '.5m' ? 'twice_a_month' : 'recurring'}`
+            : ''}"
                 ns=${this.ns}
               >
               </foxy-i18n>
@@ -114,7 +127,7 @@ export class SubscriptionCard extends Base {
             state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
             class="m-auto"
             lang=${this.lang}
-            ns="${this.ns} ${(_c = (_b = customElements.get('foxy-spinner')) === null || _b === void 0 ? void 0 : _b.defaultNS) !== null && _c !== void 0 ? _c : ''}"
+            ns="${this.ns} ${(_e = (_d = customElements.get('foxy-spinner')) === null || _d === void 0 ? void 0 : _d.defaultNS) !== null && _e !== void 0 ? _e : ''}"
           >
           </foxy-spinner>
         </div>

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

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseFrequency } from '../../../utils/parse-frequency';\nimport { getSubscriptionStatus } from '../../../utils/get-subscription-status';\n\nconst NS = 'subscription-card';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Card element displaying subscription summary.\n *\n * @element foxy-subscription-card\n * @since 1.4.0\n */\nexport class SubscriptionCard extends Base<Data> {\n  render(): TemplateResult {\n    const status = getSubscriptionStatus(this.data);\n    const isRed = status === 'failed';\n    const isGreen = status === 'next_payment' || !!status?.startsWith('will_end');\n    const isNormal = !isGreen && !isRed;\n\n    return html`\n      <div class=\"relative text-left\">\n        <div\n          class=${classMap({\n            'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,\n            'opacity-0': !this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <div\n            class=${classMap({\n              'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,\n              'text-success bg-success-10': isGreen,\n              'text-body bg-contrast-5': isNormal,\n              'text-error bg-error-10': isRed,\n            })}\n          >\n            <iron-icon\n              class=\"m-auto\"\n              icon=${isRed ? 'error-outline' : isGreen ? 'done' : 'done-all'}\n            >\n            </iron-icon>\n          </div>\n\n          <div class=\"flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center\">\n            <div class=\"order-1 sm-order-0\">\n              <div class=\"text-body font-medium origin-top-left text-m\">\n                <foxy-i18n\n                  data-testid=\"summary\"\n                  options=${JSON.stringify(this.__getSummaryOptions())}\n                  lang=${this.lang}\n                  key=\"transaction_summary\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n\n              <div\n                class=${classMap({\n                  'text-m': true,\n                  'text-tertiary': isNormal,\n                  'text-success': isGreen,\n                  'text-error': isRed,\n                })}\n              >\n                <foxy-i18n\n                  data-testid=\"status\"\n                  lang=${this.lang}\n                  key=\"status_${status}\"\n                  ns=${this.ns}\n                  .options=${this.data}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n            </div>\n\n            <div\n              class=\"flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1\"\n            >\n              <foxy-i18n\n                data-testid=\"price\"\n                options=${JSON.stringify(this.__getPriceOptions())}\n                class=\"text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block\"\n                lang=${this.lang}\n                key=\"price_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n              <span class=\"text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s\">\n                <span class=\"sm-hidden\">(</span><span class=\"hidden sm-inline\">*</span><foxy-i18n infer=\"\" key=\"fees_hint\"></foxy-i18n><span class=\"sm-hidden\">)</span>\n                <iron-icon id=\"hint\" icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n                <vcf-tooltip for=\"hint\" position=\"bottom\">\n                  <span class=\"text-s\"><foxy-i18n infer=\"\" key=\"fees_explainer\"></foxy-i18n></span>\n                </vcf-tooltip>\n              <span>\n              &#8203;\n            </div>\n          </div>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition ease-in-out duration-150': true,\n            'opacity-0': this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <foxy-spinner\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n\n      ${this.renderTemplateOrSlot()}\n    `;\n  }\n\n  private __getSummaryOptions() {\n    if (this.data === null) return {};\n    const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n    return {\n      most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n      count_minus_one: items.length - 1,\n      count: items.length,\n    };\n  }\n\n  private __getPriceOptions() {\n    if (this.data === null) return {};\n\n    const cart = this.data._embedded['fx:transaction_template'];\n    const amount = `${cart.total_order} ${cart.currency_code}`;\n    return { ...parseFrequency(this.data.frequency), amount };\n  }\n}\n"]}
+{"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { Data, Settings } from './types';\n\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nimport {\n  getExtendedSubscriptionStatus,\n  getSubscriptionStatus,\n} from '../../../utils/get-subscription-status';\n\nconst NS = 'subscription-card';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Card element displaying subscription summary.\n *\n * @element foxy-subscription-card\n * @since 1.4.0\n */\nexport class SubscriptionCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      settings: { type: Object },\n    };\n  }\n\n  settings: Settings | null = null;\n\n  render(): TemplateResult {\n    const status = this.settings\n      ? getExtendedSubscriptionStatus(this.data, this.settings)\n      : getSubscriptionStatus(this.data);\n\n    const isRed = status === 'failed';\n    const isGreen = status?.startsWith('next_payment') || !!status?.startsWith('will_end');\n    const isNormal = !isGreen && !isRed;\n\n    return html`\n      <div class=\"relative text-left\">\n        <div\n          class=${classMap({\n            'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,\n            'opacity-0': !this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <div\n            class=${classMap({\n              'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,\n              'text-success bg-success-10': isGreen,\n              'text-body bg-contrast-5': isNormal,\n              'text-error bg-error-10': isRed,\n            })}\n          >\n            <iron-icon\n              class=\"m-auto\"\n              icon=${isRed ? 'error-outline' : isGreen ? 'done' : 'done-all'}\n            >\n            </iron-icon>\n          </div>\n\n          <div class=\"flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center\">\n            <div class=\"order-1 sm-order-0\">\n              <div class=\"text-body font-medium origin-top-left text-m\">\n                <foxy-i18n\n                  data-testid=\"summary\"\n                  options=${JSON.stringify(this.__getSummaryOptions())}\n                  lang=${this.lang}\n                  key=\"transaction_summary\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n\n              <div\n                class=${classMap({\n                  'text-m': true,\n                  'text-tertiary': isNormal,\n                  'text-success': isGreen,\n                  'text-error': isRed,\n                })}\n              >\n                <foxy-i18n\n                  data-testid=\"status\"\n                  lang=${this.lang}\n                  key=\"status_${status}\"\n                  ns=${this.ns}\n                  .options=${this.data}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n            </div>\n\n            <div\n              class=\"flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1\"\n            >\n              <foxy-i18n\n                data-testid=\"price\"\n                options=${JSON.stringify(this.__getPriceOptions())}\n                class=\"text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block\"\n                lang=${this.lang}\n                key=\"price${\n                  this.settings?.cart_display_config.show_sub_frequency ?? true\n                    ? `_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}`\n                    : ''\n                }\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n              <span class=\"text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s\">\n                <span class=\"sm-hidden\">(</span><span class=\"hidden sm-inline\">*</span><foxy-i18n infer=\"\" key=\"fees_hint\"></foxy-i18n><span class=\"sm-hidden\">)</span>\n                <iron-icon id=\"hint\" icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n                <vcf-tooltip for=\"hint\" position=\"bottom\">\n                  <span class=\"text-s\"><foxy-i18n infer=\"\" key=\"fees_explainer\"></foxy-i18n></span>\n                </vcf-tooltip>\n              <span>\n              &#8203;\n            </div>\n          </div>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition ease-in-out duration-150': true,\n            'opacity-0': this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <foxy-spinner\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n\n      ${this.renderTemplateOrSlot()}\n    `;\n  }\n\n  private __getSummaryOptions() {\n    if (this.data === null) return {};\n    const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n    return {\n      most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n      count_minus_one: items.length - 1,\n      count: items.length,\n    };\n  }\n\n  private __getPriceOptions() {\n    if (this.data === null) return {};\n\n    const cart = this.data._embedded['fx:transaction_template'];\n    const amount = `${cart.total_order} ${cart.currency_code}`;\n    return { ...parseFrequency(this.data.frequency), amount };\n  }\n}\n"]}

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

@@ -1,8 +1,10 @@
+import type { Rels as CustomerRels } from '@foxy.io/sdk/customer';
+import type { Rels as BackendRels } from '@foxy.io/sdk/backend';
 import type { Resource } from '@foxy.io/sdk/core';
-import type { Rels } from '@foxy.io/sdk/backend';
-export declare type Rel = Rels.Subscription;
+export declare type Settings = Resource<CustomerRels.CustomerPortalSettings>;
 export declare type Data = Resource<Rel, {
     zoom: {
         transaction_template: 'items';
     };
 }>;
+export declare type Rel = BackendRels.Subscription;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Rel = Rels.Subscription;\nexport type Data = Resource<Rel, { zoom: { transaction_template: 'items' } }>;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Rels as CustomerRels } from '@foxy.io/sdk/customer';\nimport type { Rels as BackendRels } from '@foxy.io/sdk/backend';\nimport type { Resource } from '@foxy.io/sdk/core';\n\nexport type Settings = Resource<CustomerRels.CustomerPortalSettings>;\nexport type Data = Resource<Rel, { zoom: { transaction_template: 'items' } }>;\nexport type Rel = BackendRels.Subscription;\n"]}

package/dist/elements/public/SubscriptionForm/SubscriptionForm.js

@@ -1,5 +1,4 @@
 import { Choice, Group, Skeleton } from "../../private/index.js";
-import { getSubscriptionStatus } from "../../../utils/get-subscription-status.js";
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { BooleanSelector } from '@foxy.io/sdk/core';
@@ -10,6 +9,7 @@ import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
+import { getExtendedSubscriptionStatus, getSubscriptionStatus, } from "../../../utils/get-subscription-status.js";
 import { getNextTransactionDateConstraints, getAllowedFrequencies, isNextTransactionDate, } from '@foxy.io/sdk/customer';
 const NS = 'subscription-form';
 const Base = ScopedElementsMixin(ResponsiveMixin(TranslatableMixin(InternalForm, NS)));
@@ -38,12 +38,12 @@ export class SubscriptionForm extends Base {
         this.__storeLoaderId = 'storeLoader';
         this.__renderItemsActions = () => {
             return html `
-      <div class="flex" data-testid="items:actions">
+      <div class="flex items-center gap-s text-m" data-testid="items:actions">
         ${this.renderTemplateOrSlot('items:actions:before')}
 
         <foxy-i18n
           data-testid="items:actions-label"
-          class="flex-1 text-s font-medium text-secondary"
+          class="flex-1 text-l font-medium text-body leading-m"
           lang=${this.lang}
           key="item_plural"
           ns=${this.ns}
@@ -74,7 +74,7 @@ export class SubscriptionForm extends Base {
           first=${ifDefined(itemsHref)}
           infer="items"
           item="foxy-item-card"
-          .itemProps=${{ 'locale-codes': this.localeCodes }}
+          .itemProps=${{ 'locale-codes': this.localeCodes, '.settings': this.settings }}
         >
         </foxy-internal-async-list-control>
       </div>
@@ -259,7 +259,7 @@ export class SubscriptionForm extends Base {
       <div data-testid="customer" class="sm-col-span-2">
         ${this.renderTemplateOrSlot('customer:before')}
 
-        <foxy-i18n infer="customer" class="block text-s font-medium leading-xs mb-xs" key="label">
+        <foxy-i18n infer="customer" class="block text-l font-medium leading-xs mb-s" key="label">
         </foxy-i18n>
 
         <a
@@ -319,13 +319,15 @@ export class SubscriptionForm extends Base {
         return new BooleanSelector(`items:pagination:card:autorenew-icon ${super.hiddenSelector}`);
     }
     get headerTitleOptions() {
+        var _a, _b;
         if (this.data && this.__currencyCode) {
             const frequency = parseFrequency(this.data.frequency);
             const transactionTemplate = this.__transactionTemplate;
             const total = transactionTemplate === null || transactionTemplate === void 0 ? void 0 : transactionTemplate.total_order;
             const amount = `${total} ${this.__currencyCode}`;
             const currencyDisplay = this.__currencyDisplay;
-            const context = this.__currencyCode
+            const showSubFrequency = (_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.cart_display_config.show_sub_frequency) !== null && _b !== void 0 ? _b : true;
+            const context = this.__currencyCode && showSubFrequency
                 ? this.data.frequency === '.5m'
                     ? 'twice_a_month'
                     : 'recurring'
@@ -337,7 +339,9 @@ export class SubscriptionForm extends Base {
         }
     }
     get headerSubtitleKey() {
-        const status = getSubscriptionStatus(this.data);
+        const status = this.settings
+            ? getExtendedSubscriptionStatus(this.data, this.settings)
+            : getSubscriptionStatus(this.data);
         return status ? `subtitle_${status}` : super.headerSubtitleKey;
     }
     renderBody() {
@@ -506,6 +510,7 @@ export class SubscriptionForm extends Base {
         return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
     }
     get __isNextTransactionDateVisible() {
+        var _a;
         if (this.hiddenSelector.matches('next-transaction-date', true))
             return false;
         if (this.data === null)
@@ -514,14 +519,19 @@ export class SubscriptionForm extends Base {
             return false;
         if (this.data.is_active === false)
             return false;
+        if (((_a = this.settings) === null || _a === void 0 ? void 0 : _a.cart_display_config.show_sub_nextdate) === false)
+            return false;
         if (this.settings === null)
             return true;
         const rules = this.settings.subscriptions.allow_next_date_modification;
         return !!getNextTransactionDateConstraints(this.data, rules);
     }
     get __isStartDateVisible() {
+        var _a;
         if (this.hiddenSelector.matches('start-date', true))
             return false;
+        if (((_a = this.settings) === null || _a === void 0 ? void 0 : _a.cart_display_config.show_sub_startdate) === false)
+            return false;
         return this.__isNextTransactionDateVisible;
     }
     get __isEndDateVisible() {
@@ -560,6 +570,7 @@ export class SubscriptionForm extends Base {
         return this.settings === null;
     }
     get __isFrequencyVisible() {
+        var _a;
         if (this.hiddenSelector.matches('frequency', true))
             return false;
         if (this.data === null)
@@ -568,6 +579,8 @@ export class SubscriptionForm extends Base {
             return false;
         if (this.data.is_active === false)
             return false;
+        if (((_a = this.settings) === null || _a === void 0 ? void 0 : _a.cart_display_config.show_sub_frequency) === false)
+            return false;
         if (this.settings === null)
             return true;
         const allowedFrequencies = getAllowedFrequencies({