@zonos/elements 1.0.16

package/dist/zonos-elements/zonos-cart-items_10.entry.js

@@ -0,0 +1,492 @@
+import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-d1aa9293.js';
+import { c as cartStore, s as stripeStore, l as stripeStoreRetrievePayment, j as stripeStoreReset, m as cartStoreUpdateSelectedShippingOption, n as cartStoreGetShippingTransitInfo } from './cart-36c33342.js';
+import { t as translate } from './localization-4a424f49.js';
+import { g as getBorderRadius } from './getBorderRadius-82fbaf25.js';
+import { s as submitGtag, i as isCheckoutMobile } from './submitGtag-fbdb454b.js';
+import { c as classes } from './classes-0d95c529.js';
+import { z as zonosStore } from './zonosStore-13a7b534.js';
+import './isDarkColor-b21326ae.js';
+
+const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
+  ? `${new Intl.NumberFormat('en-US', {
+    currency,
+    style: 'currency',
+  }).format(amount)} ${currency}`
+  : new Intl.NumberFormat('en-US', {
+    currency,
+    style: 'currency',
+  }).format(amount);
+
+const zonosCartItemsCss = ":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-8);font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host img{min-width:40px}";
+
+const ZonosCartItems = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.errorImages = [];
+  }
+  render() {
+    const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
+    return (h(Host, { class: "zonos--cart-items zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tbody", null, 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];
+        }, 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("zonos-text", { type: "label" }, item.name)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+        amount: item.amount * item.quantity,
+        currency: cartStore.currency,
+      })))));
+    })))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
+ZonosCartItems.style = zonosCartItemsCss;
+
+const InfoIcon = `<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.96704 8.00065C1.96704 4.31875 4.93024 1.33398 8.58554 1.33398C12.2408 1.33398 15.204 4.31875 15.204 8.00065C15.204 11.6826 12.2408 14.6673 8.58554 14.6673C4.93024 14.6673 1.96704 11.6825 1.96704 8.00065Z" fill="#C5C6CA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.58543 4.66016C8.95096 4.66016 9.24728 4.95863 9.24728 5.32682V5.33349C9.24728 5.70168 8.95096 6.00016 8.58543 6.00016C8.2199 6.00016 7.92358 5.70168 7.92358 5.33349V5.32682C7.92358 4.95863 8.2199 4.66016 8.58543 4.66016ZM8.58543 7.33349C8.95096 7.33349 9.24728 7.63197 9.24728 8.00016V10.6668C9.24728 11.035 8.95096 11.3335 8.58543 11.3335C8.2199 11.3335 7.92358 11.035 7.92358 10.6668V8.00016C7.92358 7.63197 8.2199 7.33349 8.58543 7.33349Z" fill="#4D505A"/>
+</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-subtotal-price{text-align:right}";
+
+const ZonosCartSubtotal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+    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,
+      })
+      : '-')), cartStore.step === 'payment' && (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" }, 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"]; }
+};
+ZonosCartSubtotal.style = zonosCartSubtotalCss;
+
+const RemoveIcon$1 = `<svg color="var(--amino-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://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(--amino-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>`;
+
+const SuccessIcon = `<svg color="var(--amino-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://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 ZonosCheckoutFinish = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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) {
+        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');
+        }
+      }
+      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;
+      return;
+    }
+    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$1, 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"]; }
+};
+ZonosCheckoutFinish.style = zonosCheckoutFinishCss;
+
+const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:Inter;display:block}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:0 5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{width:100%}";
+
+const ZonosCheckoutPayment = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.continueClicked = createEvent(this, "continueClicked", 7);
+    /**
+     * handler for continue button click
+     */
+    this.continueClickHandler = () => {
+      this.continueClicked.emit();
+    };
+    this.paymentError = false;
+    this.submitBtnType = undefined;
+    this.continueLoading = false;
+    this.submitBtnColor = undefined;
+    this.disabled = true;
+  }
+  watchFormComplete() {
+    if (!this.disabled) {
+      // submit google tag when the form is complete
+      submitGtag('zonos-checkout-payment-info');
+    }
+  }
+  render() {
+    var _a;
+    if (!stripeStore.stripeElements) {
+      return null;
+    }
+    this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+    return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+      // use primary type when on mobile mode
+      variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
+      amount: cartStore.total,
+      currency: cartStore.currency,
+    }))));
+  }
+  static get watchers() { return {
+    "disabled": ["watchFormComplete"]
+  }; }
+};
+ZonosCheckoutPayment.style = zonosCheckoutPaymentCss;
+
+const zonosCollapseCss = ":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
+
+const ZonosCollapse = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.collapsed = false;
+    this.collapseSize = 0;
+    this.height = this.el.scrollHeight;
+  }
+  getElementHeight() {
+    const fullHeight = `${this.height}px`;
+    const collapsedHeight = `${this.collapseSize}px`;
+    return this.collapsed ? collapsedHeight : fullHeight;
+  }
+  componentDidLoad() {
+    this.height = this.el.scrollHeight;
+  }
+  componentDidRender() {
+    var _a, _b, _c;
+    (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+      this.height = this.el.scrollHeight;
+    });
+  }
+  render() {
+    this.height = this.el.scrollHeight;
+    return (h(Host, { class: 'zonos--elements zonos--collapse', style: {
+        height: this.getElementHeight(),
+      } }, h("div", null, h("iframe", { class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+ZonosCollapse.style = zonosCollapseCss;
+
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:Inter;display:block}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:0 5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{width:100%}";
+
+const ZonosCustomerInfo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.continueClicked = createEvent(this, "continueClicked", 7);
+    /**
+     * handler for continue button click
+     */
+    this.continueClickHandler = () => {
+      this.continueClicked.emit();
+    };
+    this.continueLoading = false;
+    this.submitBtnType = undefined;
+    this.submitBtnColor = undefined;
+    this.defaultAddress = null;
+    this.disabled = true;
+  }
+  watchFormComplete() {
+    if (!this.disabled) {
+      // submit google tag when the form is complete
+      submitGtag('zonos-checkout-customer-info');
+    }
+  }
+  render() {
+    var _a, _b;
+    if (!stripeStore.stripeElements) {
+      return null;
+    }
+    // make sure data is valid
+    this.disabled =
+      !((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
+        !((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
+    return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" })), h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+      // use primary type when on mobile mode
+      variant: this.submitBtnType }, translate('Continue to shipping'))));
+  }
+  static get watchers() { return {
+    "disabled": ["watchFormComplete"]
+  }; }
+};
+ZonosCustomerInfo.style = zonosCustomerInfoCss;
+
+const RemoveIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-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" clip-rule="evenodd"/><path fill="#4D505A" fill-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" clip-rule="evenodd"/></svg>`;
+
+const zonosDialogCss = ":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--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0px;top:0px;background:var(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1002;background:white}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:1001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-border);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-24)}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-hover-color)}:host .zonos--body{padding:var(--amino-space-8) var(--amino-space-24);max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:var(--amino-space-16) var(--amino-space-24)}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:1001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:1002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
+
+const ZonosDialog = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeDialog = createEvent(this, "closeDialog", 7);
+    this.isMobileMode = () => {
+      return this.mobile || window.innerWidth <= 768;
+    };
+    this.closeButtonHandler = () => {
+      this.closeDialog.emit();
+    };
+    this.clickOutsideDialogHandler = (event) => {
+      if (event.target === event.currentTarget && !this.noClickOutside) {
+        this.closeDialog.emit();
+      }
+    };
+    this.open = false;
+    this.headerText = '';
+    this.width = '460px';
+    this.height = undefined;
+    this.noHeader = false;
+    this.noBodyPadding = false;
+    this.noBorder = false;
+    this.footerRightAction = null;
+    this.borderStyle = undefined;
+    this.noCloseButton = false;
+    this.noClickOutside = false;
+    this.mobile = false;
+    this.isLoading = true;
+    this.isMobile = false;
+  }
+  handleWindowResize() {
+    this.isMobile = this.isMobileMode();
+  }
+  componentDidLoad() {
+    this.isMobile = this.isMobileMode();
+  }
+  render() {
+    // disable scroll on the body when dialog is open
+    if (this.open) {
+      document.body.style.overflow = 'hidden';
+    }
+    else {
+      document.body.style.overflow = 'auto';
+    }
+    const borderStyle = getBorderRadius(this.borderStyle);
+    return (h(Host, { class: classes([
+        'zonos--elements',
+        this.open && 'open',
+        this.isLoading && 'is-loading',
+        this.noBorder && 'no-border',
+        this.isMobile && 'mobile',
+      ]), style: {
+        '--border-radius': borderStyle,
+        '--height': this.height || 'initial',
+        '--width': this.width,
+      } }, h("div", { class: "zonos--backdrop" }), h("div", { "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { class: classes([
+        'zonos--body',
+        this.noBodyPadding && 'zonos--no-body-padding',
+      ]) }, h("slot", null)), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
+ZonosDialog.style = zonosDialogCss;
+
+const zonosLogoCss = ":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-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
+
+const ZonosLogo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = 'LIGHT';
+    this.width = 'auto';
+    this.class = '';
+  }
+  render() {
+    const filterColor = this.theme === 'DARK'
+      ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
+      : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
+    return (h(Host, { class: classes(['zonos--elements zonos--logo', this.class]), style: {
+        '--filter-color': filterColor,
+        '--width': this.width,
+      } }, h("img", { alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
+ZonosLogo.style = zonosLogoCss;
+
+const ChevronDownIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://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>`;
+
+const ChevronUpIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const zonosReviewCss = ":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--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8)}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
+
+const ZonosReview = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mobile = false;
+    this.collapsed = false;
+    this.isMobile = false;
+  }
+  handleWindowResize() {
+    this.isMobile = isCheckoutMobile(this.mobile);
+  }
+  componentWillLoad() {
+    this.isMobile = isCheckoutMobile(this.mobile);
+  }
+  render() {
+    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
+    const totalTextType = this.isMobile
+      ? 'boldSubheader'
+      : 'secondaryPageHeader';
+    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
+    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+    const renderCollapseIcon = () => {
+      // only display the collapse icon if the component is being rendered with mobile styles
+      if (!this.isMobile) {
+        return null;
+      }
+      if (!this.collapsed) {
+        return (h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
+      }
+      return (h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
+    };
+    return (h(Host, { class: classes([
+        'zonos--review zonos--elements',
+        this.isMobile && 'mobile',
+      ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { color: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, 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"]; }
+};
+ZonosReview.style = zonosReviewCss;
+
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:Inter;display:block}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding-right:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
+
+const ZonosShipping = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.continueClicked = createEvent(this, "continueClicked", 7);
+    this.handleRadioSelected = async (e) => {
+      var _a;
+      this.selectedShippingMethod = e.detail;
+      if (!this.selectedShippingMethod) {
+        return;
+      }
+      const selectedShippingOption = ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.find(item => { var _a; return item.id === ((_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value); })) || null;
+      if (!selectedShippingOption) {
+        return;
+      }
+      // save selected shipping option to store
+      const updateStatus = await cartStoreUpdateSelectedShippingOption(selectedShippingOption);
+      if (!updateStatus) {
+        return;
+      }
+      this.disabled = false;
+    };
+    /**
+     * handler for continue button click
+     */
+    this.continueClickHandler = () => {
+      this.continueClicked.emit();
+    };
+    this.continueLoading = false;
+    this.submitBtnColor = undefined;
+    this.submitBtnType = undefined;
+    this.selectedShippingMethod = null;
+    this.disabled = true;
+  }
+  watchFormComplete() {
+    if (!this.disabled) {
+      // submit google tag when the form is complete
+      submitGtag('zonos-checkout-shipping-info');
+    }
+  }
+  render() {
+    var _a, _b;
+    const shipToCountry = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+    const serviceLevels = (_b = cartStore.shippingData) === null || _b === void 0 ? void 0 : _b.flatMap((item) => {
+      var _a, _b;
+      const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(item);
+      const sublabel = expectedDate
+        ? `${translate('Expected delivery')} ${expectedDate}`
+        : '';
+      const caption = minTransit && maxTransit
+        ? `(${minTransit}-${maxTransit} ${translate('business days')})`
+        : '';
+      const shippingAmount = ((_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
+      return {
+        caption,
+        label: item.displayName,
+        price: formatCurrency({
+          amount: shippingAmount,
+          currency: cartStore.currency,
+        }),
+        sublabel,
+        value: item.id,
+      };
+    });
+    return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), cartStore.isSelectedShippingAboveDeminimis && (h("zonos-banner", { intent: "warning" }, translate('Above de minimis threshold for'), " ", shipToCountry, ".", ' ', translate('Duties and taxes will be applied to items and shipping.')))), h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+      // use primary type when on mobile mode
+      variant: this.submitBtnType }, translate('Go to payment'))));
+  }
+  static get watchers() { return {
+    "disabled": ["watchFormComplete"]
+  }; }
+};
+ZonosShipping.style = zonosShippingCss;
+
+export { ZonosCartItems as zonos_cart_items, ZonosCartSubtotal as zonos_cart_subtotal, ZonosCheckoutFinish as zonos_checkout_finish, ZonosCheckoutPayment as zonos_checkout_payment, ZonosCollapse as zonos_collapse, ZonosCustomerInfo as zonos_customer_info, ZonosDialog as zonos_dialog, ZonosLogo as zonos_logo, ZonosReview as zonos_review, ZonosShipping as zonos_shipping };
+
+//# sourceMappingURL=zonos-cart-items_10.entry.js.map