container.style.display = "none"; function ensureStyles() { if (document.getElementById("tn-vip-styles")) return; var style = document.createElement("style"); style.id = "tn-vip-styles"; // Verbatim copy of your CSS field, with the top-tier bar-hide rule appended. style.textContent = ` /* ---- Native VIP progress block tweaks ---- */ .rivo-aw-vip-tier-progress-link { display: none; } .rivo-aw-vip-tier-progress-title-row .rivo-aw-title { font-size: 32px; } .rivo-aw-home-vip-tier-progress { padding: 20px 0px !important; border-bottom: 1px solid #e5e5e5; } .rivo-aw-vip-tier-progress-link { display: none !important; } .rivo-aw-vip-tier-progress-fill { border-radius: 0px !important;} .rivo-aw-vip-tier-progress-container { border: 0px !important; border-radius: 0px !important; padding: 0px 0px 0px 0px !important; } .rivo-aw-vip-tier-progress-track { border-radius: 0px !important; } /* ---- Eyebrow ---- */ .tn-eyebrow { font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rivo-aw-heading-font-color, #2d2926); margin-bottom: 0px; } /* ---- VIP tier icon ---- */ .tn-title-row-flex { display: flex; align-items: center; gap: 10px; } .tn-vip-tier-icon { width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; } .tn-vip-tier-icon img { width: 100%; height: 100%; object-fit: contain; } /* ---- VIP perks list ---- */ .tn-vip-perks-list { margin-top: 4px; padding-top: 12px; border-top: 1px solid #e5e5e5; } .tn-vip-perks-item { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; } .tn-vip-perks-check { width: 18px; min-width: 18px; height: 18px; margin-top: 2px; color: var(--rivo-aw-heading-font-color, #2d2926); } .tn-vip-perks-check svg { width: 100%; height: 100%; } .tn-perks-check svg path, .tn-vip-perks-check svg path { fill: none !important; } .tn-vip-perks-name { font-size: 14px; line-height: 1.4; color: var(--rivo-aw-heading-font-color, #2d2926); } /* ---- Top-tier message (bar hidden, custom copy shown) ---- */ /* On the top tier the native bar is always 100% and carries no information, and the current-period SPEND needed to show real requalification progress isn't exposed to the storefront — so a live bar isn't possible. We hide the native bar AND its "You did it!" line, and show a static requalification message instead. The .tn-top-tier class is added by JS only when highest_tier is true. */ .tn-top-tier > .rivo-aw-vip-tier-progress-bar-wrapper { display: none !important; } .tn-vip-topmsg { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--rivo-aw-heading-font-color, #2d2926); } `; document.head.appendChild(style); } var STAR = ''; var CHECK = ''; function store() { return window.RivoProfileAlpine && window.RivoProfileAlpine.store("rivo_profile_customer"); } function loyConfig() { return window.RivoProfileAlpine && window.RivoProfileAlpine.store("loy_config"); } function findVisible(sel) { var els = document.querySelectorAll(sel); for (var i = 0; i < els.length; i++) if (els[i].offsetParent !== null) return els[i]; return null; } function cellIsGranted(v) { if (v === null || v === undefined) return false; var s = String(v).trim().toLowerCase(); return !(s === "" || s === "no" || s === "-" || s === "—" || s === "n/a"); } function perksForTier(tierId) { var lc = loyConfig(); var rows = lc && lc.loyalty_landing_page_settings && lc.loyalty_landing_page_settings.vip_tiers_table_data; if (!rows || !rows.length) return []; var out = []; rows.forEach(function (row) { if (!row.perk || !row.tiers) return; var cell = row.tiers.filter(function (t) { return String(t.id) === String(tierId); })[0]; if (!cell || !cellIsGranted(cell.value)) return; var v = String(cell.value).trim(); out.push(v.toLowerCase() === "yes" ? row.perk : row.perk + ": " + v); }); return out; } // Inline sizing here is belt-and-suspenders alongside ensureStyles() — the icon // is capped the instant it's inserted, before any stylesheet is consulted. function buildIcon(tier) { var wrap = document.createElement("div"); wrap.className = "tn-vip-tier-icon"; wrap.setAttribute("aria-hidden", "true"); wrap.style.cssText = "width:40px;height:40px;min-width:40px;display:flex;" + "align-items:center;justify-content:center;overflow:hidden;"; if (tier && tier.icon_url) { var img = document.createElement("img"); img.width = 40; img.height = 40; img.style.cssText = "width:100%;height:100%;object-fit:contain;display:block;"; img.alt = tier.name || ""; img.onerror = function () { wrap.innerHTML = STAR; }; img.src = tier.icon_url; wrap.appendChild(img); } else { wrap.innerHTML = STAR; } return wrap; } function buildPerks(labels) { if (!labels || !labels.length) return null; var list = document.createElement("div"); list.className = "tn-vip-perks-list"; labels.forEach(function (label) { var item = document.createElement("div"); item.className = "tn-vip-perks-item"; item.innerHTML = '" + '

' + label + "

"; var svg = item.querySelector(".tn-vip-perks-check svg"); if (svg) { svg.style.width = "100%"; svg.style.height = "100%"; svg.style.display = "block"; } list.appendChild(item); }); return list; } function toNumber(v) { var n = parseFloat(v); return isFinite(n) ? n : NaN; } function formatMoney(n) { // USD, no decimals: 5000 -> "$5,000". Change the symbol here if not USD. return "$" + Math.round(n).toLocaleString("en-US"); } // Top tier: hide the native progress bar (and its "You did it!" line) via the // .tn-top-tier CSS class, and show a static requalification message in its // place. The storefront doesn't expose current-period spend for top-tier // customers, so we can't fill a real bar or detect whether they've already // requalified — the message is the fixed goal statement only. // // The goal amount comes from current_vip_tier_info.tier.threshold (confirmed // in the live store; falls back to $5,000). Toggling the class is an attribute // change (not a childList mutation) so it never triggers the observer, and the // text write is change-guarded so the observer settles instead of looping. function applyTopTierState() { var block = findVisible(".rivo-aw-home-vip-tier-progress"); if (!block) return; var container = block.querySelector(".rivo-aw-vip-tier-progress-container"); if (!container) return; var s = store(); if (s && s.tags && s.tags.includes('Rivo Excluded')) return; var info = s && s.current_vip_tier_info; var isTop = !!(info && info.highest_tier); if (!isTop) { if (container.classList.contains("tn-top-tier")) container.classList.remove("tn-top-tier"); var stale = container.querySelector(".tn-vip-topmsg"); if (stale) stale.parentNode.removeChild(stale); return; } if (!container.classList.contains("tn-top-tier")) container.classList.add("tn-top-tier"); var tier = info.tier || {}; var tierName = tier.name || "Platinum"; var goal = toNumber(tier.threshold); if (!isFinite(goal) || goal <= 0) goal = 5000; var nextYear = new Date().getFullYear() + 1; var msgText = "Spend " + formatMoney(goal) + " to secure " + tierName + " for " + nextYear; var msg = container.querySelector(".tn-vip-topmsg"); if (!msg) { msg = document.createElement("div"); msg.className = "tn-vip-topmsg"; // Sit where the native bar was: after the (hidden) bar wrapper, above perks. var nativeWrap = container.querySelector(".rivo-aw-vip-tier-progress-bar-wrapper"); if (nativeWrap && nativeWrap.nextSibling) container.insertBefore(msg, nativeWrap.nextSibling); else container.appendChild(msg); } if (msg.textContent !== msgText) msg.textContent = msgText; // change-guard: avoids observer loop } function injectVip() { var s = store(); if (s && s.tags && s.tags.includes('Rivo Excluded')) { var b = findVisible('.rivo-aw-home-vip-tier-progress'); if (b) b.style.display = 'none'; return; } // The VIP block renders only after the async tier API resolves, so it may not // exist yet when this first runs — the observer/poll below re-calls us until it // appears. Find the first visible instance in the document. var block = findVisible(".rivo-aw-home-vip-tier-progress"); if (!block) return; var titleRow = block.querySelector(".rivo-aw-vip-tier-progress-title-row"); if (!titleRow || titleRow.querySelector(".tn-vip-tier-icon")) return; var s = store(); var tier = s && s.current_vip_tier_info && s.current_vip_tier_info.tier; if (!tier) return; // buildIcon() falls back to a star when icon_url is absent var wrap = block.querySelector(".rivo-aw-vip-tier-progress-container"); if (wrap && !wrap.querySelector(".tn-eyebrow")) { var eb = document.createElement("div"); eb.className = "tn-eyebrow"; eb.textContent = "YOUR VIP REWARDS TIER"; wrap.insertBefore(eb, wrap.firstChild); } titleRow.classList.add("tn-title-row-flex"); titleRow.insertBefore(buildIcon(tier), titleRow.firstChild); var perksEl = buildPerks(perksForTier(tier.id)); if (wrap && perksEl && !wrap.querySelector(".tn-vip-perks-list")) wrap.appendChild(perksEl); } // Make sure the styles exist before we ever touch the DOM, and on every re-run. ensureStyles(); // The platform re-runs this file (with cleanup) on every hash-route change, so we // only need to cover this render. Run once now, poll briefly for async store/DOM, // and re-apply if Alpine re-renders the block. Every lifecycle self-terminates // when this host is removed (container.isConnected === false), so nothing leaks. injectVip(); applyTopTierState(); var tries = 0; var poll = setInterval(function () { if (!container.isConnected) { clearInterval(poll); return; } ensureStyles(); injectVip(); applyTopTierState(); if (++tries > 20) clearInterval(poll); }, 150); var obs = new MutationObserver(function () { if (!container.isConnected) { obs.disconnect(); return; } ensureStyles(); injectVip(); applyTopTierState(); }); var root = document.querySelector("#rivo-account-slideout") || document.body; obs.observe(root, { childList: true, subtree: true });

The Must-Haves