@zonos/elements 1.3.217 → 1.3.219

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

@@ -49,7 +49,11 @@ export class ZonosShipping {
             // update the address async if we already got landed cost data
             await stripeStoreAsyncAddressUpdate();
             // save selected shipping option to store
-            await cartStoreUpdateSelectedShippingOption(selectedShippingOption, e.detail.landedCostId);
+            await cartStoreUpdateSelectedShippingOption({
+                applySubtotalsOnly: false,
+                landedCostId: e.detail.landedCostId,
+                selectedShippingOption,
+            });
             this.isSelecting = false;
         };
         this.handleValidate = () => {

package/dist/collection/components/checkout/zonos-collect/assets/ChevronDownIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

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

@@ -0,0 +1,60 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--cart-table {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+  overflow: auto;
+  font-size: var(--zonos-elements-font-size-base);
+}
+:host .zonos--cart-table .zonos--column {
+  padding: 8px;
+  padding-left: 0;
+  font-size: var(--zonos-elements-font-size-base);
+}
+:host .zonos--cart-table .zonos--column:first-child {
+  width: 48px;
+}
+:host .zonos--cart-table td {
+  vertical-align: middle;
+}
+:host .zonos--cart-item-price zonos-text {
+  white-space: nowrap;
+}
+:host img {
+  min-width: 40px;
+  margin-top: 6px;
+  box-shadow: 0 0 0 1px rgba(110, 110, 120, 0.1), 0 1px 2px 0 rgba(10, 10, 11, 0.06), 0 1px 3px 0 rgba(10, 10, 11, 0.1);
+  border-radius: 10px;
+}

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

@@ -0,0 +1,39 @@
+import { getAssetPath, h, Host } from "@stencil/core";
+import { cartStore } from "../../../store/checkout/cart";
+import { cleanHtmlMarkdown } from "../../../utils/cleanHtmlMarkdown";
+export class ZonosCollectCartItems {
+    constructor() {
+        this.errorImages = [];
+    }
+    render() {
+        const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
+        const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
+        return (h(Host, { key: '2f5507537492851b67a5204ab68ce2f938899f23', class: "zonos--collect-cart-items zonos--elements" }, h("table", { key: 'e648cda9d4c111ecde60291f420178e4e4230b50', class: "zonos--cart-table" }, h("tbody", { key: 'b266291e61d0df5c0ea3ae8240a3bfb6147edbb4' }, nonRestrictedItems.map(item => {
+            const itemImg = item.imageUrl;
+            const cleanedItemNames = cleanHtmlMarkdown(item.name);
+            return (h("tr", { class: "zonos--collect-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];
+                }, src: item.imageUrl, style: {
+                    'min-width': '40px',
+                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("div", null, cleanedItemNames.map(name => (h("zonos-text", { type: "semiBoldLabel" }, name)))))));
+        })))));
+    }
+    static get is() { return "zonos-collect-cart-items"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-collect-cart-items.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-collect-cart-items.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get states() {
+        return {
+            "errorImages": {}
+        };
+    }
+}

package/dist/collection/components/checkout/zonos-collect/zonos-collect-finish/assets/RemoveIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

package/dist/collection/components/checkout/zonos-collect/zonos-collect-finish/assets/SuccessIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" data-is-secondary-color="true" fill="var(--zonos-elements-blue-100)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M15.707 9.293a1 1 0 0 1 0 1.414l-3.646 3.647a1.5 1.5 0 0 1-2.122 0l-1.646-1.647a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z" fill="currentColor" fill-rule="evenodd"></path></svg>

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

@@ -0,0 +1,84 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+:host .zonos--group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 24px;
+  border-radius: var(--zonos--border-radius, 10px);
+  gap: 24px;
+  margin-top: 24px;
+  background-color: var(--zonos-elements-gray-50);
+  padding: 48px;
+}
+:host .zonos--finish-details {
+  max-width: 640px;
+  min-width: 300px;
+  line-height: 24px;
+  width: 0 auto;
+  margin: auto;
+}
+:host zonos-button {
+  width: 100%;
+}
+:host .loading-wrapper {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host .zonos--finish-button-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin: 0 auto;
+  margin-top: 48px;
+  max-width: 300px;
+}
+:host .zonos--subtitle {
+  text-align: center;
+}
+:host .zonos--order-number {
+  background-color: var(--zonos-elements-gray-0);
+  border: 1px solid var(--zonos-elements-gray-200);
+  color: var(--zonos-elements-gray-800);
+  border-radius: var(--zonos-elements-radius-6);
+  padding: 4px 8px;
+}

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

@@ -0,0 +1,403 @@
+import { Fragment, h, Host, } from "@stencil/core";
+import { cartStore } from "../../../store/checkout/cart";
+import { paypalStore, paypalStoreReset, } from "../../../store/checkout/paypal";
+import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreResetPromoCode, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
+import { storageStore } from "../../../store/storageStore";
+import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
+import { createCustomEvent } from "../../../utils/createCustomEvent";
+import { getBorderRadius } from "../../../utils/getBorderRadius";
+import { handleFetch } from "../../../utils/handleFetch";
+import { allLogs, log } from "../../../utils/logging/log";
+import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
+import { submitGtag } from "../../../utils/submitGtag";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveIcon from "./assets/RemoveIcon.svg";
+/* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import SuccessIcon from "./assets/SuccessIcon.svg";
+/**
+ * Maximum number of retries to pull order info (gap between each retry is 1 second)
+ */
+const MAX_RETRIES = 30;
+export class ZonosCollectFinish {
+    constructor() {
+        /**
+         * The border radius style of the dialog
+         */
+        this.borderRadius = 'ROUNDED';
+        /**
+         * The confirmation id for the collect order
+         */
+        this.confirmationId = null;
+        this.isLoading = true;
+        this.notificationType = 'success';
+        this.notificationTitle = '';
+        this.notificationMessages = [];
+        this.notificationActionText = translate('Keep shopping');
+        this.order = null;
+        /**
+         * Is waiting to redirect to a different page
+         */
+        this.isWaitingToRedirect = true;
+        this.pullOrder = async () => {
+            var _a, _b;
+            const checkoutSessionId = storageStore.checkoutSessionId;
+            const searchParams = new URLSearchParams();
+            searchParams.set('checkoutSessionId', checkoutSessionId || '');
+            const { baseUrl, errors, json } = await handleFetch(`/api/zonos-elements/get-order?${searchParams.toString()}`);
+            if (errors.length || !(json === null || json === void 0 ? void 0 : json.id)) {
+                return {
+                    baseUrl,
+                    order: null,
+                };
+            }
+            // onOrderSuccess callback may be provided on Zonos.init
+            await ((_b = (_a = zonosStore.checkoutSettings).onOrderSuccess) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                zonosApiRoute: baseUrl,
+                zonosOrder: json,
+            }));
+            return {
+                baseUrl,
+                order: json,
+            };
+        };
+        this.handleSuccessBehavior = async () => {
+            // Do nothing, display Zonos success page
+            this.isLoading = false;
+            await this.getPullOrder();
+        };
+        // TODO: This method of pulling orders is temporary. Once we have a working event registry system, we will rely on that to tell us when the order is ready to trigger onOrderSuccess
+        this.getPullOrder = async (attempts = 0) => {
+            var _a, _b;
+            if (attempts === 0) {
+                log('=== Start to poll for order info', 'info');
+            }
+            const { baseUrl, order } = await this.pullOrder();
+            const foundLegacyOrderNumber = !!((_b = (_a = order === null || order === void 0 ? void 0 : order.references) === null || _a === void 0 ? void 0 : _a.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'zonosOrderNumber')) === null || _b === void 0 ? void 0 : _b.value);
+            const checkoutSessionId = storageStore.checkoutSessionId;
+            const maxRetries = parseFloat(new URLSearchParams(window.location.search).get('maxPollingRetries') ||
+                '0') || MAX_RETRIES;
+            log(`=== Polling order (${attempts} attemps)`, 'info');
+            if (
+            // Order found, in legacy checkout facade and still haven't found the legacy order number
+            order &&
+                attempts >= maxRetries) {
+                log('=== CollectOrder info found', 'info');
+                if (order && !foundLegacyOrderNumber) {
+                    // We pushed this one through without the legacy order number, so we should log this
+                    void sendErrorLog({
+                        endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}&orderId=${order.id}`,
+                        errors: [
+                            `Collect order found but legacy order number doesn't exist after ${maxRetries} attempts`,
+                        ],
+                        metadata: {
+                            allLogs,
+                            checkoutSessionId: storageStore.checkoutSessionId || '',
+                            orderId: order.id,
+                            storeId: zonosStore.storeId,
+                        },
+                    });
+                    return;
+                }
+                else if (attempts > 10) {
+                    // Log out all the logs if we have tried more than 10 times
+                    void sendErrorLog({
+                        endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}&orderId=${order.id}`,
+                        errors: [`Collect order found after ${attempts} attempts`],
+                        metadata: {
+                            allLogs,
+                            checkoutSessionId: storageStore.checkoutSessionId || '',
+                            orderId: order.id,
+                            storeId: zonosStore.storeId,
+                        },
+                    });
+                }
+                this.order = order;
+            }
+            else if ((!order || !foundLegacyOrderNumber) && attempts < maxRetries) {
+                // Wait for 1 second before the next attempt
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                await this.getPullOrder(attempts + 1);
+            }
+            else {
+                void sendErrorLog({
+                    endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`,
+                    errors: [`Collect order not found after ${maxRetries} attempts`],
+                    metadata: {
+                        allLogs,
+                        checkoutSessionId: storageStore.checkoutSessionId || '',
+                        storeId: zonosStore.storeId,
+                    },
+                });
+            }
+        };
+        this.checkStripePaymentStatus = async () => {
+            const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
+            if (clientSecret || this.storybookForceStatus) {
+                const { error, messages, status } = await stripeStoreRetrievePayment({
+                    clientSecret,
+                    storybookForceStatus: this.storybookForceStatus,
+                });
+                const isError = status === 'requires_action' || error;
+                this.notificationType = isError ? 'error' : 'success';
+                this.notificationMessages = messages || [];
+                this.notificationTitle = isError
+                    ? translate('Payment failed')
+                    : translate("You're all set!");
+                log('=== Payment intent retrieve status', 'info', {
+                    clientSecret,
+                    error,
+                    messages,
+                    status,
+                });
+                // remove the client secret from the url
+                const url = new URL(window.location.href);
+                url.searchParams.delete('payment_intent_client_secret');
+                url.searchParams.delete('payment_intent');
+                url.searchParams.delete('redirect_status');
+                // Clean up the url if it's a redirect behavior
+                url.searchParams.delete('zonosCheckoutSessionId');
+                window.history.replaceState({}, '', url.toString());
+                // Payment doesn't go through
+                if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
+                    submitGtag('zonos-checkout-payment-fail');
+                    void sendErrorLog({
+                        endpoint: 'Stripe payment failed',
+                        errors: [
+                            `Payment intent "${clientSecret.split('_secret_')[0] || clientSecret}" status: ${status} - checkout session: ${storageStore.checkoutSessionId}`,
+                        ],
+                        metadata: {
+                            allLogs,
+                            credentialToken: window.Zonos.zonosApiKey,
+                        },
+                    });
+                }
+                else {
+                    submitGtag('zonos-checkout-success');
+                    const checkoutSessionId = storageStore.checkoutSessionId;
+                    void trackConversionEvent({
+                        checkoutSessionId,
+                        eventName: 'checkout_orderCompleted',
+                    });
+                    const successEvent = createCustomEvent('zonos-checkout-success', {
+                        message: 'Zonos Checkout successfully processed order',
+                    });
+                    document.dispatchEvent(successEvent);
+                    // wait this to finish before resetting store and checkout session id
+                    await this.handleSuccessBehavior();
+                }
+            }
+            // Make sure to stop the loading spinner even when there's an error
+            this.isLoading = false;
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            storageStore.checkoutSessionId = null;
+        };
+        this.checkStagingOrderStatus = async () => {
+            this.notificationType = 'success';
+            this.notificationTitle = translate("You're all set!");
+            this.notificationMessages =
+                stripeStoreMessageBasedOnStatus('succeeded').messages;
+            await this.handleSuccessBehavior();
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            paypalStoreReset();
+            storageStore.checkoutSessionId = null;
+        };
+        this.checkPaypalPaymentStatus = async () => {
+            // render error message if there's an error
+            if (paypalStore.paypalErrorMessage) {
+                this.notificationType = 'error';
+                this.notificationTitle = translate('Payment failed');
+                this.notificationMessages = [paypalStore.paypalErrorMessage];
+                this.isLoading = false;
+                return;
+            }
+            // show success message right away when order id is already created
+            this.isLoading = false;
+            if (paypalStore.orderIdCreated) {
+                submitGtag('zonos-checkout-success');
+                const checkoutSessionId = storageStore.checkoutSessionId;
+                void trackConversionEvent({
+                    checkoutSessionId,
+                    eventName: 'checkout_orderCompleted',
+                });
+                this.notificationType = 'success';
+                this.notificationTitle = translate("You're all set!");
+                this.notificationMessages =
+                    stripeStoreMessageBasedOnStatus('succeeded').messages;
+                // wait this to finish before resetting store and checkout session id
+                await this.handleSuccessBehavior();
+            }
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            paypalStoreReset();
+            storageStore.checkoutSessionId = null;
+        };
+    }
+    componentDidLoad() {
+        if (this.overrideNotification) {
+            // just show the notification and don't check any of the payment status
+            this.notificationType = this.overrideNotification.type;
+            this.notificationTitle = this.overrideNotification.title;
+            this.notificationMessages = this.overrideNotification.messages;
+            this.isLoading = false;
+            return;
+        }
+        if (cartStore.isStagingMode) {
+            void this.checkStagingOrderStatus();
+        }
+        else if (paypalStore.orderIdCreated) {
+            void this.checkPaypalPaymentStatus();
+        }
+        else {
+            void this.checkStripePaymentStatus();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'c8310458ed1264e1f799c5e89dbb5e98229b2a08', class: "zonos--checkout-finish zonos--elements", style: {
+                '--zonos--border-radius': getBorderRadius({
+                    overrideBorderStyle: this.borderRadius,
+                }),
+            } }, !this.isLoading && (h("div", { key: 'df8c6b30dc371111c192a24263afa79814d429fb', class: "zonos--finish-details" }, h("div", { key: 'c799b8f13474a996d5603636cc8730657508d2ac', 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: '9365caeb15712f54ae9777b9e6acf67e572f7e43', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '3cca628ac3b7ae3e819296299d0c3f0c8531ddbb', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '52136526f5b90feaa68a526c099fdd95e24ea23e', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))))))));
+    }
+    static get is() { return "zonos-collect-finish"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-collect-finish.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-collect-finish.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiStyle",
+                    "resolved": "\"ROUNDED\" | \"SHARP\"",
+                    "references": {
+                        "ElementsUiStyle": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::ElementsUiStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The border radius style of the dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border-radius",
+                "reflect": false,
+                "defaultValue": "'ROUNDED'"
+            },
+            "storybookForceStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaymentIntent['status']",
+                    "resolved": "\"canceled\" | \"processing\" | \"requires_action\" | \"requires_capture\" | \"requires_confirmation\" | \"requires_payment_method\" | \"succeeded\" | undefined",
+                    "references": {
+                        "PaymentIntent": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": "node_modules::PaymentIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Force status to test the UI for storybook"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "storybook-force-status",
+                "reflect": false
+            },
+            "overrideNotification": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    messages: string[];\n    title: string;\n    type: 'success' | 'error';\n  }",
+                    "resolved": "undefined | { messages: string[]; title: string; type: \"error\" | \"success\"; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the notification message and title, bypass checking stripe payment status"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "confirmationId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The confirmation id for the collect order"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "confirmation-id",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "notificationType": {},
+            "notificationTitle": {},
+            "notificationMessages": {},
+            "notificationActionText": {},
+            "order": {},
+            "isWaitingToRedirect": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeClick",
+                "name": "closeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the continue button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-collect/zonos-collect-footer/assets/chevronDownIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

