@foxy.io/elements 1.20.1 → 1.21.0-beta.1

package/dist/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.js

@@ -0,0 +1,68 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
+import { html } from 'lit-html';
+const NS = 'payments-api-payment-method-card';
+const Base = TranslatableMixin(TwoLineCard, NS);
+/**
+ * Card element representing a `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 title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-payments-api-payment-method-card
+ * @since 1.21.0
+ */
+export class PaymentsApiPaymentMethodCard extends Base {
+    constructor() {
+        super(...arguments);
+        /**
+         * Payment method image/logo URL getter.
+         * If left `null`, the card will display the default image.
+         */
+        this.getImageSrc = null;
+    }
+    static get defaultImageSrc() {
+        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";
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            getImageSrc: { attribute: false },
+        };
+    }
+    renderBody() {
+        var _a, _b;
+        const defaultLayout = super.renderBody({
+            title: data => html `${data.helper.name}`,
+            subtitle: data => html `${data.description}`,
+        });
+        if (!this.in({ idle: 'snapshot' }))
+            return defaultLayout;
+        const defaultSrc = PaymentsApiPaymentMethodCard.defaultImageSrc;
+        const data = this.data;
+        return html `
+      <figure
+        class="flex items-center"
+        style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
+        <img
+          class="relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
+          src=${(_b = (data ? (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, data.type) : null)) !== null && _b !== void 0 ? _b : defaultSrc}
+          alt=${this.t('image_alt')}
+          @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
+        />
+
+        <figcaption class="min-w-0 flex-1">${defaultLayout}</figcaption>
+      </figure>
+    `;
+    }
+}
+//# sourceMappingURL=PaymentsApiPaymentMethodCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentsApiPaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kCAAkC,CAAC;AAC9C,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,4BAA6B,SAAQ,IAAU;IAA5D;;QAYE;;;WAGG;QACH,gBAAW,GAAsC,IAAI,CAAC;IA6BxD,CAAC;IA5CC,MAAM,KAAK,eAAe;QACxB,OAAO,goBAAgoB,CAAC;IAC1oB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAQD,UAAU;;QACR,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC;YACrC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;SAC5C,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,aAAa,CAAC;QAEzD,MAAM,UAAU,GAAG,4BAA4B,CAAC,eAAe,CAAC;QAChE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;;;;;;gBAOC,MAAA,CAAC,IAAI,CAAC,CAAC,OAAC,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,mCAAI,UAAU;gBAC3D,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;mBAChB,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;6CAGhD,aAAa;;KAErD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'payments-api-payment-method-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing a `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 title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-payments-api-payment-method-card\n * @since 1.21.0\n */\nexport class PaymentsApiPaymentMethodCard 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      getImageSrc: { attribute: false },\n    };\n  }\n\n  /**\n   * Payment method image/logo URL getter.\n   * If left `null`, the card will display the default image.\n   */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  renderBody(): TemplateResult {\n    const defaultLayout = super.renderBody({\n      title: data => html`${data.helper.name}`,\n      subtitle: data => html`${data.description}`,\n    });\n\n    if (!this.in({ idle: 'snapshot' })) return defaultLayout;\n\n    const defaultSrc = PaymentsApiPaymentMethodCard.defaultImageSrc;\n    const data = this.data;\n\n    return html`\n      <figure\n        class=\"flex items-center\"\n        style=\"gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <img\n          class=\"relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${(data ? this.getImageSrc?.(data.type) : null) ?? defaultSrc}\n          alt=${this.t('image_alt')}\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"min-w-0 flex-1\">${defaultLayout}</figcaption>\n      </figure>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { PaymentsApiPaymentMethodCard } from './PaymentsApiPaymentMethodCard';
+export { PaymentsApiPaymentMethodCard };

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

