ui.shipaid.com 0.3.100 → 0.3.102

package/dist/widget.es.js

@@ -1049,8 +1049,18 @@ const styles$2 = i$2`
     object-fit: contain;
   }
 
-  .shipaid-popup .popup-disclaimer-subtitle {
-    display: inline-flex;
+  
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-enable{
+    display: var(--shipaid-subtitle-enable, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-monitor{
+    display: var(--shipaid-subtitle-monitor, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-notify{
+    display: var(--shipaid-subtitle-notify, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-resolution{
+    display: var(--shipaid-subtitle-resolution, inline-flex);
   }
 
   .shipaid-popup .popup-disclaimer-subtitle p {
@@ -1488,19 +1498,19 @@ const _LearnMorePopup = class _LearnMorePopup extends s$1 {
         </button>
         <div class="popup-logo">${ShipAidLogoPopUp}</div>
         <p class="popup-title">${translate("learn-more-popup.title")}</p>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-enable">
           <div class="popup-icon">${CheckmarkRibbon}</div>
           <p>${translate("learn-more-popup.disclaimer.subtitle-enable")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-monitor">
           <div class="popup-icon">${MapIcon}</div>
           <p>${translate("learn-more-popup.disclaimer.subtitle-monitor")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-notify">
           <div class="popup-icon-b">${BellIcon}</div>
           <p>${translate("learn-more-popup.disclaimer.subtitle-notify")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-resolution">
           <div class="popup-icon-bell">${BoxIcon}</div>
               <p>
                 ${translate("learn-more-popup.disclaimer.subtitle-resolution")}
@@ -3171,7 +3181,6 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          font-size: 14px;
           margin-bottom: 1rem;
         }
 
@@ -3180,7 +3189,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
           display: flex;
           align-items: center;
           gap: 0.5rem;
-          font-size: 1.3rem;
+          font-size: clamp(0.8rem, 1vw + 0.6rem, 1.4rem);
         }
 
         .protection-text p {
@@ -3294,7 +3303,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
     }
   }
   promptTemplate() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (this.useShipAidCheckout && this.dataSelector) {
       return this.checkoutButtonTemplate();
     }
@@ -3319,16 +3328,32 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
     )}
           </div>
           <div class="prompt-product-details">
-            <p class="prompt-product-details-title">
-              <slot name="title">${translate("title")}</slot>
-            </p>
+            <div class="heading-container">
+              <p class="prompt-product-details-title">
+                <slot name="title">${translate("title")}</slot>
+              </p>
+              ${n(
+      !((_c = this._store) == null ? void 0 : _c.useCustomApp),
+      () => x`<button
+                  class="prompt-information-button"
+                  @click=${() => {
+        this._popup = "learn-more";
+        if (this.persistPopup) {
+          this.setPopupKey();
+        }
+      }}
+                >
+                  i
+                </button>`
+    )}
+            </div>
             <p class="prompt-product-details-description">
               <slot name="subtitle">${translate("description")}</slot>
             </p>
           </div>
           <div class="prompt-product-actions">
             <p class="prompt-product-actions-price">
-              ${((_c = this._protectionVariant) == null ? void 0 : _c.price) && this._currencyFormat(this._protectionVariant.price)}
+              ${((_d = this._protectionVariant) == null ? void 0 : _d.price) && this._currencyFormat(this._protectionVariant.price)}
             </p>
             ${!(useToggle || useCheckbox) && !this.defaultToggleButton ? n(
       !this.disableActions,
@@ -3356,31 +3381,36 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
       this._state.error,
       () => x`<p class="error">${this._state.error}</p>`
     )}
-        <div class="prompt-footer">
-          <a
-            class="prompt-footer-badge"
-            @click=${() => {
-      this._popup = "learn-more";
-      if (this.persistPopup) {
-        this.setPopupKey();
-      }
-    }}
-          >
-            <span>${translate("footer.button")}</span>
-            ${ShipAidLogoText}
-            <button
-              class="prompt-footer-about"
-              @click=${() => {
-      this._popup = "learn-more";
-      if (this.persistPopup) {
-        this.setPopupKey();
-      }
-    }}
-            >
-              i
-            </button>
-          </a>
-        </div>
+        ${n(
+      (_e = this._store) == null ? void 0 : _e.useCustomApp,
+      () => x`
+          <div class="prompt-footer">
+              <a
+                class="prompt-footer-badge"
+                @click=${() => {
+        this._popup = "learn-more";
+        if (this.persistPopup) {
+          this.setPopupKey();
+        }
+      }}
+              >
+                <span>${translate("footer.button")}</span>
+                ${ShipAidLogoText}
+                <button
+                  class="prompt-footer-about"
+                  @click=${() => {
+        this._popup = "learn-more";
+        if (this.persistPopup) {
+          this.setPopupKey();
+        }
+      }}
+                >
+                  i
+                </button>
+              </a>
+            </div>
+        `
+    )}
       </div>
     `;
   }