package/dist/collection/components/checkout/zonos-collect/zonos-collect-footer/assets/globe.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12ZM11.4709 5.80634C11.7686 5.53723 11.9541 5.5 12 5.5C12.0459 5.5 12.2314 5.53723 12.5291 5.80634C12.8115 6.06164 13.1289 6.46913 13.4271 7.03651C13.9505 8.03191 14.3838 9.46098 14.48 11.25H9.51996C9.61624 9.46098 10.0495 8.03191 10.5729 7.03651C10.8711 6.46913 11.1885 6.06164 11.4709 5.80634ZM8.01802 11.25C8.11591 9.23031 8.60319 7.55958 9.24516 6.33849C9.29983 6.23451 9.35585 6.13335 9.41312 6.03514C7.32916 6.94017 5.81218 8.90533 5.5428 11.25H8.01802ZM5.5428 12.75H8.01802C8.11591 14.7697 8.60319 16.4404 9.24516 17.6615C9.29983 17.7655 9.35585 17.8666 9.41312 17.9649C7.32916 17.0598 5.81218 15.0947 5.5428 12.75ZM9.51996 12.75H14.48C14.3838 14.539 13.9505 15.9681 13.4271 16.9635C13.1289 17.5309 12.8115 17.9384 12.5291 18.1937C12.2314 18.4628 12.0459 18.5 12 18.5C11.9541 18.5 11.7686 18.4628 11.4709 18.1937C11.1885 17.9384 10.8711 17.5309 10.5729 16.9635C10.0495 15.9681 9.61624 14.539 9.51996 12.75ZM15.982 12.75C15.8841 14.7697 15.3968 16.4404 14.7548 17.6615C14.7002 17.7655 14.6441 17.8666 14.5869 17.9649C16.6708 17.0598 18.1878 15.0947 18.4572 12.75H15.982ZM18.4572 11.25C18.1878 8.90533 16.6708 6.94017 14.5869 6.03514C14.6441 6.13335 14.7002 6.23451 14.7548 6.33849C15.3968 7.55958 15.8841 9.23031 15.982 11.25H18.4572Z" fill="currentColor"/>
+</svg>

