@foxy.io/elements 1.27.0-beta.7 → 1.27.0

package/dist/cdn/translations/payment-card-embed/en.json

@@ -0,0 +1,48 @@
+{
+  "stripe": {
+    "label": "Card details",
+    "status": {
+      "idle": "Your card details are securely processed by Stripe. Visit https://stripe.com to learn more.",
+      "busy": "Encrypting your card details...",
+      "fail": "This service is currently unavailable. Please try again later.",
+      "unsupported": "We don't support this card type. Please try another card."
+    }
+  },
+  "square": {
+    "label": "Card details",
+    "status": {
+      "idle": "Your card details are securely processed by Square. Visit https://squareup.com to learn more.",
+      "busy": "Encrypting your card details...",
+      "fail": "This service is currently unavailable. Please try again later.",
+      "unsupported": "We don't support this card type. Please try another card."
+    }
+  },
+  "default": {
+    "cc-number": {
+      "label": "Card number",
+      "placeholder": "1234 1234 1234 1234",
+      "v8n_required": "Enter a card number.",
+      "v8n_invalid": "Check your card number – it doesn't seem to be valid.",
+      "v8n_unsupported": "We don't support this card type."
+    },
+    "cc-exp": {
+      "label": "Expires on",
+      "placeholder": "MM/YYYY",
+      "v8n_required": "Enter an expiry date.",
+      "v8n_invalid": "Enter a date as MM/YYYY.",
+      "v8n_expired": "Your card has expired."
+    },
+    "cc-csc": {
+      "label": "CSC",
+      "placeholder": "XXX",
+      "v8n_required": "Enter a security code.",
+      "v8n_invalid": "Enter a 3-4 digits code."
+    },
+    "status": {
+      "idle": "Your card details are securely processed by Foxy.io. Visit https://foxy.io to learn more.",
+      "busy": "Encrypting your card details...",
+      "fail": "This service is currently unavailable. Please try again later.",
+      "misconfigured": "This form is not configured correctly. If you are seeing this message as a customer, please report this issue to the store support team."
+    }
+  }
+}

package/dist/cdn/translations/payment-method-card/en.json

