Free Shipping

<div id="banner" class="banner">
  <!-- 📦 Progress View -->
  <div id="progress-banner" class="banner-state">
    <t5 id="shipping-text" class="shipping-text"></t5>
    <div id="progress-container">
      <div id="progress-bar"></div>
    </div>
  </div>

  <!-- 🚚 Unlocked State -->
  <div id="unlocked-banner" class="unlocked-banner" style="display: none;">
    <div class="truck-icon">
      <!-- SVG Truck Icon -->
      <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="36" height="36" rx="18" fill="#E4F7E8" />
        <g clip-path="url(#clip0)">
          <path d="..." fill="#00871B" />
        </g>
        <defs>
          <clipPath id="clip0">
            <rect width="20" height="20" fill="white" transform="translate(8 8)" />
          </clipPath>
        </defs>
      </svg>
    </div>
    <t5 class="shipping-unlocked-text">Free shipping unlocked!</t5>
  </div>
</div>

 .banner {
   padding: 16px;
   background-color: #fafafa;
   border-radius: 8px;
   font-family: "Figtree", sans-serif;
 }

 .banner-state {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 #shipping-text {
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 10px;
   text-align: center;
 }

 #progress-container {
   width: 100%;
   height: 10px;
   background: #e0e0e0;
   border-radius: 8px;
   overflow: hidden;
 }

 #progress-bar {
   height: 100%;
   background-color: #009828;
   width: 0%;
   transition: width 0.3s ease;
   border-radius: 8px;
 }

 .unlocked-banner {
   display: flex;
   align-items: center;
   gap: 12px;
   background-color: #fafafa;
   border-radius: 16px;
   font-family: "Figtree", sans-serif;
 }

 .truck-icon {
   background-color: #d1f1dd;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .shipping-unlocked-text {
   font-size: 14px;
   font-weight: 500;
   color: #111;
   margin: 0;
 }

const SHIPPING_THRESHOLD = 10; // e.g., free shipping threshold in dollars
const subtotal = VajroSDK.variables.cart.subtotal || 0;

// ✅ Update UI based on subtotal
function updateBannerUI(subtotalAmount) {
 const text = document.getElementById("shipping-text");
 const bar = document.getElementById("progress-bar");
 const progressBanner = document.getElementById("progress-banner");
 const unlockedBanner = document.getElementById("unlocked-banner");

 const remaining = SHIPPING_THRESHOLD - subtotalAmount;
 const progress = Math.min((subtotalAmount / SHIPPING_THRESHOLD) * 100, 100);

 if (subtotalAmount >= SHIPPING_THRESHOLD) {
   progressBanner.style.display = "none";
   unlockedBanner.style.display = "flex";
 } else {
   progressBanner.style.display = "flex";
   unlockedBanner.style.display = "none";
   text.innerHTML = `Add <strong>$${remaining.toFixed(2)}</strong> more to unlock free shipping`;
   bar.style.width = `${progress}%`;
 }
}

updateBannerUI(subtotal);

// ✅ React to cart updates
VajroSDK.listeners.onCartUpdated(() => {
 const updatedSubtotal = VajroSDK.variables.cart.subtotal || 0;
 updateBannerUI(updatedSubtotal);
});