@foxy.io/elements 1.14.0-beta.8 → 1.14.2

package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.js

@@ -101,16 +101,11 @@ export class TemplateConfigForm extends Base {
     }
     render() {
         var _a, _b;
-        const hidden = this.hiddenControls;
+        const hidden = this.hiddenSelector;
         const json = this.form.json ? JSON.parse(this.form.json) : getDefaultJSON();
         return html `
       <div class="relative" aria-busy=${this.in('busy')} aria-live="polite">
-        <div
-          class=${classMap({
-            'space-y-l transition-opacity': true,
-            'opacity-50': !this.in('idle'),
-        })}
-        >
+        <div class="space-y-l">
           ${hidden.matches('cart-type', true) ? '' : this.__renderCartType(json)}
           ${hidden.matches('foxycomplete', true) ? '' : this.__renderFoxycomplete(json)}
           ${hidden.matches('locations', true) ? '' : this.__renderLocations(json)}
@@ -149,9 +144,9 @@ export class TemplateConfigForm extends Base {
     __renderCartType(json) {
         const { lang, ns } = this;
         const items = ['default', 'fullpage', 'custom'];
-        const isDisabled = this.disabledSelector.matches('cart-type', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('cart-type', true);
         return html `
-      <div>
+      <div data-testid="cart-type">
         ${this.renderTemplateOrSlot('cart-type:before')}
 
         <x-group frame>
@@ -165,6 +160,7 @@ export class TemplateConfigForm extends Base {
           </foxy-i18n>
 
           <x-choice
+            data-testid="cart-type-choice"
             .value=${json.cart_type}
             .items=${items}
             ?disabled=${isDisabled}
@@ -196,32 +192,27 @@ export class TemplateConfigForm extends Base {
     }
     __renderFoxycomplete(json) {
         const { lang, ns } = this;
-        const isDisabled = this.disabledSelector.matches('foxycomplete', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('foxycomplete', true);
         const isReadonly = this.readonlySelector.matches('foxycomplete', true);
+        const config = json.foxycomplete;
         const items = ['combobox', 'search', 'disabled'];
-        const value = json.foxycomplete.usage === 'none'
-            ? 'disabled'
-            : json.foxycomplete.show_combobox
-                ? 'combobox'
-                : 'search';
-        const renderFlagsCheckbox = () => html `
+        const value = config.usage === 'none' ? 'disabled' : config.show_combobox ? 'combobox' : 'search';
+        const flagsCheckbox = html `
       <x-checkbox
+        data-testid="foxycomplete-flags-check"
         ?disabled=${isDisabled}
         ?readonly=${isReadonly}
-        ?checked=${json.foxycomplete.show_flags}
+        ?checked=${config.show_flags}
         @change=${(evt) => {
-            const newConfig = {
-                ...json.foxycomplete,
-                show_flags: evt.detail,
-            };
-            this.edit({ json: JSON.stringify({ ...json, foxycomplete: newConfig }) });
+            config.show_flags = evt.detail;
+            this.edit({ json: JSON.stringify(json) });
         }}
       >
         <foxy-i18n lang=${lang} key="show_country_flags" ns=${ns}></foxy-i18n>
       </x-checkbox>
     `;
         return html `
-      <div>
+      <div data-testid="foxycomplete">
         ${this.renderTemplateOrSlot('foxycomplete:before')}
 
         <x-group frame>
@@ -235,6 +226,7 @@ export class TemplateConfigForm extends Base {
           </foxy-i18n>
 
           <x-choice
+            data-testid="foxycomplete-choice"
             .value=${value}
             .items=${items}
             ?disabled=${isDisabled}
@@ -242,12 +234,9 @@ export class TemplateConfigForm extends Base {
             @change=${(evt) => {
             if (!(evt instanceof ChoiceChangeEvent))
                 return;
-            const newConfig = {
-                ...json.foxycomplete,
-                usage: evt.detail === 'disabled' ? 'none' : 'required',
-                show_combobox: evt.detail === 'combobox',
-            };
-            this.edit({ json: JSON.stringify({ ...json, foxycomplete: newConfig }) });
+            config.usage = evt.detail === 'disabled' ? 'none' : 'required';
+            config.show_combobox = evt.detail === 'combobox';
+            this.edit({ json: JSON.stringify(json) });
         }}
           >
             ${items.map(item => {
@@ -271,17 +260,15 @@ export class TemplateConfigForm extends Base {
             const field = action === 'open' ? 'combobox_open' : 'combobox_close';
             return html `
                     <vaadin-text-field
+                      data-testid="foxycomplete-${action}-icon"
                       label=${this.t(`${action}_icon`)}
-                      .value=${json.foxycomplete[field]}
+                      .value=${config[field]}
                       ?disabled=${isDisabled}
                       ?readonly=${isReadonly}
+                      @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
                       @input=${(evt) => {
-                const target = evt.currentTarget;
-                const newConfig = {
-                    ...json.foxycomplete,
-                    [field]: target.value,
-                };
-                this.edit({ json: JSON.stringify({ ...json, foxycomplete: newConfig }) });
+                config[field] = evt.currentTarget.value;
+                this.edit({ json: JSON.stringify(json) });
             }}
                     >
                     </vaadin-text-field>
@@ -289,24 +276,21 @@ export class TemplateConfigForm extends Base {
         })}
               </div>
 
-              ${renderFlagsCheckbox()}
+              ${flagsCheckbox}
             </div>
 
-            <div slot="search" class="pb-s" ?hidden=${value !== 'search'}>
-              ${renderFlagsCheckbox()}
-            </div>
+            <div slot="search" class="pb-s" ?hidden=${value !== 'search'}>${flagsCheckbox}</div>
           </x-choice>
 
           <div class="border-t border-contrast-10 p-m">
             <x-checkbox
+              data-testid="foxycomplete-lookup-check"
               ?disabled=${isDisabled}
               ?readonly=${isReadonly}
               ?checked=${json.postal_code_lookup.usage === 'enabled'}
               @change=${(evt) => {
-            const newConfig = {
-                usage: evt.detail ? 'enabled' : 'none',
-            };
-            this.edit({ json: JSON.stringify({ ...json, postal_code_lookup: newConfig }) });
+            json.postal_code_lookup.usage = evt.detail ? 'enabled' : 'none';
+            this.edit({ json: JSON.stringify(json) });
         }}
             >
               <foxy-i18n lang=${lang} key="enable_postcode_lookup" ns=${ns}></foxy-i18n>
@@ -321,7 +305,7 @@ export class TemplateConfigForm extends Base {
     __renderLocations(json) {
         const { lang, ns } = this;
         const config = json.location_filtering;
-        const isDisabled = this.disabledSelector.matches('locations', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('locations', true);
         const isReadonly = this.readonlySelector.matches('locations', true);
         const shippingChoice = config.shipping_filter_type === 'blacklist' ? 'block' : 'allow';
         const billingChoice = config.usage === 'both'
@@ -352,81 +336,85 @@ export class TemplateConfigForm extends Base {
             }
         };
         return html `
-      ${this.renderTemplateOrSlot('locations:before')}
-
-      <x-group frame>
-        <foxy-i18n
-          class=${isDisabled ? 'text-disabled' : ''}
-          slot="header"
-          lang=${lang}
-          key="location_plural"
-          ns=${ns}
-        >
-        </foxy-i18n>
+      <div data-testid="locations">
+        ${this.renderTemplateOrSlot('locations:before')}
 
-        <div class="grid sm-grid-cols-2 bg-contrast-10" style="gap: 1px">
-          <x-group class="bg-base pt-m">
-            <foxy-i18n
-              class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
-              slot="header"
-              lang=${lang}
-              key="shipping"
-              ns=${ns}
-            >
-            </foxy-i18n>
+        <x-group frame>
+          <foxy-i18n
+            class=${isDisabled ? 'text-disabled' : ''}
+            slot="header"
+            lang=${lang}
+            key="location_plural"
+            ns=${ns}
+          >
+          </foxy-i18n>
 
-            <x-choice
-              .items=${['allow', 'block']}
-              .value=${shippingChoice}
-              ?disabled=${isDisabled}
-              ?readonly=${isReadonly}
-              @change=${(evt) => {
+          <div class="grid sm-grid-cols-2 bg-contrast-10" style="gap: 1px">
+            <x-group class="bg-base pt-m">
+              <foxy-i18n
+                class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
+                slot="header"
+                lang=${lang}
+                key="shipping"
+                ns=${ns}
+              >
+              </foxy-i18n>
+
+              <x-choice
+                data-testid="locations-shipping-choice"
+                .items=${['allow', 'block']}
+                .value=${shippingChoice}
+                ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
+                @change=${(evt) => {
             if (config.usage !== 'both')
                 config.usage = 'independent';
             config.shipping_filter_type = evt.detail === 'block' ? 'blacklist' : 'whitelist';
             normalize();
             this.edit({ json: JSON.stringify(json) });
         }}
-            >
-              <foxy-i18n slot="allow-label" lang=${lang} key="allowlist" ns=${ns}></foxy-i18n>
-              <foxy-i18n slot="block-label" lang=${lang} key="blocklist" ns=${ns}></foxy-i18n>
-
-              <x-countries-list
-                countries=${JSON.stringify(config.shipping_filter_values)}
-                regions=${this.regions}
-                class="mb-m"
-                href=${this.countries}
-                slot=${shippingChoice}
-                lang=${lang}
-                ns=${ns}
-                ?disabled=${isDisabled}
-                ?readonly=${isReadonly}
-                @update:countries=${(evt) => {
+              >
+                <foxy-i18n slot="allow-label" lang=${lang} key="allowlist" ns=${ns}></foxy-i18n>
+                <foxy-i18n slot="block-label" lang=${lang} key="blocklist" ns=${ns}></foxy-i18n>
+
+                <x-countries-list
+                  data-testid="locations-shipping-list"
+                  countries=${JSON.stringify(config.shipping_filter_values)}
+                  regions=${this.regions}
+                  class="mb-m"
+                  href=${this.countries}
+                  slot=${shippingChoice}
+                  lang=${lang}
+                  ns=${ns}
+                  ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
+                  @update:countries=${(evt) => {
             config.shipping_filter_values = evt.currentTarget.countries;
             normalize();
             this.edit({ json: JSON.stringify(json) });
         }}
-              >
-              </x-countries-list>
-            </x-choice>
-          </x-group>
+                >
+                </x-countries-list>
+              </x-choice>
+            </x-group>
 
-          <x-group class="bg-base pt-m">
-            <foxy-i18n
-              class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
-              slot="header"
-              lang=${lang}
-              key="billing"
-              ns=${ns}
-            >
-            </foxy-i18n>
+            <x-group class="bg-base pt-m">
+              <foxy-i18n
+                class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
+                slot="header"
+                lang=${lang}
+                key="billing"
+                ns=${ns}
+              >
+              </foxy-i18n>
 
-            <x-choice
-              .items=${['allow', 'block', 'copy']}
-              .value=${billingChoice}
-              ?disabled=${isDisabled}
-              ?readonly=${isReadonly}
-              @change=${(evt) => {
+              <x-choice
+                data-testid="locations-billing-choice"
+                .items=${['allow', 'block', 'copy']}
+                .value=${billingChoice}
+                ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
+                @change=${(evt) => {
             if (evt.detail === 'copy') {
                 config.usage = 'both';
             }
@@ -437,35 +425,38 @@ export class TemplateConfigForm extends Base {
             normalize();
             this.edit({ json: JSON.stringify(json) });
         }}
-            >
-              <foxy-i18n slot="allow-label" lang=${lang} key="allowlist" ns=${ns}></foxy-i18n>
-              <foxy-i18n slot="block-label" lang=${lang} key="blocklist" ns=${ns}></foxy-i18n>
-              <foxy-i18n slot="copy-label" lang=${lang} key="same_as_shipping" ns=${ns}></foxy-i18n>
-
-              <x-countries-list
-                countries=${JSON.stringify(config.billing_filter_values)}
-                regions=${this.regions}
-                class="mb-m"
-                href=${this.countries}
-                slot=${billingChoice}
-                lang=${lang}
-                ns=${ns}
-                ?disabled=${isDisabled}
-                ?readonly=${isReadonly}
-                ?hidden=${billingChoice === 'copy'}
-                @update:countries=${(evt) => {
+              >
+                <foxy-i18n slot="allow-label" lang=${lang} key="allowlist" ns=${ns}></foxy-i18n>
+                <foxy-i18n slot="block-label" lang=${lang} key="blocklist" ns=${ns}></foxy-i18n>
+                <foxy-i18n slot="copy-label" lang=${lang} key="same_as_shipping" ns=${ns}>
+                </foxy-i18n>
+
+                <x-countries-list
+                  data-testid="locations-billing-list"
+                  countries=${JSON.stringify(config.billing_filter_values)}
+                  regions=${this.regions}
+                  class="mb-m"
+                  href=${this.countries}
+                  slot=${billingChoice}
+                  lang=${lang}
+                  ns=${ns}
+                  ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
+                  ?hidden=${billingChoice === 'copy'}
+                  @update:countries=${(evt) => {
             config.billing_filter_values = evt.currentTarget.countries;
             normalize();
             this.edit({ json: JSON.stringify(json) });
         }}
-              >
-              </x-countries-list>
-            </x-choice>
-          </x-group>
-        </div>
-      </x-group>
+                >
+                </x-countries-list>
+              </x-choice>
+            </x-group>
+          </div>
+        </x-group>
 
-      ${this.renderTemplateOrSlot('locations:after')}
+        ${this.renderTemplateOrSlot('locations:after')}
+      </div>
     `;
     }
     __renderHiddenFields(json) {
@@ -473,7 +464,7 @@ export class TemplateConfigForm extends Base {
         const suggestions = [];
         const fields = [];
         const config = json.cart_display_config;
-        const isDisabled = this.disabledSelector.matches('hidden-fields', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('hidden-fields', true);
         const isReadonly = this.readonlySelector.matches('hidden-fields', true);
         for (const key in config) {
             if (!key.startsWith('show_'))
@@ -499,8 +490,9 @@ export class TemplateConfigForm extends Base {
         };
         const radius = 'calc(var(--lumo-border-radius-l) / 1.2)';
         const inputRadius = fields.length === 0 ? [radius] : ['0', '0', radius, radius];
+        const isAddButtonDisabled = isDisabled || !this.__addHiddenFieldInputValue;
         return html `
-      <div>
+      <div data-testid="hidden-fields">
         ${this.renderTemplateOrSlot('hidden-fields:before')}
 
         <x-group frame>
@@ -513,7 +505,7 @@ export class TemplateConfigForm extends Base {
           >
           </foxy-i18n>
 
-          <div class="divide-y divide-contrast-10">
+          <div class="divide-y divide-contrast-10" data-testid="hidden-fields-list">
             ${fields.map(field => {
             return html `
                 <div
@@ -528,6 +520,7 @@ export class TemplateConfigForm extends Base {
                 : html `<span>${field}</span>`}
 
                   <button
+                    aria-label=${this.t('delete')}
                     class=${classMap({
                 'w-xs h-xs rounded-full transition-colors': true,
                 'hover-bg-error-10 hover-text-error': !isDisabled,
@@ -555,6 +548,7 @@ export class TemplateConfigForm extends Base {
           </div>
 
           <div
+            data-testid="hidden-fields-new"
             style="border-radius: ${inputRadius.join(' ')}"
             class=${classMap({
             'h-m flex items-center ring-inset ring-primary-50 focus-within-ring-2': true,
@@ -569,6 +563,7 @@ export class TemplateConfigForm extends Base {
               list="hidden-fields-list"
               .value=${live(this.__addHiddenFieldInputValue)}
               ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
               @keydown=${(evt) => evt.key === 'Enter' && addField()}
               @input=${(evt) => {
             this.__addHiddenFieldInputValue = evt.currentTarget.value;
@@ -586,12 +581,12 @@ export class TemplateConfigForm extends Base {
               class=${classMap({
             'w-xs h-xs mr-xs flex-shrink-0 ring-inset ring-success-50': true,
             'flex items-center justify-center rounded-full transition-colors': true,
-            'bg-contrast-5 text-disabled cursor-default': !this.__addHiddenFieldInputValue,
-            'bg-success-10 text-success cursor-pointer': !!this.__addHiddenFieldInputValue,
-            'hover-bg-success hover-text-success-contrast': !!this.__addHiddenFieldInputValue,
-            'focus-outline-none focus-ring-2': !!this.__addHiddenFieldInputValue,
+            'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,
+            'bg-success-10 text-success cursor-pointer': !isAddButtonDisabled,
+            'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,
+            'focus-outline-none focus-ring-2': !isAddButtonDisabled,
         })}
-              ?disabled=${!this.__addHiddenFieldInputValue}
+              ?disabled=${isAddButtonDisabled}
               @click=${addField}
             >
               <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
@@ -605,7 +600,7 @@ export class TemplateConfigForm extends Base {
     }
     __renderCards(json) {
         const { lang, ns } = this;
-        const isDisabled = this.disabledSelector.matches('cards', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('cards', true);
         const isReadonly = this.readonlySelector.matches('cards', true);
         const config = json.supported_payment_cards;
         let skipForSaved;
@@ -633,7 +628,7 @@ export class TemplateConfigForm extends Base {
             visa: 'Visa',
         };
         return html `
-      <div>
+      <div data-testid="cards">
         ${this.renderTemplateOrSlot('cards:before')}
 
         <div class="space-y-xs">
@@ -681,16 +676,17 @@ export class TemplateConfigForm extends Base {
                         type="checkbox"
                         class="sr-only"
                         ?disabled=${isDisabled}
+                        ?readonly=${isReadonly}
                         ?checked=${isChecked}
                         @change=${(evt) => {
                 if (isReadonly)
                     return evt.preventDefault();
                 evt.stopPropagation();
-                if (isChecked) {
-                    config.splice(config.indexOf(type), 1);
+                if (evt.currentTarget.checked) {
+                    config.push(type);
                 }
                 else {
-                    config.push(type);
+                    config.splice(config.indexOf(type), 1);
                 }
                 this.edit({ json: JSON.stringify(json) });
             }}
@@ -703,6 +699,7 @@ export class TemplateConfigForm extends Base {
 
             <div class="flex flex-wrap p-s border-t border-contrast-10">
               <x-checkbox
+                data-testid="cards-saved-check"
                 class="m-s"
                 ?disabled=${isDisabled || json.csc_requirements === 'new_cards_only'}
                 ?readonly=${isReadonly}
@@ -717,6 +714,7 @@ export class TemplateConfigForm extends Base {
               </x-checkbox>
 
               <x-checkbox
+                data-testid="cards-sso-check"
                 class="m-s"
                 ?disabled=${isDisabled}
                 ?readonly=${isReadonly}
@@ -751,10 +749,10 @@ export class TemplateConfigForm extends Base {
     }
     __renderCheckoutType(json) {
         const { lang, ns } = this;
-        const isDisabled = this.disabledSelector.matches('checkout-type', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('checkout-type', true);
         const isReadonly = this.readonlySelector.matches('checkout-type', true);
         return html `
-      <div>
+      <div data-testid="checkout-type">
         ${this.renderTemplateOrSlot('checkout-type:before')}
 
         <div class="space-y-xs">
@@ -769,6 +767,7 @@ export class TemplateConfigForm extends Base {
             </foxy-i18n>
 
             <x-choice
+              data-testid="checkout-type-choice"
               ?disabled=${isDisabled}
               ?readonly=${isReadonly}
               .items=${['default_account', 'default_guest', 'guest_only', 'account_only']}
@@ -800,11 +799,11 @@ export class TemplateConfigForm extends Base {
         const tosConfig = json.tos_checkbox_settings;
         const mailConfig = json.newsletter_subscribe;
         const sdtaConfig = json.eu_secure_data_transfer_consent;
-        const isDisabled = this.disabledSelector.matches('consent', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('consent', true);
         const isReadonly = this.readonlySelector.matches('consent', true);
         const dividerStyle = 'margin-left: calc(1.125rem + (var(--lumo-space-m) * 2))';
         return html `
-      <div>
+      <div data-testid="consent">
         ${this.renderTemplateOrSlot('consent:before')}
 
         <x-group frame>
@@ -818,6 +817,7 @@ export class TemplateConfigForm extends Base {
           </foxy-i18n>
 
           <x-checkbox
+            data-testid="consent-tos-check"
             ?disabled=${isDisabled}
             ?readonly=${isReadonly}
             ?checked=${tosConfig.usage === 'required' || tosConfig.usage === 'optional'}
@@ -843,6 +843,7 @@ export class TemplateConfigForm extends Base {
 
             <div slot="content" ?hidden=${tosConfig.usage === 'none'}>
               <vaadin-text-field
+                data-testid="consent-tos-field"
                 label=${this.t('location_url')}
                 class="w-full mt-m"
                 placeholder="https://example.com/path/to/tos"
@@ -859,8 +860,10 @@ export class TemplateConfigForm extends Base {
 
               <div class="flex flex-wrap -mx-s -mb-s mt-s">
                 <x-checkbox
+                  data-testid="consent-tos-require-check"
                   class="m-s"
                   ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
                   ?checked=${tosConfig.usage === 'required'}
                   @change=${(evt) => {
             tosConfig.usage = evt.detail ? 'required' : 'optional';
@@ -872,8 +875,10 @@ export class TemplateConfigForm extends Base {
                 </x-checkbox>
 
                 <x-checkbox
+                  data-testid="consent-tos-state-check"
                   class="m-s"
                   ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
                   ?checked=${tosConfig.initial_state === 'checked'}
                   @change=${(evt) => {
             tosConfig.initial_state = evt.detail ? 'checked' : 'unchecked';
@@ -890,6 +895,7 @@ export class TemplateConfigForm extends Base {
           <div style=${dividerStyle} class="border-b border-contrast-10"></div>
 
           <x-checkbox
+            data-testid="consent-mail-check"
             ?disabled=${isDisabled}
             ?readonly=${isReadonly}
             ?checked=${mailConfig.usage === 'required'}
@@ -914,6 +920,7 @@ export class TemplateConfigForm extends Base {
           <div style=${dividerStyle} class="border-b border-contrast-10"></div>
 
           <x-checkbox
+            data-testid="consent-sdta-check"
             ?disabled=${isDisabled}
             ?readonly=${isReadonly}
             ?checked=${sdtaConfig.usage === 'required'}
@@ -936,13 +943,13 @@ export class TemplateConfigForm extends Base {
           </x-checkbox>
         </x-group>
 
-        ${this.renderTemplateOrSlot('consent:before')}
+        ${this.renderTemplateOrSlot('consent:after')}
       </div>
     `;
     }
     __renderFields(json) {
         const { lang, ns } = this;
-        const isDisabled = this.disabledSelector.matches('fields', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('fields', true);
         const isReadonly = this.readonlySelector.matches('fields', true);
         const config = json.custom_checkout_field_requirements;
         const options = {
@@ -961,7 +968,7 @@ export class TemplateConfigForm extends Base {
             billing_country: ['default', 'optional', 'required', 'hidden'],
         };
         return html `
-      <div>
+      <div data-testid="fields">
         ${this.renderTemplateOrSlot('fields:before')}
 
         <x-group frame>
@@ -1013,6 +1020,7 @@ export class TemplateConfigForm extends Base {
             })}
                   >
                     <select
+                      data-testid="fields-${property}"
                       class=${classMap({
                 'h-s mr-xs text-right appearance-none bg-transparent font-medium': true,
                 'focus-outline-none cursor-pointer': !isDisabled,
@@ -1062,10 +1070,10 @@ export class TemplateConfigForm extends Base {
         const config = json.analytics_config;
         const sioConfig = config.segment_io;
         const gaConfig = config.google_analytics;
-        const isDisabled = this.disabledSelector.matches('google-analytics', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('google-analytics', true);
         const isReadonly = this.readonlySelector.matches('google-analytics', true);
         return html `
-      <div>
+      <div data-testid="google-analytics">
         ${this.renderTemplateOrSlot('google-analytics:before')}
 
         <x-group frame>
@@ -1073,6 +1081,7 @@ export class TemplateConfigForm extends Base {
 
           <div class="p-m space-y-m">
             <vaadin-text-field
+              data-testid="google-analytics-field"
               class="w-full"
               label=${this.t('ga_account_id')}
               placeholder="UA-1234567-1"
@@ -1086,11 +1095,13 @@ export class TemplateConfigForm extends Base {
             gaConfig.account_id = evt.currentTarget.value;
             gaConfig.usage = gaConfig.account_id ? 'required' : 'none';
             config.usage = gaConfig.account_id || sioConfig.account_id ? 'required' : 'none';
+            this.edit({ json: JSON.stringify(json) });
         }}
             >
             </vaadin-text-field>
 
             <x-checkbox
+              data-testid="google-analytics-check"
               ?disabled=${isDisabled}
               ?readonly=${isReadonly}
               ?checked=${gaConfig.include_on_site}
@@ -1121,10 +1132,10 @@ export class TemplateConfigForm extends Base {
         const config = json.analytics_config;
         const sioConfig = config.segment_io;
         const gaConfig = config.google_analytics;
-        const isDisabled = this.disabledSelector.matches('segment-io', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('segment-io', true);
         const isReadonly = this.readonlySelector.matches('segment-io', true);
         return html `
-      <div>
+      <div data-testid="segment-io">
         ${this.renderTemplateOrSlot('segment-io:before')}
 
         <x-group frame>
@@ -1132,6 +1143,7 @@ export class TemplateConfigForm extends Base {
 
           <div class="p-m">
             <vaadin-text-field
+              data-testid="segment-io-field"
               class="w-full"
               label=${this.t('sio_account_id')}
               placeholder="MY-WRITE-KEY"
@@ -1145,6 +1157,7 @@ export class TemplateConfigForm extends Base {
             sioConfig.account_id = evt.currentTarget.value;
             sioConfig.usage = sioConfig.account_id ? 'required' : 'none';
             config.usage = gaConfig.account_id || sioConfig.account_id ? 'required' : 'none';
+            this.edit({ json: JSON.stringify(json) });
         }}
             >
             </vaadin-text-field>
@@ -1158,10 +1171,10 @@ export class TemplateConfigForm extends Base {
     __renderTroubleshooting(json) {
         const { lang, ns } = this;
         const config = json.debug;
-        const isDisabled = this.disabledSelector.matches('troubleshooting', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('troubleshooting', true);
         const isReadonly = this.readonlySelector.matches('troubleshooting', true);
         return html `
-      <div>
+      <div data-testid="troubleshooting">
         ${this.renderTemplateOrSlot('troubleshooting:before')}
 
         <x-group frame>
@@ -1176,6 +1189,7 @@ export class TemplateConfigForm extends Base {
 
           <div class="p-m space-y-m">
             <x-checkbox
+              data-testid="troubleshooting-check"
               ?disabled=${isDisabled}
               ?readonly=${isReadonly}
               ?checked=${config.usage === 'required'}
@@ -1204,16 +1218,17 @@ export class TemplateConfigForm extends Base {
     }
     __renderCustomConfig(json) {
         return html `
-      <div>
+      <div data-testid="custom-config">
         ${this.renderTemplateOrSlot('custom-config:before')}
 
         <vaadin-text-area
+          data-testid="custom-config-field"
           class="w-full"
           label=${this.t('custom_config')}
           placeholder='{ "key": "value" }'
           helper-text=${this.t('custom_config_helper_text')}
           .value=${json.custom_config ? JSON.stringify(json.custom_config, null, 2) : ''}
-          ?disabled=${this.disabledSelector.matches('custom-config', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('custom-config', true)}
           ?readonly=${this.readonlySelector.matches('custom-config', true)}
           @input=${(evt) => {
             const input = evt.currentTarget;
@@ -1235,15 +1250,16 @@ export class TemplateConfigForm extends Base {
     }
     __renderHeader(json) {
         return html `
-      <div>
+      <div data-testid="header">
         ${this.renderTemplateOrSlot('header:before')}
 
         <vaadin-text-area
+          data-testid="header-field"
           class="w-full"
           label=${this.t('custom_header')}
           helper-text=${this.t('custom_header_helper_text')}
           .value=${json.custom_script_values.header}
-          ?disabled=${this.disabledSelector.matches('header', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('header', true)}
           ?readonly=${this.readonlySelector.matches('header', true)}
           @input=${(evt) => {
             const target = evt.currentTarget;
@@ -1262,16 +1278,17 @@ export class TemplateConfigForm extends Base {
     }
     __renderCustomFields(json) {
         return html `
-      <div>
+      <div data-testid="custom-fields">
         ${this.renderTemplateOrSlot('custom-fields:before')}
 
         <vaadin-text-area
+          data-testid="custom-fields-field"
           class="w-full"
           label=${this.t('custom_fields')}
           helper-text=${this.t('custom_fields_helper_text')}
-          .value=${json.custom_script_values.header}
-          ?disabled=${this.disabledSelector.matches('header', true)}
-          ?readonly=${this.readonlySelector.matches('header', true)}
+          .value=${json.custom_script_values.checkout_fields}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('custom-fields', true)}
+          ?readonly=${this.readonlySelector.matches('custom-fields', true)}
           @input=${(evt) => {
             const newValue = evt.currentTarget.value;
             json.custom_script_values.checkout_fields = newValue;
@@ -1286,15 +1303,16 @@ export class TemplateConfigForm extends Base {
     }
     __renderFooter(json) {
         return html `
-      <div>
+      <div data-testid="footer">
         ${this.renderTemplateOrSlot('footer:before')}
 
         <vaadin-text-area
+          data-testid="footer-field"
           class="w-full"
           label=${this.t('custom_footer')}
           helper-text=${this.t('custom_footer_helper_text')}
           .value=${json.custom_script_values.footer}
-          ?disabled=${this.disabledSelector.matches('footer', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('footer', true)}
           ?readonly=${this.readonlySelector.matches('footer', true)}
           @input=${(evt) => {
             const target = evt.currentTarget;