@@ -0,0 +1,7 @@
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { PaymentsApiPaymentMethodCard } from "./PaymentsApiPaymentMethodCard.js";
+customElements.define('foxy-payments-api-payment-method-card', PaymentsApiPaymentMethodCard);
+export { PaymentsApiPaymentMethodCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAE9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,4BAA4B,EAAE,0CAAuC;AAE9E,cAAc,CAAC,MAAM,CAAC,uCAAuC,EAAE,4BAA4B,CAAC,CAAC;AAE7F,OAAO,EAAE,4BAA4B,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\n\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { PaymentsApiPaymentMethodCard } from './PaymentsApiPaymentMethodCard';\n\ncustomElements.define('foxy-payments-api-payment-method-card', PaymentsApiPaymentMethodCard);\n\nexport { PaymentsApiPaymentMethodCard };\n"]}

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

@@ -0,0 +1 @@
+export type { PaymentMethod as Data } from '../PaymentsApi/api/types';

package/dist/elements/public/PaymentsApiPaymentMethodCard/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/types.ts"],"names":[],"mappings":"","sourcesContent":["export type { PaymentMethod as Data } from '../PaymentsApi/api/types';\n"]}

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

@@ -0,0 +1,87 @@
+import type { Templates, Data } from './types';
+import type { PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../NucleonElement/types';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Form element for 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 declare class PaymentsApiPaymentMethodForm extends Base<Data> {
+    static get defaultImageSrc(): string;
+    static get properties(): PropertyDeclarations;
+    static get v8n(): NucleonV8N<Data>;
+    /** A function that returns a URL of a payment method icon based on the given type. */
+    getImageSrc: ((type: string) => string) | null;
+    /** Template render functions mapped to their name. */
+    templates: Templates;
+    private readonly __availablePaymentMethodsLoaderId;
+    private readonly __threeDSecureResponseGetValue;
+    private readonly __threeDSecureResponseSetValue;
+    private readonly __threeDSecureResponseOptions;
+    private readonly __threeDSecureToggleGetValue;
+    private readonly __threeDSecureToggleSetValue;
+    private readonly __threeDSecureToggleOptions;
+    private __tab;
+    renderBody(): TemplateResult;
+    private get __groupedAvailablePaymentMethods();
+    private get __availablePaymentMethodsLoader();
+    private get __availablePaymentMethodsHref();
+    private get __availablePaymentMethods();
+    private get __liveBlocks();
+    private get __testBlocks();
+    private __renderPaymentMethodSelector;
+    private __renderPaymentMethodConfig;
+    private __renderPaymentMethodButton;
+    private __renderBlock;
+}
+export {};

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

@@ -0,0 +1,479 @@
+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';
+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() {
+        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";
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __tab: { attribute: false },
+            getImageSrc: { attribute: false },
+        };
+    }
+    static get v8n() {
+        return [
+            ({ description: v }) => !v || v.length <= 100 || 'description:v8n_too_long',
+            ({ type: v }) => !!v || 'type:v8n_required',
+            form => {
+                var _a, _b, _c, _d;
+                const blocks = (_c = (_b = (_a = form.helper) === null || _a === void 0 ? void 0 : _a.additional_fields) === null || _b === void 0 ? void 0 : _b.blocks) !== null && _c !== void 0 ? _c : [];
+                let additionalFields;
+                try {
+                    additionalFields = JSON.parse((_d = form.additional_fields) !== null && _d !== void 0 ? _d : '{}');
+                }
+                catch (_e) {
+                    additionalFields = {};
+                }
+                for (const block of blocks) {
+                    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 (field.type !== 'checkbox') {
+                                        return 'additional-fields:v8n_invalid';
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                return true;
+            },
+        ];
+    }
+    renderBody() {
+        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);
+            const name = isSpecialCharacter ? '#' : firstChar;
+            const group = groups.find(group => group.name === name);
+            if (group) {
+                group.items.push({ type, helper });
+            }
+            else {
+                groups.push({ name, items: [{ type, helper }] });
+            }
+            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"
+        infer=""
+        href=${ifDefined(this.__availablePaymentMethodsHref)}
+        id=${this.__availablePaymentMethodsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-i18n
+        class="block text-xxl font-bold 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-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)}
+        />
+
+        <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="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=${classMap({
+                'grid grid-cols-1 gap-m p-m transition-opacity duration-300': true,
+                'opacity-100': this.__tab === index,
+                'opacity-0': this.__tab !== index,
+            })}
+                >
+                  ${((_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>
+                      `
+                : ''}
+                  ${((_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>
+                      `
+                : ''}
+                  ${((_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>
+                      `
+                : ''}
+                  ${blocks.map(block => this.__renderBlock(block))}
+                </div>
+              `;
+        })}
+          </div>
+        </div>
+      </div>
+
+      <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>
+
+            ${this.form.config_3d_secure
+            ? html `
+                  <foxy-internal-checkbox-group-control
+                    infer="three-d-secure-response"
+                    class="-mb-s"
+                    .getValue=${this.__threeDSecureResponseGetValue}
+                    .setValue=${this.__threeDSecureResponseSetValue}
+                    .options=${this.__threeDSecureResponseOptions}
+                  >
+                  </foxy-internal-checkbox-group-control>
+                `
+            : ''}
+          `
+            : ''}
+      ${((_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;
+        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 => {
+            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 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;
+                }
+                catch (_c) {
+                    return field.default_value;
+                }
+            };
+            const setValue = (newValue) => {
+                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)) });
+                }
+                catch (_b) {
+                    return '';
+                }
+            };
+            const options = field.options;
+            return html `
+        ${field.type === 'checkbox'
+                ? html `
+              <foxy-internal-checkbox-group-control
+                helper-text=${(_a = field.description) !== null && _a !== void 0 ? _a : ''}
+                label=""
+                class="-mb-s"
+                infer=${scope}
+                .options=${[{ label: field.name, value: 'checked' }]}
+                .getValue=${() => (getValue() ? ['checked'] : [])}
+                .setValue=${(newValue) => {
+                    setValue(newValue.includes('checked'));
+                }}
+              >
+              </foxy-internal-checkbox-group-control>
+            `
+                : field.type === 'select'
+                    ? html `
+              <foxy-internal-select-control
+                helper-text=${(_b = field.description) !== null && _b !== void 0 ? _b : ''}
+                label=${field.name}
+                infer=${scope}
+                .options=${options.map(({ name, value }) => ({ label: name, value }))}
+                .getValue=${getValue}
+                .setValue=${setValue}
+              >
+              </foxy-internal-select-control>
+            `
+                    : html `
+              <foxy-internal-text-control
+                helper-text=${(_c = field.description) !== null && _c !== void 0 ? _c : ''}
+                placeholder=${field.default_value || this.t('default_additional_field_placeholder')}
+                label=${field.name}
+                infer=${scope}
+                .getValue=${getValue}
+                .setValue=${setValue}
+              >
+              </foxy-internal-text-control>
+            `}
+      `;
+        })}`;
+    }
+}
+//# sourceMappingURL=PaymentsApiPaymentMethodForm.js.map