@foxy.io/elements 1.18.0-beta.2 → 1.18.0-beta.20

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

@@ -0,0 +1,428 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+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') {
+    constructor() {
+        super(...arguments);
+        this.getImageSrc = null;
+        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() {
+        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');
+        })
+            .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;
+        }, []);
+        return html `
+      <foxy-nucleon
+        class="hidden"
+        href=${availablePaymentMethodsUrl}
+        id="available-payment-methods"
+        @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)}
+              />
+
+              <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>
+
+            <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>
+
+              <div class="overflow-hidden">
+                <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))'}"
+                >
+                  <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>
+                        `
+                : ''}
+                    ${((_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>
+                        `
+                : ''}
+                    ${((_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>
+                        `
+                : ''}
+                    ${this.__testBlocks.map(block => this.__renderBlock(block))}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <foxy-internal-text-control infer="description"></foxy-internal-text-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"
+                    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' },
+            ]}
+                  >
+                  </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>
+                      `
+                : ''}
+                `
+                : ''}
+            ${((_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()}
+          `
+            : html `
+            <foxy-i18n
+              class="block text-xxl font-bold border-b border-contrast-10 pb-m"
+              infer=""
+              key="select_method_title"
+            >
+            </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>
+          `}
+    `;
+    }
+    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 : [];
+    }
+    __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}
+                .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

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