@@ -3765,6 +3795,17 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
           padding: 6px 0;
           text-align: right;
         }
+        .shipaid-prompt .prompt-information-button {
+          color: var(--shipaid-text);
+          cursor: pointer;
+          font-size: var(--shipaid-prompt-prompt-information-button-size, 10px);
+          background-color: transparent;
+          cursor: pointer;
+          border: 1px solid var(--shipaid-text);
+          border-radius: 10px;
+          margin-left: 0.5rem;
+        }
+
         .shipaid-prompt .prompt-footer {
           margin-top: var(--shipaid-prompt-footer-topMargin, 0px);
           margin-left: var(--shipaid-prompt-footer-leftMargin, 0px);
@@ -3803,6 +3844,16 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
           height:var(--shipaid-footer-badge-logo-height, 9px);
         }
 
+        .shipaid-prompt .heading-container{
+          display: var(--shipaid-prompt-heading-container-display, flex);
+          justify-content: var(--shipaid-prompt-heading-container-justify-content, start);
+          align-items: var(--shipaid-prompt-heading-container-align-items, center);
+        }
+
+        .shipaid-prompt .heading-container > p{
+          margin: var(--shipaid-prompt-heading-container-gap-margin, 0px 10px 0px 0px);
+        }
+
         .shipaid-checkbox {
           display: inline-block;
           position: relative;

package/dist/widget.iife.js

@@ -198,8 +198,18 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
     object-fit: contain;
   }
 
