feat: home nudge for existing users with no phone number

Existing users (signed up before phone collection) won't have a number.
Show a dismissable home banner prompting them to add one.

- Checks /api/auth/profile on load; shows banner only if user.phone is empty
- "Add" links to /profile; ✕ dismisses
- Dismissal remembered in localStorage (tia_phone_nudge_dismissed) so it
  never nags repeatedly
- Dark-mode styled, sits below the vaccine reminder banner

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-06-02 21:44:58 +05:30
parent 38bb5af01c
commit 0f3e87b67a

View file

@ -99,6 +99,7 @@ export default function HomePage() {
const [recentLogs, setRecentLogs] = useState<Log[]>([]);
const [logsLoading, setLogsLoading] = useState(true);
const [vaccineReminders, setVaccineReminders] = useState<any[]>([]);
const [showPhoneNudge, setShowPhoneNudge] = useState(false);
const [aiChips, setAiChips] = useState<string[]>([]);
const [uploadingPhoto, setUploadingPhoto] = useState(false);
const [photoError, setPhotoError] = useState(false);
@ -134,6 +135,24 @@ export default function HomePage() {
return () => window.removeEventListener("online", handleOnline);
}, [childId]);
// One-time nudge for existing users who have no phone number on file.
// Dismissable; remembered in localStorage so it never nags repeatedly.
useEffect(() => {
if (!childId) return;
if (localStorage.getItem("tia_phone_nudge_dismissed") === "1") return;
fetch("/api/auth/profile")
.then(r => r.json())
.then(data => {
if (data.user && !data.user.phone) setShowPhoneNudge(true);
})
.catch(() => {});
}, [childId]);
const dismissPhoneNudge = () => {
setShowPhoneNudge(false);
localStorage.setItem("tia_phone_nudge_dismissed", "1");
};
const fetchRecentLogs = async () => {
if (!childId) return;
try {
@ -413,6 +432,29 @@ export default function HomePage() {
</div>
)}
{showPhoneNudge && (
<div className="mx-4 mb-4 bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800/40 px-4 py-3 rounded-xl flex items-center gap-3">
<span className="text-xl flex-shrink-0">📱</span>
<div className="flex-1 min-w-0">
<div className="font-semibold text-rose-700 dark:text-rose-300 text-sm">Add your phone number</div>
<div className="text-xs text-rose-600 dark:text-rose-400">Get important reminders &amp; updates about your baby</div>
</div>
<Link
href="/profile"
className="flex-shrink-0 text-xs font-semibold text-white bg-rose-400 px-3 py-1.5 rounded-lg active:scale-95 transition-transform"
>
Add
</Link>
<button
onClick={dismissPhoneNudge}
className="flex-shrink-0 text-rose-300 dark:text-rose-500 text-lg leading-none px-1"
aria-label="Dismiss"
>
</button>
</div>
)}
<TodaySummary logs={recentLogs} />
{stage && (() => {