@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/components/zonos-cart-subtotal2.js

@@ -12,75 +12,75 @@ const InfoIcon = `<svg viewBox="0 0 17 16" fill="none" xmlns="https://www.w3.org
 </svg>
 `;
 
-const zonosCartSubtotalCss = ":host{font-family:Inter;display:block}: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}: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(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-20) var(--amino-space-8);vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--amino-gray-200)}:host .zonos--cart-duty-tax-price{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;gap:5px}:host .zonos--cart-subtotal-price{text-align:right}";
+const zonosCartSubtotalCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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}: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(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-20) var(--amino-space-8);vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--amino-gray-200)}:host .zonos--cart-duty-tax-price{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;gap:5px}:host .zonos--cart-subtotal-price{text-align:right}";
 
 const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtotal extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
-    const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
-    const renderShippingInfo = () => {
-      if (!cartStore.selectedShippingOption) {
-        return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
-      }
-      return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
-    };
-    return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-      amount: cartStore.subtotal,
-      currency: cartStore.currency,
-    })))), h("tr", { class: "zonos--row zonos--cart-shipping" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.shipping
-      ? formatCurrency({
-        amount: cartStore.shipping,
-        currency: cartStore.currency,
-      })
-      : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-icon", { content: InfoIcon, size: 16 })), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { color: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
-      ? formatCurrency({
-        amount: cartStore.dutiesTaxFees,
-        currency: cartStore.currency,
-      })
-      : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-      amount: 
-      // show total without taxes when step is shipping, show total with taxes when step is payment
-      cartStore.step === 'shipping'
-        ? totalWithoutTaxes
-        : cartStore.total,
-      currency: cartStore.currency,
-    })))))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get style() { return zonosCartSubtotalCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+        const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
+        const renderShippingInfo = () => {
+            if (!cartStore.selectedShippingOption) {
+                return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
+            }
+            return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
+        };
+        return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+            amount: cartStore.subtotal,
+            currency: cartStore.currency,
+        })))), h("tr", { class: "zonos--row zonos--cart-shipping" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.shipping
+            ? formatCurrency({
+                amount: cartStore.shipping,
+                currency: cartStore.currency,
+            })
+            : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-icon", { content: InfoIcon, size: 16 })), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { color: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
+            ? formatCurrency({
+                amount: cartStore.dutiesTaxFees,
+                currency: cartStore.currency,
+            })
+            : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+            amount: 
+            // show total without taxes when step is shipping, show total with taxes when step is payment
+            cartStore.step === 'shipping'
+                ? totalWithoutTaxes
+                : cartStore.total,
+            currency: cartStore.currency,
+        })))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return zonosCartSubtotalCss; }
 }, [1, "zonos-cart-subtotal"]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-cart-subtotal", "zonos-badge", "zonos-icon", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-cart-subtotal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCartSubtotal);
-      }
-      break;
-    case "zonos-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-cart-subtotal", "zonos-badge", "zonos-icon", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-cart-subtotal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCartSubtotal);
+            }
+            break;
+        case "zonos-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosCartSubtotal as Z, defineCustomElement as d };