package/dist/collection/components/checkout/zonos-collect/zonos-collect-footer/assets/zonosIconDark.svg

@@ -0,0 +1,10 @@
+<svg width="408" height="112" viewBox="0 0 408 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M185.6 25.2H141.6C140.716 25.2 140 25.9164 140 26.8V36.4C140 37.2837 140.716 38 141.6 38H167.413C168.07 38 168.447 38.7478 168.056 39.2758L140.627 76.3519C140.22 76.9028 140 77.5699 140 78.2551V85.2001C140 86.0837 140.716 86.8 141.6 86.8H185.6C186.484 86.8 187.2 86.0837 187.2 85.2001V75.6C187.2 74.7164 186.484 74 185.6 74H159.787C159.13 74 158.753 73.2523 159.144 72.7243L186.573 35.6482C186.98 35.0973 187.2 34.4302 187.2 33.745V26.8C187.2 25.9164 186.484 25.2 185.6 25.2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M212.8 24.8C203.08 24.8 195.2 32.6798 195.2 42.4V69.6C195.2 79.3203 203.08 87.2001 212.8 87.2001H224.8C234.52 87.2001 242.4 79.3203 242.4 69.6V42.4001C242.4 32.6798 234.52 24.8 224.8 24.8H212.8ZM212.8 37.6C210.149 37.6 208 39.7491 208 42.4001V69.6C208 72.251 210.149 74.4001 212.8 74.4001H224.8C227.451 74.4001 229.6 72.251 229.6 69.6V42.4C229.6 39.7491 227.451 37.6 224.8 37.6H212.8Z" fill="white"/>
+<path d="M250.4 27.5223V85.3983C250.4 86.282 251.116 86.9983 252 86.9983H261.6C262.484 86.9983 263.2 86.282 263.2 85.3983V48.1873C263.2 46.3171 264.286 44.6172 265.983 43.8314L277.983 38.2759C281.164 36.8032 284.8 39.1263 284.8 42.6317V85.3983C284.8 86.282 285.516 86.9983 286.4 86.9983H296C296.884 86.9983 297.6 86.282 297.6 85.3983V42.6209C297.6 29.7687 284.272 21.2506 272.608 26.6484L264.318 30.4847C263.659 30.7898 262.877 30.6125 262.414 30.053L259.954 27.0817C259.346 26.3474 258.443 25.9223 257.489 25.9223H252C251.116 25.9223 250.4 26.6387 250.4 27.5223Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M323.2 24.8C313.48 24.8 305.6 32.6798 305.6 42.4V69.6C305.6 79.3203 313.48 87.2001 323.2 87.2001H335.2C344.92 87.2001 352.8 79.3203 352.8 69.6V42.4001C352.8 32.6798 344.92 24.8 335.2 24.8H323.2ZM323.2 37.6C320.549 37.6 318.4 39.7491 318.4 42.4001V69.6C318.4 72.251 320.549 74.4001 323.2 74.4001H335.2C337.851 74.4001 340 72.251 340 69.6V42.4C340 39.7491 337.851 37.6 335.2 37.6H323.2Z" fill="white"/>
+<path d="M378.101 25.2H391.708C400.706 25.2 408 32.4944 408 41.4925C408 42.2395 407.444 42.8696 406.703 42.9622L396.602 44.2249C395.857 44.3179 395.2 43.7376 395.2 42.9876C395.2 40.2331 392.967 38 390.212 38H378.921C375.982 38 373.6 40.3822 373.6 43.3207C373.6 45.8196 375.339 47.9818 377.78 48.5176L394.22 52.1264C402.267 53.8928 408 61.021 408 69.2593C408 78.9468 400.147 86.8 390.459 86.8H377.092C368.094 86.8 360.8 79.5057 360.8 70.5076C360.8 69.7606 361.356 69.1305 362.097 69.0379L372.198 67.7752C372.943 67.6822 373.6 68.2625 373.6 69.0125C373.6 71.767 375.833 74 378.588 74H390.014C392.878 74 395.2 71.6783 395.2 68.8143C395.2 66.4508 393.602 64.3863 391.314 63.794L373.765 59.2508C366.132 57.2745 360.8 50.3868 360.8 42.5015C360.8 32.9462 368.546 25.2 378.101 25.2Z" fill="white"/>
+<path d="M8.8 58C8.8 31.9322 29.9322 10.8 56 10.8C82.0678 10.8 103.2 31.9322 103.2 58C103.2 74.868 94.3524 89.6734 81.0342 98.022C80.6447 98.2662 80.1318 98.123 79.9175 97.7162L78.7941 95.5842C78.5971 95.2104 78.7255 94.7484 79.0825 94.5224C91.1684 86.8682 99.2 73.374 99.2 58C99.2 45.1582 93.5931 33.6223 84.7029 25.7135L83.8042 24.914C83.1429 24.3257 82.1296 24.3861 81.5428 25.0488L76.655 30.5694C76.3787 30.8815 75.9095 30.9282 75.5707 30.6852C70.0598 26.7304 63.2996 24.4 56 24.4C37.4432 24.4 22.4 39.4432 22.4 58C22.4 70.9369 29.7121 82.1614 40.4157 87.7744L41.4783 88.3315C42.2607 88.7419 43.2277 88.4403 43.6381 87.6579L47.1029 81.0544C47.2912 80.6954 47.7178 80.5354 48.1006 80.6688C50.5764 81.5315 53.2355 82 56 82C69.2548 82 80 71.2548 80 58C80 44.7452 69.2548 34 56 34H54.8C53.9163 34 53.2 34.7163 53.2 35.6V43.2143C53.2 43.5965 52.9289 43.923 52.5577 44.014C46.267 45.5571 41.6 51.2335 41.6 58C41.6 62.3276 43.5125 66.2118 46.529 68.8473C49.059 71.0578 52.3762 72.4 56 72.4C63.9529 72.4 70.4 65.9529 70.4 58C70.4 51.2335 65.733 45.5571 59.4423 44.014C59.0711 43.923 58.8 43.5965 58.8 43.2143V40.7431C58.8 40.2532 59.2372 39.8772 59.7171 39.9756C68.0973 41.6948 74.4 49.1114 74.4 58C74.4 68.162 66.162 76.4 56 76.4C52.9185 76.4 50.0216 75.6447 47.4764 74.3116L46.4142 73.7552C45.6318 73.3454 44.6653 73.6471 44.255 74.4292L41.0133 80.6075C40.7934 81.0267 40.2589 81.165 39.8722 80.8921C32.6864 75.8202 28 67.4556 28 58C28 42.536 40.536 30 56 30C63.1489 30 69.6662 32.6755 74.6156 37.0841L75.5144 37.8846C76.1757 38.4736 77.1895 38.4135 77.7765 37.7505L82.4362 32.4876C82.745 32.1388 83.2861 32.1262 83.6026 32.4681C89.8104 39.1755 93.6 48.1438 93.6 58C93.6 72.4821 85.4133 85.0566 73.4023 91.3398C68.2018 94.0603 62.2848 95.6 56 95.6C39.9975 95.6 26.3233 85.602 20.8962 71.502L20.467 70.3868C20.1505 69.5646 19.229 69.1529 18.4054 69.4659L11.7892 71.9802C11.3597 72.1434 10.8807 71.9123 10.7497 71.4719C9.48157 67.2056 8.8 62.6844 8.8 58Z" fill="white"/>
+<path d="M47.2 58C47.2 53.1399 51.1399 49.2 56 49.2C60.8601 49.2 64.8 53.1399 64.8 58C64.8 62.8601 60.8601 66.8 56 66.8C53.7822 66.8 51.7621 65.9832 50.2135 64.6302C48.3624 63.0129 47.2 60.6439 47.2 58Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5314 80.7132C15.335 80.3641 14.9136 80.2069 14.5392 80.3492L7.33942 83.0853C6.51543 83.3984 5.59337 82.9861 5.27738 82.1632L3.70554 78.0698C1.30997 71.8314 0 65.0616 0 58C0 27.0721 25.0721 2 56 2C86.9279 2 112 27.0721 112 58C112 79.5691 99.8043 98.2795 81.9611 107.63L78.0725 109.668C77.291 110.078 76.3256 109.777 75.9143 108.997L72.3255 102.186C72.1387 101.831 71.7185 101.67 71.3402 101.803C66.5332 103.486 61.3687 104.4 56 104.4C38.6169 104.4 23.4779 94.8422 15.5314 80.7132ZM73.8305 98.177C73.6343 97.8047 73.1837 97.6488 72.7961 97.8125C67.6303 99.9943 61.9532 101.2 56 101.2C38.8594 101.2 24.0562 91.2184 17.0752 76.7588C16.8924 76.3802 16.4515 76.1992 16.0585 76.3485L9.18358 78.9612C8.35959 79.2743 7.43754 78.862 7.12154 78.0391L6.69286 76.9227C4.43567 71.0446 3.2 64.6633 3.2 58C3.2 28.8394 26.8394 5.2 56 5.2C85.1606 5.2 108.8 28.8394 108.8 58C108.8 78.3323 97.3067 95.9756 80.4757 104.796L79.4152 105.352C78.6338 105.761 77.6683 105.461 77.257 104.68L73.8305 98.177Z" fill="white"/>
+</svg>