@zonos/elements 1.3.15-alpha.2 → 1.3.15

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.js

@@ -0,0 +1,429 @@
+import { h, Host, } from "@stencil/core";
+import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+import { classes } from "../../../utils/classes";
+import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveIcon from "./../assets/RemoveIcon.svg";
+export class ZonosAddressUpdateDialog {
+    constructor() {
+        /**
+         * handler for close button click
+         */
+        this.closeDialogHandler = () => {
+            this.closeDialog.emit();
+        };
+        /**
+         * Extract value from translated object
+         */
+        this.getTranslatedAddress = ({ currentAddress, translatedAddress, }) => {
+            var _a, _b, _c, _d, _e, _f;
+            const { city, line1, line2, name, postal_code, state } = currentAddress;
+            return {
+                city: ((_a = translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city,
+                line1: ((_b = translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1,
+                line2: ((_c = translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2,
+                name: ((_d = translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name,
+                postal_code: ((_e = translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code,
+                state: ((_f = translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state,
+            };
+        };
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = async () => {
+            var _a, _b, _c;
+            // set spinner for the continue button
+            this.continueLoading = true;
+            const translatedBillingAddress = this.billingAddress
+                ? this.getTranslatedAddress({
+                    currentAddress: this.billingAddress,
+                    translatedAddress: this.translatedBillingAddressState,
+                })
+                : null;
+            const translatedShippingAddress = this.getTranslatedAddress({
+                currentAddress: this.shippingAddress,
+                translatedAddress: this.translatedShippingAddressState,
+            });
+            // check to see if there are still non-latin characters in the translated address
+            const shippingNonlatinChars = containsNonLatinChars(Object.assign(Object.assign({}, translatedShippingAddress), { country: this.shippingAddress.country }));
+            // get list of non-latin characters field in the billing address
+            const billingNonLatinChars = translatedBillingAddress &&
+                this.billingAddress &&
+                containsNonLatinChars(Object.assign(Object.assign({}, translatedBillingAddress), { country: this.billingAddress.country }));
+            const shippingHasNonLatinChars = !!Object.keys(shippingNonlatinChars)
+                .length;
+            const billingHasNonLatinChars = !!billingNonLatinChars && !!Object.keys(billingNonLatinChars).length;
+            // if there are non-latin characters in the translated address, scroll to the error input so user can see and fix it
+            if (shippingHasNonLatinChars || billingHasNonLatinChars) {
+                // get scroll top of the first input has "has-error" class
+                const addressForms = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('zonos-address-form');
+                const shippingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[0];
+                const billingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[1];
+                const errorInput = ((_b = shippingAddressForm === null || shippingAddressForm === void 0 ? void 0 : shippingAddressForm.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.has-error')) ||
+                    ((_c = billingAddressForm === null || billingAddressForm === void 0 ? void 0 : billingAddressForm.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.has-error'));
+                // scroll to the first error input
+                if (errorInput) {
+                    errorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+                this.continueLoading = false;
+                return;
+            }
+            // Submit the translated address to the parent component
+            this.continueClicked.emit({
+                billingAddress: translatedBillingAddress,
+                shippingAddress: translatedShippingAddress,
+            });
+        };
+        /**
+         * This function builds a state object for a translated address.
+         * It takes the current and translated address as input and returns an object where each field is an object itself.
+         * The key of each field's object is the current address's field value and the value is the corresponding translated address's field value.
+         *
+         * @param {Object} params - The parameters for the function.
+         * @param {EnteredInfo} params.currentAddress - The current address information.
+         * @param {EnteredInfo} params.translatedAddress - The translated address information.
+         *
+         */
+        this.buildTranslateAddressState = ({ currentAddress, translatedAddress, }) => {
+            const { city, line1, line2, name, postal_code, state } = currentAddress;
+            return {
+                city: {
+                    [city]: translatedAddress.city,
+                },
+                line1: {
+                    [line1]: translatedAddress.line1,
+                },
+                line2: {
+                    [line2]: translatedAddress.line2,
+                },
+                name: {
+                    [name]: translatedAddress.name,
+                },
+                postal_code: {
+                    [postal_code]: translatedAddress.postal_code,
+                },
+                state: {
+                    [state]: translatedAddress.state,
+                },
+            };
+        };
+        this.continueLoading = false;
+        this.dialogLoading = undefined;
+        this.dialogOpen = false;
+        this.submitBtnType = undefined;
+        this.submitBtnColor = undefined;
+        this.isMobile = false;
+        this.shippingAddress = undefined;
+        this.billingAddress = undefined;
+        this.translatedShippingAddress = undefined;
+        this.translatedBillingAddress = undefined;
+        this.showErrorBanner = false;
+        this.translatedShippingAddressState = {};
+        this.translatedBillingAddressState = {};
+    }
+    watchTranslatedShippingAddress() {
+        this.translatedShippingAddressState = this.translatedShippingAddress;
+    }
+    watchTranslatedBillingAddress() {
+        this.translatedBillingAddressState = this.translatedBillingAddress;
+    }
+    componentWillLoad() {
+        // update the state with the initial props
+        this.watchTranslatedBillingAddress();
+        this.watchTranslatedShippingAddress();
+    }
+    render() {
+        // dialog background white, so when the button background is also white, we need to change the button type to outline so it's visible
+        const submitBtnColor = this.submitBtnColor || zonosStore.appearance.colorSecondary;
+        const submitBtnType = submitBtnColor === '#ffffff'
+            ? 'outline'
+            : this.submitBtnType || 'standard';
+        const billing = this.billingAddress;
+        const shipping = this.shippingAddress;
+        return (h(Host, { key: '03535edacb348258592641baa349e9dcf14bf78c', class: classes([
+                'zonos--address-update-dialog zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("zonos-dialog", { key: 'c16871425dffe955d422ffa5b9aee1ece0da2890', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: 'e4fad501f7cfedc5783774d8b1bf785d6947d3c8', class: "zonos--body" }, h("div", { key: '973e7a8097b8c8f60e47e6ad9d8311a64a5a6ff0', class: "zonos--dialog-header" }, h("div", { key: '89c82b6ff3723056d161560da22bd16a992afee7', class: "zonos--dialog-title" }, h("zonos-text", { key: 'bf92ef0b40ea67a492164fedb95dd68b7d023e85', type: "title" }, translate('Update your address')), h("zonos-button", { key: '4e7a1905c976cec396db5c34f633b383bba0d55a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("zonos-text", { key: '47b42d8cc14c4757e3fc9f2f43eafbd8d9e9df38' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '28d9804f0a18f143ce541c2c511cbfa21a2a416f', class: "zonos--group" }, h("zonos-text", { key: '43ec5a9fc8594d065b256952ca8e9392fba03839', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'b7eb7781ce6aefe20f89b4d5fba190f0102eb5d1', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '152c53176a46575677723ca47386e484c659927a', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '6c7ac2b49d121c26ce45f09a1eac9ef456d45910', addressType: "billing", currentAddress: billing }))), h("div", { key: '2bda98bb0ac9bafcb009ff36fb97a9fc62ce7e2d', class: "zonos--address-form-section" }, h("zonos-text", { key: '87d3380072a049ccde71ba1b752aedd36830348b', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '2cb36251c6549da05e272183b2c37478b4166fea', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
+                const address = e.detail;
+                this.translatedShippingAddressState =
+                    this.buildTranslateAddressState({
+                        currentAddress: shipping,
+                        translatedAddress: address,
+                    });
+            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: '9bf5ebd6fb08851716a72c855451bfeb3ee0ed68', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
+                const address = e.detail;
+                this.translatedBillingAddressState =
+                    this.buildTranslateAddressState({
+                        currentAddress: billing,
+                        translatedAddress: address,
+                    });
+            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '621df9c8919973b37c62aca5727bde3635086a6b', class: "zonos--group-btn" }, h("div", { key: '95e9fd31418abc8e89ceef24af7cc251ee45ac93', class: "zonos--button-wrapper" }, h("zonos-button", { key: 'bef31fc81e7cc0f2b3f7ab875a29978b07865b6a', class: "zonos--cancel-btn", onClick: () => this.closeDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '9d183153541766b421c3420681c1159ffa599682', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
+    }
+    static get is() { return "zonos-address-update-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-address-update-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-address-update-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "continueLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the continue button is loading"
+                },
+                "attribute": "continue-loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dialogLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is loading"
+                },
+                "attribute": "dialog-loading",
+                "reflect": false
+            },
+            "dialogOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is open"
+                },
+                "attribute": "dialog-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "submitBtnType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLZonosButtonElement['variant']",
+                    "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "HTMLZonosButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLZonosButtonElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button type of the submit button"
+                },
+                "attribute": "submit-btn-type",
+                "reflect": false
+            },
+            "submitBtnColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button color of the submit button"
+                },
+                "attribute": "submit-btn-color",
+                "reflect": false
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is open"
+                },
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "shippingAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "EnteredInfo",
+                    "resolved": "{ city: string; country: CountryCode; email: string; line1: string; line2: string; name: string; phone: string; postal_code: string; state: string; }",
+                    "references": {
+                        "EnteredInfo": {
+                            "location": "import",
+                            "path": "src/types/checkout/TranslatedText",
+                            "id": "src/types/checkout/TranslatedText.ts::EnteredInfo"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shipping address that user has entered"
+                }
+            },
+            "billingAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "EnteredInfo | null",
+                    "resolved": "null | { city: string; country: CountryCode; email: string; line1: string; line2: string; name: string; phone: string; postal_code: string; state: string; }",
+                    "references": {
+                        "EnteredInfo": {
+                            "location": "import",
+                            "path": "src/types/checkout/TranslatedText",
+                            "id": "src/types/checkout/TranslatedText.ts::EnteredInfo"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Billing address that user has entered (optional if billing is the same as shipping)"
+                }
+            },
+            "translatedShippingAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TranslatedAddressObject",
+                    "resolved": "{ line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; state?: TranslatedText | undefined; postal_code?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
+                    "references": {
+                        "TranslatedAddressObject": {
+                            "location": "import",
+                            "path": "src/types/checkout/TranslatedText",
+                            "id": "src/types/checkout/TranslatedText.ts::TranslatedAddressObject"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translated address fields that GPT has translated"
+                }
+            },
+            "translatedBillingAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TranslatedAddressObject",
+                    "resolved": "{ line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; state?: TranslatedText | undefined; postal_code?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
+                    "references": {
+                        "TranslatedAddressObject": {
+                            "location": "import",
+                            "path": "src/types/checkout/TranslatedText",
+                            "id": "src/types/checkout/TranslatedText.ts::TranslatedAddressObject"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translated address fields that GPT has translated"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showErrorBanner": {},
+            "translatedShippingAddressState": {},
+            "translatedBillingAddressState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeDialog",
+                "name": "closeDialog",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close dialog button click"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "continueClicked",
+                "name": "continueClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the continue button is clicked"
+                },
+                "complexType": {
+                    "original": "SubmitEventData",
+                    "resolved": "{ billingAddress: Record<\"line1\" | \"line2\" | \"city\" | \"state\" | \"postal_code\" | \"name\", string> | null; shippingAddress: Record<\"line1\" | \"line2\" | \"city\" | \"state\" | \"postal_code\" | \"name\", string>; }",
+                    "references": {
+                        "SubmitEventData": {
+                            "location": "local",
+                            "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.tsx",
+                            "id": "src/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.tsx::SubmitEventData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "translatedShippingAddress",
+                "methodName": "watchTranslatedShippingAddress"
+            }, {
+                "propName": "translatedBillingAddress",
+                "methodName": "watchTranslatedBillingAddress"
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.css

@@ -39,7 +39,7 @@
   font-size: var(--amino-font-size-base);
 }
 :host .zonos--cart-table .zonos--column {
-  padding: var(--amino-space-8);
+  padding: 8px;
   font-size: var(--amino-font-size-base);
 }
 :host .zonos--cart-table .zonos--column:last-child {

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.js

@@ -9,7 +9,7 @@ export class ZonosCartItems {
         var _a;
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
-        return (h(Host, { key: '945bd402bb5f8a73bc02dc8f30d187c43b78050e', class: "zonos--cart-items zonos--elements" }, h("table", { key: '600b545e20eb81d7e744c2bf66a9cec2eb68c8e7', class: "zonos--cart-table" }, h("tbody", { key: 'cd12a4372e97b8018af37433e6b2daba5403e621' }, cartStore.items.map(item => {
+        return (h(Host, { key: 'e2d53d541a342f816efe95f3a0b5551ea7f95e38', class: "zonos--cart-items zonos--elements" }, h("table", { key: 'f2dbf582004f7db5947e55b5b93f1437dc9d2a95', class: "zonos--cart-table" }, h("tbody", { key: 'a9948cbeb5ad9886d582e518d3bbe0ab9c5dda9d' }, cartStore.items.map(item => {
             const itemImg = item.imageUrl;
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.css

@@ -39,7 +39,7 @@
   font-size: var(--amino-font-size-base);
 }
 :host .zonos--cart-table .zonos--column {
-  padding: var(--amino-space-20) var(--amino-space-8);
+  padding: 20px 8px;
   vertical-align: top;
 }
 :host .zonos--cart-table .zonos--column:last-child {
@@ -51,7 +51,7 @@
 :host .zonos--title-with-icon {
   display: flex;
   align-items: center;
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 :host .zonos--cart-subtotal-title,
 :host .zonos--cart-subtotal-price {

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

@@ -40,15 +40,15 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: var(--amino-space-24);
+  margin-bottom: 24px;
   border-radius: var(--border-radius, 10px);
-  gap: var(--amino-space-24);
+  gap: 24px;
   max-width: 360px;
   width: auto;
   margin: auto;
-  margin-top: var(--amino-space-24);
+  margin-top: 24px;
   background-color: var(--amino-gray-50);
-  padding: var(--amino-space-20);
+  padding: 20px;
 }
 :host zonos-button {
   width: 100%;

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

@@ -153,9 +153,11 @@ export class ZonosCheckoutFinish {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: '8c2087b3a0578cbbd7979fff5e6b696a4325e548', class: "zonos--checkout-finish zonos--elements", style: {
-                '--border-radius': getBorderRadius(this.borderRadius),
-            } }, this.isLoading && (h("div", { key: 'dd86d26aee1eb604b8e9b2e7328706db43c80467', class: "loading-wrapper" }, h("zonos-spinner", { key: 'a2f07a512a1d45df0be48461b0e989681b6cb78d' }))), !this.isLoading && (h(Fragment, null, h("div", { key: 'f147c24eefb4aa36ed556c581c2f64a096dbe17b', 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", { key: '33a02654ede8a7ef7d884b0138c6e2c96406372f', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'c179ac24421803973ae8509a338cc34a4c80ac54' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '488594968d4e957856218b0f804ed9b9947102aa', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
+        return (h(Host, { key: 'fffe0cbefd173f892f3a0359ac45a8b97392172e', class: "zonos--checkout-finish zonos--elements", style: {
+                '--border-radius': getBorderRadius({
+                    overrideBorderStyle: this.borderRadius,
+                }),
+            } }, this.isLoading && (h("div", { key: 'b0a8c67102f0eb841d114e8cd1cd7e44fe895df4', class: "loading-wrapper" }, h("zonos-spinner", { key: 'e45f13d061cd94f777abfef5f12a8dc9a927c9e1' }))), !this.isLoading && (h(Fragment, null, h("div", { key: '81ca150772d4f6b38563bb46d5c76ebc51f9628c', 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", { key: 'c88feb2cc5956087fc91c5a00edb4e142efbfee0', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '621b100ed02aa5dc37f1da5be90c8f14568a21f3' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '9fff5bc809f97f8126a8117b2896f984e07fc1be', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-footer/zonos-checkout-footer.css

@@ -43,20 +43,20 @@
 }
 :host .zonos--checkout-footer {
   width: calc(90vw - 22px);
-  gap: var(--amino-space-16);
+  gap: 16px;
   display: flex;
   justify-content: space-between;
-  padding: var(--amino-space-12);
+  padding: 12px;
   align-items: center;
 }
 :host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper {
   display: flex;
   align-items: center;
-  gap: var(--amino-space-24);
+  gap: 24px;
 }
 :host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper .zonos--checkout-footer-logo {
   display: inline-flex;
-  gap: var(--amino-space-8);
+  gap: 8px;
   align-items: center;
 }
 :host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper .zonos--checkout-footer-logo a {
@@ -71,12 +71,12 @@
 :host .zonos--checkout-footer .zonos--checkout-locale-wrapper {
   display: flex;
   align-items: center;
-  gap: var(--amino-space-8);
+  gap: 8px;
   position: relative;
 }
 @media (max-width: 400px) {
   :host .zonos--checkout-footer .zonos--checkout-locale-wrapper {
-    gap: var(--amino-space-4);
+    gap: 4px;
   }
 }
 :host .zonos--checkout-footer .zonos--checkout-footer-dialog {
@@ -122,15 +122,15 @@
 
 :host(.mobile) {
   flex-direction: column;
-  gap: var(--amino-space-32);
+  gap: 32px;
   background: var(--amino-gray-0);
   position: relative;
-  padding-top: var(--amino-space-24);
+  padding-top: 24px;
   bottom: 0;
 }
 :host(.mobile) .zonos--checkout-footer {
   flex-direction: column;
-  gap: var(--amino-space-4);
+  gap: 4px;
 }
 :host(.mobile) .zonos--checkout-locale-wrapper {
   flex-direction: column;

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

@@ -33,10 +33,10 @@ export class ZonosCheckoutFooter {
         const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
         // reverse color when on desktop. With the coversheet backdrop, the color should be white
         const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1200';
-        return (h(Host, { key: 'fae1e5cb1250e834ecf3b09f11785ddea61be3b2', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'f3d48fcc675458dd38ca48e21f24a003b5ff9b56', class: "zonos--checkout-footer" }, h("div", { key: '97daec871630cf2bb33956b668abee2e715eceb5', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'cd6e12e8d1320e3e6542eef16f15ab27921748c3', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'bdc6d9311d2d039e87c261ead45474b7bf1fe992', class: classes([
+        return (h(Host, { key: 'c66117f4ec54d24eba7e22271294aeb08746a9e1', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'a7b49ac9b5d52c2289c46c6b24c6082e68db64b5', class: "zonos--checkout-footer" }, h("div", { key: 'b2c4beb76236c9fe2eb58d0a27ecddf266c7a103', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'b981389f14c0b5696208dbb7ad3fabf0687a168f', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'c0d5b4ab335af157789395632cf4278f55ace3fb', class: classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: '7318bb4137e160e9ed05a423fb80f1806c4f0104', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '55c76c6cf6777407532c00cf167d59e3cefc5eab', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'e2cf10499ed764fb2e7086761ece106580cd6440', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: '0fe6c810a6d7f84a781655cefc47ec6cbb5131c9', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '50401876a45161e80f593971e602e4c449e78dbe', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '0f69d9d9955165de13a49ff00a7044090b141800', textColor: colorDesktop }, "Powered by"), h("a", { key: '680e6fe4d0a783e2ebc55a51ffb55846ad997249', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '22aee1eb21306141e620bcc1b0dbf035bd710fba', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
+            ]) }, h("zonos-language-select", { key: 'd1442fb364997399f35d657e9f5823da34872c71', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'ff8ee730b995a5d8a7b9a3939b96444958390ca5', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'b2e896b9b37b1b0ba2bbb77034c7b0f6cf5c16a7', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'd1fe8d2bc28f3606b2f766659d52496ad4603c17', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '4875d6ad0e0efc60f299a2db427608bf23b062f6', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '13e2c1634ba3d8070f9ff14205fa3c3e9f8f5843', textColor: colorDesktop }, "Powered by"), h("a", { key: 'e00bec78174a8de0963c1a5caf721fd352dc9490', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '5910c724a05c686a7642385955a3faa042efe654', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
     }
     static get is() { return "zonos-checkout-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.css

@@ -37,10 +37,10 @@
   flex-direction: column;
 }
 :host .zonos--title {
-  margin-bottom: var(--amino-space-24);
+  margin-bottom: 24px;
 }
 :host .zonos--group {
-  margin-bottom: var(--amino-space-20);
+  margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
 }
@@ -60,10 +60,10 @@
   background: #d6d6d6;
 }
 :host .zonos--payment-error-banner {
-  margin-bottom: var(--amino-space-8);
+  margin-bottom: 8px;
 }
 :host .zonos--error-banner {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
@@ -73,7 +73,7 @@
   display: flex;
   justify-content: center;
   bottom: 0;
-  margin-top: var(--amino-space-12);
+  margin-top: 12px;
   background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {