ui.shipaid.com 0.3.53 → 0.3.54

package/dist/widget.es.js

@@ -1431,13 +1431,13 @@ const BellIcon = x`
     </g>
   </svg>
 `;
-var __defProp$2 = Object.defineProperty;
-var __decorateClass$2 = (decorators, target, key, kind) => {
+var __defProp$3 = Object.defineProperty;
+var __decorateClass$3 = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$2(target, key, result);
+  if (result) __defProp$3(target, key, result);
   return result;
 };
 const _LearnMorePopup = class _LearnMorePopup extends s$1 {
@@ -1515,7 +1515,7 @@ const _LearnMorePopup = class _LearnMorePopup extends s$1 {
 };
 _LearnMorePopup.styles = styles$2;
 let LearnMorePopup = _LearnMorePopup;
-__decorateClass$2([
+__decorateClass$3([
   n$7({ type: Boolean, attribute: true })
 ], LearnMorePopup.prototype, "active");
 if (!customElements.get("shipaid-popup-learn-more")) {
@@ -1669,13 +1669,13 @@ const styles$1 = i$2`
     z-index: -1;
   }
 `;
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
+var __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$1(target, key, result);
+  if (result) __defProp$2(target, key, result);
   return result;
 };
 const _ConfirmationPopup = class _ConfirmationPopup extends s$1 {
@@ -1721,12 +1721,231 @@ const _ConfirmationPopup = class _ConfirmationPopup extends s$1 {
 };
 _ConfirmationPopup.styles = styles$1;
 let ConfirmationPopup = _ConfirmationPopup;
-__decorateClass$1([
+__decorateClass$2([
   n$7({ type: Boolean, attribute: true })
 ], ConfirmationPopup.prototype, "active");
 if (!customElements.get("shipaid-popup-confirmation")) {
   customElements.define("shipaid-popup-confirmation", ConfirmationPopup);
 }
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+const _ShipAidCartConfirmation = class _ShipAidCartConfirmation extends s$1 {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.product = null;
+    this.imageUrl = null;
+    this.priceOfVariant = null;
+    this.quantity = 1;
+    this.dontShowAgain = sessionStorage.getItem("shipaid-confirmation-dontshow") === "yes";
+  }
+  handleDismiss() {
+    this.dispatchEvent(new Event("dismiss-shipaid-cart"));
+  }
+  handleDontShowAgain(ev) {
+    if (ev.target.checked) {
+      sessionStorage.setItem("shipaid-confirmation-dontshow", "yes");
+    } else {
+      sessionStorage.removeItem("shipaid-confirmation-dontshow");
+    }
+  }
+  handleConfirm() {
+    this.dispatchEvent(new Event("confirm-shipaid-cart"));
+  }
+  render() {
+    return x`
+      <div class=${`shipaid-cart-popup ${this.open ? "open" : ""}`}>
+        <div class="popup-heading">
+          <slot name="shipaid-cart-popup-heading">Protect Your Order Instantly</slot>
+        </div>
+        <div class="popup-description">
+          <slot name="shipaid-cart-popup-description">
+            Get total peace of mind! If your package is lost, stolen, or damaged, we’ve got you covered. Quick, hassle-free replacements!
+          </slot>
+        </div>
+        <label class="checkbox-container">
+          <svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+            <rect x="4" y="4" width="40" height="40" rx="8" stroke-width="2"/>
+            <rect x="4" y="-1" width="40" height="14" rx="8" fill="rgba(255, 255, 255, 0.3)"/>
+            <path d="M14 24L22 32L34 16" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          ShipAid Delivery Guarantee Included - $${this.priceOfVariant}
+        </label>
+
+        <div class="popup-actions">
+          <button class="btn-secondary-popup" @click=${this.handleDismiss}>
+            <slot name="shipaid-cart-popup-dismiss-button">No, I'll Take the Risk</slot>
+          </button>
+          <button class="btn-primary-popup" @click=${this.handleConfirm}>
+            <slot name="shipaid-cart-popup-confirm-button">Yes, Protect My Order</slot>
+          </button>
+        </div>
+
+        <label class="dont-show-again">
+          <input type="checkbox" @change=${this.handleDontShowAgain} .checked=${this.dontShowAgain} />
+          <p>Don't show this again</p>
+        </label>
+      </div>
+    `;
+  }
+};
+_ShipAidCartConfirmation.styles = i$2`
+    :host {
+      --shipaid-popup-background: #ffffff;
+      --shipaid-popup-btn-primary: #2e7cff;
+      --shipaid-popup-btn-primary-hover: #1e40af;
+      --shipaid-popup-btn-secondary: #e5e7eb;
+      --shipaid-popup-btn-secondary-hover: #d1d5db;
+      --shipaid-popup-product-title: #2e7cff;
+      --shipaid-popup-product-container-hover: #dbeafe;
+      --shipaid-svg-fill: #6dc20c;
+      --shipaid-svg-stroke: #388E3C;
+    }
+
+    .shipaid-cart-popup {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 420px;
+      background-color: var(--shipaid-popup-background);
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+      z-index: 1000000000;
+      text-align: center;
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
+    }
+
+    .shipaid-cart-popup.open {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    .popup-heading {
+      font-size: 2rem;
+      font-weight: bold;
+      margin-bottom: 12px;
+      color: #1f2937;
+    }
+
+    .popup-description {
+      font-size: 1.6rem;
+      color: #000;
+      line-height: 1.5;
+      margin-bottom: 16px;
+    }
+
+    .checkbox-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      background: #eff6ff;
+      padding: 12px 11px;
+      border-radius: 8px;
+      border: 1px solid var(--shipaid-popup-product-title);
+      margin-bottom: 18px;
+      font-weight: bold;
+      color: var(--shipaid-popup-product-title);
+      font-size: 1.5rem;
+      transition: background 200ms ease-in-out;
+      gap: 1rem;
+    }
+
+    .checkbox-container:hover {
+      background: var(--shipaid-popup-product-container-hover);
+    }
+
+    .popup-actions {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+    }
+
+    .btn-secondary-popup {
+      background-color: var(--shipaid-popup-btn-secondary);
+      color: #374151;
+      border: none;
+      padding: 12px 18px;
+      border-radius: 6px;
+      font-size: 1.6rem;
+      cursor: pointer;
+      transition: background-color 200ms ease-in-out;
+    }
+
+    .btn-secondary-popup:hover {
+      background-color: var(--shipaid-popup-btn-secondary-hover);
+    }
+
+    .btn-primary-popup {
+      background-color: var(--shipaid-popup-btn-primary);
+      color: white;
+      border: none;
+      padding: 12px 18px;
+      border-radius: 6px;
+      font-size: 1.6rem;
+      cursor: pointer;
+      transition: background-color 200ms ease-in-out;
+      font-weight: bold;
+    }
+
+    .btn-primary-popup:hover {
+      background-color: var(--shipaid-popup-btn-primary-hover);
+    }
+
+    .dont-show-again {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 14px;
+      font-size: 1.2rem;
+      color: #777777;
+      cursor: pointer;
+    }
+
+    .dont-show-again input {
+      margin-right: 6px;
+      cursor: pointer;
+    }
+
+    .checkbox-container svg {
+      width: 24px;
+      height: 24px;
+      fill: var(--shipaid-svg-fill);
+      stroke: var(--shipaid-svg-stroke);
+    }
+  `;
+let ShipAidCartConfirmation = _ShipAidCartConfirmation;
+__decorateClass$1([
+  n$7({ type: Boolean, attribute: true })
+], ShipAidCartConfirmation.prototype, "open");
+__decorateClass$1([
+  n$7({ type: String, attribute: true })
+], ShipAidCartConfirmation.prototype, "product");
+__decorateClass$1([
+  n$7({ type: String, attribute: true })
+], ShipAidCartConfirmation.prototype, "imageUrl");
+__decorateClass$1([
+  n$7({ type: String, attribute: true })
+], ShipAidCartConfirmation.prototype, "priceOfVariant");
+__decorateClass$1([
+  n$7({ type: String, attribute: true })
+], ShipAidCartConfirmation.prototype, "quantity");
+__decorateClass$1([
+  n$7({ type: Boolean })
+], ShipAidCartConfirmation.prototype, "dontShowAgain");
+customElements.define("shipaid-cart-confirmation", ShipAidCartConfirmation);
 const loading = "Loading ShipAid Widget...";
 const title = "Delivery Guarantee";
 const description = "in case of Loss, Damage or Theft";
@@ -2058,6 +2277,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
     this._storeDomain = ((_a = window.Shopify) == null ? void 0 : _a.shop) ?? ((_c = (_b = window.Shopify) == null ? void 0 : _b.Checkout) == null ? void 0 : _c.apiHost);
     this._hasFinishedSetup = false;
     this._shouldShowWidget = false;
+    this._isCartVisibleOnScreen = false;
     this._hasProtectionInCart = false;
     this.hasLoadedStrings = false;
     this.fetchInterceptorCleanup = () => {
@@ -2242,7 +2462,11 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
     var _a, _b, _c;
     const removeWithConfirmation = (_c = (_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.widget) == null ? void 0 : _c.removeWithConfirmation;
     if (!this._hasProtectionInCart) {
-      return this.addProtection();
+      const triggered = this.triggerShipAidAddToCartConfirm();
+      if (!triggered) {
+        this.addProtection();
+      }
+      return;
     }
     if (!removeWithConfirmation) {
       return this.removeProtection();
@@ -2354,7 +2578,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       let product;
       if (this.useCustomStoreFront) {
         const result = await this.runStoreFrontQuery(
-          "query searchProducts($query: String!, $first: Int) { search(query: $query, first: $first, types: PRODUCT) { edges { node { ... on Product { id title handle variants(first: 1) { edges { node { id title price { amount } } } } } } } } }",
+          "query searchProducts($query: String!, $first: Int) { search(query: $query, first: $first, types: PRODUCT) { edges { node { ... on Product { id title image { src } handle variants(first: 1) { edges { node { id title price { amount } } } } } } } } }",
           {
             query: "ShipAid Delivery Guarantee",
             first: 1
@@ -2364,6 +2588,8 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
           const protectionProductItem = result.search.edges[0];
           product = {
             id: protectionProductItem.node.id,
+            title: protectionProductItem.node.title,
+            image: protectionProductItem.node.image,
             variants: protectionProductItem.node.variants.edges.map((v2) => ({
               id: v2.node.id,
               price: v2.node.price.amount
@@ -2588,6 +2814,29 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       ></shipaid-popup-confirmation>
     `;
   }
+  confirmShipAidCart() {
+    var _a, _b, _c, _d;
+    return x`
+      <shipaid-cart-confirmation
+        .open=${this._popup === "shipaid-confirm-cart"}
+        .product=${(_a = this._protectionProduct) == null ? void 0 : _a.title}
+        .imageUrl=${(_c = (_b = this._protectionProduct) == null ? void 0 : _b.image) == null ? void 0 : _c.src}
+        .priceOfVariant=${(_d = this._protectionVariant) == null ? void 0 : _d.price}
+        .quantity=${1}
+        @dismiss-shipaid-cart=${() => {
+      this._popup = null;
+    }}
+        @confirm-shipaid-cart=${async () => {
+      await this.addProtection();
+      sessionStorage.setItem(
+        LOCAL_STORAGE_KEY,
+        JSON.stringify({ loaded: true })
+      );
+      this._popup = null;
+    }}
+      ></shipaid-cart-confirmation>
+    `;
+  }
   renderPopups() {
     if (this.persistPopup) {
       this._popup = this.shouldPersistPopup();
@@ -2597,6 +2846,8 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
         return this.confirmationPopupTemplate();
       case "learn-more":
         return this.learnMorePopupTemplate();
+      case "shipaid-confirm-cart":
+        return this.confirmShipAidCart();
       default:
         return null;
     }
@@ -2805,9 +3056,38 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
     );
     await this._handleRefresh(cart);
   }
+  runCartPageDetection() {
+    const cart = document.querySelector("button[class*='checkout'], a[href*='checkout']");
+    if (cart) {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this._isCartVisibleOnScreen = true;
+          } else {
+            this._isCartVisibleOnScreen = false;
+          }
+        });
+      });
+      observer.observe(cart);
+    }
+  }
+  triggerShipAidAddToCartConfirm() {
+    var _a, _b, _c;
+    const dontShowAgain = Boolean(sessionStorage.getItem("shipaid-confirmation-dontshow"));
+    if (dontShowAgain) return false;
+    const showAddToCartConfirmation = (_c = (_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.widget) == null ? void 0 : _c.showAddToCartConfirmation;
+    if (showAddToCartConfirmation) {
+      if (this._isCartVisibleOnScreen) {
+        this._popup = "shipaid-confirm-cart";
+      }
+      return true;
+    }
+    return false;
+  }
   render() {
     useOnce(this, async () => {
       var _a, _b, _c, _d, _e, _f;
+      this.runCartPageDetection();
       const linkEl = document.createElement("link");
       linkEl.setAttribute(
         "href",
@@ -2868,11 +3148,14 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
           ((_d2 = this._cart) == null ? void 0 : _d2.item_count) && // And that we are actually showing the widget
           this._store.widgetShowCart
         ) {
-          await this.addProtection();
-          sessionStorage.setItem(
-            LOCAL_STORAGE_KEY,
-            JSON.stringify({ loaded: true })
-          );
+          const triggered = this.triggerShipAidAddToCartConfirm();
+          if (!triggered) {
+            await this.addProtection();
+            sessionStorage.setItem(
+              LOCAL_STORAGE_KEY,
+              JSON.stringify({ loaded: true })
+            );
+          }
         }
       }, 500);
       if (this.disablePolling) return;
@@ -2904,7 +3187,13 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       },
       [this._store, this._cart]
     );
-    D(this.renderPopups(), document.body);
+    useEffect(
+      this,
+      async () => {
+        D(this.renderPopups(), document.body);
+      },
+      [this._popup]
+    );
     return x`
       <style>
         :host {
@@ -3261,6 +3550,9 @@ __decorateClass([
 __decorateClass([
   t$3()
 ], ShipAidWidget.prototype, "_shouldShowWidget");
+__decorateClass([
+  t$3()
+], ShipAidWidget.prototype, "_isCartVisibleOnScreen");
 __decorateClass([
   t$3()
 ], ShipAidWidget.prototype, "_hasProtectionInCart");