@@ -0,0 +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 { 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 { Block, Data } from './types';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\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\nexport class PaymentsApiPaymentMethodForm extends TranslatableMixin(\n  InternalForm,\n  'payments-api-payment-method-form'\n)<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  getImageSrc: ((type: string) => string) | null = null;\n\n  private __tab = 0;\n\n  renderBody(): TemplateResult {\n    let availablePaymentMethodsUrl: string;\n\n    try {\n      const presetIdRegex = /\\/payment_presets\\/(?<presetId>.+)\\//;\n      const presetId = presetIdRegex.exec(new URL(this.href || this.parent).pathname)!.groups!\n        .presetId;\n      const url = new URL(\n        `/payment_presets/${presetId}/available_payment_methods`,\n        this.href || this.parent\n      );\n\n      availablePaymentMethodsUrl = url.toString();\n    } catch {\n      availablePaymentMethodsUrl = '';\n    }\n\n    const availablePaymentMethods = this.renderRoot.querySelector<\n      NucleonElement<AvailablePaymentMethods>\n    >('#available-payment-methods')?.data;\n\n    const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;\n\n    type Helper = { type: string; helper: AvailablePaymentMethods['values'][string] };\n\n    const groupedPaymentMethods = Object.entries(availablePaymentMethods?.values ?? {})\n      .sort((a, b) => {\n        return a[0].localeCompare(b[0], 'en');\n      })\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: Helper[] }[]);\n\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        href=${availablePaymentMethodsUrl}\n        id=\"available-payment-methods\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      ${this.form.type\n        ? html`\n            <figure 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?.(this.form.type) ?? defaultSrc}\n                alt=\"\"\n                @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n              />\n\n              <figcaption class=\"relative min-w-0 font-bold text-xl text-center\">\n                ${this.form.helper?.name ?? this.form.type}&ZeroWidthSpace;\n              </figcaption>\n            </figure>\n\n            <div class=\"rounded-t-l rounded-b-l 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\">\n                <div\n                  class=\"grid grid-cols-2 gap-m transition-transform transform duration-300\"\n                  style=\"width: calc(200% + var(--lumo-space-m)); --tw-translate-x: ${this.__tab ===\n                  0\n                    ? '0'\n                    : 'calc(-50% - (var(--lumo-space-m) / 2))'}\"\n                >\n                  <div\n                    class=\"grid grid-cols-1 gap-m p-m transition-opacity duration-300 ${this\n                      .__tab === 0\n                      ? 'opacity-100'\n                      : 'opacity-0'}\"\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=\"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=\"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=\"account-key\"\n                          >\n                          </foxy-internal-text-control>\n                        `\n                      : ''}\n                    ${this.__liveBlocks.map(block => this.__renderBlock(block))}\n                  </div>\n\n                  <div\n                    class=\"grid grid-cols-1 gap-m p-m transition-opacity duration-300 ${this\n                      .__tab === 1\n                      ? 'opacity-100'\n                      : 'opacity-0'}\"\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=\"test-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=\"test-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=\"test-account-key\"\n                          >\n                          </foxy-internal-text-control>\n                        `\n                      : ''}\n                    ${this.__testBlocks.map(block => this.__renderBlock(block))}\n                  </div>\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=${() => {\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                    .setValue=${(newValue: 'off' | 'all_cards' | 'maestro_only') => {\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                    .options=${[\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                  </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                          .options=${[{ value: 'valid_only', label: 'option_valid_only' }]}\n                          .getValue=${() =>\n                            this.form.config_3d_secure?.endsWith('require_valid_response')\n                              ? ['valid_only']\n                              : []}\n                          .setValue=${(newValue: string[]) => {\n                            const postfix = newValue.includes('valid_only')\n                              ? '_require_valid_response'\n                              : '';\n\n                            const config = this.form.config_3d_secure;\n                            const type = config?.startsWith('all_cards')\n                              ? 'all_cards'\n                              : 'maestro_only';\n\n                            this.edit({\n                              config_3d_secure: `${type}${postfix}` as Data['config_3d_secure'],\n                            });\n                          }}\n                        >\n                        </foxy-internal-checkbox-group-control>\n                      `\n                    : ''}\n                `\n              : ''}\n            ${this.data?.type\n              ? ''\n              : html`\n                  <vaadin-button theme=\"contrast\" @click=${() => this.undo()}>\n                    <foxy-i18n infer=\"\" key=\"select_another_button_label\"></foxy-i18n>\n                  </vaadin-button>\n                `}\n            ${super.renderBody()}\n          `\n        : html`\n            <foxy-i18n\n              class=\"block text-xxl font-bold border-b border-contrast-10 pb-m\"\n              infer=\"\"\n              key=\"select_method_title\"\n            >\n            </foxy-i18n>\n\n            <div>\n              <div class=\"-my-s grid grid-cols-1\">\n                ${groupedPaymentMethods.map(group => {\n                  return html`\n                    <div class=\"w-m text-center font-semibold text-tertiary py-s\">\n                      ${group.name}\n                    </div>\n\n                    ${group.items.map(\n                      ({ type, helper }) => html`\n                        <button\n                          class=${classMap({\n                            'block text-left p-s rounded-t-l rounded-b-l -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) =>\n                                ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n                            />\n\n                            <figcaption\n                              class=\"min-w-0 flex-1 truncate leading-s ${helper.conflict\n                                ? 'text-tertiary'\n                                : ''}\"\n                            >\n                              <div class=\"font-semibold\">${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                })}\n              </div>\n            </div>\n          `}\n    `;\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 __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}\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/PaymentsApiPaymentMethodForm/index.d.ts

@@ -0,0 +1,10 @@
+import '@vaadin/vaadin-tabs';
+import '../../internal/InternalAsyncComboBoxControl/index';
+import '../../internal/InternalCheckboxGroupControl/index';
+import '../../internal/InternalRadioGroupControl/index';
+import '../../internal/InternalSelectControl/index';
+import '../../internal/InternalTextControl/index';
+import '../../internal/InternalForm/index';
+import '../I18n/index';
+import { PaymentsApiPaymentMethodForm } from './PaymentsApiPaymentMethodForm';
+export { PaymentsApiPaymentMethodForm };

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

@@ -0,0 +1,12 @@
+import '@vaadin/vaadin-tabs';
+import "../../internal/InternalAsyncComboBoxControl/index.js";
+import "../../internal/InternalCheckboxGroupControl/index.js";
+import "../../internal/InternalRadioGroupControl/index.js";
+import "../../internal/InternalSelectControl/index.js";
+import "../../internal/InternalTextControl/index.js";
+import "../../internal/InternalForm/index.js";
+import "../I18n/index.js";
+import { PaymentsApiPaymentMethodForm } from "./PaymentsApiPaymentMethodForm.js";
+customElements.define('foxy-payments-api-payment-method-form', PaymentsApiPaymentMethodForm);
+export { PaymentsApiPaymentMethodForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,8DAA2D;AAC3D,8DAA2D;AAC3D,2DAAwD;AACxD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,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 '@vaadin/vaadin-tabs';\n\nimport '../../internal/InternalAsyncComboBoxControl/index';\nimport '../../internal/InternalCheckboxGroupControl/index';\nimport '../../internal/InternalRadioGroupControl/index';\nimport '../../internal/InternalSelectControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport '../I18n/index';\n\nimport { PaymentsApiPaymentMethodForm } from './PaymentsApiPaymentMethodForm';\n\ncustomElements.define('foxy-payments-api-payment-method-form', PaymentsApiPaymentMethodForm);\n\nexport { PaymentsApiPaymentMethodForm };\n"]}

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

@@ -0,0 +1,3 @@
+import type { PaymentMethod } from '../PaymentsApi/api/types';
+export declare type Data = PaymentMethod;
+export declare type Block = NonNullable<Data['helper']['additional_fields']>['blocks'][number];

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PaymentMethod } from '../PaymentsApi/api/types';\n\nexport type Data = PaymentMethod;\nexport type Block = NonNullable<Data['helper']['additional_fields']>['blocks'][number];\n"]}

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

@@ -0,0 +1,27 @@
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+declare const Base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Card element representing a `fx:payment_preset` 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-preset-card
+ * @since 1.21.0
+ */
+export declare class PaymentsApiPaymentPresetCard extends Base<Data> {
+    render(): TemplateResult;
+}
+export {};

package/dist/elements/public/PaymentsApiPaymentPresetCard/PaymentsApiPaymentPresetCard.js

@@ -0,0 +1,39 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-html';
+const NS = 'payments-api-payment-preset-card';
+const Base = TranslatableMixin(TwoLineCard, NS);
+/**
+ * Card element representing a `fx:payment_preset` 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-preset-card
+ * @since 1.21.0
+ */
+export class PaymentsApiPaymentPresetCard extends Base {
+    render() {
+        return super.render({
+            title: data => html `${data.description}`,
+            subtitle: ({ is_live: isLive }) => html `
+        <foxy-i18n
+          class=${classMap({ 'text-success': isLive })}
+          infer=""
+          key="status_${isLive ? 'live' : 'test'}"
+        >
+        </foxy-i18n>
+      `,
+        });
+    }
+}
+//# sourceMappingURL=PaymentsApiPaymentPresetCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentsApiPaymentPresetCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentPresetCard/PaymentsApiPaymentPresetCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,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;IAC1D,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;YACxC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;kBAE3B,QAAQ,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC;;wBAE9B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;OAGzC;SACF,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst NS = 'payments-api-payment-preset-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing a `fx:payment_preset` 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-preset-card\n * @since 1.21.0\n */\nexport class PaymentsApiPaymentPresetCard extends Base<Data> {\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.description}`,\n      subtitle: ({ is_live: isLive }) => html`\n        <foxy-i18n\n          class=${classMap({ 'text-success': isLive })}\n          infer=\"\"\n          key=\"status_${isLive ? 'live' : 'test'}\"\n        >\n        </foxy-i18n>\n      `,\n    });\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentPresetCard/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 { PaymentsApiPaymentPresetCard } from './PaymentsApiPaymentPresetCard';\n\ncustomElements.define('foxy-payments-api-payment-preset-card', PaymentsApiPaymentPresetCard);\n\nexport { PaymentsApiPaymentPresetCard };\n"]}

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

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