@foxy.io/elements 1.35.0-beta.3 → 1.36.0-beta.1

package/dist/elements/public/TaxForm/TaxForm.js

@@ -1,19 +1,13 @@
-import { Checkbox, Dropdown, Metadata } from "../../private/index.js";
-import { Nucleon } from '@foxy.io/sdk/core';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { html } from 'lit-html';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { interpret } from 'xstate';
+import { html } from 'lit-html';
+const NS = 'tax-form';
+const Base = TranslatableMixin(InternalForm, NS);
 // prettier-ignore
 const defaultLiveRateCountries = ['US', 'CA', 'AT', 'BE', 'BG', 'CY', 'CZ', 'DE', 'DK', 'EE', 'ES', 'FI', 'FR', 'GB', 'GR', 'HR', 'HU', 'IE', 'IM', 'IT', 'LT', 'LU', 'LV', 'MC', 'MT', 'NL', 'PL', 'PT', 'RO', 'SE', 'SI', 'SK'];
 const taxJarLiveRateCountries = [...defaultLiveRateCountries, 'AU'];
-const NS = 'tax-form';
-const Base = ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS))));
 /**
  * Form element for creating or editing taxes (`fx:tax`).
  *
@@ -23,673 +17,305 @@ const Base = ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(TranslatableMi
 export class TaxForm extends Base {
     constructor() {
         super(...arguments);
-        this.__previousCountry = undefined;
-        this.__countries = '';
-        this.__regions = '';
-        this.__countriesService = interpret(Nucleon.machine.withConfig({
-            services: {
-                sendGet: async () => {
-                    const response = await new TaxForm.API(this).fetch(this.countries);
-                    if (!response.ok)
-                        throw new Error(await response.text());
-                    return await response.json();
-                },
-            },
-        }));
-        this.__regionsService = interpret(Nucleon.machine.withConfig({
-            services: {
-                sendGet: async () => {
-                    var _a;
-                    const url = new URL(this.regions);
-                    url.searchParams.set('country_code', (_a = this.form.country) !== null && _a !== void 0 ? _a : 'US');
-                    const response = await new TaxForm.API(this).fetch(url.toString());
-                    if (!response.ok)
-                        throw new Error(await response.text());
-                    return await response.json();
-                },
-            },
-        }));
-    }
-    static get scopedElements() {
-        return {
-            'vaadin-number-field': customElements.get('vaadin-number-field'),
-            'vaadin-text-field': customElements.get('vaadin-text-field'),
-            'vaadin-combo-box': customElements.get('vaadin-combo-box'),
-            'vaadin-button': customElements.get('vaadin-button'),
-            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
-            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
-            'foxy-spinner': customElements.get('foxy-spinner'),
-            'foxy-i18n': customElements.get('foxy-i18n'),
-            'x-metadata': Metadata,
-            'x-checkbox': Checkbox,
-            'x-dropdown': Dropdown,
+        /** URL of the `fx:native_integrations` collection for the store. */
+        this.nativeIntegrations = null;
+        /** URL of the `fx:countries` property helper resource. */
+        this.countries = null;
+        /** URL of the `fx:regions` property helper resource. */
+        this.regions = null;
+        this.__serviceProviderGetValue = () => {
+            return this.form.service_provider || (this.form.is_live ? 'default' : 'none');
         };