package/dist/components/zonos-checkout-finish.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCheckoutFinish extends Components.ZonosCheckoutFinish, HTMLElement {}
 export const ZonosCheckoutFinish: {
-  prototype: ZonosCheckoutFinish;
-  new (): ZonosCheckoutFinish;
+    prototype: ZonosCheckoutFinish;
+    new (): ZonosCheckoutFinish;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-checkout-finish2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { s as stripeStore, p as stripeStoreRetrievePayment, o as stripeStoreReset } from './cart.js';
-import { t as translate } from './localization.js';
+import { s as stripeStore, p as stripeStoreRetrievePayment, o as stripeStoreReset, c as cartStore } from './cart.js';
+import { h as handleFetch, l as logError, t as translate } from './localization.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { s as submitGtag } from './submitGtag.js';
 import { d as defineCustomElement$4 } from './zonos-button2.js';
@@ -12,113 +12,156 @@ const RemoveIcon = `<svg color="var(--amino-red-800)" fill="none" height="24" vi
 
 const SuccessIcon = `<svg color="var(--amino-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(--amino-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>`;
 
-const zonosCheckoutFinishCss = ":host{font-family:Inter;display:block}: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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-bottom:var(--amino-space-24);border-radius:var(--border-radius, 10px);gap:var(--amino-space-24);max-width:360px;width:auto;margin:auto;margin-top:var(--amino-space-24);background-color:var(--amino-gray-50);padding:var(--amino-space-20)}:host zonos-button{width:100%}:host .loading-wrapper{min-height:300px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
+const zonosCheckoutFinishCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-bottom:var(--amino-space-24);border-radius:var(--border-radius, 10px);gap:var(--amino-space-24);max-width:360px;width:auto;margin:auto;margin-top:var(--amino-space-24);background-color:var(--amino-gray-50);padding:var(--amino-space-20)}:host zonos-button{width:100%}:host .loading-wrapper{min-height:300px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
 
 const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutFinish extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.closeClick = createEvent(this, "closeClick", 7);
-    this.checkPaymentStatus = async () => {
-      this.isLoading = true;
-      const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
-      if (clientSecret || this.storybookForceStatus) {
-        const { error, messages } = await stripeStoreRetrievePayment({
-          clientSecret,
-          storybookForceStatus: this.storybookForceStatus,
-        });
-        this.notificationType = error ? 'error' : 'success';
-        this.notificationMessages = messages || [];
-        this.notificationTitle = error
-          ? translate('Payment failed')
-          : translate("You're all set!");
-        if (error) {
-          submitGtag('zonos-checkout-payment-fail');
-        }
-        else {
-          submitGtag('zonos-checkout-success');
-          const successEvent = new CustomEvent('zonos-checkout-success', {
-            detail: {
-              message: 'Zonos Checkout successfully processed order',
-            },
-          });
-          document.dispatchEvent(successEvent);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeClick = createEvent(this, "closeClick", 7);
+        this.pullOrder = async () => {
+            var _a, _b;
+            const baseUrl = "https://v1.route.js.zonos.com";
+            const checkoutSessionId = cartStore.checkoutSessionId;
+            const { errors, json } = await handleFetch(`${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`);
+            if (errors.length || !(json === null || json === void 0 ? void 0 : json.id)) {
+                return null;
+            }
+            // TODO: This method of triggering /success for BigCommerce is for MVP. Remove when eventRegistry is fixed to handle by webhooks
+            if (window.Zonos.isBigCommerce) {
+                const orderId = json === null || json === void 0 ? void 0 : json.id;
+                const storeHash = (_b = (_a = json === null || json === void 0 ? void 0 : json.metadata) === null || _a === void 0 ? void 0 : _a.find(x => (x === null || x === void 0 ? void 0 : x.key) === 'storeHash')) === null || _b === void 0 ? void 0 : _b.value;
+                if (!orderId || !storeHash) {
+                    return logError('Unable to trigger BigCommerce /success: Missing orderId or storeHash');
+                }
+                void handleFetch(`${baseUrl}/api/bigcommerce/success?orderId=${orderId}&storeHash=${storeHash}`);
+            }
+            return json;
+        };
+        this.getPullOrder = async (attempts = 0) => {
+            const order = await this.pullOrder();
+            if (order) {
+                this.order = order;
+            }
+            else if (!order && attempts < 5) {
+                // Wait for 1 second before the next attempt
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                await this.getPullOrder(attempts + 1);
+            }
+        };
+        this.checkPaymentStatus = async () => {
+            this.isLoading = true;
+            const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
+            if (clientSecret || this.storybookForceStatus) {
+                const { error, messages } = await stripeStoreRetrievePayment({
+                    clientSecret,
+                    storybookForceStatus: this.storybookForceStatus,
+                });
+                this.notificationType = error ? 'error' : 'success';
+                this.notificationMessages = messages || [];
+                this.notificationTitle = error
+                    ? translate('Payment failed')
+                    : translate("You're all set!");
+                if (error) {
+                    submitGtag('zonos-checkout-payment-fail');
+                }
+                else {
+                    submitGtag('zonos-checkout-success');
+                    const successEvent = new CustomEvent('zonos-checkout-success', {
+                        detail: {
+                            message: 'Zonos Checkout successfully processed order',
+                        },
+                    });
+                    document.dispatchEvent(successEvent);
+                }
+                // Attempt to pull the order details from the graph every second on 5 attempts
+                if (this.notificationType === 'success') {
+                    void this.getPullOrder();
+                }
+            }
+            stripeStoreReset();
+            this.isLoading = false;
+        };
+        this.closeClickHandler = () => {
+            this.closeClick.emit();
+        };
+        this.borderRadius = 'ROUNDED';
+        this.storybookForceStatus = undefined;
+        this.overrideNotification = undefined;
+        this.isLoading = true;
+        this.notificationType = 'success';
+        this.notificationTitle = '';
+        this.notificationMessages = [];
+        this.order = 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;
         }
-      }
-      stripeStoreReset();
-      this.isLoading = false;
-    };
-    this.closeClickHandler = () => {
-      this.closeClick.emit();
-    };
-    this.borderRadius = 'ROUNDED';
-    this.storybookForceStatus = undefined;
-    this.overrideNotification = undefined;
-    this.isLoading = true;
-    this.notificationType = 'success';
-    this.notificationTitle = '';
-    this.notificationMessages = [];
-  }
-  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;
+        void this.checkPaymentStatus();
     }