-  .shipaid-popup .popup-disclaimer-subtitle {
-    display: inline-flex;
+  
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-enable{
+    display: var(--shipaid-subtitle-enable, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-monitor{
+    display: var(--shipaid-subtitle-monitor, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-notify{
+    display: var(--shipaid-subtitle-notify, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-resolution{
+    display: var(--shipaid-subtitle-resolution, inline-flex);
   }
 
   .shipaid-popup .popup-disclaimer-subtitle p {
@@ -608,19 +618,19 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
         </button>
         <div class="popup-logo">${Rt}</div>
         <p class="popup-title">${Lt("learn-more-popup.title")}</p>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-enable">
           <div class="popup-icon">${Bt}</div>
           <p>${Lt("learn-more-popup.disclaimer.subtitle-enable")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-monitor">
           <div class="popup-icon">${Ut}</div>
           <p>${Lt("learn-more-popup.disclaimer.subtitle-monitor")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-notify">
           <div class="popup-icon-b">${Ft}</div>
           <p>${Lt("learn-more-popup.disclaimer.subtitle-notify")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-resolution">
           <div class="popup-icon-bell">${Dt}</div>
               <p>
                 ${Lt("learn-more-popup.disclaimer.subtitle-resolution")}
@@ -1309,7 +1319,6 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           display: flex;
           align-items: center;
           justify-content: space-between;
-          font-size: 14px;
           margin-bottom: 1rem;
         }
 
@@ -1318,7 +1327,7 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           display: flex;
           align-items: center;
           gap: 0.5rem;
-          font-size: 1.3rem;
+          font-size: clamp(0.8rem, 1vw + 0.6rem, 1.4rem);
         }
 
         .protection-text p {
@@ -1403,10 +1412,10 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           <slot name="link-continue">${Lt("checkout-plus.continue")}</slot>
         </a>
       </div>
-    `}renderPopups(){switch(this.persistPopup&&(this._popup=this.shouldPersistPopup()),this._popup){case"confirmation":return this.confirmationPopupTemplate();case"learn-more":return this.learnMorePopupTemplate();default:return null}}promptTemplate(){var t,e,i;if(this.useShipAidCheckout&&this.dataSelector)return this.checkoutButtonTemplate();const{useToggle:o,useCheckbox:r,leftCheckbox:n}=(null==(e=null==(t=this._store)?void 0:t.widgetConfigurations)?void 0:e.widget)||{useToggle:!1,useCheckbox:!1,leftCheckbox:!1};return F`
+    `}renderPopups(){switch(this.persistPopup&&(this._popup=this.shouldPersistPopup()),this._popup){case"confirmation":return this.confirmationPopupTemplate();case"learn-more":return this.learnMorePopupTemplate();default:return null}}promptTemplate(){var t,e,i,o,r;if(this.useShipAidCheckout&&this.dataSelector)return this.checkoutButtonTemplate();const{useToggle:n,useCheckbox:a,leftCheckbox:s}=(null==(e=null==(t=this._store)?void 0:t.widgetConfigurations)?void 0:e.widget)||{useToggle:!1,useCheckbox:!1,leftCheckbox:!1};return F`
       <div class="shipaid-prompt">
       <div class="prompt-product">
-        ${Tt(!this.disableActions&&n,(()=>F`
+        ${Tt(!this.disableActions&&s,(()=>F`
           <label class="shipaid-checkbox">
             ${this._hasProtectionInCart||!this._hasFinishedSetup?F`<input type="checkbox" checked @click=${this._updateProtection} ?disabled=${this._state.loading}>`:F`<input type="checkbox" @click=${this._updateProtection} ?disabled=${this._state.loading}>`}
             <span class="shipaid-checkMark left"></span>
@@ -1416,21 +1425,29 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
             ${Tt(this._hasProtectionInCart,(()=>Nt),(()=>jt))}
           </div>
           <div class="prompt-product-details">
-            <p class="prompt-product-details-title">
-              <slot name="title">${Lt("title")}</slot>
-            </p>
+            <div class="heading-container">
+              <p class="prompt-product-details-title">
+                <slot name="title">${Lt("title")}</slot>
+              </p>
+              ${Tt(!(null==(i=this._store)?void 0:i.useCustomApp),(()=>F`<button
+                  class="prompt-information-button"
+                  @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
+                >
+                  i
+                </button>`))}
+            </div>
             <p class="prompt-product-details-description">
               <slot name="subtitle">${Lt("description")}</slot>
             </p>
           </div>
           <div class="prompt-product-actions">
             <p class="prompt-product-actions-price">
-              ${(null==(i=this._protectionVariant)?void 0:i.price)&&this._currencyFormat(this._protectionVariant.price)}
+              ${(null==(o=this._protectionVariant)?void 0:o.price)&&this._currencyFormat(this._protectionVariant.price)}
             </p>
-            ${o||r||this.defaultToggleButton?Tt(!this.disableActions&&!n,(()=>F`
-                  <label class="shipaid-${o?"toggle":r?"checkbox":""}">
+            ${n||a||this.defaultToggleButton?Tt(!this.disableActions&&!s,(()=>F`
+                  <label class="shipaid-${n?"toggle":a?"checkbox":""}">
                     ${this._hasProtectionInCart||!this._hasFinishedSetup?F`<input type="checkbox" checked @click=${this._updateProtection} ?disabled=${this._state.loading}>`:F`<input type="checkbox" @click=${this._updateProtection} ?disabled=${this._state.loading}>`}
-                    <span class="shipaid-${o?"slider":r?"checkMark":""}"></span>
+                    <span class="shipaid-${n?"slider":a?"checkMark":""}"></span>
                   </label>
                 `)):Tt(!this.disableActions,(()=>F`
                   <button
@@ -1444,21 +1461,23 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           </div>
         </div>
         ${Tt(this._state.error,(()=>F`<p class="error">${this._state.error}</p>`))}
-        <div class="prompt-footer">
-          <a
-            class="prompt-footer-badge"
-            @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
-          >
-            <span>${Lt("footer.button")}</span>
-            ${Vt}
-            <button
-              class="prompt-footer-about"
-              @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
-            >
-              i
-            </button>
-          </a>
-        </div>
+        ${Tt(null==(r=this._store)?void 0:r.useCustomApp,(()=>F`
+          <div class="prompt-footer">
+              <a
+                class="prompt-footer-badge"
+                @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
+              >
+                <span>${Lt("footer.button")}</span>
+                ${Vt}
+                <button
+                  class="prompt-footer-about"
+                  @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
+                >
+                  i
+                </button>
+              </a>
+            </div>
+        `))}
       </div>
     `}async connectedCallback(){super.connectedCallback(),await async function(t,e=vt){const i=await e.loader(t,e);e.translationCache={},bt(t,i,e)}(this.lang),this.hasLoadedStrings=!0,this.fetchInterceptorCleanup=function(t){const e=window.fetch;let i=!0;const o=async(o,r)=>{const n=e(o,r);if(i)try{await t([o,r],n)}catch(a){console.warn(a)}return await n};return window.fetch=o,()=>{window.fetch===o?window.fetch=e:i=!1}}((async(t,e)=>{var i,o,r,n;if(null==(o=null==(i=t[1])?void 0:i.headers)?void 0:o["X-ShipAid"])return;if(!t[0].startsWith("/cart/change")&&!t[0].startsWith("/cart/update"))return;const a=(null==(n=null==(r=this._store)?void 0:r.widgetConfigurations)?void 0:n.checkoutButtonSelector)||'button[type="submit"][name="checkout"][form="cart"]',s=document.querySelector(a);if(console.log("q",s),s){s.setAttribute("disabled","true"),console.debug("button","t");try{await e,await this.updateCart(),await this.updateProtection()}finally{s.removeAttribute("disabled"),console.debug("button","f")}}}))}disconnectedCallback(){var t;super.disconnectedCallback(),null==(t=this.fetchInterceptorCleanup)||t.call(this)}async updateProtection(){var t,e,i,o;if(this._cartLastUpdated=new Date,!(null==(t=this._cart)?void 0:t.items))return;const r=null==(e=this._cart.items)?void 0:e.findIndex((t=>{var e,i;return null==(i=null==(e=this._protectionProduct)?void 0:e.variants)?void 0:i.some((e=>e.id===t.variant_id))})),n=null==(i=this._cart)?void 0:i.items[r];if(this._hasProtectionInCart=!!n,!this._store)return;const a=await this.calculateProtectionTotal(this._cart);if(this._cart.item_count>0&&n&&(this._cart.total_price===(null==n?void 0:n.final_line_price)||!a)){const t=await this.updateCartProtectionVariant(0,n);return sessionStorage.removeItem(_e),await this._handleRefresh(t)}const s=this._findProtectionVariant(a);if(a?(this._protectionVariant=s,this._shouldShowWidget=!0):this._protectionVariant={id:0,price:"0"},!(null==s?void 0:s.id))return this._shouldShowWidget=!1,void ye("No matching protection variant found.");if(!(null==(o=this._protectionVariant)?void 0:o.id))return void(this._shouldShowWidget=!1);if(this.useShipAidCheckout&&this.supportSubscriptions&&(this._sellingPlanId=await this.getSubscription(this._cart)),!n)return;if(this.supportSubscriptions&&!this.useShipAidCheckout){const t=this._cart.items.find((t=>{var e;return t.id!==(null==(e=this._protectionVariant)?void 0:e.id)&&!!(null==t?void 0:t.selling_plan_allocation)}));let e=!0;if(!t&&(null==n?void 0:n.selling_plan_allocation)?this._sellingPlanId=null:t&&!(null==n?void 0:n.selling_plan_allocation)?this._sellingPlanId=await this.getSubscription(this._cart):e=!1,e){const t=await this.updateCartProtectionVariant(1,n);await this._handleRefresh(t)}}if(s.id===n.variant_id){if(this._protectionCartItem={...n,index:r,position:r+1},1===n.quantity)return;const t=await this.updateCartProtectionVariant(1,n);return this._handleRefreshCart(),await this._handleRefresh(t)}const d={updates:{[n.variant_id]:0,[s.id]:1}},p=await this._fetch.post("/cart/update.js",d);await this._handleRefresh(p)}render(){return Mt(this,(async()=>{var t,e,i,o,r,n;const a=document.createElement("link");a.setAttribute("href","https://fonts.googleapis.com/css2?family=Lato&display=swap"),a.setAttribute("rel","stylesheet"),document.head.appendChild(a);try{const[t,e,i]=await Promise.all([this._fetchShipAidData(),this._fetchCart(),this._fetchProduct()]);this._store=t,this._cart=e,this._protectionProduct=i}catch(s){return ye(s.message),this._hasFinishedSetup=!0,void(this._shouldShowWidget=!1)}return this.planActive?(null==(e=null==(t=this._store)?void 0:t.protectionSettings)?void 0:e.protectionType)?this._protectionProduct?(this._hasFinishedSetup=!0,this._dispatchEvent(ue.LOADED,this._store),setTimeout((async()=>{var t,e,i,o;(null==(t=this._store)?void 0:t.widgetAutoOptIn)&&(null==(e=this._cart)?void 0:e.item_count)&&(this.customerId&&this._store.excludedCustomersIdsAutoOptIn&&(null==(i=this._store.excludedCustomersIdsAutoOptIn)?void 0:i.length)&&this._store.excludedCustomersIdsAutoOptIn.includes(`gid://shopify/Customer/${this.customerId}`)||sessionStorage.getItem(_e)||!this._hasProtectionInCart&&(null==(o=this._cart)?void 0:o.item_count)&&this._store.widgetShowCart&&(await this.addProtection(),sessionStorage.setItem(_e,JSON.stringify({loaded:!0}))))}),500),void(this.disablePolling||(setInterval((async()=>{const t=this._cartLastUpdated;t&&(new Date).getTime()-t.getTime()<this.pollingInterval||await this.updateCart()}),this.pollingInterval),(null==(i=this._store)?void 0:i.widgetPollProtection)&&!this.intervalId&&(this.intervalId=setInterval((async()=>{await this.attemptAddProtection()}),400),localStorage.setItem(`polling-shipaid-protection_${this.intervalId}`,`${this.intervalId}`)),(null==(n=null==(r=null==(o=this._store)?void 0:o.widgetConfigurations)?void 0:r.widget)?void 0:n.pollVariantsCheck)&&setInterval((async()=>{await this.handleMultipleProtectionVariants()}),400)))):(be("No protection settings product for this store - skipping setup."),this._hasFinishedSetup=!0,void(this._shouldShowWidget=!1)):(be("No protection settings for this store - skipping setup."),this._hasFinishedSetup=!0,void(this._shouldShowWidget=!1)):(be("No plan is active for this store - skipping setup."),this._hasFinishedSetup=!0,void(this._shouldShowWidget=!1))}),[]),Mt(this,(async()=>{await this.updateProtection()}),[this._store,this._cart]),Mt(this,(async()=>{dt(this.renderPopups(),document.body)}),[this._popup]),F`
       <style>
@@ -1589,6 +1608,17 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           padding: 6px 0;
           text-align: right;
         }
+        .shipaid-prompt .prompt-information-button {
+          color: var(--shipaid-text);
+          cursor: pointer;
+          font-size: var(--shipaid-prompt-prompt-information-button-size, 10px);
+          background-color: transparent;
+          cursor: pointer;
+          border: 1px solid var(--shipaid-text);
+          border-radius: 10px;
+          margin-left: 0.5rem;
+        }
+
         .shipaid-prompt .prompt-footer {
           margin-top: var(--shipaid-prompt-footer-topMargin, 0px);
           margin-left: var(--shipaid-prompt-footer-leftMargin, 0px);
@@ -1627,6 +1657,16 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           height:var(--shipaid-footer-badge-logo-height, 9px);
         }
 
+        .shipaid-prompt .heading-container{
+          display: var(--shipaid-prompt-heading-container-display, flex);
+          justify-content: var(--shipaid-prompt-heading-container-justify-content, start);
+          align-items: var(--shipaid-prompt-heading-container-align-items, center);
+        }
+
+        .shipaid-prompt .heading-container > p{
+          margin: var(--shipaid-prompt-heading-container-gap-margin, 0px 10px 0px 0px);
+        }
+
         .shipaid-checkbox {
           display: inline-block;
           position: relative;

package/dist/widget.umd.js

@@ -198,8 +198,18 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
     object-fit: contain;
   }
 
-  .shipaid-popup .popup-disclaimer-subtitle {
-    display: inline-flex;
+  
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-enable{
+    display: var(--shipaid-subtitle-enable, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-monitor{
+    display: var(--shipaid-subtitle-monitor, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-notify{
+    display: var(--shipaid-subtitle-notify, inline-flex);
+  }
+  .shipaid-popup .popup-disclaimer-subtitle.subtitle-resolution{
+    display: var(--shipaid-subtitle-resolution, inline-flex);
   }
 
   .shipaid-popup .popup-disclaimer-subtitle p {
@@ -608,19 +618,19 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
         </button>
         <div class="popup-logo">${Rt}</div>
         <p class="popup-title">${Lt("learn-more-popup.title")}</p>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-enable">
           <div class="popup-icon">${Bt}</div>
           <p>${Lt("learn-more-popup.disclaimer.subtitle-enable")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-monitor">
           <div class="popup-icon">${Ut}</div>
           <p>${Lt("learn-more-popup.disclaimer.subtitle-monitor")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-notify">
           <div class="popup-icon-b">${Ft}</div>
           <p>${Lt("learn-more-popup.disclaimer.subtitle-notify")}</p>
         </div>
-        <div class="popup-disclaimer-subtitle">
+        <div class="popup-disclaimer-subtitle subtitle-resolution">
           <div class="popup-icon-bell">${Dt}</div>
               <p>
                 ${Lt("learn-more-popup.disclaimer.subtitle-resolution")}
@@ -1309,7 +1319,6 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           display: flex;
           align-items: center;
           justify-content: space-between;
-          font-size: 14px;
           margin-bottom: 1rem;
         }
 
@@ -1318,7 +1327,7 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           display: flex;
           align-items: center;
           gap: 0.5rem;
-          font-size: 1.3rem;
+          font-size: clamp(0.8rem, 1vw + 0.6rem, 1.4rem);
         }
 
         .protection-text p {
@@ -1403,10 +1412,10 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           <slot name="link-continue">${Lt("checkout-plus.continue")}</slot>
         </a>
       </div>
-    `}renderPopups(){switch(this.persistPopup&&(this._popup=this.shouldPersistPopup()),this._popup){case"confirmation":return this.confirmationPopupTemplate();case"learn-more":return this.learnMorePopupTemplate();default:return null}}promptTemplate(){var t,e,i;if(this.useShipAidCheckout&&this.dataSelector)return this.checkoutButtonTemplate();const{useToggle:o,useCheckbox:r,leftCheckbox:n}=(null==(e=null==(t=this._store)?void 0:t.widgetConfigurations)?void 0:e.widget)||{useToggle:!1,useCheckbox:!1,leftCheckbox:!1};return F`
+    `}renderPopups(){switch(this.persistPopup&&(this._popup=this.shouldPersistPopup()),this._popup){case"confirmation":return this.confirmationPopupTemplate();case"learn-more":return this.learnMorePopupTemplate();default:return null}}promptTemplate(){var t,e,i,o,r;if(this.useShipAidCheckout&&this.dataSelector)return this.checkoutButtonTemplate();const{useToggle:n,useCheckbox:a,leftCheckbox:s}=(null==(e=null==(t=this._store)?void 0:t.widgetConfigurations)?void 0:e.widget)||{useToggle:!1,useCheckbox:!1,leftCheckbox:!1};return F`
       <div class="shipaid-prompt">
       <div class="prompt-product">
-        ${Tt(!this.disableActions&&n,(()=>F`
+        ${Tt(!this.disableActions&&s,(()=>F`
           <label class="shipaid-checkbox">
             ${this._hasProtectionInCart||!this._hasFinishedSetup?F`<input type="checkbox" checked @click=${this._updateProtection} ?disabled=${this._state.loading}>`:F`<input type="checkbox" @click=${this._updateProtection} ?disabled=${this._state.loading}>`}
             <span class="shipaid-checkMark left"></span>
@@ -1416,21 +1425,29 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
             ${Tt(this._hasProtectionInCart,(()=>Nt),(()=>jt))}
           </div>
           <div class="prompt-product-details">
-            <p class="prompt-product-details-title">
-              <slot name="title">${Lt("title")}</slot>
-            </p>
+            <div class="heading-container">
+              <p class="prompt-product-details-title">
+                <slot name="title">${Lt("title")}</slot>
+              </p>
+              ${Tt(!(null==(i=this._store)?void 0:i.useCustomApp),(()=>F`<button
+                  class="prompt-information-button"
+                  @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
+                >
+                  i
+                </button>`))}
+            </div>
             <p class="prompt-product-details-description">
               <slot name="subtitle">${Lt("description")}</slot>
             </p>
           </div>
           <div class="prompt-product-actions">
             <p class="prompt-product-actions-price">
-              ${(null==(i=this._protectionVariant)?void 0:i.price)&&this._currencyFormat(this._protectionVariant.price)}
+              ${(null==(o=this._protectionVariant)?void 0:o.price)&&this._currencyFormat(this._protectionVariant.price)}
             </p>
-            ${o||r||this.defaultToggleButton?Tt(!this.disableActions&&!n,(()=>F`
-                  <label class="shipaid-${o?"toggle":r?"checkbox":""}">
+            ${n||a||this.defaultToggleButton?Tt(!this.disableActions&&!s,(()=>F`
+                  <label class="shipaid-${n?"toggle":a?"checkbox":""}">
                     ${this._hasProtectionInCart||!this._hasFinishedSetup?F`<input type="checkbox" checked @click=${this._updateProtection} ?disabled=${this._state.loading}>`:F`<input type="checkbox" @click=${this._updateProtection} ?disabled=${this._state.loading}>`}
-                    <span class="shipaid-${o?"slider":r?"checkMark":""}"></span>
+                    <span class="shipaid-${n?"slider":a?"checkMark":""}"></span>
                   </label>
                 `)):Tt(!this.disableActions,(()=>F`
                   <button
@@ -1444,21 +1461,23 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           </div>
         </div>
         ${Tt(this._state.error,(()=>F`<p class="error">${this._state.error}</p>`))}
-        <div class="prompt-footer">
-          <a
-            class="prompt-footer-badge"
-            @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
-          >
-            <span>${Lt("footer.button")}</span>
-            ${Vt}
-            <button
-              class="prompt-footer-about"
-              @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
-            >
-              i
-            </button>
-          </a>
-        </div>
+        ${Tt(null==(r=this._store)?void 0:r.useCustomApp,(()=>F`
+          <div class="prompt-footer">
+              <a
+                class="prompt-footer-badge"
+                @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
+              >
+                <span>${Lt("footer.button")}</span>
+                ${Vt}
+                <button
+                  class="prompt-footer-about"
+                  @click=${()=>{this._popup="learn-more",this.persistPopup&&this.setPopupKey()}}
+                >
+                  i
+                </button>
+              </a>
+            </div>
+        `))}
       </div>
     `}async connectedCallback(){super.connectedCallback(),await async function(t,e=vt){const i=await e.loader(t,e);e.translationCache={},bt(t,i,e)}(this.lang),this.hasLoadedStrings=!0,this.fetchInterceptorCleanup=function(t){const e=window.fetch;let i=!0;const o=async(o,r)=>{const n=e(o,r);if(i)try{await t([o,r],n)}catch(a){console.warn(a)}return await n};return window.fetch=o,()=>{window.fetch===o?window.fetch=e:i=!1}}((async(t,e)=>{var i,o,r,n;if(null==(o=null==(i=t[1])?void 0:i.headers)?void 0:o["X-ShipAid"])return;if(!t[0].startsWith("/cart/change")&&!t[0].startsWith("/cart/update"))return;const a=(null==(n=null==(r=this._store)?void 0:r.widgetConfigurations)?void 0:n.checkoutButtonSelector)||'button[type="submit"][name="checkout"][form="cart"]',s=document.querySelector(a);if(console.log("q",s),s){s.setAttribute("disabled","true"),console.debug("button","t");try{await e,await this.updateCart(),await this.updateProtection()}finally{s.removeAttribute("disabled"),console.debug("button","f")}}}))}disconnectedCallback(){var t;super.disconnectedCallback(),null==(t=this.fetchInterceptorCleanup)||t.call(this)}async updateProtection(){var t,e,i,o;if(this._cartLastUpdated=new Date,!(null==(t=this._cart)?void 0:t.items))return;const r=null==(e=this._cart.items)?void 0:e.findIndex((t=>{var e,i;return null==(i=null==(e=this._protectionProduct)?void 0:e.variants)?void 0:i.some((e=>e.id===t.variant_id))})),n=null==(i=this._cart)?void 0:i.items[r];if(this._hasProtectionInCart=!!n,!this._store)return;const a=await this.calculateProtectionTotal(this._cart);if(this._cart.item_count>0&&n&&(this._cart.total_price===(null==n?void 0:n.final_line_price)||!a)){const t=await this.updateCartProtectionVariant(0,n);return sessionStorage.removeItem(_e),await this._handleRefresh(t)}const s=this._findProtectionVariant(a);if(a?(this._protectionVariant=s,this._shouldShowWidget=!0):this._protectionVariant={id:0,price:"0"},!(null==s?void 0:s.id))return this._shouldShowWidget=!1,void ye("No matching protection variant found.");if(!(null==(o=this._protectionVariant)?void 0:o.id))return void(this._shouldShowWidget=!1);if(this.useShipAidCheckout&&this.supportSubscriptions&&(this._sellingPlanId=await this.getSubscription(this._cart)),!n)return;if(this.supportSubscriptions&&!this.useShipAidCheckout){const t=this._cart.items.find((t=>{var e;return t.id!==(null==(e=this._protectionVariant)?void 0:e.id)&&!!(null==t?void 0:t.selling_plan_allocation)}));let e=!0;if(!t&&(null==n?void 0:n.selling_plan_allocation)?this._sellingPlanId=null:t&&!(null==n?void 0:n.selling_plan_allocation)?this._sellingPlanId=await this.getSubscription(this._cart):e=!1,e){const t=await this.updateCartProtectionVariant(1,n);await this._handleRefresh(t)}}if(s.id===n.variant_id){if(this._protectionCartItem={...n,index:r,position:r+1},1===n.quantity)return;const t=await this.updateCartProtectionVariant(1,n);return this._handleRefreshCart(),await this._handleRefresh(t)}const d={updates:{[n.variant_id]:0,[s.id]:1}},p=await this._fetch.post("/cart/update.js",d);await this._handleRefresh(p)}render(){return Mt(this,(async()=>{var t,e,i,o,r,n;const a=document.createElement("link");a.setAttribute("href","https://fonts.googleapis.com/css2?family=Lato&display=swap"),a.setAttribute("rel","stylesheet"),document.head.appendChild(a);try{const[t,e,i]=await Promise.all([this._fetchShipAidData(),this._fetchCart(),this._fetchProduct()]);this._store=t,this._cart=e,this._protectionProduct=i}catch(s){return ye(s.message),this._hasFinishedSetup=!0,void(this._shouldShowWidget=!1)}return this.planActive?(null==(e=null==(t=this._store)?void 0:t.protectionSettings)?void 0:e.protectionType)?this._protectionProduct?(this._hasFinishedSetup=!0,this._dispatchEvent(ue.LOADED,this._store),setTimeout((async()=>{var t,e,i,o;(null==(t=this._store)?void 0:t.widgetAutoOptIn)&&(null==(e=this._cart)?void 0:e.item_count)&&(this.customerId&&this._store.excludedCustomersIdsAutoOptIn&&(null==(i=this._store.excludedCustomersIdsAutoOptIn)?void 0:i.length)&&this._store.excludedCustomersIdsAutoOptIn.includes(`gid://shopify/Customer/${this.customerId}`)||sessionStorage.getItem(_e)||!this._hasProtectionInCart&&(null==(o=this._cart)?void 0:o.item_count)&&this._store.widgetShowCart&&(await this.addProtection(),sessionStorage.setItem(_e,JSON.stringify({loaded:!0}))))}),500),void(this.disablePolling||(setInterval((async()=>{const t=this._cartLastUpdated;t&&(new Date).getTime()-t.getTime()<this.pollingInterval||await this.updateCart()}),this.pollingInterval),(null==(i=this._store)?void 0:i.widgetPollProtection)&&!this.intervalId&&(this.intervalId=setInterval((async()=>{await this.attemptAddProtection()}),400),localStorage.setItem(`polling-shipaid-protection_${this.intervalId}`,`${this.intervalId}`)),(null==(n=null==(r=null==(o=this._store)?void 0:o.widgetConfigurations)?void 0:r.widget)?void 0:n.pollVariantsCheck)&&setInterval((async()=>{await this.handleMultipleProtectionVariants()}),400)))):(be("No protection settings product for this store - skipping setup."),this._hasFinishedSetup=!0,void(this._shouldShowWidget=!1)):(be("No protection settings for this store - skipping setup."),this._hasFinishedSetup=!0,void(this._shouldShowWidget=!1)):(be("No plan is active for this store - skipping setup."),this._hasFinishedSetup=!0,void(this._shouldShowWidget=!1))}),[]),Mt(this,(async()=>{await this.updateProtection()}),[this._store,this._cart]),Mt(this,(async()=>{dt(this.renderPopups(),document.body)}),[this._popup]),F`
       <style>
@@ -1589,6 +1608,17 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           padding: 6px 0;
           text-align: right;
         }
+        .shipaid-prompt .prompt-information-button {
+          color: var(--shipaid-text);
+          cursor: pointer;
+          font-size: var(--shipaid-prompt-prompt-information-button-size, 10px);
+          background-color: transparent;
+          cursor: pointer;
+          border: 1px solid var(--shipaid-text);
+          border-radius: 10px;
+          margin-left: 0.5rem;
+        }
+
         .shipaid-prompt .prompt-footer {
           margin-top: var(--shipaid-prompt-footer-topMargin, 0px);
           margin-left: var(--shipaid-prompt-footer-leftMargin, 0px);
@@ -1627,6 +1657,16 @@ function Tt(t,e,i){return t?e():null==i?void 0:i()}const qt=h`
           height:var(--shipaid-footer-badge-logo-height, 9px);
         }
 
+        .shipaid-prompt .heading-container{
+          display: var(--shipaid-prompt-heading-container-display, flex);
+          justify-content: var(--shipaid-prompt-heading-container-justify-content, start);
+          align-items: var(--shipaid-prompt-heading-container-align-items, center);
+        }
+
+        .shipaid-prompt .heading-container > p{
+          margin: var(--shipaid-prompt-heading-container-gap-margin, 0px 10px 0px 0px);
+        }
+
         .shipaid-checkbox {
           display: inline-block;
           position: relative;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui.shipaid.com",
   "private": false,
-  "version": "0.3.100",
+  "version": "0.3.102",
   "type": "module",
   "main": "dist/widget.umd.js",
   "unpkg": "dist/widget.iife.js",