@zonos/elements 1.5.0 → 1.5.2

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -4,17 +4,16 @@ import { stripeStore, stripeStoreOnChange, stripeStorePrefetchLandedCost, } from
 import { getFallbackDefaultCountryCode, localizationStore, } from "../../store/hello/localization";
 import { storageStore, storageStoreOnChange, } from "../../store/storageStore";
 import { translate } from "../../store/translationStore";
-import { zonosStore } from "../../store/zonosStore";
+import { getShouldRequirePeruTaxId, zonosStore, } from "../../store/zonosStore";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { buildAddressContacts } from "../../utils/checkout/buildAddressContacts";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { shouldRenderShortAddressCodeInput } from "../../utils/checkout/shouldRenderShortAddressCodeInput";
-import { shouldRenderTaxIdInput } from "../../utils/checkout/shouldRenderTaxIdInput";
+import { renderTaxIdFields } from "../../utils/checkout/taxIdFields";
 import { classes } from "../../utils/classes";
 import { extractName } from "../../utils/extractName";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
-import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../types/checkout/TaxId";
 /**
  * This component is a wrapper for the stripe address element that would render default style object
  */
@@ -29,6 +28,10 @@ export class ZonosAddress {
          * Default address for stripe
          */
         this.defaultAddress = [];
+        /**
+         * Which tax id control the error belongs on. Empty when there is no error.
+         */
+        this.taxIdErrorField = '';
         /**
          * Error message for tax id input
          */
@@ -237,9 +240,6 @@ export class ZonosAddress {
         }
         void this.watchInitStripe();
     }
-    isInTaxIdCountry(countryCode) {
-        return countryRequireTaxId.includes(countryCode);
-    }
     /**
      * Render tax id input based on ship to country code
      */
@@ -254,23 +254,18 @@ export class ZonosAddress {
         if (!countryCode) {
             return null;
         }
-        // This just to type guard the countryCode, if it's able to get to this point it should already be in country that has tax id input
-        if (!this.isInTaxIdCountry(countryCode)) {
-            return null;
-        }
-        const taxIdInputRendered = shouldRenderTaxIdInput({
+        return renderTaxIdFields({
             companyName: stripeStore.companyName,
             countryCode,
+            errorField: this.taxIdErrorField,
+            errorMessage: this.taxIdErrorMessage,
+            onTaxIdChange: value => {
+                this.taxIdChanged.emit(value);
+            },
+            shouldRequirePeruTaxId: getShouldRequirePeruTaxId(),
+            taxId: stripeStore.taxId || '',
+            taxIdType: stripeStore.taxIdType,
         });
-        // Don't render tax id input if the country doesn't require tax id
-        if (!taxIdInputRendered) {
-            return null;
-        }
-        const taxIdInputInfo = shipToTaxIdLabels[countryCode];
-        return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
-                stripeStore.taxId = event.detail;
-                this.taxIdChanged.emit(event.detail);
-            } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: "red-600", type: "caption" }, this.taxIdErrorMessage))));
     }
     /**
      * Render short address code input based on ship to country code
@@ -357,11 +352,11 @@ export class ZonosAddress {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '302dafde973c4bf2d847640d8f0e064d88f350f8', class: classes([
+        return (h(Host, { key: 'bbf12ad9213fbbbaf6c14ecb0cb7acb0679f3d6e', class: classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (h("zonos-text", { key: '706204604ad32eed710e38adbe8133b3384044eb', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: '0edc4c5d6c3ff965be6edbf680acaed892c71a16', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: '6aa6e4e86a76f1081c5af1f2b5f3282dfd91f3c5', class: "zonos--address-component" })));
+            ]) }, this.titleText && (h("zonos-text", { key: 'a81550755a359e1a9c46acc99eef7749959187ee', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: 'bdba9c19992622bcf0354366080b1932c0e28bb2', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: 'b376efea8ef5d57f525be9b6eed3f98c67b2834e', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -440,6 +435,26 @@ export class ZonosAddress {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "taxIdErrorField": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'type' | 'value' | ''",
+                    "resolved": "\"\" | \"type\" | \"value\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which tax id control the error belongs on. Empty when there is no error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tax-id-error-field",
+                "defaultValue": "''"
+            },
             "taxIdErrorMessage": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/stripe/zonos-custom-address/zonos-custom-address.css

@@ -38,6 +38,11 @@
 :host .zonos--tax-id-input {
   margin-bottom: 8px;
 }
+:host .zonos--tax-id-input {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 :host zonos-banner {
   margin-top: 8px;
 }

package/dist/collection/components/stripe/zonos-custom-address/zonos-custom-address.js

@@ -16,18 +16,17 @@ import { stripeStore, stripeStorePrefetchLandedCost, } from "../../store/checkou
 import { localizationStore } from "../../store/hello/localization";
 import { storageStore, storageStoreOnChange, } from "../../store/storageStore";
 import { translate } from "../../store/translationStore";
-import { zonosStore } from "../../store/zonosStore";
+import { getShouldRequirePeruTaxId, zonosStore, } from "../../store/zonosStore";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isValidZip } from "../../utils/checkout/form/isValidZip";
 import { getAddressCountryOptions, } from "../../utils/checkout/getAddressCountryOptions";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { shouldRenderShortAddressCodeInput } from "../../utils/checkout/shouldRenderShortAddressCodeInput";
-import { shouldRenderTaxIdInput } from "../../utils/checkout/shouldRenderTaxIdInput";
+import { renderTaxIdFields } from "../../utils/checkout/taxIdFields";
 import { classes } from "../../utils/classes";
 import { extractName } from "../../utils/extractName";
 import { log } from "../../utils/logging/log";
 import { mergeAddress } from "../../utils/mergeAddress";
-import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../types/checkout/TaxId";
 /**
  * This component is a wrapper for the stripe address element that would render default style object
  */
