ui.shipaid.com 0.3.39 → 0.3.41

package/dist/widget.es.js

@@ -965,7 +965,7 @@ const useOnce = (element, on) => useEffect(element, on, []);
 function n(n2, o3, r2) {
   return n2 ? o3() : null == r2 ? void 0 : r2();
 }
-const styles$1 = i$2`
+const styles$2 = i$2`
   :host {
     --shipaid-primary: #0056d6;
     --shipaid-secondary: #0076ff;
@@ -1483,15 +1483,15 @@ const BellIcon = x`
     </g>
   </svg>
 `;
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$1(target, key, result);
+    __defProp$2(target, key, result);
   return result;
 };
 class LearnMorePopup extends s$1 {
@@ -1567,13 +1567,217 @@ class LearnMorePopup extends s$1 {
     `;
   }
 }
-LearnMorePopup.styles = styles$1;
-__decorateClass$1([
+LearnMorePopup.styles = styles$2;
+__decorateClass$2([
   n$7({ type: Boolean, attribute: true })
 ], LearnMorePopup.prototype, "active", 2);
 if (!customElements.get("shipaid-popup-learn-more")) {
   customElements.define("shipaid-popup-learn-more", LearnMorePopup);
 }
+const styles$1 = i$2`
+  :host {
+    --shipaid-primary: #0056d6;
+    --shipaid-secondary: #0076ff;
+    --shipaid-danger: #f44336;
+    --shipaid-text: #000000;
+    --shipaid-text-muted: #cccccc;
+    --shipaid-text-grey: #aaaaaa;
+    --shipaid-light-grey: #ebecf0;
+    --shipaid-light-blue: #bacef4;
+    --shipaid-font: "Lato", sans-serif;
+    --shipaid-font-xs: 12px;
+    --shipaid-font-sm: 14px;
+    --shipaid-font-base: 16px;
+    --shipaid-font-lg: 18px;
+    --shipaid-font-display: 36px;
+    --shipaid-font-regular: 400;
+    --shipaid-font-heavy: 700;
+  }
+
+  p,
+  a {
+    font-family: var(--shipaid-font);
+    font-weight: var(--shipaid-font-regular);
+    font-size: var(--shipaid-font-base);
+    color: var(--shipaid-text);
+  }
+
+  .shipaid-confirmation-popup {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 13rem auto;
+    max-width: 30%;
+    max-height: 70vh;
+    height: fit-content;
+    border: var(--shipaid-popup-border, var(--shipaid-primary)) .2rem solid;
+    background-color: var(--shipaid-popup-background, #fff);
+    border-radius: 45px;
+    z-index: 1000000000;
+    overflow: auto;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 250ms ease-in-out;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 2rem
+  }
+
+  .shipaid-confirmation-popup.active {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .shipaid-confirmation-popup.active + .blocker {
+    z-index: 50;
+  }
+
+  .popup-actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  .popup-subtitle {
+    text-align: center;
+  }
+
+  @media (max-width: 600px) {
+    .shipaid-confirmation-popup {
+      width: auto;
+      height: 100vh;
+      padding: 3rem;
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+  }
+
+  .btn-primary {
+    background-color: #0073e6;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background-color: #005bb5;
+}
+
+.btn-secondary {
+    background-color: transparent;
+    color: #666;
+    border: 1px solid #ccc;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.btn-secondary:hover {
+    background-color: #f5f5f5;
+}
+
+
+  .shipaid-confirmation-popup .popup-title {
+    font-size: var(--shipaid-font-display);
+    font-weight: var(--shipaid-font-regular);
+    letter-spacing: 1px;
+    text-align: center;
+  }
+
+  @media (max-width: 600px) {
+    .shipaid-confirmation-popup .popup-title {
+      font-size: 2rem;
+    }
+  }
+
+  .shipaid-confirmation-popup p {
+    font-size: var(--shipaid-font-base);
+    margin: 0;
+  }
+
+  @media (max-width: 600px) {
+    .shipaid-confirmation-popup p {
+      font-size: 10px;
+    }
+  }
+
+  .blocker {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    content: " ";
+    background: transparent;
+    z-index: -1;
+  }
+`;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+class ConfirmationPopup extends s$1 {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+  }
+  handleClosePopup() {
+    const event = new Event("close");
+    this.dispatchEvent(event);
+  }
+  handleRemoveProtection() {
+    const event = new Event("remove-protection");
+    this.dispatchEvent(event);
+  }
+  render() {
+    return x`
+    <div class=${`shipaid-confirmation-popup ${this.active && "active"}`}>
+      <p class="popup-title">Are you sure?</p>
+      <div class="popup-subtitle">
+        <p>Thousands of customers choose to protect their orders to ensure a seamless resolution process in the event of damage or loss in transit.</p>
+      </div>
+      <div class="popup-actions">
+        <button
+          type="button"
+          class="btn-primary"
+          @click=${this.handleClosePopup}
+          >
+          Keep the Delivery Guarantee
+        </button>
+        <button
+          type="button"
+          class="btn-secondary"
+          @click=${this.handleRemoveProtection}
+          >
+          No, I'd like to ship my order unprotected
+        </button>
+      </div>
+    </div>
+    <div class="blocker" @click=${this.handleClosePopup}></div>
+    `;
+  }
+}
+ConfirmationPopup.styles = styles$1;
+__decorateClass$1([
+  n$7({ type: Boolean, attribute: true })
+], ConfirmationPopup.prototype, "active", 2);
+if (!customElements.get("shipaid-popup-confirmation")) {
+  customElements.define("shipaid-popup-confirmation", ConfirmationPopup);
+}
 const loading = "Loading ShipAid Widget...";
 const title = "Delivery Guarantee";
 const description = "in case of Loss, Damage or Theft";
@@ -1989,9 +2193,23 @@ class ShipAidWidget extends s$1 {
       error: state2 === "error" ? message || true : false
     };
   }
+  /** Trigger confirmation popup */
+  _handleConfirmationPopup() {
+    if (this._popup === "confirmation")
+      return;
+    this._popup = "confirmation";
+  }
   /** Updates the current protection status, calling the relevant add/remove function. */
-  async _updateProtection() {
-    return this._hasProtectionInCart ? this.removeProtection() : this.addProtection();
+  _updateProtection() {
+    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();
+    }
+    if (!removeWithConfirmation) {
+      return this.removeProtection();
+    }
+    return this._handleConfirmationPopup();
   }
   /** Fetches store info from the ShipAid public API. */
   async _fetchShipAidData() {
@@ -2191,10 +2409,6 @@ class ShipAidWidget extends s$1 {
     const hasSessionPayload = !!sessionStorage.getItem(LOCAL_STORAGE_KEY);
     if (hasSessionPayload)
       return;
-    sessionStorage.setItem(
-      LOCAL_STORAGE_KEY,
-      JSON.stringify({ loaded: true })
-    );
     if (
       // If we first check that no protection items are in the cart
       !this._hasProtectionInCart && // Then check we have some items in the cart
@@ -2202,6 +2416,10 @@ class ShipAidWidget extends s$1 {
       this._store.widgetShowCart
     ) {
       await this.addProtection();
+      sessionStorage.setItem(
+        LOCAL_STORAGE_KEY,
+        JSON.stringify({ loaded: true })
+      );
     }
   }
   async handleMultipleProtectionVariants() {
@@ -2236,9 +2454,6 @@ class ShipAidWidget extends s$1 {
   }
   /** Templates */
   learnMorePopupTemplate() {
-    if (this.persistPopup) {
-      this._popup = this.shouldPersistPopup();
-    }
     return x`
       <shipaid-popup-learn-more
         ?active=${this._popup === "learn-more"}
@@ -2251,6 +2466,39 @@ class ShipAidWidget extends s$1 {
       ></shipaid-popup-learn-more>
     `;
   }
+  confirmationPopupTemplate() {
+    return x`
+      <shipaid-popup-confirmation
+        ?active=${this._popup === "confirmation"}
+        @close=${() => {
+      if (this.persistPopup) {
+        localStorage.removeItem(`${LOCAL_STORAGE_SHIPAID_POPUP_KEY}`);
+      }
+      this._popup = null;
+    }}
+      @remove-protection=${() => {
+      this.removeProtection();
+      if (this.persistPopup) {
+        localStorage.removeItem(`${LOCAL_STORAGE_SHIPAID_POPUP_KEY}`);
+      }
+      this._popup = null;
+    }}
+      ></shipaid-popup-confirmation>
+    `;
+  }
+  renderPopups() {
+    if (this.persistPopup) {
+      this._popup = this.shouldPersistPopup();
+    }
+    switch (this._popup) {
+      case "confirmation":
+        return this.confirmationPopupTemplate();
+      case "learn-more":
+        return this.learnMorePopupTemplate();
+      default:
+        return null;
+    }
+  }
   promptTemplate() {
     var _a, _b, _c;
     const { useToggle, useCheckbox, leftCheckbox } = ((_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.widget) || { useToggle: false, useCheckbox: false, leftCheckbox: false };
@@ -2544,7 +2792,7 @@ class ShipAidWidget extends s$1 {
       },
       [this._store, this._cart]
     );
-    D(this.learnMorePopupTemplate(), document.body);
+    D(this.renderPopups(), document.body);
     return x`
       <style>
         :host {