@foxy.io/elements 1.25.0-beta.1 → 1.25.0-beta.3

package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.js

@@ -69,28 +69,28 @@ const Base = TranslatableMixin(InternalForm, NS);
  * @slot webhook-legacy-xml-title:after
  * @slot webhook-legacy-xml-url:before
  * @slot webhook-legacy-xml-url:after
- * @slot webhook-webflow-site-id:before
- * @slot webhook-webflow-site-id:after
- * @slot webhook-webflow-site-name:before
- * @slot webhook-webflow-site-name:after
- * @slot webhook-webflow-collection-id:before
- * @slot webhook-webflow-collection-id:after
- * @slot webhook-webflow-collection-name:before
- * @slot webhook-webflow-collection-name:after
- * @slot webhook-webflow-sku-field-id:before
- * @slot webhook-webflow-sku-field-id:after
- * @slot webhook-webflow-sku-field-name:before
- * @slot webhook-webflow-sku-field-name:after
- * @slot webhook-webflow-inventory-field-id:before
- * @slot webhook-webflow-inventory-field-id:after
- * @slot webhook-webflow-inventory-field-name:before
- * @slot webhook-webflow-inventory-field-name:after
- * @slot webhook-webflow-auth:before
- * @slot webhook-webflow-auth:after
- * @slot webhook-zapier-event:before
- * @slot webhook-zapier-event:after
- * @slot webhook-zapier-url:before
- * @slot webhook-zapier-url:after
+ * @slot webflow-site-id:before
+ * @slot webflow-site-id:after
+ * @slot webflow-site-name:before
+ * @slot webflow-site-name:after
+ * @slot webflow-collection-id:before
+ * @slot webflow-collection-id:after
+ * @slot webflow-collection-name:before
+ * @slot webflow-collection-name:after
+ * @slot webflow-sku-field-id:before
+ * @slot webflow-sku-field-id:after
+ * @slot webflow-sku-field-name:before
+ * @slot webflow-sku-field-name:after
+ * @slot webflow-inventory-field-id:before
+ * @slot webflow-inventory-field-id:after
+ * @slot webflow-inventory-field-name:before
+ * @slot webflow-inventory-field-name:after
+ * @slot webflow-auth:before
+ * @slot webflow-auth:after
+ * @slot zapier-event:before
+ * @slot zapier-event:after
+ * @slot zapier-url:before
+ * @slot zapier-url:after
  *
  * @element foxy-native-integration-form
  * @since 1.25.0
@@ -192,7 +192,7 @@ export class NativeIntegrationForm extends Base {
         this.__onesourceProductOrderPriorityGetValue = () => {
             var _a, _b;
             const value = (_b = (_a = this.__config) === null || _a === void 0 ? void 0 : _a.product_order_priority.split(',')) !== null && _b !== void 0 ? _b : [];
-            return value.map((code) => ({ value: code }));
+            return value.filter((v) => !!v).map((v) => ({ value: v }));
         };
         this.__onesourceProductOrderPrioritySetValue = (value) => {
             this.__config = { product_order_priority: value.map(i => i.value).join(',') };
@@ -236,6 +236,13 @@ export class NativeIntegrationForm extends Base {
             ({ provider: p = 'avalara', config: c = '{}' }) => {
                 return p !== 'avalara' || !!parse(c).company_code || 'avalara-company-code:v8n_required';
             },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                if (p !== 'avalara')
+                    return true;
+                const mappings = parse(c).category_to_product_tax_code_mappings;
+                const err = 'avalara-category-to-product-tax-code-mappings:v8n_required';
+                return (mappings && Object.entries(mappings).length > 0) || err;
+            },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
                 return p !== 'taxjar' || !!parse(c).api_token || 'taxjar-api-token:v8n_required';
             },
@@ -285,60 +292,48 @@ export class NativeIntegrationForm extends Base {
                 return p === 'webhook' && s === 'legacy_xml' && err ? `${prefix}:${err}` : true;
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, site_id: v } = parse(c);
-                const err = 'webhook-webflow-site-id:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                return p !== 'webflow' || !!parse(c).site_id || 'webflow-site-id:v8n_required';
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, site_name: v } = parse(c);
-                const err = 'webhook-webflow-site-name:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                return p !== 'webflow' || !!parse(c).site_name || 'webflow-site-name:v8n_required';
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, collection_id: v } = parse(c);
-                const err = 'webhook-webflow-collection-id:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                return p !== 'webflow' || !!parse(c).collection_id || 'webflow-collection-id:v8n_required';
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, collection_name: v } = parse(c);
-                const err = 'webhook-webflow-collection-name:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                const err = 'webflow-collection-name:v8n_required';
+                return p !== 'webflow' || !!parse(c).collection_name || err;
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, sku_field_id: v } = parse(c);
-                const err = 'webhook-webflow-sku-field-id:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                return p !== 'webflow' || !!parse(c).sku_field_id || 'webflow-sku-field-id:v8n_required';
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, sku_field_name: v } = parse(c);
-                const err = 'webhook-webflow-sku-field-name:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                const err = 'webflow-sku-field-name:v8n_required';
+                return p !== 'webflow' || !!parse(c).sku_field_name || err;
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, inventory_field_id: v } = parse(c);
-                const err = 'webhook-webflow-inventory-field-id:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                const err = 'webflow-inventory-field-id:v8n_required';
+                return p !== 'webflow' || !!parse(c).inventory_field_id || err;
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, inventory_field_name: v } = parse(c);
-                const err = 'webhook-webflow-inventory-field-name:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                const err = 'webflow-inventory-field-name:v8n_required';
+                return p !== 'webflow' || !!parse(c).inventory_field_name || err;
             },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
