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 [login, setLogin] = useS(false); // "already started? log in" modal
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]);
// On load, re-verify the member's start date against the server (source of
// truth). Adopts the server date if localStorage was cleared/tampered or the
// user is on a new device. Runs once per email.
useE(() => {
if (!member || !member.email) return;
let cancelled = false;
fetch("/api/status?email=" + encodeURIComponent(member.email))
.then(function (r) { return r.json(); })
.then(function (d) {
if (cancelled || !d || !d.ok || !d.found || !d.startedAt) return;
if (member.startDate !== d.startedAt) {
const m = loadMember();
if (m && (m.email || "").toLowerCase() === member.email.toLowerCase()) {
m.startDate = d.startedAt; saveMember(m); setMember({ ...m }); setTick(x => x + 1);
}
}
})
.catch(function () {});
return function () { cancelled = true; };
}, [member && member.email]);
useE(() => { localStorage.setItem(PAGE_KEY, page); }, [page]);
// Deep link from email: /?email=