As seen in
{[0,1,2,3].map(i => (
[ Press logo ]
))}
);
}
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroCopy": "Offer-led",
"previewDay": 39,
"previewDayOverride": false,
"showPress": false,
"stickyCta": true
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [member, setMember] = useS(() => loadMember());
const [page, setPage] = useS(() => (localStorage.getItem(PAGE_KEY) === "tracker" && loadMember()) ? "tracker" : "vault");
const [optin, setOptin] = useS(false);
const [phase, setPhase] = useS(null); // vault transition
const [checked, setChecked] = useS(() => (loadMember()?.checkedDays) || []);
const [claimed, setClaimed] = useS(() => loadMember()?.claimStatus === "submitted");
const [justChecked, setJustChecked] = useS(null);
const [stickyShow, setStickyShow] = useS(false);
const heroRef = useR(null);
// Designer override: when the Preview-day slider is touched it pins the view
// to that day. Real members run on a real clock derived from their start date.
const previewOverride = t.previewDayOverride === true;
// `tick` is bumped at each local-midnight rollover to force a recompute.
const [tick, setTick] = useS(0);
// Live current day: Day 1 on the local calendar day the member started, then
// +1 at 00:01 local time every new day, capped at 70. Preview slider wins when
// explicitly engaged (design tool), otherwise we always use the real clock.
const liveDay = member ? dayFromStart(member.startDate, new Date()) : 1;
const currentDay = previewOverride ? Math.round(t.previewDay || 1) : liveDay;
// Roll the clock over at 00:01 local time each new calendar day. Reschedules
// itself so it keeps ticking one box per day for the life of the session.
useE(() => {
if (page !== "tracker" || !member || previewOverride) return;
let timer;
const schedule = () => {
timer = setTimeout(() => {
setTick(x => x + 1); // recompute currentDay from the new local date
schedule();
}, msUntilNextLocalTick(new Date()));
};
schedule();
return () => clearTimeout(timer);
}, [page, member, previewOverride]);
// Also recompute if the tab was backgrounded across a midnight (timers can be
// throttled/suspended), so the day is correct the moment the user returns.
useE(() => {
if (previewOverride) return;
const onVis = () => { if (!document.hidden) setTick(x => x + 1); };
document.addEventListener("visibilitychange", onVis);
return () => document.removeEventListener("visibilitychange", onVis);
}, [previewOverride]);
useE(() => { localStorage.setItem(PAGE_KEY, page); }, [page]);
// sticky CTA visibility (mobile) — show once hero is scrolled past
useE(() => {
if (page !== "vault") { setStickyShow(false); return; }
const el = heroRef.current;
if (!el || !("IntersectionObserver" in window)) return;
const io = new IntersectionObserver(([e]) => setStickyShow(!e.isIntersecting), { threshold: 0 });
io.observe(el);
return () => io.disconnect();
}, [page]);
function openCta() { setOptin(true); }
function handleSubmit({ firstName, email }) {
const existing = loadMember();
const m = existing
? { ...existing, firstName, email }
: { firstName, email, startDate: new Date().toISOString(), checkedDays: [], subscriptionStatus: "active", claimStatus: "none", memberId: "mbr_" + Math.random().toString(36).slice(2, 9) };
saveMember(m);
setMember(m);
setChecked(m.checkedDays || []);
setClaimed(m.claimStatus === "submitted");
setOptin(false);
runTransition();
}
function runTransition() {
setPhase("closing");
setTimeout(() => setPhase("closed"), 820);
setTimeout(() => { setPage("tracker"); window.scrollTo(0, 0); }, 1320);
setTimeout(() => setPhase("opening"), 1380);
setTimeout(() => setPhase(null), 2200);
}
function toggleDay(day) {
if (day > currentDay) return;
setChecked(prev => {
const has = prev.includes(day);
const next = has ? prev.filter(d => d !== day) : [...prev, day].sort((a, b) => a - b);
const m = loadMember(); if (m) { m.checkedDays = next; saveMember(m); }
if (!has) { setJustChecked(day); setTimeout(() => setJustChecked(null), 360); }
return next;
});
}
function claim() {
const m = loadMember(); if (m) { m.claimStatus = "submitted"; saveMember(m); }
setClaimed(true);
}
function retake() {
const m = loadMember();
if (m) { m.checkedDays = []; m.claimStatus = "none"; m.startDate = new Date().toISOString(); saveMember(m); }
setChecked([]); setClaimed(false); setTweak("previewDayOverride", false);
window.scrollTo(0, 0);
}
function resetProgress() {
localStorage.removeItem(STORE_KEY);
localStorage.removeItem(PAGE_KEY);
setMember(null); setChecked([]); setClaimed(false); setPage("vault");
window.scrollTo(0, 0);
}
return (
<>
{page === "vault" && (
<>