-                const { service: s, auth: v } = parse(c);
-                const err = 'webhook-webflow-auth:v8n_required';
-                return p !== 'webhook' || s !== 'webflow' || !!v || err;
+                return p !== 'webflow' || !!parse(c).auth || 'webflow-auth:v8n_required';
             },
         ];
     }
     get readonlySelector() {
         const match = [super.readonlySelector.toString()];
-        if (this.href)
-            match.push('provider', 'webhook-zapier-event', 'webhook-zapier-url');
+        if (this.href) {
+            match.push('apple-pay-merchant-id', 'custom-tax-url', 'zapier-events', 'zapier-url', 'provider');
+        }
         return new BooleanSelector(match.join(' ').trim());
     }
     renderBody() {
-        const provider = this.__providerGetValue();
+        var _a;
+        const provider = (_a = this.form.provider) !== null && _a !== void 0 ? _a : 'avalara';
         return html `
       ${this.href
             ? provider === 'webhook'
@@ -360,9 +355,17 @@ export class NativeIntegrationForm extends Base {
                 ? this.__renderTaxJarConfig()
                 : provider === 'onesource'
                     ? this.__renderOneSourceConfig()
-                    : provider === 'webhook'
-                        ? this.__renderWebhookConfig()
-                        : ''}
+                    : provider === 'webflow'
+                        ? this.__renderWebflowConfig()
+                        : provider === 'zapier'
+                            ? this.__renderZapierConfig()
+                            : provider === 'webhook'
+                                ? this.__renderWebhookConfig()
+                                : provider === 'apple_pay'
+                                    ? this.__renderApplePayConfig()
+                                    : provider === 'custom_tax'
+                                        ? this.__renderCustomTaxConfig()
+                                        : ''}
       ${super.renderBody()}
     `;
     }