@@ -1,13 +1,160 @@
 {
   "cancel": "Cancel",
   "delete": "Delete",
-  "delete_prompt": "This resource will be permanently removed. Are you sure?",
+  "add": "Add payment method",
+  "update": "Update payment method",
+  "delete_prompt": "This payment method will be permanently deleted from your account. Would you like to continue?",
   "expires": "Expires",
   "last_4_digits": "Last 4 digits",
   "unknown": "Unknown",
+  "dialog": {
+    "close": "Close",
+    "dialog_header_add": "Add payment method",
+    "dialog_header_update": "Update payment method",
+    "update-payment-method-form": {
+      "status": {
+        "cc_token_success": "Card details saved successfully.",
+        "close": "Close"
+      },
+      "error": {
+        "cc_token_invalid": "Unfortunately, we couldn't save your card details. Please try again later or use a different card."
+      },
+      "template-set": {
+        "label": "Template set",
+        "dialog": {
+          "cancel": "Cancel",
+          "close": "Close",
+          "header": "Choose a template set",
+          "selection": {
+            "label": "",
+            "helper_text": "",
+            "search": "Search",
+            "clear": "Clear",
+            "pagination": {
+              "search_button_text": "Search",
+              "first": "First",
+              "last": "Last",
+              "next": "Next",
+              "pagination": "{{from}}-{{to}} out of {{total}}",
+              "previous": "Previous",
+              "card": {
+                "spinner": {
+                  "loading_busy": "Loading",
+                  "loading_empty": "No template sets found",
+                  "loading_error": "Unknown error"
+                }
+              }
+            },
+            "query-builder": {
+              "filters": {},
+              "add_or_clause": "Add OR clause",
+              "add_value": "Add value",
+              "code": "Code",
+              "date": "{{value, date}}",
+              "date_created": "Created on",
+              "date_modified": "Last updated on",
+              "delete": "Delete",
+              "field": "Field",
+              "hidden": "Hidden",
+              "is_defined_false": "Not defined",
+              "is_defined_true": "Defined",
+              "name": "Name",
+              "operator_equal": "Equal",
+              "operator_greaterthan": "Greater than",
+              "operator_greaterthanorequal": "Greater than or equal",
+              "operator_in": "One of",
+              "operator_isdefined": "Is defined",
+              "operator_lessthan": "Less than",
+              "operator_lessthanorequal": "Less than or equal",
+              "operator_not": "Not equal",
+              "or": "Or",
+              "query_builder_group": "Group of filters",
+              "query_builder_rule": "Filter",
+              "range_from": "From",
+              "range_to": "To",
+              "type": "Type",
+              "type_any": "Field of unknown type",
+              "type_attribute": "Key-value resource",
+              "type_date": "Date field",
+              "type_here": "Type here...",
+              "type_number": "Numeric field",
+              "type_string": "Text field",
+              "used_codes": "Codes used",
+              "value": "Value"
+            }
+          }
+        },
+        "card": {
+          "spinner": {
+            "loading_busy": "Loading",
+            "loading_empty": "Click to select",
+            "loading_error": "Unknown error"
+          }
+        },
+        "helper_text": "Template set determines which payment gateway and tokenization service will be used to capture card details."
+      },
+      "cc-token": {
+        "tokenize": "Save card",
+        "payment-card-embed": {
+          "stripe": {
+            "label": "Card details",
+            "status": {
+              "idle": "Your card details are securely processed by Stripe. Visit https://stripe.com to learn more.",
+              "busy": "Encrypting your card details...",
+              "fail": "This service is currently unavailable. Please try again later.",
+              "unsupported": "We don't support this card type. Please try another card."
+            }
+          },
+          "square": {
+            "label": "Card details",
+            "status": {
+              "idle": "Your card details are securely processed by Square. Visit https://squareup.com to learn more.",
+              "busy": "Encrypting your card details...",
+              "fail": "This service is currently unavailable. Please try again later.",
+              "unsupported": "We don't support this card type. Please try another card."
+            }
+          },
+          "default": {
+            "cc-number": {
+              "label": "Card number",
+              "placeholder": "1234 1234 1234 1234",
+              "v8n_required": "Enter a card number.",
+              "v8n_invalid": "Check your card number – it doesn't seem to be valid.",
+              "v8n_unsupported": "We don't support this card type."
+            },
+            "cc-exp": {
+              "label": "Expires on",
+              "placeholder": "MM/YYYY",
+              "v8n_required": "Enter an expiry date.",
+              "v8n_invalid": "Enter a date as MM/YYYY.",
+              "v8n_expired": "Your card has expired."
+            },
+            "cc-csc": {
+              "label": "CSC",
+              "placeholder": "XXX",
+              "v8n_required": "Enter a security code.",
+              "v8n_invalid": "Enter a 3-4 digits code."
+            },
+            "status": {
+              "idle": "Your card details are securely processed by Foxy.io. Visit https://foxy.io to learn more.",
+              "busy": "Encrypting your card details...",
+              "fail": "This service is currently unavailable. Please try again later.",
+              "misconfigured": "This form is not configured correctly. If you are seeing this message as a customer, please report this issue to the store support team."
+            }
+          }
+        }
+      },
+      "spinner": {
+        "refresh": "Refresh",
+        "loading_busy": "Loading",
+        "loading_error": "Unknown error",
+        "loading_empty": "This form works only with existing payment methods"
+      }
+    }
+  },
   "spinner": {
     "loading_busy": "Loading",
-    "loading_empty": "No data",
+    "loading_empty": "No payment method",
     "loading_error": "Unknown error"
   }
 }

package/dist/cdn/translations/payments-api-payment-method-form/en.json

