ui.shipaid.com 0.3.148 → 0.3.149

package/dist/widget.es.js

@@ -3643,7 +3643,9 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
     this._sellingPlanId = null;
     this._isUpdatingShipAid = false;
     this._lastCartEventAt = 0;
-    this._isReplacingCartSections = false;
+    this._checkoutButtonStylesInjected = false;
+    this._cachedCheckoutButton = null;
+    this._cachedCheckoutButtonClasses = "";
     this._onShipAidCartEvent = (event) => {
       var _a2, _b2;
       if (((_b2 = (_a2 = event == null ? void 0 : event.detail) == null ? void 0 : _a2.data) == null ? void 0 : _b2.source) === "shipaid-widget") return;
@@ -3768,6 +3770,47 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
   _toggleBenefits() {
     this._isBenefitsOpen = !this._isBenefitsOpen;
   }
+  /**
+   * Get the contactless checkout selector from DB or sessionStorage
+   * @private
+   */
+  _getContactlessCheckoutSelector() {
+    var _a, _b, _c, _d;
+    return ((_d = (_c = (_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.widget) == null ? void 0 : _c.theme_checkout) == null ? void 0 : _d.checkoutButtonSelector) || null;
+  }
+  /**
+   * Check if we should use contactless checkout template
+   * @private
+   */
+  _shouldUseContactlessCheckout() {
+    const dbSelector = this._getContactlessCheckoutSelector();
+    const sessionSelector = sessionStorage.getItem("shipaidWidgetTheme");
+    if (this.useShipAidCheckout || !dbSelector) {
+      return false;
+    }
+    return !!sessionSelector;
+  }
+  /**
+   * Check if widget should be shown based on config
+   * @private
+   */
+  _shouldShowWidgetContent() {
+    var _a;
+    return !!(this._shouldShowWidget && this.planActive && ((_a = this._store) == null ? void 0 : _a.widgetShowCart));
+  }
+  /**
+   * Determine which template to render
+   * @private
+   */
+  _getTemplateToRender() {
+    if (!this._hasFinishedSetup) {
+      return this._shouldUseContactlessCheckout() ? this.contactlessCheckoutButtonTemplate() : this.promptTemplate();
+    }
+    if (this._shouldShowWidgetContent()) {
+      return this._shouldUseContactlessCheckout() ? this.contactlessCheckoutButtonTemplate() : this.promptTemplate();
+    }
+    return A;
+  }
   get nhost() {
     const subdomain = this.env === "prod" ? "gjiyysyzjwuculcymsvb" : this.env === "staging" ? "xfnjpunvafvudwuzwjlm" : "local";
     const region = "us-east-1";
@@ -4160,13 +4203,6 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       } catch {
       }
     }
-    try {
-      this._isReplacingCartSections = true;
-      await refreshShopifyCartUI();
-    } catch {
-    } finally {
-      this._isReplacingCartSections = false;
-    }
   }
   async addCartProtectionVariant() {
     var _a, _b;
@@ -4682,8 +4718,12 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       </div>
     `;
   }
-  checkoutButtonTemplate() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  /**
+   * Inject global styles for checkoutButtonTemplate (only once)
+   * @private
+   */
+  _injectCheckoutButtonGlobalStyles() {
+    if (this._checkoutButtonStylesInjected) return;
     if (!document.getElementById("shipaid-styles")) {
       const style = document.createElement("style");
       style.id = "shipaid-styles";
@@ -4698,70 +4738,257 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       `;
       document.head.appendChild(style);
     }
