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

package/dist/elements/public/PaymentMethodCard/PaymentMethodCard.js

@@ -1,12 +1,12 @@
 import * as logos from "./logos.js";
-import { css } from 'lit-element';
-import { html } from 'lit-html';
-import { BooleanSelector } from '@foxy.io/sdk/core';
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { NucleonElement } from "../NucleonElement/index.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
-import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { backgrounds } from "./backgrounds.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { css, html } from 'lit-element';
 import { classMap } from "../../../utils/class-map.js";
 const NS = 'payment-method-card';
 const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));
@@ -17,14 +17,71 @@ const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement,
  * @slot actions:after - **new in v1.4.0**
  * @slot actions:delete:before - **new in v1.4.0**
  * @slot actions:delete:after - **new in v1.4.0**
+ * @slot actions:update:before - **new in v1.27.0**
+ * @slot actions:update:after - **new in v1.27.0**
  *
- * @element foxy-payment-method-form
+ * @element foxy-payment-method-card
  * @since 1.2.0
  */
 export class PaymentMethodCard extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
+        /**
+         * Configuration URL for the Payment Card Embed. If provided,
+         * the card will have an option of updating payment method.
+         * Otherwise, only the delete option will be available.
+         */
+        this.embedUrl = null;
+        this.__renderActionsUpdate = () => {
+            var _a;
+            const hasCC = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.save_cc);
+            const buttonStyle = hasCC
+                ? '--lumo-primary-text-color: #fff; --lumo-primary-color-50pct: rgba(255, 255, 255, 0.5); --lumo-contrast-5pct: rgba(255, 255, 255, 0.05)'
+                : void 0;
+            return html `
+      <div class="flex">
+        ${this.renderTemplateOrSlot('actions:update:before')}
+
+        <foxy-form-dialog
+          data-testid="update-dialog"
+          readonlycontrols=${this.readonlySelector.zoom('actions:update:form')}
+          disabledcontrols=${this.disabledSelector.zoom('actions:update:form')}
+          hiddencontrols="status ${this.hiddenSelector.zoom('actions:update:form')}"
+          header=${hasCC ? 'dialog_header_update' : 'dialog_header_add'}
+          group=${this.group}
+          form="foxy-update-payment-method-form"
+          href=${this.href}
+          lang=${this.lang}
+          ns="${this.ns} dialog"
+          alert
+          close-on-patch
+          .props=${{ '.embedUrl': this.embedUrl }}
+        >
+        </foxy-form-dialog>
+
+        <vaadin-button
+          class=${ifDefined(hasCC ? 'px-xs rounded' : void 0)}
+          theme=${hasCC ? 'icon' : 'contrast small'}
+          style=${ifDefined(buttonStyle)}
+          aria-label=${this.t(hasCC ? 'update' : 'add')}
+          data-testid="actions:update"
+          ?disabled=${this.disabledSelector.matches('actions:update', true)}
+          @click=${(evt) => {
+                const button = evt.currentTarget;
+                const dialog = button.previousElementSibling;
+                dialog.show(button);
+            }}
+        >
+          ${hasCC
+                ? html `<iron-icon icon="icons:create"></iron-icon>`
+                : html `<foxy-i18n infer="" key="add"></foxy-i18n>`}
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('actions:update:after')}
+      </div>
+    `;
+        };
         this.__renderActionsDelete = () => {
             return html `
       <div class="flex">
@@ -47,15 +104,24 @@ export class PaymentMethodCard extends Base {
     `;
         };
         this.__renderActions = () => {
+            const isUpdateHidden = this.hiddenSelector.matches('actions:update', true) || !this.embedUrl;
+            const isDeleteHidden = this.hiddenSelector.matches('actions:delete', true);
             return html `
-      <div class="flex" data-testid="actions">
+      <div class="flex gap-s" data-testid="actions">
         ${this.renderTemplateOrSlot('actions:before')}
-        ${this.hiddenSelector.matches('actions:delete', true) ? '' : this.__renderActionsDelete()}
+        ${isUpdateHidden ? '' : this.__renderActionsUpdate()}
+        ${isDeleteHidden ? '' : this.__renderActionsDelete()}
         ${this.renderTemplateOrSlot('actions:after')}
       </div>
     `;
         };
     }
