);
}
function CardAutostart({ live }) {
const [on, setOn] = useState(false);
useEffect(() => {
if (!live) { setOn(true); return; }
const iv = setInterval(() => setOn((q) => !q), 2600);
return () => clearInterval(iv);
}, [live]);
return (
{on && live && }
{on ? 'Monitoring' : 'AirPods out'}
);
}
const DAY_CARDS = [
{ id: 'phone', title: 'Pauses when you check your phone.', body: 'Poise only nudges you when you’re not looking at your phone, so it won’t bother you mid-scroll.', Demo: CardPhone },
{ id: 'activity', title: 'Adjusts to what you’re doing.', body: 'Stricter on a walk, easier at your desk, silent behind the wheel.', note: 'Poise also uses smart motion detection to pause nudges for standing tasks where looking down is required, like cooking or doing the dishes.', Demo: CardActivity },
{ id: 'autostart', title: 'Starts monitoring automatically.', body: 'Pop your AirPods in. Poise picks right up, working quietly in the background.', Demo: CardAutostart },
];
function ShowcaseScreen() {
const flow = useFlow();
const [idx, setIdx] = useState(0);
const trackRef = useRef(null);
const paneRefs = useRef([]);
const live = flow.t.motion;
const n = DAY_CARDS.length;
const lastIdx = n - 1;
const isLast = idx === lastIdx;
// Once the visitor has reached the last pane, Continue stays lit and
// clickable even if they scroll back to an earlier one - reaching the end
// is the unlock, not currently being on it. Lives on flow (not local
// state) because this screen unmounts/remounts on navigation - going to
// S18 and back to S17 would otherwise lose the unlock.
const reachedEnd = flow.showcaseReachedEnd;
useEffect(() => { if (isLast) flow.setShowcaseReachedEnd(true); }, [isLast]); // eslint-disable-line react-hooks/exhaustive-deps
const scrollToIdx = (i) => {
const track = trackRef.current, pane = paneRefs.current[i];
if (!track || !pane) return;
track.scrollTo({ left: pane.offsetLeft, behavior: 'smooth' });
};
useEffect(() => {
const track = trackRef.current;
if (!track || !('IntersectionObserver' in window)) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach((en) => {
if (en.isIntersecting && en.intersectionRatio > 0.6) setIdx(Number(en.target.dataset.i));
});
}, { root: track, threshold: [0.6] });
paneRefs.current.forEach((p) => p && obs.observe(p));
return () => obs.disconnect();
}, []);
const [peek, setPeek] = useState(false);
useEffect(() => {
/* one-time nudge so the sideways scroll is discoverable; never repeats.
Purely a CSS affordance on the next button, no programmatic scrolling:
scrollBy() fights mandatory scroll-snap and can misfire onto pane 2. */
const t = setTimeout(() => setPeek(true), 900);
return () => clearTimeout(t);
}, []);
const onContinue = () => {
if (!reachedEnd) {
const track = trackRef.current;
if (track) {
track.scrollBy({ left: 60, behavior: 'smooth' });
setTimeout(() => track.scrollBy({ left: -60, behavior: 'smooth' }), 420);
}
return;
}
flow.next();
};
return (
flow.back()} />}
cta={
Every mode is yours. Switch any of it on or off.Continue
}
>
);
}
/* ============ S20 · Paywall (port of PoisePaywallView.swift) + exit sheet ============
Faithful port of the SwiftUI paywall: back chevron (top-left), ambient mint
glow, staggered reveal, the "how your free trial works" timeline, annual/
monthly plan cards, and the pinned footer. Onboarding is always trial-eligible,
so only the trial-framing variant is ported.
Exit-intent behaviour (from PoisePaywallView.sandboxBackBar + PoiseTrialExitView):
the FIRST back tap intercepts with the free-trial exit sheet (shown once ever).
Once that sheet has been offered and dismissed, a SECOND back tap steps back to
S21 (hold to commit), the user's chosen destination. */
/* Launch control arm: 7-day trial on annual, no trial on monthly. Trial length
and eligibility are the A/B variable — prices are the fixed default. */
const PW_PLANS_TRIAL = [
{ id: 'annual', title: 'Annual', perPeriod: '$5.83/mo', subline: '7 days free · then $69.99/yr', trialDays: 7, savePercent: 42, featured: true },
{ id: 'monthly', title: 'Monthly', perPeriod: '$9.99/mo', subline: 'Billed monthly', trialDays: 0, savePercent: null, featured: false },
];
/* No-trial variant (user has already used their free trial): bills immediately,
so no "X days free" sublines, no trial timeline, CTA reads "Subscribe". */
const PW_PLANS_EXPIRED = [
{ id: 'annual', title: 'Annual', perPeriod: '$5.83/mo', subline: '$69.99 / year', trialDays: 0, savePercent: 42, featured: true },
{ id: 'monthly', title: 'Monthly', perPeriod: '$9.99/mo', subline: 'Billed monthly', trialDays: 0, savePercent: null, featured: false },
];
function PwTimelineRow({ Icon, title, body, isEnd }) {
return (
{isEnd ? (
) : (
)}
{title}
{body}
);
}
/* Benefit row for the no-trial variant — mint icon, no connector (no sequence). */
function PwBenefitRow({ Icon, title, body }) {
return (
{title}
{body}
);
}
/* Full-screen exit-intent offer (port of ExitOfferScaffold). Two flavours below. */
function ExitSheet({ eyebrow, title, subtitle, ctaTitle, dismissTitle, chargeNote, onClaim, onDismiss, children }) {
return (
{eyebrow}{title}
{subtitle}
{children}
{ctaTitle}{chargeNote}
);
}
/* Trial-eligible exit (port of PoiseTrialExitView): re-emphasise the free trial. */
function TrialExitSheet({ onClaim, onDismiss }) {
return (
Your free trial is still here}
subtitle="Try everything free for 7 days. Nothing to pay today, cancel anytime."
ctaTitle="Start free trial"
dismissTitle="No thanks"
chargeNote="7 days free, then $69.99/yr. Cancel anytime up to 24 hours before your trial ends."
onClaim={onClaim}
onDismiss={onDismiss}
>
7 DAYS FREE
$0.00due today · then $69.99/yr, cancel anytime
);
}
/* Trial-expired win-back (port of PoiseWinbackView): 50% off the first month. */
function WinbackSheet({ onClaim, onDismiss }) {
return (
50% off your first month}
subtitle="Pick up where you left off, at half the price."
ctaTitle="Claim discount"
dismissTitle="No thanks"
chargeNote="First month $4.99, then $9.99/mo. Cancel anytime. Auto-renews until canceled."
onClaim={onClaim}
onDismiss={onDismiss}
>
SAVE 50%
$9.99$4.99
for your first month, then $9.99/mo
);
}
function PaywallScreen() {
const flow = useFlow();
const trialFraming = flow.t.variantPaywall !== 'Trial used';
const plans = trialFraming ? PW_PLANS_TRIAL : PW_PLANS_EXPIRED;
const [plan, setPlan] = useState('annual');
const [sheet, setSheet] = useState(false);
const [pumped, setPumped] = useState(null);
const [phase, setPhase] = useState(flow.t.motion ? 0 : 4);
const [glowOn, setGlowOn] = useState(!flow.t.motion);
useEffect(() => { track('paywall_shown', { variant: trialFraming ? 'trial' : 'expired' }); }, [trialFraming]);
useEffect(() => {
if (!flow.t.motion) return;
const t = setTimeout(() => setGlowOn(true), 20);
return () => clearTimeout(t);
}, [flow.t.motion]);
/* Staggered reveal: ~0.5s blank, then sections fade+rise in order (matches the
Swift appearPhase sequence). */
useEffect(() => {
if (!flow.t.motion) { setPhase(4); return; }
const timers = [];
for (let step = 1; step <= 4; step++) {
timers.push(setTimeout(() => setPhase(step), 500 + (step - 1) * 120));
}
return () => timers.forEach(clearTimeout);
}, [flow.t.motion]);
const selected = plans.find((p) => p.id === plan) || plans[0];
/* Trial framing is per-plan, not per-screen: under the control arm a
trial-eligible user picking Monthly gets no trial, so the timeline, the
"no payment now" reassurance and the purchase event all have to follow the
selected plan rather than the variant. */
const hasTrial = trialFraming && selected.trialDays > 0;
const lead = selected.trialDays >= 14 ? 4 : 2;
const remindDay = Math.max(selected.trialDays - lead, 1);
const reveal = (p) => ({
opacity: phase >= p ? 1 : 0,
transform: phase >= p ? 'none' : 'translateY(12px)',
transition: 'opacity 350ms var(--ease-out), transform 350ms var(--ease-out)',
});
const select = (id) => {
if (id === plan) return;
setPlan(id);
setPumped(id);
setTimeout(() => setPumped(null), 340);
};
/* Back chevron (matches PoisePaywallView build-65 E-back-loop): exitOffered is
per-paywall-instance state, re-armed on entry and when the variant changes.
First tap offers the exit sheet; after it has been offered and dismissed, a
second tap steps back to S21 (hold to commit). The flow-level flag is kept in
sync so the "Re-arm exit sheet" tweak still works. */
const [exitOffered, setExitOffered] = useState(false);
useEffect(() => { setExitOffered(false); }, [trialFraming]);
useEffect(() => { if (!flow.exitSheetShown) setExitOffered(false); }, [flow.exitSheetShown]);
const onBack = () => {
if (!exitOffered) {
setExitOffered(true);
flow.setExitSheetShown(true);
setSheet(true);
track('exit_sheet_shown', {});
} else {
track('paywall_back', { to: 'commit' });
flow.go('commit');
}
};
const purchase = () => { track(hasTrial ? 'trial_started' : 'subscribed', { plan }); flow.go('success'); };
return (
{/* back bar */}
{/* content — tuned to fit one view; scrolls (scrollbar hidden) on a
shorter real viewport instead of clipping */}
{hasTrial ? (
How your free trial works
) : (
Keep your posture on track
{!trialFraming &&
Your free trial has ended. Subscribe to continue.
}
)}
{hasTrial ? (
) : (
)}
{plans.map((p) => {
const sel = plan === p.id;
return (
);
})}
);
}
/* ============ End of flow (prototype affordance, not a product screen) ============ */
function EndScreen() {
const flow = useFlow();
return (
}>
End of onboarding
The user lands in the app here: home screen, monitoring live.
{/* The only exit mobile visitors get - the desktop chrome link isn't
rendered there - so it ships on both layouts. */}
{ window.location.href = '/'; }}>Back to the Poise home page flow.restart()}>Restart the flow
