@foxy.io/elements 1.31.0-beta.1 → 1.31.0-beta.2

package/dist/elements/public/StoreForm/StoreForm.js

@@ -2,7 +2,6 @@ import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { ResponsiveMixin } from "../../../mixins/responsive.js";
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
 import cloneDeep from 'lodash-es/cloneDeep';
 const NS = 'store-form';
@@ -20,13 +19,25 @@ export class StoreForm extends Base {
         this.customerPasswordHashTypes = null;
         /** URL of the `fx:shipping_address_types` property helper resource. */
         this.shippingAddressTypes = null;
-        /** URL of the `fx:store_versions` property helper resource. */
+        /**
+         * URL of the `fx:store_versions` property helper resource.
+         * @deprecated All elements in this library are designed to work with store version 2.0.
+         */
         this.storeVersions = null;
-        /** URL of the `fx:checkout_types` property helper resource. */
+        /**
+         * URL of the `fx:checkout_types` property helper resource.
+         * @deprecated Checkout type is effectively controlled by the default template config.
+         */
         this.checkoutTypes = null;
-        /** URL of the `fx:locale_codes` property helper resource. */
+        /**
+         * URL of the `fx:locale_codes` property helper resource.
+         * @deprecated Default locale code is effectively controlled by the active template set.
+         */
         this.localeCodes = null;
-        /** URL of the `fx:languages` property helper resource. */
+        /**
+         * URL of the `fx:languages` property helper resource.
+         * @deprecated Default language is effectively controlled by the active template set.
+         */
         this.languages = null;
         /** URL of the `fx:timezones` property helper resource. */
         this.timezones = null;
@@ -34,7 +45,41 @@ export class StoreForm extends Base {
         this.countries = null;
         /** URL of the `fx:regions` property helper resource. */
         this.regions = null;
-        this.__singleCheckboxGroupOptions = [{ label: 'option_checked', value: 'checked' }];
+        this.__currencyStyleOptions = [
+            { rawLabel: '12.34', value: '101' },
+            { rawLabel: 'USD 12.34', value: '001' },
+            { rawLabel: '$12.34', value: '000' },
+            { rawLabel: '12', value: '111' },
+            { rawLabel: 'USD 12', value: '011' },
+            { rawLabel: '$12', value: '010' },
+        ];
+        this.__currencyStyleGetValue = () => {
+            const map = {
+                '101': '101',
+                '100': '101',
+                '001': '001',
+                '000': '000',
+                '111': '111',
+                '110': '111',
+                '011': '011',
+                '010': '010',
+            };
+            const selectionCode = [
+                this.form.hide_currency_symbol,
+                this.form.hide_decimal_characters,
+                this.form.use_international_currency_symbol,
+            ]
+                .map(v => Number(Boolean(v)))
+                .join('');
+            return map[selectionCode];
+        };
+        this.__currencyStyleSetValue = (newValue) => {
+            this.edit({
+                hide_currency_symbol: Boolean(Number(newValue[0])),
+                hide_decimal_characters: Boolean(Number(newValue[1])),
+                use_international_currency_symbol: Boolean(Number(newValue[2])),
+            });
+        };
         this.__appSessionTimeOptions = [
             { value: 's', label: 'second' },
             { value: 'm', label: 'minute' },
@@ -52,23 +97,11 @@ export class StoreForm extends Base {
         this.__setStoreEmailValue = (newValue) => {
             this.edit({ store_email: newValue.map(v => v.value).join(',') });
         };
-        this.__getBccOnReceiptEmailValue = () => {
-            return this.form.bcc_on_receipt_email ? ['checked'] : [];
-        };
-        this.__setBccOnReceiptEmailValue = (newValue) => {
-            this.edit({ bcc_on_receipt_email: newValue.includes('checked') });
-        };
-        this.__getUseEmailDnsValue = () => {
-            return this.form.use_email_dns ? ['checked'] : [];
-        };
-        this.__setUseEmailDnsValue = (newValue) => {
-            this.edit({ use_email_dns: newValue.includes('checked') });
-        };
         this.__getUseSmtpConfigValue = () => {
-            return this.form.smtp_config ? ['checked'] : [];
+            return !!this.form.smtp_config;
         };
         this.__setUseSmtpConfigValue = (newValue) => {
-            if (newValue.includes('checked')) {
+            if (newValue) {
                 this.edit({
                     smtp_config: JSON.stringify({
                         username: '',
@@ -83,18 +116,6 @@ export class StoreForm extends Base {
                 this.edit({ smtp_config: '' });
             }
         };
-        this.__getFeaturesMultishipValue = () => {
-            return this.form.features_multiship ? ['checked'] : [];
-        };
-        this.__setFeaturesMultishipValue = (newValue) => {
-            this.edit({ features_multiship: newValue.includes('checked') });
-        };
-        this.__getRequireSignedShippingRatesValue = () => {
-            return this.form.require_signed_shipping_rates ? ['checked'] : [];
-        };
-        this.__setRequireSignedShippingRatesValue = (newValue) => {
-            this.edit({ require_signed_shipping_rates: newValue.includes('checked') });
-        };
         this.__getAppSessionTimeValue = () => {
             const valueInSeconds = this.form.app_session_time || 43200;
             if (valueInSeconds % 86400 === 0)
@@ -111,32 +132,6 @@ export class StoreForm extends Base {
             const map = { d: 86400, h: 3600, m: 60, s: 1 };
             this.edit({ app_session_time: map[units] * count });
         };
-        this.__getProductsRequireExpiresPropertyValue = () => {
-            return this.form.products_require_expires_property ? ['checked'] : [];
-        };
-        this.__setProductsRequireExpiresPropertyValue = (newValue) => {
-            this.edit({ products_require_expires_property: newValue.includes('checked') });
-        };
-        this.__getUseCartValidationValue = () => {
-            return this.form.use_cart_validation ? ['checked'] : [];
-        };
-        this.__setUseCartValidationValue = (newValue) => {
-            this.edit({ use_cart_validation: newValue.includes('checked') });
-        };
-        this.__getSingleSignOnUrlValue = () => {
-            var _a;
-            return this.form.use_single_sign_on ? (_a = this.form.single_sign_on_url) !== null && _a !== void 0 ? _a : '' : '';
-        };
-        this.__setSingleSignOnUrlValue = (newValue) => {
-            this.edit({ use_single_sign_on: !!newValue, single_sign_on_url: newValue });
-        };
-        this.__getWebhookUrlValue = () => {
-            var _a;
-            return this.form.use_webhook ? (_a = this.form.webhook_url) !== null && _a !== void 0 ? _a : '' : '';
-        };
-        this.__setWebhookUrlValue = (newValue) => {
-            this.edit({ use_webhook: !!newValue, webhook_url: newValue });
-        };
         this.__setStoreDomainValue = (newValue) => {
             if (newValue.endsWith('.foxycart.com')) {
                 const domain = newValue.substring(0, newValue.length - 13);
@@ -146,6 +141,67 @@ export class StoreForm extends Base {
                 this.edit({ store_domain: newValue, use_remote_domain: newValue.includes('.') });
             }
         };
+        this.__smtpConfigHostGetValue = () => {
+            return this.__getSmtpConfig().host;
+        };
+        this.__smtpConfigHostSetValue = (newValue) => {
+            this.__setSmtpConfig('host', newValue);
+        };
+        this.__smtpConfigPortGetValue = () => {
+            const port = parseInt(this.__getSmtpConfig().port);
+            return isNaN(port) ? undefined : port;
+        };
+        this.__smtpConfigPortSetValue = (newValue) => {
+            this.__setSmtpConfig('port', String(newValue));
+        };
+        this.__smtpConfigUsernameGetValue = () => {
+            return this.__getSmtpConfig().username;
+        };
+        this.__smtpConfigUsernameSetValue = (newValue) => {
+            this.__setSmtpConfig('username', newValue);
+        };
+        this.__smtpConfigPasswordGetValue = () => {
+            return this.__getSmtpConfig().password;
+        };
+        this.__smtpConfigPasswordSetValue = (newValue) => {
+            this.__setSmtpConfig('password', newValue);
+        };
+        this.__smtpConfigSecurityGetValue = () => {
+            return this.__getSmtpConfig().security;
+        };
+        this.__smtpConfigSecuritySetValue = (newValue) => {
+            this.__setSmtpConfig('security', newValue);
+        };
+        this.__smtpConfigSecurityOptions = [
+            { label: 'option_ssl', value: 'ssl' },
+            { label: 'option_tls', value: 'tls' },
+            { label: 'option_none', value: '' },
+        ];
+        this.__webhookKeyGeneratorOptions = { length: 32, separator: '' };
+        this.__webhookKeyApiLegacyGetValue = () => {
+            return this.__getWebhookKey().api_legacy;
+        };
+        this.__webhookKeyApiLegacySetValue = (newValue) => {
+            this.__setWebhookKey('api_legacy', newValue);
+        };
+        this.__webhookKeyCartSigningGetValue = () => {
+            return this.__getWebhookKey().cart_signing;
+        };
+        this.__webhookKeyCartSigningSetValue = (newValue) => {
+            this.__setWebhookKey('cart_signing', newValue);
+        };
+        this.__webhookKeyXmlDatafeedGetValue = () => {
+            return this.__getWebhookKey().xml_datafeed;
+        };
+        this.__webhookKeyXmlDatafeedSetValue = (newValue) => {
+            this.__setWebhookKey('xml_datafeed', newValue);
+        };
+        this.__webhookKeySsoGetValue = () => {
+            return this.__getWebhookKey().sso;
+        };
+        this.__webhookKeySsoSetValue = (newValue) => {
+            this.__setWebhookKey('sso', newValue);
+        };
     }
     static get properties() {
         return {
@@ -202,220 +258,233 @@ export class StoreForm extends Base {
                 return !v || String(v).length <= 100 || 'unified-order-entry-password:v8n_too_long';
             },
             ({ custom_display_id_config: v }) => {
-                return !v || String(v).length <= 100 || 'custom-display-id-config-enabled:v8n_too_long';
+                return !v || String(v).length <= 500 || 'custom-display-id-config-enabled:v8n_too_long';
             },
         ];
     }
+    get headerSubtitleOptions() {
+        var _a;
+        return { context: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.is_active) ? 'active' : 'inactive' };
+    }
     renderBody() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-        const isUseEmailDnsWarningVisible = this.form.use_email_dns &&
-            !((_a = this.data) === null || _a === void 0 ? void 0 : _a.use_email_dns) &&
-            !this.hiddenSelector.matches('use-email-dns', true);
-        const isRequireSignedShippingRatesWarningVisible = this.form.require_signed_shipping_rates &&
-            !((_b = this.data) === null || _b === void 0 ? void 0 : _b.require_signed_shipping_rates) &&
-            !this.hiddenSelector.matches('require-signed-shipping-rates', true);
-        const isProductsRequireExpiresPropertyWarningVisible = this.form.products_require_expires_property &&
-            !((_c = this.data) === null || _c === void 0 ? void 0 : _c.products_require_expires_property) &&
-            !this.hiddenSelector.matches('products-require-expires-property', true);
-        const isUseCartValidationWarningVisible = this.form.use_cart_validation &&
-            !((_d = this.data) === null || _d === void 0 ? void 0 : _d.use_cart_validation) &&
-            !this.hiddenSelector.matches('use-cart-validation', true);
-        const storeDomainHelperText = this.t(this.form.use_remote_domain && !((_e = this.data) === null || _e === void 0 ? void 0 : _e.use_remote_domain)
-            ? 'store-domain.custom_domain_note'
-            : 'store-domain.helper_text');
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const storeDomainHelperText = this.t(this.form.use_remote_domain && !((_a = this.data) === null || _a === void 0 ? void 0 : _a.use_remote_domain)
+            ? 'essentials.store-domain.custom_domain_note'
+            : 'essentials.store-domain.helper_text');
         const storeDomainSuffix = !this.form.store_domain || this.form.store_domain.includes('.') ? '' : '.foxycart.com';
         const customerPasswordHashTypesLoader = this.__renderLoader(1);
         const shippingAddressTypesLoader = this.__renderLoader(2);
-        const checkoutTypesLoader = this.__renderLoader(3);
-        const storeVersionLoader = this.__renderLoader(4);
-        const localeCodesLoader = this.__renderLoader(5);
-        const languagesLoader = this.__renderLoader(6);
         const timezonesLoader = this.__renderLoader(7);
         const countriesLoader = this.__renderLoader(8);
         const regionsLoader = this.__renderLoader(9);
-        const shippingAddressTypeEntries = Object.entries((_g = (_f = shippingAddressTypesLoader === null || shippingAddressTypesLoader === void 0 ? void 0 : shippingAddressTypesLoader.data) === null || _f === void 0 ? void 0 : _f.values) !== null && _g !== void 0 ? _g : {});
-        const storeVersion = storeVersionLoader === null || storeVersionLoader === void 0 ? void 0 : storeVersionLoader.data;
-        const localeCodes = localeCodesLoader === null || localeCodesLoader === void 0 ? void 0 : localeCodesLoader.data;
-        const languages = languagesLoader === null || languagesLoader === void 0 ? void 0 : languagesLoader.data;
-        const timezones = (_j = (_h = timezonesLoader === null || timezonesLoader === void 0 ? void 0 : timezonesLoader.data) === null || _h === void 0 ? void 0 : _h.values.timezone) !== null && _j !== void 0 ? _j : [];
-        const countries = Object.values((_l = (_k = countriesLoader === null || countriesLoader === void 0 ? void 0 : countriesLoader.data) === null || _k === void 0 ? void 0 : _k.values) !== null && _l !== void 0 ? _l : {});
-        const regions = Object.values((_o = (_m = regionsLoader === null || regionsLoader === void 0 ? void 0 : regionsLoader.data) === null || _m === void 0 ? void 0 : _m.values) !== null && _o !== void 0 ? _o : {});
-        const customerPasswordHashTypeEntries = Object.entries((_q = (_p = customerPasswordHashTypesLoader === null || customerPasswordHashTypesLoader === void 0 ? void 0 : customerPasswordHashTypesLoader.data) === null || _p === void 0 ? void 0 : _p.values) !== null && _q !== void 0 ? _q : {});
-        const checkoutTypeEntries = Object.entries((_s = (_r = checkoutTypesLoader === null || checkoutTypesLoader === void 0 ? void 0 : checkoutTypesLoader.data) === null || _r === void 0 ? void 0 : _r.values) !== null && _s !== void 0 ? _s : {});
-        const localeCodeEntries = Object.entries((_t = localeCodes === null || localeCodes === void 0 ? void 0 : localeCodes.values) !== null && _t !== void 0 ? _t : {});
-        const languageEntries = Object.entries((_u = languages === null || languages === void 0 ? void 0 : languages.values) !== null && _u !== void 0 ? _u : {});
+        const shippingAddressTypeEntries = Object.entries((_c = (_b = shippingAddressTypesLoader === null || shippingAddressTypesLoader === void 0 ? void 0 : shippingAddressTypesLoader.data) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : {});
+        const timezones = (_e = (_d = timezonesLoader === null || timezonesLoader === void 0 ? void 0 : timezonesLoader.data) === null || _d === void 0 ? void 0 : _d.values.timezone) !== null && _e !== void 0 ? _e : [];
+        const countries = Object.values((_g = (_f = countriesLoader === null || countriesLoader === void 0 ? void 0 : countriesLoader.data) === null || _f === void 0 ? void 0 : _f.values) !== null && _g !== void 0 ? _g : {});
+        const regions = Object.values((_j = (_h = regionsLoader === null || regionsLoader === void 0 ? void 0 : regionsLoader.data) === null || _h === void 0 ? void 0 : _h.values) !== null && _j !== void 0 ? _j : {});
+        const customerPasswordHashTypeEntries = Object.entries((_l = (_k = customerPasswordHashTypesLoader === null || customerPasswordHashTypesLoader === void 0 ? void 0 : customerPasswordHashTypesLoader.data) === null || _k === void 0 ? void 0 : _k.values) !== null && _l !== void 0 ? _l : {});
         const customerPasswordHashTypeOptions = customerPasswordHashTypeEntries.map(v => ({
-            label: v[1].description,
+            rawLabel: v[1].description,
             value: v[0],
         }));
-        const shippingAddressTypeOptions = shippingAddressTypeEntries.map(([value, label]) => ({
-            label,
+        const shippingAddressTypeOptions = shippingAddressTypeEntries.map(([value, rawLabel]) => ({
+            rawLabel,
             value,
         }));
-        const checkoutTypeOptions = checkoutTypeEntries.map(([value, label]) => ({ label, value }));
-        const localeCodeOptions = localeCodeEntries.map(([value, label]) => ({ value, label }));
-        const languageOptions = languageEntries.map(([value, label]) => ({ value, label }));
-        const timezoneOptions = timezones.map(t => ({ label: t.description, value: t.timezone }));
-        const countryOptions = countries.map(c => ({ label: c.default, value: c.cc2 }));
-        const regionOptions = regions.map(r => ({ label: r.default, value: r.code }));
+        const timezoneOptions = timezones.map(t => ({ rawLabel: t.description, value: t.timezone }));
+        const countryOptions = countries.map(c => ({ rawLabel: c.default, value: c.cc2 }));
+        const regionOptions = regions.map(r => ({ rawLabel: r.default, value: r.code }));
         let regionsUrl;
         try {
-            const regionsURL = new URL((_v = this.regions) !== null && _v !== void 0 ? _v : '');
+            const regionsURL = new URL((_m = this.regions) !== null && _m !== void 0 ? _m : '');
             const country = this.form.country;
             if (country)
                 regionsURL.searchParams.set('country_code', country);
             regionsUrl = regionsURL.toString();
         }
-        catch (_z) {
+        catch (_q) {
             regionsUrl = undefined;
         }
+        const customDisplayIdConfig = this.__getCustomDisplayIdConfig();
+        const transactionJournalEntriesConfig = customDisplayIdConfig.transaction_journal_entries;
+        const logDetailRequestTypes = transactionJournalEntriesConfig.log_detail_request_types;
+        const displayIdExamples = this.__displayIdExamples;
+        const journalIdExamples = this.__journalIdExamples;
         return html `
       ${this.renderHeader()}
 
-      <div class="grid gap-m grid-cols-1 sm-grid-cols-2">
-        <foxy-internal-text-control infer="store-name"></foxy-internal-text-control>
+      <foxy-internal-summary-control infer="essentials">
+        <foxy-internal-text-control layout="summary-item" infer="store-name">
+        </foxy-internal-text-control>
 
-        <foxy-internal-text-control infer="logo-url"></foxy-internal-text-control>
+        <foxy-internal-text-control layout="summary-item" infer="logo-url">
+        </foxy-internal-text-control>
 
         <foxy-internal-text-control
           helper-text=${storeDomainHelperText}
+          layout="summary-item"
           suffix=${storeDomainSuffix}
           infer="store-domain"
           .setValue=${this.__setStoreDomainValue}
         >
         </foxy-internal-text-control>
 
-        <foxy-internal-text-control infer="store-url"></foxy-internal-text-control>
+        <foxy-internal-text-control layout="summary-item" infer="store-url">
+        </foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="essentials" label="" helper-text="">
+        <foxy-internal-switch-control infer="is-maintenance-mode"></foxy-internal-switch-control>
+      </foxy-internal-summary-control>
 
+      <foxy-internal-summary-control infer="essentials" label="" helper-text="">
         <foxy-internal-editable-list-control
+          layout="summary-item"
           infer="store-email"
-          class="sm-col-span-2"
           .getValue=${this.__getStoreEmailValue}
           .setValue=${this.__setStoreEmailValue}
         >
         </foxy-internal-editable-list-control>
+      </foxy-internal-summary-control>
 
+      <foxy-internal-summary-control infer="essentials" label="" helper-text="">
         <foxy-internal-select-control
+          layout="summary-item"
           infer="timezone"
-          class="sm-col-span-2"
           .options=${timezoneOptions}
         >
         </foxy-internal-select-control>
 
-        <foxy-internal-async-combo-box-control
-          item-label-path="version"
-          item-value-path="_links.self.href"
-          class="sm-col-span-2"
-          infer="store-version-uri"
-          first=${ifDefined((_w = this.storeVersions) !== null && _w !== void 0 ? _w : undefined)}
-          .selectedItem=${storeVersion}
+        <foxy-internal-select-control
+          layout="summary-item"
+          infer="country"
+          .options=${countryOptions}
         >
-        </foxy-internal-async-combo-box-control>
+        </foxy-internal-select-control>
 
-        <foxy-internal-text-control
-          infer="from-email"
-          class="sm-col-span-2"
-          placeholder=${(_y = (_x = this.__getStoreEmailValue()[0]) === null || _x === void 0 ? void 0 : _x.value) !== null && _y !== void 0 ? _y : this.t('from-email.placeholder')}
-        >
+        ${regionOptions.length > 0
+            ? html `
+              <foxy-internal-select-control
+                layout="summary-item"
+                infer="region"
+                .options=${regionOptions}
+              >
+              </foxy-internal-select-control>
+            `
+            : html `
+              <foxy-internal-text-control layout="summary-item" infer="region">
+              </foxy-internal-text-control>
+            `}
+
+        <foxy-internal-text-control layout="summary-item" infer="postal-code">
         </foxy-internal-text-control>
 
-        <foxy-internal-checkbox-group-control
-          infer="bcc-on-receipt-email"
-          class="-mt-xs -mb-m sm-col-span-2"
-          .getValue=${this.__getBccOnReceiptEmailValue}
-          .setValue=${this.__setBccOnReceiptEmailValue}
-          .options=${this.__singleCheckboxGroupOptions}
+        <foxy-internal-select-control
+          layout="summary-item"
+          infer="currency-style"
+          .options=${this.__currencyStyleOptions}
+          .getValue=${this.__currencyStyleGetValue}
+          .setValue=${this.__currencyStyleSetValue}
         >
-        </foxy-internal-checkbox-group-control>
+        </foxy-internal-select-control>
+      </foxy-internal-summary-control>
 
-        <foxy-internal-checkbox-group-control
-          infer="use-email-dns"
-          class="-mt-xs -mb-m sm-col-span-2"
-          .getValue=${this.__getUseEmailDnsValue}
-          .setValue=${this.__setUseEmailDnsValue}
-          .options=${this.__singleCheckboxGroupOptions}
+      <foxy-internal-summary-control infer="legacy-api">
+        <foxy-internal-password-control
+          layout="summary-item"
+          infer="webhook-key-api-legacy"
+          show-generator
+          .generatorOptions=${this.__webhookKeyGeneratorOptions}
+          .getValue=${this.__webhookKeyApiLegacyGetValue}
+          .setValue=${this.__webhookKeyApiLegacySetValue}
         >
-        </foxy-internal-checkbox-group-control>
+        </foxy-internal-password-control>
+      </foxy-internal-summary-control>
 
-        ${isUseEmailDnsWarningVisible
-            ? this.__renderWarning('use_email_dns_helper_text', {
-                href: 'https://wiki.foxycart.com/v/1.1/emails#how_emails_are_sent_spf_dkim_dmarc_etc',
-                caption: 'How Emails Are Sent (SPF, DKIM, DMARC, etc.)',
-            })
-            : ''}
+      <foxy-internal-summary-control infer="emails">
+        <foxy-internal-text-control
+          layout="summary-item"
+          infer="from-email"
+          placeholder=${(_p = (_o = this.__getStoreEmailValue()[0]) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : this.t('emails.from-email.placeholder')}
+        >
+        </foxy-internal-text-control>
 
-        <foxy-internal-checkbox-group-control
+        <foxy-internal-switch-control infer="use-email-dns" helper-text-as-tooltip>
+        </foxy-internal-switch-control>
+
+        <foxy-internal-switch-control
           infer="use-smtp-config"
-          class="-mt-xs -mb-m sm-col-span-2"
+          helper-text-as-tooltip
           .getValue=${this.__getUseSmtpConfigValue}
           .setValue=${this.__setUseSmtpConfigValue}
-          .options=${this.__singleCheckboxGroupOptions}
         >
-        </foxy-internal-checkbox-group-control>
+        </foxy-internal-switch-control>
 
-        ${this.form.smtp_config && !this.hiddenSelector.matches('smtp-config', true)
-            ? this.__renderSmtpConfig()
-            : ''}
+        ${this.form.smtp_config
+            ? html `
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="smtp-config-host"
+                .getValue=${this.__smtpConfigHostGetValue}
+                .setValue=${this.__smtpConfigHostSetValue}
+              >
+              </foxy-internal-text-control>
 
-        <foxy-internal-select-control infer="country" .options=${countryOptions}>
-        </foxy-internal-select-control>
+              <foxy-internal-number-control
+                layout="summary-item"
+                infer="smtp-config-port"
+                step="1"
+                min="0"
+                .getValue=${this.__smtpConfigPortGetValue}
+                .setValue=${this.__smtpConfigPortSetValue}
+              >
+              </foxy-internal-number-control>
 
-        <foxy-internal-select-control infer="region" .options=${regionOptions}>
-        </foxy-internal-select-control>
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="smtp-config-username"
+                .getValue=${this.__smtpConfigUsernameGetValue}
+                .setValue=${this.__smtpConfigUsernameSetValue}
+              >
+              </foxy-internal-text-control>
 
-        <foxy-internal-text-control infer="postal-code"></foxy-internal-text-control>
+              <foxy-internal-password-control
+                layout="summary-item"
+                infer="smtp-config-password"
+                .getValue=${this.__smtpConfigPasswordGetValue}
+                .setValue=${this.__smtpConfigPasswordSetValue}
+              >
+              </foxy-internal-password-control>
 
+              <foxy-internal-select-control
+                layout="summary-item"
+                infer="smtp-config-security"
+                .getValue=${this.__smtpConfigSecurityGetValue}
+                .setValue=${this.__smtpConfigSecuritySetValue}
+                .options=${this.__smtpConfigSecurityOptions}
+              >
+              </foxy-internal-select-control>
+            `
+            : ''}
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="shipping">
         <foxy-internal-select-control
+          layout="summary-item"
           infer="shipping-address-type"
           .options=${shippingAddressTypeOptions}
         >
         </foxy-internal-select-control>
 
-        <foxy-internal-checkbox-group-control
-          infer="features-multiship"
-          class="-mt-xs -mb-m sm-col-span-2"
-          .getValue=${this.__getFeaturesMultishipValue}
-          .setValue=${this.__setFeaturesMultishipValue}
-          .options=${this.__singleCheckboxGroupOptions}
-        >
-        </foxy-internal-checkbox-group-control>
-
-        <foxy-internal-checkbox-group-control
-          infer="require-signed-shipping-rates"
-          class="-mt-xs -mb-m sm-col-span-2"
-          .getValue=${this.__getRequireSignedShippingRatesValue}
-          .setValue=${this.__setRequireSignedShippingRatesValue}
-          .options=${this.__singleCheckboxGroupOptions}
-        >
-        </foxy-internal-checkbox-group-control>
-
-        ${isRequireSignedShippingRatesWarningVisible
-            ? this.__renderWarning('require_signed_shipping_rates_helper_text')
-            : ''}
-
-        <foxy-internal-select-control infer="language" .options=${languageOptions}>
-        </foxy-internal-select-control>
-
-        <foxy-internal-select-control infer="locale-code" .options=${localeCodeOptions}>
-        </foxy-internal-select-control>
-
-        ${!this.hiddenSelector.matches('currency-style', true)
-            ? this.__renderCurrencyStyleSelector()
-            : ''}
+        <foxy-internal-switch-control infer="features-multiship" helper-text-as-tooltip>
+        </foxy-internal-switch-control>
 
-        <!-- -->
-
-        ${!this.hiddenSelector.matches('custom-display-id-config', true)
-            ? this.__renderCustomIDSettings()
-            : ''}
-
-        <!-- -->
-
-        <foxy-internal-text-control class="sm-col-span-2" infer="receipt-continue-url">
-        </foxy-internal-text-control>
+        <foxy-internal-switch-control infer="require-signed-shipping-rates" helper-text-as-tooltip>
+        </foxy-internal-switch-control>
+      </foxy-internal-summary-control>
 
+      <foxy-internal-summary-control infer="cart">
         <foxy-internal-frequency-control
-          class="sm-col-span-2"
+          layout="summary-item"
           infer="app-session-time"
           .getValue=${this.__getAppSessionTimeValue}
           .setValue=${this.__setAppSessionTimeValue}
@@ -423,43 +492,29 @@ export class StoreForm extends Base {
         >
         </foxy-internal-frequency-control>
 
-        <foxy-internal-checkbox-group-control
+        <foxy-internal-switch-control
           infer="products-require-expires-property"
-          class="-mt-xs -mb-m sm-col-span-2"
-          .getValue=${this.__getProductsRequireExpiresPropertyValue}
-          .setValue=${this.__setProductsRequireExpiresPropertyValue}
-          .options=${this.__singleCheckboxGroupOptions}
+          helper-text-as-tooltip
         >
-        </foxy-internal-checkbox-group-control>
+        </foxy-internal-switch-control>
 
-        ${isProductsRequireExpiresPropertyWarningVisible
-            ? this.__renderWarning('products_require_expires_property_helper_text')
-            : ''}
+        <foxy-internal-switch-control infer="use-cart-validation" helper-text-as-tooltip>
+        </foxy-internal-switch-control>
 
-        <foxy-internal-checkbox-group-control
-          infer="use-cart-validation"
-          class="-mt-xs -mb-m sm-col-span-2"
-          .getValue=${this.__getUseCartValidationValue}
-          .setValue=${this.__setUseCartValidationValue}
-          .options=${this.__singleCheckboxGroupOptions}
-        >
-        </foxy-internal-checkbox-group-control>
-
-        ${isUseCartValidationWarningVisible
-            ? this.__renderWarning('use_cart_validation_helper_text', {
-                href: 'https://wiki.foxycart.com/v/2.0/hmac_validation',
-                caption: 'HMAC Product Verification: Locking Down your Add-To-Cart Links and Forms',
-            })
-            : ''}
-
-        <foxy-internal-select-control
-          infer="checkout-type"
-          class="sm-col-span-2"
-          .options=${checkoutTypeOptions}
+        <foxy-internal-password-control
+          layout="summary-item"
+          infer="webhook-key-cart-signing"
+          show-generator
+          .generatorOptions=${this.__webhookKeyGeneratorOptions}
+          .getValue=${this.__webhookKeyCartSigningGetValue}
+          .setValue=${this.__webhookKeyCartSigningSetValue}
         >
-        </foxy-internal-select-control>
+        </foxy-internal-password-control>
+      </foxy-internal-summary-control>
 
+      <foxy-internal-summary-control infer="checkout">
         <foxy-internal-select-control
+          layout="summary-item"
           infer="customer-password-hash-type"
           .options=${customerPasswordHashTypeOptions}
           .setValue=${(newValue) => {
@@ -475,52 +530,290 @@ export class StoreForm extends Base {
 
         ${typeof this.form.customer_password_hash_config === 'number'
             ? html `
-              <foxy-internal-number-control infer="customer-password-hash-config">
+              <foxy-internal-number-control
+                layout="summary-item"
+                infer="customer-password-hash-config"
+              >
               </foxy-internal-number-control>
             `
             : html `
-              <foxy-internal-text-control infer="customer-password-hash-config">
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="customer-password-hash-config"
+              >
               </foxy-internal-text-control>
             `}
+      </foxy-internal-summary-control>
 
-        <foxy-internal-password-control infer="unified-order-entry-password">
+      <foxy-internal-summary-control infer="checkout" label="" helper-text="">
+        <foxy-internal-password-control
+          layout="summary-item"
+          infer="unified-order-entry-password"
+          show-generator
+        >
         </foxy-internal-password-control>
+      </foxy-internal-summary-control>
 
-        <foxy-internal-text-control
-          infer="single-sign-on-url"
-          .getValue=${this.__getSingleSignOnUrlValue}
-          .setValue=${this.__setSingleSignOnUrlValue}
-        >
+      <foxy-internal-summary-control infer="checkout" label="" helper-text="">
+        <foxy-internal-switch-control infer="use-single-sign-on"></foxy-internal-switch-control>
+        ${this.form.use_single_sign_on
+            ? html `
+              <foxy-internal-text-control layout="summary-item" infer="single-sign-on-url">
+              </foxy-internal-text-control>
+              <foxy-internal-password-control
+                layout="summary-item"
+                infer="webhook-key-sso"
+                show-generator
+                .generatorOptions=${this.__webhookKeyGeneratorOptions}
+                .getValue=${this.__webhookKeySsoGetValue}
+                .setValue=${this.__webhookKeySsoSetValue}
+              >
+              </foxy-internal-password-control>
+            `
+            : ''}
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="receipt">
+        <foxy-internal-text-control layout="summary-item" infer="receipt-continue-url">
         </foxy-internal-text-control>
+        <foxy-internal-switch-control infer="bcc-on-receipt-email"></foxy-internal-switch-control>
+      </foxy-internal-summary-control>
 
-        <foxy-internal-text-control
-          infer="webhook-url"
+      <foxy-internal-summary-control infer="custom-display-id-config">
+        <foxy-internal-switch-control
+          infer="custom-display-id-config-enabled"
+          .getValue=${() => customDisplayIdConfig.enabled}
+          .setValue=${(newValue) => {
+            this.__setCustomDisplayIdConfig('enabled', newValue);
+        }}
+        >
+        </foxy-internal-switch-control>
+
+        ${customDisplayIdConfig.enabled
+            ? html `
+              <foxy-internal-number-control
+                layout="summary-item"
+                infer="custom-display-id-config-start"
+                step="1"
+                min="0"
+                .getValue=${() => parseInt(customDisplayIdConfig.start || '0')}
+                .setValue=${(newValue) => {
+                this.__setCustomDisplayIdConfig('start', String(newValue));
+            }}
+              >
+              </foxy-internal-number-control>
+
+              <foxy-internal-number-control
+                layout="summary-item"
+                infer="custom-display-id-config-length"
+                step="1"
+                min="0"
+                .getValue=${() => parseInt(customDisplayIdConfig.length || '0')}
+                .setValue=${(newValue) => {
+                this.__setCustomDisplayIdConfig('length', String(newValue));
+            }}
+              >
+              </foxy-internal-number-control>
+
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="custom-display-id-config-prefix"
+                .getValue=${() => customDisplayIdConfig.prefix}
+                .setValue=${(newValue) => {
+                this.__setCustomDisplayIdConfig('prefix', newValue);
+            }}
+              >
+              </foxy-internal-text-control>
+
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="custom-display-id-config-suffix"
+                .getValue=${() => customDisplayIdConfig.suffix}
+                .setValue=${(newValue) => {
+                this.__setCustomDisplayIdConfig('suffix', newValue);
+            }}
+              >
+              </foxy-internal-text-control>
+
+              <div class="text-right text-secondary">
+                <p class="flex justify-end">
+                  <foxy-i18n infer="" key="custom-display-id-config-first-example"></foxy-i18n>
+                  <span style="font-family: monospace">&nbsp;${displayIdExamples === null || displayIdExamples === void 0 ? void 0 : displayIdExamples.first}</span>
+                </p>
+                <p class="flex justify-end">
+                  <foxy-i18n infer="" key="custom-display-id-config-random-example"></foxy-i18n>
+                  <span style="font-family: monospace">&nbsp;${displayIdExamples === null || displayIdExamples === void 0 ? void 0 : displayIdExamples.random}</span>
+                </p>
+              </div>
+            `
+            : ''}
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control helper-text="" label="" infer="custom-display-id-config">
+        <foxy-internal-switch-control
+          infer="custom-display-id-config-transaction-journal-entries-enabled"
           class="sm-col-span-2"
-          .getValue=${this.__getWebhookUrlValue}
-          .setValue=${this.__setWebhookUrlValue}
+          .getValue=${() => transactionJournalEntriesConfig.enabled}
+          .setValue=${(newValue) => {
+            this.__setTransactionJournalEntriesConfig('enabled', newValue);
+        }}
         >
-        </foxy-internal-text-control>
+        </foxy-internal-switch-control>
 
-        ${this.__renderWebhookKey()}
+        ${transactionJournalEntriesConfig.enabled
+            ? html `
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="custom-display-id-config-transaction-journal-entries-log-detail-request-types-transaction-authcapture-prefix"
+                .getValue=${() => logDetailRequestTypes.transaction_authcapture.prefix}
+                .setValue=${(newValue) => {
+                this.__setTransactionJournalEntriesPrefix('transaction_authcapture', newValue);
+            }}
+              >
+              </foxy-internal-text-control>
 
-        <!-- -->
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="custom-display-id-config-transaction-journal-entries-log-detail-request-types-transaction-capture-prefix"
+                .getValue=${() => logDetailRequestTypes.transaction_capture.prefix}
+                .setValue=${(newValue) => {
+                this.__setTransactionJournalEntriesPrefix('transaction_capture', newValue);
+            }}
+              >
+              </foxy-internal-text-control>
 
-        ${this.data && !this.hiddenSelector.matches('is-maintenance-mode', true)
-            ? this.__renderMaintenanceModeSwitch()
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="custom-display-id-config-transaction-journal-entries-log-detail-request-types-transaction-void-prefix"
+                .getValue=${() => logDetailRequestTypes.transaction_void.prefix}
+                .setValue=${(newValue) => {
+                this.__setTransactionJournalEntriesPrefix('transaction_void', newValue);
+            }}
+              >
+              </foxy-internal-text-control>
+
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="custom-display-id-config-transaction-journal-entries-log-detail-request-types-transaction-refund-prefix"
+                .getValue=${() => logDetailRequestTypes.transaction_refund.prefix}
+                .setValue=${(newValue) => {
+                this.__setTransactionJournalEntriesPrefix('transaction_refund', newValue);
+            }}
+              >
+              </foxy-internal-text-control>
+
+              <foxy-internal-text-control
+                layout="summary-item"
+                infer="custom-display-id-config-transaction-journal-entries-transaction-separator"
+                class="col-span-2"
+                .getValue=${() => transactionJournalEntriesConfig.transaction_separator}
+                .setValue=${(newValue) => {
+                this.__setTransactionJournalEntriesConfig('transaction_separator', newValue);
+            }}
+              >
+              </foxy-internal-text-control>
+
+              <div class="sm-col-span-2 leading-s text-right text-secondary">
+                <p>
+                  <foxy-i18n
+                    infer=""
+                    key="custom-display-id-config-transaction-journal-entries-authcapture-example"
+                  >
+                  </foxy-i18n>
+                  <span style="font-family: monospace"> ${journalIdExamples === null || journalIdExamples === void 0 ? void 0 : journalIdExamples.authcapture} </span>
+                </p>
+                <p>
+                  <foxy-i18n
+                    infer=""
+                    key="custom-display-id-config-transaction-journal-entries-capture-example"
+                  >
+                  </foxy-i18n>
+                  <span style="font-family: monospace">${journalIdExamples === null || journalIdExamples === void 0 ? void 0 : journalIdExamples.capture}</span>
+                </p>
+                <p>
+                  <foxy-i18n
+                    infer=""
+                    key="custom-display-id-config-transaction-journal-entries-void-example"
+                  >
+                  </foxy-i18n>
+                  <span style="font-family: monospace">${journalIdExamples === null || journalIdExamples === void 0 ? void 0 : journalIdExamples.void}</span>
+                </p>
+                <p>
+                  <foxy-i18n
+                    infer=""
+                    key="custom-display-id-config-transaction-journal-entries-refund-example"
+                  >
+                  </foxy-i18n>
+                  <span style="font-family: monospace">${journalIdExamples === null || journalIdExamples === void 0 ? void 0 : journalIdExamples.refund}</span>
+                </p>
+              </div>
+            `
             : ''}
-      </div>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="xml-datafeed">
+        <foxy-internal-switch-control infer="use-webhook"></foxy-internal-switch-control>
+        ${this.form.use_webhook
+            ? html `
+              <foxy-internal-text-control layout="summary-item" infer="webhook-url">
+              </foxy-internal-text-control>
+              <foxy-internal-password-control
+                layout="summary-item"
+                infer="webhook-key-xml-datafeed"
+                show-generator
+                .generatorOptions=${this.__webhookKeyGeneratorOptions}
+                .getValue=${this.__webhookKeyXmlDatafeedGetValue}
+                .setValue=${this.__webhookKeyXmlDatafeedSetValue}
+              >
+              </foxy-internal-password-control>
+            `
+            : ''}
+      </foxy-internal-summary-control>
 
       ${super.renderBody()}
       ${customerPasswordHashTypesLoader.render(this.customerPasswordHashTypes)}
       ${shippingAddressTypesLoader.render(this.shippingAddressTypes)}
-      ${checkoutTypesLoader.render(this.checkoutTypes)}
-      ${storeVersionLoader.render(this.form.store_version_uri)}
-      ${localeCodesLoader.render(this.localeCodes)} ${timezonesLoader.render(this.timezones)}
-      ${countriesLoader.render(this.countries)} ${languagesLoader.render(this.languages)}
+      ${timezonesLoader.render(this.timezones)} ${countriesLoader.render(this.countries)}
       ${regionsLoader.render(regionsUrl)}
     `;
     }
-    __renderWebhookKey() {
+    get __displayIdExamples() {
+        const config = this.__getCustomDisplayIdConfig();
+        const startAsInt = parseInt(config.start || '0');
+        const lengthAsInt = parseInt(config.length || '0');
+        const numericLength = lengthAsInt - config.prefix.length - config.suffix.length;
+        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, numericLength)), Math.pow(10, numericLength) - 1);
+        if (config.start && config.length && startAsInt / 10 <= numericLength) {
+            return {
+                first: `${config.prefix}${startAsInt.toString().padStart(numericLength, '0')}${config.suffix}`,
+                random: `${config.prefix}${randomExampleNumericId.toString().padStart(numericLength, '0')}${config.suffix}`,
+            };
+        }
+    }
+    get __journalIdExamples() {
+        const customDisplayIdConfig = this.__getCustomDisplayIdConfig();
+        const transactionJournalEntriesConfig = customDisplayIdConfig.transaction_journal_entries;
+        const startAsInt = parseInt(customDisplayIdConfig.start || '0');
+        const lengthAsInt = parseInt(customDisplayIdConfig.length || '0');
+        const numericLength = lengthAsInt - customDisplayIdConfig.prefix.length - customDisplayIdConfig.suffix.length;
+        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, numericLength)), Math.pow(10, numericLength) - 1);
+        const randomExampleId = `${customDisplayIdConfig.prefix}${randomExampleNumericId
+            .toString()
+            .padStart(numericLength, '0')}${customDisplayIdConfig.suffix}`;
+        const randomNumericEntryId = Math.floor(Math.random() * 1000);
+        const randomEntryId = String(randomNumericEntryId).padStart(3, '0');
+        if (customDisplayIdConfig.start &&
+            customDisplayIdConfig.length &&
+            startAsInt / 10 <= numericLength) {
+            return {
+                authcapture: `${randomExampleId}${transactionJournalEntriesConfig.transaction_separator}${transactionJournalEntriesConfig.log_detail_request_types.transaction_authcapture.prefix}${randomEntryId}`,
+                capture: `${randomExampleId}${transactionJournalEntriesConfig.transaction_separator}${transactionJournalEntriesConfig.log_detail_request_types.transaction_capture.prefix}${randomEntryId}`,
+                refund: `${randomExampleId}${transactionJournalEntriesConfig.transaction_separator}${transactionJournalEntriesConfig.log_detail_request_types.transaction_refund.prefix}${randomEntryId}`,
+                void: `${randomExampleId}${transactionJournalEntriesConfig.transaction_separator}${transactionJournalEntriesConfig.log_detail_request_types.transaction_void.prefix}${randomEntryId}`,
+            };
+        }
+    }
+    __getWebhookKey() {
         var _a, _b;
         let parsedKey;
         try {
@@ -530,128 +823,14 @@ export class StoreForm extends Base {
             const v = (_b = this.form.webhook_key) !== null && _b !== void 0 ? _b : '';
             parsedKey = { cart_signing: v, xml_datafeed: v, api_legacy: v, sso: v };
         }
-        return Object.keys(parsedKey).map(key => {
-            return html `
-        <foxy-internal-password-control
-          infer="webhook-key-${key.replace('_', '-')}"
-          .getValue=${() => parsedKey[key]}
-          .setValue=${(newValue) => {
-                parsedKey[key] = newValue;
-                this.edit({ webhook_key: JSON.stringify(parsedKey) });
-            }}
-        >
-        </foxy-internal-password-control>
-      `;
-        });
+        return parsedKey;
     }
-    __renderMaintenanceModeSwitch() {
-        var _a;
-        const isActive = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.is_maintenance_mode);
-        const buttonKey = `${isActive ? 'disable' : 'enable'}_maintenance_mode`;
-        const explainerKey = `maintenance_mode_${isActive ? 'on' : 'off'}_explainer`;
-        return html `
-      <div
-        data-testid="is-maintenance-mode"
-        class=${classMap({
-            'rounded leading-s text-s sm-col-span-2': true,
-            'text-tertiary': !isActive,
-            'text-error': isActive,
-        })}
-      >
-        <foxy-i18n infer="" class="block mb-s" key=${explainerKey}></foxy-i18n>
-
-        <vaadin-button
-          theme="tertiary small ${isActive ? 'contrast' : ''}"
-          class="p-0"
-          ?disabled=${this.disabledSelector.matches('is-maintenance-mode', true)}
-          @click=${() => {
-            this.edit({ is_maintenance_mode: !this.form.is_maintenance_mode });
-            this.submit();
-        }}
-        >
-          <foxy-i18n infer="" key=${buttonKey}></foxy-i18n>
-        </vaadin-button>
-      </div>
-    `;
-    }
-    __renderCurrencyStyleSelector() {
-        const map = {
-            '101': 0,
-            '100': 0,
-            '001': 1,
-            '000': 2,
-            '111': 3,
-            '110': 3,
-            '011': 4,
-            '010': 5,
-        };
-        const selectionCode = [
-            this.form.hide_currency_symbol,
-            this.form.hide_decimal_characters,
-            this.form.use_international_currency_symbol,
-        ]
-            .map(v => Number(Boolean(v)))
-            .join('');
-        const selectionIndex = map[selectionCode];
-        const isDisabled = this.disabledSelector.matches('currency-style', true);
-        const isReadonly = this.readonlySelector.matches('currency-style', true);
-        return html `
-      <div data-testid="currency-style" class="sm-col-span-2">
-        ${this.renderTemplateOrSlot('currency-style:before')}
-
-        <div
-          class="grid grid-cols-1 gap-xs transition-colors text-secondary hover-text-body sm-col-span-2"
-        >
-          <foxy-i18n infer="" class="font-medium text-s" key="currency_style_label"></foxy-i18n>
-
-          <div class="grid grid-cols-3 bg-contrast-10 rounded" style="gap: 1px; padding: 1px">
-            ${['12.34', 'USD 12.34', '$12.34', '12', 'USD 12', '$12'].map((example, index) => {
-            return html `
-                <label
-                  style="--lumo-border-radius: calc(var(--lumo-border-radius-m) - 1px)"
-                  class=${classMap({
-                'relative z-0 px-s h-m flex items-center transition-colors': true,
-                'hover-cursor-pointer': true,
-                'focus-within-z-10 focus-within-ring-2 focus-within-ring-primary-50': true,
-                'bg-base text-body hover-bg-transparent': index !== selectionIndex,
-                'bg-primary text-primary-contrast': index === selectionIndex,
-                'rounded-tl': index === 0,
-                'rounded-tr': index === 2,
-                'rounded-bl': index === 3,
-                'rounded-br': index === 5,
-            })}
-                >
-                  <span class="font-medium font-tnum">${example}</span>
-                  <input
-                    class="sr-only"
-                    value=${index}
-                    type="radio"
-                    name="currency-style"
-                    ?checked=${index === selectionIndex}
-                    ?disabled=${isDisabled}
-                    ?readonly=${isReadonly}
-                    @change=${() => {
-                const set = Object.entries(map).find(v => v[1] === index)[0];
-                this.edit({
-                    hide_currency_symbol: Boolean(Number(set[0])),
-                    hide_decimal_characters: Boolean(Number(set[1])),
-                    use_international_currency_symbol: Boolean(Number(set[2])),
-                });
-            }}
-                  />
-                </label>
-              `;
-        })}
-          </div>
-
-          <foxy-i18n infer="" class="text-xs" key="currency_style_helper_text"></foxy-i18n>
-        </div>
-
-        ${this.renderTemplateOrSlot('currency-style:after')}
-      </div>
-    `;
+    __setWebhookKey(key, value) {
+        const parsedKey = this.__getWebhookKey();
+        parsedKey[key] = value;
+        this.edit({ webhook_key: JSON.stringify(parsedKey) });
     }
-    __renderCustomIDSettings() {
+    __getCustomDisplayIdConfig() {
         var _a;
         const defaultConfig = {
             enabled: false,
@@ -677,357 +856,47 @@ export class StoreForm extends Base {
         catch (_b) {
             config = cloneDeep(defaultConfig);
         }
-        const startAsInt = parseInt(config.start || '0');
-        const lengthAsInt = parseInt(config.length || '0');
-        const numericLength = lengthAsInt - config.prefix.length - config.suffix.length;
-        const randomExampleNumericId = Math.min(startAsInt + Math.floor(Math.random() * Math.pow(10, numericLength)), Math.pow(10, numericLength) - 1);
-        const randomExampleId = `${config.prefix}${randomExampleNumericId
-            .toString()
-            .padStart(numericLength, '0')}${config.suffix}`;
-        const randomNumericEntryId = Math.floor(Math.random() * 1000);
-        const randomEntryId = String(randomNumericEntryId).padStart(3, '0');
-        return html `
-      <foxy-internal-checkbox-group-control
-        infer="custom-display-id-config-enabled"
-        class="-mt-xs -mb-m sm-col-span-2"
-        .getValue=${() => (config.enabled ? ['checked'] : [])}
-        .setValue=${(newValue) => {
-            config.enabled = newValue.includes('checked');
-            this.edit({ custom_display_id_config: JSON.stringify(config) });
-        }}
-        .options=${this.__singleCheckboxGroupOptions}
-      >
-      </foxy-internal-checkbox-group-control>
-
-      ${config.enabled
-            ? html `
-            <div
-              class="rounded-t-l rounded-b-l border border-contrast-10 p-m grid grid-cols-2 gap-m sm-col-span-2"
-            >
-              <foxy-internal-integer-control
-                infer="custom-display-id-config-start"
-                min="0"
-                .getValue=${() => parseInt(config.start || '0')}
-                .setValue=${(newValue) => {
-                config.start = String(newValue);
-                this.edit({ custom_display_id_config: JSON.stringify(config) });
-            }}
-              >
-              </foxy-internal-integer-control>
-
-              <foxy-internal-integer-control
-                infer="custom-display-id-config-length"
-                min="0"
-                .getValue=${() => parseInt(config.length || '0')}
-                .setValue=${(newValue) => {
-                config.length = String(newValue);
-                this.edit({ custom_display_id_config: JSON.stringify(config) });
-            }}
-              >
-              </foxy-internal-integer-control>
-
-              <foxy-internal-text-control
-                infer="custom-display-id-config-prefix"
-                .getValue=${() => config.prefix}
-                .setValue=${(newValue) => {
-                config.prefix = newValue;
-                this.edit({ custom_display_id_config: JSON.stringify(config) });
-            }}
-              >
-              </foxy-internal-text-control>
-
-              <foxy-internal-text-control
-                infer="custom-display-id-config-suffix"
-                .getValue=${() => config.suffix}
-                .setValue=${(newValue) => {
-                config.suffix = newValue;
-                this.edit({ custom_display_id_config: JSON.stringify(config) });
-            }}
-              >
-              </foxy-internal-text-control>
-
-              ${config.start && config.length && startAsInt / 10 <= numericLength
-                ? html `
-                    <table
-                      data-testid="custom-display-id-config-examples"
-                      style="font-family: monospace"
-                      class="col-span-2 text-xs text-secondary whitespace-nowrap"
-                    >
-                      <tbody>
-                        <tr>
-                          <td style="width: 1%">
-                            <foxy-i18n infer="" key="custom-display-id-config-first-example">
-                            </foxy-i18n>
-                          </td>
-                          <td>
-                            ${config.prefix}${startAsInt
-                    .toString()
-                    .padStart(numericLength, '0')}${config.suffix}
-                          </td>
-                        </tr>
-                        <tr style="width: 1%">
-                          <td>
-                            <foxy-i18n infer="" key="custom-display-id-config-random-example">
-                            </foxy-i18n>
-                          </td>
-                          <td>${randomExampleId}</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  `
-                : ''}
-            </div>
-
-            <foxy-internal-checkbox-group-control
-              infer="custom-display-id-config-transaction-journal-entries-enabled"
-              class="-mt-xs -mb-m sm-col-span-2"
-              .getValue=${() => (config.transaction_journal_entries.enabled ? ['checked'] : [])}
-              .setValue=${(newValue) => {
-                config.transaction_journal_entries.enabled = newValue.includes('checked');
-                this.edit({ custom_display_id_config: JSON.stringify(config) });
-            }}
-              .options=${this.__singleCheckboxGroupOptions}
-            >
-            </foxy-internal-checkbox-group-control>
-
-            ${config.transaction_journal_entries.enabled
-                ? html `
-                  <div
-                    class="rounded-t-l rounded-b-l border border-contrast-10 p-m grid grid-cols-2 gap-m sm-col-span-2"
-                  >
-                    <foxy-internal-text-control
-                      infer="custom-display-id-config-transaction-journal-entries-transaction-separator"
-                      class="col-span-2"
-                      .getValue=${() => config.transaction_journal_entries.transaction_separator}
-                      .setValue=${(newValue) => {
-                    config.transaction_journal_entries.transaction_separator = newValue;
-                    this.edit({ custom_display_id_config: JSON.stringify(config) });
-                }}
-                    >
-                    </foxy-internal-text-control>
-
-                    <foxy-internal-text-control
-                      infer="custom-display-id-config-transaction-journal-entries-log-detail-request-types-transaction-authcapture-prefix"
-                      .getValue=${() => config.transaction_journal_entries.log_detail_request_types
-                    .transaction_authcapture.prefix}
-                      .setValue=${(newValue) => {
-                    config.transaction_journal_entries.log_detail_request_types.transaction_authcapture.prefix =
-                        newValue;
-                    this.edit({ custom_display_id_config: JSON.stringify(config) });
-                }}
-                    >
-                    </foxy-internal-text-control>
-
-                    <foxy-internal-text-control
-                      infer="custom-display-id-config-transaction-journal-entries-log-detail-request-types-transaction-capture-prefix"
-                      .getValue=${() => config.transaction_journal_entries.log_detail_request_types
-                    .transaction_capture.prefix}
-                      .setValue=${(newValue) => {
-                    config.transaction_journal_entries.log_detail_request_types.transaction_capture.prefix =
-                        newValue;
-                    this.edit({ custom_display_id_config: JSON.stringify(config) });
-                }}
-                    >
-                    </foxy-internal-text-control>
-
-                    <foxy-internal-text-control
-                      infer="custom-display-id-config-transaction-journal-entries-log-detail-request-types-transaction-void-prefix"
-                      .getValue=${() => config.transaction_journal_entries.log_detail_request_types.transaction_void
-                    .prefix}
-                      .setValue=${(newValue) => {
-                    config.transaction_journal_entries.log_detail_request_types.transaction_void.prefix =
-                        newValue;
-                    this.edit({ custom_display_id_config: JSON.stringify(config) });
-                }}
-                    >
-                    </foxy-internal-text-control>
-
-                    <foxy-internal-text-control
-                      infer="custom-display-id-config-transaction-journal-entries-log-detail-request-types-transaction-refund-prefix"
-                      .getValue=${() => config.transaction_journal_entries.log_detail_request_types
-                    .transaction_refund.prefix}
-                      .setValue=${(newValue) => {
-                    config.transaction_journal_entries.log_detail_request_types.transaction_refund.prefix =
-                        newValue;
-                    this.edit({ custom_display_id_config: JSON.stringify(config) });
-                }}
-                    >
-                    </foxy-internal-text-control>
-
-                    ${config.start && config.length && startAsInt / 10 <= numericLength
-                    ? html `
-                          <table
-                            data-testid="custom-display-id-config-transaction-journal-entries-examples"
-                            style="font-family: monospace"
-                            class="col-span-2 text-xs text-secondary whitespace-nowrap"
-                          >
-                            <tbody>
-                              <tr>
-                                <td style="width: 1%">
-                                  <foxy-i18n
-                                    infer=""
-                                    key="custom-display-id-config-transaction-journal-entries-authcapture-example"
-                                  >
-                                  </foxy-i18n>
-                                </td>
-                                <td>
-                                  ${randomExampleId}${config.transaction_journal_entries
-                        .transaction_separator}${config.transaction_journal_entries
-                        .log_detail_request_types.transaction_authcapture
-                        .prefix}${randomEntryId}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td style="width: 1%">
-                                  <foxy-i18n
-                                    infer=""
-                                    key="custom-display-id-config-transaction-journal-entries-capture-example"
-                                  >
-                                  </foxy-i18n>
-                                </td>
-                                <td>
-                                  ${randomExampleId}${config.transaction_journal_entries
-                        .transaction_separator}${config.transaction_journal_entries
-                        .log_detail_request_types.transaction_capture
-                        .prefix}${randomEntryId}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td style="width: 1%">
-                                  <foxy-i18n
-                                    infer=""
-                                    key="custom-display-id-config-transaction-journal-entries-void-example"
-                                  >
-                                  </foxy-i18n>
-                                </td>
-                                <td>
-                                  ${randomExampleId}${config.transaction_journal_entries
-                        .transaction_separator}${config.transaction_journal_entries
-                        .log_detail_request_types.transaction_void
-                        .prefix}${randomEntryId}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td style="width: 1%">
-                                  <foxy-i18n
-                                    infer=""
-                                    key="custom-display-id-config-transaction-journal-entries-refund-example"
-                                  >
-                                  </foxy-i18n>
-                                </td>
-                                <td>
-                                  ${randomExampleId}${config.transaction_journal_entries
-                        .transaction_separator}${config.transaction_journal_entries
-                        .log_detail_request_types.transaction_refund
-                        .prefix}${randomEntryId}
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        `
-                    : ''}
-                  </div>
-                `
-                : ''}
-          `
-            : ''}
-    `;
+        return config;
     }
-    __renderSmtpConfig() {
-        return html `
-      <div
-        class="grid grid-cols-2 gap-m p-m rounded-t-l rounded-b-l border border-contrast-10 sm-col-span-2"
-      >
-        ${['host', 'port', 'username', 'password', 'security'].map(prop => {
-            const getValue = () => {
-                const config = JSON.parse(this.form.smtp_config || '{}');
-                return config[prop];
-            };
-            const setValue = (newValue) => {
-                var _a, _b, _c, _d, _e;
-                const config = JSON.parse(this.form.smtp_config || '{}');
-                this.edit({
-                    smtp_config: JSON.stringify({
-                        username: (_a = config.username) !== null && _a !== void 0 ? _a : '',
-                        password: (_b = config.password) !== null && _b !== void 0 ? _b : '',
-                        security: (_c = config.security) !== null && _c !== void 0 ? _c : '',
-                        host: (_d = config.host) !== null && _d !== void 0 ? _d : '',
-                        port: (_e = config.port) !== null && _e !== void 0 ? _e : '',
-                        [prop]: newValue,
-                    }),
-                });
+    __setCustomDisplayIdConfig(key, value) {
+        const currentConfig = this.__getCustomDisplayIdConfig();
+        currentConfig[key] = value;
+        this.edit({ custom_display_id_config: JSON.stringify(currentConfig) });
+    }
+    __getTransactionJournalEntriesConfig() {
+        return this.__getCustomDisplayIdConfig().transaction_journal_entries;
+    }
+    __setTransactionJournalEntriesConfig(key, value) {
+        const config = this.__getCustomDisplayIdConfig().transaction_journal_entries;
+        config[key] = value;
+        this.__setCustomDisplayIdConfig('transaction_journal_entries', config);
+    }
+    __setTransactionJournalEntriesPrefix(key, value) {
+        const config = this.__getTransactionJournalEntriesConfig();
+        config.log_detail_request_types[key].prefix = value;
+        this.__setTransactionJournalEntriesConfig('log_detail_request_types', config.log_detail_request_types);
+    }
+    __getSmtpConfig() {
+        var _a;
+        let config;
+        try {
+            config = JSON.parse((_a = this.form.smtp_config) !== null && _a !== void 0 ? _a : '');
+        }
+        catch (_b) {
+            config = {
+                username: '',
+                password: '',
+                security: '',
+                host: '',
+                port: '',
             };
-            const infer = `smtp-config-${prop}`;
-            if (prop === 'password') {
-                return html `
-              <foxy-internal-password-control
-                infer=${infer}
-                .getValue=${getValue}
-                .setValue=${setValue}
-              >
-              </foxy-internal-password-control>
-            `;
-            }
-            else if (prop === 'port') {
-                return html `
-              <foxy-internal-integer-control
-                infer=${infer}
-                .getValue=${getValue}
-                .setValue=${setValue}
-              >
-              </foxy-internal-integer-control>
-            `;
-            }
-            else if (prop === 'security') {
-                return html `
-              <foxy-internal-radio-group-control
-                infer=${infer}
-                class="-mt-xs -mx-xs -mb-m col-span-2"
-                .getValue=${getValue}
-                .setValue=${setValue}
-                .options=${[
-                    { label: 'option_ssl', value: 'ssl' },
-                    { label: 'option_tls', value: 'tls' },
-                    { label: 'option_none', value: '' },
-                ]}
-              >
-              </foxy-internal-radio-group-control>
-            `;
-            }
-            else {
-                return html `
-              <foxy-internal-text-control
-                infer=${infer}
-                .getValue=${getValue}
-                .setValue=${setValue}
-              >
-              </foxy-internal-text-control>
-            `;
-            }
-        })}
-      </div>
-    `;
+        }
+        return config;
     }
-    __renderWarning(key, link) {
-        return html `
-      <div class="p-s leading-m text-s rounded bg-primary-10 text-primary sm-col-span-2">
-        <foxy-i18n infer="" key=${key}></foxy-i18n>
-
-        ${link
-            ? html `
-              <a
-                target="_blank"
-                class="font-medium hover-underline rounded focus-outline-none focus-ring-2 focus-ring-primary"
-                href=${link.href}
-                lang="en"
-              >
-                ${link.caption}
-                <iron-icon class="icon-inline" icon="icons:open-in-new"></iron-icon>
-              </a>
-            `
-            : ''}
-      </div>
-    `;
+    __setSmtpConfig(key, value) {
+        const config = this.__getSmtpConfig();
+        config[key] = value;
+        this.edit({ smtp_config: JSON.stringify(config) });
     }
     __renderLoader(index) {
         var _a;