-    void this.checkPaymentStatus();
-  }
-  render() {
-    return (h(Host, { class: "zonos--checkout-finish zonos--elements", style: {
-        '--border-radius': getBorderRadius(this.borderRadius),
-      } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping'))))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get style() { return zonosCheckoutFinishCss; }
+    render() {
+        // TODO: Keeping this code for when we have a UI for order details
+        // const orderTotal = this.order?.amountSubtotals
+        //   ? Object.values(this.order.amountSubtotals).reduce((a, b) => a + b, 0)
+        //   : 0;
+        // const totalItems = this.order?.items?.reduce((acc, item) => {
+        //   return acc + item.quantity;
+        // }, 0);
+        return (h(Host, { class: "zonos--checkout-finish zonos--elements", style: {
+                '--border-radius': getBorderRadius(this.borderRadius),
+            } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return zonosCheckoutFinishCss; }
 }, [1, "zonos-checkout-finish", {
-    "borderRadius": [1, "border-radius"],
-    "storybookForceStatus": [1, "storybook-force-status"],
-    "overrideNotification": [16],
-    "isLoading": [32],
-    "notificationType": [32],
-    "notificationTitle": [32],
-    "notificationMessages": [32]
-  }]);
+        "borderRadius": [1, "border-radius"],
+        "storybookForceStatus": [1, "storybook-force-status"],
+        "overrideNotification": [16],
+        "isLoading": [32],
+        "notificationType": [32],
+        "notificationTitle": [32],
+        "notificationMessages": [32],
+        "order": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-checkout-finish", "zonos-button", "zonos-icon", "zonos-spinner", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-checkout-finish":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCheckoutFinish);
-      }
-      break;
-    case "zonos-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-checkout-finish", "zonos-button", "zonos-icon", "zonos-spinner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-checkout-finish":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCheckoutFinish);
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosCheckoutFinish as Z, defineCustomElement as d };

package/dist/components/zonos-checkout-payment.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCheckoutPayment extends Components.ZonosCheckoutPayment, HTMLElement {}
 export const ZonosCheckoutPayment: {
-  prototype: ZonosCheckoutPayment;
-  new (): ZonosCheckoutPayment;
+    prototype: ZonosCheckoutPayment;
+    new (): ZonosCheckoutPayment;
 };
 /**
  * Used to define this component and all nested components recursively.