+        this.__serviceProviderSetValue = (newValue) => {
+            const newProvider = ['none', 'default'].includes(newValue) ? '' : newValue;
+            this.edit({
+                service_provider: newProvider,
+                use_origin_rates: false,
+                is_live: newValue !== 'none',
+            });
+            this.edit({
+                exempt_all_customer_tax_ids: this.__isExemptAllCustomerTaxIdsHidden,
+                apply_to_shipping: this.__isApplyToShippingHidden,
+            });
+        };
+        this.__countrySetValue = (newValue) => {
+            this.edit({ country: newValue, region: '', city: '' });
+            this.edit({ apply_to_shipping: this.__isApplyToShippingHidden });
+        };
+        this.__regionSetValue = (newValue) => {
+            this.edit({ region: newValue, city: '' });
+        };
+        this.__typeSetValue = (newValue) => {
+            this.edit({
+                type: newValue,
+                country: '',
+                region: '',
+                city: '',
+                // @ts-expect-error SDK types are not up to date.
+                service_provider: newValue === 'custom_tax_endpoint' ? 'custom_tax' : '',
+                apply_to_shipping: false,
+                use_origin_rates: false,
+                exempt_all_customer_tax_ids: false,
+                is_live: false,
+                rate: 0,
+            });
+        };
+        this.__typeOptions = JSON.stringify([
+            { label: 'option_custom_tax_endpoint', value: 'custom_tax_endpoint' },
+            { label: 'option_global', value: 'global' },
+            { label: 'option_union', value: 'union' },
+            { label: 'option_country', value: 'country' },
+            { label: 'option_region', value: 'region' },
+            { label: 'option_local', value: 'local' },
+        ]);
     }
     static get properties() {
         return {
             ...super.properties,
-            countries: { type: String, noAccessor: true },
-            regions: { type: String, noAccessor: true },
+            nativeIntegrations: { attribute: 'native-integrations' },
+            countries: {},
+            regions: {},
         };
     }
     static get v8n() {
         return [
-            ({ name: v }) => !!v || 'name_required',
-            ({ name: v }) => !v || v.length <= 30 || 'name_too_long',
-            ({ country: c, type: t }) => t !== 'country' || !!c || 'country_required',
-            ({ country: c, type: t }) => t !== 'region' || !!c || 'country_required',
-            ({ country: c, use_origin_rates: r }) => !r || !!c || 'country_required',
-            ({ country: v }) => !v || !!v.match(/[A-Z]{2}/) || 'country_invalid',
-            ({ region: v, type: t }) => t != 'region' || !!v || 'region_required',
-            ({ region: v }) => !v || v.length <= 20 || 'region_too_long',
-            ({ city: v }) => !v || v.length <= 50 || 'city_too_long',
-            ({ city: c, type: t }) => t != 'local' || !!c || 'city_required',
-            ({ rate: v }) => !v || v <= 100 || 'rate_invalid',
+            ({ name: v }) => !!v || 'name:v8n_required',
+            ({ name: v }) => !v || v.length <= 30 || 'name:v8n_too_long',
+            ({ country: c, type: t }) => t !== 'country' || !!c || 'country:v8n_required',
+            ({ country: c, type: t }) => t !== 'region' || !!c || 'country:v8n_required',
+            ({ country: c, use_origin_rates: r }) => !r || !!c || 'country:v8n_required',
+            ({ region: v, type: t }) => t != 'region' || !!v || 'region:v8n_required',
+            ({ region: v }) => !v || v.length <= 20 || 'region:v8n_too_long',
+            ({ city: v }) => !v || v.length <= 50 || 'city:v8n_too_long',
+            ({ city: c, type: t }) => t != 'local' || !!c || 'city:v8n_required',
+            ({ rate: v }) => v === void 0 || v > 0 || 'rate:v8n_invalid',
         ];
     }
