@zonos/elements 1.3.83 → 1.3.85

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

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { stripeStore } from "../../store/checkout/stripe";
-import { localizationStore } from "../../store/hello/localization";
+import { DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT, localizationStore, } from "../../store/hello/localization";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { logError } from "../../utils/logging/logError";
 /**
@@ -72,7 +72,7 @@ export class ZonosAddress {
             defaultValues: {
                 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' }),
+                        DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT }),
                 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,
@@ -135,7 +135,7 @@ export class ZonosAddress {
     }
     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: 'c8d513bc9890590db622ec8f26d4e9b0694c33e5', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '775b454620360bed4186a23371bc3867a5745155', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '4844b5379a33a3668cae0036c1a952cd42229efb', class: "zonos--address-component" })));
+        return (h(Host, { key: 'aa9a569b302099681082cd4219b553f9c70842ea', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '60050e9f8f0b80dde9acc9ffbd868333fdabf2b3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '5af7ee4f23d75fc877cdde7babe0edaefef14da8', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

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

@@ -17,7 +17,7 @@ export class ZonosPayment {
         // Create and mount the Authentication Element in ${type} mode
         const paymentElement = stripeStore.stripePaymentElement ||
             this.stripeElements.create('payment', {
-                layout: 'accordion',
+                layout: 'tabs',
             });
         const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
         if (!paymentElementContainer) {
@@ -36,7 +36,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: 'c461a967d00b2d96fa70aaaf1651b435cdcd84bd', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '44da1d89ce19f7174cad1214ab9463f0b1174c0d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'b9e3491b48d9ede19a5cdef639bd47e6bf0ba742', class: "zonos--payment-component" }), h("div", { key: '578516ce1ca1dc01eebb2268bb5449613e14298f', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'cf616ec959fd1b7396ed86b23561f459e0da8722', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'e5564db71ba2c0d67d372cb1804d6d462cdf1b33', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '3ea47f2c0a541590210d181bc73ecb3fb27e7783', class: "zonos--payment-component" }), h("div", { key: 'd3a46a127448568caf4309806e88556594075c12', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,12 +1,10 @@
 import { localizationStore } from "../../store/hello/localization";
-import { createCustomEvent } from "../createCustomEvent";
 import { log } from "../logging/log";
 export const isDisabledCountry = (showLog = true) => {
     if (!localizationStore.localizationLoaded) {
         return true;
     }
     if (localizationStore.isDisabledCountry) {
-        document.dispatchEvent(createCustomEvent('legacyCheckoutError', 'Unable to initiate checkout process in a country that has been disabled for checkout'));
         if (showLog) {
             log(`Checkout: disabled country`);
         }

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

@@ -1,5 +1,4 @@
 import { localizationStore } from "../../store/hello/localization";
-import { createCustomEvent } from "../createCustomEvent";
 import { log } from "../logging/log";
 export const isShippableCountry = (showLog = true) => {
     if (!localizationStore.localizationLoaded) {
@@ -7,7 +6,6 @@ export const isShippableCountry = (showLog = true) => {
     }
     // if localization is loaded and the localization is not a shippable country, keep the original click event
     if (!localizationStore.isShippableCountry) {
-        document.dispatchEvent(createCustomEvent('legacyCheckoutError', 'Unable to initiate checkout process in a country where shipping is not available'));
         if (showLog) {
             log(`Checkout: not shippable country`);
         }

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

@@ -14,7 +14,12 @@ export const getContrastColor = ({ backgroundColor, color, }) => {
     if (isDarkColor(color)) {
         return '#ffffff';
     }
-    else {
-        return tinycolor(color).darken(25).toHexString();
-    }
+    const newDarkerColor = tinycolor(color).darken(25).toHexString();
+    const newLigherColor = tinycolor(color).lighten(25).toHexString();
+    // get readibility of the color
+    const isNewColorContrastEnough = isContrastColor({
+        backgroundColor1: backgroundColor,
+        backgroundColor2: newDarkerColor,
+    });
+    return isNewColorContrastEnough ? newDarkerColor : newLigherColor;
 };

package/dist/collection/styles/stripe/addressRuleStyle.js

@@ -29,6 +29,10 @@ export const addressRuleStyle = ({ theme, }) => {
         '.PickerItem--new': {
             color: 'var(--colorText)',
         },
+        '.Tab--selected': {
+            borderStyle: 'solid',
+            borderWidth: '1px',
+        },
     };
     switch (theme) {
         case 'DARK': {