@@ -38,6 +37,10 @@ export class ZonosAddress {
          * Default address for stripe
          */
         this.defaultAddress = [];
+        /**
+         * Which tax id control the error belongs on. Empty when there is no error.
+         */
+        this.taxIdErrorField = '';
         /**
          * Error message for tax id input
          */
@@ -364,9 +367,6 @@ export class ZonosAddress {
         const hasErrors = line1 || postalCode || state || city || firstName || lastName || phone;
         return !hasErrors;
     }
-    isInTaxIdCountry(countryCode) {
-        return countryRequireTaxId.includes(countryCode);
-    }
     /**
      * Render tax id input based on ship to country code
      */
@@ -381,22 +381,15 @@ export class ZonosAddress {
         if (!countryCode) {
             return null;
         }
-        // This just to type guard the countryCode, if it's able to get to this point it should already be in country that has tax id input
-        if (!this.isInTaxIdCountry(countryCode)) {
-            return null;
-        }
-        const taxIdInputRendered = shouldRenderTaxIdInput({
+        return renderTaxIdFields({
             companyName: stripeStore.companyName,
             countryCode,
+            errorField: this.taxIdErrorField,
+            errorMessage: this.taxIdErrorMessage,
+            shouldRequirePeruTaxId: getShouldRequirePeruTaxId(),
+            taxId: stripeStore.taxId || '',
+            taxIdType: stripeStore.taxIdType,
         });
-        // Don't render tax id input if the country doesn't require tax id
-        if (!taxIdInputRendered) {
-            return null;
-        }
-        const taxIdInputInfo = shipToTaxIdLabels[countryCode];
-        return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { error: this.taxIdErrorMessage, inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
-                stripeStore.taxId = event.detail;
-            } })));
     }
     /**
      * Render short address code input based on ship to country code
@@ -933,10 +926,10 @@ export class ZonosAddress {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '9d178094ee341623633d1e3822bd79f254a27e51', class: classes([
+        return (h(Host, { key: 'd3bb2635d41dd74ba52ff37034f348fc0a763366', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: 'c36b4ce9b63cce95664894fd8929ffe15807a22a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '661eab7074f99b6dca52d5f7f546cfbd29322fbf', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '7d3f67988eac13616f3470f46f05060e194c2df7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '1bd63bd015542ec3302f087bcbf3d9549f342c25', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     static get is() { return "zonos-custom-address"; }
     static get encapsulation() { return "scoped"; }
@@ -1015,6 +1008,26 @@ export class ZonosAddress {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "taxIdErrorField": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'type' | 'value' | ''",
+                    "resolved": "\"\" | \"type\" | \"value\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which tax id control the error belongs on. Empty when there is no error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tax-id-error-field",
+                "defaultValue": "''"
+            },
             "taxIdErrorMessage": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/utils/__tests__/helpers/blockStorage.js

@@ -0,0 +1,24 @@
+const restores = [];
+/** Replace a storage getter so the next read throws SecurityError. */
+export const blockStorage = (area) => {
+    const descriptor = Object.getOwnPropertyDescriptor(window, area);
+    Object.defineProperty(window, area, {
+        configurable: true,
+        get() {
+            throw new DOMException('The operation is insecure', 'SecurityError');
+        },
+    });
+    restores.push(() => {
+        if (descriptor) {
+            Object.defineProperty(window, area, descriptor);
+            return;
+        }
+        Reflect.deleteProperty(window, area);
+    });
+};
+export const restoreBlockedStorage = () => {
+    var _a;
+    while (restores.length > 0) {
+        (_a = restores.pop()) === null || _a === void 0 ? void 0 : _a();
+    }
+};

