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

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

@@ -1,14 +1,112 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
 import has from 'lodash-es/has';
 import get from 'lodash-es/get';
 import set from 'lodash-es/set';
-export class PaymentsApiPaymentMethodForm extends TranslatableMixin(InternalForm, 'payments-api-payment-method-form') {
+const NS = 'payments-api-payment-method-form';
+const Base = TranslatableMixin(InternalForm, NS);
+/**
+ * Form element for the `fx:payment_method` resource of Payments API.
+ *
+ * _Payments API is a client-side virtual API layer built on top of hAPI
+ * in an attempt to streamline access to stores' payment method settings
+ * that is currently a bit quirky due to the legacy functionality. To use
+ * this element with hAPI, wrap it into a foxy-payments-api node._
+ *
+ * @slot description:before
+ * @slot description:after
+ *
+ * @slot account-id:before
+ * @slot account-id:after
+ *
+ * @slot account-key:before
+ * @slot account-key:after
+ *
+ * @slot third-party-key:before
+ * @slot third-party-key:after
+ *
+ * @slot test-account-id:before
+ * @slot test-account-id:after
+ *
+ * @slot test-account-key:before
+ * @slot test-account-key:after
+ *
+ * @slot test-third-party-key:before
+ * @slot test-third-party-key:after
+ *
+ * @slot additional-fields-[field-name-in-kebab-case]:before
+ * @slot additional-fields-[field-name-in-kebab-case]:after
+ *
+ * @slot three-d-secure-toggle:before
+ * @slot three-d-secure-toggle:after
+ *
+ * @slot three-d-secure-response:before
+ * @slot three-d-secure-response:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-payments-api-payment-method-form
+ * @since 1.21.0
+ */
+export class PaymentsApiPaymentMethodForm extends Base {
     constructor() {
         super(...arguments);
+        /** A function that returns a URL of a payment method icon based on the given type. */
         this.getImageSrc = null;
+        /** Template render functions mapped to their name. */
+        this.templates = {};
+        this.__availablePaymentMethodsLoaderId = 'availablePaymentMethodsLoader';
+        this.__threeDSecureResponseGetValue = () => {
+            var _a;
+            return ((_a = this.form.config_3d_secure) === null || _a === void 0 ? void 0 : _a.endsWith('require_valid_response')) ? ['valid_only'] : [];
+        };
+        this.__threeDSecureResponseSetValue = (newValue) => {
+            const postfix = newValue.includes('valid_only') ? '_require_valid_response' : '';
+            const config = this.form.config_3d_secure;
+            const type = (config === null || config === void 0 ? void 0 : config.startsWith('all_cards')) ? 'all_cards' : 'maestro_only';
+            this.edit({
+                config_3d_secure: `${type}${postfix}`,
+            });
+        };
+        this.__threeDSecureResponseOptions = [
+            { value: 'valid_only', label: 'option_valid_only' },
+        ];
+        this.__threeDSecureToggleGetValue = () => {
+            const config = this.form.config_3d_secure;
+            if (config === null || config === void 0 ? void 0 : config.startsWith('all_cards'))
+                return 'all_cards';
+            if (config === null || config === void 0 ? void 0 : config.startsWith('maestro_only'))
+                return 'maestro_only';
+            return 'off';
+        };
+        this.__threeDSecureToggleSetValue = (newValue) => {
+            var _a;
+            let newFormValue = '';
+            if (newValue === 'all_cards' || newValue === 'maestro_only') {
+                if ((_a = this.form.config_3d_secure) === null || _a === void 0 ? void 0 : _a.endsWith('require_valid_response')) {
+                    newFormValue = `${newValue}_require_valid_response`;
+                }
+                else {
+                    newFormValue = newValue;
+                }
+            }
+            this.edit({ config_3d_secure: newFormValue });
+        };
+        this.__threeDSecureToggleOptions = [
+            { value: 'off', label: 'option_off' },
+            { value: 'all_cards', label: 'option_all_cards' },
+            { value: 'maestro_only', label: 'option_maestro_only' },
+        ];
         this.__tab = 0;
     }
     static get defaultImageSrc() {
@@ -54,24 +152,14 @@ export class PaymentsApiPaymentMethodForm extends TranslatableMixin(InternalForm
         ];
     }
     renderBody() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        let availablePaymentMethodsUrl;
-        try {
-            const presetIdRegex = /\/payment_presets\/(?<presetId>.+)\//;
-            const presetId = presetIdRegex.exec(new URL(this.href || this.parent).pathname).groups
-                .presetId;
-            const url = new URL(`/payment_presets/${presetId}/available_payment_methods`, this.href || this.parent);
-            availablePaymentMethodsUrl = url.toString();
-        }
-        catch (_q) {
-            availablePaymentMethodsUrl = '';
-        }
-        const availablePaymentMethods = (_a = this.renderRoot.querySelector('#available-payment-methods')) === null || _a === void 0 ? void 0 : _a.data;
-        const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;
-        const groupedPaymentMethods = Object.entries((_b = availablePaymentMethods === null || availablePaymentMethods === void 0 ? void 0 : availablePaymentMethods.values) !== null && _b !== void 0 ? _b : {})
-            .sort((a, b) => {
-            return a[0].localeCompare(b[0], 'en');
-        })
+        return this.form.type
+            ? this.__renderPaymentMethodConfig(this.form.type)
+            : this.__renderPaymentMethodSelector();
+    }
+    get __groupedAvailablePaymentMethods() {
+        var _a;
+        return Object.entries((_a = this.__availablePaymentMethods) !== null && _a !== void 0 ? _a : {})
+            .sort((a, b) => a[0].localeCompare(b[0], 'en'))
             .reduce((groups, [type, helper]) => {
             const firstChar = type.charAt(0).toUpperCase();
             const isSpecialCharacter = !/\w/.test(firstChar);
@@ -85,276 +173,239 @@ export class PaymentsApiPaymentMethodForm extends TranslatableMixin(InternalForm
             }
             return groups;
         }, []);
+    }
+    get __availablePaymentMethodsLoader() {
+        return this.renderRoot.querySelector(`#${this.__availablePaymentMethodsLoaderId}`);
+    }
+    get __availablePaymentMethodsHref() {
+        try {
+            const presetIdRegex = /\/payment_presets\/(?<presetId>.+)\//;
+            const pathname = new URL(this.href || this.parent).pathname;
+            const presetId = presetIdRegex.exec(pathname).groups.presetId;
+            const url = new URL(`/payment_presets/${presetId}/available_payment_methods`, this.href || this.parent);
+            return url.toString();
+        }
+        catch (_a) {
+            // ignore
+        }
+    }
+    get __availablePaymentMethods() {
+        var _a, _b;
+        return (_b = (_a = this.__availablePaymentMethodsLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.values;
+    }
+    get __liveBlocks() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.form.helper) === null || _a === void 0 ? void 0 : _a.additional_fields) === null || _b === void 0 ? void 0 : _b.blocks.filter(block => block.is_live)) !== null && _c !== void 0 ? _c : [];
+    }
+    get __testBlocks() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.form.helper) === null || _a === void 0 ? void 0 : _a.additional_fields) === null || _b === void 0 ? void 0 : _b.blocks.filter(block => !block.is_live)) !== null && _c !== void 0 ? _c : [];
+    }
+    __renderPaymentMethodSelector() {
         return html `
       <foxy-nucleon
         class="hidden"
-        href=${availablePaymentMethodsUrl}
-        id="available-payment-methods"
+        infer=""
+        href=${ifDefined(this.__availablePaymentMethodsHref)}
+        id=${this.__availablePaymentMethodsLoaderId}
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
 
-      ${this.form.type
-            ? html `
-            <figure 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=${(_d = (_c = this.getImageSrc) === null || _c === void 0 ? void 0 : _c.call(this, this.form.type)) !== null && _d !== void 0 ? _d : defaultSrc}
-                alt=""
-                @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
-              />
+      <foxy-i18n
+        class="block text-xxl font-bold border-b border-contrast-10 pb-m"
+        infer=""
+        key="select_method_title"
+      >
+      </foxy-i18n>
 
-              <figcaption class="relative min-w-0 font-bold text-xl text-center">
-                ${(_f = (_e = this.form.helper) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : this.form.type}&ZeroWidthSpace;
-              </figcaption>
-            </figure>
+      <section data-testid="select-method-list">
+        <div class="-my-s">
+          ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {
+            return html `
+              <p class="w-m text-center font-semibold 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) {
+        var _a, _b, _c, _d, _e, _f;
+        const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;
+        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=${(_b = (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, type)) !== null && _b !== void 0 ? _b : defaultSrc}
+          alt=""
+          @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
+        />
 
-            <div class="rounded-t-l rounded-b-l border border-contrast-10">
-              <vaadin-tabs
-                selected=${this.__tab}
-                theme="centered"
-                @selected-changed=${(evt) => {
-                var _a;
-                const tabs = evt.currentTarget;
-                this.__tab = (_a = tabs.selected) !== null && _a !== void 0 ? _a : 0;
-            }}
-              >
-                <vaadin-tab><foxy-i18n infer="" key="tab_live"></foxy-i18n></vaadin-tab>
-                <vaadin-tab><foxy-i18n infer="" key="tab_test"></foxy-i18n></vaadin-tab>
-              </vaadin-tabs>
+        <figcaption class="relative min-w-0 font-bold 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;
+        </figcaption>
+      </figure>
 
-              <div class="overflow-hidden">
+      <div class="rounded border border-contrast-10">
+        <vaadin-tabs
+          selected=${this.__tab}
+          theme="centered"
+          @selected-changed=${(evt) => {
+            var _a;
+            const tabs = evt.currentTarget;
+            this.__tab = (_a = tabs.selected) !== null && _a !== void 0 ? _a : 0;
+        }}
+        >
+          <vaadin-tab><foxy-i18n infer="" key="tab_live"></foxy-i18n></vaadin-tab>
+          <vaadin-tab><foxy-i18n infer="" key="tab_test"></foxy-i18n></vaadin-tab>
+        </vaadin-tabs>
+
+        <div class="overflow-hidden" style="--lumo-border-radius: var(--lumo-border-radius-s)">
+          <div
+            data-testid="tab-content"
+            class="grid grid-cols-2 gap-m transition-transform transform duration-300"
+            style=${classMap({
+            'width: calc(200% + var(--lumo-space-m));': true,
+            '--tw-translate-x: 0;': this.__tab === 0,
+            '--tw-translate-x: calc(-50% - (var(--lumo-space-m) / 2));': this.__tab !== 0,
+        })}
+          >
+            ${['live', 'test'].map((type, index) => {
+            var _a, _b, _c;
+            const prefix = index === 0 ? '' : `-${type}`;
+            const blocks = index === 0 ? this.__liveBlocks : this.__testBlocks;
+            return html `
                 <div
-                  class="grid grid-cols-2 gap-m transition-transform transform duration-300"
-                  style="width: calc(200% + var(--lumo-space-m)); --tw-translate-x: ${this.__tab ===
-                0
-                ? '0'
-                : 'calc(-50% - (var(--lumo-space-m) / 2))'}"
+                  class=${classMap({
+                'grid grid-cols-1 gap-m p-m transition-opacity duration-300': true,
+                'opacity-100': this.__tab === index,
+                'opacity-0': this.__tab !== index,
+            })}
                 >
-                  <div
-                    class="grid grid-cols-1 gap-m p-m transition-opacity duration-300 ${this
-                .__tab === 0
-                ? 'opacity-100'
-                : 'opacity-0'}"
-                  >
-                    ${((_g = this.form.helper) === null || _g === void 0 ? void 0 : _g.id_description) ? html `
-                          <foxy-internal-text-control
-                            placeholder=${this.t('default_additional_field_placeholder')}
-                            helper-text=""
-                            label=${this.form.helper.id_description}
-                            infer="account-id"
-                          >
-                          </foxy-internal-text-control>
-                        `
-                : ''}
-                    ${((_h = this.form.helper) === null || _h === void 0 ? void 0 : _h.third_party_key_description) ? html `
-                          <foxy-internal-text-control
-                            placeholder=${this.t('default_additional_field_placeholder')}
-                            helper-text=""
-                            label=${this.form.helper.third_party_key_description}
-                            infer="third-party-key"
-                          >
-                          </foxy-internal-text-control>
-                        `
-                : ''}
-                    ${((_j = this.form.helper) === null || _j === void 0 ? void 0 : _j.key_description) ? html `
-                          <foxy-internal-text-control
-                            placeholder=${this.t('default_additional_field_placeholder')}
-                            helper-text=""
-                            label=${this.form.helper.key_description}
-                            infer="account-key"
-                          >
-                          </foxy-internal-text-control>
-                        `
-                : ''}
-                    ${this.__liveBlocks.map(block => this.__renderBlock(block))}
-                  </div>
-
-                  <div
-                    class="grid grid-cols-1 gap-m p-m transition-opacity duration-300 ${this
-                .__tab === 1
-                ? 'opacity-100'
-                : 'opacity-0'}"
-                  >
-                    ${((_k = this.form.helper) === null || _k === void 0 ? void 0 : _k.id_description) ? html `
-                          <foxy-internal-text-control
-                            placeholder=${this.t('default_additional_field_placeholder')}
-                            helper-text=""
-                            label=${this.form.helper.id_description}
-                            infer="test-account-id"
-                          >
-                          </foxy-internal-text-control>
-                        `
+                  ${((_a = this.form.helper) === null || _a === void 0 ? void 0 : _a.id_description) ? html `
+                        <foxy-internal-text-control
+                          placeholder=${this.t('default_additional_field_placeholder')}
+                          helper-text=""
+                          label=${this.form.helper.id_description}
+                          infer="${prefix}account-id"
+                        >
+                        </foxy-internal-text-control>
+                      `
                 : ''}
-                    ${((_l = this.form.helper) === null || _l === void 0 ? void 0 : _l.third_party_key_description) ? html `
-                          <foxy-internal-text-control
-                            placeholder=${this.t('default_additional_field_placeholder')}
-                            helper-text=""
-                            label=${this.form.helper.third_party_key_description}
-                            infer="test-third-party-key"
-                          >
-                          </foxy-internal-text-control>
-                        `
+                  ${((_b = this.form.helper) === null || _b === void 0 ? void 0 : _b.third_party_key_description) ? html `
+                        <foxy-internal-text-control
+                          placeholder=${this.t('default_additional_field_placeholder')}
+                          helper-text=""
+                          label=${this.form.helper.third_party_key_description}
+                          infer="${prefix}third-party-key"
+                        >
+                        </foxy-internal-text-control>
+                      `
                 : ''}
-                    ${((_m = this.form.helper) === null || _m === void 0 ? void 0 : _m.key_description) ? html `
-                          <foxy-internal-text-control
-                            placeholder=${this.t('default_additional_field_placeholder')}
-                            helper-text=""
-                            label=${this.form.helper.key_description}
-                            infer="test-account-key"
-                          >
-                          </foxy-internal-text-control>
-                        `
+                  ${((_c = this.form.helper) === null || _c === void 0 ? void 0 : _c.key_description) ? html `
+                        <foxy-internal-text-control
+                          placeholder=${this.t('default_additional_field_placeholder')}
+                          helper-text=""
+                          label=${this.form.helper.key_description}
+                          infer="${prefix}account-key"
+                        >
+                        </foxy-internal-text-control>
+                      `
                 : ''}
-                    ${this.__testBlocks.map(block => this.__renderBlock(block))}
-                  </div>
+                  ${blocks.map(block => this.__renderBlock(block))}
                 </div>
-              </div>
-            </div>
+              `;
+        })}
+          </div>
+        </div>
+      </div>
+
+      <foxy-internal-text-control infer="description"></foxy-internal-text-control>
 
-            <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 `
+            <foxy-internal-radio-group-control
+              infer="three-d-secure-toggle"
+              class="-mb-s"
+              .getValue=${this.__threeDSecureToggleGetValue}
+              .setValue=${this.__threeDSecureToggleSetValue}
+              .options=${this.__threeDSecureToggleOptions}
+            >
+            </foxy-internal-radio-group-control>
 
-            ${((_o = this.form.helper) === null || _o === void 0 ? void 0 : _o.supports_3d_secure) ? html `
-                  <foxy-internal-radio-group-control
-                    infer="three-d-secure-toggle"
+            ${this.form.config_3d_secure
+            ? html `
+                  <foxy-internal-checkbox-group-control
+                    infer="three-d-secure-response"
                     class="-mb-s"
-                    .getValue=${() => {
-                const config = this.form.config_3d_secure;
-                if (config === null || config === void 0 ? void 0 : config.startsWith('all_cards'))
-                    return 'all_cards';
-                if (config === null || config === void 0 ? void 0 : config.startsWith('maestro_only'))
-                    return 'maestro_only';
-                return 'off';
-            }}
-                    .setValue=${(newValue) => {
-                var _a;
-                let newFormValue = '';
-                if (newValue === 'all_cards' || newValue === 'maestro_only') {
-                    if ((_a = this.form.config_3d_secure) === null || _a === void 0 ? void 0 : _a.endsWith('require_valid_response')) {
-                        newFormValue = `${newValue}_require_valid_response`;
-                    }
-                    else {
-                        newFormValue = newValue;
-                    }
-                }
-                this.edit({ config_3d_secure: newFormValue });
-            }}
-                    .options=${[
-                { value: 'off', label: 'option_off' },
-                { value: 'all_cards', label: 'option_all_cards' },
-                { value: 'maestro_only', label: 'option_maestro_only' },
-            ]}
+                    .getValue=${this.__threeDSecureResponseGetValue}
+                    .setValue=${this.__threeDSecureResponseSetValue}
+                    .options=${this.__threeDSecureResponseOptions}
                   >
-                  </foxy-internal-radio-group-control>
-
-                  ${this.form.config_3d_secure
-                ? html `
-                        <foxy-internal-checkbox-group-control
-                          infer="three-d-secure-response"
-                          class="-mb-s"
-                          .options=${[{ value: 'valid_only', label: 'option_valid_only' }]}
-                          .getValue=${() => {
-                    var _a;
-                    return ((_a = this.form.config_3d_secure) === null || _a === void 0 ? void 0 : _a.endsWith('require_valid_response')) ? ['valid_only']
-                        : [];
-                }}
-                          .setValue=${(newValue) => {
-                    const postfix = newValue.includes('valid_only')
-                        ? '_require_valid_response'
-                        : '';
-                    const config = this.form.config_3d_secure;
-                    const type = (config === null || config === void 0 ? void 0 : config.startsWith('all_cards')) ? 'all_cards'
-                        : 'maestro_only';
-                    this.edit({
-                        config_3d_secure: `${type}${postfix}`,
-                    });
-                }}
-                        >
-                        </foxy-internal-checkbox-group-control>
-                      `
-                : ''}
+                  </foxy-internal-checkbox-group-control>
                 `
-                : ''}
-            ${((_p = this.data) === null || _p === void 0 ? void 0 : _p.type) ? ''
-                : html `
-                  <vaadin-button theme="contrast" @click=${() => this.undo()}>
-                    <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
-                  </vaadin-button>
-                `}
-            ${super.renderBody()}
+            : ''}
           `
+            : ''}
+      ${((_f = this.data) === null || _f === void 0 ? void 0 : _f.type) ? ''
             : html `
-            <foxy-i18n
-              class="block text-xxl font-bold border-b border-contrast-10 pb-m"
-              infer=""
-              key="select_method_title"
+            <vaadin-button
+              data-testid="select-another-button"
+              theme="contrast"
+              @click=${() => this.undo()}
             >
-            </foxy-i18n>
-
-            <div>
-              <div class="-my-s grid grid-cols-1">
-                ${groupedPaymentMethods.map(group => {
-                return html `
-                    <div class="w-m text-center font-semibold text-tertiary py-s">
-                      ${group.name}
-                    </div>
-
-                    ${group.items.map(({ type, helper }) => {
-                    var _a, _b;
-                    return html `
-                        <button
-                          class=${classMap({
-                        'block text-left p-s rounded-t-l rounded-b-l -mx-s': true,
-                        'transition-colors hover-bg-contrast-5': !helper.conflict,
-                        'cursor-default': !!helper.conflict,
-                    })}
-                          ?disabled=${!!helper.conflict}
-                          @click=${() => this.edit({ type, helper })}
-                        >
-                          <figure class="flex items-center gap-m h-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}
-                              alt=""
-                              @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
-                            />
-
-                            <figcaption
-                              class="min-w-0 flex-1 truncate leading-s ${helper.conflict
-                        ? 'text-tertiary'
-                        : ''}"
-                            >
-                              <div class="font-semibold">${helper.name}&ZeroWidthSpace;</div>
-                              ${helper.conflict
-                        ? html `
-                                    <foxy-i18n
-                                      class="block text-tertiary text-xs"
-                                      infer=""
-                                      key="conflict_message"
-                                      .options=${helper.conflict}
-                                    >
-                                    </foxy-i18n>
-                                  `
-                        : ''}
-                            </figcaption>
-                          </figure>
-                        </button>
-                      `;
-                })}
-                  `;
-            })}
-              </div>
-            </div>
+              <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
+            </vaadin-button>
           `}
+      ${super.renderBody()}
     `;
     }
-    get __liveBlocks() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.form.helper) === null || _a === void 0 ? void 0 : _a.additional_fields) === null || _b === void 0 ? void 0 : _b.blocks.filter(block => block.is_live)) !== null && _c !== void 0 ? _c : [];
-    }
-    get __testBlocks() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.form.helper) === null || _a === void 0 ? void 0 : _a.additional_fields) === null || _b === void 0 ? void 0 : _b.blocks.filter(block => !block.is_live)) !== null && _c !== void 0 ? _c : [];
+    __renderPaymentMethodButton({ type, helper }) {
+        var _a, _b;
+        const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;
+        return html `
+      <button
+        class=${classMap({
+            'w-full block text-left p-s rounded -mx-s': true,
+            'transition-colors hover-bg-contrast-5': !helper.conflict,
+            'cursor-default': !!helper.conflict,
+        })}
+        ?disabled=${!!helper.conflict}
+        @click=${() => this.edit({ type, helper })}
+      >
+        <figure class="flex items-center gap-m h-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}
+            alt=""
+            @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
+          />
+
+          <figcaption
+            class=${classMap({
+            'min-w-0 flex-1 truncate leading-s': true,
+            'text-tertiary': !!helper.conflict,
+        })}
+          >
+            <div class="font-semibold">${helper.name}&ZeroWidthSpace;</div>
+            ${helper.conflict
+            ? html `
+                  <foxy-i18n
+                    class="block text-tertiary text-xs"
+                    infer=""
+                    key="conflict_message"
+                    .options=${helper.conflict}
+                  >
+                  </foxy-i18n>
+                `
+            : ''}
+          </figcaption>
+        </figure>
+      </button>
+    `;
     }
     __renderBlock(block) {
         return html `${block.fields.map(field => {
@@ -391,7 +442,7 @@ export class PaymentsApiPaymentMethodForm extends TranslatableMixin(InternalForm
                 class="-mb-s"
                 infer=${scope}
                 .options=${[{ label: field.name, value: 'checked' }]}
-                .getValue=${getValue}
+                .getValue=${() => (getValue() ? ['checked'] : [])}
                 .setValue=${(newValue) => {
                     setValue(newValue.includes('checked'));
                 }}