@zonos/elements 1.3.81 → 1.3.83

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

@@ -1,19 +1,59 @@
 import { Fragment, h, Host } from "@stencil/core";
 import { cartStore, cartStoreHasOneEligibleItem, } from "../../../store/checkout/cart";
+import { stripeStoreApplyPromoCode, stripeStoreRemovePromoCode, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 export class ZonosCartSubtotal {
+    constructor() {
+        this.submitBtnType = undefined;
+        this.submitBtnColor = undefined;
+        this.loading = false;
+    }
     render() {
+        var _a, _b, _c, _d, _e;
         const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
         // Show 0 for subtotal and total when all items are restricted
         const total = cartStoreHasOneEligibleItem() ? cartStore.total : 0;
         const subtotal = cartStoreHasOneEligibleItem() ? cartStore.subtotal : 0;
+        const appliedPromoCode = (_e = (_d = (_c = (_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(Boolean)) === null || _b === void 0 ? void 0 : _b.landedCost.appliedAdjustments) === null || _c === void 0 ? void 0 : _c.find(x => { var _a; return ((_a = x.adjustment) === null || _a === void 0 ? void 0 : _a.source) === 'PROMO_CODE'; })) === null || _d === void 0 ? void 0 : _d.adjustment) === null || _e === void 0 ? void 0 : _e.name;
+        const applyPromoCode = async () => {
+            // Promo code apply button is clicked
+            cartStore.promoCodeApplied = true;
+            // Reset promo code highlight error state
+            cartStore.promoCodeError = false;
+            this.loading = true;
+            await stripeStoreApplyPromoCode();
+            this.loading = false;
+        };
+        const removePromoCode = async () => {
+            // Reset promo code highlight error state
+            cartStore.promoCodeError = false;
+            this.loading = true;
+            await stripeStoreRemovePromoCode();
+            this.loading = false;
+        };
         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))));
         };
+        const renderLandedCost = () => {
+            if (cartStore.landedCostMethod === 'DAP') {
+                return (h(Fragment, null, h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), cartStore.dutiesTaxesFeesEstimate
+                    ? `${translate('Estimated')} ${currencyFormat({
+                        amount: cartStore.dutiesTaxesFeesEstimate,
+                        currency: cartStore.currency,
+                    })}`
+                    : '-'), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, translate('Due at delivery')))));
+            }
+            return (h(Fragment, null, h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('Nothing due at the door'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxesFees
+                ? currencyFormat({
+                    amount: cartStore.dutiesTaxesFees,
+                    currency: cartStore.currency,
+                })
+                : '-'))));
+        };
         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" }, currencyFormat({
             amount: subtotal,
             currency: cartStore.currency,
@@ -22,12 +62,7 @@ export class ZonosCartSubtotal {
                 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("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
-            ? currencyFormat({
-                amount: cartStore.dutiesTaxFees,
-                currency: cartStore.currency,
-            })
-            : '-')))), !!cartStore.adjustmentTotal && (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('Discounts')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
+            : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), renderLandedCost())), cartStore.step !== 'customer-info' && (h("tr", { class: "zonos--row zonos--cart-promo-code" }, h("td", { class: "zonos--column" }), !!appliedPromoCode ? (h(Fragment, null, h("td", { class: "zonos--column zonos--cart-promo-code-col" }, this.loading ? (h("zonos-spinner", { size: 16 })) : (h("zonos-badge", { dismissHandler: () => removePromoCode() }, cartStore.promoCode))), h("td", { class: "zonos--column zonos--cart-promo-code-col" }))) : (h("td", { class: "zonos--column zonos--cart-promo-code-col", colSpan: 2 }, h("div", { class: "zonos--cart-promo-code-input-wrapper" }, h("zonos-input", { class: "zonos--cart-promo-code-input", inputLabel: translate('Add promotional code'), inputValue: cartStore.promoCode, isError: cartStore.promoCodeError, onInputChange: e => (cartStore.promoCode = e.detail.trim()) }), h("zonos-button", { loading: this.loading, onClick: () => applyPromoCode(), variant: "primary" }, translate('Apply'))))))), !!cartStore.adjustmentTotal && (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('Discounts')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
             amount: cartStore.adjustmentTotal,
             currency: cartStore.currency,
         }))))), 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" }, currencyFormat({
