// Detect locale prefix from URL path (supports /de-int/, /es-int/, /fr/, /es/, etc.) var localeMatch = window.location.pathname.match(/^\/([a-z]{2}(?:-[a-z]{2,3})?)(?:\/|$)/); if (localeMatch) { RivoProfileAlpine.store("locale", localeMatch[1]); } document.querySelector('#rivo-account-slideout')?.addEventListener('click', function(e) { var btn = e.target.closest('.rivo-order-details-page .rivo-aw-ctas a'); if (!btn) return; // Only intercept the Buy Again button (no href binding = stays as "#") var href = btn.getAttribute('href'); if (href === '#') { e.preventDefault(); } }); var lang = Shopify.locale || 'en'; var translations = { de: 'Anmelden oder registrieren', nl: 'Inloggen of registreren', sv: 'Logga in eller registrera dig', da: 'Log ind eller tilmeld dig', es: 'Iniciar sesión o registrarse', it: 'Accedi o registrati' }; if (translations[lang]) { RivoProfileAlpine.store("rivo_aw_settings").external_login_text = translations[lang]; } // Rivo product title localization via Shopify locale-aware product API window._rivoTitleCache = window._rivoTitleCache || {}; const productCache = new Map(); const localizeProductNames = (productArr) => { productArr.forEach((item) => { const productHref = item.querySelector('a')?.href; if (!productHref) return; const endpoint = `${productHref}.js`; const request = productCache.get(endpoint) || fetch(endpoint).then((res) => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); }); productCache.set(endpoint, request); request .then((p) => { if (!p?.title) return; window._rivoTitleCache[endpoint] = p.title; // Update Alpine's reactive data so it renders the translated title itself try { const alpineData = window.RivoProfileAlpine.$data(item); if (alpineData?.product) { alpineData.product.title = p.title; return; } } catch (e) {} // Fallback: direct DOM manipulation const productTitle = item.querySelector('.rivo-mini-block-title, .rivo-product-action-title'); if (productTitle) { productTitle.removeAttribute('rivo-ax-html'); productTitle.textContent = p.title; } }) .catch((err) => console.log(`Error fetching product ${endpoint}:`, err)); }); }; const waitForProducts = ({ enabled, timeout = 20000, isNotLoadedYet, shouldStopEmpty, selector, }) => { if (!enabled) return; const interval = setInterval(() => { if (isNotLoadedYet()) return; if (shouldStopEmpty()) { clearInterval(interval); return; } const productEls = document.querySelectorAll(selector); if (!productEls.length) return; clearInterval(interval); localizeProductNames(productEls); }, 100); setTimeout(() => clearInterval(interval), timeout); }; const waitForSection = (selector, timeout = 10000) => { const interval = setInterval(() => { const items = document.querySelectorAll(selector); if (!items.length) return; try { const data = window.RivoProfileAlpine.$data(items[0]); if (!data?.product) return; } catch (e) { return; } clearInterval(interval); localizeProductNames(Array.from(items)); }, 100); setTimeout(() => clearInterval(interval), timeout); }; const customer = window.RivoProfileAlpine.store("rivo_profile_customer"); // Recently Viewed waitForProducts({ enabled: window.RivoProfileAlpine.store('rivo_aw_settings').recently_viewed_enabled, selector: '.rivo-recently-viewed-products div.rivo-product-item', isNotLoadedYet: () => { const idsStore = window.RivoProfileAlpine.store('rivo_recently_viewed_product_ids'); const products = window.RivoProfileAlpine.store('rivo_recently_viewed_products'); return idsStore && idsStore.ids && idsStore.ids.length > 0 && !products; }, shouldStopEmpty: () => { const idsStore = window.RivoProfileAlpine.store('rivo_recently_viewed_product_ids'); const products = window.RivoProfileAlpine.store('rivo_recently_viewed_products'); return ( !idsStore || !idsStore.ids || idsStore.ids.length === 0 || (products && products.length === 0) ); }, }); // Popular Today waitForProducts({ enabled: window.RivoProfileAlpine.store('rivo_aw_settings').popular_today_enabled, selector: '.rivo-popular-today-products div.rivo-product-item', isNotLoadedYet: () => !window.RivoProfileAlpine.store('rivo_popular_products'), shouldStopEmpty: () => { const products = window.RivoProfileAlpine.store('rivo_popular_products'); return Array.isArray(products) && products.length === 0; }, }); // Favorites — home tab mini-block if (customer) { waitForProducts({ enabled: window.RivoProfileAlpine.store('rivo_aw_settings').favorites_enabled, selector: '.rivo-favorite-products div.rivo-product-item', isNotLoadedYet: () => window.RivoProfileAlpine.store('rivo_favorite_products') === undefined, shouldStopEmpty: () => { const products = window.RivoProfileAlpine.store('rivo_favorite_products'); return Array.isArray(products) && products.length === 0; }, }); } // memberr Subscriptions /** * mellow NOIR – Abo widget for the Rivo account drawer. * * Paste into Rivo › Accounts › "Javascript Settings for Developers" › Onload Javascript. * Renders either the subscription nudge or the customer's current subscription as a * sibling right after `.rivo-aw-home-vip-tier-progress`, for every signed-in customer. * Subscriptions are loaded once per page from the memberr app proxy * (`POST //contracts`), which identifies the customer by their Shopify * storefront session. If that request fails, the widget stays hidden. * * Logging: console output is prefixed with [mnab]. Debug/info logs are on while * CONFIG.debug is true, or per browser with ?mnab_debug=1 (turn off with ?mnab_debug=0). * Warnings and errors are always logged. Inspect at runtime via window.mnabAbo. */ ;(() => { if (window.__mnAboWidget) return window.__mnAboWidget = true /* ------------------------------------------------------------------ config */ const CONFIG = { anchorSelector: '.rivo-aw-home-vip-tier-progress', // The shop's app proxy URL (Shopify admin › Settings › Apps › memberr Subscriptions › App proxy). proxyPath: 'apps/memberr', // Paths are prefixed with Shopify.routes.root, so market/locale prefixes are kept. discoverPath: 'apps/memberr/build-a-box/95e63461-ece1-4c5e-9433-8d2e77d35b3e', // The subscriptions page in Shopify customer accounts (absolute, not locale-prefixed). manageUrl: 'https://shopify.com/4794449994/account/pages/019999f6-1721-7ec6-870f-9aedc27671cc', maxDiscount: 25, // Serif used for the headline and the delivery date. Put the shop's serif first if the theme loads one. serifFont: '"Cormorant Garamond", "Cormorant", "Libre Caslon Text", Georgia, "Times New Roman", serif', // Optional: climb from the matched anchor to a wrapper (e.g. '.rivo-aw-card') and insert after that instead. anchorClosest: null, // Verbose console logging for everyone. Prefer ?mnab_debug=1 to turn it on in a single browser. debug: false, } const ROOT_ID = 'mnab-abo-widget' const STYLE_ID = 'mnab-abo-style' const VERSION = '0.5.0' const PROXY_TIMEOUT_MS = 15_000 const DAY_MS = 86_400_000 /* ---------------------------------------------------------------- logging */ const DEBUG_KEY = 'mnabDebug' const debugEnabled = (() => { try { const param = new URLSearchParams(window.location.search).get('mnab_debug') if (param === '1') localStorage.setItem(DEBUG_KEY, '1') if (param === '0') localStorage.removeItem(DEBUG_KEY) if (param === '0') return false return Boolean(CONFIG.debug) || localStorage.getItem(DEBUG_KEY) === '1' } catch (e) { return Boolean(CONFIG.debug) } })() const startedAt = Date.now() const stamp = () => `+${((Date.now() - startedAt) / 1000).toFixed(2)}s` const LOG_STYLE = 'color:#8a603f;font-weight:600' const write = (method, args) => { try { console[method](`%c[mnab]%c ${stamp()}`, LOG_STYLE, 'color:inherit', ...args) } catch (e) { /* console unavailable */ } } const log = { debug: (...args) => debugEnabled && write('debug', args), info: (...args) => debugEnabled && write('info', args), warn: (...args) => write('warn', args), error: (...args) => write('error', args), } // Log enough to identify the customer without writing the full address to the console. const maskEmail = (email) => { const [user, domain] = String(email || '').split('@') if (!domain) return email ? '(invalid email)' : '(none)' return `${user.slice(0, 1)}${'*'.repeat(Math.max(1, user.length - 1))}@${domain}` } /* ------------------------------------------------------------------- copy */ const STRINGS = { de: { nudgeTag: 'Neu · mellow Abo', upTo: 'Bis zu', nudgeTitle: (d) => `Bis zu ${d} Rabatt auf jede Bestellung`, nudgeText: 'Deine Pflege kommt automatisch – jederzeit pausieren, ändern oder beenden.', nudgeCta: 'Abo entdecken', activeTag: 'Mein Abo', statusActive: 'Aktiv', statusPaused: 'Pausiert', nextDelivery: 'Nächste Lieferung', lastDelivery: 'Letzte Lieferung', progressLabel: 'Zeit bis zur nächsten Lieferung', daysLeft: (n) => (n <= 0 ? 'heute' : n === 1 ? 'morgen' : `noch ${n} Tage`), every: (n, unit) => { const one = { DAY: 'jeden Tag', WEEK: 'jede Woche', MONTH: 'jeden Monat', YEAR: 'jedes Jahr', } const many = { DAY: 'Tage', WEEK: 'Wochen', MONTH: 'Monate', YEAR: 'Jahre' } if (!many[unit]) return '' return n === 1 ? one[unit] : `alle ${n} ${many[unit]}` }, price: (now, was, pct) => `${now} statt ${was} (−${pct})`, manage: 'Abo verwalten', }, en: { nudgeTag: 'New · mellow subscription', upTo: 'Up to', nudgeTitle: (d) => `Up to ${d} off every order`, nudgeText: 'Your skincare arrives automatically – pause, change or cancel anytime.', nudgeCta: 'Discover subscription', activeTag: 'My subscription', statusActive: 'Active', statusPaused: 'Paused', nextDelivery: 'Next delivery', lastDelivery: 'Last delivery', progressLabel: 'Time until the next delivery', daysLeft: (n) => (n <= 0 ? 'today' : n === 1 ? 'tomorrow' : `${n} days to go`), every: (n, unit) => { const units = { DAY: 'day', WEEK: 'week', MONTH: 'month', YEAR: 'year' } if (!units[unit]) return '' return n === 1 ? `every ${units[unit]}` : `every ${n} ${units[unit]}s` }, price: (now, was, pct) => `${now} instead of ${was} (−${pct})`, manage: 'Manage subscription', }, } const pageLang = () => document.documentElement.lang || 'de-DE' const strings = () => (pageLang().toLowerCase().startsWith('de') ? STRINGS.de : STRINGS.en) /* ---------------------------------------------------------------- helpers */ const esc = (value) => String(value).replace( /[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[c], ) const url = (path) => { const root = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) || '/' return root.replace(/\/?$/, '/') + path.replace(/^\//, '') } const fmt = { money(amount, currency) { const value = Number(amount) || 0 try { return new Intl.NumberFormat(pageLang(), { style: 'currency', currency }).format(value) } catch (e) { return `${value.toFixed(2)} ${currency || ''}`.trim() } }, percent(value) { try { return new Intl.NumberFormat(pageLang(), { style: 'percent', maximumFractionDigits: 1, }).format(value / 100) } catch (e) { return `${value} %` } }, date(date) { try { return new Intl.DateTimeFormat(pageLang(), { day: 'numeric', month: 'long', year: 'numeric', }).format(date) } catch (e) { return date.toLocaleDateString() } }, } const startOfDay = (date) => { const d = new Date(date) d.setHours(0, 0, 0, 0) return d } const today = () => startOfDay(new Date()) // Moves a date by a Shopify selling plan interval (DAY/WEEK/MONTH/YEAR); null for unknown units. const shiftDate = (date, interval, count) => { const d = startOfDay(date) if (interval === 'DAY') d.setDate(d.getDate() + count) else if (interval === 'WEEK') d.setDate(d.getDate() + count * 7) else if (interval === 'MONTH') d.setMonth(d.getMonth() + count) else if (interval === 'YEAR') d.setFullYear(d.getFullYear() + count) else return null return d } const parseDate = (value) => { const d = value ? new Date(value) : null return d && !Number.isNaN(d.getTime()) ? d : null } const intervalOf = (policy) => ({ unit: policy && policy.interval, count: Number(policy && policy.intervalCount && policy.intervalCount.count) || 1, }) // Shopify CDN images accept a width parameter; 108 px covers the 54 px thumbnail on 2× screens. const thumbnailUrl = (src) => { try { const u = new URL(src) u.searchParams.set('width', '108') return u.toString() } catch (e) { return src } } const ICON = { refresh: '', arrow: '', } /* ------------------------------------------------------------------- data */ const contractsEndpoint = () => `/${CONFIG.proxyPath.replace(/^\/|\/$/g, '')}/contracts` // Response: { subscriptions: SubscriptionContractFull[], pageInfo }, see // apps/subscriptions/src/routes/api/shopify/proxy/-lib/dispatch.ts (`contracts`). const fetchContracts = () => { const endpoint = contractsEndpoint() const started = Date.now() const signal = typeof AbortSignal !== 'undefined' && typeof AbortSignal.timeout === 'function' ? AbortSignal.timeout(PROXY_TIMEOUT_MS) : undefined return fetch(endpoint, { method: 'POST', credentials: 'same-origin', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: '{}', signal, }).then((res) => res .json() .catch(() => null) .then((body) => { if (!res.ok) { const code = body && body.error ? body.error : 'no JSON body' const hint = code === 'customer_required' ? ' (Shopify sent no logged_in_customer_id: is the customer signed in to the storefront?)' : '' throw new Error(`${endpoint} answered ${res.status} ${code}${hint}`) } if (!(body && Array.isArray(body.subscriptions))) { throw new Error(`${endpoint} returned an unexpected payload`) } log.debug( `Loaded ${body.subscriptions.length} subscription contract(s) in ${Date.now() - started} ms`, body.subscriptions.map((c) => ({ id: c.id, status: c.status })), ) return body.subscriptions }), ) } const SHOWN_STATUSES = ['ACTIVE', 'PAUSED'] const nextDateOf = (contract) => parseDate((contract.nextOrder && contract.nextOrder.billingDate) || contract.nextBillingDate) // Active before paused, then the soonest next delivery. Cancelled, expired and // failed contracts don't count, so those customers see the nudge. const pickContract = (contracts) => contracts .filter((c) => c && SHOWN_STATUSES.includes(c.status)) .sort((a, b) => { const byStatus = SHOWN_STATUSES.indexOf(a.status) - SHOWN_STATUSES.indexOf(b.status) if (byStatus !== 0) return byStatus const da = nextDateOf(a) const db = nextDateOf(b) return ( (da ? da.getTime() : Number.POSITIVE_INFINITY) - (db ? db.getTime() : Number.POSITIVE_INFINITY) ) })[0] || null const toView = (contracts) => { const contract = pickContract(contracts) if (!contract) return { kind: 'nudge' } // nextOrder has pending billing-cycle edits applied, so it lists what actually ships next. const nextLines = contract.nextOrder && contract.nextOrder.lines const baseLines = ((contract.lines && contract.lines.edges) || []).map((edge) => edge.node) return { kind: 'subscription', id: contract.id, status: contract.status, // A paused contract keeps its next billing date, but nothing ships until it's resumed. nextDate: contract.status === 'ACTIVE' ? nextDateOf(contract) : null, billing: intervalOf(contract.billingPolicy), delivery: intervalOf(contract.deliveryPolicy), lines: nextLines && nextLines.length > 0 ? nextLines : baseLines, } } let view = null /* ---------------------------------------------------------------- styles */ const CSS = ` #${ROOT_ID}{--mnab-ink:#33282a;--mnab-text:#3b3233;--mnab-muted:#6e6566;--mnab-nudge:#e5e6e2;--mnab-active:#efebe6;--mnab-paper:#fffefc;--mnab-mustard:#d4952b;--mnab-green:#2e7d32;--mnab-dot:#3c9d3c;--mnab-track:#dcd6cf;--mnab-line:#e8e3dd; display:block!important;margin:28px 0 0;color:var(--mnab-text);font-family:inherit;font-size:14px;line-height:1.5;text-align:left;-webkit-font-smoothing:antialiased} #${ROOT_ID} *,#${ROOT_ID} *::before,#${ROOT_ID} *::after{box-sizing:border-box} #${ROOT_ID} :where(h3,p){margin:0;padding:0} #${ROOT_ID} .mnab-icon{width:14px;height:14px;flex:none} #${ROOT_ID} .mnab-card{position:relative;border-radius:16px;padding:22px 20px} #${ROOT_ID} .mnab-card--nudge{background:var(--mnab-nudge)} #${ROOT_ID} .mnab-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:var(--mnab-paper);color:var(--mnab-ink);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2} #${ROOT_ID} .mnab-seal{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--mnab-ink);color:var(--mnab-paper);line-height:1;text-align:center} #${ROOT_ID} .mnab-seal small{font-size:7.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} #${ROOT_ID} .mnab-seal strong{margin-top:2px;font-size:15px;font-weight:700;white-space:nowrap} #${ROOT_ID} .mnab-title{margin-top:18px;padding-right:64px;color:var(--mnab-ink);font-family:var(--mnab-serif);font-size:19px;font-weight:400;line-height:1.3;letter-spacing:0} #${ROOT_ID} .mnab-text{margin-top:14px;color:var(--mnab-muted);font-size:13.5px;line-height:1.6} #${ROOT_ID} .mnab-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;padding:0 21px;border-radius:999px;background:var(--mnab-mustard);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:filter .2s} #${ROOT_ID} .mnab-cta:hover{filter:brightness(.94)} #${ROOT_ID} .mnab-card--active{background:var(--mnab-active);padding-bottom:8px} #${ROOT_ID} .mnab-head{display:flex;align-items:center;justify-content:space-between;gap:12px} #${ROOT_ID} .mnab-label{display:inline-flex;align-items:center;gap:8px;color:var(--mnab-muted);font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.2} #${ROOT_ID} .mnab-status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:var(--mnab-paper);color:var(--mnab-ink);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.2} #${ROOT_ID} .mnab-status i{width:7px;height:7px;border-radius:50%;background:var(--mnab-dot)} #${ROOT_ID} .mnab-status--paused i{background:var(--mnab-mustard)} #${ROOT_ID} .mnab-meta{margin-top:22px;color:var(--mnab-muted);font-size:12.5px} #${ROOT_ID} .mnab-date{margin-top:2px;color:var(--mnab-ink);font-family:var(--mnab-serif);font-size:22px;font-weight:400;line-height:1.3} #${ROOT_ID} .mnab-progress{height:4px;margin-top:18px;overflow:hidden;border-radius:999px;background:var(--mnab-track)} #${ROOT_ID} .mnab-progress span{display:block;height:100%;border-radius:inherit;background:var(--mnab-ink)} #${ROOT_ID} .mnab-progress-labels{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--mnab-muted);font-size:11px} #${ROOT_ID} .mnab-item{margin:18px -12px 0;padding:14px 12px 0;border-radius:12px;background:var(--mnab-paper)} #${ROOT_ID} .mnab-item-row{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:start} #${ROOT_ID} .mnab-item-row+.mnab-item-row{margin-top:12px} #${ROOT_ID} .mnab-item-img{display:block;width:54px;height:54px;border-radius:8px;object-fit:cover;background:#efe9e1} #${ROOT_ID} .mnab-item-title{color:var(--mnab-ink);font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere} #${ROOT_ID} .mnab-item-meta{margin-top:4px;color:var(--mnab-muted);font-size:12.5px} #${ROOT_ID} .mnab-item-price{margin-top:4px;color:var(--mnab-green);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums} #${ROOT_ID} .mnab-manage{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;margin-top:14px;border-top:1px solid var(--mnab-line);color:var(--mnab-ink);font-size:13.5px;font-weight:600;text-decoration:none} #${ROOT_ID} .mnab-manage:hover .mnab-icon{transform:translateX(2px)} #${ROOT_ID} .mnab-manage .mnab-icon{transition:transform .2s} #${ROOT_ID} a:focus-visible{outline:2px solid var(--mnab-ink);outline-offset:2px} @media (prefers-reduced-motion:reduce){#${ROOT_ID} *{transition:none!important}} ` const injectStyle = () => { if (document.getElementById(STYLE_ID)) return const style = document.createElement('style') style.id = STYLE_ID style.textContent = CSS document.head.appendChild(style) log.debug('Styles injected', `#${STYLE_ID}`) } /* ---------------------------------------------------------------- markup */ const nudgeHTML = (s) => { const max = fmt.percent(CONFIG.maxDiscount) return `

