npm - @foxy.io/elements - Versions diffs - 1.27.1 → 1.28.0-beta.1 - Mend

@foxy.io/elements 1.27.1 → 1.28.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (745) hide show

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

@@ -1,3 +1,4 @@
+import { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
@@ -16,45 +17,6 @@ const Base = TranslatableMixin(InternalForm, NS);
  * 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
  */
@@ -63,8 +25,6 @@ export class PaymentsApiPaymentMethodForm extends Base {
         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;
@@ -150,10 +110,68 @@ export class PaymentsApiPaymentMethodForm extends Base {
             },
         ];
     }
+    get hiddenSelector() {
+        return new BooleanSelector(`header:copy-json ${super.hiddenSelector}`.trimEnd());
+    }
+    renderHeader(...params) {
+        var _a;
+        return html `
+      <div>
+        ${super.renderHeader(...params)}
+        ${((_a = this.data) === null || _a === void 0 ? void 0 : _a.type) || !this.form.type
+            ? html ``
+            : html `
+              <vaadin-button
+                data-testid="select-another-button"
+                theme="tertiary-inline"
+                @click=${() => this.undo()}
+              >
+                <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
+              </vaadin-button>
+            `}
+      </div>
+    `;
+    }
+    get headerTitleOptions() {
+        var _a;
+        return {
+            context: this.form.type ? 'selected' : 'new',
+            name: (_a = this.form.helper) === null || _a === void 0 ? void 0 : _a.name,
+        };
+    }
+    get headerSubtitleOptions() {
+        if (this.href) {
+            const vId = getResourceId(this.href);
+            const id = this.headerCopyIdValue;
+            if (vId.startsWith('R'))
+                return { context: 'regular', id };
+            return { context: 'hosted', id };
+        }
+        return {};
+    }
+    get headerCopyIdValue() {
+        if (this.href) {
+            const id = getResourceId(this.href);
+            return id.startsWith('R') ? id.slice(1) : id.slice(1).split('C')[0];
+        }
+        else {
+            return '';
+        }
+    }
     renderBody() {
-        return this.form.type
-            ? this.__renderPaymentMethodConfig(this.form.type)
-            : this.__renderPaymentMethodSelector();
+        const paymentMethodsLoader = html `
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__availablePaymentMethodsHref)}
+        id=${this.__availablePaymentMethodsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+    `;
+        return html `${this.renderHeader()}${this.form.type
+            ? this.__renderPaymentMethodConfig()
+            : this.__renderPaymentMethodSelector()}${paymentMethodsLoader}`;
     }
     get __groupedAvailablePaymentMethods() {
         var _a;
@@ -203,69 +221,32 @@ export class PaymentsApiPaymentMethodForm extends Base {
         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() {
+        const loader = this.__availablePaymentMethodsLoader;
+        if (!(loader === null || loader === void 0 ? void 0 : loader.data)) {
+            return html `
+        <foxy-spinner infer="list-spinner" state=${(loader === null || loader === void 0 ? void 0 : loader.in('fail')) ? 'error' : 'busy'}>
+        </foxy-spinner>
+      `;
+        }
         return html `
-      <figure data-testid="logo" class="relative flex flex-col gap-m p-m items-center">
-        <img
-          class="relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
-          src=${PaymentsApiPaymentMethodForm.defaultImageSrc}
-          alt=""
-        />
-        <figcaption class="relative min-w-0 font-medium text-xl text-center">
-          <foxy-i18n infer="" key="select_method_title"></foxy-i18n>
-        </figcaption>
-      </figure>
-      <section data-testid="select-method-list" class="-mt-m">
-        ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {
+      <div>
+        <section data-testid="select-method-list" class="-mt-m">
+          ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {
             return html `
-            <p class="font-medium text-tertiary py-m">${name}</p>
-            <ul class="grid grid-cols-2 gap-m">
-              ${items.map(item => html `<li>${this.__renderPaymentMethodButton(item)}</li>`)}
-            </ul>
-          `;
+              <p class="font-medium text-tertiary py-m">${name}</p>
+              <ul class="grid grid-cols-2 gap-m">
+                ${items.map(item => html `<li>${this.__renderPaymentMethodButton(item)}</li>`)}
+              </ul>
+            `;
         })}