package/dist/collection/components/utils/api/getExchangeRate.js

@@ -1,5 +1,6 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
+import { safeSetItem } from "../safeStorage";
 const defaultUsExchangeRate = {
     exchangeRate: {
         rate: 1,
@@ -33,7 +34,7 @@ export const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, t
     const { rate, targetFormat } = json.exchangeRateCreate;
     const maxAge = json.maxAge;
     if (rate) {
-        sessionStorage.setItem(country + '_rate', JSON.stringify(rate));
+        safeSetItem('session', `${country}_rate`, JSON.stringify(rate));
         const exchangeRate = { rate, targetFormat };
         return { exchangeRate, maxAge };
     }

package/dist/collection/components/utils/api/prepCalculateLandedCost.js

@@ -2,9 +2,19 @@ import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
 import { localizationStore } from "../../store/hello/localization";
 import { storageStore } from "../../store/storageStore";
+import { getCheckoutTaxIdPayload } from "../checkout/getCheckoutTaxIdPayload";
 import { extractName } from "../extractName";
 import { getOverridenZCountry } from "../getOverridenZCountry";
 import { log } from "../logging/log";
+const shipToTaxIdFields = (countryCode) => {
+    const taxIdPayload = getCheckoutTaxIdPayload(countryCode);
+    if (!taxIdPayload) {
+        return {};
+    }
+    return Object.assign({ shipToTaxId: taxIdPayload.taxId }, (taxIdPayload.taxIdType
+        ? { shipToTaxIdType: taxIdPayload.taxIdType }
+        : {}));
+};
 /**
  * Extract value from translated object
  */
@@ -55,16 +65,15 @@ export const prepCartCalculateLandedCost = (cartId) => {
         name: translatedBillingAddress.name,
     });
     const checkoutSessionCountry = getOverridenZCountry() || 'US';
-    return {
-        billingAddress: {
+    const shipToTaxId = shipToTaxIdFields(translatedShippingAddress.country);
+    return Object.assign(Object.assign({ billingAddress: {
             addressLine1: translatedBillingAddress.line1,
             addressLine2: translatedBillingAddress.line2 || '',
             city: translatedBillingAddress.city,
             country: translatedBillingAddress.country,
             postalCode: translatedBillingAddress.postal_code,
             state: translatedBillingAddress.state,
-        },
-        billingContact: {
+        }, billingContact: {
             // firstName and lastName should be valid now since stripe only mark
             // the address as complete when both fields are filled.
             firstName: billingFirstName,
@@ -72,13 +81,9 @@ export const prepCartCalculateLandedCost = (cartId) => {
             phone: translatedBillingAddress.phone,
         },
         // Use the first item's currency code
-        cartCurrencyCode: (_a = cartStore.items[0]) === null || _a === void 0 ? void 0 : _a.currencyCode,
-        cartId,
-        checkoutSessionCountry: checkoutSessionCountry ||
+        cartCurrencyCode: (_a = cartStore.items[0]) === null || _a === void 0 ? void 0 : _a.currencyCode, cartId, checkoutSessionCountry: checkoutSessionCountry ||
             localizationStore.selectedCountryCode ||
-            undefined,
-        checkoutSessionId: storageStore.checkoutSessionId || '',
-        contact: {
+            undefined, checkoutSessionId: storageStore.checkoutSessionId || '', contact: {
             companyName: stripeStore.companyName,
             email: stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email,
             // firstName and lastName should be valid now since stripe only mark
@@ -86,9 +91,7 @@ export const prepCartCalculateLandedCost = (cartId) => {
             firstName: shippingFirstName,
             lastName: shippingLastName,
             phone: translatedShippingAddress.phone,
-        },
-        isTest: !!isE2ETest,
-        landedCostAdjustments: cartStore.promoCode
+        }, isTest: !!isE2ETest, landedCostAdjustments: cartStore.promoCode
             ? [
                 {
                     amount: 0,
@@ -98,18 +101,14 @@ export const prepCartCalculateLandedCost = (cartId) => {
                     type: 'PROMO_CODE',
                 },
             ]
-            : [],
-        shipToShortAddressCode: stripeStore.shortAddressCode,
-        shipToTaxId: stripeStore.taxId,
-        shippingAddress: {
+            : [], shipToShortAddressCode: stripeStore.shortAddressCode }, shipToTaxId), { shippingAddress: {
             addressLine1: translatedShippingAddress.line1,
             addressLine2: translatedShippingAddress.line2,
             city: translatedShippingAddress.city,
             country: translatedShippingAddress.country,
             postalCode: translatedShippingAddress.postal_code,
             state: translatedShippingAddress.state,
-        },
-    };
+        } });
 };
 export const prepCalculateLandedCost = () => {
     const isE2ETest = new URLSearchParams(window.location.search).get('zonosE2ETest') === '1';
@@ -157,24 +156,21 @@ export const prepCalculateLandedCost = () => {
             ...convertedCartAdjuments,
         ]
         : convertedCartAdjuments;
-    return {
-        billingAddress: {
+    const shipToTaxId = shipToTaxIdFields(translatedShippingAddress.country);
+    return Object.assign(Object.assign({ billingAddress: {
             addressLine1: translatedBillingAddress.line1,
             addressLine2: translatedBillingAddress.line2 || '',
             city: translatedBillingAddress.city,
             country: translatedBillingAddress.country,
             postalCode: translatedBillingAddress.postal_code,
             state: translatedBillingAddress.state,
-        },
-        billingContact: {
+        }, billingContact: {
             // firstName and lastName should be valid now since stripe only mark
             // the address as complete when both fields are filled.
             firstName: billingFirstName,
             lastName: billingLastName,
             phone: translatedBillingAddress.phone,
-        },
-        checkoutSessionId: storageStore.checkoutSessionId || '',
-        contact: {
+        }, checkoutSessionId: storageStore.checkoutSessionId || '', contact: {
             companyName: stripeStore.companyName,
             email: stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email,
             // firstName and lastName should be valid now since stripe only mark
@@ -182,19 +178,12 @@ export const prepCalculateLandedCost = () => {
             firstName: shippingFirstName,
             lastName: shippingLastName,
             phone: translatedShippingAddress.phone,
-        },
-        isTest: isE2ETest,
-        items: cartStore.items,
-        landedCostAdjustments: adjustments,
-        shipToShortAddressCode: stripeStore.shortAddressCode,
-        shipToTaxId: stripeStore.taxId,
-        shippingAddress: {
+        }, isTest: isE2ETest, items: cartStore.items, landedCostAdjustments: adjustments, shipToShortAddressCode: stripeStore.shortAddressCode }, shipToTaxId), { shippingAddress: {
             addressLine1: translatedShippingAddress.line1,
             addressLine2: translatedShippingAddress.line2,
             city: translatedShippingAddress.city,
             country: translatedShippingAddress.country,
             postalCode: translatedShippingAddress.postal_code,
             state: translatedShippingAddress.state,
-        },
-    };
+        } });
 };

package/dist/collection/components/utils/checkout/getCheckoutTaxIdPayload.js

@@ -0,0 +1,16 @@
+import { stripeStore } from "../../store/checkout/stripe";
+import { getShouldRequirePeruTaxId } from "../../store/zonosStore";
+import { resolveTaxIdSelection } from "./resolveTaxIdSelection";
+/** Tax id to send for the destination, or null while the field is hidden. */
+export const getCheckoutTaxIdPayload = (countryCode) => {
+    const { selectedType, send } = resolveTaxIdSelection({
+        companyName: stripeStore.companyName,
+        countryCode,
+        shouldRequirePeruTaxId: getShouldRequirePeruTaxId(),
+        taxIdType: stripeStore.taxIdType,
+    });
+    if (!send) {
+        return null;
+    }
+    return Object.assign({ taxId: stripeStore.taxId }, (selectedType ? { taxIdType: selectedType.value } : {}));
+};

package/dist/collection/components/utils/checkout/getTaxIdFieldState.js

@@ -0,0 +1,26 @@
+import { resolveTaxIdSelection } from "./resolveTaxIdSelection";
+import { taxIdLabelForCheckout } from "../taxId/taxIdRules";
+export const getTaxIdFieldState = ({ companyName, countryCode, errorField, errorMessage, shouldRequirePeruTaxId, taxIdType, }) => {
+    var _a, _b;
+    const { rendered, selectedType, send, typeOptions } = resolveTaxIdSelection({
+        companyName,
+        countryCode,
+        shouldRequirePeruTaxId,
+        taxIdType,
+    });
+    if (!rendered) {
+        return null;
+    }
+    const singleTypeLabel = typeOptions
+        ? null
+        : taxIdLabelForCheckout(countryCode);
+    return {
+        inputLabel: (_a = selectedType === null || selectedType === void 0 ? void 0 : selectedType.label) !== null && _a !== void 0 ? _a : singleTypeLabel === null || singleTypeLabel === void 0 ? void 0 : singleTypeLabel.friendlyName,
+        inputPlaceholder: (_b = selectedType === null || selectedType === void 0 ? void 0 : selectedType.placeholder) !== null && _b !== void 0 ? _b : singleTypeLabel === null || singleTypeLabel === void 0 ? void 0 : singleTypeLabel.placeholder,
+        selectedValue: (selectedType === null || selectedType === void 0 ? void 0 : selectedType.value) || '',
+        showValueInput: send,
+        typeError: errorField === 'type' ? errorMessage : '',
+        typeOptions,
+        valueError: errorField === 'value' ? errorMessage : '',
+    };
+};

package/dist/collection/components/utils/checkout/resolveTaxIdSelection.js

@@ -0,0 +1,23 @@
+import { shouldRenderTaxIdInput } from "./shouldRenderTaxIdInput";
+import { taxIdTypeOptionsForCheckout } from "../taxId/taxIdRules";
+/** Whether the field is showing, and which of this country's types is selected. */
+export const resolveTaxIdSelection = ({ companyName, countryCode, shouldRequirePeruTaxId, taxIdType, }) => {
+    var _a;
+    const typeOptions = taxIdTypeOptionsForCheckout({
+        countryCode,
+        shouldRequirePeruTaxId,
+    });
+    const selectedType = (_a = typeOptions === null || typeOptions === void 0 ? void 0 : typeOptions.find(option => option.value === taxIdType)) !== null && _a !== void 0 ? _a : null;
+    const rendered = shouldRenderTaxIdInput({
+        companyName,
+        countryCode,
+        shouldRequirePeruTaxId,
+    });
+    return {
+        rendered,
+        selectedType,
+        // A multi-type country sends a number only after the shopper picks a type.
+        send: rendered && (!typeOptions || !!selectedType),
+        typeOptions,
+    };
+};

package/dist/collection/components/utils/checkout/shouldRenderTaxIdInput.js

@@ -1,20 +1,16 @@
-import { countryRequireTaxId, euCountryCodes, } from "../../../types/checkout/TaxId";
-const isInTaxIdCountry = (countryCode) => {
-    return countryRequireTaxId.includes(countryCode);
-};
+import { isPeruTaxIdActive } from "../taxId/taxIdRules";
+import { euCountryCodes, isCountryRequireTaxId, } from "../../../types/checkout/TaxId";
 /**
  * Checks if the tax ID input should be rendered based on the company name and country code.
  */
-export const shouldRenderTaxIdInput = ({ companyName, countryCode, }) => {
+export const shouldRenderTaxIdInput = ({ companyName, countryCode, shouldRequirePeruTaxId, }) => {
+    if (isPeruTaxIdActive({ countryCode, shouldRequirePeruTaxId })) {
+        return true;
+    }
     // Only show the tax ID input if the country is in the EU and the company name is provided
     if (euCountryCodes.includes(countryCode)) {
         return companyName.trim().length > 0;
     }
     // If country require tax id, show the input
-    const isCountryRequireTaxId = isInTaxIdCountry(countryCode);
-    if (isCountryRequireTaxId) {
-        return true;
-    }
-    // If country doesn't require tax ID, no need to show the input
-    return false;
+    return isCountryRequireTaxId(countryCode);
 };

package/dist/collection/components/utils/checkout/taxIdFields.js

@@ -0,0 +1,29 @@
+import { h } from "@stencil/core";
+import { stripeStore } from "../../store/checkout/stripe";
+import { translate } from "../../store/translationStore";
+import { getTaxIdFieldState } from "./getTaxIdFieldState";
+import { isCheckoutTaxIdTypeValue } from "../taxId/taxIdRules";
+export const renderTaxIdFields = ({ companyName, countryCode, errorField, errorMessage, onTaxIdChange, shouldRequirePeruTaxId, taxId, taxIdType, }) => {
+    const state = getTaxIdFieldState({
+        companyName,
+        countryCode,
+        errorField,
+        errorMessage,
+        shouldRequirePeruTaxId,
+        taxIdType,
+    });
+    if (!state) {
+        return null;
+    }
+    return (h("div", { class: "zonos--tax-id-input" }, state.typeOptions && (h("zonos-stripe-select", { error: state.typeError, isError: !!state.typeError, onSelectChange: (event) => {
+            if (isCheckoutTaxIdTypeValue(event.detail)) {
+                stripeStore.taxIdType = event.detail;
+            }
+        }, options: state.typeOptions.map(option => ({
+            label: translate(option.label),
+            value: option.value,
+        })), selectLabel: translate('Tax id type'), selectedValue: state.selectedValue, value: state.selectedValue })), state.showValueInput && (h("zonos-stripe-input", { error: state.valueError, inputLabel: state.inputLabel ? translate(state.inputLabel) : '', inputPlaceholder: state.inputPlaceholder || '', inputValue: taxId, isError: !!state.valueError, onInputChange: (event) => {
+            stripeStore.taxId = event.detail;
+            onTaxIdChange === null || onTaxIdChange === void 0 ? void 0 : onTaxIdChange(event.detail);
+        } }))));
+};

package/dist/collection/components/utils/handleFetch.js

@@ -17,6 +17,7 @@ import { jsonParse } from "./jsonParse";
 import { log } from "./logging/log";
 import { prepLoadTimeApiLog } from "./logging/prepLoadTimeApiLog";
 import { sendErrorLog } from "./logging/sendErrorLog";
+const isGatewayStatus = (status) => status === 502 || status === 503 || status === 504;
 const getResponseBody = async ({ response, shouldLog = true, shouldThrow = false, }) => {
     try {
         const text = await response.text();
@@ -137,28 +138,31 @@ const handleRequest = async ({ basePathType, options, path, }) => {
     }
     catch (_a) {
         const message = 'Unknown error';
+        // A gateway HTML or empty body still carries a status a GET can fail over
+        // on. Other non-JSON statuses, including 404 and 500, keep the previous
+        // null response so they do not fail over.
         return {
             baseUrl,
             errors: [{ message: `${status}: ${message}`, type: status }],
             json: null,
-            response: null,
+            response: isGatewayStatus(response.status) ? response : null,
             zonosMode,
         };
     }
 };
 const handleRequestWithFallback = async ({ basePathType: _basePathType, options, path, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     // use vercel API if the path is `/api/bigcommerce`
     const isBigcommerceEndpoint = path.startsWith('/api/bigcommerce');
     const basePathType = isBigcommerceEndpoint
         ? 'vercel'
         : _basePathType;
     const startTime = performance.now();
-    const _c = await handleRequest({
+    const _d = await handleRequest({
         basePathType,
         options,
         path,
-    }), { errors, response } = _c, rest = __rest(_c, ["errors", "response"]);
+    }), { errors, response } = _d, rest = __rest(_d, ["errors", "response"]);
     const endTime = performance.now();
     const duration = endTime - startTime;
     // Send the load time api log
@@ -180,10 +184,16 @@ const handleRequestWithFallback = async ({ basePathType: _basePathType, options,
         (message.includes('signal is aborted') ||
             message.includes('The operation was aborted') ||
             message.includes('Fetch is aborted')));
-    const isUnknownError = !!unknownError || (response === null || response === void 0 ? void 0 : response.status) === 404 || (response === null || response === void 0 ? void 0 : response.status) === 500;
-    const shouldCallFallback = 
-    // If next fallback is available, and the error is unknown (Failed to fetch) or 404 or 500 (server error)
-    nextFallbackApiType && isUnknownError;
+    const statusCode = response === null || response === void 0 ? void 0 : response.status;
+    const gateway = statusCode !== undefined && isGatewayStatus(statusCode);
+    // handleFetch sets method, and a missing method is a GET.
+    const isIdempotentGet = ((_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'GET').toUpperCase() === 'GET';
+    const failedWithoutGateway = !!unknownError || statusCode === 404 || statusCode === 500;
+    const isUnknownError = failedWithoutGateway || gateway;
+    // Replay 502, 503, and 504 only for GET. A gateway timeout on a POST can
+    // mean the first host is still finishing a payment or order write.
+    const shouldCallFallback = nextFallbackApiType &&
+        (failedWithoutGateway || (gateway && isIdempotentGet));
     // Should log the error if it's unknown error
     if (isUnknownError && !isAbortError) {
         void sendErrorLog({
@@ -193,7 +203,7 @@ const handleRequestWithFallback = async ({ basePathType: _basePathType, options,
                 currentBasePath: basePathType,
                 nextFallbackApiType,
                 requestHeaders: options === null || options === void 0 ? void 0 : options.headers,
-                requestPayload: jsonParse((_a = options === null || options === void 0 ? void 0 : options.body) === null || _a === void 0 ? void 0 : _a.toString()) || ((_b = options === null || options === void 0 ? void 0 : options.body) === null || _b === void 0 ? void 0 : _b.toString()),
+                requestPayload: jsonParse((_b = options === null || options === void 0 ? void 0 : options.body) === null || _b === void 0 ? void 0 : _b.toString()) || ((_c = options === null || options === void 0 ? void 0 : options.body) === null || _c === void 0 ? void 0 : _c.toString()),
                 shouldCallFallback,
                 status: response === null || response === void 0 ? void 0 : response.status,
                 statusText: response === null || response === void 0 ? void 0 : response.statusText,