-    /** URI of the `fx:countries` hAPI resource. */
-    get countries() {
-        return this.__countries;
-    }
-    set countries(value) {
-        this.__countries = value;
-        if (value) {
-            this.__countriesService.send({ type: 'FETCH' });
-        }
-        else {
-            this.__countriesService.send({ type: 'SET_DATA', data: null });
-        }
-    }
-    /** URI of the `fx:regions` hAPI resource. */
-    get regions() {
-        return this.__regions;
+    get readonlySelector() {
+        const alwaysMatch = [super.readonlySelector.toString()];
+        alwaysMatch.unshift('native-integrations');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
-    set regions(value) {
-        this.__regions = value;
-        if (value) {
-            this.__regionsService.send({ type: 'FETCH' });
+    get hiddenSelector() {
+        var _a, _b, _c;
+        const alwaysMatch = [super.hiddenSelector.toString()];
+        if (this.__nativeIntegrationsUrl === void 0)
+            alwaysMatch.unshift('native-integrations');
+        if (this.__isCountryHidden)
+            alwaysMatch.unshift('group-three:country');
+        if (this.__isRegionHidden) {
+            alwaysMatch.unshift('group-three:region-select', 'group-three:region-input');
         }
-        else {
-            this.__regionsService.send({ type: 'SET_DATA', data: null });
+        if (this.__isCityHidden)
+            alwaysMatch.unshift('group-three:city');
+        if (this.__isProviderHidden)
+            alwaysMatch.unshift('group-one:service-provider');
+        if (this.__isRateHidden)
+            alwaysMatch.unshift('group-one:rate');
+        if (this.__isApplyToShippingHidden)
+            alwaysMatch.unshift('group-two:apply-to-shipping');
+        if (this.__isUseOriginRatesHidden)
+            alwaysMatch.unshift('group-two:use-origin-rates');
+        if (this.__isExemptAllCustomerTaxIdsHidden) {
+            alwaysMatch.unshift('group-two:exempt-all-customer-tax-ids');
         }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.__countriesService.onTransition(({ changed }) => changed && this.requestUpdate());
-        this.__countriesService.onChange(() => this.requestUpdate());
-        this.__countriesService.start();
-        this.__regionsService.onTransition(({ changed }) => changed && this.requestUpdate());
-        this.__regionsService.onChange(() => this.requestUpdate());
-        this.__regionsService.start();
-    }
-    render() {
-        var _a, _b;
+        const regions = Object.values((_c = (_b = (_a = this.__regionsLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : {});
+        alwaysMatch.unshift(`group-three:region-${regions.length ? 'input' : 'select'}`);
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const countries = Object.values((_c = (_b = (_a = this.__countriesLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : {});
+        const countryOptions = countries.map(c => ({ rawLabel: c.default, value: c.cc2 }));
+        const regions = Object.values((_f = (_e = (_d = this.__regionsLoader) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : {});
+        const regionOptions = regions.map(r => ({ rawLabel: r.default, value: r.code }));
         return html `
-      <div class="relative space-y-m">
-        ${this.__isNameHidden ? null : this.__renderName()}
-        ${this.__isTypeHidden ? null : this.__renderType()}
-        ${this.__isCountryHidden ? null : this.__renderCountry()}
-        ${this.__isRegionHidden ? null : this.__renderRegion()}
-        ${this.__isCityHidden ? null : this.__renderCity()}
-        ${this.__isProviderHidden ? null : this.__renderProvider()}
-        ${this.__isRateHidden ? null : this.__renderRate()}
-        ${this.__isApplyToShippingHidden ? null : this.__renderApplyToShipping()}
-        ${this.__isUseOriginRatesHidden ? null : this.__renderUseOriginRates()}
-        ${this.__isExemptAllCustomerTaxIdsHidden ? null : this.__renderExemptAllCustomerTaxIds()}
-        ${this.__isTimestampsHidden ? null : this.__renderTimestamps()}
-        ${this.__isCreateHidden ? null : this.__renderCreate()}
-        ${this.__isDeleteHidden ? null : this.__renderDelete()}
+      ${this.renderHeader()}
 
-        <div
-          data-testid="spinner"
-          class=${classMap({
-            'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': this.in('idle'),
-        })}
+      <foxy-internal-summary-control infer="group-one">
+        <foxy-internal-text-control layout="summary-item" infer="name"></foxy-internal-text-control>
+
+        <foxy-internal-select-control
+          options=${this.__typeOptions}
+          layout="summary-item"
+          infer="type"
+          .setValue=${this.__typeSetValue}
         >
-          <foxy-spinner
-            layout="vertical"
-            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
-            state=${this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty'}
-            lang=${this.lang}
-            ns="${this.ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
-          >
-          </foxy-spinner>
-        </div>
-      </div>
-    `;
-    }
-    updated(changes) {
-        super.updated(changes);
-        if (this.form.country !== this.__previousCountry) {
-            this.__previousCountry = this.form.country;
-            this.__regionsService.send({ type: 'FETCH' });
-        }
-        // vaadin's combo box doesn't seem to validate on its own
-        this.renderRoot.querySelectorAll('vaadin-combo-box').forEach(e => e.validate());
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.__countriesService.stop();
-        this.__regionsService.stop();
-    }
-    get __isNameHidden() {
-        return this.hiddenSelector.matches('name', true);
-    }
-    get __isTypeHidden() {
-        return this.hiddenSelector.matches('type', true);
-    }
-    get __isCountryHidden() {
-        if (this.hiddenSelector.matches('country', true))
-            return true;
-        if (this.form.type === 'union')
-            return !this.form.use_origin_rates;
-        return !['country', 'region', 'local'].includes(this.form.type);
-    }
-    get __isRegionHidden() {
-        if (this.hiddenSelector.matches('region', true))
-            return true;
-        return this.form.type !== 'local' && this.form.type !== 'region';
-    }
-    get __isCityHidden() {
-        if (this.hiddenSelector.matches('city', true))
-            return true;
-        return this.form.type !== 'local';
-    }
-    get __isProviderHidden() {
-        if (this.hiddenSelector.matches('provider', true))
-            return true;
-        return !this.form.type || this.form.type === 'global' || this.form.type === 'local';
-    }
-    get __isRateHidden() {
-        if (this.hiddenSelector.matches('rate', true))
-            return true;
-        return !this.form.type || this.form.is_live === true;
-    }
-    get __isApplyToShippingHidden() {
-        if (this.hiddenSelector.matches('apply-to-shipping', true))
-            return true;
-        if (this.form.type === undefined)
-            return true;
-        return !!this.form.is_live && defaultLiveRateCountries.includes(this.form.country);
-    }
-    get __isUseOriginRatesHidden() {
-        if (this.hiddenSelector.matches('use-origin-rates', true))
-            return true;
-        return this.form.type !== 'union' || !this.form.is_live || !!this.form.service_provider;
-    }
-    get __isExemptAllCustomerTaxIdsHidden() {
-        if (this.hiddenSelector.matches('exempt-all-customer-tax-ids', true))
-            return true;
-        const provider = this.form.service_provider;
-        return provider === undefined || provider === 'onesource' || provider === 'avalara';
-    }
-    get __isTimestampsHidden() {
-        if (this.hiddenSelector.matches('timestamps', true))
-            return true;
-        return !this.data;
-    }
-    get __isCreateHidden() {
-        if (this.hiddenSelector.matches('create', true))
-            return true;
-        return !!this.data;
-    }
-    get __isDeleteHidden() {
-        if (this.hiddenSelector.matches('delete', true))
-            return true;
-        return !this.data;
-    }
-    __getErrorMessage(prefix) {
-        const error = this.errors.find(err => err.startsWith(prefix));
-        return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';
-    }
-    __getValidator(prefix) {
-        return () => !this.errors.some(err => err.startsWith(prefix));
-    }
-    __renderName() {
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('name:before')}
+        </foxy-internal-select-control>
 
-        <vaadin-text-field
-          data-testid="name"
-          class="w-full"
-          label=${this.t('name')}
-          value=${ifDefined(this.form.name)}
-          .checkValidity=${this.__getValidator('name')}
-          .errorMessage=${this.__getErrorMessage('name')}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('name', true)}
-          ?readonly=${this.readonlySelector.matches('name', true)}
-          required
-          @keydown=${this.__submitOnEnter}
-          @input=${(evt) => {
-            const newName = evt.currentTarget.value;
-            this.edit({ name: newName });
-        }}
+        <foxy-internal-select-control
+          options=${JSON.stringify(this.__serviceProviderOptions)}
+          layout="summary-item"
+          infer="service-provider"
+          .getValue=${this.__serviceProviderGetValue}
+          .setValue=${this.__serviceProviderSetValue}
         >
-        </vaadin-text-field>
+        </foxy-internal-select-control>
 
-        ${this.renderTemplateOrSlot('name:after')}
-      </div>
-    `;
-    }
-    __renderType() {
-        if (!this.form.type)
-            this.edit({ type: 'global' });
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('type:before')}
+        <foxy-internal-number-control layout="summary-item" suffix="%" infer="rate" min="0">
+        </foxy-internal-number-control>
+      </foxy-internal-summary-control>
 
-        <x-dropdown
-          data-testid="type"
-          label=${this.t('type')}
-          value=${ifDefined(this.form.type)}
-          class="w-full"
-          .items=${['global', 'union', 'country', 'region', 'local']}
-          .getText=${(value) => this.t(`tax_${value}`)}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('type', true)}
-          ?readonly=${this.readonlySelector.matches('type', true)}
-          @change=${(evt) => {
-            this.edit({
-                type: evt.detail,
-                country: '',
-                region: '',
-                city: '',
-                service_provider: '',
-                apply_to_shipping: false,
-                use_origin_rates: false,
-                exempt_all_customer_tax_ids: false,
-                is_live: false,
-                rate: 0,
-            });
-        }}
-        >
-        </x-dropdown>
+      <foxy-internal-async-list-control
+        infer="native-integrations"
+        first=${ifDefined(this.__nativeIntegrationsUrl)}
+        item="foxy-native-integration-card"
+      >
+      </foxy-internal-async-list-control>
 
-        ${this.renderTemplateOrSlot('type:after')}
-      </div>
-    `;
-    }
-    __renderCountry() {
-        var _a, _b, _c;
-        const isLoadingItems = !!((_a = this.__countriesService.state) === null || _a === void 0 ? void 0 : _a.matches('busy'));
-        const isLoadingData = this.in('busy');
-        const isLoading = isLoadingItems || isLoadingData;
-        const isFail = this.in('fail');
-        const json = (_b = this.__countriesService.state) === null || _b === void 0 ? void 0 : _b.context.data;
-        const items = Object.values((_c = json === null || json === void 0 ? void 0 : json.values) !== null && _c !== void 0 ? _c : {});
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('country:before')}
+      <foxy-internal-summary-control infer="group-two">
+        <foxy-internal-switch-control infer="exempt-all-customer-tax-ids">
+        </foxy-internal-switch-control>
+        <foxy-internal-switch-control infer="apply-to-shipping"></foxy-internal-switch-control>
+        <foxy-internal-switch-control infer="use-origin-rates"></foxy-internal-switch-control>
+      </foxy-internal-summary-control>
 
-        <vaadin-combo-box
-          item-value-path="cc2"
-          item-label-path="default"
-          item-id-path="cc2"
-          data-testid="country"
-          label="${this.t('country')}${isLoadingItems ? ` • ${this.t('loading_busy')}` : ''}"
-          value=${ifDefined(isLoadingItems ? undefined : this.form.country)}
-          class="w-full"
-          .checkValidity=${this.__getValidator('country')}
-          .errorMessage=${this.__getErrorMessage('country')}
-          .items=${items}
-          ?allow-custom-value=${items.length === 0}
-          ?disabled=${isFail || isLoading || this.disabledSelector.matches('country', true)}
-          ?readonly=${this.readonlySelector.matches('country', true)}
-          required
-          @change=${(evt) => {
-            this.edit({
-                country: evt.currentTarget.value,
-                region: '',
-                city: '',
-                is_live: false,
-                service_provider: '',
-            });
-            if (this.__isApplyToShippingHidden)
-                this.edit({ apply_to_shipping: false });
-            this.__regionsService.send({ type: 'FETCH' });
-        }}
+      <foxy-internal-summary-control infer="group-three">
+        <foxy-internal-select-control
+          options=${JSON.stringify(countryOptions)}
+          layout="summary-item"
+          infer="country"
+          .setValue=${this.__countrySetValue}
         >
-        </vaadin-combo-box>
+        </foxy-internal-select-control>
 
-        ${this.renderTemplateOrSlot('country:after')}
-      </div>
-    `;
-    }
-    __renderRegion() {
-        var _a, _b, _c;
-        const isLoadingItems = !!((_a = this.__regionsService.state) === null || _a === void 0 ? void 0 : _a.matches('busy'));
-        const isLoadingData = this.in('busy');
-        const isLoading = isLoadingItems || isLoadingData;
-        const isFail = this.in('fail');
-        const json = (_b = this.__regionsService.state) === null || _b === void 0 ? void 0 : _b.context.data;
-        const items = Object.values((_c = json === null || json === void 0 ? void 0 : json.values) !== null && _c !== void 0 ? _c : {});
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('region:before')}
+        <foxy-internal-select-control
+          property="region"
+          options=${JSON.stringify(regionOptions)}
+          layout="summary-item"
+          infer="region-select"
+          .setValue=${this.__regionSetValue}
+        >
+        </foxy-internal-select-control>
 
-        <vaadin-combo-box
-          item-value-path="code"
-          item-label-path="default"
-          item-id-path="code"
-          data-testid="region"
-          label="${this.t('region')}${isLoadingItems ? ` • ${this.t('loading_busy')}` : ''}"
-          value=${ifDefined(isLoadingItems ? undefined : this.form.region)}
-          class="w-full"
-          .checkValidity=${this.__getValidator('region')}
-          .errorMessage=${this.__getErrorMessage('region')}
-          .items=${items}
-          ?allow-custom-value=${items.length === 0}
-          ?disabled=${isFail || isLoading || this.disabledSelector.matches('region', true)}
-          ?readonly=${this.readonlySelector.matches('region', true)}
-          required
-          @change=${(evt) => {
-            const newRegion = evt.currentTarget.value;
-            this.edit({ region: newRegion, city: '' });
-        }}
+        <foxy-internal-text-control
+          property="region"
+          layout="summary-item"
+          infer="region-input"
+          .setValue=${this.__regionSetValue}
         >
-        </vaadin-combo-box>
+        </foxy-internal-text-control>
 
-        ${this.renderTemplateOrSlot('region:after')}
-      </div>
-    `;
-    }
-    __renderCity() {
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('city:before')}
+        <foxy-internal-text-control layout="summary-item" infer="city"></foxy-internal-text-control>
+      </foxy-internal-summary-control>
 
-        <vaadin-text-field
-          data-testid="city"
-          class="w-full"
-          label=${this.t('city')}
-          value=${ifDefined(this.form.city)}
-          .checkValidity=${this.__getValidator('city')}
-          .errorMessage=${this.__getErrorMessage('city')}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('city', true)}
-          ?readonly=${this.readonlySelector.matches('city', true)}
-          required
-          @keydown=${this.__submitOnEnter}
-          @input=${(evt) => {
-            const newCity = evt.currentTarget.value;
-            this.edit({ city: newCity });
-        }}
-        >
-        </vaadin-text-field>
+      ${super.renderBody()}
+
+      <foxy-nucleon
+        infer=""
+        class="hidden"
+        href=${ifDefined((_g = this.countries) !== null && _g !== void 0 ? _g : void 0)}
+        id="countriesLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
 
-        ${this.renderTemplateOrSlot('city:after')}
-      </div>
+      <foxy-nucleon
+        infer=""
+        class="hidden"
+        href=${ifDefined(this.__regionsUrl)}
+        id="regionsLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
     `;
     }
-    __renderProvider() {
-        const items = [
-            { label: this.t('tax_rate_provider_none'), value: 'none' },
-            { label: 'Avalara AvaTax 15', value: 'avalara' },
-            { label: 'Thomson Reuters ONESOURCE', value: 'onesource' },
+    get __serviceProviderOptions() {
+        const options = [
+            { label: 'option_none', value: 'none' },
+            { label: 'option_avalara', value: 'avalara' },
+            { label: 'option_onesource', value: 'onesource' },
         ];
-        if (this.form.type === 'union' || defaultLiveRateCountries.includes(this.form.country)) {
-            items.push({ label: this.t('tax_rate_provider_default'), value: 'default' });
+        if (this.form.type === 'union' ||
+            !this.form.country ||
+            defaultLiveRateCountries.includes(this.form.country)) {
+            options.unshift({ label: 'option_default', value: 'default' });
         }
-        if (taxJarLiveRateCountries.includes(this.form.country)) {
-            items.push({ label: 'TaxJar', value: 'taxjar' });
+        if (this.form.type === 'union' ||
+            !this.form.country ||
+            taxJarLiveRateCountries.includes(this.form.country)) {
+            options.push({ label: 'option_taxjar', value: 'taxjar' });
         }
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('provider:before')}
-
-        <x-dropdown
-          data-testid="provider"
-          label=${this.t('tax_rate_provider')}
-          value=${this.form.service_provider || (this.form.is_live ? 'default' : 'none')}
-          class="w-full"
-          .items=${items.map(item => item.value)}
-          .getText=${(value) => { var _a; return (_a = items.find(item => item.value === value)) === null || _a === void 0 ? void 0 : _a.label; }}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('provider', true)}
-          ?readonly=${this.readonlySelector.matches('provider', true)}
-          @change=${(evt) => {
-            const newValue = evt.detail;
-            const newProvider = ['none', 'default'].includes(newValue) ? '' : newValue;
-            this.edit({
-                service_provider: newProvider,
-                is_live: newValue !== 'none',
-            });
-            if (this.__isExemptAllCustomerTaxIdsHidden) {
-                this.edit({ exempt_all_customer_tax_ids: false });
+        return options;
+    }
+    get __nativeIntegrationsUrl() {
+        var _a;
+        try {
+            const url = new URL((_a = this.nativeIntegrations) !== null && _a !== void 0 ? _a : '');
+            const provider = this.form.service_provider;
+            if (provider) {
+                url.searchParams.set('provider', provider);
+                return url.toString();
             }
-            if (this.__isApplyToShippingHidden)
-                this.edit({ apply_to_shipping: false });
-            if (this.__isUseOriginRatesHidden)
-                this.edit({ use_origin_rates: false });
-        }}
-        >
-        </x-dropdown>
-
-        ${this.renderTemplateOrSlot('provider:after')}
-      </div>
-    `;
+        }
+        catch (_b) {
+            // do nothing
+        }
     }
-    __renderRate() {
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('rate:before')}
-
-        <vaadin-number-field
-          data-testid="rate"
-          class="w-full"
-          label=${this.t('tax_rate')}
-          value=${ifDefined(this.form.rate)}
-          min="0"
-          .checkValidity=${this.__getValidator('rate')}
-          .errorMessage=${this.__getErrorMessage('rate')}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('rate', true)}
-          ?readonly=${this.readonlySelector.matches('rate', true)}
-          required
-          @keydown=${this.__submitOnEnter}
-          @change=${(evt) => {
-            const newRate = parseFloat(evt.currentTarget.value);
-            if (!isNaN(newRate))
-                this.edit({ rate: newRate });
-        }}
-        >
-        </vaadin-number-field>
-
-        ${this.renderTemplateOrSlot('rate:after')}
-      </div>
-    `;
+    get __regionsUrl() {
+        var _a;
+        try {
+            const regionsURL = new URL((_a = this.regions) !== null && _a !== void 0 ? _a : '');
+            const country = this.form.country;
+            if (country)
+                regionsURL.searchParams.set('country_code', country);
+            return regionsURL.toString();
+        }
+        catch (_b) {
+            // do nothing
+        }
     }
-    __renderApplyToShipping() {
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('apply-to-shipping:before')}
-
-        <x-checkbox
-          data-testid="apply-to-shipping"
-          class="leading-s"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('apply-to-shipping', true)}
-          ?readonly=${this.readonlySelector.matches('apply-to-shipping', true)}
-          ?checked=${!!this.form.apply_to_shipping}
-          @change=${(evt) => this.edit({ apply_to_shipping: evt.detail })}
-        >
-          <foxy-i18n
-            class="block text-m text-body"
-            lang=${this.lang}
-            key="tax_apply_to_shipping"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-
-          <foxy-i18n
-            class="block text-s text-secondary"
-            lang=${this.lang}
-            key="tax_apply_to_shipping_explainer"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-        </x-checkbox>
-
-        ${this.renderTemplateOrSlot('apply-to-shipping:after')}
-      </div>
-    `;
+    get __countriesLoader() {
+        return this.renderRoot.querySelector('#countriesLoader');
     }
-    __renderUseOriginRates() {
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('use-origin-rates:before')}
-
-        <x-checkbox
-          data-testid="use-origin-rates"
-          class="leading-s"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('use-origin-rates', true)}
-          ?readonly=${this.readonlySelector.matches('use-origin-rates', true)}
-          ?checked=${!!this.form.use_origin_rates}
-          @change=${(evt) => this.edit({ use_origin_rates: evt.detail })}
-        >
-          <foxy-i18n
-            class="block text-m text-body"
-            lang=${this.lang}
-            key="tax_use_origin_rates"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-
-          <foxy-i18n
-            class="block text-s text-secondary"
-            lang=${this.lang}
-            key="tax_use_origin_rates_explainer"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-        </x-checkbox>
-
-        ${this.renderTemplateOrSlot('use-origin-rates:after')}
-      </div>
-    `;
+    get __regionsLoader() {
+        return this.renderRoot.querySelector('#regionsLoader');
     }
-    __renderExemptAllCustomerTaxIds() {
-        const scope = 'exempt-all-customer-tax-ids';
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot(`${scope}:before`)}
-
-        <x-checkbox
-          data-testid="${scope}"
-          class="leading-s"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches(scope, true)}
-          ?readonly=${this.readonlySelector.matches(scope, true)}
-          ?checked=${!!this.form.exempt_all_customer_tax_ids}
-          @change=${(evt) => {
-            this.edit({ exempt_all_customer_tax_ids: evt.detail });
-        }}
-        >
-          <foxy-i18n
-            class="block text-m text-body"
-            lang=${this.lang}
-            key="tax_exempt_all_customer_tax_ids"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-
-          <foxy-i18n
-            class="block text-s text-secondary"
-            lang=${this.lang}
-            key="tax_exempt_all_customer_tax_ids_explainer"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-        </x-checkbox>
-
-        ${this.renderTemplateOrSlot(`${scope}:after`)}
-      </div>
-    `;
+    get __isExemptAllCustomerTaxIdsHidden() {
+        const type = this.form.type;
+        if (type === 'custom_tax_endpoint')
+            return true;
+        if (type === 'country' || type === 'region' || type === 'local')
+            return !!this.form.is_live;
+        const provider = this.form.service_provider;
+        return !provider || provider === 'onesource' || provider === 'avalara' || provider === 'taxjar';
     }
-    __renderTimestamps() {
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('timestamps:before')}
-
-        <x-metadata
-          data-testid="timestamps"
-          .items=${['date_modified', 'date_created'].map(field => {
-            var _a;
-            return ({
-                name: this.t(field),
-                value: ((_a = this.data) === null || _a === void 0 ? void 0 : _a[field]) ? this.t('date', { value: new Date(this.data[field]) })
-                    : '',
-            });
-        })}
-        >
-        </x-metadata>
-
-        ${this.renderTemplateOrSlot('timestamps:after')}
-      </div>
-    `;
+    get __isApplyToShippingHidden() {
+        const type = this.form.type;
+        if (!type || type === 'custom_tax_endpoint')
+            return true;
+        if (type === 'union')
+            return false;
+        if (type === 'country' && this.form.is_live)
+            return true;
+        if (type === 'region' && this.form.is_live)
+            return true;
+        return !!this.form.is_live && defaultLiveRateCountries.includes(this.form.country);
     }
-    __renderCreate() {
-        const isCleanTemplateInvalid = this.in({ idle: { template: { clean: 'invalid' } } });
-        const isDirtyTemplateInvalid = this.in({ idle: { template: { dirty: 'invalid' } } });
-        const isCleanSnapshotInvalid = this.in({ idle: { snapshot: { clean: 'invalid' } } });
-        const isDirtySnapshotInvalid = this.in({ idle: { snapshot: { dirty: 'invalid' } } });
-        const isTemplateInvalid = isCleanTemplateInvalid || isDirtyTemplateInvalid;
-        const isSnaphotInvalid = isCleanSnapshotInvalid || isDirtySnapshotInvalid;
-        const isInvalid = isTemplateInvalid || isSnaphotInvalid;
-        const isIdle = this.in('idle');
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('create:before')}
-
-        <vaadin-button
-          data-testid="create"
-          class="w-full"
-          theme="primary success"
-          ?disabled=${!isIdle || isInvalid || this.disabledSelector.matches('create', true)}
-          @click=${this.submit}
-        >
-          <foxy-i18n ns=${this.ns} key="create" lang=${this.lang}></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot('create:after')}
-      </div>
-    `;
+    get __isUseOriginRatesHidden() {
+        return this.form.type !== 'union' || !this.form.is_live || !!this.form.service_provider;
     }
-    __renderDelete() {
-        return html `
-      <div>
-        <foxy-internal-confirm-dialog
-          data-testid="confirm"
-          message="delete_prompt"
-          confirm="delete"
-          cancel="cancel"
-          header="delete"
-          theme="primary error"
-          lang=${this.lang}
-          ns=${this.ns}
-          id="confirm"
-          @hide=${(evt) => !evt.detail.cancelled && this.delete()}
-        >
-        </foxy-internal-confirm-dialog>
-
-        ${this.renderTemplateOrSlot('delete:before')}
-
-        <vaadin-button
-          data-testid="delete"
-          theme="error"
-          class="w-full"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}
-          @click=${(evt) => {
-            const confirm = this.renderRoot.querySelector('#confirm');
-            confirm.show(evt.currentTarget);
-        }}
-        >
-          <foxy-i18n ns=${this.ns} key="delete" lang=${this.lang}></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot('delete:after')}
-      </div>
-    `;
+    get __isProviderHidden() {
+        const type = this.form.type;
+        return !type || type === 'global' || type === 'local' || type === 'custom_tax_endpoint';
     }
-    __submitOnEnter(evt) {
-        if (evt.key === 'Enter')
-            this.submit();
+    get __isCountryHidden() {
+        if (this.form.type === 'union') {
+            return (!this.form.service_provider || this.form.is_live) && !this.form.use_origin_rates;
+        }
+        else {
+            return !['country', 'region', 'local'].includes(this.form.type);
+        }
+    }
+    get __isRegionHidden() {
+        return this.form.type !== 'local' && this.form.type !== 'region';
+    }
+    get __isCityHidden() {
+        return this.form.type !== 'local';
+    }
+    get __isRateHidden() {
+        const type = this.form.type;
+        return !type || type === 'custom_tax_endpoint' || this.form.is_live === true;
     }
 }
 //# sourceMappingURL=TaxForm.js.map