@@ -48,4 +83,52 @@ export class ZonosCartSubtotal {
         };
     }
     static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "submitBtnType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLZonosButtonElement['variant']",
+                    "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "HTMLZonosButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLZonosButtonElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button type of the submit button"
+                },
+                "attribute": "submit-btn-type",
+                "reflect": false
+            },
+            "submitBtnColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button color of the submit button"
+                },
+                "attribute": "submit-btn-color",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loading": {}
+        };
+    }
 }

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

@@ -1,7 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
 import { paypalStore, paypalStoreReset, } from "../../../store/checkout/paypal";
-import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
+import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreResetPromoCode, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
@@ -195,6 +195,8 @@ export class ZonosCheckoutFinish {
                 // wait this to finish before resetting store and checkout session id
                 await this.getPullOrder();
             }
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
             this.isLoading = false;
             stripeStoreReset();
             paypalStoreReset();
@@ -233,11 +235,11 @@ export class ZonosCheckoutFinish {
         var _a, _b;
         const orderId = ((_a = this.order) === null || _a === void 0 ? void 0 : _a.accountOrderNumber) || getGraphQlShortId((_b = this.order) === null || _b === void 0 ? void 0 : _b.id);
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: 'fabd14b9a81a86771e54be97d957783b7348f1d1', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '9939772d4ce4213978ae6b02b4cd5345d15dbdfd', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '540c20d55e11a942e69326c970d402bc3c6c080b', class: "loading-wrapper" }, h("zonos-spinner", { key: 'db6f50490b64099c5224f741f726c352739557d4' }))), !this.isLoading && (h("div", { key: '33720a72e039b16f6b8983472868a57e96fdca11', class: "zonos--finish-details" }, h("div", { key: 'de92dd2f629e63001438a46da6c331b46349d9e7', 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: '98c1b679814b67bf75a4594c749e7596a2c03d17', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("div", { key: '82bf5d17c9d93919b7a2c8b02564f99471cbdc37', class: "zonos--order-number" }, "Order #", orderId)), h("zonos-text", { key: '93006790ec06f8b9e3ab6e86c41627d9e10de0a0', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '09ac3086c6c0252589d1ca92cb09f8af7fb3e1aa', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: '5ed5f468a66d30556bb4e5191dfda7c1294ac541', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'c9616613528a299618e99b09d70c236f59f90e14', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'c9cf9f5a5d59f5df8c076488c538efd6d3e63674', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            } }, this.isLoading && (h("div", { key: '491d4d0ba3dc487d448606009a30a5ce8d3bb86e', class: "loading-wrapper" }, h("zonos-spinner", { key: '3179aeb472d3e70628d3f1e3e2b76ed3d622145d' }))), !this.isLoading && (h("div", { key: '6044c9d1ac7599d9168f944dcf82028669fd1f37', class: "zonos--finish-details" }, h("div", { key: 'd22ec981a73db08e4871c8babe29f9a09a5bc29d', 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: 'bfef33fd319456253e07c3ef3f81da1b85414df9', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("div", { key: 'f056c93644d1f9defa263f59111874f154293b51', class: "zonos--order-number" }, "Order #", orderId)), h("zonos-text", { key: '69d38c4640943a5cfdcef5ea6951ddec9c7b8a84', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: 'fbb2d1cc0baab99a3312f2077c28cb9d51b4eb44', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: '7b63fd838f850ce6a5acf4970fa66657ca05e235', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '85035826e36d52ccf8c77aa6ba6e27173fccdaa6', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'd3848fdbdf1380dce49fcbc2b2903d99ce65247d', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }

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

@@ -136,7 +136,9 @@
 :host .zonos--logo {
   display: flex;
   align-items: center;
-  max-width: 250px;
+}
+:host .zonos--logo img {
+  max-height: 72px;
 }
 :host .zonos--checkout-default-message {
   margin-left: 76px;

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

@@ -602,7 +602,7 @@ export class ZonosCheckout {
                 } }), h("zonos-collapse", {
                 // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), h("zonos-cart-restricted-items", null), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
+            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", { submitBtnColor: submitButtonColor }), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), h("zonos-cart-restricted-items", null), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
                     ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), h("zonos-checkout-footer", { "data-theme": rightSideTheme, mobile: this.isMobile,
                 /**
                  * For this component, use slot instead of passing JSX through prop of other component. Because

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/assets/ChevronUpIcon.svg

@@ -0,0 +1,23 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_2052_3658)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.46967 14.5303C7.76256 14.8232 8.23744 14.8232 8.53033 14.5303L12.5 10.5607L16.4697 14.5303C16.7626 14.8232 17.2374 14.8232 17.5303 14.5303C17.8232 14.2374 17.8232 13.7626 17.5303 13.4697L13.0303 8.96967C12.7374 8.67678 12.2626 8.67678 11.9697 8.96967L7.46967 13.4697C7.17678 13.7626 7.17678 14.2374 7.46967 14.5303Z" fill="currentColor"/>
+</g>
+<defs>
+<filter id="filter0_dd_2052_3658" x="-3.5" y="-2" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2052_3658"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_2052_3658" result="effect2_dropShadow_2052_3658"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2052_3658" result="shape"/>
+</filter>
+</defs>
+</svg>

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

@@ -36,19 +36,16 @@
   display: flex;
   flex-direction: column;
 }
-:host .zonos--title {
-  margin-bottom: 24px;
-}
 :host .zonos--shipping-method-title {
-  margin-bottom: 16px;
-}
-:host .zonos-shipping-rich-radio {
-  margin-bottom: 24px;
+  margin-bottom: -16px;
 }
 :host .zonos--group {
   margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
   overscroll-behavior: contain;
 }
 :host .zonos--group::-webkit-scrollbar {
@@ -69,6 +66,9 @@
 :host .zonos--error-banner {
   margin-bottom: 16px;
 }
+:host .zonos--shipping-method-error {
+  margin-top: 24px;
+}
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--zonos-elements-gray-600);
 }
@@ -83,6 +83,52 @@
 :host .zonos--group-btn zonos-button {
   width: 100%;
 }
-:host zonos-banner {
-  margin-top: 24px;
+:host .zonos--shipping-options-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+:host .zonos--shipping-options-collapse-trigger {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  align-items: center;
+  background: var(--zonos-elements-gray-0);
+  width: 100%;
+  border: none;
+  cursor: pointer;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  transition: 0.5s all ease;
+}
+:host .zonos--shipping-options-collapse-trigger zonos-icon {
+  transition: transform 0.3s ease;
+}
+:host .zonos--shipping-options-collapse-trigger.collapsed {
+  margin-bottom: 0;
+}
+:host .zonos--shipping-options-collapse-trigger.collapsed zonos-icon {
+  transform: rotate(180deg);
+}
+:host .zonos--shipping-options-collapse-trigger::before, :host .zonos--shipping-options-collapse-trigger::after {
+  content: "";
+  display: block;
+  width: 80%;
+  height: 1px;
+  background-color: var(--zonos-elements-border-color);
+  flex-shrink: 1;
+}
+:host .zonos--shipping-options-collapse-trigger .zonos--title-wrapper {
+  flex-grow: 1;
+  flex-shrink: 0;
+  display: inline-flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+:host .zonos--dap-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 }

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

@@ -2,9 +2,12 @@ import { h, Host, } from "@stencil/core";
 import { cartStore, cartStoreGetShippingTransitInfo, cartStoreUpdateSelectedShippingOption, } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
-import { sortServiceLevelOptions } from "../../../utils/checkout/sortServiceLevelOptions";
+import { sortServiceLevelOptionsByAmount } from "../../../utils/checkout/sortServiceLevelOptionsByAmount";
+import { classes } from "../../../utils/classes";
 import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 import { submitGtag } from "../../../utils/submitGtag";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosShipping {
     constructor() {
         this.handleRadioSelected = async (e) => {
@@ -50,8 +53,6 @@ export class ZonosShipping {
             switch (method) {
                 case 'DAP':
                     return translate(` (Duties due at door)`);
-                case 'DDP':
-                    return translate(` (Duties prepaid)`);
                 default:
                     return '';
             }
@@ -67,10 +68,11 @@ export class ZonosShipping {
                 const matchedLandedCosts = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.filter(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; });
                 return ((matchedLandedCosts === null || matchedLandedCosts === void 0 ? void 0 : matchedLandedCosts.map(landedCost => {
                     const shippingAmount = landedCost.subtotals.shipping;
-                    return {
+                    const option = {
                         amount: shippingAmount,
                         label: `${item.displayName}${this.getLandedCostMethodLabelSuffix(landedCost.landedCost.method)}`,
                         landedCostId: landedCost.landedCostId,
+                        method: landedCost.landedCost.method,
                         price: currencyFormat({
                             amount: shippingAmount,
                             currency: cartStore.currency,
@@ -79,28 +81,50 @@ export class ZonosShipping {
                         sublabel,
                         value: landedCost.landedCostId,
                     };
+                    return option;
                 })) || []);
             })) || [];
-            // sort service level by price
-            this.serviceLevels = sortServiceLevelOptions(serviceLevels);
+            const serviceLevelsDDP = serviceLevels.filter(item => item.method === 'DDP');
+            const serviceLevelsDAP = serviceLevels.filter(item => item.method === 'DAP');
+            const serviceLevelsOther = serviceLevels.filter(item => item.method !== 'DAP' && item.method !== 'DDP');
+            this.serviceLevelsDDP = sortServiceLevelOptionsByAmount(serviceLevelsDDP);
+            this.serviceLevelsDAP = sortServiceLevelOptionsByAmount(serviceLevelsDAP);
+            this.serviceLevelsOther =
+                sortServiceLevelOptionsByAmount(serviceLevelsOther);
+            const defaultShownServiceLevels = [
+                ...this.serviceLevelsDDP,
+                ...this.serviceLevelsOther,
+            ];
+            // Show DAP by default if there is no DDP
+            if (!defaultShownServiceLevels.length) {
+                this.collapsedDAPOptions = false;
+            }
         };
         this.continueLoading = false;
         this.submitBtnColor = undefined;
         this.submitBtnType = undefined;
         this.selectedShippingMethod = null;
+        this.collapsedDAPOptions = true;
         this.isSelecting = false;
         this.showErrorBanner = false;
-        this.serviceLevels = [];
+        this.serviceLevelsDDP = [];
+        this.serviceLevelsDAP = [];
+        this.serviceLevelsOther = [];
     }
     componentWillLoad() {
         this.initServiceLevels();
-        const selectedServiceLevel = this.serviceLevels.find(item => { var _a; return item.value === ((_a = cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
+        const allServiceLevels = [
+            ...this.serviceLevelsDDP,
+            ...this.serviceLevelsDAP,
+            ...this.serviceLevelsOther,
+        ];
+        const selectedServiceLevel = allServiceLevels.find(item => { var _a; return item.value === ((_a = cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
         if (selectedServiceLevel) {
             // keep the selected shipping method
             this.selectedShippingMethod = selectedServiceLevel;
             return;
         }
-        const firstServiceLevel = this.serviceLevels.find(Boolean);
+        const firstServiceLevel = allServiceLevels.find(Boolean);
         if (firstServiceLevel) {
             // preselect the first shipping method
             void this.handleRadioSelected({
@@ -109,12 +133,25 @@ export class ZonosShipping {
         }
     }
     render() {
-        var _a, _b, _c;
+        const allServiceLevels = [
+            ...this.serviceLevelsDDP,
+            ...this.serviceLevelsDAP,
+            ...this.serviceLevelsOther,
+        ];
+        const defaultShownServiceLevels = [
+            ...this.serviceLevelsDDP,
+            ...this.serviceLevelsOther,
+        ];
         // start validate on typing after error banner is shown, and hide it if the form is complete
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: '00da931b8d40429b7acfdeb2ca06c564e55e4c8b', class: "zonos--shipping zonos--elements" }, h("div", { key: 'cc231db53fa9fcccee0348317110eaf58b0367df', class: "zonos--group" }, h("zonos-text", { key: '4679617eb68df02dcfa410737931b2a3ec2fe681', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '2a20b3be92ea8b88004048ef581290bf5a68be2d', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'c18d78c99e57141d7d0b6057ebba5cbffd07391d', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'aed8fdcf2fc7efc99f25419171172e86804a40cf', class: "zonos--group-btn" }, h("zonos-button", { key: 'd09b88e2872baf1d97360bcc98889d7d97e93873', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !allServiceLevels.length ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length && (h("button", { class: classes([
+                'zonos--shipping-options-collapse-trigger',
+                this.collapsedDAPOptions && 'collapsed',
+            ]), onClick: () => {
+                this.collapsedDAPOptions = !this.collapsedDAPOptions;
+            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non prepaid methods' : 'Hide non prepaid methods')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: '43619b89b2274e38683ade860402ff026ddcdd9a', class: "zonos--group-btn" }, h("zonos-button", { key: 'fff71598501c5a83ea415a72f3bc64ee004cbeae', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }
@@ -194,9 +231,12 @@ export class ZonosShipping {
     static get states() {
         return {
             "selectedShippingMethod": {},
+            "collapsedDAPOptions": {},
             "isSelecting": {},
             "showErrorBanner": {},
-            "serviceLevels": {}
+            "serviceLevelsDDP": {},
+            "serviceLevelsDAP": {},
+            "serviceLevelsOther": {}
         };
     }
     static get events() {

package/dist/collection/components/common/zonos-badge/assets/RemoveLineIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8282 5.17184C11.0235 5.3671 11.0235 5.68368 10.8282 5.87894L8.70688 8.00026L10.8282 10.1216C11.0235 10.3168 11.0235 10.6334 10.8282 10.8287C10.6329 11.024 10.3164 11.024 10.1211 10.8287L7.99978 8.70737L5.87846 10.8287C5.68319 11.024 5.36661 11.024 5.17135 10.8287C4.97609 10.6334 4.97609 10.3168 5.17135 10.1216L7.29267 8.00026L5.17135 5.87894C4.97609 5.68368 4.97609 5.3671 5.17135 5.17184C5.36661 4.97658 5.68319 4.97658 5.87846 5.17184L7.99978 7.29316L10.1211 5.17184C10.3164 4.97658 10.6329 4.97658 10.8282 5.17184Z" fill="var(--zonos-elements-gray-800)"/>
+</svg>

package/dist/collection/components/common/zonos-badge/zonos-badge.css

@@ -119,4 +119,7 @@
 :host .transparent.bold {
   background-color: var(--zonos-elements-glass-600);
   color: var(--zonos-elements-gray-100);
+}
+:host .zonos--badge-dismiss {
+  cursor: pointer;
 }

package/dist/collection/components/common/zonos-badge/zonos-badge.js

@@ -1,6 +1,8 @@
 import { h, Host } from "@stencil/core";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
 export class ZonosBadge {
     constructor() {
         this.bold = false;
@@ -9,18 +11,20 @@ export class ZonosBadge {
         this.iconRight = false;
         this.size = 'default';
         this.rounded = false;
+        this.loading = false;
+        this.dismissHandler = undefined;
     }
     render() {
-        return (h(Host, { key: '4e022b4090de017818c5ba8f86e2d7684a1b8f05', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '9704ae6d10af4b720e1edf9ccc0263d4463e64f2', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '8e6a4c0fcf81939d69fd3aec91463ed6c7a2d67d', class: classes([
+            } }, h("div", { key: 'e395b7477591edff91059aefc4d3858f45d61098', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: '5824866453d31abef18443179e6bc1692e9e98a3', textColor: `${this.badgeColor}-800` }, h("slot", { key: '9bc411177ae04e8fa1061098023860204fa1a5d7' })))));
+            ]) }, this.icon, h("zonos-text", { key: '92eeb162849c9036bb102012e14fb6476b34b411', textColor: `${this.badgeColor}-800` }, h("slot", { key: '3a52067262d1ba34eb5952dc2f2eaeeb1daa624c' })), this.dismissHandler && (h("zonos-icon", { key: '7bb94d2b2204c81e7c21e31fe2769de2e0f0c19b', "aria-label": "Remove promo code", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -169,6 +173,42 @@ export class ZonosBadge {
                 "attribute": "rounded",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not the badge is loading"
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dismissHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "(() => void) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback for when the badge is dismissed. Also determines if dismiss icon shown."
+                }
             }
         };
     }

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -121,12 +121,12 @@ export class ZonosButton {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '51f49811674e7ef1efe49389afc3fc70e4f5a46c', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: 'c8e781921a30afccbbe3dd187632aa06135420df', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'f11f4f6877a0947df57dbe5baf658b69d91fff4d', class: classes([
+            }) }, h("button", { key: '1783400cd4ae43832789ba63649b7962d7e08d6c', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -141,7 +141,7 @@ export class ZonosButton {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }, this.loading && (h("div", { key: '35f474efa80cde690afd876863d25f3b46198ecf', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '7476edf05b7d85d5f2f6900a7ad97c49d2216dd8', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'a4e8bfc0aef84561416ddc5f38602ed346db6f4b', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }, this.loading && (h("div", { key: '7f1c3907f9dbbc42613db7b976d358d477caaac4', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'be0002a169ebf26eb4bbf65f5a057840a90fe937', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '4204bc86e934884015fcd09be7ffe79931f5c112', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-card/zonos-card.js

@@ -22,16 +22,16 @@ export class ZonosCard {
             customRoundRadius: `${this.borderRadius}px`,
             overrideBorderStyle: 'ROUNDED',
         });
-        return (h(Host, { key: 'e239a3af7d0bb71537ef94a13672ffa906adedd9', style: {
+        return (h(Host, { key: 'eb938f526afeb2d8c70b3ce6d5e219fb82dccd4b', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '41efc14a60719dbf847be74385d8d1c4065cee84', class: classes(['styled-card']), style: {
+            } }, h("div", { key: 'd1c94fc6d2f2bc4fa157901116209a0ec2b2c6bc', class: classes(['styled-card']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderRadius,
                 padding: this.spacing,
-            } }, this.label && (h("header", { key: '012234fa59c5c50cf78ff7a4b2dc0efaecd3cc20', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '133ae9f43b50edca812aa0aab203febbffc07318', type: "subheader" }, this.label), h("h-stack", { key: '542c1e7b4d1f1e0751231cff9cb4ae5df3a82fa6', spacing: 8 }, this.actions))), h("slot", { key: '307ff202ce1c090f37b3f377a3f64efbea7a2e67' }), (this.footerActions || this.footerContent) && (h("footer", { key: '6641fba300b6acf06a650a73393612e774e79f1a', class: "card-footer", style: {
+            } }, this.label && (h("header", { key: 'c91e1e4620f6c16a51cb0240528cf17de5f65192', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'c0516125052b5369f49fa90696f0f1ff9707cd76', type: "subheader" }, this.label), h("h-stack", { key: '025ee9b66a9f0d354efe41e16cbe7f78ea74cdf5', spacing: 8 }, this.actions))), h("slot", { key: '27805390a0d386f68f65cd23f86e04c5489eb291' }), (this.footerActions || this.footerContent) && (h("footer", { key: '7a6d615316e46f32f2dd70988c425edb99089fd9', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '40676761caaa588d4a503fe791e296829636e717' }, this.footerContent), h("h-stack", { key: 'f4f61d848c4b2e9c070b006146a88841a2f6f45f', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '72c6cba3976cfcaf693af897db891c015bba7cd6' }, this.footerContent), h("h-stack", { key: 'c52f116dae77617934090a33a89602f0f4bd5c5a', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -36,14 +36,14 @@ export class ZonosCheckbox {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'bf51dd642e88096e874d78023a29dd68239e8d3a', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '8613d885c639d01671743dbdb0583c390718c732', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '3598c9f21285304499aaafbab5226d619ecf4e69', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '277507f643404e6e44191c2d715b70f38fc6af85', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '803434d7a63e1735bf0ef15a9e4c7fb515bfff41', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'a19a46a896597f4c47d4ec790a21b5133c13b952', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '3f0fd0d458e8cf660fa883ceaa241e3397829548', class: "checkmark-container" }, h("svg", { key: '0d654744bea5b5696ddcf3778a155fb622022f1e', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cc19837ee088feb7053fdaeaea0d1213cbc60775', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: 'cb85d59651f67a33126d37c3ebfb1e8a91b457fe', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '7f4b933f9626bc05f052d79fa25a0c46ee16f492', class: "checkmark-container" }, h("svg", { key: '775d0b011a1430f712e8f633e2850d6f6e193f36', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'eef97178731ac1bf9885d5cfd57afa514c20df5f', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '0f72347f0b21817cd176393219374008a056b590', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }