ui.shipaid.com 0.3.58 → 0.3.60

package/dist/widget.es.js

@@ -1162,6 +1162,28 @@ const ShipAidLogo = x`
     </g>
   </svg>
 `;
+const ShipAidReducedLogo = x`
+  <svg
+    version="1.0"
+    width="2rem"
+    height="2rem"
+    viewBox="0 0 500.000000 500.000000"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g
+      transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
+      fill="#0056d6"
+      stroke="none"
+    >
+      <path
+        d="M2465 4855 c-5 -2 -446 -142 -979 -312 -534 -169 -984 -317 -1000 -328 -17 -11 -41 -36 -54 -55 -24 -35 -24 -37 -18 -210 9 -274 84 -1236 170 -2176 37 -401 43 -430 103 -489 25 -24 1389 -912 1702 -1107 93 -59 125 -61 202 -15 30 18 429 275 888 572 647 418 840 547 862 578 15 21 32 62 38 90 16 83 148 1610 191 2202 11 160 21 342 23 405 2 104 0 118 -21 151 -12 21 -34 45 -49 54 -34 23 -1989 645 -2022 644 -14 0 -30 -2 -36 -4z m135 -345 c30 -11 393 -125 805 -255 413 -130 768 -242 791 -250 22 -9 54 -29 70 -46 l29 -30 -1 -182 c-1 -218 -36 -669 -135 -1747 -42 -461 -47 -488 -95 -532 -11 -9 -359 -235 -774 -503 -714 -460 -757 -486 -795 -483 -33 3 -167 85 -775 477 -404 260 -750 484 -768 498 -47 35 -70 89 -81 190 -25 219 -118 1328 -151 1781 -26 368 -26 467 0 509 10 18 29 39 42 47 13 8 374 126 803 261 429 135 812 257 850 270 75 27 95 26 185 -5z"
+      />
+      <path
+        d="M2340 3816 c-252 -140 -776 -446 -797 -465 -17 -14 -23 -31 -23 -61 0 -30 6 -47 23 -62 26 -23 775 -457 862 -499 33 -16 76 -29 95 -29 48 0 90 22 440 224 l305 176 3 -427 c1 -235 -1 -430 -5 -434 -5 -4 -161 -96 -348 -204 l-340 -196 -60 3 c-58 4 -75 12 -388 192 -251 144 -331 195 -342 217 -12 22 -15 79 -15 291 0 145 -4 268 -8 275 -13 20 -253 153 -278 153 -13 0 -28 -9 -34 -19 -17 -32 -14 -843 4 -884 12 -28 75 -68 507 -317 l494 -285 65 0 65 0 495 286 c481 278 495 287 508 324 10 30 12 167 10 616 -3 548 -4 578 -22 598 -30 33 -297 183 -317 178 -9 -3 -138 -74 -286 -160 -393 -227 -401 -230 -466 -225 -45 4 -78 18 -200 89 -144 82 -164 101 -153 137 3 9 75 56 159 105 141 81 156 87 207 87 43 0 66 -7 105 -30 28 -16 60 -30 71 -30 23 0 236 119 268 150 34 33 13 54 -157 153 -291 169 -278 167 -447 73z"
+      />
+    </g>
+  </svg>
+`;
 const ShipAidLogoText = x`
   <svg
     width="50.000000pt"
@@ -1431,13 +1453,13 @@ const BellIcon = x`
     </g>
   </svg>
 `;
-var __defProp$3 = Object.defineProperty;
-var __decorateClass$3 = (decorators, target, key, kind) => {
+var __defProp$4 = Object.defineProperty;
+var __decorateClass$4 = (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$3(target, key, result);
+  if (result) __defProp$4(target, key, result);
   return result;
 };
 const _LearnMorePopup = class _LearnMorePopup extends s$1 {
@@ -1515,7 +1537,7 @@ const _LearnMorePopup = class _LearnMorePopup extends s$1 {
 };
 _LearnMorePopup.styles = styles$2;
 let LearnMorePopup = _LearnMorePopup;
-__decorateClass$3([
+__decorateClass$4([
   n$7({ type: Boolean, attribute: true })
 ], LearnMorePopup.prototype, "active");
 if (!customElements.get("shipaid-popup-learn-more")) {
@@ -1669,13 +1691,13 @@ const styles$1 = i$2`
     z-index: -1;
   }
 `;
-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 _ConfirmationPopup = class _ConfirmationPopup extends s$1 {
@@ -1721,19 +1743,19 @@ const _ConfirmationPopup = class _ConfirmationPopup extends s$1 {
 };
 _ConfirmationPopup.styles = styles$1;
 let ConfirmationPopup = _ConfirmationPopup;
-__decorateClass$2([
+__decorateClass$3([
   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 __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 _ShipAidCartConfirmation = class _ShipAidCartConfirmation extends s$1 {
@@ -1928,27 +1950,101 @@ _ShipAidCartConfirmation.styles = i$2`
     }
   `;
 let ShipAidCartConfirmation = _ShipAidCartConfirmation;
-__decorateClass$1([
+__decorateClass$2([
   n$7({ type: Boolean, attribute: true })
 ], ShipAidCartConfirmation.prototype, "open");
-__decorateClass$1([
+__decorateClass$2([
   n$7({ type: String, attribute: true })
 ], ShipAidCartConfirmation.prototype, "product");
-__decorateClass$1([
+__decorateClass$2([
   n$7({ type: String, attribute: true })
 ], ShipAidCartConfirmation.prototype, "imageUrl");
-__decorateClass$1([
+__decorateClass$2([
   n$7({ type: String, attribute: true })
 ], ShipAidCartConfirmation.prototype, "priceOfVariant");
-__decorateClass$1([
+__decorateClass$2([
   n$7({ type: String, attribute: true })
 ], ShipAidCartConfirmation.prototype, "quantity");
-__decorateClass$1([
+__decorateClass$2([
   n$7({ type: Boolean })
 ], ShipAidCartConfirmation.prototype, "dontShowAgain");
 if (!customElements.get("shipaid-cart-confirmation")) {
   customElements.define("shipaid-cart-confirmation", ShipAidCartConfirmation);
 }
+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;
+};
+class CheckoutPackageProtection extends s$1 {
+  constructor() {
+    super(...arguments);
+    this.protectionPrice = 0;
+    this.checkoutTotal = 0;
+    this.logo = "";
+    this.originalClasses = "";
+  }
+  createRenderRoot() {
+    return this;
+  }
+  handleAbout() {
+    this.dispatchEvent(new Event("shipaid-about"));
+  }
+  handleCheckoutWithProtection() {
+    this.dispatchEvent(new Event("shipaid-add-protection"));
+  }
+  handleCheckoutWithoutProtection() {
+    this.dispatchEvent(new Event("shipaid-remove-protection"));
+  }
+  render() {
+    return x`
+      <div class="container">
+        <div class="protection-info">
+          <div class="protection-text">
+            ${this.logo}
+             <p><strong>Checkout+</strong> ShipAid Delivery Guarantee - ${this.protectionPrice}</p>
+          </div>
+          <div
+            class="help-icon"
+            @click=${this.handleAbout}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="100%" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+              <path d="M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4">
+              </path>
+            </svg>
+          </div>
+        </div>
+
+        <button id="shipaid-checkout-button" class="${this.originalClasses}" @click=${this.handleCheckoutWithProtection}>
+          CHECKOUT+ ${this.checkoutTotal}
+        </button>
+
+        <a href="#" class="continue-link" @click=${this.handleCheckoutWithoutProtection}>
+          Continue without delivery guarantee
+        </a>
+      </div>
+    `;
+  }
+}
+__decorateClass$1([
+  n$7()
+], CheckoutPackageProtection.prototype, "protectionPrice");
+__decorateClass$1([
+  n$7()
+], CheckoutPackageProtection.prototype, "checkoutTotal");
+__decorateClass$1([
+  n$7()
+], CheckoutPackageProtection.prototype, "logo");
+__decorateClass$1([
+  n$7({ type: String })
+], CheckoutPackageProtection.prototype, "originalClasses");
+if (!customElements.get("checkout-package-protection")) {
+  customElements.define("checkout-package-protection", CheckoutPackageProtection);
+}
 const loading = "Loading ShipAid Widget...";
 const title = "Delivery Guarantee";
 const description = "in case of Loss, Damage or Theft";
@@ -2277,6 +2373,8 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
     this.currency = void 0;
     this.customerId = void 0;
     this.supportSubscriptions = false;
+    this.dataSelector = "";
+    this.useShipAidCheckout = false;
     this._apiEndpoint = "/apps/shipaid";
     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;
@@ -2574,24 +2672,26 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
   }
   /** Fetch current product from the Shopify ajax API */
   async _fetchProduct() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     try {
       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 image { src } handle variants(first: 1) { edges { node { id title price { amount } } } } } } } } }",
+          "query product($handle: String!) { product(handle: $handle) { id title images(first: 1) {edges { node { id url altText } } } handle variants(first: 100) { edges { node { id title price { amount } } } } } }",
           {
-            query: "ShipAid Delivery Guarantee",
-            first: 1
+            handle: PRODUCT_HANDLE
           }
         );
-        if ((_b = (_a = result == null ? void 0 : result.search) == null ? void 0 : _a.edges) == null ? void 0 : _b.length) {
-          const protectionProductItem = result.search.edges[0];
+        if (result == null ? void 0 : result.product) {
+          const protectionProductItem = result.product;
           product = {
-            id: protectionProductItem.node.id,
-            title: protectionProductItem.node.title,
-            image: protectionProductItem.node.image,
-            variants: protectionProductItem.node.variants.edges.map((v2) => ({
+            id: protectionProductItem.id,
+            title: protectionProductItem.title,
+            image: {
+              id: (_d = (_c = (_b = (_a = protectionProductItem == null ? void 0 : protectionProductItem.images) == null ? void 0 : _a.edges) == null ? void 0 : _b[0]) == null ? void 0 : _c.node) == null ? void 0 : _d.id,
+              src: (_h = (_g = (_f = (_e = protectionProductItem == null ? void 0 : protectionProductItem.images) == null ? void 0 : _e.edges) == null ? void 0 : _f[0]) == null ? void 0 : _g.node) == null ? void 0 : _h.url
+            },
+            variants: protectionProductItem.variants.edges.map((v2) => ({
               id: v2.node.id,
               price: v2.node.price.amount
             }))
@@ -2846,6 +2946,289 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       ></shipaid-cart-confirmation>
     `;
   }
+  contactlessCheckoutButtonTemplate() {
+    if (!document.getElementById("shipaid-styles")) {
+      const style = document.createElement("style");
+      style.id = "shipaid-styles";
+      style.textContent = `
+        [shipaid-hidden] {
+          display: none !important;
+        }
+        shipaid-widget {
+          width: 100%;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    const originalCheckoutButtons = document.querySelectorAll(`${sessionStorage.getItem("shipaidWidgetTheme")}:not(#shipaid-checkout-button)`);
+    if (!originalCheckoutButtons.length) return;
+    originalCheckoutButtons.forEach((originalCheckoutButton, index) => {
+      var _a, _b;
+      const containerId = `shipaid-checkout-container-${index}`;
+      originalCheckoutButton.setAttribute("shipaid-hidden", "");
+      const originalClasses = originalCheckoutButton.className;
+      let container = document.getElementById(containerId);
+      if (!container) {
+        container = document.createElement("div");
+        container.id = containerId;
+        container.style.width = "100%";
+        originalCheckoutButton.insertAdjacentElement("afterend", container);
+      }
+      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 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>
+      `;
+      D(
+        x`
+          <style>
+            :host {
+              display: inline-block;
+              font-family: Arial, sans-serif;
+              width: 100%;
+            }
+            .container button {
+              width: 100%;
+            }
+            .shipaid-loader {
+              margin-left: 0.5rem;
+            }
+            .protection-info {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 14px;
+              margin-bottom: 1rem;
+            }
+            .protection-text {
+              font-weight: 500;
+              display: flex;
+              align-items: center;
+              gap: 0.5rem;
+            }
+           
+            .protection-text p {
+              font-size: 1.3rem;
+            }
+            .help-icon {
+              cursor: pointer;
+              opacity: 0.7;
+              margin: 0rem 0 0.2rem 0.5rem;
+              display: flex;
+              align-items: center;
+            }
+            .checkout-button {
+              background-color: #000;
+              color: #fff;
+              border: none;
+              padding: 12px;
+              font-size: 16px;
+              font-weight: bold;
+              cursor: pointer;
+              text-transform: uppercase;
+              width: 100%;
+            }
+            .checkout-button:hover {
+              opacity: 0.9;
+            }
+            .continue-link {
+              display: block;
+              margin-top: 12px;
+              text-align: center;
+              font-size: 14px;
+              text-decoration: none;
+              color: #555;
+            }
+            .continue-link:hover {
+              text-decoration: underline;
+            }
+            .protection-value {
+              min-height: 20px;
+              display: flex;
+              align-items: center;
+            }
+          </style>
+
+            <checkout-package-protection
+              .protectionPrice=${protectionPrice ? this._currencyFormat(protectionPrice) : loading2}
+              .checkoutTotal=${cartTotal ? this._currencyFormat(cartTotal) : loading2}
+              .logo=${ShipAidReducedLogo}
+              .originalClasses=${originalClasses}
+              @shipaid-about=${() => {
+          this._popup = "learn-more";
+          if (this.persistPopup) {
+            this.setPopupKey();
+          }
+        }}
+              @shipaid-add-protection=${() => {
+          var _a2, _b2;
+          sessionStorage.setItem("shipaid_variant", JSON.stringify((_a2 = this._protectionVariant) == null ? void 0 : _a2.id));
+          window.location.href = `/checkout?attributes[_shipaid-internal]=1&updates[${(_b2 = this._protectionVariant) == null ? void 0 : _b2.id}]=1`;
+        }}
+              @shipaid-remove-protection=${async () => {
+          await this.removeProtection();
+          window.location.href = "/checkout";
+        }}
+            ></checkout-package-protection>
+          `,
+        container
+      );
+    });
+    return A;
+  }
+  createRenderRoot() {
+    return this.useShipAidCheckout ? this : super.createRenderRoot();
+  }
+  checkoutButtonTemplate() {
+    var _a, _b;
+    if (!document.getElementById("shipaid-styles")) {
+      const style = document.createElement("style");
+      style.id = "shipaid-styles";
+      style.textContent = `
+        [shipaid-hidden] {
+          display: none !important;
+        }
+        shipaid-widget {
+          width: 100%;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    const originalCheckoutButton = document.querySelector(`${this.dataSelector}:not(#shipaid-checkout-button)`);
+    if (!originalCheckoutButton) return;
+    const originalClasses = originalCheckoutButton.className;
+    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;
+    const cartTotal = protectionPrice + cartPrice / 100;
+    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 x`
+      <style>
+        :host {
+          display: inline-block;
+          font-family: Arial, sans-serif;
+          width: 100%;
+        }
+        
+        .container button {
+          width: 100%;
+        }
+        
+        .shipaid-loader {
+          margin-left: 0.5rem;
+        }
+        
+        .protection-info {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 14px;
+          margin-bottom: 1rem;
+        }
+        
+        .protection-text {
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        
+        .help-icon {
+          cursor: pointer;
+          opacity: 0.7;
+          margin: 0rem 0 0.2rem 0.5rem;
+          display: flex;
+          align-items: center;
+        }
+        
+        .checkout-button {
+          background-color: #000;
+          color: #fff;
+          border: none;
+          padding: 12px;
+          font-size: 16px;
+          font-weight: bold;
+          cursor: pointer;
+          text-transform: uppercase;
+          width: 100%;
+        }
+        
+        .checkout-button:hover {
+          opacity: 0.9;
+        }
+        
+        .continue-link {
+          display: block;
+          margin-top: 12px;
+          text-align: center;
+          font-size: 14px;
+          text-decoration: none;
+          color: #555;
+        }
+        
+        .continue-link:hover {
+          text-decoration: underline;
+        }
+        
+        .protection-value {
+          min-height: 20px;
+          display: flex;
+          align-items: center;
+        }
+      </style>
+      
+      <div class="container">
+        <div class="protection-info">
+          <div class="protection-text">
+            ${ShipAidReducedLogo}
+            <strong>Checkout+</strong>
+            <div class="protection-value">
+              <slot name="title">ShipAid Delivery Guarantee</slot>
+              - ${protectionPrice ? this._currencyFormat(protectionPrice) : loading2}
+            </div>
+          </div>
+          <div class="help-icon" @click=${() => {
+      this._popup = "learn-more";
+      if (this.persistPopup) {
+        this.setPopupKey();
+      }
+    }}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="100%" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+              <path d="M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4">
+              </path>
+            </svg>
+          </div>
+        </div>
+        
+        <button id="shipaid-checkout-button" class="${originalClasses}" @click=${() => {
+      var _a2, _b2;
+      sessionStorage.setItem("shipaid_variant", JSON.stringify((_a2 = this._protectionVariant) == null ? void 0 : _a2.id));
+      window.location.href = `/checkout?attributes[_shipaid-internal]=1&updates[${(_b2 = this._protectionVariant) == null ? void 0 : _b2.id}]=1`;
+    }}>
+         <slot name="checkout-button-text">CHECKOUT+</slot> ${cartTotal ? this._currencyFormat(cartTotal) : loading2}
+        </button>
+        
+        <a href="#" class="continue-link" @click=${async () => {
+      await this.removeProtection();
+      window.location.href = "/checkout";
+    }}>
+          <slot name="link-continue">Continue without delivery guarantee</slot>
+        </a>
+      </div>
+    `;
+  }
   renderPopups() {
     if (this.persistPopup) {
       this._popup = this.shouldPersistPopup();
@@ -2863,6 +3246,9 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
   }
   promptTemplate() {
     var _a, _b, _c;
+    if (this.useShipAidCheckout && this.dataSelector) {
+      return this.checkoutButtonTemplate();
+    }
     const { useToggle, useCheckbox, leftCheckbox } = ((_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.widget) || { useToggle: false, useCheckbox: false, leftCheckbox: false };
     return x`
       <div class="shipaid-prompt">
@@ -3222,6 +3608,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
           --shipaid-font-regular: 400;
           --shipaid-font-heavy: 700;
           --shipaid-prompt-badge: #f2f7ff;
+           width: 100%;
         }
       
         * {
@@ -3472,19 +3859,29 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
         }
       </style>
       <div class="shipaid">
-        ${n(
+  ${n(
       this._hasFinishedSetup,
       () => {
-        var _a;
-        return n(
-          this._shouldShowWidget && this.planActive && ((_a = this._store) == null ? void 0 : _a.widgetShowCart),
-          () => this.promptTemplate(),
-          () => A
-        );
+        var _a, _b, _c, _d, _e, _f;
+        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();
+        }
+        console.log("Showing nothing ==========================>", this._shouldShowWidget, this.planActive, (_f = this._store) == null ? void 0 : _f.widgetShowCart);
+        return A;
       },
-      () => this.promptTemplate()
+      () => sessionStorage.getItem("shipaidWidgetTheme") ? this.contactlessCheckoutButtonTemplate() : this.promptTemplate()
     )}
-      </div>
+</div>
+
     `;
   }
 };
@@ -3538,6 +3935,12 @@ __decorateClass([
 __decorateClass([
   n$7({ type: Boolean, attribute: true })
 ], ShipAidWidget.prototype, "supportSubscriptions");
+__decorateClass([
+  n$7({ type: String, attribute: "data-selector" })
+], ShipAidWidget.prototype, "dataSelector");
+__decorateClass([
+  n$7({ type: Boolean, attribute: "use-shipaid-checkout" })
+], ShipAidWidget.prototype, "useShipAidCheckout");
 __decorateClass([
   t$3()
 ], ShipAidWidget.prototype, "_storeDomain");