-      </section>
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__availablePaymentMethodsHref)}
-        id=${this.__availablePaymentMethodsLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
+        </section>
+      </div>
     `;
     }
-    __renderPaymentMethodConfig(type) {
-        var _a, _b, _c, _d, _e, _f;
-        const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;
+    __renderPaymentMethodConfig() {
+        var _a;
         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-medium text-xl text-center">
-          <div>${(_d = (_c = this.form.helper) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : this.form.type}&ZeroWidthSpace;</div>
-          ${((_e = this.data) === null || _e === void 0 ? void 0 : _e.type) ? ''
-            : html `
-                <vaadin-button
-                  data-testid="select-another-button"
-                  theme="tertiary-inline"
-                  class="text-m"
-                  @click=${() => this.undo()}
-                >
-                  <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
-                </vaadin-button>
-              `}
-        </figcaption>
-      </figure>
-      <div class="rounded border border-contrast-10">
+      <div class="rounded-t-l rounded-b-l border border-contrast-10">
         <vaadin-tabs
           selected=${this.__tab}
           theme="centered"
@@ -279,7 +260,7 @@ export class PaymentsApiPaymentMethodForm extends Base {
           <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 class="overflow-hidden">
           <div
             data-testid="tab-content"
             class="grid grid-cols-2 gap-m transition-transform transform duration-300"
@@ -341,7 +322,7 @@ export class PaymentsApiPaymentMethodForm extends Base {
       <foxy-internal-text-control infer="description"></foxy-internal-text-control>
-      ${((_f = this.form.helper) === null || _f === void 0 ? void 0 : _f.supports_3d_secure) ? html `
+      ${((_a = this.form.helper) === null || _a === void 0 ? void 0 : _a.supports_3d_secure) ? html `
             <foxy-internal-radio-group-control
               infer="three-d-secure-toggle"
               class="-mb-s"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentsApiPaymentMethodForm.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { AvailablePaymentMethods } from '../PaymentsApi/api/types';\nimport type { Templates, Block, Data } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { TabsElement } from '@vaadin/vaadin-tabs';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nimport has from 'lodash-es/has';\nimport get from 'lodash-es/get';\nimport set from 'lodash-es/set';\n\ntype PaymentMethod = {\n helper: AvailablePaymentMethods['values'][string];\n type: string;\n};\n\nconst NS = 'payments-api-payment-method-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/*\n Form element for the `fx:payment_method` resource of Payments API.\n \n _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n \n @slot description:before\n * @slot description:after\n \n @slot account-id:before\n * @slot account-id:after\n \n @slot account-key:before\n * @slot account-key:after\n \n @slot third-party-key:before\n * @slot third-party-key:after\n \n @slot test-account-id:before\n * @slot test-account-id:after\n \n @slot test-account-key:before\n * @slot test-account-key:after\n \n @slot test-third-party-key:before\n * @slot test-third-party-key:after\n \n @slot additional-fields-[field-name-in-kebab-case]:before\n * @slot additional-fields-[field-name-in-kebab-case]:after\n \n @slot three-d-secure-toggle:before\n * @slot three-d-secure-toggle:after\n \n @slot three-d-secure-response:before\n * @slot three-d-secure-response:after\n \n @slot timestamps:before\n * @slot timestamps:after\n \n @slot create:before\n * @slot create:after\n \n @slot delete:before\n * @slot delete:after\n \n @element foxy-payments-api-payment-method-form\n * @since 1.21.0\n /\nexport class PaymentsApiPaymentMethodForm extends Base<Data> {\n static get defaultImageSrc(): string {\n return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='m29.3 14 14-14H32.1l-14 14h11.2Zm2.7 9.9 12-12V.7L30.62 14.1A2 2 0 0 1 32 16v7.9ZM13.31 44h11.18L44 24.5V13.3l-12 12V28a2 2 0 0 1-2 2h-2.69l-14 14Zm-1.41 0H.7l14-14h11.2l-14 14Zm14 0h11.2l6.9-6.9V25.9L25.9 44Zm12.6 0H44v-5.5L38.5 44Z'/%3E%3Cpath fill='%23fff' d='M30 28H14v-6h16v6Zm0-10v-2H14v2h16ZM0 43.3l13.4-13.4A2 2 0 0 1 12 28v-7.9L0 32.12V43.3Z'/%3E%3Cpath fill='%23fff' d='M16.7 14H14c-1.11 0-1.99.89-1.99 2v2.7L0 30.7V19.52L19.52 0H30.7l-14 14Zm1.4-14H6.92L0 6.92V18.1L18.1 0ZM5.5 0H0v5.5L5.5 0Z'/%3E%3C/svg%3E\";\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __tab: { attribute: false },\n getImageSrc: { attribute: false },\n };\n }\n\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ description: v }) => !v \|\| v.length <= 100 \|\| 'description:v8n_too_long',\n ({ type: v }) => !!v \|\| 'type:v8n_required',\n\n form => {\n const blocks = form.helper?.additional_fields?.blocks ?? [];\n let additionalFields: Record<string, unknown>;\n\n try {\n additionalFields = JSON.parse(form.additional_fields ?? '{}');\n } catch {\n additionalFields = {};\n }\n\n for (const block of blocks) {\n for (const field of block.fields) {\n if ('optional' in (field as Record<string, unknown>)) {\n if (!(field as Record<string, unknown>).optional) {\n if (!has(additionalFields, field.id)) {\n if (field.type !== 'checkbox') {\n return 'additional-fields:v8n_invalid';\n }\n }\n }\n }\n }\n }\n\n return true;\n },\n ];\n }\n\n /* A function that returns a URL of a payment method icon based on the given type. /\n getImageSrc: ((type: string) => string) \| null = null;\n\n /* Template render functions mapped to their name. */\n templates: Templates = {};\n\n private readonly __availablePaymentMethodsLoaderId = 'availablePaymentMethodsLoader';\n\n private readonly __threeDSecureResponseGetValue = () => {\n return this.form.config_3d_secure?.endsWith('require_valid_response') ? ['valid_only'] : [];\n };\n\n private readonly __threeDSecureResponseSetValue = (newValue: string[]) => {\n const postfix = newValue.includes('valid_only') ? '_require_valid_response' : '';\n\n const config = this.form.config_3d_secure;\n const type = config?.startsWith('all_cards') ? 'all_cards' : 'maestro_only';\n\n this.edit({\n config_3d_secure: `${type}${postfix}` as Data['config_3d_secure'],\n });\n };\n\n private readonly __threeDSecureResponseOptions = [\n { value: 'valid_only', label: 'option_valid_only' },\n ];\n\n private readonly __threeDSecureToggleGetValue = () => {\n const config = this.form.config_3d_secure;\n\n if (config?.startsWith('all_cards')) return 'all_cards';\n if (config?.startsWith('maestro_only')) return 'maestro_only';\n\n return 'off';\n };\n\n private readonly __threeDSecureToggleSetValue = (\n newValue: 'off' \| 'all_cards' \| 'maestro_only'\n ) => {\n let newFormValue = '';\n\n if (newValue === 'all_cards' \|\| newValue === 'maestro_only') {\n if (this.form.config_3d_secure?.endsWith('require_valid_response')) {\n newFormValue = `${newValue}_require_valid_response`;\n } else {\n newFormValue = newValue;\n }\n }\n\n this.edit({ config_3d_secure: newFormValue as Data['config_3d_secure'] });\n };\n\n private readonly __threeDSecureToggleOptions = [\n { value: 'off', label: 'option_off' },\n { value: 'all_cards', label: 'option_all_cards' },\n { value: 'maestro_only', label: 'option_maestro_only' },\n ];\n\n private __tab = 0;\n\n renderBody(): TemplateResult {\n return this.form.type\n ? this.__renderPaymentMethodConfig(this.form.type)\n : this.__renderPaymentMethodSelector();\n }\n\n private get __groupedAvailablePaymentMethods() {\n return Object.entries(this.__availablePaymentMethods ?? {})\n .sort((a, b) => a[0].localeCompare(b[0], 'en'))\n .reduce((groups, [type, helper]) => {\n if (helper.is_deprecated) return groups;\n\n const firstChar = type.charAt(0).toUpperCase();\n const isSpecialCharacter = !/\\w/.test(firstChar);\n const name = isSpecialCharacter ? '#' : firstChar;\n const group = groups.find(group => group.name === name);\n\n if (group) {\n group.items.push({ type, helper });\n } else {\n groups.push({ name, items: [{ type, helper }] });\n }\n\n return groups;\n }, [] as { name: string; items: PaymentMethod[] }[]);\n }\n\n private get __availablePaymentMethodsLoader() {\n type Loader = NucleonElement<AvailablePaymentMethods>;\n return this.renderRoot.querySelector<Loader>(`#${this.__availablePaymentMethodsLoaderId}`);\n }\n\n private get __availablePaymentMethodsHref() {\n try {\n const presetIdRegex = /\\/payment_presets\\/(?<presetId>.+)\\//;\n const pathname = new URL(this.href \|\| this.parent).pathname;\n const presetId = presetIdRegex.exec(pathname)!.groups!.presetId;\n const url = new URL(\n `/payment_presets/${presetId}/available_payment_methods`,\n this.href \|\| this.parent\n );\n\n return url.toString();\n } catch {\n // ignore\n }\n }\n\n private get __availablePaymentMethods() {\n return this.__availablePaymentMethodsLoader?.data?.values;\n }\n\n private get __liveBlocks() {\n return this.form.helper?.additional_fields?.blocks.filter(block => block.is_live) ?? [];\n }\n\n private get __testBlocks() {\n return this.form.helper?.additional_fields?.blocks.filter(block => !block.is_live) ?? [];\n }\n\n private __renderPaymentMethodSelector() {\n return html`\n <figure data-testid=\"logo\" class=\"relative flex flex-col gap-m p-m items-center\">\n <img\n class=\"relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n src=${PaymentsApiPaymentMethodForm.defaultImageSrc}\n alt=\"\"\n />\n\n <figcaption class=\"relative min-w-0 font-medium text-xl text-center\">\n <foxy-i18n infer=\"\" key=\"select_method_title\"></foxy-i18n>\n </figcaption>\n </figure>\n\n <section data-testid=\"select-method-list\" class=\"-mt-m\">\n ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {\n return html`\n <p class=\"font-medium text-tertiary py-m\">${name}</p>\n <ul class=\"grid grid-cols-2 gap-m\">\n ${items.map(item => html`<li>${this.__renderPaymentMethodButton(item)}</li>`)}\n </ul>\n `;\n })}\n </section>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__availablePaymentMethodsHref)}\n id=${this.__availablePaymentMethodsLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n `;\n }\n\n private __renderPaymentMethodConfig(type: string) {\n const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;\n\n return html`\n <figure data-testid=\"logo\" class=\"relative flex flex-col gap-m p-m items-center\">\n <img\n class=\"relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n src=${this.getImageSrc?.(type) ?? defaultSrc}\n alt=\"\"\n @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n />\n\n <figcaption class=\"relative min-w-0 font-medium text-xl text-center\">\n <div>${this.form.helper?.name ?? this.form.type}&ZeroWidthSpace;</div>\n ${this.data?.type\n ? ''\n : html`\n <vaadin-button\n data-testid=\"select-another-button\"\n theme=\"tertiary-inline\"\n class=\"text-m\"\n @click=${() => this.undo()}\n >\n <foxy-i18n infer=\"\" key=\"select_another_button_label\"></foxy-i18n>\n </vaadin-button>\n `}\n </figcaption>\n </figure>\n\n <div class=\"rounded border border-contrast-10\">\n <vaadin-tabs\n selected=${this.__tab}\n theme=\"centered\"\n @selected-changed=${(evt: CustomEvent) => {\n const tabs = evt.currentTarget as TabsElement;\n this.__tab = tabs.selected ?? 0;\n }}\n >\n <vaadin-tab><foxy-i18n infer=\"\" key=\"tab_live\"></foxy-i18n></vaadin-tab>\n <vaadin-tab><foxy-i18n infer=\"\" key=\"tab_test\"></foxy-i18n></vaadin-tab>\n </vaadin-tabs>\n\n <div class=\"overflow-hidden\" style=\"--lumo-border-radius: var(--lumo-border-radius-s)\">\n <div\n data-testid=\"tab-content\"\n class=\"grid grid-cols-2 gap-m transition-transform transform duration-300\"\n style=${classMap({\n 'width: calc(200% + var(--lumo-space-m));': true,\n '--tw-translate-x: 0;': this.__tab === 0,\n '--tw-translate-x: calc(-50% - (var(--lumo-space-m) / 2));': this.__tab !== 0,\n })}\n >\n ${['live', 'test'].map((type, index) => {\n const prefix = index === 0 ? '' : `${type}-`;\n const blocks = index === 0 ? this.__liveBlocks : this.__testBlocks;\n\n return html`\n <div\n class=${classMap({\n 'grid grid-cols-1 gap-m p-m transition-opacity duration-300': true,\n 'opacity-100': this.__tab === index,\n 'opacity-0': this.__tab !== index,\n })}\n >\n ${this.form.helper?.id_description\n ? html`\n <foxy-internal-text-control\n placeholder=${this.t('default_additional_field_placeholder')}\n helper-text=\"\"\n label=${this.form.helper.id_description}\n infer=\"${prefix}account-id\"\n >\n </foxy-internal-text-control>\n `\n : ''}\n ${this.form.helper?.third_party_key_description\n ? html`\n <foxy-internal-text-control\n placeholder=${this.t('default_additional_field_placeholder')}\n helper-text=\"\"\n label=${this.form.helper.third_party_key_description}\n infer=\"${prefix}third-party-key\"\n >\n </foxy-internal-text-control>\n `\n : ''}\n ${this.form.helper?.key_description\n ? html`\n <foxy-internal-text-control\n placeholder=${this.t('default_additional_field_placeholder')}\n helper-text=\"\"\n label=${this.form.helper.key_description}\n infer=\"${prefix}account-key\"\n >\n </foxy-internal-text-control>\n `\n : ''}\n ${blocks.map(block => this.__renderBlock(block))}\n </div>\n `;\n })}\n </div>\n </div>\n </div>\n\n <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n\n ${this.form.helper?.supports_3d_secure\n ? html`\n <foxy-internal-radio-group-control\n infer=\"three-d-secure-toggle\"\n class=\"-mb-s\"\n .getValue=${this.__threeDSecureToggleGetValue}\n .setValue=${this.__threeDSecureToggleSetValue}\n .options=${this.__threeDSecureToggleOptions}\n >\n </foxy-internal-radio-group-control>\n\n ${this.form.config_3d_secure\n ? html`\n <foxy-internal-checkbox-group-control\n infer=\"three-d-secure-response\"\n class=\"-mb-s\"\n .getValue=${this.__threeDSecureResponseGetValue}\n .setValue=${this.__threeDSecureResponseSetValue}\n .options=${this.__threeDSecureResponseOptions}\n >\n </foxy-internal-checkbox-group-control>\n `\n : ''}\n `\n : ''}\n ${super.renderBody()}\n `;\n }\n\n private __renderPaymentMethodButton({ type, helper }: PaymentMethod) {\n const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;\n const src = this.getImageSrc?.(type) ?? defaultSrc;\n const onError = (evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc);\n\n return html`\n <button\n class=${classMap({\n 'relative w-full block text-left p-s rounded bg-contrast-5 overflow-hidden': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'transition-colors hover-bg-contrast-10': !helper.conflict,\n 'cursor-default': !!helper.conflict,\n })}\n ?disabled=${!!helper.conflict}\n title=${helper.conflict ? this.t('conflict_message', helper.conflict) : ''}\n @click=${() => this.edit({ type, helper })}\n >\n <img\n class=\"absolute top-0 left-0 w-1-2 h-full object-cover bg-center filter saturate-200 blur-3xl\"\n style=\"transform: translate3d(0, 0, 0)\"\n src=${src}\n alt=\"\"\n ?hidden=${!!helper.conflict}\n @error=${onError}\n />\n\n <figure class=\"relative flex flex-col gap-m\">\n <img\n class=${classMap({\n 'h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs': true,\n 'filter grayscale': !!helper.conflict,\n })}\n src=${src}\n alt=\"\"\n @error=${onError}\n />\n\n <figcaption\n class=${classMap({\n 'min-w-0 flex-1 truncate leading-s': true,\n 'text-disabled': !!helper.conflict,\n })}\n >\n <div class=\"font-medium\">${helper.name}&ZeroWidthSpace;</div>\n <div class=\"text-xs ${helper.conflict ? '' : 'text-secondary'}\">${type}</div>\n </figcaption>\n </figure>\n </button>\n `;\n }\n\n private __renderBlock(block: Block) {\n return html`${block.fields.map(field => {\n const scope = ['additional-fields', field.id].join('-').replace(/_/g, '-');\n\n const getValue = () => {\n try {\n const config = JSON.parse(this.form.additional_fields ?? '{}');\n return get(config, field.id) ?? config.default_value;\n } catch {\n return field.default_value;\n }\n };\n\n const setValue = (newValue: unknown) => {\n try {\n const config = JSON.parse(this.form.additional_fields ?? '{}');\n this.edit({ additional_fields: JSON.stringify(set(config, field.id, newValue)) });\n } catch {\n return '';\n }\n };\n\n type Option = { name: string; value: string };\n const options = (field as { options?: Option[] }).options;\n\n return html`\n ${field.type === 'checkbox'\n ? html`\n <foxy-internal-checkbox-group-control\n helper-text=${field.description ?? ''}\n label=\"\"\n class=\"-mb-s\"\n infer=${scope}\n .options=${[{ label: field.name, value: 'checked' }]}\n .getValue=${() => (getValue() ? ['checked'] : [])}\n .setValue=${(newValue: string[]) => {\n setValue(newValue.includes('checked'));\n }}\n >\n </foxy-internal-checkbox-group-control>\n `\n : field.type === 'select'\n ? html`\n <foxy-internal-select-control\n helper-text=${field.description ?? ''}\n label=${field.name}\n infer=${scope}\n .options=${options!.map(({ name, value }) => ({ label: name, value }))}\n .getValue=${getValue}\n .setValue=${setValue}\n >\n </foxy-internal-select-control>\n `\n : html`\n <foxy-internal-text-control\n helper-text=${field.description ?? ''}\n placeholder=${field.default_value \|\| this.t('default_additional_field_placeholder')}\n label=${field.name}\n infer=${scope}\n .getValue=${getValue}\n .setValue=${setValue}\n >\n </foxy-internal-text-control>\n `}\n `;\n })}`;\n }\n}\n"]}
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 { Block, Data } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { TabsElement } from '@vaadin/vaadin-tabs';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nimport has from 'lodash-es/has';\nimport get from 'lodash-es/get';\nimport set from 'lodash-es/set';\n\ntype PaymentMethod = {\n helper: AvailablePaymentMethods['values'][string];\n type: string;\n};\n\nconst NS = 'payments-api-payment-method-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/*\n Form element for the `fx:payment_method` resource of Payments API.\n \n _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n \n @element foxy-payments-api-payment-method-form\n * @since 1.21.0\n /\nexport class PaymentsApiPaymentMethodForm extends Base<Data> {\n static get defaultImageSrc(): string {\n return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='m29.3 14 14-14H32.1l-14 14h11.2Zm2.7 9.9 12-12V.7L30.62 14.1A2 2 0 0 1 32 16v7.9ZM13.31 44h11.18L44 24.5V13.3l-12 12V28a2 2 0 0 1-2 2h-2.69l-14 14Zm-1.41 0H.7l14-14h11.2l-14 14Zm14 0h11.2l6.9-6.9V25.9L25.9 44Zm12.6 0H44v-5.5L38.5 44Z'/%3E%3Cpath fill='%23fff' d='M30 28H14v-6h16v6Zm0-10v-2H14v2h16ZM0 43.3l13.4-13.4A2 2 0 0 1 12 28v-7.9L0 32.12V43.3Z'/%3E%3Cpath fill='%23fff' d='M16.7 14H14c-1.11 0-1.99.89-1.99 2v2.7L0 30.7V19.52L19.52 0H30.7l-14 14Zm1.4-14H6.92L0 6.92V18.1L18.1 0ZM5.5 0H0v5.5L5.5 0Z'/%3E%3C/svg%3E\";\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __tab: { attribute: false },\n getImageSrc: { attribute: false },\n };\n }\n\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ description: v }) => !v \|\| v.length <= 100 \|\| 'description:v8n_too_long',\n ({ type: v }) => !!v \|\| 'type:v8n_required',\n\n form => {\n const blocks = form.helper?.additional_fields?.blocks ?? [];\n let additionalFields: Record<string, unknown>;\n\n try {\n additionalFields = JSON.parse(form.additional_fields ?? '{}');\n } catch {\n additionalFields = {};\n }\n\n for (const block of blocks) {\n for (const field of block.fields) {\n if ('optional' in (field as Record<string, unknown>)) {\n if (!(field as Record<string, unknown>).optional) {\n if (!has(additionalFields, field.id)) {\n if (field.type !== 'checkbox') {\n return 'additional-fields:v8n_invalid';\n }\n }\n }\n }\n }\n }\n\n return true;\n },\n ];\n }\n\n /* A function that returns a URL of a payment method icon based on the given type. */\n getImageSrc: ((type: string) => string) \| null = null;\n\n private readonly __availablePaymentMethodsLoaderId = 'availablePaymentMethodsLoader';\n\n private readonly __threeDSecureResponseGetValue = () => {\n return this.form.config_3d_secure?.endsWith('require_valid_response') ? ['valid_only'] : [];\n };\n\n private readonly __threeDSecureResponseSetValue = (newValue: string[]) => {\n const postfix = newValue.includes('valid_only') ? '_require_valid_response' : '';\n\n const config = this.form.config_3d_secure;\n const type = config?.startsWith('all_cards') ? 'all_cards' : 'maestro_only';\n\n this.edit({\n config_3d_secure: `${type}${postfix}` as Data['config_3d_secure'],\n });\n };\n\n private readonly __threeDSecureResponseOptions = [\n { value: 'valid_only', label: 'option_valid_only' },\n ];\n\n private readonly __threeDSecureToggleGetValue = () => {\n const config = this.form.config_3d_secure;\n\n if (config?.startsWith('all_cards')) return 'all_cards';\n if (config?.startsWith('maestro_only')) return 'maestro_only';\n\n return 'off';\n };\n\n private readonly __threeDSecureToggleSetValue = (\n newValue: 'off' \| 'all_cards' \| 'maestro_only'\n ) => {\n let newFormValue = '';\n\n if (newValue === 'all_cards' \|\| newValue === 'maestro_only') {\n if (this.form.config_3d_secure?.endsWith('require_valid_response')) {\n newFormValue = `${newValue}_require_valid_response`;\n } else {\n newFormValue = newValue;\n }\n }\n\n this.edit({ config_3d_secure: newFormValue as Data['config_3d_secure'] });\n };\n\n private readonly __threeDSecureToggleOptions = [\n { value: 'off', label: 'option_off' },\n { value: 'all_cards', label: 'option_all_cards' },\n { value: 'maestro_only', label: 'option_maestro_only' },\n ];\n\n private __tab = 0;\n\n get hiddenSelector(): BooleanSelector {\n return new BooleanSelector(`header:copy-json ${super.hiddenSelector}`.trimEnd());\n }\n\n renderHeader(...params: Parameters<InternalForm<Data>['renderHeader']>): TemplateResult {\n return html`\n <div>\n ${super.renderHeader(...params)}\n ${this.data?.type \|\| !this.form.type\n ? html``\n : html`\n <vaadin-button\n data-testid=\"select-another-button\"\n theme=\"tertiary-inline\"\n @click=${() => this.undo()}\n >\n <foxy-i18n infer=\"\" key=\"select_another_button_label\"></foxy-i18n>\n </vaadin-button>\n `}\n </div>\n `;\n }\n\n get headerTitleOptions(): Record<string, unknown> {\n return {\n context: this.form.type ? 'selected' : 'new',\n name: this.form.helper?.name,\n };\n }\n\n get headerSubtitleOptions(): Record<string, unknown> {\n if (this.href) {\n const vId = getResourceId(this.href) as string;\n const id = this.headerCopyIdValue;\n if (vId.startsWith('R')) return { context: 'regular', id };\n return { context: 'hosted', id };\n }\n\n return {};\n }\n\n get headerCopyIdValue(): string \| number {\n if (this.href) {\n const id = getResourceId(this.href) as string;\n return id.startsWith('R') ? id.slice(1) : id.slice(1).split('C')[0];\n } else {\n return '';\n }\n }\n\n renderBody(): TemplateResult {\n const paymentMethodsLoader = html`\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__availablePaymentMethodsHref)}\n id=${this.__availablePaymentMethodsLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n `;\n\n return html`${this.renderHeader()}${this.form.type\n ? this.__renderPaymentMethodConfig()\n : this.__renderPaymentMethodSelector()}${paymentMethodsLoader}`;\n }\n\n private get __groupedAvailablePaymentMethods() {\n return Object.entries(this.__availablePaymentMethods ?? {})\n .sort((a, b) => a[0].localeCompare(b[0], 'en'))\n .reduce((groups, [type, helper]) => {\n if (helper.is_deprecated) return groups;\n\n const firstChar = type.charAt(0).toUpperCase();\n const isSpecialCharacter = !/\\w/.test(firstChar);\n const name = isSpecialCharacter ? '#' : firstChar;\n const group = groups.find(group => group.name === name);\n\n if (group) {\n group.items.push({ type, helper });\n } else {\n groups.push({ name, items: [{ type, helper }] });\n }\n\n return groups;\n }, [] as { name: string; items: PaymentMethod[] }[]);\n }\n\n private get __availablePaymentMethodsLoader() {\n type Loader = NucleonElement<AvailablePaymentMethods>;\n return this.renderRoot.querySelector<Loader>(`#${this.__availablePaymentMethodsLoaderId}`);\n }\n\n private get __availablePaymentMethodsHref() {\n try {\n const presetIdRegex = /\\/payment_presets\\/(?<presetId>.+)\\//;\n const pathname = new URL(this.href \|\| this.parent).pathname;\n const presetId = presetIdRegex.exec(pathname)!.groups!.presetId;\n const url = new URL(\n `/payment_presets/${presetId}/available_payment_methods`,\n this.href \|\| this.parent\n );\n\n return url.toString();\n } catch {\n // ignore\n }\n }\n\n private get __availablePaymentMethods() {\n return this.__availablePaymentMethodsLoader?.data?.values;\n }\n\n private get __liveBlocks() {\n return this.form.helper?.additional_fields?.blocks.filter(block => block.is_live) ?? [];\n }\n\n private get __testBlocks() {\n return this.form.helper?.additional_fields?.blocks.filter(block => !block.is_live) ?? [];\n }\n\n private __renderPaymentMethodSelector() {\n const loader = this.__availablePaymentMethodsLoader;\n\n if (!loader?.data) {\n return html`\n <foxy-spinner infer=\"list-spinner\" state=${loader?.in('fail') ? 'error' : 'busy'}>\n </foxy-spinner>\n `;\n }\n\n return html`\n <div>\n <section data-testid=\"select-method-list\" class=\"-mt-m\">\n ${this.__groupedAvailablePaymentMethods.map(({ name, items }) => {\n return html`\n <p class=\"font-medium text-tertiary py-m\">${name}</p>\n <ul class=\"grid grid-cols-2 gap-m\">\n ${items.map(item => html`<li>${this.__renderPaymentMethodButton(item)}</li>`)}\n </ul>\n `;\n })}\n </section>\n </div>\n `;\n }\n\n private __renderPaymentMethodConfig() {\n return html`\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 data-testid=\"tab-content\"\n class=\"grid grid-cols-2 gap-m transition-transform transform duration-300\"\n style=${classMap({\n 'width: calc(200% + var(--lumo-space-m));': true,\n '--tw-translate-x: 0;': this.__tab === 0,\n '--tw-translate-x: calc(-50% - (var(--lumo-space-m) / 2));': this.__tab !== 0,\n })}\n >\n ${['live', 'test'].map((type, index) => {\n const prefix = index === 0 ? '' : `${type}-`;\n const blocks = index === 0 ? this.__liveBlocks : this.__testBlocks;\n\n return html`\n <div\n class=${classMap({\n 'grid grid-cols-1 gap-m p-m transition-opacity duration-300': true,\n 'opacity-100': this.__tab === index,\n 'opacity-0': this.__tab !== index,\n })}\n >\n ${this.form.helper?.id_description\n ? html`\n <foxy-internal-text-control\n placeholder=${this.t('default_additional_field_placeholder')}\n helper-text=\"\"\n label=${this.form.helper.id_description}\n infer=\"${prefix}account-id\"\n >\n </foxy-internal-text-control>\n `\n : ''}\n ${this.form.helper?.third_party_key_description\n ? html`\n <foxy-internal-text-control\n placeholder=${this.t('default_additional_field_placeholder')}\n helper-text=\"\"\n label=${this.form.helper.third_party_key_description}\n infer=\"${prefix}third-party-key\"\n >\n </foxy-internal-text-control>\n `\n : ''}\n ${this.form.helper?.key_description\n ? html`\n <foxy-internal-text-control\n placeholder=${this.t('default_additional_field_placeholder')}\n helper-text=\"\"\n label=${this.form.helper.key_description}\n infer=\"${prefix}account-key\"\n >\n </foxy-internal-text-control>\n `\n : ''}\n ${blocks.map(block => this.__renderBlock(block))}\n </div>\n `;\n })}\n </div>\n </div>\n </div>\n\n <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n\n ${this.form.helper?.supports_3d_secure\n ? html`\n <foxy-internal-radio-group-control\n infer=\"three-d-secure-toggle\"\n class=\"-mb-s\"\n .getValue=${this.__threeDSecureToggleGetValue}\n .setValue=${this.__threeDSecureToggleSetValue}\n .options=${this.__threeDSecureToggleOptions}\n >\n </foxy-internal-radio-group-control>\n\n ${this.form.config_3d_secure\n ? html`\n <foxy-internal-checkbox-group-control\n infer=\"three-d-secure-response\"\n class=\"-mb-s\"\n .getValue=${this.__threeDSecureResponseGetValue}\n .setValue=${this.__threeDSecureResponseSetValue}\n .options=${this.__threeDSecureResponseOptions}\n >\n </foxy-internal-checkbox-group-control>\n `\n : ''}\n `\n : ''}\n ${super.renderBody()}\n `;\n }\n\n private __renderPaymentMethodButton({ type, helper }: PaymentMethod) {\n const defaultSrc = PaymentsApiPaymentMethodForm.defaultImageSrc;\n const src = this.getImageSrc?.(type) ?? defaultSrc;\n const onError = (evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc);\n\n return html`\n <button\n class=${classMap({\n 'relative w-full block text-left p-s rounded bg-contrast-5 overflow-hidden': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'transition-colors hover-bg-contrast-10': !helper.conflict,\n 'cursor-default': !!helper.conflict,\n })}\n ?disabled=${!!helper.conflict}\n title=${helper.conflict ? this.t('conflict_message', helper.conflict) : ''}\n @click=${() => this.edit({ type, helper })}\n >\n <img\n class=\"absolute top-0 left-0 w-1-2 h-full object-cover bg-center filter saturate-200 blur-3xl\"\n style=\"transform: translate3d(0, 0, 0)\"\n src=${src}\n alt=\"\"\n ?hidden=${!!helper.conflict}\n @error=${onError}\n />\n\n <figure class=\"relative flex flex-col gap-m\">\n <img\n class=${classMap({\n 'h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs': true,\n 'filter grayscale': !!helper.conflict,\n })}\n src=${src}\n alt=\"\"\n @error=${onError}\n />\n\n <figcaption\n class=${classMap({\n 'min-w-0 flex-1 truncate leading-s': true,\n 'text-disabled': !!helper.conflict,\n })}\n >\n <div class=\"font-medium\">${helper.name}&ZeroWidthSpace;</div>\n <div class=\"text-xs ${helper.conflict ? '' : 'text-secondary'}\">${type}</div>\n </figcaption>\n </figure>\n </button>\n `;\n }\n\n private __renderBlock(block: Block) {\n return html`${block.fields.map(field => {\n const scope = ['additional-fields', field.id].join('-').replace(/_/g, '-');\n\n const getValue = () => {\n try {\n const config = JSON.parse(this.form.additional_fields ?? '{}');\n return get(config, field.id) ?? config.default_value;\n } catch {\n return field.default_value;\n }\n };\n\n const setValue = (newValue: unknown) => {\n try {\n const config = JSON.parse(this.form.additional_fields ?? '{}');\n this.edit({ additional_fields: JSON.stringify(set(config, field.id, newValue)) });\n } catch {\n return '';\n }\n };\n\n type Option = { name: string; value: string };\n const options = (field as { options?: Option[] }).options;\n\n return html`\n ${field.type === 'checkbox'\n ? html`\n <foxy-internal-checkbox-group-control\n helper-text=${field.description ?? ''}\n label=\"\"\n class=\"-mb-s\"\n infer=${scope}\n .options=${[{ label: field.name, value: 'checked' }]}\n .getValue=${() => (getValue() ? ['checked'] : [])}\n .setValue=${(newValue: string[]) => {\n setValue(newValue.includes('checked'));\n }}\n >\n </foxy-internal-checkbox-group-control>\n `\n : field.type === 'select'\n ? html`\n <foxy-internal-select-control\n helper-text=${field.description ?? ''}\n label=${field.name}\n infer=${scope}\n .options=${options!.map(({ name, value }) => ({ label: name, value }))}\n .getValue=${getValue}\n .setValue=${setValue}\n >\n </foxy-internal-select-control>\n `\n : html`\n <foxy-internal-text-control\n helper-text=${field.description ?? ''}\n placeholder=${field.default_value \|\| this.t('default_additional_field_placeholder')}\n label=${field.name}\n infer=${scope}\n .getValue=${getValue}\n .setValue=${setValue}\n >\n </foxy-internal-text-control>\n `}\n `;\n })}`;\n }\n}\n"]}

package/dist/elements/public/PaymentsApiPaymentMethodForm/index.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import '../../internal/InternalSelectControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 import '../NucleonElement/index';
+import '../Spinner/index';
 import '../I18n/index';
 import { PaymentsApiPaymentMethodForm } from './PaymentsApiPaymentMethodForm';
 export { PaymentsApiPaymentMethodForm };

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

@@ -7,6 +7,7 @@ import "../../internal/InternalSelectControl/index.js";
 import "../../internal/InternalTextControl/index.js";
 import "../../internal/InternalForm/index.js";
 import "../NucleonElement/index.js";
+import "../Spinner/index.js";
 import "../I18n/index.js";
 import { PaymentsApiPaymentMethodForm } from "./PaymentsApiPaymentMethodForm.js";
 customElements.define('foxy-payments-api-payment-method-form', PaymentsApiPaymentMethodForm);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAE7B,8DAA2D;AAC3D,8DAA2D;AAC3D,2DAAwD;AACxD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,oCAAiC;AACjC,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-button';\nimport '@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 '../NucleonElement/index';\nimport '../I18n/index';\n\nimport { PaymentsApiPaymentMethodForm } from './PaymentsApiPaymentMethodForm';\n\ncustomElements.define('foxy-payments-api-payment-method-form', PaymentsApiPaymentMethodForm);\n\nexport { PaymentsApiPaymentMethodForm };\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAE7B,8DAA2D;AAC3D,8DAA2D;AAC3D,2DAAwD;AACxD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,oCAAiC;AACjC,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 '@vaadin/vaadin-button';\nimport '@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 '../NucleonElement/index';\nimport '../Spinner/index';\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 CHANGED Viewed

@@ -1,32 +1,3 @@
-import type { PaymentsApiPaymentMethodForm } from './PaymentsApiPaymentMethodForm';
 import type { PaymentMethod } from '../PaymentsApi/api/types';
-import type { Renderer } from '../../../mixins/configurable';
 export declare type Data = PaymentMethod;
 export declare type Block = NonNullable<Data['helper']['additional_fields']>['blocks'][number];
-export declare type Templates = {
-    'description:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'description:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'account-id:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'account-id:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'account-key:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'account-key:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'third-party-key:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'third-party-key:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'test-account-id:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'test-account-id:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'test-account-key:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'test-account-key:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'test-third-party-key:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'test-third-party-key:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'three-d-secure-toggle:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'three-d-secure-toggle:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'three-d-secure-response:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'three-d-secure-response:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'timestamps:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'timestamps:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'create:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'create:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'delete:before'?: Renderer<PaymentsApiPaymentMethodForm>;
-    'delete:after'?: Renderer<PaymentsApiPaymentMethodForm>;
-    [key: string]: Renderer<PaymentsApiPaymentMethodForm> | undefined;
-};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ~~PaymentsApiPaymentMethodForm } from './PaymentsApiPaymentMethodForm';\nimport type {~~ PaymentMethod } from '../PaymentsApi/api/types';\~~nimport type { Renderer } from '../../../mixins/configurable';\~~n\nexport type Data = PaymentMethod;\n\nexport type Block = NonNullable<Data['helper']['additional_fields']>['blocks'][number];\n\nexport type Templates = {\n 'description:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'description:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'account-id:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'account-id:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'account-key:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'account-key:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'third-party-key:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'third-party-key:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'test-account-id:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'test-account-id:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'test-account-key:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'test-account-key:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'test-third-party-key:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'test-third-party-key:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'three-d-secure-toggle:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'three-d-secure-toggle:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'three-d-secure-response:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'three-d-secure-response:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'timestamps:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'timestamps:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'create:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'create:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'delete:before'?: Renderer<PaymentsApiPaymentMethodForm>;\n 'delete:after'?: Renderer<PaymentsApiPaymentMethodForm>;\n\n [key: string]: Renderer<PaymentsApiPaymentMethodForm> \| undefined;\n};\n"]}
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 CHANGED Viewed

@@ -12,12 +12,6 @@ declare const Base: typeof TwoLineCard & import("lit-element").Constructor<impor
  * 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
  */

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

@@ -12,12 +12,6 @@ const Base = TranslatableMixin(TwoLineCard, NS);
  * 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
  */

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

	@@ -1 +1 @@
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,UAAU;QACR,OAAO,KAAK,CAAC,UAAU,CAAC;YACtB,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 renderBody(): TemplateResult {\n return super.renderBody({\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"]}
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;;;;;;;;;;GAUG;AACH,MAAM,OAAO,4BAA6B,SAAQ,IAAU;IAC1D,UAAU;QACR,OAAO,KAAK,CAAC,UAAU,CAAC;YACtB,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 @element foxy-payments-api-payment-preset-card\n * @since 1.21.0\n */\nexport class PaymentsApiPaymentPresetCard extends Base<Data> {\n renderBody(): TemplateResult {\n return super.renderBody({\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/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import type { PropertyDeclarations } from 'lit-element';
-import type { Data, Templates } from './types';
+import type { Data } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
@@ -14,30 +15,6 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  * 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 is-live:before
- * @slot is-live:after
- *
- * @slot is-purchase-order-enabled:before
- * @slot is-purchase-order-enabled:after
- *
- * @slot payment-methods:before
- * @slot payment-methods:after
- *
- * @slot fraud-protections:before
- * @slot fraud-protections:after
- *
- * @slot timestamps:before
- * @slot timestamps:after
- *
- * @slot create:before
- * @slot create:after
- *
- * @slot delete:before
- * @slot delete:after
- *
  * @element foxy-payments-api-payment-preset-form
  * @since 1.21.0
  */
@@ -48,14 +25,13 @@ export declare class PaymentsApiPaymentPresetForm extends Base<Data> {
     getFraudProtectionImageSrc: ((type: string) => string) | null;
     /** A function that returns image URL for given payment method `type`. */
     getPaymentMethodImageSrc: ((type: string) => string) | null;
-    /** Template render functions mapped to their name. */
-    templates: Templates;
     private static readonly __isPOEnabledOptions;
     private static readonly __isLiveOptions;
     private __getIsPOEnabledValue;
     private __setIsPOEnabledValue;
     private __getIsLiveValue;
     private __setIsLiveValue;
+    get hiddenSelector(): BooleanSelector;
     renderBody(): TemplateResult;
 }
 export {};

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

@@ -1,4 +1,5 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { html } from 'lit-html';
 const NS = 'payments-api-payment-preset-form';
@@ -11,30 +12,6 @@ const Base = TranslatableMixin(InternalForm, NS);
  * 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 is-live:before
- * @slot is-live:after
- *
- * @slot is-purchase-order-enabled:before
- * @slot is-purchase-order-enabled:after
- *
- * @slot payment-methods:before
- * @slot payment-methods:after
- *
- * @slot fraud-protections:before
- * @slot fraud-protections:after
- *
- * @slot timestamps:before
- * @slot timestamps:after
- *
- * @slot create:before
- * @slot create:after
- *
- * @slot delete:before
- * @slot delete:after
- *
  * @element foxy-payments-api-payment-preset-form
  * @since 1.21.0
  */
@@ -45,8 +22,6 @@ export class PaymentsApiPaymentPresetForm extends Base {
         this.getFraudProtectionImageSrc = null;
         /** A function that returns image URL for given payment method `type`. */
         this.getPaymentMethodImageSrc = null;
-        /** Template render functions mapped to their name. */
-        this.templates = {};
         this.__getIsPOEnabledValue = () => {
             return this.form.is_purchase_order_enabled ? ['true'] : [];
         };
@@ -73,9 +48,14 @@ export class PaymentsApiPaymentPresetForm extends Base {
             ({ description: v }) => (v && v.length <= 100) || 'description:v8n_too_long',
         ];
     }
+    get hiddenSelector() {
+        return new BooleanSelector(`header:copy-json ${super.hiddenSelector}`.trimEnd());
+    }
     renderBody() {
         const constructor = this.constructor;
         return html `
+      ${this.renderHeader()}
       <foxy-internal-text-control infer="description"></foxy-internal-text-control>
       <div class="-mb-s">
@@ -131,6 +111,7 @@ export class PaymentsApiPaymentPresetForm extends Base {
               infer="fraud-protections"
               first=${this.data._links['fx:fraud_protections'].href}
               limit="5"
+              alert
               .item=${(ctx) => html `
                 <foxy-payments-api-fraud-protection-card
                   parent=${ctx.parent}