${ICON.refresh}${esc(s.nudgeTag)}

${esc(s.nudgeTitle(max))}

${esc(s.nudgeText)}

${esc(s.nudgeCta)}${ICON.arrow}

` } const scheduleHTML = (s, next, billing) => { const end = startOfDay(next) const start = shiftDate(end, billing.unit, -billing.count) const daysLeft = Math.max(0, Math.round((end - today()) / DAY_MS)) const dateHTML = `

${esc(s.nextDelivery)}

${esc(fmt.date(next))}

` if (!start) return dateHTML const totalDays = Math.max(1, Math.round((end - start) / DAY_MS)) const elapsed = Math.min(totalDays, Math.max(0, totalDays - daysLeft)) const progress = Math.round((elapsed / totalDays) * 100) return `${dateHTML}

` } // `paid` includes contract discounts (box tiers live there, not on the selling plan); // `regular` is the price before selling plan discounts. Both are for the whole line. const lineTotals = (line, quantity) => { const unit = Number(line.currentPrice && line.currentPrice.amount) || 0 const base = line.pricingPolicy && line.pricingPolicy.basePrice ? Number(line.pricingPolicy.basePrice.amount) : unit const paid = line.lineDiscountedPrice ? Number(line.lineDiscountedPrice.amount) : unit * quantity return { paid, regular: base * quantity } } const priceText = (s, line, quantity) => { if (!line.currentPrice) return '' const currency = line.currentPrice.currencyCode const { paid, regular } = lineTotals(line, quantity) if (Math.round(regular * 100) <= Math.round(paid * 100)) return fmt.money(paid, currency) const discount = Math.round((1 - paid / regular) * 1000) / 10 return s.price(fmt.money(paid, currency), fmt.money(regular, currency), fmt.percent(discount)) } const lineHTML = (s, line, every) => { const quantity = Number(line.quantity) || 1 const variant = line.variantTitle && line.variantTitle !== 'Default Title' ? line.variantTitle : '' // One-time add-ons and loyalty rewards ship once, so the interval doesn't apply to them. const recurring = !(line.isOneTime || line.isReward) const meta = [quantity > 1 ? `${quantity} ×` : '', variant, recurring ? every : ''] .filter(Boolean) .join(' · ') const price = priceText(s, line, quantity) const image = line.variantImage && line.variantImage.url ? `