@@ -1,6 +1,6 @@
 {
-  "select_method_title": "Select a payment method to get started",
-  "select_another_button_label": "Back to payment methods",
+  "select_method_title": "Select a payment method",
+  "select_another_button_label": "Select another",
   "default_additional_field_placeholder": "None",
   "conflict_message": "Remove {{ name }} to use this method",
   "tab_live": "Live setup",

package/dist/cdn/translations/update-payment-method-form/en.json

@@ -0,0 +1,140 @@
+{
+  "status": {
+    "cc_token_success": "Card details saved successfully.",
+    "close": "Close"
+  },
+  "error": {
+    "cc_token_invalid": "Unfortunately, we couldn't save your card details. Please try again later or use a different card."
+  },
+  "template-set": {
+    "label": "Template set",
+    "dialog": {
+      "cancel": "Cancel",
+      "close": "Close",
+      "header": "Choose a template set",
+      "selection": {
+        "label": "",
+        "helper_text": "",
+        "search": "Search",
+        "clear": "Clear",
+        "pagination": {
+          "search_button_text": "Search",
+          "first": "First",
+          "last": "Last",
+          "next": "Next",
+          "pagination": "{{from}}-{{to}} out of {{total}}",
+          "previous": "Previous",
+          "card": {
+            "spinner": {
+              "loading_busy": "Loading",
+              "loading_empty": "No template sets found",
+              "loading_error": "Unknown error"
+            }
+          }
+        },
+        "query-builder": {
+          "filters": {},
+          "add_or_clause": "Add OR clause",
+          "add_value": "Add value",
+          "code": "Code",
+          "date": "{{value, date}}",
+          "date_created": "Created on",
+          "date_modified": "Last updated on",
+          "delete": "Delete",
+          "field": "Field",
+          "hidden": "Hidden",
+          "is_defined_false": "Not defined",
+          "is_defined_true": "Defined",
+          "name": "Name",
+          "operator_equal": "Equal",
+          "operator_greaterthan": "Greater than",
+          "operator_greaterthanorequal": "Greater than or equal",
+          "operator_in": "One of",
+          "operator_isdefined": "Is defined",
+          "operator_lessthan": "Less than",
+          "operator_lessthanorequal": "Less than or equal",
+          "operator_not": "Not equal",
+          "or": "Or",
+          "query_builder_group": "Group of filters",
+          "query_builder_rule": "Filter",
+          "range_from": "From",
+          "range_to": "To",
+          "type": "Type",
+          "type_any": "Field of unknown type",
+          "type_attribute": "Key-value resource",
+          "type_date": "Date field",
+          "type_here": "Type here...",
+          "type_number": "Numeric field",
+          "type_string": "Text field",
+          "used_codes": "Codes used",
+          "value": "Value"
+        }
+      }
+    },
+    "card": {
+      "spinner": {
+        "loading_busy": "Loading",
+        "loading_empty": "Click to select",
+        "loading_error": "Unknown error"
+      }
+    },
+    "helper_text": "Template set determines which payment gateway and tokenization service will be used to capture card details."
+  },
+  "cc-token": {
+    "tokenize": "Save card",
+    "payment-card-embed": {
+      "stripe": {
+        "label": "Card details",
+        "status": {
+          "idle": "Your card details are securely processed by Stripe. Visit https://stripe.com to learn more.",
+          "busy": "Encrypting your card details...",
+          "fail": "This service is currently unavailable. Please try again later.",
+          "unsupported": "We don't support this card type. Please try a different card."
+        }
+      },
+      "square": {
+        "label": "Card details",
+        "status": {
+          "idle": "Your card details are securely processed by Square. Visit https://squareup.com to learn more.",
+          "busy": "Encrypting your card details...",
+          "fail": "This service is currently unavailable. Please try again later.",
+          "unsupported": "We don't support this card type. Please try a different card."
+        }
+      },
+      "default": {
+        "cc-number": {
+          "label": "Card number",
+          "placeholder": "1234 1234 1234 1234",
+          "v8n_required": "Enter a card number.",
+          "v8n_invalid": "Check your card number – it doesn't seem to be valid.",
+          "v8n_unsupported": "We don't support this card type."
+        },
+        "cc-exp": {
+          "label": "Expires on",
+          "placeholder": "MM/YYYY",
+          "v8n_required": "Enter an expiry date.",
+          "v8n_invalid": "Enter a date as MM/YYYY.",
+          "v8n_expired": "Your card has expired."
+        },
+        "cc-csc": {
+          "label": "CSC",
+          "placeholder": "XXX",
+          "v8n_required": "Enter a security code.",
+          "v8n_invalid": "Enter a 3-4 digits code."
+        },
+        "status": {
+          "idle": "Your card details are securely processed by Foxy.io. Visit https://foxy.io to learn more.",
+          "busy": "Encrypting your card details...",
+          "fail": "This service is currently unavailable. Please try again later.",
+          "misconfigured": "This form is not configured correctly. If you are seeing this message as a customer, please report this issue to the store support team."
+        }
+      }
+    }
+  },
+  "spinner": {
+    "refresh": "Refresh",
+    "loading_busy": "Loading",
+    "loading_error": "Unknown error",
+    "loading_empty": "This form works only with existing payment methods"
+  }
+}

package/dist/elements/internal/InternalForm/InternalForm.js

@@ -140,6 +140,8 @@ export class InternalForm extends Base {
     `;
     }
     __renderStatus({ key, options }) {
+        if (this.hiddenSelector.matches('status', true))
+            return;
         return html `
       <p
         data-testid="status"

package/dist/elements/internal/InternalForm/InternalForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders header actions when the optional header is rendered.\n   * Empty by default.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  renderHeaderActions(data: TData): TemplateResult | null {\n    return null;\n  }\n\n  /**\n   * Renders optional form header with ID, last update timestamp and actions list (snapshot-only).\n   * Customize which actions are rendered with `.renderHeaderActions()` method.\n   */\n  renderHeader(): TemplateResult {\n    const data = this.data;\n    const actions = data ? this.renderHeaderActions(data) : null;\n    const id = data ? getResourceId(data._links.self.href) : '';\n\n    return html`\n      <h2>\n        <span class=\"flex items-center gap-s leading-xs text-xxl font-medium break-all\">\n          <foxy-i18n infer=\"header\" key=${data ? 'title_existing' : 'title_new'} .options=${{ id }}>\n          </foxy-i18n>\n          ${data\n            ? html`\n                <foxy-copy-to-clipboard infer=\"header\" class=\"text-m\" text=${id}>\n                </foxy-copy-to-clipboard>\n              `\n            : ''}\n        </span>\n        ${data\n          ? html`\n              <foxy-i18n\n                infer=\"header\"\n                class=\"text-l text-secondary\"\n                key=\"subtitle\"\n                .options=${data}\n              >\n              </foxy-i18n>\n              ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n            `\n          : ''}\n      </h2>\n    `;\n  }\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    return this.data\n      ? html`\n          <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n          <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n        `\n      : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders header actions when the optional header is rendered.\n   * Empty by default.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  renderHeaderActions(data: TData): TemplateResult | null {\n    return null;\n  }\n\n  /**\n   * Renders optional form header with ID, last update timestamp and actions list (snapshot-only).\n   * Customize which actions are rendered with `.renderHeaderActions()` method.\n   */\n  renderHeader(): TemplateResult {\n    const data = this.data;\n    const actions = data ? this.renderHeaderActions(data) : null;\n    const id = data ? getResourceId(data._links.self.href) : '';\n\n    return html`\n      <h2>\n        <span class=\"flex items-center gap-s leading-xs text-xxl font-medium break-all\">\n          <foxy-i18n infer=\"header\" key=${data ? 'title_existing' : 'title_new'} .options=${{ id }}>\n          </foxy-i18n>\n          ${data\n            ? html`\n                <foxy-copy-to-clipboard infer=\"header\" class=\"text-m\" text=${id}>\n                </foxy-copy-to-clipboard>\n              `\n            : ''}\n        </span>\n        ${data\n          ? html`\n              <foxy-i18n\n                infer=\"header\"\n                class=\"text-l text-secondary\"\n                key=\"subtitle\"\n                .options=${data}\n              >\n              </foxy-i18n>\n              ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n            `\n          : ''}\n      </h2>\n    `;\n  }\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    return this.data\n      ? html`\n          <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n          <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n        `\n      : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    if (this.hiddenSelector.matches('status', true)) return;\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}

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

@@ -54,6 +54,11 @@ export declare class Customer extends Base<Data> {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
     templates: Templates;
+    /**
+     * Configuration URL for the Payment Card Embed. If provided, this element will allow
+     * the customer to update their default payment method using the Payment Card Embed.
+     */
+    embedUrl: string | null;
     /** Customer Portal settings for use in Customer mode. */
     settings: Settings | null;
     private readonly __renderHeaderActionsEdit;

package/dist/elements/public/Customer/Customer.js

@@ -59,6 +59,11 @@ export class Customer extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
+        /**
+         * Configuration URL for the Payment Card Embed. If provided, this element will allow
+         * the customer to update their default payment method using the Payment Card Embed.
+         */
+        this.embedUrl = null;
         /** Customer Portal settings for use in Customer mode. */
         this.settings = null;
         // #region header
@@ -314,22 +319,23 @@ export class Customer extends Base {
         // #endregion
         // #region payment-methods
         this.__renderPaymentMethodsList = () => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             const cardId = 'payment-methods:list:card';
             return html `
       <div data-testid="payment-methods:list">
         ${this.renderTemplateOrSlot('payment-methods:list:before')}
 
         <foxy-payment-method-card
-          readonlycontrols=${this.readonlySelector.zoom(cardId).toString()}
-          disabledcontrols=${this.disabledSelector.zoom(cardId).toString()}
-          hiddencontrols=${this.hiddenSelector.zoom(cardId).toString()}
+          readonlycontrols=${this.readonlySelector.zoom(cardId)}
+          disabledcontrols=${this.disabledSelector.zoom(cardId)}
+          hiddencontrols=${this.hiddenSelector.zoom(cardId)}
           data-testid=${cardId}
+          embed-url=${ifDefined((_a = this.embedUrl) !== null && _a !== void 0 ? _a : void 0)}
           group=${this.group}
           class="w-payment-method-card border-radius-overflow-fix rounded-t-l rounded-b-l overflow-hidden"
-          href=${(_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:default_payment_method'].href) !== null && _b !== void 0 ? _b : ''}
+          href=${ifDefined((_b = this.data) === null || _b === void 0 ? void 0 : _b._links['fx:default_payment_method'].href)}
           lang=${this.lang}
-          ns="${this.ns} ${(_d = (_c = customElements.get('foxy-payment-method-card')) === null || _c === void 0 ? void 0 : _c.defaultNS) !== null && _d !== void 0 ? _d : ''}"
+          ns="${this.ns} payment-method-card"
           .templates=${this.getNestedTemplates(cardId)}
         >
         </foxy-payment-method-card>
@@ -692,6 +698,7 @@ export class Customer extends Base {
         return {
             ...super.properties,
             settings: { type: Object },
+            embedUrl: { attribute: 'embed-url' },
         };
     }
     static get styles() {