@foxy.io/elements 1.24.1-beta.2 → 1.25.0-beta.2

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

@@ -0,0 +1,753 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { html } from 'lit-html';
+import * as defaults from "./defaults.js";
+import memoize from 'lodash-es/memoize';
+const NS = 'native-integration-form';
+const Base = TranslatableMixin(InternalForm, NS);
+/**
+ * Form element for configuring native integrations (`fx:native_integration`).
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ * @slot delete:before
+ * @slot delete:after
+ * @slot create:before
+ * @slot create:after
+ * @slot provider:before
+ * @slot provider:after
+ * @slot avalara-service-url:before
+ * @slot avalara-service-url:after
+ * @slot avalara-id:before
+ * @slot avalara-id:after
+ * @slot avalara-key:before
+ * @slot avalara-key:after
+ * @slot avalara-company-code:before
+ * @slot avalara-company-code:after
+ * @slot avalara-options:before
+ * @slot avalara-options:after
+ * @slot avalara-address-validation-countries:before
+ * @slot avalara-address-validation-countries:after
+ * @slot avalara-category-to-product-tax-code-mappings:before
+ * @slot avalara-category-to-product-tax-code-mappings:after
+ * @slot taxjar-api-token:before
+ * @slot taxjar-api-token:after
+ * @slot taxjar-category-to-product-tax-code-mappings:before
+ * @slot taxjar-category-to-product-tax-code-mappings:after
+ * @slot taxjar-options:before
+ * @slot taxjar-options:after
+ * @slot onesource-service-url:before
+ * @slot onesource-service-url:after
+ * @slot onesource-external-company-id:before
+ * @slot onesource-external-company-id:after
+ * @slot onesource-calling-system-number:before
+ * @slot onesource-calling-system-number:after
+ * @slot onesource-from-city:before
+ * @slot onesource-from-city:after
+ * @slot onesource-host-system:before
+ * @slot onesource-host-system:after
+ * @slot onesource-company-role:before
+ * @slot onesource-company-role:after
+ * @slot onesource-part-number-product-option:before
+ * @slot onesource-part-number-product-option:after
+ * @slot onesource-product-order-priority:before
+ * @slot onesource-product-order-priority:after
+ * @slot onesource-audit-settings:before
+ * @slot onesource-audit-settings:after
+ * @slot webhook-service:before
+ * @slot webhook-service:after
+ * @slot webhook-json-title:before
+ * @slot webhook-json-title:after
+ * @slot webhook-json-encryption-key:before
+ * @slot webhook-json-encryption-key:after
+ * @slot webhook-json-url:before
+ * @slot webhook-json-url:after
+ * @slot webhook-json-events:before
+ * @slot webhook-json-events:after
+ * @slot webhook-legacy-xml-title:before
+ * @slot webhook-legacy-xml-title:after
+ * @slot webhook-legacy-xml-url:before
+ * @slot webhook-legacy-xml-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
+ */
+export class NativeIntegrationForm extends Base {
+    constructor() {
+        super(...arguments);
+        this.templates = {};
+        this.__createConfigGetterFor = memoize((key) => {
+            return () => { var _a; return (_a = this.__config) === null || _a === void 0 ? void 0 : _a[key]; };
+        });
+        this.__createConfigSetterFor = memoize((key) => {
+            return (value) => (this.__config = { [key]: value });
+        });
+        this.__providerGetValue = () => {
+            var _a;
+            return (_a = this.form.provider) !== null && _a !== void 0 ? _a : 'avalara';
+        };
+        this.__providerSetValue = (value) => {
+            this.edit({ provider: value, config: '{}' });
+            this.__config = {};
+        };
+        this.__templateProviderOptions = [
+            { value: 'avalara', label: 'option_avalara' },
+            { value: 'onesource', label: 'option_onesource' },
+            { value: 'taxjar', label: 'option_taxjar' },
+            { value: 'webflow', label: 'option_webflow' },
+        ];
+        this.__avalaraConfigOptions = [
+            {
+                value: 'use_ava_tax',
+                label: 'option_use_ava_tax',
+            },
+            {
+                value: 'enable_colorado_delivery_fee',
+                label: 'option_enable_colorado_delivery_fee',
+            },
+            {
+                value: 'create_invoice',
+                label: 'option_create_invoice',
+            },
+            {
+                value: 'use_address_validation',
+                label: 'option_use_address_validation',
+            },
+        ];
+        this.__taxjarConfigOptions = [
+            {
+                value: 'create_invoice',
+                label: 'option_create_invoice',
+            },
+        ];
+        this.__configOptionsGetValue = () => {
+            const config = this.__config;
+            const value = [];
+            if (config === null || config === void 0 ? void 0 : config.enable_colorado_delivery_fee)
+                value.push('enable_colorado_delivery_fee');
+            if (config === null || config === void 0 ? void 0 : config.use_address_validation)
+                value.push('use_address_validation');
+            if (config === null || config === void 0 ? void 0 : config.create_invoice)
+                value.push('create_invoice');
+            if (config === null || config === void 0 ? void 0 : config.use_ava_tax)
+                value.push('use_ava_tax');
+            return value;
+        };
+        this.__configOptionsSetValue = (value) => {
+            this.__config = {
+                enable_colorado_delivery_fee: value.includes('enable_colorado_delivery_fee'),
+                use_address_validation: value.includes('use_address_validation'),
+                create_invoice: value.includes('create_invoice'),
+                use_ava_tax: value.includes('use_ava_tax'),
+            };
+        };
+        this.__avalaraAddressValidationCountriesOptions = [
+            { value: 'US', label: 'option_US' },
+            { value: 'CA', label: 'option_CA' },
+        ];
+        this.__codeMappingsGetValue = () => {
+            var _a, _b;
+            const mappings = (_b = (_a = this.__config) === null || _a === void 0 ? void 0 : _a.category_to_product_tax_code_mappings) !== null && _b !== void 0 ? _b : {};
+            return Object.entries(mappings).map(([foxyCategory, vndTaxCode]) => {
+                return { value: `${foxyCategory}:${vndTaxCode}` };
+            });
+        };
+        this.__codeMappingsSetValue = (value) => {
+            const mappings = {};
+            for (const { value: mapping } of value) {
+                const [foxyCategory, vndTaxCode] = mapping.split(':');
+                if (foxyCategory && vndTaxCode)
+                    mappings[foxyCategory] = vndTaxCode;
+            }
+            this.__config = { category_to_product_tax_code_mappings: mappings };
+        };
+        this.__onesourceCompanyRoleOptions = [
+            { value: 'B', label: 'option_buyer' },
+            { value: 'M', label: 'option_middleman' },
+            { value: 'S', label: 'option_seller' },
+        ];
+        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.filter((v) => !!v).map((v) => ({ value: v }));
+        };
+        this.__onesourceProductOrderPrioritySetValue = (value) => {
+            this.__config = { product_order_priority: value.map(i => i.value).join(',') };
+        };
+        this.__onesourceAuditSettingsOptions = [
+            { value: 'capture_only', label: 'option_capture_only' },
+            { value: 'auth_and_capture', label: 'option_auth_and_capture' },
+            { value: 'never', label: 'option_never' },
+        ];
+        this.__webhookServiceOptions = [
+            { value: 'json', label: 'option_json' },
+            { value: 'legacy_xml', label: 'option_legacy_xml' },
+        ];
+        this.__webhookJsonEventsOptions = [
+            { value: 'transaction/created', label: 'option_transaction_created' },
+            { value: 'subscription/cancelled', label: 'option_subscription_cancelled' },
+        ];
+    }
+    static get v8n() {
+        const parse = memoize(JSON.parse);
+        const isURL = memoize((value) => {
+            try {
+                return Boolean(new URL(value));
+            }
+            catch (_a) {
+                return false;
+            }
+        });
+        return [
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const url = parse(c).service_url;
+                const err = url ? (isURL(url) ? null : 'v8n_invalid') : 'v8n_required';
+                return p === 'avalara' && err ? `avalara-service-url:${err}` : true;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                return p !== 'avalara' || !!parse(c).id || 'avalara-id:v8n_required';
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                return p !== 'avalara' || !!parse(c).key || 'avalara-key:v8n_required';
+            },
+            ({ 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';
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const url = parse(c).service_url;
+                const err = url ? (isURL(url) ? null : 'v8n_invalid') : 'v8n_required';
+                return p === 'onesource' && err ? `onesource-service-url:${err}` : true;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const prefix = 'onesource-external-company-id';
+                return p !== 'onesource' || !!parse(c).external_company_id || `${prefix}:v8n_required`;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const prefix = 'onesource-calling-system-number';
+                return p !== 'onesource' || !!parse(c).calling_system_number || `${prefix}:v8n_required`;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const prefix = 'onesource-from-city';
+                return p !== 'onesource' || !!parse(c).from_city || `${prefix}:v8n_required`;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const prefix = 'onesource-host-system';
+                return p !== 'onesource' || !!parse(c).host_system || `${prefix}:v8n_required`;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const { service: s, title: t } = parse(c);
+                return p !== 'webhook' || s !== 'json' || !!t || 'webhook-json-title:v8n_required';
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const { service: s, encryption_key: e } = parse(c);
+                return p !== 'webhook' || s !== 'json' || !!e || 'webhook-json-encryption-key:v8n_required';
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const { service: s, url: u } = parse(c);
+                const err = u ? (isURL(u) ? null : 'v8n_invalid') : 'v8n_required';
+                return p === 'webhook' && s === 'json' && err ? `webhook-json-url:${err}` : true;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const { service: s, title: t } = parse(c);
+                const err = 'webhook-legacy-xml-title:v8n_required';
+                return p !== 'webhook' || s !== 'legacy_xml' || !!t || err;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const { service: s, url: u } = parse(c);
+                const err = u ? (isURL(u) ? null : 'v8n_invalid') : 'v8n_required';
+                const prefix = 'webhook-legacy-xml-url';
+                return p === 'webhook' && s === 'legacy_xml' && err ? `${prefix}:${err}` : true;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                return p !== 'webflow' || !!parse(c).site_id || 'webflow-site-id:v8n_required';
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                return p !== 'webflow' || !!parse(c).site_name || 'webflow-site-name:v8n_required';
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                return p !== 'webflow' || !!parse(c).collection_id || 'webflow-collection-id:v8n_required';
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const err = 'webflow-collection-name:v8n_required';
+                return p !== 'webflow' || !!parse(c).collection_name || err;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                return p !== 'webflow' || !!parse(c).sku_field_id || 'webflow-sku-field-id:v8n_required';
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const err = 'webflow-sku-field-name:v8n_required';
+                return p !== 'webflow' || !!parse(c).sku_field_name || err;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const err = 'webflow-inventory-field-id:v8n_required';
+                return p !== 'webflow' || !!parse(c).inventory_field_id || err;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                const err = 'webflow-inventory-field-name:v8n_required';
+                return p !== 'webflow' || !!parse(c).inventory_field_name || err;
+            },
+            ({ provider: p = 'avalara', config: c = '{}' }) => {
+                return p !== 'webflow' || !!parse(c).auth || 'webflow-auth:v8n_required';
+            },
+        ];
+    }
+    get readonlySelector() {
+        const match = [super.readonlySelector.toString()];
+        if (this.href)
+            match.push('provider', 'zapier-event', 'zapier-url');
+        return new BooleanSelector(match.join(' ').trim());
+    }
+    renderBody() {
+        var _a;
+        const provider = (_a = this.form.provider) !== null && _a !== void 0 ? _a : 'avalara';
+        return html `
+      ${this.href
+            ? provider === 'webhook'
+                ? ''
+                : html `<foxy-internal-text-control infer="provider"></foxy-internal-text-control>`
+            : html `
+            <foxy-internal-radio-group-control
+              infer="provider"
+              theme="vertical"
+              .getValue=${this.__providerGetValue}
+              .setValue=${this.__providerSetValue}
+              .options=${this.__templateProviderOptions}
+            >
+            </foxy-internal-radio-group-control>
+          `}
+      ${provider === 'avalara'
+            ? this.__renderAvalaraConfig()
+            : provider === 'taxjar'
+                ? this.__renderTaxJarConfig()
+                : provider === 'onesource'
+                    ? this.__renderOneSourceConfig()
+                    : provider === 'webflow'
+                        ? this.__renderWebflowConfig()
+                        : provider === 'zapier'
+                            ? this.__renderZapierConfig()
+                            : provider === 'webhook'
+                                ? this.__renderWebhookConfig()
+                                : ''}
+      ${super.renderBody()}
+    `;
+    }
+    async _fetch(...args) {
+        try {
+            return await super._fetch(...args);
+        }
+        catch (err) {
+            let message;
+            try {
+                message = (await err.json())._embedded['fx:errors'][0].message;
+            }
+            catch (_a) {
+                throw err;
+            }
+            if (message.includes('has already been configured')) {
+                throw ['error:already_configured'];
+            }
+            else {
+                throw err;
+            }
+        }
+    }
+    get __config() {
+        try {
+            return JSON.parse(this.form.config);
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    set __config(value) {
+        var _a;
+        const config = this.__config;
+        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;
+                return defaults.webhookJson;
+            }
+        })();
+        const newConfig = JSON.stringify({ ...defaultConfig, ...config, ...value });
+        this.edit({ provider, config: newConfig });
+    }
+    __renderAvalaraConfig() {
+        var _a;
+        return html `
+      <foxy-internal-text-control
+        infer="avalara-service-url"
+        .getValue=${this.__createConfigGetterFor('service_url')}
+        .setValue=${this.__createConfigSetterFor('service_url')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-text-control
+        infer="avalara-id"
+        .getValue=${this.__createConfigGetterFor('id')}
+        .setValue=${this.__createConfigSetterFor('id')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-password-control
+        infer="avalara-key"
+        .getValue=${this.__createConfigGetterFor('key')}
+        .setValue=${this.__createConfigSetterFor('key')}
+      >
+      </foxy-internal-password-control>
+
+      <foxy-internal-text-control
+        infer="avalara-company-code"
+        .getValue=${this.__createConfigGetterFor('company_code')}
+        .setValue=${this.__createConfigSetterFor('company_code')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-editable-list-control
+        infer="avalara-category-to-product-tax-code-mappings"
+        .getValue=${this.__codeMappingsGetValue}
+        .setValue=${this.__codeMappingsSetValue}
+      >
+      </foxy-internal-editable-list-control>
+
+      <foxy-internal-checkbox-group-control
+        infer="avalara-options"
+        .getValue=${this.__configOptionsGetValue}
+        .setValue=${this.__configOptionsSetValue}
+        .options=${this.__avalaraConfigOptions}
+      >
+      </foxy-internal-checkbox-group-control>
+
+      ${((_a = this.__config) === null || _a === void 0 ? void 0 : _a.use_address_validation) ? html `
+            <foxy-internal-checkbox-group-control
+              infer="avalara-address-validation-countries"
+              .getValue=${this.__createConfigGetterFor('address_validation_countries')}
+              .setValue=${this.__createConfigSetterFor('address_validation_countries')}
+              .options=${this.__avalaraAddressValidationCountriesOptions}
+            >
+            </foxy-internal-checkbox-group-control>
+          `
+            : ''}
+    `;
+    }
+    __renderTaxJarConfig() {
+        return html `
+      <foxy-internal-password-control
+        infer="taxjar-api-token"
+        .getValue=${this.__createConfigGetterFor('api_token')}
+        .setValue=${this.__createConfigSetterFor('api_token')}
+      >
+      </foxy-internal-password-control>
+
+      <foxy-internal-editable-list-control
+        infer="taxjar-category-to-product-tax-code-mappings"
+        .getValue=${this.__codeMappingsGetValue}
+        .setValue=${this.__codeMappingsSetValue}
+      >
+      </foxy-internal-editable-list-control>
+
+      <foxy-internal-checkbox-group-control
+        infer="taxjar-options"
+        .getValue=${this.__configOptionsGetValue}
+        .setValue=${this.__configOptionsSetValue}
+        .options=${this.__taxjarConfigOptions}
+      >
+      </foxy-internal-checkbox-group-control>
+    `;
+    }
+    __renderOneSourceConfig() {
+        return html `
+      <foxy-internal-text-control
+        infer="onesource-service-url"
+        .getValue=${this.__createConfigGetterFor('service_url')}
+        .setValue=${this.__createConfigSetterFor('service_url')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-text-control
+        infer="onesource-external-company-id"
+        .getValue=${this.__createConfigGetterFor('external_company_id')}
+        .setValue=${this.__createConfigSetterFor('external_company_id')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-text-control
+        infer="onesource-calling-system-number"
+        .getValue=${this.__createConfigGetterFor('calling_system_number')}
+        .setValue=${this.__createConfigSetterFor('calling_system_number')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-text-control
+        infer="onesource-from-city"
+        .getValue=${this.__createConfigGetterFor('from_city')}
+        .setValue=${this.__createConfigSetterFor('from_city')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-text-control
+        infer="onesource-host-system"
+        .getValue=${this.__createConfigGetterFor('host_system')}
+        .setValue=${this.__createConfigSetterFor('host_system')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-radio-group-control
+        infer="onesource-company-role"
+        .getValue=${this.__createConfigGetterFor('company_role')}
+        .setValue=${this.__createConfigSetterFor('company_role')}
+        .options=${this.__onesourceCompanyRoleOptions}
+      >
+      </foxy-internal-radio-group-control>
+
+      <foxy-internal-text-control
+        infer="onesource-part-number-product-option"
+        .getValue=${this.__createConfigGetterFor('part_number_product_option')}
+        .setValue=${this.__createConfigSetterFor('part_number_product_option')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-editable-list-control
+        infer="onesource-product-order-priority"
+        .getValue=${this.__onesourceProductOrderPriorityGetValue}
+        .setValue=${this.__onesourceProductOrderPrioritySetValue}
+      >
+      </foxy-internal-editable-list-control>
+
+      <foxy-internal-radio-group-control
+        infer="onesource-audit-settings"
+        .getValue=${this.__createConfigGetterFor('audit_settings')}
+        .setValue=${this.__createConfigSetterFor('audit_settings')}
+        .options=${this.__onesourceAuditSettingsOptions}
+      >
+      </foxy-internal-radio-group-control>
+    `;
+    }
+    __renderWebhookConfig() {
+        var _a, _b;
+        return 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>
+
+      ${((_a = this.__config) === null || _a === void 0 ? void 0 : _a.service) === 'json'
+            ? this.__renderWebhookJsonConfig()
+            : ((_b = this.__config) === null || _b === void 0 ? void 0 : _b.service) === 'legacy_xml'
+                ? this.__renderWebhookLegacyXmlConfig()
+                : ''}
+    `;
+    }
+    __renderWebhookJsonConfig() {
+        return html `
+      <foxy-internal-text-control
+        infer="webhook-json-title"
+        .getValue=${this.__createConfigGetterFor('title')}
+        .setValue=${this.__createConfigSetterFor('title')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-text-area-control
+        infer="webhook-json-url"
+        .getValue=${this.__createConfigGetterFor('url')}
+        .setValue=${this.__createConfigSetterFor('url')}
+      >
+      </foxy-internal-text-area-control>
+
+      <foxy-internal-radio-group-control
+        infer="webhook-service"
+        .getValue=${this.__createConfigGetterFor('service')}
+        .setValue=${this.__createConfigSetterFor('service')}
+        .options=${this.__webhookServiceOptions}
+      >
+      </foxy-internal-radio-group-control>
+
+      <foxy-internal-checkbox-group-control
+        infer="webhook-json-events"
+        .getValue=${this.__createConfigGetterFor('events')}
+        .setValue=${this.__createConfigSetterFor('events')}
+        .options=${this.__webhookJsonEventsOptions}
+      >
+      </foxy-internal-checkbox-group-control>
+
+      <foxy-internal-password-control
+        infer="webhook-json-encryption-key"
+        .getValue=${this.__createConfigGetterFor('encryption_key')}
+        .setValue=${this.__createConfigSetterFor('encryption_key')}
+      >
+      </foxy-internal-password-control>
+    `;
+    }
+    __renderWebhookLegacyXmlConfig() {
+        return html `
+      <foxy-internal-text-control
+        infer="webhook-legacy-xml-title"
+        .getValue=${this.__createConfigGetterFor('title')}
+        .setValue=${this.__createConfigSetterFor('title')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-text-area-control
+        infer="webhook-legacy-xml-url"
+        .getValue=${this.__createConfigGetterFor('url')}
+        .setValue=${this.__createConfigSetterFor('url')}
+      >
+      </foxy-internal-text-area-control>
+
+      <foxy-internal-radio-group-control
+        infer="webhook-service"
+        .getValue=${this.__createConfigGetterFor('service')}
+        .setValue=${this.__createConfigSetterFor('service')}
+        .options=${this.__webhookServiceOptions}
+      >
+      </foxy-internal-radio-group-control>
+    `;
+    }
+    __renderWebflowConfig() {
+        return html `
+      <div class="grid grid-cols-2 gap-m">
+        <foxy-internal-text-control
+          infer="webflow-site-id"
+          .getValue=${this.__createConfigGetterFor('site_id')}
+          .setValue=${this.__createConfigSetterFor('site_id')}
+        >
+        </foxy-internal-text-control>
+
+        <foxy-internal-text-control
+          infer="webflow-site-name"
+          .getValue=${this.__createConfigGetterFor('site_name')}
+          .setValue=${this.__createConfigSetterFor('site_name')}
+        >
+        </foxy-internal-text-control>
+
+        <foxy-internal-text-control
+          infer="webflow-collection-id"
+          .getValue=${this.__createConfigGetterFor('collection_id')}
+          .setValue=${this.__createConfigSetterFor('collection_id')}
+        >
+        </foxy-internal-text-control>
+
+        <foxy-internal-text-control
+          infer="webflow-collection-name"
+          .getValue=${this.__createConfigGetterFor('collection_name')}
+          .setValue=${this.__createConfigSetterFor('collection_name')}
+        >
+        </foxy-internal-text-control>
+
+        <foxy-internal-text-control
+          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="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="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="webflow-inventory-field-name"
+          .getValue=${this.__createConfigGetterFor('inventory_field_name')}
+          .setValue=${this.__createConfigSetterFor('inventory_field_name')}
+        >
+        </foxy-internal-text-control>
+      </div>
+
+      <foxy-internal-password-control
+        infer="webflow-auth"
+        .getValue=${this.__createConfigGetterFor('auth')}
+        .setValue=${this.__createConfigSetterFor('auth')}
+      >
+      </foxy-internal-password-control>
+    `;
+    }
+    __renderZapierConfig() {
+        return html `
+      <foxy-internal-text-control
+        infer="zapier-event"
+        .getValue=${this.__createConfigGetterFor('event')}
+        .setValue=${this.__createConfigSetterFor('event')}
+      >
+      </foxy-internal-text-control>
+
+      <foxy-internal-text-area-control
+        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="zapier-warning" key="warning_text"></foxy-i18n>
+      </p>
+    `;
+    }
+}
+//# sourceMappingURL=NativeIntegrationForm.js.map