@zonos/elements 1.3.5 → 1.3.7-alpha.0

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

@@ -13,13 +13,46 @@ export class ZonosAddress {
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
-        this.isDirtyAddress = !!stripeStore.stripeAddressEventData &&
-            stripeStore.stripeAddressEventData.value.address.line1.length > 0;
+        this.isDirtyAddress = false;
+    }
+    getStripeAddressInstance() {
+        if (this.type === 'billing') {
+            return {
+                stripeAddressElement: stripeStore.stripeBillingAddressElement,
+                stripeAddressEventData: stripeStore.stripeBillingAddressEventData,
+                stripeElements: stripeStore.stripeElementsForBillingAddress,
+            };
+        }
+        return {
+            stripeAddressElement: stripeStore.stripeAddressElement,
+            stripeAddressEventData: stripeStore.stripeAddressEventData,
+            stripeElements: stripeStore.stripeElements,
+        };
+    }
+    updateAddressEventData({ event, type, }) {
+        switch (type) {
+            case 'billing':
+                stripeStore.stripeBillingAddressEventData = event;
+                break;
+            default:
+                stripeStore.stripeAddressEventData = event;
+                break;
+        }
+        // only prefetch if the address type is shipping
+        void stripeStorePrefetchLandedCost();
+    }
+    updateAddressElement({ stripeAddressElement, type, }) {
+        if (type === 'shipping') {
+            stripeStore.stripeAddressElement = stripeAddressElement;
+            return;
+        }
+        stripeStore.stripeBillingAddressElement = stripeAddressElement;
     }
     async watchInitStripe() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b;
         this.stripe = window.Zonos.stripe;
-        if (!this.stripe || !stripeStore.stripeElements) {
+        const { stripeAddressEventData, stripeElements } = this.getStripeAddressInstance();
+        if (!this.stripe || !stripeElements) {
             logError("Stripe is not initialized. Couldn't load stripe element.");
             return;
         }
@@ -30,21 +63,19 @@ export class ZonosAddress {
             (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
         }
         const shippableCountries = localizationStore.shippingZoneCountries;
-        const addressElement = stripeStore.stripeElements.create('address', {
-            allowedCountries: shippableCountries
-                ? Object.values(shippableCountries).map(country => country.code)
-                : [],
-            autocomplete: {
-                mode: 'automatic',
-            },
+        const shippingZone = shippableCountries
+            ? Object.values(shippableCountries).map(country => country.code)
+            : [];
+        const addressElement = stripeElements.create('address', {
+            allowedCountries: this.type === 'shipping' ? shippingZone : [],
             contacts: this.defaultAddress ? [this.defaultAddress] : [],
             defaultValues: {
-                address: Object.assign(Object.assign({}, (_c = stripeStore.stripeAddressEventData) === null || _c === void 0 ? void 0 : _c.value.address), { country: ((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value.address.country) ||
+                address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
                         localizationStore.selectedCountryCode ||
                         'AL' }),
-                firstName: (_e = stripeStore.stripeAddressEventData) === null || _e === void 0 ? void 0 : _e.value.firstName,
-                lastName: (_f = stripeStore.stripeAddressEventData) === null || _f === void 0 ? void 0 : _f.value.lastName,
-                phone: (_g = stripeStore.stripeAddressEventData) === null || _g === void 0 ? void 0 : _g.value.phone,
+                firstName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName,
+                lastName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName,
+                phone: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone,
             },
             display: {
                 name: 'split',
@@ -72,31 +103,39 @@ export class ZonosAddress {
                     }
                     else {
                         // scroll into the end of the page so the address placeholder won't be hidden
-                        const yOffset = 100;
+                        const yOffset = this.type === 'shipping' ? 100 : 600;
                         const parentWrapper = this.el.closest('.zonos--group');
                         const y = this.el.getBoundingClientRect().top + yOffset;
                         parentWrapper === null || parentWrapper === void 0 ? void 0 : parentWrapper.scrollTo({ behavior: 'smooth', top: y });
                     }
-                }, 400);
+                }, 600);
             }
-            stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
-            // run prefetch landed cost when address is changed
-            void stripeStorePrefetchLandedCost();
+            this.updateAddressEventData({
+                event: Object.assign(Object.assign({}, event), { elementMode: this.type, elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) }),
+                type: this.type,
+            });
+        });
+        this.updateAddressElement({
+            stripeAddressElement: addressElement,
+            type: this.type,
         });