` : '' return `

${image}

${esc(line.title || '')}

${meta ? `

${esc(meta)}

` : ''} ${price ? `

${esc(price)}

` : ''}

` } const subscriptionHTML = (s, sub) => { const paused = sub.status === 'PAUSED' const every = s.every(sub.delivery.count, sub.delivery.unit) return `

${ICON.refresh}${esc(s.activeTag)}

${esc(paused ? s.statusPaused : s.statusActive)}

${sub.nextDate ? scheduleHTML(s, sub.nextDate, sub.billing) : ''}

${sub.lines.map((line) => lineHTML(s, line, every)).join('')} ${esc(s.manage)}${ICON.arrow}

` } /* ------------------------------------------------------------------ widget */ let root = null let card = null const renderCard = () => { if (!(card && view)) return try { const s = strings() card.innerHTML = view.kind === 'subscription' ? subscriptionHTML(s, view) : nudgeHTML(s) log.debug( `Rendered "${view.kind}" card`, view.kind === 'subscription' ? { contract: view.id, status: view.status, nextDelivery: view.nextDate, lines: view.lines.length, lang: pageLang(), } : { maxDiscount: CONFIG.maxDiscount, lang: pageLang() }, ) } catch (e) { log.error('Rendering the card failed', e) } } const buildRoot = () => { const el = document.createElement('div') el.id = ROOT_ID el.style.setProperty('--mnab-serif', CONFIG.serifFont) card = document.createElement('div') el.appendChild(card) renderCard() log.debug('Widget element built', { view: view && view.kind }) return el } /* ---------------------------------------------------------- mount / gate */ let allowed = false let scheduled = false let mountCount = 0 let lastAnchorKey = '' let lastVisibility = '' let reattachTimes = [] let pausedUntil = 0 let verifyTimers = [] const describe = (el) => { if (!el || el.nodeType !== 1) return String(el) const cls = Array.from(el.classList).slice(0, 3).join('.') return `${el.tagName.toLowerCase()}${el.id ? `#${el.id}` : ''}${cls ? `.${cls}` : ''}` } // getClientRects() is empty for elements that are detached or inside display:none. const isRendered = (el) => Boolean(el && el.isConnected && el.getClientRects().length > 0) // The drawer can contain several copies of the anchor (hidden pages, skeletons, // mobile/desktop variants). Prefer the first one that is actually rendered. const findAnchor = () => { const all = Array.from(document.querySelectorAll(CONFIG.anchorSelector)) const visible = all.filter(isRendered) const picked = visible[0] || all[0] || null const anchor = picked && CONFIG.anchorClosest ? picked.closest(CONFIG.anchorClosest) || picked : picked return { anchor, all, total: all.length, visible: visible.length } } // Walks up from el and names the first reason it can't be seen. const visibilityReport = (el) => { if (!el) return { visible: false, reason: 'no element' } if (!el.isConnected) return { visible: false, reason: 'not in the DOM' } const rect = el.getBoundingClientRect() for (let node = el; node && node.nodeType === 1; node = node.parentElement) { const cs = getComputedStyle(node) if (cs.display === 'none') return { visible: false, reason: `display:none on ${describe(node)}` } if (cs.visibility === 'hidden' || cs.visibility === 'collapse') { return { visible: false, reason: `visibility:${cs.visibility} on ${describe(node)}` } } if (cs.opacity !== '' && Number(cs.opacity) === 0) return { visible: false, reason: `opacity:0 on ${describe(node)}` } if (node !== el && /hidden|clip/.test(`${cs.overflow} ${cs.overflowY}`)) { const box = node.getBoundingClientRect() if (rect.top >= box.bottom || rect.bottom <= box.top) { return { visible: false, reason: `clipped by overflow:${cs.overflowY} on ${describe(node)} (box height ${Math.round(box.height)}px)`, } } } } if (rect.width === 0 || rect.height === 0) { return { visible: false, reason: `zero size (${Math.round(rect.width)}×${Math.round(rect.height)})`, } } return { visible: true, size: `${Math.round(rect.width)}×${Math.round(rect.height)}` } } // Checks a moment after mounting (the drawer animates in) whether the widget can be seen. const verifyMount = () => { verifyTimers.forEach(clearTimeout) verifyTimers = [600, 1500].map((delay) => setTimeout(() => { if (!(allowed && root)) return const report = visibilityReport(root) const key = report.visible ? 'visible' : report.reason if (key === lastVisibility) return lastVisibility = key if (report.visible) { log.info(`Widget visible (${report.size})`, { parent: describe(root.parentElement) }) } else if (root.isConnected) { log.warn(`Widget is in the DOM but not visible: ${report.reason}`, { parent: describe(root.parentElement), hint: 'Run mnabAbo.inspect() for details.', }) } else { log.warn('Widget was removed from the DOM after mounting', { mountCount }) } }, delay), ) } const mount = () => { scheduled = false if (!allowed) return const found = findAnchor() const key = `${found.total}/${found.visible}/${found.anchor ? describe(found.anchor) : '-'}` if (key !== lastAnchorKey) { lastAnchorKey = key if (found.anchor) { log.debug( `Anchor ${CONFIG.anchorSelector}: ${found.total} found, ${found.visible} rendered → using ${describe(found.anchor)}` + (found.visible === 0 ? ' (none rendered yet)' : ''), found.all, ) } else { log.debug( `Anchor ${CONFIG.anchorSelector} not in the DOM yet; waiting for the drawer to render it`, ) } } if (!found.anchor || (root && found.anchor.nextElementSibling === root)) return // Don't fight the drawer if it keeps throwing the widget out. const now = Date.now() if (now < pausedUntil) return reattachTimes = reattachTimes.filter((time) => now - time < 5000) if (reattachTimes.length >= 10) { pausedUntil = now + 3000 log.warn('The drawer keeps removing the widget (10× in 5 s); pausing re-attach for 3 s', { anchorParent: describe(found.anchor.parentElement), }) setTimeout(scheduleMount, 3100) return } try { if (!root) root = buildRoot() const wasRemoved = mountCount > 0 && !root.isConnected found.anchor.insertAdjacentElement('afterend', root) reattachTimes.push(now) mountCount += 1 const details = { after: describe(found.anchor), parent: describe(root.parentElement), view: view && view.kind, } if (mountCount === 1) log.info('Widget mounted', details) else if (wasRemoved) log.info(`Widget was removed by the drawer; re-attached (#${mountCount})`, details) else log.info(`Widget moved to a different anchor (#${mountCount})`, details) lastVisibility = '' verifyMount() } catch (e) { log.error('Mounting the widget failed', e) } } const scheduleMount = () => { if (scheduled) return scheduled = true requestAnimationFrame(mount) } const unmount = () => { if (root && root.parentNode) { root.parentNode.removeChild(root) log.info('Widget removed') } } // Rivo renders the drawer with Alpine.js and swaps parts of it as pages load, so // re-check placement on DOM and visibility changes (debounced to one check per frame). const observer = new MutationObserver(() => { if (allowed) scheduleMount() }) const observe = () => observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'style', 'hidden'], }) const readAlpineCustomer = () => { try { const alpine = window.RivoProfileAlpine const store = alpine && typeof alpine.store === 'function' ? alpine.store('rivo_profile_customer') : null return store && store.email ? store : null } catch (e) { return null } } // Rivo's Alpine store has the signed-in customer without an extra request; // RivoJS.getCustomerDetails() is the fallback. const waitForCustomerSource = (timeoutMs = 30_000) => new Promise((resolve, reject) => { const started = Date.now() let announced = false const tick = () => { const store = readAlpineCustomer() if (store) { log.debug(`Customer found in RivoProfileAlpine store after ${Date.now() - started} ms`) return resolve({ source: 'RivoProfileAlpine store', customer: store }) } if (window.RivoJS && typeof window.RivoJS.getCustomerDetails === 'function') { log.debug(`RivoJS ready after ${Date.now() - started} ms`) return resolve({ source: 'RivoJS.getCustomerDetails', rivo: window.RivoJS }) } if (Date.now() - started > timeoutMs) { return reject( new Error( `Neither the Rivo customer store nor RivoJS was available after ${timeoutMs} ms`, ), ) } if (!announced) { log.debug('Waiting for Rivo customer data …') announced = true } setTimeout(tick, 250) } tick() }) // Every signed-in customer sees the widget. Guests are skipped, since the app proxy // can't identify them and the subscriptions request would only fail. const checkCustomer = () => waitForCustomerSource() .then((src) => src.customer ? src : src.rivo.getCustomerDetails().then((resp) => { if (resp && resp.success === false) log.debug('getCustomerDetails returned success: false (guest?)', resp) return { source: src.source, customer: resp && (resp.customer || resp) } }), ) .then(({ source, customer }) => { const email = customer && customer.email ? String(customer.email).trim().toLowerCase() : '' const ok = Boolean(email) log.info(ok ? 'Customer signed in' : 'No signed-in customer; widget stays hidden', { email: maskEmail(email), customerId: customer && (customer.id || customer.remote_id), source, }) return ok }) .catch((e) => { log.warn('Customer check failed; widget stays hidden', e) return false }) // Resolves to the view to render, or null when the widget should stay hidden. const loadView = () => fetchContracts() .then((contracts) => toView(contracts)) .catch((e) => { log.warn('Loading subscriptions failed; widget stays hidden', e) return null }) let refreshRun = 0 const refresh = (reason = 'manual') => { const run = ++refreshRun log.debug(`Checking customer (${reason})`) return checkCustomer() .then((ok) => (ok ? loadView() : null)) .then((next) => { if (run !== refreshRun) { log.debug(`Ignoring outdated refresh #${run}`) return } view = next allowed = Boolean(next) if (allowed) { injectStyle() renderCard() observe() scheduleMount() } else { observer.disconnect() unmount() } }) } // Events may be dispatched on document and bubble to window; log each dispatch once. const on = (name, handler) => { let lastEvent = null const wrapped = (event) => { if (event === lastEvent) return lastEvent = event log.debug(`Event ${name}`, event && event.detail !== undefined ? event.detail : '') handler(event) } document.addEventListener(name, wrapped) window.addEventListener(name, wrapped) } on('rivo-accounts:loaded', scheduleMount) on('rivo-accounts:widget:open', () => { scheduleMount() lastVisibility = '' verifyMount() }) on('rivo-accounts:widget:close', () => {}) // logged only on('rivo-accounts:shopify:login', () => refresh('login')) on('rivo-accounts:shopify:logout', () => { refreshRun += 1 allowed = false view = null observer.disconnect() unmount() }) // Runtime handle for debugging in the console. window.mnabAbo = { version: VERSION, getState: () => ({ view, allowed, mounted: Boolean(root && root.isConnected), mountCount, }), // Prints every anchor match, where the widget sits and why it might be invisible, // then outlines the widget for 3 s. inspect: () => { const found = findAnchor() const rows = found.all.map((el, index) => ({ index, anchor: describe(el), rendered: isRendered(el), chosen: el === found.anchor || Boolean(CONFIG.anchorClosest && el.closest(CONFIG.anchorClosest) === found.anchor), parent: describe(el.parentElement), nextSibling: describe(el.nextElementSibling), ...visibilityReport(el), })) write('info', [`${rows.length} × ${CONFIG.anchorSelector}`]) if (rows.length) console.table(rows) const widget = { allowed, view: view && view.kind, built: Boolean(root), mounted: Boolean(root && root.isConnected), parent: root ? describe(root.parentElement) : null, mountCount, ...(root ? visibilityReport(root) : { visible: false, reason: 'not built yet' }), alpineStore: Boolean(readAlpineCustomer()), rivoJS: Boolean(window.RivoJS), } write('info', ['Widget', widget]) if (root && root.isConnected) { root.style.outline = '2px dashed magenta' if (typeof root.scrollIntoView === 'function') root.scrollIntoView({ block: 'nearest' }) setTimeout(() => root.style.removeProperty('outline'), 3000) } return { anchors: rows, widget } }, // Re-checks the customer and reloads their subscriptions. refresh: () => refresh('console'), mount: () => mount(), debug: (on = true) => { try { if (on) localStorage.setItem(DEBUG_KEY, '1') else localStorage.removeItem(DEBUG_KEY) } catch (e) { /* storage unavailable */ } write('info', [ `Debug logging ${on ? 'enabled' : 'disabled'} for this browser; reload to apply`, ]) }, } log.info(`Abo widget v${VERSION} loaded`, { lang: pageLang(), anchor: CONFIG.anchorSelector, proxy: contractsEndpoint(), debug: debugEnabled, }) if (document.body) refresh('init') else document.addEventListener('DOMContentLoaded', () => refresh('DOMContentLoaded'), { once: true }) })()

Winkelwagen

Gewährleistungsrecht