\n CR\n
\n \n
\n ${formatCredits(creditAward.credits)} Credits
\nAdded to your account
\n${escapeHtml(copy)}
\n\n
\n `;\n }\n if (state.loading) {\n return `Raffles
\nSign in to enter Raffles
\n \nRaffles
Loading raffles...
Raffles
No raffles are live right now.
\n
\n Raffles
\n${escapeHtml(raffleFreeEntryLabel(raffles[0]))}
\n\n ${raffles.map((raffle) => raffleCardMarkup(raffle)).join(\"\")}\n
\n `;\n };\n\n const raffleCardMarkup = (raffle) => `\n \n `;\n\n const raffleDetailMarkup = (raffle, state = {}) => {\n const isActive = raffle.status === \"active\";\n const creditBalance = Number(state.creditBalance || 0);\n const ticketBalance = Number(state.ticketBalance || 0);\n const paidEntriesRemaining = Math.max(0, Number(raffle.paidEntriesRemaining ?? 10) || 0);\n const ticketMaxQuantity = Math.max(0, Math.min(10, paidEntriesRemaining));\n const creditCostPerEntry = Math.max(0, Number(raffle.ticketCostCredits || 0) || 0);\n const creditMaxQuantity = creditCostPerEntry > 0 ? Math.min(25, Math.floor(creditBalance / creditCostPerEntry)) : 0;\n const maxQuantity = Math.max(1, ticketMaxQuantity, creditMaxQuantity);\n const quantity = Math.max(1, Math.min(maxQuantity, Number(state.quantity || 1)));\n const ticketCost = quantity;\n const creditCost = creditCostPerEntry * quantity;\n const canUseTickets = ticketBalance >= ticketCost && quantity <= ticketMaxQuantity;\n const canUseCredits = creditCostPerEntry > 0 && creditBalance >= creditCost && quantity <= creditMaxQuantity;\n const ticketVariantAvailable = Boolean(String(state.ticketVariantId || \"\").trim());\n const freeDisabled = !state.loggedIn || !isActive || !raffle.freeEntryAvailable || Boolean(state.busyAction);\n const ticketDisabled = !state.loggedIn || !isActive || !canUseTickets || Boolean(state.busyAction);\n const creditDisabled = !state.loggedIn || !isActive || !canUseCredits || Boolean(state.busyAction);\n const buyDisabled = !state.loggedIn || !isActive || !ticketVariantAvailable || Boolean(state.busyAction);\n const description = raffleDescriptionCopy(raffle);\n const usesDetailModel = raffleDetailUsesModel(raffle);\n return `\n \n \n
\n `;\n };\n\n const raffleDetailMediaMarkup = (raffle) => {\n const modelUrl = String(raffle.modelUrl || \"\").trim();\n const imageUrl = String(raffle.imageUrl || \"\").trim();\n if (imageUrl) return `\n ${raffleDetailMediaMarkup(raffle)}\n
\n \n
\n ${escapeHtml(raffleStatusLabel(raffle))}
\n${escapeHtml(raffle.title || \"Raffle\")}
\n ${description ? `${escapeHtml(description)}
` : \"\"}\n- \n
- Your entries
- ${formatCredits(raffle.customerEntries || 0)}
- Total entries
- ${formatCredits(raffle.totalEntries || 0)}
- Your odds
- ${formatProbability(raffle.winProbability || 0)}
- Your tickets
- ${formatCredits(ticketBalance)}
${raffleRulesCopy(raffle)}
\n\n \n
\n \n \n ${quantity}\n \n
\n \n \n \n You won this raffle.
`;\n if (raffle.winningEntryId) return `Winner selected.
`;\n return `Raffle closed with no entries.
`;\n };\n\n const raffleRulesCopy = (raffle) =>\n `No purchase needed: use the free entry when it is available. Paid entries can use raffle tickets or credits. Ticket entries use 1 ticket each, up to ${formatCredits(raffle.paidEntryLimit || 10)} per raffle. Credit entries are ${formatCredits(raffle.ticketCostCredits || 0)} credits each. Enter before the raffle closes; one winner is selected at random after the end time. Keep your account address current so we can ship the prize.`;\n\n const raffleStatusLabel = (raffle) => {\n if (raffle.status === \"finalized\") return raffle.isWinner ? \"Winner\" : \"Finalized\";\n if (raffle.status === \"closed\") return \"Drawing soon\";\n if (raffle.status === \"scheduled\") return raffleTimerLabel(\"scheduled\", raffle.startsAt);\n return raffleTimerLabel(\"active\", raffle.endsAt);\n };\n\n const raffleTimerAttrs = (raffle) => {\n if (raffle.status !== \"active\" && raffle.status !== \"scheduled\") return \"\";\n const target = raffle.status === \"scheduled\" ? raffle.startsAt : raffle.endsAt;\n if (!Number.isFinite(Date.parse(target || \"\"))) return \"\";\n return ` data-raffle-timer data-raffle-status=\"${escapeAttr(raffle.status)}\" data-raffle-target=\"${escapeAttr(target)}\"`;\n };\n\n const raffleTimerLabel = (status, target) => {\n if (status === \"scheduled\") return `Starts ${countdownLabel(target, \"soon\")}`;\n if (status === \"active\") {\n const timestamp = Date.parse(target || \"\");\n if (Number.isFinite(timestamp) && timestamp <= Date.now()) return \"Drawing soon\";\n return `Ends ${countdownLabel(target, \"soon\")}`;\n }\n return \"\";\n };\n\n const countdownLabel = (value, fallback = \"soon\") => {\n const timestamp = Date.parse(value || \"\");\n if (!Number.isFinite(timestamp)) return fallback;\n const totalSeconds = Math.max(0, Math.floor((timestamp - Date.now()) / 1000));\n if (totalSeconds <= 0) return \"now\";\n const days = Math.floor(totalSeconds / 86400);\n const hours = Math.floor((totalSeconds % 86400) / 3600);\n const minutes = Math.floor((totalSeconds % 3600) / 60);\n const seconds = totalSeconds % 60;\n if (days > 0) return `in ${days}d ${hours}h ${minutes}m ${seconds}s`;\n if (hours > 0) return `in ${hours}h ${minutes}m ${seconds}s`;\n return `in ${minutes}m ${seconds}s`;\n };\n\n const raffleFreeEntryLabel = (raffle) =>\n raffle?.freeEntryAvailable ? \"One free entry is available.\" : `Free entry ${relativeTimeLabel(raffle?.freeEntryAvailableAt)}`;\n\n const relativeTimeLabel = (value) => {\n const timestamp = Date.parse(value || \"\");\n if (!Number.isFinite(timestamp)) return \"soon\";\n const diffMs = timestamp - Date.now();\n const abs = Math.abs(diffMs);\n if (abs < 60 * 1000) return diffMs >= 0 ? \"in less than a minute\" : \"just now\";\n const minutes = Math.round(abs / 60000);\n if (minutes < 60) return `${diffMs >= 0 ? \"in \" : \"\"}${minutes}m${diffMs < 0 ? \" ago\" : \"\"}`;\n const hours = Math.round(minutes / 60);\n if (hours < 48) return `${diffMs >= 0 ? \"in \" : \"\"}${hours}h${diffMs < 0 ? \" ago\" : \"\"}`;\n const days = Math.round(hours / 24);\n return `${diffMs >= 0 ? \"in \" : \"\"}${days}d${diffMs < 0 ? \" ago\" : \"\"}`;\n };\n\n const formatProbability = (value) => {\n const percent = Math.max(0, Math.min(1, Number(value) || 0)) * 100;\n if (percent === 0) return \"0%\";\n if (percent < 1) return `${percent.toFixed(2)}%`;\n return `${percent.toFixed(1).replace(/\\.0$/, \"\")}%`;\n };\n\n const packRevealMarkup = (purchase, remainingCount, status = {}) => {\n const items = Array.isArray(purchase.items) ? purchase.items : [];\n const creditAward = packRevealCreditAward(purchase);\n const creditsAwarded = Boolean(creditAward);\n const settled = isRewardSettled(purchase);\n const notice = status.message || (creditsAwarded ? \"\" : settled ? rewardSettledMessage(purchase) : \"\");\n const shipDisabled = status.shipping || status.selling || settled;\n const sellAvailable = Number(purchase.buybackCredits || 0) > 0 && !shipDisabled;\n\n const creditAwardItem = creditsAwarded\n ? `\n\n REVEALED\n ${formatCredits(creditAward.credits)} CREDITS ADDED\n ${escapeHtml(packSourceLabel(purchase))}\n
\n \n \n \n
\n \n CR\n
\n \n
\n ${formatCredits(creditAward.credits)} Credits
\nAdded to your account
\n\n \n
\n ${notice ? `${escapeHtml(notice)}
` : \"\"}\n `;\n }\n\n const revealItemCount = items.length + (creditsAwarded ? 1 : 0);\n const revealSummary = creditsAwarded\n ? `${items.length} ITEM${items.length === 1 ? \"\" : \"S\"} + ${formatCredits(creditAward.credits)} CREDITS SECURED`\n : `${items.length} ITEM${items.length === 1 ? \"\" : \"S\"} SECURED`;\n\n return `\n\n REVEALED\n ${revealSummary}\n ${escapeHtml(packSourceLabel(purchase))}\n
\n \n ${creditAwardItem}\n ${items.map((item) => `\n \n \n `).join(\"\")}\n
\n \n ${item.imageUrl ? `![\"${escapeAttr(item.productTitle)}\"](\"${escapeAttr(item.imageUrl)}\")
` : \"\"}\n ${escapeHtml(String(item.productTitle || \"WL\").slice(0, 2).toUpperCase())}\n
\n \n
\n ${escapeHtml(item.productTitle)}
\n${escapeHtml(item.variantTitle || item.size || \"\")}${packRevealRetailText(item)}
\n\n \n ${status.shipping ? \"CREATING SHIPMENT\" : settled ? rewardSettledActionLabel(purchase) : \"SHIP\"}\n \n \n ${status.selling\n ? \"SELLING BACK\"\n : settled\n ? \"ALREADY SETTLED\"\n : Number(purchase.buybackCredits || 0) > 0\n ? `SELL FOR ${formatCredits(purchase.buybackCredits || 0)} CREDITS`\n : \"NO SELLBACK CREDITS\"}\n \n \n
\n ${notice ? `${escapeHtml(notice)}
` : \"\"}\n `;\n };\n\n const bindRevealImageFallbacks = (root) => {\n root.querySelectorAll(\"[data-pack-reveal-image]\").forEach((image) => {\n if (!(image instanceof HTMLImageElement)) return;\n const fallback = image.nextElementSibling;\n const showFallback = () => {\n image.hidden = true;\n if (fallback instanceof HTMLElement) fallback.hidden = false;\n };\n const hideFallback = () => {\n image.hidden = false;\n if (fallback instanceof HTMLElement) fallback.hidden = true;\n };\n\n image.addEventListener(\"load\", () => (image.naturalWidth > 0 ? hideFallback() : showFallback()), { once: true });\n image.addEventListener(\"error\", showFallback, { once: true });\n if (image.complete) {\n if (image.naturalWidth > 0) hideFallback();\n else showFallback();\n }\n });\n };\n\n const isRewardSettled = (purchase) =>\n purchase?.state === \"credits_awarded\" ||\n purchase?.state === \"fulfillment_created\" ||\n purchase?.state === \"sold_back\" ||\n purchase?.state === \"voided\" ||\n Boolean(purchase?.settledAt && purchase?.state !== \"opened\");\n\n const rewardSettledActionLabel = (purchase) => {\n if (purchase?.state === \"credits_awarded\") return \"CREDITS ADDED\";\n if (purchase?.state === \"sold_back\") return \"SOLD BACK\";\n if (purchase?.state === \"voided\") return \"NO LONGER AVAILABLE\";\n return \"SHIPPING CREATED\";\n };\n\n const rewardSettledMessage = (purchase) => {\n if (purchase?.state === \"credits_awarded\") return \"\";\n if (purchase?.state === \"sold_back\") return \"This reward was already sold back for credits.\";\n if (purchase?.state === \"voided\") return \"This reward is no longer available.\";\n return \"This reward already has a shipping order.\";\n };\n\n const packRevealRetailText = (item) => {\n const retailUsd = Number(item.retailUsd);\n if (!Number.isFinite(retailUsd) || retailUsd <= 0) return \"\";\n return ` / Retail ${formatUsd(retailUsd)}`;\n };\n\n const packRevealCreditAward = (purchase) => {\n const award = purchase?.creditAward || null;\n const credits = Number(award?.credits || 0);\n if (!award || !Number.isFinite(credits) || credits <= 0) return null;\n if (purchase?.state === \"credits_awarded\" || award.state === \"granted\") {\n return { ...award, credits };\n }\n return null;\n };\n\n const buildTestRevealPurchase = (pack, packSize) => {\n const now = new Date().toISOString();\n return {\n id: `animation-test-${pack.packKey || \"pack\"}`,\n shopifyOrderId: \"animation-test\",\n shopifyOrderName: \"Animation Test\",\n shopifyRevealOrderId: \"animation-test\",\n packKey: pack.packKey,\n packTitle: pack.packName || pack.title || \"WL Pack\",\n packSize,\n state: \"fulfillment_created\",\n items: buildTestRevealItems(pack, packSize),\n createdAt: now,\n openedAt: now\n };\n };\n\n const buildCreditOpeningPurchase = (pending) => {\n const now = new Date().toISOString();\n const pack = pending.pack || {};\n const variant = pending.variant || {};\n const packTitle = pack.packName || pack.title || \"WL Pack\";\n return {\n id: `credit-opening-${pending.idempotencyKey || variant.id || Date.now()}`,\n shopifyOrderId: \"credit-pending\",\n shopifyOrderName: \"Credit purchase\",\n shopifyRevealOrderId: null,\n packProductId: String(pack.productId || pack.id || \"\"),\n packVariantId: String(variant.id || \"\"),\n packKey: pack.packKey || packKeyForPayload(pack),\n packTitle,\n packSize: pending.packSize || variant.size || \"\",\n packTeam: pending.packTeam || null,\n packPriceCents: packPriceCents(pack, variant),\n buybackCredits: 0,\n canShip: true,\n state: \"allocated\",\n items: [],\n createdAt: now,\n openedAt: null,\n settledAt: null\n };\n };\n\n const findCreditPurchaseByIdempotency = (state, idempotencyKey) => {\n if (!state || !idempotencyKey) return null;\n const purchases = [\n ...(Array.isArray(state.openedPacks) ? state.openedPacks : []),\n ...(Array.isArray(state.unopenedPacks) ? state.unopenedPacks : []),\n ...(Array.isArray(state.settledPacks) ? state.settledPacks : [])\n ];\n return purchases.find((purchase) => String(purchase.shopifyOrderId || \"\").includes(idempotencyKey)) || null;\n };\n\n const buildTestRevealItems = (pack, packSize) => {\n const content = PACK_INFO_CONTENT[pack.packKey] || null;\n const sourceItems = [];\n if (content) {\n const guaranteedItems = Array.isArray(content.guaranteed) ? content.guaranteed : [];\n const randomSlots = Array.isArray(content.randomSlots) ? content.randomSlots : [];\n guaranteedItems\n .filter((item) => !/\\brandom item\\b/i.test(item))\n .forEach((item) => sourceItems.push(item));\n randomSlots.forEach((slot) => {\n const mostLikely = slot.odds[0]?.item;\n if (mostLikely) sourceItems.push(mostLikely);\n });\n }\n if (sourceItems.length === 0) sourceItems.push(\"Mystery item\");\n\n return sourceItems.map((item, index) => {\n const title = testRevealItemTitle(item);\n return {\n id: `animation-test-item-${index + 1}`,\n shopifyProductId: `animation-test-product-${index + 1}`,\n shopifyVariantId: `animation-test-variant-${index + 1}`,\n productTitle: title,\n variantTitle: testRevealVariantTitle(title, packSize),\n productType: \"Animation Test\",\n size: testRevealVariantTitle(title, packSize),\n imageUrl: \"\",\n sku: \"\",\n retailUsd: testRevealRetailValue(title),\n slotKey: `animation_test_${index + 1}`,\n state: \"order_created\"\n };\n });\n };\n\n const testRevealItemTitle = (value) =>\n String(value || \"Mystery item\")\n .replace(/^\\d+\\s+/g, \"\")\n .replace(/^1\\s+/i, \"\")\n .trim();\n\n const testRevealVariantTitle = (title, packSize) =>\n /\\b(t-?shirt|tee|hoodie|mainline|piece)\\b/i.test(title) ? packSize : \"OS\";\n\n const testRevealRetailValue = (title) => {\n if (/\\bmainline|piece\\b/i.test(title)) return 250;\n if (/\\bhoodie\\b/i.test(title)) return 120;\n if (/\\bt-?shirt|tee\\b/i.test(title)) return 60;\n if (/\\bhat\\b/i.test(title)) return 45;\n if (/\\bsock\\b/i.test(title)) return 25;\n if (/\\bpencil\\b/i.test(title)) return 10;\n return 35;\n };\n\n const packInfoMarkup = (content, displayName, displayPrice) => {\n const guaranteedItems = Array.isArray(content.guaranteed) ? content.guaranteed : [];\n const randomSlots = Array.isArray(content.randomSlots) ? content.randomSlots : [];\n return `\nPack odds
\n${escapeHtml(displayName)}
\n ${escapeHtml(displayPrice)}\n\n ${guaranteedItems.length ? `\n \n \n ` : \"\"}\n ${randomSlots.map((slot) => `\n \n \n `).join(\"\")}\n
\n `;\n };\n\n const bonusPackMenuLabel = (bonusState, hasKnownCustomer) => {\n if (!hasKnownCustomer) return \"Bonus Packs: Sign In\";\n if (!bonusState) return \"Bonus Packs\";\n if (bonusState.openedPack) return \"Bonus Pack Opened\";\n if (bonusState.unopenedPack) return \"Open Bonus Pack\";\n if (bonusState.eligible && !bonusState.claimed) return \"Bonus Pack Ready\";\n return \"No Bonus Pack Available\";\n };\n\n const packQueueReadyStatus = (unopenedCount) => {\n if (unopenedCount <= 1) return \"\";\n const remaining = unopenedCount - 1;\n return `1 OF ${unopenedCount} READY / ${packCountLabel(remaining)} AFTER THIS`;\n };\n\n const packQueueOpenedStatus = (queueTotal, remainingCount) => {\n const total = Math.max(queueTotal, remainingCount + 1);\n if (total <= 1) return \"\";\n const openedCount = Math.max(1, total - remainingCount);\n return `${openedCount} OF ${total} OPENED / ${packCountLabel(remainingCount)} REMAINING`;\n };\n\n const notificationPanelMarkup = (notifications, unreadCount) => `\n \n ${notifications.map((notification) => notificationMarkup(notification)).join(\"\")}\n `;\n\n const notificationPanelTitle = (totalCount, unreadCount) => {\n const activeLabel = `${totalCount} active pack${totalCount === 1 ? \"\" : \"s\"}`;\n if (unreadCount > 0) return `${unreadCount} new / ${activeLabel}`;\n return activeLabel;\n };\n\n const notificationMarkup = (notification) => `\n ${escapeHtml(content.guaranteedLabel || \"Guaranteed contents\")}
\n- \n ${guaranteedItems.map((item) => `
- ${escapeHtml(item)} `).join(\"\")}\n
${escapeHtml(slot.label)}
\n- \n ${slot.odds.map((odd) => `\n
- ${escapeHtml(odd.chance)} \n
- ${escapeHtml(odd.item)} \n
\n
\n `).join(\"\")}\n \n \n
\n \n ${escapeHtml(notification.detail)}
\n