@@ -395,25 +398,28 @@ export class NativeIntegrationForm extends Base {
         }
     }
     set __config(value) {
+        var _a;
         const config = this.__config;
-        const provider = this.form.provider;
+        const provider = (_a = this.form.provider) !== null && _a !== void 0 ? _a : 'avalara';
         const defaultConfig = (() => {
+            if (provider === 'avalara')
+                return defaults.avalara;
             if (provider === 'taxjar')
                 return defaults.taxjar;
             if (provider === 'onesource')
                 return defaults.onesource;
+            if (provider === 'webflow')
+                return defaults.webflow;
+            if (provider === 'zapier')
+                return defaults.zapier;
             if (provider === 'webhook') {
                 if ((config === null || config === void 0 ? void 0 : config.service) === 'legacy_xml')
                     return defaults.webhookLegacyXml;
-                if ((config === null || config === void 0 ? void 0 : config.service) === 'webflow')
-                    return defaults.webhookWebflow;
-                if ((config === null || config === void 0 ? void 0 : config.service) === 'zapier')
-                    return defaults.webhookZapier;
                 return defaults.webhookJson;
             }
-            return defaults.avalara;
         })();
-        this.edit({ config: JSON.stringify({ ...defaultConfig, ...config, ...value }) });
+        const newConfig = JSON.stringify({ ...defaultConfig, ...config, ...value });
+        this.edit({ provider, config: newConfig });
     }
     __renderAvalaraConfig() {
         var _a;
@@ -567,38 +573,31 @@ export class NativeIntegrationForm extends Base {
     `;
     }
     __renderWebhookConfig() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b;
         return html `
-      ${((_a = this.__config) === null || _a === void 0 ? void 0 : _a.service) === 'json' || ((_b = this.__config) === null || _b === void 0 ? void 0 : _b.service) === 'legacy_xml'
-            ? html `
-            <p
-              style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
-              class="rounded bg-error-10 text-error font-medium"
-            >
-              <foxy-i18n infer="webhook-warning" key="warning_text"></foxy-i18n>
-              <br />
-              <br />
-              <a
-                target="_blank"
-                class="text-body rounded hover-underline hover-cursor-pointer focus-outline-none focus-ring-2 focus-ring-error-50"
-                lang="en"
-                rel="noopener"
-                href="https://www.foxy.io/blog/new-feature-json-webhook/"
-              >
-                <foxy-i18n infer="webhook-warning" key="link_text"></foxy-i18n>
-              </a>
-            </p>
-          `
-            : ''}
-      ${((_c = this.__config) === null || _c === void 0 ? void 0 : _c.service) === 'json'
+      <p
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+        class="rounded bg-error-10 text-error font-medium"
+      >
+        <foxy-i18n infer="webhook-warning" key="warning_text"></foxy-i18n>
+        <br />
+        <br />
+        <a
+          target="_blank"
+          class="text-body rounded hover-underline hover-cursor-pointer focus-outline-none focus-ring-2 focus-ring-error-50"
+          lang="en"
+          rel="noopener"
+          href="https://www.foxy.io/blog/new-feature-json-webhook/"
+        >
+          <foxy-i18n infer="webhook-warning" key="link_text"></foxy-i18n>
+        </a>
+      </p>
+
+      ${((_a = this.__config) === null || _a === void 0 ? void 0 : _a.service) === 'json'
             ? this.__renderWebhookJsonConfig()
-            : ((_d = this.__config) === null || _d === void 0 ? void 0 : _d.service) === 'legacy_xml'
+            : ((_b = this.__config) === null || _b === void 0 ? void 0 : _b.service) === 'legacy_xml'
                 ? this.__renderWebhookLegacyXmlConfig()
-                : ((_e = this.__config) === null || _e === void 0 ? void 0 : _e.service) === 'webflow'
-                    ? this.__renderWebhookWebflowConfig()
-                    : ((_f = this.__config) === null || _f === void 0 ? void 0 : _f.service) === 'zapier'
-                        ? this.__renderWebhookZapierConfig()
-                        : ''}
+                : ''}
     `;
     }
     __renderWebhookJsonConfig() {
@@ -666,60 +665,60 @@ export class NativeIntegrationForm extends Base {
       </foxy-internal-radio-group-control>
     `;
     }
-    __renderWebhookWebflowConfig() {
+    __renderWebflowConfig() {
         return html `
       <div class="grid grid-cols-2 gap-m">
         <foxy-internal-text-control
-          infer="webhook-webflow-site-id"
+          infer="webflow-site-id"
           .getValue=${this.__createConfigGetterFor('site_id')}
           .setValue=${this.__createConfigSetterFor('site_id')}
         >
         </foxy-internal-text-control>
 
         <foxy-internal-text-control
-          infer="webhook-webflow-site-name"
+          infer="webflow-site-name"
           .getValue=${this.__createConfigGetterFor('site_name')}
           .setValue=${this.__createConfigSetterFor('site_name')}
         >
         </foxy-internal-text-control>
 
         <foxy-internal-text-control
-          infer="webhook-webflow-collection-id"
+          infer="webflow-collection-id"
           .getValue=${this.__createConfigGetterFor('collection_id')}
           .setValue=${this.__createConfigSetterFor('collection_id')}
         >
         </foxy-internal-text-control>
 
         <foxy-internal-text-control
-          infer="webhook-webflow-collection-name"
+          infer="webflow-collection-name"
           .getValue=${this.__createConfigGetterFor('collection_name')}
           .setValue=${this.__createConfigSetterFor('collection_name')}
         >
         </foxy-internal-text-control>
 
         <foxy-internal-text-control
-          infer="webhook-webflow-sku-field-id"
+          infer="webflow-sku-field-id"
           .getValue=${this.__createConfigGetterFor('sku_field_id')}
           .setValue=${this.__createConfigSetterFor('sku_field_id')}
         >
         </foxy-internal-text-control>
 
         <foxy-internal-text-control
-          infer="webhook-webflow-sku-field-name"
+          infer="webflow-sku-field-name"
           .getValue=${this.__createConfigGetterFor('sku_field_name')}
           .setValue=${this.__createConfigSetterFor('sku_field_name')}
         >
         </foxy-internal-text-control>
 
         <foxy-internal-text-control
-          infer="webhook-webflow-inventory-field-id"
+          infer="webflow-inventory-field-id"
           .getValue=${this.__createConfigGetterFor('inventory_field_id')}
           .setValue=${this.__createConfigSetterFor('inventory_field_id')}
         >
         </foxy-internal-text-control>
 
         <foxy-internal-text-control
-          infer="webhook-webflow-inventory-field-name"
+          infer="webflow-inventory-field-name"
           .getValue=${this.__createConfigGetterFor('inventory_field_name')}
           .setValue=${this.__createConfigSetterFor('inventory_field_name')}
         >
@@ -727,31 +726,59 @@ export class NativeIntegrationForm extends Base {
       </div>
 
       <foxy-internal-password-control
-        infer="webhook-webflow-auth"
+        infer="webflow-auth"
         .getValue=${this.__createConfigGetterFor('auth')}
         .setValue=${this.__createConfigSetterFor('auth')}
       >
       </foxy-internal-password-control>
     `;
     }
-    __renderWebhookZapierConfig() {
+    __renderZapierConfig() {
         return html `
-      <foxy-internal-text-control
-        infer="webhook-zapier-event"
-        .getValue=${this.__createConfigGetterFor('event')}
-        .setValue=${this.__createConfigSetterFor('event')}
+      <foxy-internal-editable-list-control
+        infer="zapier-events"
+        .getValue=${this.__createConfigGetterFor('events')}
+        .setValue=${this.__createConfigSetterFor('events')}
       >
-      </foxy-internal-text-control>
+      </foxy-internal-editable-list-control>
 
       <foxy-internal-text-area-control
-        infer="webhook-zapier-url"
+        infer="zapier-url"
         .getValue=${this.__createConfigGetterFor('url')}
         .setValue=${this.__createConfigSetterFor('url')}
       >
       </foxy-internal-text-area-control>
 
       <p class="text-xs text-secondary leading-xs">
-        <foxy-i18n infer="webhook-zapier-warning" key="warning_text"></foxy-i18n>
+        <foxy-i18n infer="zapier-warning" key="warning_text"></foxy-i18n>
+      </p>
+    `;
+    }
+    __renderApplePayConfig() {
+        return html `
+      <foxy-internal-text-control
+        infer="apple-pay-merchant-id"
+        .getValue=${this.__createConfigGetterFor('merchantID')}
+        .setValue=${this.__createConfigSetterFor('merchantID')}
+      >
+      </foxy-internal-text-control>
+
+      <p class="text-xs text-secondary leading-xs">
+        <foxy-i18n infer="apple-pay-warning" key="warning_text"></foxy-i18n>
+      </p>
+    `;
+    }
+    __renderCustomTaxConfig() {
+        return html `
+      <foxy-internal-text-control
+        infer="custom-tax-url"
+        .getValue=${this.__createConfigGetterFor('url')}
+        .setValue=${this.__createConfigSetterFor('url')}
+      >
+      </foxy-internal-text-control>
+
+      <p class="text-xs text-secondary leading-xs">
+        <foxy-i18n infer="custom-tax-warning" key="warning_text"></foxy-i18n>
       </p>
     `;
     }