-        stripeStore.stripeAddressElement = addressElement;
     }
     disconnectedCallback() {
-        var _a;
         // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
-        (_a = stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.destroy();
+        const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
+        stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
     }
     componentDidLoad() {
+        const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
+        this.isDirtyAddress =
+            !!stripeAddressEventData &&
+                stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '41014c1af1c8f8f5bb37caf358a6cec124e66f30', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '5d8dcc4b44f7fe7b089b630ec6ca7b2177fef371', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'da0fe9760d7ca8dbc089481ac1dcb7c0a7c6553f', class: "zonos--address-component" })));
+        return (h(Host, { key: 'b2aa1ee3f16ae4ebcce83b599c97aa80f09dc9d3', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'e37392d0add0ab8541f78131abdf9082fd2455b4', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd28d1908ee2f525455b0680e25cff3040093ad74', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -36,7 +36,7 @@ export class ZonosLinkAuthentication {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '5d02895b441a5713b83e7b3c4b784ab4b6743f54', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '5bd33edd16f1511111bfcb497e0767f938172b05', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd5a90ce88adaed9f2369af4692506d5d072c021d', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: 'aec893e026a60bcbf81e93a3c63a842f97437dcc', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '93c2c462d3a108364d2dfbc4aeab058f87bcc7b3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '0098e20d87cce7547fc1abf26859c0d3765407cd', class: "zonos--link-authentication-component" })));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }

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

@@ -37,7 +37,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '365e346a6cda504bdbc825ff8e25b7492bf1d19b', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'f76c3b4ef941ecc8cb99ac3593b9d902eda5b1e7', class: "zonos--payment-component" })));
+        return (h(Host, { key: 'd5b7717fa4b80da99ae6ba2d7cccbe318e091f8f', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '37bd2c2dcc59613857b9fd22d864c0d11b2a7319', class: "zonos--payment-component" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,10 +4,28 @@ export const prepCalculateLandedCost = () => {
     // maybe we don't need email now for prefetch the landed cost
     const stripeLinkData = stripeStore.stripeLinkEventData;
     const stripeAddressData = stripeStore.stripeAddressEventData;
-    if (!stripeAddressData || !stripeAddressData.complete) {
+    const stripeBillingAddressData = stripeStore.stripeShippingSameAsBilling
+        ? stripeStore.stripeAddressEventData
+        : stripeStore.stripeBillingAddressEventData;
+    if (!(stripeAddressData === null || stripeAddressData === void 0 ? void 0 : stripeAddressData.complete) || !(stripeBillingAddressData === null || stripeBillingAddressData === void 0 ? void 0 : stripeBillingAddressData.complete)) {
         throw new Error('Missing stripe address data');
     }
     return {
+        billingAddress: {
+            addressLine1: stripeBillingAddressData.value.address.line1,
+            addressLine2: stripeBillingAddressData.value.address.line2 || '',
+            city: stripeBillingAddressData.value.address.city,
+            country: stripeBillingAddressData.value.address.country,
+            postalCode: stripeBillingAddressData.value.address.postal_code,
+            state: stripeBillingAddressData.value.address.state,
+        },
+        billingContact: {
+            // firstName and lastName should be valid now since stripe only mark
+            // the address as complete when both fields are filled.
+            firstName: stripeBillingAddressData.value.firstName || '',
+            lastName: stripeBillingAddressData.value.lastName || '',
+            phone: stripeBillingAddressData.value.phone || '',
+        },
         checkoutSessionId: cartStore.checkoutSessionId || '',
         contact: {
             email: (stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email) || '',

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

@@ -1,11 +1,17 @@
 import { prepCalculateLandedCost } from "./prepCalculateLandedCost";
 import { handleFetch } from "../handleFetch";
 export const triggerBuildLandedCost = async (buildLandedCost) => {
-    var _a;
+    var _a, _b, _c, _d;
     const data = prepCalculateLandedCost();
-    const landedCost = await buildLandedCost(data.checkoutSessionId, data.contact, data.shippingAddress);
-    if (!landedCost) {
-        throw new Error('Failed to build landed cost');
+    const landedCost = await buildLandedCost({
+        billingAddress: data.billingAddress,
+        billingContact: data.billingContact,
+        checkoutSessionId: data.checkoutSessionId,
+        contact: data.contact,
+        shippingAddress: data.shippingAddress,
+    });
+    if (!landedCost || ((_a = landedCost.errors) === null || _a === void 0 ? void 0 : _a.length)) {
+        throw new Error(`Failed to build landed cost: ${((_c = (_b = landedCost === null || landedCost === void 0 ? void 0 : landedCost.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.message) || 'Unknown error'}`);
     }
     // Validate the landed cost object to make sure the returned value from buildLandedCost has a valid schema
     const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/validate-landed-cost`, {
@@ -16,7 +22,7 @@ export const triggerBuildLandedCost = async (buildLandedCost) => {
         method: 'POST',
     });
     if (!json || errors.length) {
-        throw new Error(`Invalid landed cost object: ${((_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message) || 'Unknown error'}`);
+        throw new Error(`Invalid landed cost object: ${((_d = errors.find(Boolean)) === null || _d === void 0 ? void 0 : _d.message) || 'Unknown error'}`);
     }
     return landedCost;
 };

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

@@ -4,10 +4,14 @@ import { zonosStore } from "../store/zonosStore";
  * @param overrideBorderStyle
  * @returns
  */
-export const getBorderRadius = (overrideBorderStyle) => {
+export const getBorderRadius = (overrideBorderStyle, 
+/**
+ * This is the custom round radius for component that 10px is too much for them
+ */
+customRoundRadius = '10px') => {
     if (overrideBorderStyle) {
         // If the override is set, use that, otherwise use the default radius style
-        return overrideBorderStyle === 'SHARP' ? '0px' : '10px';
+        return overrideBorderStyle === 'SHARP' ? '0px' : customRoundRadius;
     }
-    return zonosStore.appearance.style === 'SHARP' ? '0px' : '10px';
+    return zonosStore.appearance.style === 'SHARP' ? '0px' : customRoundRadius;
 };

package/dist/collection/types/ILanguage.js

@@ -0,0 +1,22 @@
+export const languages = [
+    { code: 'en', label: 'English', translatedLabel: 'English' },
+    { code: 'es', label: 'Spanish', translatedLabel: 'Español' },
+    { code: 'pt', label: 'Portuguese', translatedLabel: 'Português' },
+    { code: 'ru', label: 'Russian', translatedLabel: 'русский' },
+    { code: 'da', label: 'Danish', translatedLabel: 'dansk' },
+    { code: 'it', label: 'Italian', translatedLabel: 'Italiano' },
+    { code: 'pl', label: 'Polish', translatedLabel: 'Polskie' },
+    { code: 'ar', label: 'Arabic', translatedLabel: 'عربى' },
+    { code: 'de', label: 'German', translatedLabel: 'Deutsche' },
+    { code: 'ja', label: 'Japanese', translatedLabel: '日本語' },
+    { code: 'no', label: 'Norwegian', translatedLabel: 'norsk' },
+    { code: 'vi', label: 'Vietnamese', translatedLabel: 'Tiếng Việt' },
+    { code: 'tr', label: 'Turkish', translatedLabel: 'Türk' },
+    { code: 'he', label: 'Hebrew', translatedLabel: 'עִברִית' },
+    { code: 'fr', label: 'French', translatedLabel: 'Français' },
+    { code: 'nl', label: 'Dutch', translatedLabel: 'Nederlands' },
+    { code: 'zh', label: 'Chinese', translatedLabel: '中文' },
+    { code: 'sv', label: 'Swedish', translatedLabel: 'svenska' },
+    { code: 'id', label: 'Indonesian', translatedLabel: 'bahasa Indonesia' },
+    { code: 'ko', label: 'Korean', translatedLabel: '한국어' },
+];

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

@@ -1016,6 +1016,7 @@ export const emailTemplateType = {
     AbandonedCart: 'ABANDONED_CART',
     OrderCanceled: 'ORDER_CANCELED',
     OrderConfirmation: 'ORDER_CONFIRMATION',
+    OrderReceipt: 'ORDER_RECEIPT',
     OrderShipped: 'ORDER_SHIPPED',
     Unknown: 'UNKNOWN',
 };
@@ -1208,6 +1209,16 @@ export const invoiceLanguageCode = {
     ZhHk: 'ZH_HK',
     ZhTw: 'ZH_TW',
 };
+export const invoiceLineRecordBehaviorCode = {
+    Finalize: 'FINALIZE',
+    Pending: 'PENDING',
+};
+export const invoiceLineRecordStatusCode = {
+    Failed: 'FAILED',
+    Pending: 'PENDING',
+    Processed: 'PROCESSED',
+    Voided: 'VOIDED',
+};
 export const invoiceStatus = {
     Received: 'RECEIVED',
     Reconciled: 'RECONCILED',
@@ -1312,7 +1323,12 @@ export const landedCostFeeType = {
     Other: 'OTHER',
     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',
@@ -1857,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');
         },

package/dist/collection/types/index.js

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import "./global.d";
 export * from '../components.d';
-export * from '../components/store/checkout/cart';
 export * from './checkout/CheckoutConfig';
 export * from './hello/HelloConfig';
 export * from './JsonError';

package/dist/collection/types/styles/Color.js

@@ -20,3 +20,12 @@ export const colorContrasts = [
     '900',
     '1000',
 ];
+export const checkboxColorPrefix = [
+    'blue',
+    'cyan',
+    'green',
+    'orange',
+    'purple',
+    'red',
+    'gray',
+];

package/dist/components/ILanguage.js

@@ -0,0 +1,24 @@
+const languages = [
+    { code: 'en', label: 'English', translatedLabel: 'English' },
+    { code: 'es', label: 'Spanish', translatedLabel: 'Español' },
+    { code: 'pt', label: 'Portuguese', translatedLabel: 'Português' },
+    { code: 'ru', label: 'Russian', translatedLabel: 'русский' },
+    { code: 'da', label: 'Danish', translatedLabel: 'dansk' },
+    { code: 'it', label: 'Italian', translatedLabel: 'Italiano' },
+    { code: 'pl', label: 'Polish', translatedLabel: 'Polskie' },
+    { code: 'ar', label: 'Arabic', translatedLabel: 'عربى' },
+    { code: 'de', label: 'German', translatedLabel: 'Deutsche' },
+    { code: 'ja', label: 'Japanese', translatedLabel: '日本語' },
+    { code: 'no', label: 'Norwegian', translatedLabel: 'norsk' },
+    { code: 'vi', label: 'Vietnamese', translatedLabel: 'Tiếng Việt' },
+    { code: 'tr', label: 'Turkish', translatedLabel: 'Türk' },
+    { code: 'he', label: 'Hebrew', translatedLabel: 'עִברִית' },
+    { code: 'fr', label: 'French', translatedLabel: 'Français' },
+    { code: 'nl', label: 'Dutch', translatedLabel: 'Nederlands' },
+    { code: 'zh', label: 'Chinese', translatedLabel: '中文' },
+    { code: 'sv', label: 'Swedish', translatedLabel: 'svenska' },
+    { code: 'id', label: 'Indonesian', translatedLabel: 'bahasa Indonesia' },
+    { code: 'ko', label: 'Korean', translatedLabel: '한국어' },
+];
+
+export { languages as l };

package/dist/components/getBorderRadius.js

@@ -5,12 +5,16 @@ import { z as zonosStore } from './zonosStore.js';
  * @param overrideBorderStyle
  * @returns
  */
-const getBorderRadius = (overrideBorderStyle) => {
+const getBorderRadius = (overrideBorderStyle, 
+/**
+ * This is the custom round radius for component that 10px is too much for them
+ */
+customRoundRadius = '10px') => {
     if (overrideBorderStyle) {
         // If the override is set, use that, otherwise use the default radius style
-        return overrideBorderStyle === 'SHARP' ? '0px' : '10px';
+        return overrideBorderStyle === 'SHARP' ? '0px' : customRoundRadius;
     }
-    return zonosStore.appearance.style === 'SHARP' ? '0px' : '10px';
+    return zonosStore.appearance.style === 'SHARP' ? '0px' : customRoundRadius;
 };
 
 export { getBorderRadius as g };

package/dist/components/index.js

@@ -1,2 +1 @@
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-export { c as cartStore, a as cartStoreApplySubtotals, b as cartStoreGetShippingTransitInfo, d as cartStoreNextStep, e as cartStorePreviousStep, f as cartStoreReCalculateTotal, g as cartStoreReset, h as cartStoreUpdateItems, i as cartStoreUpdateSelectedShippingOption, j as cartStoreUpdateToErrorState } from './cart.js';

package/dist/components/isDarkColor.js

@@ -1,4 +1,4 @@
-import { a as commonjsGlobal } from './zonosStore.js';
+import { b as commonjsGlobal } from './zonosStore.js';
 
 var tinycolor$1 = {exports: {}};