@foxy.io/elements 1.39.0-beta.4 → 1.39.0-beta.6

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

@@ -7,6 +7,14 @@ import slugify from '@sindresorhus/slugify';
 import merge from 'lodash-es/merge';
 const NS = 'store-form';
 const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+function parseWebhookKey(webhookKey) {
+    try {
+        return JSON.parse(webhookKey);
+    }
+    catch (_a) {
+        return null;
+    }
+}
 /**
  * Form element for store settings (`fx:store`).
  *
@@ -22,6 +30,8 @@ export class StoreForm extends Base {
         this.customerPasswordHashTypes = null;
         /** URL of the `fx:shipping_address_types` property helper resource. */
         this.shippingAddressTypes = null;
+        /** URL of the Store Secrets settings page if you are using this form on multiple pages. */
+        this.storeSecretsPageUrl = null;
         /** hCaptcha site key for signup verification. If provided, requires users to complete a captcha before creating a store. */
         this.hCaptchaSiteKey = null;
         /**
@@ -212,30 +222,31 @@ export class StoreForm extends Base {
             { 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.__singleWebhookKeyGeneratorOptions = { length: 128, separator: '' };
+        this.__jsonWebhookKeyGeneratorOptions = { length: 64, separator: '' };
+        this.__useSingleWebhookKeyGetValue = () => {
+            var _a;
+            try {
+                JSON.parse((_a = this.form.webhook_key) !== null && _a !== void 0 ? _a : '');
+                return false;
+            }
+            catch (_b) {
+                return true;
+            }
         };
-        this.__webhookKeySsoSetValue = (newValue) => {
-            this.__setWebhookKey('sso', newValue);
+        this.__useSingleWebhookKeySetValue = (newValue) => {
+            if (newValue) {
+                this.edit({ webhook_key: '' });
+            }
+            else {
+                const parsedKey = {
+                    cart_signing: '',
+                    xml_datafeed: '',
+                    api_legacy: '',
+                    sso: '',
+                };
+                this.edit({ webhook_key: JSON.stringify(parsedKey) });
+            }
         };
         this.__hCaptchaToken = null;
     }
@@ -245,6 +256,7 @@ export class StoreForm extends Base {
             reportingStoreDomainExists: { attribute: 'reporting-store-domain-exists' },
             customerPasswordHashTypes: { attribute: 'customer-password-hash-types' },
             shippingAddressTypes: { attribute: 'shipping-address-types' },
+            storeSecretsPageUrl: { attribute: 'store-secrets-page-url' },
             hCaptchaSiteKey: { attribute: 'h-captcha-site-key' },
             storeVersions: { attribute: 'store-versions' },
             checkoutTypes: { attribute: 'checkout-types' },
@@ -291,15 +303,47 @@ export class StoreForm extends Base {
             ({ region: v }) => (v && v.length <= 100) || 'region:v8n_too_long',
             ({ country: v }) => !!v || 'country:v8n_required',
             ({ logo_url: v }) => !v || v.length <= 200 || 'logo-url:v8n_too_long',
+            ({ webhook_url: v, use_webhook }) => !use_webhook || !!v || 'webhook-url:v8n_required',
             ({ webhook_url: v, use_webhook }) => {
                 return !use_webhook || !v || v.length <= 300 || 'webhook-url:v8n_too_long';
             },
-            ({ webhook_key: v, use_webhook: on, use_cart_validation: hmac }) => {
-                return (!on && !hmac) || !!v || 'webhook-key:v8n_required';
+            ({ webhook_key: v }) => v === void 0 || v.length > 0 || 'webhook-key:v8n_required',
+            ({ webhook_key: v }, host) => {
+                var _a;
+                // TODO remove the line below when API limit is corrected to match the legacy admin
+                if (((_a = host.data) === null || _a === void 0 ? void 0 : _a.webhook_key) === v)
+                    return true;
+                return !v || v.length <= 100 || 'webhook-key:v8n_too_long';
             },
-            ({ webhook_key: v, use_webhook: on, use_cart_validation: hmac }) => {
-                return (!on && !hmac) || !v || v.length <= 200 || 'webhook-key:v8n_too_long';
+            ({ webhook_key: v, use_webhook: on }) => {
+                const parsedV = parseWebhookKey(v !== null && v !== void 0 ? v : '');
+                const code = 'use-webhook:v8n_webhook_key_required';
+                return !on || !!(parsedV ? parsedV.xml_datafeed : v) || code;
             },
+            ({ webhook_key: v, use_cart_validation: on }) => {
+                const parsedV = parseWebhookKey(v !== null && v !== void 0 ? v : '');
+                const code = 'use-cart-validation:v8n_webhook_key_required';
+                return !on || !!(parsedV ? parsedV.cart_signing : v) || code;
+            },
+            ({ webhook_key: v, use_single_sign_on: on }) => {
+                const parsedV = parseWebhookKey(v !== null && v !== void 0 ? v : '');
+                const code = 'use-single-sign-on:v8n_webhook_key_required';
+                return !on || !!(parsedV ? parsedV.sso : v) || code;
+            },
+            ...['xml_datafeed', 'cart_signing', 'api_legacy', 'sso']
+                .map(prop => [
+                ({ webhook_key: v }) => {
+                    const parsedV = parseWebhookKey(v !== null && v !== void 0 ? v : '');
+                    const code = `webhook-key-${prop.replace(/_/g, '-')}:v8n_required`;
+                    return !parsedV || !!parsedV[prop] || code;
+                },
+                ({ webhook_key: v }) => {
+                    const parsedV = parseWebhookKey(v !== null && v !== void 0 ? v : '');
+                    const code = `webhook-key-${prop.replace(/_/g, '-')}:v8n_too_long`;
+                    return !parsedV || parsedV[prop].length <= 100 || code;
+                },
+            ])
+                .flat(),
             ({ single_sign_on_url: v, use_single_sign_on: on }) => {
                 return !on || !!v || 'single-sign-on-url:v8n_required';
             },
@@ -319,7 +363,7 @@ export class StoreForm extends Base {
         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;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         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');
@@ -353,7 +397,7 @@ export class StoreForm extends Base {
                 regionsURL.searchParams.set('country_code', country);
             regionsUrl = regionsURL.toString();
         }
-        catch (_q) {
+        catch (_v) {
             regionsUrl = undefined;
         }
         const customDisplayIdConfig = this.__getCustomDisplayIdConfig();
@@ -361,6 +405,11 @@ export class StoreForm extends Base {
         const logDetailRequestTypes = transactionJournalEntriesConfig.log_detail_request_types;
         const displayIdExamples = this.__displayIdExamples;
         const journalIdExamples = this.__journalIdExamples;
+        const rawWebhookKey = (_p = (_o = this.data) === null || _o === void 0 ? void 0 : _o.webhook_key) !== null && _p !== void 0 ? _p : '';
+        const parsedWebhookKey = parseWebhookKey(rawWebhookKey);
+        const cartSigningKey = (_q = parsedWebhookKey === null || parsedWebhookKey === void 0 ? void 0 : parsedWebhookKey.cart_signing) !== null && _q !== void 0 ? _q : rawWebhookKey;
+        const xmlDatafeedKey = (_r = parsedWebhookKey === null || parsedWebhookKey === void 0 ? void 0 : parsedWebhookKey.xml_datafeed) !== null && _r !== void 0 ? _r : rawWebhookKey;
+        const ssoKey = (_s = parsedWebhookKey === null || parsedWebhookKey === void 0 ? void 0 : parsedWebhookKey.sso) !== null && _s !== void 0 ? _s : rawWebhookKey;
         return html `
       ${this.renderHeader()}
 
@@ -447,23 +496,72 @@ export class StoreForm extends Base {
         </foxy-internal-select-control>
       </foxy-internal-summary-control>
 
-      <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-summary-control infer="store-secrets" id="store-secrets">
+        <foxy-internal-switch-control
+          infer="use-single-secret"
+          .getValue=${this.__useSingleWebhookKeyGetValue}
+          .setValue=${this.__useSingleWebhookKeySetValue}
         >
-        </foxy-internal-password-control>
+        </foxy-internal-switch-control>
+
+        ${this.__useSingleWebhookKeyGetValue()
+            ? html `
+              <foxy-internal-password-control
+                layout="summary-item"
+                infer="webhook-key"
+                show-generator
+                .generatorOptions=${this.__singleWebhookKeyGeneratorOptions}
+              >
+              </foxy-internal-password-control>
+            `
+            : html `
+              <foxy-internal-password-control
+                json-path="api_legacy"
+                property="webhook_key"
+                layout="summary-item"
+                infer="webhook-key-api-legacy"
+                show-generator
+                .generatorOptions=${this.__jsonWebhookKeyGeneratorOptions}
+              >
+              </foxy-internal-password-control>
+
+              <foxy-internal-password-control
+                json-path="cart_signing"
+                property="webhook_key"
+                layout="summary-item"
+                infer="webhook-key-cart-signing"
+                show-generator
+                .generatorOptions=${this.__jsonWebhookKeyGeneratorOptions}
+              >
+              </foxy-internal-password-control>
+
+              <foxy-internal-password-control
+                json-path="sso"
+                property="webhook_key"
+                layout="summary-item"
+                infer="webhook-key-sso"
+                show-generator
+                .generatorOptions=${this.__jsonWebhookKeyGeneratorOptions}
+              >
+              </foxy-internal-password-control>
+
+              <foxy-internal-password-control
+                json-path="xml_datafeed"
+                property="webhook_key"
+                layout="summary-item"
+                infer="webhook-key-xml-datafeed"
+                show-generator
+                .generatorOptions=${this.__jsonWebhookKeyGeneratorOptions}
+              >
+              </foxy-internal-password-control>
+            `}
       </foxy-internal-summary-control>
 
       <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')}
+          placeholder=${(_u = (_t = this.__getStoreEmailValue()[0]) === null || _t === void 0 ? void 0 : _t.value) !== null && _u !== void 0 ? _u : this.t('emails.from-email.placeholder')}
         >
         </foxy-internal-text-control>
 
@@ -560,15 +658,9 @@ export class StoreForm extends Base {
         <foxy-internal-switch-control infer="use-cart-validation" helper-text-as-tooltip>
         </foxy-internal-switch-control>
 
-        <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-password-control>
+        ${cartSigningKey && this.form.use_cart_validation
+            ? this.__renderReadonlyWebhookKey('webhook-key-cart-signing', cartSigningKey)
+            : ''}
       </foxy-internal-summary-control>
 
       <foxy-internal-summary-control infer="checkout">
@@ -619,15 +711,7 @@ export class StoreForm extends Base {
             ? 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>
+              ${ssoKey ? this.__renderReadonlyWebhookKey('webhook-key-sso', ssoKey) : ''}
             `
             : ''}
       </foxy-internal-summary-control>
@@ -816,15 +900,9 @@ export class StoreForm extends Base {
             ? 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>
+              ${xmlDatafeedKey
+                ? this.__renderReadonlyWebhookKey('webhook-key-xml-datafeed', xmlDatafeedKey)
+                : ''}
             `
             : ''}
       </foxy-internal-summary-control>
@@ -945,23 +1023,6 @@ export class StoreForm extends Base {
     get __hCaptcha() {
         return this.renderRoot.querySelector('h-captcha');
     }
-    __getWebhookKey() {
-        var _a, _b;
-        let parsedKey;
-        try {
-            parsedKey = JSON.parse((_a = this.form.webhook_key) !== null && _a !== void 0 ? _a : '');
-        }
-        catch (_c) {
-            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 parsedKey;
-    }
-    __setWebhookKey(key, value) {
-        const parsedKey = this.__getWebhookKey();
-        parsedKey[key] = value;
-        this.edit({ webhook_key: JSON.stringify(parsedKey) });
-    }
     __getCustomDisplayIdConfig() {
         const defaultConfig = {
             enabled: false,
@@ -1039,5 +1100,34 @@ export class StoreForm extends Base {
       `,
         };
     }
+    __renderReadonlyWebhookKey(scope, key) {
+        var _a;
+        return html `
+      <div class="leading-xs">
+        <div class="flex items-center gap-s">
+          <p class="flex-1">
+            <foxy-i18n infer=${scope} key="label"></foxy-i18n>
+          </p>
+          <p class="text-tertiary">${'*'.repeat(8)}${key.substr(-4)}</p>
+          <foxy-copy-to-clipboard
+            layout="complete"
+            infer="${scope} copy-to-clipboard"
+            theme="contrast tertiary-inline"
+            text=${key}
+          >
+          </foxy-copy-to-clipboard>
+        </div>
+        <p class="text-xs text-secondary">
+          <foxy-i18n infer=${scope} key="helper_text"></foxy-i18n>
+          <a
+            class="text-body font-medium rounded-s hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
+            href=${(_a = this.storeSecretsPageUrl) !== null && _a !== void 0 ? _a : '#store-secrets'}
+          >
+            <foxy-i18n infer=${scope} key="link_text"></foxy-i18n>
+          </a>
+        </p>
+      </div>
+    `;
+    }
 }
 //# sourceMappingURL=StoreForm.js.map