+    this._checkoutButtonStylesInjected = true;
+  }
+  /**
+   * Find and cache the original checkout button for checkoutButtonTemplate
+   * @private
+   */
+  _findAndCacheCheckoutButton() {
+    var _a;
+    if (this._cachedCheckoutButton && document.contains(this._cachedCheckoutButton)) {
+      return this._cachedCheckoutButton;
+    }
     if (!this.dataSelector) {
-      console.error(
-        "[shipaid-widget] we couldn't find the 'data-selector' attribute."
-      );
-      return;
+      logger.warn("[shipaid-widget] Missing 'data-selector' attribute for checkout button");
+      return null;
     }
-    let originalCheckoutButton = null;
+    let button = null;
     if (this.shadowRootSelector) {
       const shadowHost = document.querySelector(this.shadowRootSelector);
-      if (shadowHost && shadowHost.shadowRoot) {
-        originalCheckoutButton = shadowHost.shadowRoot.querySelector(
+      if (shadowHost == null ? void 0 : shadowHost.shadowRoot) {
+        button = shadowHost.shadowRoot.querySelector(
           `${this.dataSelector}:not(#${this.buttonId || "shipaid-checkout-button"})`
         );
       } else {
-        console.warn(
-          `ShadowRoot not found in the element '${this.shadowRootSelector}'.`
-        );
-        return;
+        logger.warn(`ShadowRoot not found for selector '${this.shadowRootSelector}'`);
+        return null;
       }
     } else {
-      originalCheckoutButton = (_a = this.getElementsBySelector(
-        this.dataSelector
-      )) == null ? void 0 : _a[0];
+      button = (_a = this.getElementsBySelector(this.dataSelector)) == null ? void 0 : _a[0];
     }
-    if (!originalCheckoutButton) {
-      console.warn(`Button not found with selector '${this.dataSelector}'.`);
-      return;
+    if (!button) {
+      logger.warn(`Checkout button not found with selector '${this.dataSelector}'`);
+      return null;
     }
-    originalCheckoutButton.setAttribute("shipaid-hidden", "");
-    const originalClasses = originalCheckoutButton.className;
-    const protectionPrice = Number((_b = this._protectionVariant) == null ? void 0 : _b.price) || 0;
-    const cartPrice = (Number((_c = this._cart) == null ? void 0 : _c.total_price) || 0) / 100;
+    this._cachedCheckoutButton = button;
+    this._cachedCheckoutButtonClasses = button.className;
+    return button;
+  }
+  /**
+   * Calculate cart totals for checkoutButtonTemplate
+   * @private
+   */
+  _calculateCheckoutCartTotals() {
+    var _a, _b;
+    const protectionPrice = Number((_a = this._protectionVariant) == null ? void 0 : _a.price) || 0;
+    const cartPrice = (Number((_b = this._cart) == null ? void 0 : _b.total_price) || 0) / 100;
     const cartTotal = !this._hasProtectionInCart ? protectionPrice + cartPrice : cartPrice;
-    const isGreenProtectionEnabled = Boolean(
-      (_e = (_d = this._store) == null ? void 0 : _d.greenProtection) == null ? void 0 : _e.enabled
-    );
-    const isFreeGiftEnabled = Boolean(
-      (_g = (_f = this._store) == null ? void 0 : _f.freeGifts) == null ? void 0 : _g.enabled
-    );
+    return { protectionPrice, cartPrice, cartTotal };
+  }
+  /**
+   * Get impact features for checkoutButtonTemplate
+   * @private
+   */
+  _getCheckoutImpactFeatures() {
+    var _a, _b, _c, _d;
+    const isGreenProtectionEnabled = Boolean((_b = (_a = this._store) == null ? void 0 : _a.greenProtection) == null ? void 0 : _b.enabled);
+    const isFreeGiftEnabled = Boolean((_d = (_c = this._store) == null ? void 0 : _c.freeGifts) == null ? void 0 : _d.enabled);
     const impactActive = isGreenProtectionEnabled || isFreeGiftEnabled;
-    const loading2 = x`
-      <svg
-        width="1.5rem"
-        height="1.5rem"
-        viewBox="0 0 50 50"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="4"
-        class="shipaid-loader"
-      >
-        <circle cx="25" cy="25" r="20" stroke-opacity="0.5" />
-        <path d="M45 25a20 20 0 0 1-40 0" stroke="currentColor">
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            from="0 25 25"
-            to="360 25 25"
-            dur="1s"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
+    return { isGreenProtectionEnabled, isFreeGiftEnabled, impactActive };
+  }
+  /**
+   * Render Get Mechanism theme checkout button
+   * Modern UI based on the mechanism theme design
+   * @private
+   */
+  _renderGetMechanismCheckoutButton(originalClasses, protectionPrice, cartTotal, _isGreenProtectionEnabled, _isFreeGiftEnabled, loading2) {
+    var _a, _b, _c, _d, _e, _f;
+    return x`
+      <style>
+        :host {
+          display: inline-block;
+          font-family: Arial, sans-serif;
+          width: 100%;
+        }
+
+        .mechanism-container {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .mechanism-protection-card {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12px 16px;
+          background: #fff;
+        }
+
+        .mechanism-left {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        .mechanism-icon {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+
+        .mechanism-icon img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          border-radius: 6px;
+        }
+
+        .mechanism-info {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+        }
+
+        .mechanism-title {
+          display: flex;
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 1.2;
+          margin: 0;
+        }
+
+        .mechanism-subtitle {
+          font-size: 12px;
+          color: #6b7280;
+          margin: 0;
+        }
+
+        .mechanism-price {
+          font-weight: 600;
+          font-size: 14px;
+          color: #000;
+        }
+
+        .mechanism-info-icon {
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          border: 1.5px solid #9ca3af;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 11px;
+          color: #9ca3af;
+          font-weight: 600;
+          cursor: pointer;
+          margin-left: 6px;
+        }
+
+        .mechanism-checkout-button {
+          width: 100%;
+          padding: 14px;
+          background: #000;
+          color: #fff;
+          border: none;
+          border-radius: 6px;
+          font-weight: 600;
+          font-size: 15px;
+          cursor: pointer;
+          transition: opacity 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+        }
+
+        .mechanism-checkout-button:hover {
+          opacity: 0.9;
+        }
+
+        .mechanism-continue-link {
+          text-align: center;
+          font-size: 13px;
+          color: #6b7280;
+          text-decoration: underline;
+          cursor: pointer;
+          padding: 8px;
+        }
+
+        .mechanism-continue-link:hover {
+          color: #000;
+        }
+      </style>
+
+      <div class="mechanism-container">
+        <div class="mechanism-protection-card">
+          <div class="mechanism-left">
+            <div class="mechanism-icon">
+              ${((_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.theme_logo) ? x`<img src="${this._store.widgetConfigurations.theme_logo}" alt="Logo" />` : x`<img src="${ShipAidBlueIcon}" alt="ShipAid" />`}
+            </div>
+            <div class="mechanism-info">
+              <p class="mechanism-title">
+                Checkout+
+                <span class="mechanism-info-icon" @click=${this._openLearnMore}>i</span>
+              </p>
+              <p class="mechanism-subtitle">Free returns + package protection</p>
+            </div>
+          </div>
+          <div class="mechanism-price">
+            ${protectionPrice ? this._currencyFormat(protectionPrice) : loading2}
+          </div>
+        </div>
+
+        ${this._sellingPlanId ? x`
+              <button
+                class="mechanism-checkout-button ${originalClasses}"
+                @click=${async () => {
+      var _a2, _b2;
+      sessionStorage.setItem(
+        "shipaid_variant",
+        JSON.stringify((_a2 = this._protectionVariant) == null ? void 0 : _a2.id)
+      );
+      await this.addCartProtectionVariant();
+      window.location.href = `/checkout?attributes[_shipaid-internal]=1&updates[${(_b2 = this._protectionVariant) == null ? void 0 : _b2.id}]=1`;
+    }}
+              >
+                Checkout+ | ${cartTotal ? this._currencyFormat(cartTotal) : loading2}
+              </button>
+            ` : x`
+              <a
+                href="/checkout${((_c = this._protectionVariant) == null ? void 0 : _c.id) ? `?attributes[_shipaid-internal]=1&updates[${(_d = this._protectionVariant) == null ? void 0 : _d.id}]=1` : ""}"
+                class="mechanism-checkout-button ${originalClasses}"
+                @click=${() => {
+      var _a2;
+      sessionStorage.setItem(
+        "shipaid_variant",
+        JSON.stringify((_a2 = this._protectionVariant) == null ? void 0 : _a2.id)
+      );
+    }}
+              >
+                Checkout+ | ${cartTotal ? this._currencyFormat(cartTotal) : loading2}
+              </a>
+            `}
+
+        <a
+          href="/checkout${((_e = this._protectionVariant) == null ? void 0 : _e.id) ? `?attributes[_shipaid-internal]=1&updates[${(_f = this._protectionVariant) == null ? void 0 : _f.id}]=0` : ""}"
+          class="mechanism-continue-link"
+        >
+          Checkout without free returns & package protection
+        </a>
+      </div>
     `;
+  }
+  /**
+   * Render default/original checkout button UI
+   * @private
+   */
+  _renderDefaultCheckoutButton(originalClasses, protectionPrice, cartTotal, isGreenProtectionEnabled, isFreeGiftEnabled, impactActive, loading2) {
+    var _a, _b, _c, _d, _e, _f;
     return x`
       <style>
         :host {
@@ -4967,7 +5194,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
         ${this._sellingPlanId ? x`
               <button
                 id="${this.buttonId || "shipaid-checkout-button"}"
-                variant="${(_h = this._protectionVariant) == null ? void 0 : _h.id}"
+                variant="${(_a = this._protectionVariant) == null ? void 0 : _a.id}"
                 class="${this.buttonClasses || originalClasses}"
                 @click=${async () => {
       var _a2, _b2;
@@ -4984,8 +5211,8 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
               </button>
             ` : x`
               <a
-                variant="${(_i = this._protectionVariant) == null ? void 0 : _i.id}"
-                href="/checkout${((_j = this._protectionVariant) == null ? void 0 : _j.id) ? `?attributes[_shipaid-internal]=1&updates[${(_k = this._protectionVariant) == null ? void 0 : _k.id}]=1` : ""}"
+                variant="${(_b = this._protectionVariant) == null ? void 0 : _b.id}"
+                href="/checkout${((_c = this._protectionVariant) == null ? void 0 : _c.id) ? `?attributes[_shipaid-internal]=1&updates[${(_d = this._protectionVariant) == null ? void 0 : _d.id}]=1` : ""}"
                 id="${this.buttonId || "shipaid-checkout-button"}"
                 class="${this.buttonClasses || originalClasses}"
                 @click=${() => {
@@ -5007,7 +5234,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
               </a>
             `}
         <a
-          href="/checkout${((_l = this._protectionVariant) == null ? void 0 : _l.id) ? `?attributes[_shipaid-internal]=1&updates[${(_m = this._protectionVariant) == null ? void 0 : _m.id}]=0` : ""}"
+          href="/checkout${((_e = this._protectionVariant) == null ? void 0 : _e.id) ? `?attributes[_shipaid-internal]=1&updates[${(_f = this._protectionVariant) == null ? void 0 : _f.id}]=0` : ""}"
           class="continue-link"
         >
           <slot name="link-continue"
@@ -5017,6 +5244,60 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       </div>
     `;
   }
+  checkoutButtonTemplate() {
+    var _a, _b;
+    this._injectCheckoutButtonGlobalStyles();
+    const originalCheckoutButton = this._findAndCacheCheckoutButton();
+    if (!originalCheckoutButton) return;
+    originalCheckoutButton.setAttribute("shipaid-hidden", "");
+    const originalClasses = this._cachedCheckoutButtonClasses || originalCheckoutButton.className;
+    const { protectionPrice, cartTotal } = this._calculateCheckoutCartTotals();
+    const { isGreenProtectionEnabled, isFreeGiftEnabled, impactActive } = this._getCheckoutImpactFeatures();
+    const loading2 = x`
+      <svg
+        width="1.5rem"
+        height="1.5rem"
+        viewBox="0 0 50 50"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="4"
+        class="shipaid-loader"
+      >
+        <circle cx="25" cy="25" r="20" stroke-opacity="0.5" />
+        <path d="M45 25a20 20 0 0 1-40 0" stroke="currentColor">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 25 25"
+            to="360 25 25"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+    `;
+    const useGetMechanismTheme = ((_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.theme) === "get_mechanism";
+    if (useGetMechanismTheme) {
+      return this._renderGetMechanismCheckoutButton(
+        originalClasses,
+        protectionPrice,
+        cartTotal,
+        isGreenProtectionEnabled,
+        isFreeGiftEnabled,
+        loading2
+      );
+    }
+    return this._renderDefaultCheckoutButton(
+      originalClasses,
+      protectionPrice,
+      cartTotal,
+      isGreenProtectionEnabled,
+      isFreeGiftEnabled,
+      impactActive,
+      loading2
+    );
+  }
   renderPopups() {
     if (this.persistPopup) {
       this._popup = this.shouldPersistPopup();
@@ -5225,6 +5506,29 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
     } catch {
     }
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (!this._hasFinishedSetup) return;
+    const dbContactlessSelector = this._getContactlessCheckoutSelector();
+    const sessionSelector = sessionStorage.getItem("shipaidWidgetTheme");
+    if (!sessionSelector && dbContactlessSelector) {
+      sessionStorage.setItem("shipaidWidgetTheme", dbContactlessSelector);
+    }
+    if (this.useShipAidCheckout || !dbContactlessSelector) {
+      sessionStorage.removeItem("shipaidWidgetTheme");
+    }
+    if (!this.useShipAidCheckout) {
+      document.querySelectorAll('[id*="shipaid-checkout-container"]').forEach((container) => container.remove());
+    }
+    if (!this._shouldShowWidgetContent()) {
+      const selector = sessionStorage.getItem("shipaidWidgetTheme") || this.dataSelector;
+      if (selector) {
+        this.getElementsBySelector(selector).forEach((button) => {
+          button.removeAttribute("shipaid-hidden");
+        });
+      }
+    }
+  }
   async updateProtection(force = false) {
     var _a, _b, _c;
     this._cartLastUpdated = /* @__PURE__ */ new Date();
@@ -5842,35 +6146,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
         }
       </style>
       <div class="shipaid">
-        ${n(
-      this._hasFinishedSetup,
-      () => {
-        var _a, _b, _c, _d, _e;
-        const dbContactlessCheckoutSelector = (_d = (_c = (_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.widget) == null ? void 0 : _c.theme_checkout) == null ? void 0 : _d.checkoutButtonSelector;
-        const inSessionStorageCheckoutButtonSelector = sessionStorage.getItem("shipaidWidgetTheme");
-        if (!inSessionStorageCheckoutButtonSelector && dbContactlessCheckoutSelector) {
-          sessionStorage.setItem(
-            "shipaidWidgetTheme",
-            dbContactlessCheckoutSelector
-          );
-        }
-        if (this.useShipAidCheckout || !dbContactlessCheckoutSelector) {
-          sessionStorage.removeItem("shipaidWidgetTheme");
-        }
-        const configOk = this._shouldShowWidget && this.planActive && ((_e = this._store) == null ? void 0 : _e.widgetShowCart);
-        if (configOk) {
-          return inSessionStorageCheckoutButtonSelector ? this.contactlessCheckoutButtonTemplate() : this.promptTemplate();
-        }
-        if (!this.useShipAidCheckout) {
-          document.querySelectorAll('[id*="shipaid-checkout-container"]').forEach((container) => container.remove());
-        }
-        this.getElementsBySelector(
-          sessionStorage.getItem("shipaidWidgetTheme") || this.dataSelector
-        ).forEach((button) => button.removeAttribute("shipaid-hidden"));
-        return A;
-      },
-      () => sessionStorage.getItem("shipaidWidgetTheme") ? this.contactlessCheckoutButtonTemplate() : this.promptTemplate()
-    )}
+        ${this._getTemplateToRender()}
       </div>
     `;
   }