@zonos/elements 1.3.6 → 1.3.7-alpha.0

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -41,6 +41,7 @@ export class ZonosCheckoutFinish {
                 case 'ZONOS_SUCCESS_PAGE':
                 default:
                     // Do nothing, display Zonos success page
+                    this.isLoading = false;
                     break;
             }
         };
@@ -50,7 +51,6 @@ export class ZonosCheckoutFinish {
             if (order) {
                 this.order = order;
                 this.handleSuccessBehavior(order.id);
-                this.isLoading = false;
             }
             else if (!order && attempts < 5) {
                 // Wait for 1 second before the next attempt
@@ -102,12 +102,17 @@ export class ZonosCheckoutFinish {
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts
                 if (this.notificationType === 'success') {
-                    this.isLoading = true;
                     void this.getPullOrder();
                 }
+                else {
+                    this.isLoading = false;
+                }
+            }
+            else {
+                this.isLoading = false;
             }
             stripeStoreReset();
-            this.isLoading = false;
+            cartStore.checkoutSessionId = null;
         };
         this.closeClickHandler = () => {
             this.closeClick.emit();
@@ -140,7 +145,7 @@ export class ZonosCheckoutFinish {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: '9a09eb68e5e6d256f72798bb5119ad1ff467fd70', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '08886ec74e789091534c8bd6561a8349a5a6966c', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius(this.borderRadius),
             } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css

@@ -75,7 +75,8 @@
   position: sticky;
   display: flex;
   justify-content: center;
-  bottom: 0;
+  bottom: -5px;
+  padding-top: var(--amino-space-8);
   margin-top: var(--amino-space-12);
   background: var(--primary-color, var(--amino-gray-0));
 }

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js

@@ -23,10 +23,23 @@ export class ZonosCollapse {
     }
     render() {
         this.height = this.el.scrollHeight;
-        return (h(Host, { key: '372c80d0d5b8d2c693b2c74bd6652430c8e4a5bb', class: 'zonos--elements zonos--collapse', style: {
+        if (!this.collapsed) {
+            // wait for the collapse animation to finish, then set overflow to visible
+            setTimeout(() => {
+                // if the element collapsed state is still not changed, set overflow to visible
+                if (!this.collapsed) {
+                    this.el.style.overflow = 'visible';
+                }
+            }, 300);
+        }
+        else {
+            // set overflow to hidden to prevent content from showing when collapsed
+            this.el.style.overflow = 'hidden';
+        }
+        return (h(Host, { key: 'cbec79617b603172a6c3c41d29ee093f61eead92', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: 'babd12279d1ac54092a1cff83e8e5b8ed5e81008' }, h("iframe", { key: '6d3a7845d560ba587829ba68033cd92ec8d2af5b', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'f295e17fd3178eb44dc7c0c51f87a80694fd04d7' }))));
+            } }, h("div", { key: '6e72b98c155ee436bbaabce3d7b58294bb6ccc7a' }, h("iframe", { key: 'ef3306219530d635fa320099727a3574d5800285', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'a66b3d6d08a12f0c184a5c4294afdb2c340fe95d' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/store/checkout/stripe.js

@@ -295,6 +295,9 @@ const stripeStoreInitCheckoutSession = async () => {
         body: {
             currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
             itemsAmount: total,
+            metadata: [
+                { key: 'language', value: localizationStore.selectedLocale },
+            ],
             presentmentCountryCode: localizationStore.selectedCountryCode || null,
         },
         method: 'POST',

package/dist/collection/components/store/hello/localization.js

@@ -1,4 +1,5 @@
 import { createStore } from "@stencil/store";
+import { cartStore } from "../checkout/cart";
 import { translationStoreUpdateLanguage } from "../translationStore";
 import { zonosStore } from "../zonosStore";
 import { getCountries } from "../../utils/api/getCountries";
@@ -7,10 +8,12 @@ import { getExchangeRate, } from "../../utils/api/getExchangeRate";
 import { getLocaleMessages } from "../../utils/api/getLocaleMessages";
 import { getLocalization } from "../../utils/api/getLocalization";
 import { getShippingZones } from "../../utils/api/getShippingZones";
+import { handleFetch } from "../../utils/handleFetch";
 import { currencyDisplay } from "../../utils/hello/currencyConversion/currencyDisplay";
 import { getCurrencyCode } from "../../utils/hello/currencyConversion/getCurrencyCode";
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
 import { log } from "../../utils/logging/log";
+import { logError } from "../../utils/logging/logError";
 const { state: localizationStore } = createStore({
     countryLandedCost: null,
     customMessages: [],
@@ -119,7 +122,7 @@ const initLocalizationStore = async () => {
     // Filter countries to only include countries in the shipping zone
     const filteredCountries = shippingZoneCountries === null || shippingZoneCountries === void 0 ? void 0 : shippingZoneCountries.reduce((acc, countryCode) => {
         const countryInfo = allCountries === null || allCountries === void 0 ? void 0 : allCountries[countryCode];
-        return countryInfo
+        return countryInfo && countryInfo.active
             ? Object.assign(Object.assign({}, acc), { [countryCode]: countryInfo }) : acc;
     }, {});
     localizationStore.shippingZoneCountries = filteredCountries || null;
@@ -140,8 +143,31 @@ const initLocalizationStore = async () => {
     localizationStore.localizationLoaded = true;
     void getCustomMessages();
 };
+const updateCheckoutSessionLanguage = async () => {
+    if (!cartStore.checkoutSessionId) {
+        return null;
+    }
+    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/update-checkout-session-metadata`, {
+        body: {
+            id: cartStore.checkoutSessionId,
+            metadata: [
+                {
+                    key: 'language',
+                    value: localizationStore.selectedLocale,
+                },
+            ],
+        },
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        logError('Error occurs when updating checkout session', JSON.stringify(errors, null, 2));
+        return { errors, json };
+    }
+    return { errors: [], json };
+};
 const localizationStoreUpdateSelectedLocale = (newSelectedLocale) => {
     localizationStore.selectedLocale = newSelectedLocale;
     translationStoreUpdateLanguage(newSelectedLocale);
+    void updateCheckoutSessionLanguage();
 };
 export { initLocalizationStore, localizationStore, localizationStoreUpdateSelectedCountryCode, localizationStoreUpdateSelectedLocale, };

package/dist/collection/components/store/zonosStore.js

@@ -84,16 +84,16 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
     }
     zonosStore.appearance = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.appearanceSettings) ||
-        null, overrideSettings.appearance);
+        null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.appearance);
     zonosStore.checkoutSettings = mergeConfig(zonosStore.checkoutSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.checkoutSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.checkoutSettings) ||
-        null, overrideSettings.checkoutSettings);
-    zonosStore.helloSettings = mergeConfig(zonosStore.helloSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.helloSettings) || (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.helloSettings) || null, overrideSettings.helloSettings);
+        null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.checkoutSettings);
+    zonosStore.helloSettings = mergeConfig(zonosStore.helloSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.helloSettings) || (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.helloSettings) || null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.helloSettings);
     // set flag to true to indicate that config is ready
     zonosStore.loadedConfig = true;
     zonosStore.organizationName = ((_a = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _a === void 0 ? void 0 : _a.name) || '';
     zonosStore.storeId = ((_c = (_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.references) === null || _c === void 0 ? void 0 : _c.storeId) || null;
-    zonosStore.currencyConverter = overrideSettings.currencyConverter;
+    zonosStore.currencyConverter = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.currencyConverter;
 };
 const zonosStoreFontFamily = () => {
     const fontFamily = zonosStore.appearance.fontFamily || 'Inter';

package/dist/collection/types/generated/graphql.customer.types.js

@@ -1324,8 +1324,11 @@ export const landedCostFeeType = {
     Shipping: 'SHIPPING',
     Tax: 'TAX',
     ZonosAccessFee: 'ZONOS_ACCESS_FEE',
+    ZonosLandedCost: 'ZONOS_LANDED_COST',
     ZonosLandedCostGuarantee: 'ZONOS_LANDED_COST_GUARANTEE',
     ZonosMerchantFee: 'ZONOS_MERCHANT_FEE',
+    ZonosMerchantProcessing: 'ZONOS_MERCHANT_PROCESSING',
+    ZonosTransaction: 'ZONOS_TRANSACTION',
 };
 export const landedCostGuaranteeCode = {
     InclusivePrice: 'INCLUSIVE_PRICE',
@@ -1870,6 +1873,9 @@ export function getSdk(client, withWrapper = defaultWrapper) {
         CheckoutSessionUpdate(variables, requestHeaders) {
             return withWrapper(wrappedRequestHeaders => client.request('', variables, Object.assign(Object.assign({}, requestHeaders), wrappedRequestHeaders)), 'CheckoutSessionUpdate', 'mutation');
         },
+        CheckoutSessionUpdateMetadata(variables, requestHeaders) {
+            return withWrapper(wrappedRequestHeaders => client.request('', variables, Object.assign(Object.assign({}, requestHeaders), wrappedRequestHeaders)), 'CheckoutSessionUpdateMetadata', 'mutation');
+        },
         ExchangeRateCreate(variables, requestHeaders) {
             return withWrapper(wrappedRequestHeaders => client.request('', variables, Object.assign(Object.assign({}, requestHeaders), wrappedRequestHeaders)), 'ExchangeRateCreate', 'mutation');
         },