+    static get properties() {
+        return {
+            ...super.properties,
+            embedUrl: { attribute: 'embed-url' },
+        };
+    }
     static get styles() {
         return [
             super.styles,
@@ -81,6 +147,7 @@ export class PaymentMethodCard extends Base {
         const { data, lang, ns } = this;
         if (this.in({ idle: 'template' }) || !(data === null || data === void 0 ? void 0 : data.save_cc) || !this.in('idle')) {
             const spinnerState = this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty';
+            const isUpdateHidden = this.hiddenSelector.matches('actions:update', true) || !this.embedUrl || !this.data;
             return html `
         <div
           class="ratio-card"
@@ -89,14 +156,16 @@ export class PaymentMethodCard extends Base {
           data-testid="wrapper"
         >
           <div class="h-full bg-contrast-5"></div>
-          <div class="absolute inset-0 flex items-center justify-center">
+          <div class="absolute inset-0 flex flex-col gap-m items-center justify-center">
             <foxy-spinner
               data-testid="spinner"
+              layout="vertical"
               state=${spinnerState}
               lang=${this.lang}
               ns="${ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
             >
             </foxy-spinner>
+            ${isUpdateHidden ? '' : this.__renderActionsUpdate()}
           </div>
         </div>
       `;
@@ -130,11 +199,11 @@ export class PaymentMethodCard extends Base {
             'justify-end': this.readonlyControls === BooleanSelector.True,
         })}
           >
+            <div class="mr-auto rounded h-m">${logo}</div>
             ${this.hiddenSelector.matches('actions', true) ? '' : this.__renderActions()}
-            <div class="ml-auto rounded h-m">${logo}</div>
           </div>
 
-          <div class="font-tnum leading-none flex justify-between">
+          <div class="font-tnum leading-none flex justify-between" style="color: white">
             <div data-testid="expiry">
               ${data.cc_exp_month && data.cc_exp_year
             ? html `

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentMethodCard/PaymentMethodCard.ts"],"names":[],"mappings":"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","sourcesContent":["import * as logos from './logos';\n\nimport { CSSResultArray, css } from 'lit-element';\nimport { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { backgrounds } from './backgrounds';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'payment-method-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a payment method.\n *\n * @slot actions:before - **new in v1.4.0**\n * @slot actions:after - **new in v1.4.0**\n * @slot actions:delete:before - **new in v1.4.0**\n * @slot actions:delete:after - **new in v1.4.0**\n *\n * @element foxy-payment-method-form\n * @since 1.2.0\n */\nexport class PaymentMethodCard extends Base<Data> {\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      backgrounds,\n      css`\n        .ratio-card {\n          padding-top: 63%;\n          position: relative;\n          height: 0;\n        }\n\n        .ratio-card > * {\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n        }\n      `,\n    ];\n  }\n\n  templates: Templates = {};\n\n  private readonly __renderActionsDelete = () => {\n    return html`\n      <div class=\"flex\">\n        ${this.renderTemplateOrSlot('actions:delete:before')}\n\n        <vaadin-button\n          class=\"px-xs rounded\"\n          theme=\"icon\"\n          style=\"--lumo-primary-text-color: #fff; --lumo-primary-color-50pct: rgba(255, 255, 255, 0.5); --lumo-contrast-5pct: rgba(255, 255, 255, 0.05)\"\n          aria-label=${this.t('delete').toString()}\n          data-testid=\"actions:delete\"\n          ?disabled=${this.disabledSelector.matches('actions:delete', true)}\n          @click=${this.__handleDelete}\n        >\n          <iron-icon icon=\"icons:delete\"></iron-icon>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('actions:delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderActions = () => {\n    return html`\n      <div class=\"flex\" data-testid=\"actions\">\n        ${this.renderTemplateOrSlot('actions:before')}\n        ${this.hiddenSelector.matches('actions:delete', true) ? '' : this.__renderActionsDelete()}\n        ${this.renderTemplateOrSlot('actions:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { data, lang, ns } = this;\n\n    if (this.in({ idle: 'template' }) || !data?.save_cc || !this.in('idle')) {\n      const spinnerState = this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty';\n\n      return html`\n        <div\n          class=\"ratio-card\"\n          aria-live=\"polite\"\n          aria-busy=${this.in('busy')}\n          data-testid=\"wrapper\"\n        >\n          <div class=\"h-full bg-contrast-5\"></div>\n          <div class=\"absolute inset-0 flex items-center justify-center\">\n            <foxy-spinner\n              data-testid=\"spinner\"\n              state=${spinnerState}\n              lang=${this.lang}\n              ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n            >\n            </foxy-spinner>\n          </div>\n        </div>\n      `;\n    }\n\n    const type = data!.cc_type?.toLowerCase() ?? 'unknown';\n    const logo = logos[type as keyof typeof logos] ?? logos.unknown;\n    const last4Digits = data!.cc_number_masked?.substring(data!.cc_number_masked.length - 4);\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"ratio-card\" data-testid=\"wrapper\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div\n          class=\"flex flex-col justify-between text-base text-m leading-m font-lumo p-m bg-unknown bg-${type}\"\n        >\n          <div\n            class=${classMap({\n              'flex items-start': true,\n              'justify-between': this.readonlyControls === BooleanSelector.False,\n              'justify-end': this.readonlyControls === BooleanSelector.True,\n            })}\n          >\n            ${this.hiddenSelector.matches('actions', true) ? '' : this.__renderActions()}\n            <div class=\"ml-auto rounded h-m\">${logo}</div>\n          </div>\n\n          <div class=\"font-tnum leading-none flex justify-between\">\n            <div data-testid=\"expiry\">\n              ${data!.cc_exp_month && data.cc_exp_year\n                ? html`\n                    <span class=\"sr-only\">${this.t('expires').toString()}&nbsp;</span>\n                    <span>${data!.cc_exp_month} / ${data!.cc_exp_year}</span>\n                  `\n                : ''}\n            </div>\n\n            <div data-testid=\"number\">\n              ${last4Digits\n                ? html`\n                    <span class=\"sr-only\">${this.t('last_4_digits').toString()}&nbsp;</span>\n                    <span aria-hidden=\"true\">••••</span>\n                    <span>${last4Digits}</span>\n                  `\n                : ''}\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendDelete(): Promise<null> {\n    const body = JSON.stringify({ save_cc: false });\n    await this._fetch(this.href, { method: 'PATCH', body });\n    const rumour = NucleonElement.Rumour(this.group);\n\n    rumour.share({ data: null, source: this.href, related: [this.parent] });\n    return null;\n  }\n\n  private __handleDelete(evt: Event) {\n    const confirm = this.renderRoot.querySelector('#confirm');\n    (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}
+{"version":3,"file":"PaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentMethodCard/PaymentMethodCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { Data, Templates } from './types';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { TemplateResult } from 'lit-html';\nimport type { FormDialog } from '../FormDialog/FormDialog';\n\nimport * as logos from './logos';\n\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { backgrounds } from './backgrounds';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { css, html } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'payment-method-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a payment method.\n *\n * @slot actions:before - **new in v1.4.0**\n * @slot actions:after - **new in v1.4.0**\n * @slot actions:delete:before - **new in v1.4.0**\n * @slot actions:delete:after - **new in v1.4.0**\n * @slot actions:update:before - **new in v1.27.0**\n * @slot actions:update:after - **new in v1.27.0**\n *\n * @element foxy-payment-method-card\n * @since 1.2.0\n */\nexport class PaymentMethodCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      embedUrl: { attribute: 'embed-url' },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      backgrounds,\n      css`\n        .ratio-card {\n          padding-top: 63%;\n          position: relative;\n          height: 0;\n        }\n\n        .ratio-card > * {\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n        }\n      `,\n    ];\n  }\n\n  templates: Templates = {};\n\n  /**\n   * Configuration URL for the Payment Card Embed. If provided,\n   * the card will have an option of updating payment method.\n   * Otherwise, only the delete option will be available.\n   */\n  embedUrl: string | null = null;\n\n  private readonly __renderActionsUpdate = () => {\n    const hasCC = !!this.data?.save_cc;\n    const buttonStyle = hasCC\n      ? '--lumo-primary-text-color: #fff; --lumo-primary-color-50pct: rgba(255, 255, 255, 0.5); --lumo-contrast-5pct: rgba(255, 255, 255, 0.05)'\n      : void 0;\n\n    return html`\n      <div class=\"flex\">\n        ${this.renderTemplateOrSlot('actions:update:before')}\n\n        <foxy-form-dialog\n          data-testid=\"update-dialog\"\n          readonlycontrols=${this.readonlySelector.zoom('actions:update:form')}\n          disabledcontrols=${this.disabledSelector.zoom('actions:update:form')}\n          hiddencontrols=\"status ${this.hiddenSelector.zoom('actions:update:form')}\"\n          header=${hasCC ? 'dialog_header_update' : 'dialog_header_add'}\n          group=${this.group}\n          form=\"foxy-update-payment-method-form\"\n          href=${this.href}\n          lang=${this.lang}\n          ns=\"${this.ns} dialog\"\n          alert\n          close-on-patch\n          .props=${{ '.embedUrl': this.embedUrl }}\n        >\n        </foxy-form-dialog>\n\n        <vaadin-button\n          class=${ifDefined(hasCC ? 'px-xs rounded' : void 0)}\n          theme=${hasCC ? 'icon' : 'contrast small'}\n          style=${ifDefined(buttonStyle)}\n          aria-label=${this.t(hasCC ? 'update' : 'add')}\n          data-testid=\"actions:update\"\n          ?disabled=${this.disabledSelector.matches('actions:update', true)}\n          @click=${(evt: CustomEvent) => {\n            const button = evt.currentTarget as HTMLElement;\n            const dialog = button.previousElementSibling as FormDialog;\n            dialog.show(button);\n          }}\n        >\n          ${hasCC\n            ? html`<iron-icon icon=\"icons:create\"></iron-icon>`\n            : html`<foxy-i18n infer=\"\" key=\"add\"></foxy-i18n>`}\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('actions:update:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderActionsDelete = () => {\n    return html`\n      <div class=\"flex\">\n        ${this.renderTemplateOrSlot('actions:delete:before')}\n\n        <vaadin-button\n          class=\"px-xs rounded\"\n          theme=\"icon\"\n          style=\"--lumo-primary-text-color: #fff; --lumo-primary-color-50pct: rgba(255, 255, 255, 0.5); --lumo-contrast-5pct: rgba(255, 255, 255, 0.05)\"\n          aria-label=${this.t('delete').toString()}\n          data-testid=\"actions:delete\"\n          ?disabled=${this.disabledSelector.matches('actions:delete', true)}\n          @click=${this.__handleDelete}\n        >\n          <iron-icon icon=\"icons:delete\"></iron-icon>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('actions:delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderActions = () => {\n    const isUpdateHidden = this.hiddenSelector.matches('actions:update', true) || !this.embedUrl;\n    const isDeleteHidden = this.hiddenSelector.matches('actions:delete', true);\n\n    return html`\n      <div class=\"flex gap-s\" data-testid=\"actions\">\n        ${this.renderTemplateOrSlot('actions:before')}\n        ${isUpdateHidden ? '' : this.__renderActionsUpdate()}\n        ${isDeleteHidden ? '' : this.__renderActionsDelete()}\n        ${this.renderTemplateOrSlot('actions:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { data, lang, ns } = this;\n\n    if (this.in({ idle: 'template' }) || !data?.save_cc || !this.in('idle')) {\n      const spinnerState = this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty';\n      const isUpdateHidden =\n        this.hiddenSelector.matches('actions:update', true) || !this.embedUrl || !this.data;\n\n      return html`\n        <div\n          class=\"ratio-card\"\n          aria-live=\"polite\"\n          aria-busy=${this.in('busy')}\n          data-testid=\"wrapper\"\n        >\n          <div class=\"h-full bg-contrast-5\"></div>\n          <div class=\"absolute inset-0 flex flex-col gap-m items-center justify-center\">\n            <foxy-spinner\n              data-testid=\"spinner\"\n              layout=\"vertical\"\n              state=${spinnerState}\n              lang=${this.lang}\n              ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n            >\n            </foxy-spinner>\n            ${isUpdateHidden ? '' : this.__renderActionsUpdate()}\n          </div>\n        </div>\n      `;\n    }\n\n    const type = data!.cc_type?.toLowerCase() ?? 'unknown';\n    const logo = logos[type as keyof typeof logos] ?? logos.unknown;\n    const last4Digits = data!.cc_number_masked?.substring(data!.cc_number_masked.length - 4);\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"ratio-card\" data-testid=\"wrapper\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div\n          class=\"flex flex-col justify-between text-base text-m leading-m font-lumo p-m bg-unknown bg-${type}\"\n        >\n          <div\n            class=${classMap({\n              'flex items-start': true,\n              'justify-between': this.readonlyControls === BooleanSelector.False,\n              'justify-end': this.readonlyControls === BooleanSelector.True,\n            })}\n          >\n            <div class=\"mr-auto rounded h-m\">${logo}</div>\n            ${this.hiddenSelector.matches('actions', true) ? '' : this.__renderActions()}\n          </div>\n\n          <div class=\"font-tnum leading-none flex justify-between\" style=\"color: white\">\n            <div data-testid=\"expiry\">\n              ${data!.cc_exp_month && data.cc_exp_year\n                ? html`\n                    <span class=\"sr-only\">${this.t('expires').toString()}&nbsp;</span>\n                    <span>${data!.cc_exp_month} / ${data!.cc_exp_year}</span>\n                  `\n                : ''}\n            </div>\n\n            <div data-testid=\"number\">\n              ${last4Digits\n                ? html`\n                    <span class=\"sr-only\">${this.t('last_4_digits').toString()}&nbsp;</span>\n                    <span aria-hidden=\"true\">••••</span>\n                    <span>${last4Digits}</span>\n                  `\n                : ''}\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendDelete(): Promise<null> {\n    const body = JSON.stringify({ save_cc: false });\n    await this._fetch(this.href, { method: 'PATCH', body });\n    const rumour = NucleonElement.Rumour(this.group);\n\n    rumour.share({ data: null, source: this.href, related: [this.parent] });\n    return null;\n  }\n\n  private __handleDelete(evt: Event) {\n    const confirm = this.renderRoot.querySelector('#confirm');\n    (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}

package/dist/elements/public/PaymentMethodCard/index.d.ts

@@ -3,6 +3,8 @@ import '@polymer/iron-icons';
 import '@vaadin/vaadin-button';
 import '../../internal/InternalConfirmDialog/index';
 import '../../internal/InternalSandbox/index';
+import '../UpdatePaymentMethodForm/index';
+import '../FormDialog/index';
 import '../Spinner/index';
 import '../I18n/index';
 import { PaymentMethodCard } from './PaymentMethodCard';

package/dist/elements/public/PaymentMethodCard/index.js

@@ -3,6 +3,8 @@ import '@polymer/iron-icons';
 import '@vaadin/vaadin-button';
 import "../../internal/InternalConfirmDialog/index.js";
 import "../../internal/InternalSandbox/index.js";
+import "../UpdatePaymentMethodForm/index.js";
+import "../FormDialog/index.js";
 import "../Spinner/index.js";
 import "../I18n/index.js";
 import { PaymentMethodCard } from "./PaymentMethodCard.js";

package/dist/elements/public/PaymentMethodCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentMethodCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icon';\nimport '@polymer/iron-icons';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { PaymentMethodCard } from './PaymentMethodCard';\n\ncustomElements.define('foxy-payment-method-card', PaymentMethodCard);\n\nexport { PaymentMethodCard };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentMethodCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,iDAA8C;AAC9C,6CAA0C;AAC1C,gCAA6B;AAC7B,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icon';\nimport '@polymer/iron-icons';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../UpdatePaymentMethodForm/index';\nimport '../FormDialog/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { PaymentMethodCard } from './PaymentMethodCard';\n\ncustomElements.define('foxy-payment-method-card', PaymentMethodCard);\n\nexport { PaymentMethodCard };\n"]}

package/dist/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.js

@@ -137,8 +137,7 @@ export class PaymentsApiPaymentMethodForm extends Base {
                     for (const field of block.fields) {
                         if ('optional' in field) {
                             if (!field.optional) {
-                                const path = [block.parent_id, block.id, field.id].filter(v => !!v);
-                                if (!has(additionalFields, path)) {
+                                if (!has(additionalFields, field.id)) {
                                     if (field.type !== 'checkbox') {
                                         return 'additional-fields:v8n_invalid';
                                     }
@@ -161,6 +160,8 @@ export class PaymentsApiPaymentMethodForm extends Base {
         return Object.entries((_a = this.__availablePaymentMethods) !== null && _a !== void 0 ? _a : {})
             .sort((a, b) => a[0].localeCompare(b[0], 'en'))
             .reduce((groups, [type, helper]) => {
+            if (helper.is_deprecated)
+                return groups;
             const firstChar = type.charAt(0).toUpperCase();
             const isSpecialCharacter = !/\w/.test(firstChar);
             const name = isSpecialCharacter ? '#' : firstChar;
@@ -203,6 +204,29 @@ export class PaymentsApiPaymentMethodForm extends Base {
     }
     __renderPaymentMethodSelector() {
         return html `
+      <figure data-testid="logo" class="relative flex flex-col gap-m p-m items-center">
+        <img
+          class="relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
+          src=${PaymentsApiPaymentMethodForm.defaultImageSrc}
+          alt=""
+        />
+
+        <figcaption class="relative min-w-0 font-medium text-xl text-center">
+          <foxy-i18n infer="" key="select_method_title"></foxy-i18n>
+        </figcaption>
+      </figure>
+
+      <section data-testid="select-method-list" class="-mt-m">
+        ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {
+            return html `
+            <p class="font-medium text-tertiary py-m">${name}</p>
+            <ul class="grid grid-cols-2 gap-m">
+              ${items.map(item => html `<li>${this.__renderPaymentMethodButton(item)}</li>`)}
+            </ul>
+          `;
+        })}
+      </section>
+
       <foxy-nucleon
         class="hidden"
         infer=""
@@ -211,26 +235,6 @@ export class PaymentsApiPaymentMethodForm extends Base {
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
-
-      <foxy-i18n
-        class="block text-xxl font-medium border-b border-contrast-10 pb-m"
-        infer=""
-        key="select_method_title"
-      >
-      </foxy-i18n>
-
-      <section data-testid="select-method-list">
-        <div class="-my-s">
-          ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {
-            return html `
-              <p class="w-m text-center font-medium text-tertiary py-s">${name}</p>
-              <ul class="grid grid-cols-1">
-                ${items.map(item => html `<li>${this.__renderPaymentMethodButton(item)}</li>`)}
-              </ul>
-            `;
-        })}
-        </div>
-      </section>
     `;
     }
     __renderPaymentMethodConfig(type) {
@@ -246,7 +250,18 @@ export class PaymentsApiPaymentMethodForm extends Base {
         />
 
         <figcaption class="relative min-w-0 font-medium text-xl text-center">
-          ${(_d = (_c = this.form.helper) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : this.form.type}&ZeroWidthSpace;
+          <div>${(_d = (_c = this.form.helper) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : this.form.type}&ZeroWidthSpace;</div>
+          ${((_e = this.data) === null || _e === void 0 ? void 0 : _e.type) ? ''
+            : html `
+                <vaadin-button
+                  data-testid="select-another-button"
+                  theme="tertiary-inline"
+                  class="text-m"
+                  @click=${() => this.undo()}
+                >
+                  <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
+                </vaadin-button>
+              `}
         </figcaption>
       </figure>
 
@@ -326,7 +341,7 @@ export class PaymentsApiPaymentMethodForm extends Base {
 
       <foxy-internal-text-control infer="description"></foxy-internal-text-control>
 
-      ${((_e = this.form.helper) === null || _e === void 0 ? void 0 : _e.supports_3d_secure) ? html `
+      ${((_f = this.form.helper) === null || _f === void 0 ? void 0 : _f.supports_3d_secure) ? html `
             <foxy-internal-radio-group-control
               infer="three-d-secure-toggle"
               class="-mb-s"
@@ -350,58 +365,54 @@ export class PaymentsApiPaymentMethodForm extends Base {
             : ''}
           `
             : ''}
-      ${((_f = this.data) === null || _f === void 0 ? void 0 : _f.type) ? ''
-            : html `
-            <vaadin-button
-              data-testid="select-another-button"
-              theme="contrast"
-              @click=${() => this.undo()}
-            >
-              <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
-            </vaadin-button>
-          `}
       ${super.renderBody()}
     `;
     }
     __renderPaymentMethodButton({ type, helper }) {
         var _a, _b;
         const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;
+        const src = (_b = (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, type)) !== null && _b !== void 0 ? _b : defaultSrc;
+        const onError = (evt) => (evt.currentTarget.src = defaultSrc);
         return html `
       <button
         class=${classMap({
-            'w-full block text-left p-s rounded -mx-s': true,
-            'transition-colors hover-bg-contrast-5': !helper.conflict,
+            'relative w-full block text-left p-s rounded bg-contrast-5 overflow-hidden': true,
+            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'transition-colors hover-bg-contrast-10': !helper.conflict,
             'cursor-default': !!helper.conflict,
         })}
         ?disabled=${!!helper.conflict}
+        title=${helper.conflict ? this.t('conflict_message', helper.conflict) : ''}
         @click=${() => this.edit({ type, helper })}
       >
-        <figure class="flex items-center gap-m h-m">
+        <img
+          class="absolute top-0 left-0 w-1-2 h-full object-cover bg-center filter saturate-200 blur-3xl"
+          style="transform: translate3d(0, 0, 0)"
+          src=${src}
+          alt=""
+          ?hidden=${!!helper.conflict}
+          @error=${onError}
+        />
+
+        <figure class="relative flex flex-col gap-m">
           <img
-            class="relative h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
-            src=${(_b = (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, type)) !== null && _b !== void 0 ? _b : defaultSrc}
+            class=${classMap({
+            'h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs': true,
+            'filter grayscale': !!helper.conflict,
+        })}
+            src=${src}
             alt=""
-            @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
+            @error=${onError}
           />
 
           <figcaption
             class=${classMap({
             'min-w-0 flex-1 truncate leading-s': true,
-            'text-tertiary': !!helper.conflict,
+            'text-disabled': !!helper.conflict,
         })}
           >
             <div class="font-medium">${helper.name}&ZeroWidthSpace;</div>
-            ${helper.conflict
-            ? html `
-                  <foxy-i18n
-                    class="block text-tertiary text-xs"
-                    infer=""
-                    key="conflict_message"
-                    .options=${helper.conflict}
-                  >
-                  </foxy-i18n>
-                `
-            : ''}
+            <div class="text-xs ${helper.conflict ? '' : 'text-secondary'}">${type}</div>
           </figcaption>
         </figure>
       </button>
@@ -410,13 +421,12 @@ export class PaymentsApiPaymentMethodForm extends Base {
     __renderBlock(block) {
         return html `${block.fields.map(field => {
             var _a, _b, _c;
-            const path = [block.parent_id, block.id, field.id].filter(v => !!v);
-            const scope = ['additional-fields', ...path].join('-').replace(/_/g, '-');
+            const scope = ['additional-fields', field.id].join('-').replace(/_/g, '-');
             const getValue = () => {
                 var _a, _b;
                 try {
                     const config = JSON.parse((_a = this.form.additional_fields) !== null && _a !== void 0 ? _a : '{}');
-                    return (_b = get(config, path)) !== null && _b !== void 0 ? _b : config.default_value;
+                    return (_b = get(config, field.id)) !== null && _b !== void 0 ? _b : config.default_value;
                 }
                 catch (_c) {
                     return field.default_value;
@@ -426,7 +436,7 @@ export class PaymentsApiPaymentMethodForm extends Base {
                 var _a;
                 try {
                     const config = JSON.parse((_a = this.form.additional_fields) !== null && _a !== void 0 ? _a : '{}');
-                    this.edit({ additional_fields: JSON.stringify(set(config, path, newValue)) });
+                    this.edit({ additional_fields: JSON.stringify(set(config, field.id, newValue)) });
                 }
                 catch (_b) {
                     return '';

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentsApiPaymentMethodForm.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { AvailablePaymentMethods } from '../PaymentsApi/api/types';\nimport type { Templates, Block, Data } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { TabsElement } from '@vaadin/vaadin-tabs';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nimport has from 'lodash-es/has';\nimport get from 'lodash-es/get';\nimport set from 'lodash-es/set';\n\ntype PaymentMethod = {\n  helper: AvailablePaymentMethods['values'][string];\n  type: string;\n};\n\nconst NS = 'payments-api-payment-method-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for the `fx:payment_method` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @slot description:before\n * @slot description:after\n *\n * @slot account-id:before\n * @slot account-id:after\n *\n * @slot account-key:before\n * @slot account-key:after\n *\n * @slot third-party-key:before\n * @slot third-party-key:after\n *\n * @slot test-account-id:before\n * @slot test-account-id:after\n *\n * @slot test-account-key:before\n * @slot test-account-key:after\n *\n * @slot test-third-party-key:before\n * @slot test-third-party-key:after\n *\n * @slot additional-fields-[field-name-in-kebab-case]:before\n * @slot additional-fields-[field-name-in-kebab-case]:after\n *\n * @slot three-d-secure-toggle:before\n * @slot three-d-secure-toggle:after\n *\n * @slot three-d-secure-response:before\n * @slot three-d-secure-response:after\n *\n * @slot timestamps:before\n * @slot timestamps:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-payments-api-payment-method-form\n * @since 1.21.0\n */\nexport class PaymentsApiPaymentMethodForm extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='m29.3 14 14-14H32.1l-14 14h11.2Zm2.7 9.9 12-12V.7L30.62 14.1A2 2 0 0 1 32 16v7.9ZM13.31 44h11.18L44 24.5V13.3l-12 12V28a2 2 0 0 1-2 2h-2.69l-14 14Zm-1.41 0H.7l14-14h11.2l-14 14Zm14 0h11.2l6.9-6.9V25.9L25.9 44Zm12.6 0H44v-5.5L38.5 44Z'/%3E%3Cpath fill='%23fff' d='M30 28H14v-6h16v6Zm0-10v-2H14v2h16ZM0 43.3l13.4-13.4A2 2 0 0 1 12 28v-7.9L0 32.12V43.3Z'/%3E%3Cpath fill='%23fff' d='M16.7 14H14c-1.11 0-1.99.89-1.99 2v2.7L0 30.7V19.52L19.52 0H30.7l-14 14Zm1.4-14H6.92L0 6.92V18.1L18.1 0ZM5.5 0H0v5.5L5.5 0Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __tab: { attribute: false },\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ description: v }) => !v || v.length <= 100 || 'description:v8n_too_long',\n      ({ type: v }) => !!v || 'type:v8n_required',\n\n      form => {\n        const blocks = form.helper?.additional_fields?.blocks ?? [];\n        let additionalFields: Record<string, unknown>;\n\n        try {\n          additionalFields = JSON.parse(form.additional_fields ?? '{}');\n        } catch {\n          additionalFields = {};\n        }\n\n        for (const block of blocks) {\n          for (const field of block.fields) {\n            if ('optional' in (field as Record<string, unknown>)) {\n              if (!(field as Record<string, unknown>).optional) {\n                const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n\n                if (!has(additionalFields, path)) {\n                  if (field.type !== 'checkbox') {\n                    return 'additional-fields:v8n_invalid';\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        return true;\n      },\n    ];\n  }\n\n  /** A function that returns a URL of a payment method icon based on the given type. */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  /** Template render functions mapped to their name. */\n  templates: Templates = {};\n\n  private readonly __availablePaymentMethodsLoaderId = 'availablePaymentMethodsLoader';\n\n  private readonly __threeDSecureResponseGetValue = () => {\n    return this.form.config_3d_secure?.endsWith('require_valid_response') ? ['valid_only'] : [];\n  };\n\n  private readonly __threeDSecureResponseSetValue = (newValue: string[]) => {\n    const postfix = newValue.includes('valid_only') ? '_require_valid_response' : '';\n\n    const config = this.form.config_3d_secure;\n    const type = config?.startsWith('all_cards') ? 'all_cards' : 'maestro_only';\n\n    this.edit({\n      config_3d_secure: `${type}${postfix}` as Data['config_3d_secure'],\n    });\n  };\n\n  private readonly __threeDSecureResponseOptions = [\n    { value: 'valid_only', label: 'option_valid_only' },\n  ];\n\n  private readonly __threeDSecureToggleGetValue = () => {\n    const config = this.form.config_3d_secure;\n\n    if (config?.startsWith('all_cards')) return 'all_cards';\n    if (config?.startsWith('maestro_only')) return 'maestro_only';\n\n    return 'off';\n  };\n\n  private readonly __threeDSecureToggleSetValue = (\n    newValue: 'off' | 'all_cards' | 'maestro_only'\n  ) => {\n    let newFormValue = '';\n\n    if (newValue === 'all_cards' || newValue === 'maestro_only') {\n      if (this.form.config_3d_secure?.endsWith('require_valid_response')) {\n        newFormValue = `${newValue}_require_valid_response`;\n      } else {\n        newFormValue = newValue;\n      }\n    }\n\n    this.edit({ config_3d_secure: newFormValue as Data['config_3d_secure'] });\n  };\n\n  private readonly __threeDSecureToggleOptions = [\n    { value: 'off', label: 'option_off' },\n    { value: 'all_cards', label: 'option_all_cards' },\n    { value: 'maestro_only', label: 'option_maestro_only' },\n  ];\n\n  private __tab = 0;\n\n  renderBody(): TemplateResult {\n    return this.form.type\n      ? this.__renderPaymentMethodConfig(this.form.type)\n      : this.__renderPaymentMethodSelector();\n  }\n\n  private get __groupedAvailablePaymentMethods() {\n    return Object.entries(this.__availablePaymentMethods ?? {})\n      .sort((a, b) => a[0].localeCompare(b[0], 'en'))\n      .reduce((groups, [type, helper]) => {\n        const firstChar = type.charAt(0).toUpperCase();\n        const isSpecialCharacter = !/\\w/.test(firstChar);\n        const name = isSpecialCharacter ? '#' : firstChar;\n        const group = groups.find(group => group.name === name);\n\n        if (group) {\n          group.items.push({ type, helper });\n        } else {\n          groups.push({ name, items: [{ type, helper }] });\n        }\n\n        return groups;\n      }, [] as { name: string; items: PaymentMethod[] }[]);\n  }\n\n  private get __availablePaymentMethodsLoader() {\n    type Loader = NucleonElement<AvailablePaymentMethods>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__availablePaymentMethodsLoaderId}`);\n  }\n\n  private get __availablePaymentMethodsHref() {\n    try {\n      const presetIdRegex = /\\/payment_presets\\/(?<presetId>.+)\\//;\n      const pathname = new URL(this.href || this.parent).pathname;\n      const presetId = presetIdRegex.exec(pathname)!.groups!.presetId;\n      const url = new URL(\n        `/payment_presets/${presetId}/available_payment_methods`,\n        this.href || this.parent\n      );\n\n      return url.toString();\n    } catch {\n      // ignore\n    }\n  }\n\n  private get __availablePaymentMethods() {\n    return this.__availablePaymentMethodsLoader?.data?.values;\n  }\n\n  private get __liveBlocks() {\n    return this.form.helper?.additional_fields?.blocks.filter(block => block.is_live) ?? [];\n  }\n\n  private get __testBlocks() {\n    return this.form.helper?.additional_fields?.blocks.filter(block => !block.is_live) ?? [];\n  }\n\n  private __renderPaymentMethodSelector() {\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__availablePaymentMethodsHref)}\n        id=${this.__availablePaymentMethodsLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-i18n\n        class=\"block text-xxl font-medium border-b border-contrast-10 pb-m\"\n        infer=\"\"\n        key=\"select_method_title\"\n      >\n      </foxy-i18n>\n\n      <section data-testid=\"select-method-list\">\n        <div class=\"-my-s\">\n          ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {\n            return html`\n              <p class=\"w-m text-center font-medium text-tertiary py-s\">${name}</p>\n              <ul class=\"grid grid-cols-1\">\n                ${items.map(item => html`<li>${this.__renderPaymentMethodButton(item)}</li>`)}\n              </ul>\n            `;\n          })}\n        </div>\n      </section>\n    `;\n  }\n\n  private __renderPaymentMethodConfig(type: string) {\n    const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;\n\n    return html`\n      <figure data-testid=\"logo\" class=\"relative flex flex-col gap-m p-m items-center\">\n        <img\n          class=\"relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${this.getImageSrc?.(type) ?? defaultSrc}\n          alt=\"\"\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"relative min-w-0 font-medium text-xl text-center\">\n          ${this.form.helper?.name ?? this.form.type}&ZeroWidthSpace;\n        </figcaption>\n      </figure>\n\n      <div class=\"rounded border border-contrast-10\">\n        <vaadin-tabs\n          selected=${this.__tab}\n          theme=\"centered\"\n          @selected-changed=${(evt: CustomEvent) => {\n            const tabs = evt.currentTarget as TabsElement;\n            this.__tab = tabs.selected ?? 0;\n          }}\n        >\n          <vaadin-tab><foxy-i18n infer=\"\" key=\"tab_live\"></foxy-i18n></vaadin-tab>\n          <vaadin-tab><foxy-i18n infer=\"\" key=\"tab_test\"></foxy-i18n></vaadin-tab>\n        </vaadin-tabs>\n\n        <div class=\"overflow-hidden\" style=\"--lumo-border-radius: var(--lumo-border-radius-s)\">\n          <div\n            data-testid=\"tab-content\"\n            class=\"grid grid-cols-2 gap-m transition-transform transform duration-300\"\n            style=${classMap({\n              'width: calc(200% + var(--lumo-space-m));': true,\n              '--tw-translate-x: 0;': this.__tab === 0,\n              '--tw-translate-x: calc(-50% - (var(--lumo-space-m) / 2));': this.__tab !== 0,\n            })}\n          >\n            ${['live', 'test'].map((type, index) => {\n              const prefix = index === 0 ? '' : `${type}-`;\n              const blocks = index === 0 ? this.__liveBlocks : this.__testBlocks;\n\n              return html`\n                <div\n                  class=${classMap({\n                    'grid grid-cols-1 gap-m p-m transition-opacity duration-300': true,\n                    'opacity-100': this.__tab === index,\n                    'opacity-0': this.__tab !== index,\n                  })}\n                >\n                  ${this.form.helper?.id_description\n                    ? html`\n                        <foxy-internal-text-control\n                          placeholder=${this.t('default_additional_field_placeholder')}\n                          helper-text=\"\"\n                          label=${this.form.helper.id_description}\n                          infer=\"${prefix}account-id\"\n                        >\n                        </foxy-internal-text-control>\n                      `\n                    : ''}\n                  ${this.form.helper?.third_party_key_description\n                    ? html`\n                        <foxy-internal-text-control\n                          placeholder=${this.t('default_additional_field_placeholder')}\n                          helper-text=\"\"\n                          label=${this.form.helper.third_party_key_description}\n                          infer=\"${prefix}third-party-key\"\n                        >\n                        </foxy-internal-text-control>\n                      `\n                    : ''}\n                  ${this.form.helper?.key_description\n                    ? html`\n                        <foxy-internal-text-control\n                          placeholder=${this.t('default_additional_field_placeholder')}\n                          helper-text=\"\"\n                          label=${this.form.helper.key_description}\n                          infer=\"${prefix}account-key\"\n                        >\n                        </foxy-internal-text-control>\n                      `\n                    : ''}\n                  ${blocks.map(block => this.__renderBlock(block))}\n                </div>\n              `;\n            })}\n          </div>\n        </div>\n      </div>\n\n      <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n\n      ${this.form.helper?.supports_3d_secure\n        ? html`\n            <foxy-internal-radio-group-control\n              infer=\"three-d-secure-toggle\"\n              class=\"-mb-s\"\n              .getValue=${this.__threeDSecureToggleGetValue}\n              .setValue=${this.__threeDSecureToggleSetValue}\n              .options=${this.__threeDSecureToggleOptions}\n            >\n            </foxy-internal-radio-group-control>\n\n            ${this.form.config_3d_secure\n              ? html`\n                  <foxy-internal-checkbox-group-control\n                    infer=\"three-d-secure-response\"\n                    class=\"-mb-s\"\n                    .getValue=${this.__threeDSecureResponseGetValue}\n                    .setValue=${this.__threeDSecureResponseSetValue}\n                    .options=${this.__threeDSecureResponseOptions}\n                  >\n                  </foxy-internal-checkbox-group-control>\n                `\n              : ''}\n          `\n        : ''}\n      ${this.data?.type\n        ? ''\n        : html`\n            <vaadin-button\n              data-testid=\"select-another-button\"\n              theme=\"contrast\"\n              @click=${() => this.undo()}\n            >\n              <foxy-i18n infer=\"\" key=\"select_another_button_label\"></foxy-i18n>\n            </vaadin-button>\n          `}\n      ${super.renderBody()}\n    `;\n  }\n\n  private __renderPaymentMethodButton({ type, helper }: PaymentMethod) {\n    const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;\n\n    return html`\n      <button\n        class=${classMap({\n          'w-full block text-left p-s rounded -mx-s': true,\n          'transition-colors hover-bg-contrast-5': !helper.conflict,\n          'cursor-default': !!helper.conflict,\n        })}\n        ?disabled=${!!helper.conflict}\n        @click=${() => this.edit({ type, helper })}\n      >\n        <figure class=\"flex items-center gap-m h-m\">\n          <img\n            class=\"relative h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n            src=${this.getImageSrc?.(type) ?? defaultSrc}\n            alt=\"\"\n            @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n          />\n\n          <figcaption\n            class=${classMap({\n              'min-w-0 flex-1 truncate leading-s': true,\n              'text-tertiary': !!helper.conflict,\n            })}\n          >\n            <div class=\"font-medium\">${helper.name}&ZeroWidthSpace;</div>\n            ${helper.conflict\n              ? html`\n                  <foxy-i18n\n                    class=\"block text-tertiary text-xs\"\n                    infer=\"\"\n                    key=\"conflict_message\"\n                    .options=${helper.conflict}\n                  >\n                  </foxy-i18n>\n                `\n              : ''}\n          </figcaption>\n        </figure>\n      </button>\n    `;\n  }\n\n  private __renderBlock(block: Block) {\n    return html`${block.fields.map(field => {\n      const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n      const scope = ['additional-fields', ...path].join('-').replace(/_/g, '-');\n\n      const getValue = () => {\n        try {\n          const config = JSON.parse(this.form.additional_fields ?? '{}');\n          return get(config, path) ?? config.default_value;\n        } catch {\n          return field.default_value;\n        }\n      };\n\n      const setValue = (newValue: unknown) => {\n        try {\n          const config = JSON.parse(this.form.additional_fields ?? '{}');\n          this.edit({ additional_fields: JSON.stringify(set(config, path, newValue)) });\n        } catch {\n          return '';\n        }\n      };\n\n      type Option = { name: string; value: string };\n      const options = (field as { options?: Option[] }).options;\n\n      return html`\n        ${field.type === 'checkbox'\n          ? html`\n              <foxy-internal-checkbox-group-control\n                helper-text=${field.description ?? ''}\n                label=\"\"\n                class=\"-mb-s\"\n                infer=${scope}\n                .options=${[{ label: field.name, value: 'checked' }]}\n                .getValue=${() => (getValue() ? ['checked'] : [])}\n                .setValue=${(newValue: string[]) => {\n                  setValue(newValue.includes('checked'));\n                }}\n              >\n              </foxy-internal-checkbox-group-control>\n            `\n          : field.type === 'select'\n          ? html`\n              <foxy-internal-select-control\n                helper-text=${field.description ?? ''}\n                label=${field.name}\n                infer=${scope}\n                .options=${options!.map(({ name, value }) => ({ label: name, value }))}\n                .getValue=${getValue}\n                .setValue=${setValue}\n              >\n              </foxy-internal-select-control>\n            `\n          : html`\n              <foxy-internal-text-control\n                helper-text=${field.description ?? ''}\n                placeholder=${field.default_value || this.t('default_additional_field_placeholder')}\n                label=${field.name}\n                infer=${scope}\n                .getValue=${getValue}\n                .setValue=${setValue}\n              >\n              </foxy-internal-text-control>\n            `}\n      `;\n    })}`;\n  }\n}\n"]}
+{"version":3,"file":"PaymentsApiPaymentMethodForm.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,GAAG,MAAM,eAAe,CAAC;AAChC,OAAO,GAAG,MAAM,eAAe,CAAC;AAChC,OAAO,GAAG,MAAM,eAAe,CAAC;AAOhC,MAAM,EAAE,GAAG,kCAAkC,CAAC;AAC9C,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,OAAO,4BAA6B,SAAQ,IAAU;IAA5D;;QA+CE,sFAAsF;QACtF,gBAAW,GAAsC,IAAI,CAAC;QAEtD,sDAAsD;QACtD,cAAS,GAAc,EAAE,CAAC;QAET,sCAAiC,GAAG,+BAA+B,CAAC;QAEpE,mCAA8B,GAAG,GAAG,EAAE;;YACrD,OAAO,OAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,0CAAE,QAAQ,CAAC,wBAAwB,GAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9F,CAAC,CAAC;QAEe,mCAA8B,GAAG,CAAC,QAAkB,EAAE,EAAE;YACvE,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;YAEjF,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC;YAC1C,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,WAAW,GAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC;YAE5E,IAAI,CAAC,IAAI,CAAC;gBACR,gBAAgB,EAAE,GAAG,IAAI,GAAG,OAAO,EAA8B;aAClE,CAAC,CAAC;QACL,CAAC,CAAC;QAEe,kCAA6B,GAAG;YAC/C,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,mBAAmB,EAAE;SACpD,CAAC;QAEe,iCAA4B,GAAG,GAAG,EAAE;YACnD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC;YAE1C,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,WAAW;gBAAG,OAAO,WAAW,CAAC;YACxD,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,cAAc;gBAAG,OAAO,cAAc,CAAC;YAE9D,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QAEe,iCAA4B,GAAG,CAC9C,QAA8C,EAC9C,EAAE;;YACF,IAAI,YAAY,GAAG,EAAE,CAAC;YAEtB,IAAI,QAAQ,KAAK,WAAW,IAAI,QAAQ,KAAK,cAAc,EAAE;gBAC3D,UAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,0CAAE,QAAQ,CAAC,wBAAwB,GAAG;oBAClE,YAAY,GAAG,GAAG,QAAQ,yBAAyB,CAAC;iBACrD;qBAAM;oBACL,YAAY,GAAG,QAAQ,CAAC;iBACzB;aACF;YAED,IAAI,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,YAAwC,EAAE,CAAC,CAAC;QAC5E,CAAC,CAAC;QAEe,gCAA2B,GAAG;YAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE;YACrC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,kBAAkB,EAAE;YACjD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,qBAAqB,EAAE;SACxD,CAAC;QAEM,UAAK,GAAG,CAAC,CAAC;IAgWpB,CAAC;IAxcC,MAAM,KAAK,eAAe;QACxB,OAAO,goBAAgoB,CAAC;IAC1oB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YAC3B,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO;YACL,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,GAAG,IAAI,0BAA0B;YAC3E,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,mBAAmB;YAE3C,IAAI,CAAC,EAAE;;gBACL,MAAM,MAAM,qBAAG,IAAI,CAAC,MAAM,0CAAE,iBAAiB,0CAAE,MAAM,mCAAI,EAAE,CAAC;gBAC5D,IAAI,gBAAyC,CAAC;gBAE9C,IAAI;oBACF,gBAAgB,GAAG,IAAI,CAAC,KAAK,OAAC,IAAI,CAAC,iBAAiB,mCAAI,IAAI,CAAC,CAAC;iBAC/D;gBAAC,WAAM;oBACN,gBAAgB,GAAG,EAAE,CAAC;iBACvB;gBAED,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;oBAC1B,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;wBAChC,IAAI,UAAU,IAAK,KAAiC,EAAE;4BACpD,IAAI,CAAE,KAAiC,CAAC,QAAQ,EAAE;gCAChD,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE;oCACpC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;wCAC7B,OAAO,+BAA+B,CAAC;qCACxC;iCACF;6BACF;yBACF;qBACF;iBACF;gBAED,OAAO,IAAI,CAAC;YACd,CAAC;SACF,CAAC;IACJ,CAAC;IA8DD,UAAU;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI;YACnB,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YAClD,CAAC,CAAC,IAAI,CAAC,6BAA6B,EAAE,CAAC;IAC3C,CAAC;IAED,IAAY,gCAAgC;;QAC1C,OAAO,MAAM,CAAC,OAAO,OAAC,IAAI,CAAC,yBAAyB,mCAAI,EAAE,CAAC;aACxD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;aAC9C,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE;YACjC,IAAI,MAAM,CAAC,aAAa;gBAAE,OAAO,MAAM,CAAC;YAExC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;YAC/C,MAAM,kBAAkB,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACjD,MAAM,IAAI,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;YAClD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;YAExD,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;aACpC;iBAAM;gBACL,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;aAClD;YAED,OAAO,MAAM,CAAC;QAChB,CAAC,EAAE,EAAgD,CAAC,CAAC;IACzD,CAAC;IAED,IAAY,+BAA+B;QAEzC,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAS,IAAI,IAAI,CAAC,iCAAiC,EAAE,CAAC,CAAC;IAC7F,CAAC;IAED,IAAY,6BAA6B;QACvC,IAAI;YACF,MAAM,aAAa,GAAG,sCAAsC,CAAC;YAC7D,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC;YAC5D,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAE,CAAC,MAAO,CAAC,QAAQ,CAAC;YAChE,MAAM,GAAG,GAAG,IAAI,GAAG,CACjB,oBAAoB,QAAQ,4BAA4B,EACxD,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CACzB,CAAC;YAEF,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;SACvB;QAAC,WAAM;YACN,SAAS;SACV;IACH,CAAC;IAED,IAAY,yBAAyB;;QACnC,mBAAO,IAAI,CAAC,+BAA+B,0CAAE,IAAI,0CAAE,MAAM,CAAC;IAC5D,CAAC;IAED,IAAY,YAAY;;QACtB,yBAAO,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAE,iBAAiB,0CAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,oCAAK,EAAE,CAAC;IAC1F,CAAC;IAED,IAAY,YAAY;;QACtB,yBAAO,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAE,iBAAiB,0CAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,oCAAK,EAAE,CAAC;IAC3F,CAAC;IAEO,6BAA6B;QACnC,OAAO,IAAI,CAAA;;;;gBAIC,4BAA4B,CAAC,eAAe;;;;;;;;;;UAUlD,IAAI,CAAC,gCAAgC,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;YAC9D,OAAO,IAAI,CAAA;wDACmC,IAAI;;gBAE5C,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,OAAO,CAAC;;WAEhF,CAAC;QACJ,CAAC,CAAC;;;;;;eAMK,SAAS,CAAC,IAAI,CAAC,6BAA6B,CAAC;aAC/C,IAAI,CAAC,iCAAiC;kBACjC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGvC,CAAC;IACJ,CAAC;IAEO,2BAA2B,CAAC,IAAY;;QAC9C,MAAM,UAAU,GAAG,4BAA4B,CAAC,eAAe,CAAC;QAEhE,OAAO,IAAI,CAAA;;;;gBAIC,YAAA,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,oCAAK,UAAU;;mBAEnC,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;;iBAI5E,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAE,IAAI,mCAAI,IAAI,CAAC,IAAI,CAAC,IAAI;YAC7C,OAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EACf,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA;;;;;2BAKS,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;;;eAI7B;;;;;;qBAMM,IAAI,CAAC,KAAK;;8BAED,CAAC,GAAgB,EAAE,EAAE;;YACvC,MAAM,IAAI,GAAG,GAAG,CAAC,aAA4B,CAAC;YAC9C,IAAI,CAAC,KAAK,SAAG,IAAI,CAAC,QAAQ,mCAAI,CAAC,CAAC;QAClC,CAAC;;;;;;;;;;oBAUS,QAAQ,CAAC;YACf,0CAA0C,EAAE,IAAI;YAChD,sBAAsB,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC;YACxC,2DAA2D,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC;SAC9E,CAAC;;cAEA,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YACrC,MAAM,MAAM,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC;YAC7C,MAAM,MAAM,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;YAEnE,OAAO,IAAI,CAAA;;0BAEC,QAAQ,CAAC;gBACf,4DAA4D,EAAE,IAAI;gBAClE,aAAa,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK;gBACnC,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK;aAClC,CAAC;;oBAEA,OAAA,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAE,cAAc,EAChC,CAAC,CAAC,IAAI,CAAA;;wCAEc,IAAI,CAAC,CAAC,CAAC,sCAAsC,CAAC;;kCAEpD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc;mCAC9B,MAAM;;;uBAGlB;gBACH,CAAC,CAAC,EAAE;oBACJ,OAAA,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAE,2BAA2B,EAC7C,CAAC,CAAC,IAAI,CAAA;;wCAEc,IAAI,CAAC,CAAC,CAAC,sCAAsC,CAAC;;kCAEpD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,2BAA2B;mCAC3C,MAAM;;;uBAGlB;gBACH,CAAC,CAAC,EAAE;oBACJ,OAAA,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAE,eAAe,EACjC,CAAC,CAAC,IAAI,CAAA;;wCAEc,IAAI,CAAC,CAAC,CAAC,sCAAsC,CAAC;;kCAEpD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe;mCAC/B,MAAM;;;uBAGlB;gBACH,CAAC,CAAC,EAAE;oBACJ,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;;eAEnD,CAAC;QACJ,CAAC,CAAC;;;;;;;QAON,OAAA,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAE,kBAAkB,EACpC,CAAC,CAAC,IAAI,CAAA;;;;0BAIY,IAAI,CAAC,4BAA4B;0BACjC,IAAI,CAAC,4BAA4B;yBAClC,IAAI,CAAC,2BAA2B;;;;cAI3C,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAC1B,CAAC,CAAC,IAAI,CAAA;;;;gCAIY,IAAI,CAAC,8BAA8B;gCACnC,IAAI,CAAC,8BAA8B;+BACpC,IAAI,CAAC,6BAA6B;;;iBAGhD;YACH,CAAC,CAAC,EAAE;WACP;YACH,CAAC,CAAC,EAAE;QACJ,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;IAEO,2BAA2B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAiB;;QACjE,MAAM,UAAU,GAAG,4BAA4B,CAAC,eAAe,CAAC;QAChE,MAAM,GAAG,eAAG,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,oCAAK,UAAU,CAAC;QACnD,MAAM,OAAO,GAAG,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC;QAE3F,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,2EAA2E,EAAE,IAAI;YACjF,uDAAuD,EAAE,IAAI;YAC7D,wCAAwC,EAAE,CAAC,MAAM,CAAC,QAAQ;YAC1D,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ;SACpC,CAAC;oBACU,CAAC,CAAC,MAAM,CAAC,QAAQ;gBACrB,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;iBACjE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;;;gBAKlC,GAAG;;oBAEC,CAAC,CAAC,MAAM,CAAC,QAAQ;mBAClB,OAAO;;;;;oBAKN,QAAQ,CAAC;YACf,0EAA0E,EAAE,IAAI;YAChF,kBAAkB,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ;SACtC,CAAC;kBACI,GAAG;;qBAEA,OAAO;;;;oBAIR,QAAQ,CAAC;YACf,mCAAmC,EAAE,IAAI;YACzC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ;SACnC,CAAC;;uCAEyB,MAAM,CAAC,IAAI;kCAChB,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,KAAK,IAAI;;;;KAI7E,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,OAAO,IAAI,CAAA,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;;YACrC,MAAM,KAAK,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;YAE3E,MAAM,QAAQ,GAAG,GAAG,EAAE;;gBACpB,IAAI;oBACF,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,OAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,mCAAI,IAAI,CAAC,CAAC;oBAC/D,aAAO,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAI,MAAM,CAAC,aAAa,CAAC;iBACtD;gBAAC,WAAM;oBACN,OAAO,KAAK,CAAC,aAAa,CAAC;iBAC5B;YACH,CAAC,CAAC;YAEF,MAAM,QAAQ,GAAG,CAAC,QAAiB,EAAE,EAAE;;gBACrC,IAAI;oBACF,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,OAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,mCAAI,IAAI,CAAC,CAAC;oBAC/D,IAAI,CAAC,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;iBACnF;gBAAC,WAAM;oBACN,OAAO,EAAE,CAAC;iBACX;YACH,CAAC,CAAC;YAGF,MAAM,OAAO,GAAI,KAAgC,CAAC,OAAO,CAAC;YAE1D,OAAO,IAAI,CAAA;UACP,KAAK,CAAC,IAAI,KAAK,UAAU;gBACzB,CAAC,CAAC,IAAI,CAAA;;8BAEc,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE;;;wBAG7B,KAAK;2BACF,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;4BACxC,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;4BACrC,CAAC,QAAkB,EAAE,EAAE;oBACjC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;gBACzC,CAAC;;;aAGJ;gBACH,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ;oBACzB,CAAC,CAAC,IAAI,CAAA;;8BAEc,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE;wBAC7B,KAAK,CAAC,IAAI;wBACV,KAAK;2BACF,OAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;4BAC1D,QAAQ;4BACR,QAAQ;;;aAGvB;oBACH,CAAC,CAAC,IAAI,CAAA;;8BAEc,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE;8BACvB,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,sCAAsC,CAAC;wBAC3E,KAAK,CAAC,IAAI;wBACV,KAAK;4BACD,QAAQ;4BACR,QAAQ;;;aAGvB;OACN,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IACP,CAAC;CACF","sourcesContent":["import type { AvailablePaymentMethods } from '../PaymentsApi/api/types';\nimport type { Templates, Block, Data } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { TabsElement } from '@vaadin/vaadin-tabs';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nimport has from 'lodash-es/has';\nimport get from 'lodash-es/get';\nimport set from 'lodash-es/set';\n\ntype PaymentMethod = {\n  helper: AvailablePaymentMethods['values'][string];\n  type: string;\n};\n\nconst NS = 'payments-api-payment-method-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for the `fx:payment_method` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @slot description:before\n * @slot description:after\n *\n * @slot account-id:before\n * @slot account-id:after\n *\n * @slot account-key:before\n * @slot account-key:after\n *\n * @slot third-party-key:before\n * @slot third-party-key:after\n *\n * @slot test-account-id:before\n * @slot test-account-id:after\n *\n * @slot test-account-key:before\n * @slot test-account-key:after\n *\n * @slot test-third-party-key:before\n * @slot test-third-party-key:after\n *\n * @slot additional-fields-[field-name-in-kebab-case]:before\n * @slot additional-fields-[field-name-in-kebab-case]:after\n *\n * @slot three-d-secure-toggle:before\n * @slot three-d-secure-toggle:after\n *\n * @slot three-d-secure-response:before\n * @slot three-d-secure-response:after\n *\n * @slot timestamps:before\n * @slot timestamps:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-payments-api-payment-method-form\n * @since 1.21.0\n */\nexport class PaymentsApiPaymentMethodForm extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='m29.3 14 14-14H32.1l-14 14h11.2Zm2.7 9.9 12-12V.7L30.62 14.1A2 2 0 0 1 32 16v7.9ZM13.31 44h11.18L44 24.5V13.3l-12 12V28a2 2 0 0 1-2 2h-2.69l-14 14Zm-1.41 0H.7l14-14h11.2l-14 14Zm14 0h11.2l6.9-6.9V25.9L25.9 44Zm12.6 0H44v-5.5L38.5 44Z'/%3E%3Cpath fill='%23fff' d='M30 28H14v-6h16v6Zm0-10v-2H14v2h16ZM0 43.3l13.4-13.4A2 2 0 0 1 12 28v-7.9L0 32.12V43.3Z'/%3E%3Cpath fill='%23fff' d='M16.7 14H14c-1.11 0-1.99.89-1.99 2v2.7L0 30.7V19.52L19.52 0H30.7l-14 14Zm1.4-14H6.92L0 6.92V18.1L18.1 0ZM5.5 0H0v5.5L5.5 0Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __tab: { attribute: false },\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ description: v }) => !v || v.length <= 100 || 'description:v8n_too_long',\n      ({ type: v }) => !!v || 'type:v8n_required',\n\n      form => {\n        const blocks = form.helper?.additional_fields?.blocks ?? [];\n        let additionalFields: Record<string, unknown>;\n\n        try {\n          additionalFields = JSON.parse(form.additional_fields ?? '{}');\n        } catch {\n          additionalFields = {};\n        }\n\n        for (const block of blocks) {\n          for (const field of block.fields) {\n            if ('optional' in (field as Record<string, unknown>)) {\n              if (!(field as Record<string, unknown>).optional) {\n                if (!has(additionalFields, field.id)) {\n                  if (field.type !== 'checkbox') {\n                    return 'additional-fields:v8n_invalid';\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        return true;\n      },\n    ];\n  }\n\n  /** A function that returns a URL of a payment method icon based on the given type. */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  /** Template render functions mapped to their name. */\n  templates: Templates = {};\n\n  private readonly __availablePaymentMethodsLoaderId = 'availablePaymentMethodsLoader';\n\n  private readonly __threeDSecureResponseGetValue = () => {\n    return this.form.config_3d_secure?.endsWith('require_valid_response') ? ['valid_only'] : [];\n  };\n\n  private readonly __threeDSecureResponseSetValue = (newValue: string[]) => {\n    const postfix = newValue.includes('valid_only') ? '_require_valid_response' : '';\n\n    const config = this.form.config_3d_secure;\n    const type = config?.startsWith('all_cards') ? 'all_cards' : 'maestro_only';\n\n    this.edit({\n      config_3d_secure: `${type}${postfix}` as Data['config_3d_secure'],\n    });\n  };\n\n  private readonly __threeDSecureResponseOptions = [\n    { value: 'valid_only', label: 'option_valid_only' },\n  ];\n\n  private readonly __threeDSecureToggleGetValue = () => {\n    const config = this.form.config_3d_secure;\n\n    if (config?.startsWith('all_cards')) return 'all_cards';\n    if (config?.startsWith('maestro_only')) return 'maestro_only';\n\n    return 'off';\n  };\n\n  private readonly __threeDSecureToggleSetValue = (\n    newValue: 'off' | 'all_cards' | 'maestro_only'\n  ) => {\n    let newFormValue = '';\n\n    if (newValue === 'all_cards' || newValue === 'maestro_only') {\n      if (this.form.config_3d_secure?.endsWith('require_valid_response')) {\n        newFormValue = `${newValue}_require_valid_response`;\n      } else {\n        newFormValue = newValue;\n      }\n    }\n\n    this.edit({ config_3d_secure: newFormValue as Data['config_3d_secure'] });\n  };\n\n  private readonly __threeDSecureToggleOptions = [\n    { value: 'off', label: 'option_off' },\n    { value: 'all_cards', label: 'option_all_cards' },\n    { value: 'maestro_only', label: 'option_maestro_only' },\n  ];\n\n  private __tab = 0;\n\n  renderBody(): TemplateResult {\n    return this.form.type\n      ? this.__renderPaymentMethodConfig(this.form.type)\n      : this.__renderPaymentMethodSelector();\n  }\n\n  private get __groupedAvailablePaymentMethods() {\n    return Object.entries(this.__availablePaymentMethods ?? {})\n      .sort((a, b) => a[0].localeCompare(b[0], 'en'))\n      .reduce((groups, [type, helper]) => {\n        if (helper.is_deprecated) return groups;\n\n        const firstChar = type.charAt(0).toUpperCase();\n        const isSpecialCharacter = !/\\w/.test(firstChar);\n        const name = isSpecialCharacter ? '#' : firstChar;\n        const group = groups.find(group => group.name === name);\n\n        if (group) {\n          group.items.push({ type, helper });\n        } else {\n          groups.push({ name, items: [{ type, helper }] });\n        }\n\n        return groups;\n      }, [] as { name: string; items: PaymentMethod[] }[]);\n  }\n\n  private get __availablePaymentMethodsLoader() {\n    type Loader = NucleonElement<AvailablePaymentMethods>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__availablePaymentMethodsLoaderId}`);\n  }\n\n  private get __availablePaymentMethodsHref() {\n    try {\n      const presetIdRegex = /\\/payment_presets\\/(?<presetId>.+)\\//;\n      const pathname = new URL(this.href || this.parent).pathname;\n      const presetId = presetIdRegex.exec(pathname)!.groups!.presetId;\n      const url = new URL(\n        `/payment_presets/${presetId}/available_payment_methods`,\n        this.href || this.parent\n      );\n\n      return url.toString();\n    } catch {\n      // ignore\n    }\n  }\n\n  private get __availablePaymentMethods() {\n    return this.__availablePaymentMethodsLoader?.data?.values;\n  }\n\n  private get __liveBlocks() {\n    return this.form.helper?.additional_fields?.blocks.filter(block => block.is_live) ?? [];\n  }\n\n  private get __testBlocks() {\n    return this.form.helper?.additional_fields?.blocks.filter(block => !block.is_live) ?? [];\n  }\n\n  private __renderPaymentMethodSelector() {\n    return html`\n      <figure data-testid=\"logo\" class=\"relative flex flex-col gap-m p-m items-center\">\n        <img\n          class=\"relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${PaymentsApiPaymentMethodForm.defaultImageSrc}\n          alt=\"\"\n        />\n\n        <figcaption class=\"relative min-w-0 font-medium text-xl text-center\">\n          <foxy-i18n infer=\"\" key=\"select_method_title\"></foxy-i18n>\n        </figcaption>\n      </figure>\n\n      <section data-testid=\"select-method-list\" class=\"-mt-m\">\n        ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {\n          return html`\n            <p class=\"font-medium text-tertiary py-m\">${name}</p>\n            <ul class=\"grid grid-cols-2 gap-m\">\n              ${items.map(item => html`<li>${this.__renderPaymentMethodButton(item)}</li>`)}\n            </ul>\n          `;\n        })}\n      </section>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__availablePaymentMethodsHref)}\n        id=${this.__availablePaymentMethodsLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  private __renderPaymentMethodConfig(type: string) {\n    const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;\n\n    return html`\n      <figure data-testid=\"logo\" class=\"relative flex flex-col gap-m p-m items-center\">\n        <img\n          class=\"relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${this.getImageSrc?.(type) ?? defaultSrc}\n          alt=\"\"\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"relative min-w-0 font-medium text-xl text-center\">\n          <div>${this.form.helper?.name ?? this.form.type}&ZeroWidthSpace;</div>\n          ${this.data?.type\n            ? ''\n            : html`\n                <vaadin-button\n                  data-testid=\"select-another-button\"\n                  theme=\"tertiary-inline\"\n                  class=\"text-m\"\n                  @click=${() => this.undo()}\n                >\n                  <foxy-i18n infer=\"\" key=\"select_another_button_label\"></foxy-i18n>\n                </vaadin-button>\n              `}\n        </figcaption>\n      </figure>\n\n      <div class=\"rounded border border-contrast-10\">\n        <vaadin-tabs\n          selected=${this.__tab}\n          theme=\"centered\"\n          @selected-changed=${(evt: CustomEvent) => {\n            const tabs = evt.currentTarget as TabsElement;\n            this.__tab = tabs.selected ?? 0;\n          }}\n        >\n          <vaadin-tab><foxy-i18n infer=\"\" key=\"tab_live\"></foxy-i18n></vaadin-tab>\n          <vaadin-tab><foxy-i18n infer=\"\" key=\"tab_test\"></foxy-i18n></vaadin-tab>\n        </vaadin-tabs>\n\n        <div class=\"overflow-hidden\" style=\"--lumo-border-radius: var(--lumo-border-radius-s)\">\n          <div\n            data-testid=\"tab-content\"\n            class=\"grid grid-cols-2 gap-m transition-transform transform duration-300\"\n            style=${classMap({\n              'width: calc(200% + var(--lumo-space-m));': true,\n              '--tw-translate-x: 0;': this.__tab === 0,\n              '--tw-translate-x: calc(-50% - (var(--lumo-space-m) / 2));': this.__tab !== 0,\n            })}\n          >\n            ${['live', 'test'].map((type, index) => {\n              const prefix = index === 0 ? '' : `${type}-`;\n              const blocks = index === 0 ? this.__liveBlocks : this.__testBlocks;\n\n              return html`\n                <div\n                  class=${classMap({\n                    'grid grid-cols-1 gap-m p-m transition-opacity duration-300': true,\n                    'opacity-100': this.__tab === index,\n                    'opacity-0': this.__tab !== index,\n                  })}\n                >\n                  ${this.form.helper?.id_description\n                    ? html`\n                        <foxy-internal-text-control\n                          placeholder=${this.t('default_additional_field_placeholder')}\n                          helper-text=\"\"\n                          label=${this.form.helper.id_description}\n                          infer=\"${prefix}account-id\"\n                        >\n                        </foxy-internal-text-control>\n                      `\n                    : ''}\n                  ${this.form.helper?.third_party_key_description\n                    ? html`\n                        <foxy-internal-text-control\n                          placeholder=${this.t('default_additional_field_placeholder')}\n                          helper-text=\"\"\n                          label=${this.form.helper.third_party_key_description}\n                          infer=\"${prefix}third-party-key\"\n                        >\n                        </foxy-internal-text-control>\n                      `\n                    : ''}\n                  ${this.form.helper?.key_description\n                    ? html`\n                        <foxy-internal-text-control\n                          placeholder=${this.t('default_additional_field_placeholder')}\n                          helper-text=\"\"\n                          label=${this.form.helper.key_description}\n                          infer=\"${prefix}account-key\"\n                        >\n                        </foxy-internal-text-control>\n                      `\n                    : ''}\n                  ${blocks.map(block => this.__renderBlock(block))}\n                </div>\n              `;\n            })}\n          </div>\n        </div>\n      </div>\n\n      <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n\n      ${this.form.helper?.supports_3d_secure\n        ? html`\n            <foxy-internal-radio-group-control\n              infer=\"three-d-secure-toggle\"\n              class=\"-mb-s\"\n              .getValue=${this.__threeDSecureToggleGetValue}\n              .setValue=${this.__threeDSecureToggleSetValue}\n              .options=${this.__threeDSecureToggleOptions}\n            >\n            </foxy-internal-radio-group-control>\n\n            ${this.form.config_3d_secure\n              ? html`\n                  <foxy-internal-checkbox-group-control\n                    infer=\"three-d-secure-response\"\n                    class=\"-mb-s\"\n                    .getValue=${this.__threeDSecureResponseGetValue}\n                    .setValue=${this.__threeDSecureResponseSetValue}\n                    .options=${this.__threeDSecureResponseOptions}\n                  >\n                  </foxy-internal-checkbox-group-control>\n                `\n              : ''}\n          `\n        : ''}\n      ${super.renderBody()}\n    `;\n  }\n\n  private __renderPaymentMethodButton({ type, helper }: PaymentMethod) {\n    const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;\n    const src = this.getImageSrc?.(type) ?? defaultSrc;\n    const onError = (evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc);\n\n    return html`\n      <button\n        class=${classMap({\n          'relative w-full block text-left p-s rounded bg-contrast-5 overflow-hidden': true,\n          'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n          'transition-colors hover-bg-contrast-10': !helper.conflict,\n          'cursor-default': !!helper.conflict,\n        })}\n        ?disabled=${!!helper.conflict}\n        title=${helper.conflict ? this.t('conflict_message', helper.conflict) : ''}\n        @click=${() => this.edit({ type, helper })}\n      >\n        <img\n          class=\"absolute top-0 left-0 w-1-2 h-full object-cover bg-center filter saturate-200 blur-3xl\"\n          style=\"transform: translate3d(0, 0, 0)\"\n          src=${src}\n          alt=\"\"\n          ?hidden=${!!helper.conflict}\n          @error=${onError}\n        />\n\n        <figure class=\"relative flex flex-col gap-m\">\n          <img\n            class=${classMap({\n              'h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs': true,\n              'filter grayscale': !!helper.conflict,\n            })}\n            src=${src}\n            alt=\"\"\n            @error=${onError}\n          />\n\n          <figcaption\n            class=${classMap({\n              'min-w-0 flex-1 truncate leading-s': true,\n              'text-disabled': !!helper.conflict,\n            })}\n          >\n            <div class=\"font-medium\">${helper.name}&ZeroWidthSpace;</div>\n            <div class=\"text-xs ${helper.conflict ? '' : 'text-secondary'}\">${type}</div>\n          </figcaption>\n        </figure>\n      </button>\n    `;\n  }\n\n  private __renderBlock(block: Block) {\n    return html`${block.fields.map(field => {\n      const scope = ['additional-fields', field.id].join('-').replace(/_/g, '-');\n\n      const getValue = () => {\n        try {\n          const config = JSON.parse(this.form.additional_fields ?? '{}');\n          return get(config, field.id) ?? config.default_value;\n        } catch {\n          return field.default_value;\n        }\n      };\n\n      const setValue = (newValue: unknown) => {\n        try {\n          const config = JSON.parse(this.form.additional_fields ?? '{}');\n          this.edit({ additional_fields: JSON.stringify(set(config, field.id, newValue)) });\n        } catch {\n          return '';\n        }\n      };\n\n      type Option = { name: string; value: string };\n      const options = (field as { options?: Option[] }).options;\n\n      return html`\n        ${field.type === 'checkbox'\n          ? html`\n              <foxy-internal-checkbox-group-control\n                helper-text=${field.description ?? ''}\n                label=\"\"\n                class=\"-mb-s\"\n                infer=${scope}\n                .options=${[{ label: field.name, value: 'checked' }]}\n                .getValue=${() => (getValue() ? ['checked'] : [])}\n                .setValue=${(newValue: string[]) => {\n                  setValue(newValue.includes('checked'));\n                }}\n              >\n              </foxy-internal-checkbox-group-control>\n            `\n          : field.type === 'select'\n          ? html`\n              <foxy-internal-select-control\n                helper-text=${field.description ?? ''}\n                label=${field.name}\n                infer=${scope}\n                .options=${options!.map(({ name, value }) => ({ label: name, value }))}\n                .getValue=${getValue}\n                .setValue=${setValue}\n              >\n              </foxy-internal-select-control>\n            `\n          : html`\n              <foxy-internal-text-control\n                helper-text=${field.description ?? ''}\n                placeholder=${field.default_value || this.t('default_additional_field_placeholder')}\n                label=${field.name}\n                infer=${scope}\n                .getValue=${getValue}\n                .setValue=${setValue}\n              >\n              </foxy-internal-text-control>\n            `}\n      `;\n    })}`;\n  }\n}\n"]}

package/dist/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.js

@@ -102,6 +102,7 @@ export class PaymentsApiPaymentPresetForm extends Base {
               infer="payment-methods"
               first=${this.data._links['fx:payment_methods'].href}
               limit="5"
+              alert
               .item=${(ctx) => html `
                 <foxy-payments-api-payment-method-card
                   parent=${ctx.parent}