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; } .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). 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 } 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 Alpine effect below re-calls us when // the data lands. 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); } // ---- Lifecycle (replaces the old poll + MutationObserver) ---- // Rivo's account widget is a real Alpine instance (window.RivoProfileAlpine), // and current_vip_tier_info on the rivo_profile_customer store is deeply // reactive — loadVipTierProgress() assigns it once the tier API resolves. So // instead of polling or observing the DOM, we register ONE Alpine effect that // reads the store; Alpine re-runs it whenever the tier data (or tags) changes, // and nextTick() guarantees the block is in the DOM before we query it. ensureStyles(); var Alpine = window.RivoProfileAlpine; function apply() { if (!container.isConnected) return false; ensureStyles(); injectVip(); applyTopTierState(); return true; } if (Alpine && typeof Alpine.effect === "function") { var effectRef = Alpine.effect(function () { var s = Alpine.store("rivo_profile_customer"); // Read the reactive deps HERE (in the effect body) so Alpine tracks them. // Reading them inside nextTick would not register the dependency. var _info = s && s.current_vip_tier_info; var _tags = s && s.tags; void _info; void _tags; // Section torn down (hash-route change / slideout closed): release the // effect so it doesn't linger for the life of the Alpine instance. if (!container.isConnected) { if (effectRef && typeof Alpine.release === "function") Alpine.release(effectRef); return; } // DOM from the assignment above lands next tick — query then. Alpine.nextTick(apply); }); } else { // Fallback for older widget builds that don't expose the Alpine API: // a bounded poll. No MutationObserver, no body-subtree watching. apply(); var tries = 0; var poll = setInterval(function () { if (!apply() || ++tries > 40) clearInterval(poll); }, 150); }

Back New

This Just In

Tuckernuck x Fanatics

Best Sellers This Week

Back Edits

Tuckernuck x Fanatics

The Fall Must-Haves

Back Best Sellers

Winetasting Chloe Dress

Chocolate Sky Plaid Ellery Blouse

Black Lace Adalyn Mini Dress

Back Clothing

Staple Skirts

Luxe Cashmere

Polished Tops

Back Dresses

Little Black Dresses

Cocktail O'Clock

9 to 5

Back Sport

Tuckernuck x Fanatics

Ready to Rally

To a Tee

Back Shoes

Ballet Flats

Elevated Heels

Fall Boots

Back Accessories

Carry-All Totes

Finishing Touches

Statement Belts

Back Beauty

Skin Wins

Glow Getters

Make-Up Must-Haves

Back Designers

Tuckernuck

Tuckernuck Shoes

New From Brands We Love

Back Home

Shop All Home

Tuckernuck Home

Home New Arrivals

Back Gents & Kids

Shop All Gents

Shop All Kids

Back Sale

Dresses on Sale

Tops on Sale

Designers on Sale

YGroup_26-482