Onboarding

This commit is contained in:
2026-07-16 17:09:00 +02:00
parent 5c09c50af9
commit 52c9dfb472
5 changed files with 935 additions and 809 deletions

View File

@@ -22,7 +22,7 @@ import { ThemeBackdrop } from '../../components/ThemeBackdrop';
import { SafeImage } from '../../components/SafeImage';
import { Plant } from '../../types';
import { useCoachMarks } from '../../context/CoachMarksContext';
import { OnboardingProgressService } from '../../services/onboardingProgressService';
import { OnboardingProgressService, PersistentOnboardingStep } from '../../services/onboardingProgressService';
const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
@@ -40,6 +40,10 @@ function OnboardingChecklist({
colorPalette,
lexiconExplored,
customizationDone,
scanDone,
reminderDone,
collectionDone,
userId,
colors,
router,
t,
@@ -52,6 +56,10 @@ function OnboardingChecklist({
colorPalette: string;
lexiconExplored: boolean;
customizationDone: boolean;
scanDone: boolean;
reminderDone: boolean;
collectionDone: boolean;
userId: number | null;
colors: any;
router: any;
t: any;
@@ -61,17 +69,52 @@ function OnboardingChecklist({
}) {
const cardRef = useRef<View>(null);
const previousProgressRef = useRef<number | null>(null);
const persistedStepsRef = useRef<Set<string>>(new Set());
const lexiconHistoryCount = getLexiconSearchHistory().length;
const plantsCount = plants.length;
const reminderReady = plants.some((plant) => Boolean(plant.notificationsEnabled));
const themeCustomized = customizationDone || appearanceMode !== 'system' || colorPalette !== 'forest';
const lexiconCompleted = lexiconExplored || lexiconHistoryCount > 0;
const reminderLive = plants.some((plant) => Boolean(plant.notificationsEnabled));
const themeLive = appearanceMode !== 'system' || colorPalette !== 'forest';
const lexiconLive = lexiconHistoryCount > 0;
const scanLive = plantsCount > 0;
const collectionLive = plantsCount >= 3;
// Once a step is reached live, persist it so it never reverts (e.g. deleting a plant
// or disabling notifications previously flipped the checklist backward).
useEffect(() => {
if (!userId) return;
const toPersist: Array<[PersistentOnboardingStep, boolean]> = [
['scan', scanLive && !scanDone],
['reminder', reminderLive && !reminderDone],
['customize', themeLive && !customizationDone],
['lexicon', lexiconLive && !lexiconExplored],
['collection', collectionLive && !collectionDone],
];
for (const [step, shouldPersist] of toPersist) {
if (shouldPersist && !persistedStepsRef.current.has(step)) {
persistedStepsRef.current.add(step);
OnboardingProgressService.completeStep(userId, step);
}
}
}, [
userId,
scanLive,
scanDone,
reminderLive,
reminderDone,
themeLive,
customizationDone,
lexiconLive,
lexiconExplored,
collectionLive,
collectionDone,
]);
const checklist = [
{ id: 'scan' as const, label: t.stepScan, completed: plantsCount > 0, icon: 'camera-outline' },
{ id: 'reminder' as const, label: t.stepReminder, completed: reminderReady, icon: 'notifications-outline' },
{ id: 'lexicon' as const, label: t.stepLexicon, completed: lexiconCompleted, icon: 'search-outline' },
{ id: 'theme' as const, label: t.stepTheme, completed: themeCustomized, icon: 'color-palette-outline' },
{ id: 'collection' as const, label: t.stepCollection, completed: plantsCount >= 3, icon: 'albums-outline' },
{ id: 'scan' as const, label: t.stepScan, completed: scanDone || scanLive, icon: 'camera-outline' },
{ id: 'reminder' as const, label: t.stepReminder, completed: reminderDone || reminderLive, icon: 'notifications-outline' },
{ id: 'lexicon' as const, label: t.stepLexicon, completed: lexiconExplored || lexiconLive, icon: 'search-outline' },
{ id: 'theme' as const, label: t.stepTheme, completed: customizationDone || themeLive, icon: 'color-palette-outline' },
{ id: 'collection' as const, label: t.stepCollection, completed: collectionDone || collectionLive, icon: 'albums-outline' },
];
const completedCount = checklist.filter((item) => item.completed).length;
const progressRatio = completedCount / checklist.length;
@@ -229,6 +272,9 @@ export default function HomeScreen() {
const [onboardingSignals, setOnboardingSignals] = useState({
lexiconExplored: false,
customizationDone: false,
scanDone: false,
reminderDone: false,
collectionDone: false,
});
const { layouts, registerLayout, startTour } = useCoachMarks();
const fabRef = useRef<View>(null);
@@ -241,6 +287,9 @@ export default function HomeScreen() {
setOnboardingSignals({
lexiconExplored: false,
customizationDone: false,
scanDone: false,
reminderDone: false,
collectionDone: false,
});
return;
}
@@ -500,6 +549,10 @@ export default function HomeScreen() {
colorPalette={colorPalette}
lexiconExplored={onboardingSignals.lexiconExplored}
customizationDone={onboardingSignals.customizationDone}
scanDone={onboardingSignals.scanDone}
reminderDone={onboardingSignals.reminderDone}
collectionDone={onboardingSignals.collectionDone}
userId={session?.userId ?? null}
colors={colors}
router={router}
t={t}

View File

@@ -8,6 +8,7 @@ import {
Modal,
Alert,
Share,
Linking,
} from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
@@ -462,7 +463,10 @@ export default function PlantDetailScreen() {
if (!plant.notificationsEnabled) {
const granted = await requestPermissions();
if (!granted) {
Alert.alert(t.reminder, t.reminderPermissionNeeded);
Alert.alert(t.reminder, t.reminderPermissionNeeded, [
{ text: t.cancel, style: 'cancel' },
{ text: t.openSettings, onPress: () => Linking.openSettings() },
]);
return;
}
await scheduleWateringReminder(plant);

View File

@@ -69,6 +69,9 @@ export const initDatabase = (): void => {
experience_level TEXT,
lexicon_explored INTEGER NOT NULL DEFAULT 0,
customization_done INTEGER NOT NULL DEFAULT 0,
scan_done INTEGER NOT NULL DEFAULT 0,
reminder_done INTEGER NOT NULL DEFAULT 0,
collection_done INTEGER NOT NULL DEFAULT 0,
created_at TEXT NOT NULL DEFAULT (datetime('now')),
updated_at TEXT NOT NULL DEFAULT (datetime('now'))
);
@@ -116,6 +119,17 @@ export const initDatabase = (): void => {
db.runSync("ALTER TABLE plants ADD COLUMN health_checks TEXT NOT NULL DEFAULT '[]'");
} catch (_) { /* column already exists */ }
// Migration: add persistent onboarding checklist columns to existing databases
try {
db.runSync('ALTER TABLE user_onboarding_profile ADD COLUMN scan_done INTEGER NOT NULL DEFAULT 0');
} catch (_) { /* column already exists */ }
try {
db.runSync('ALTER TABLE user_onboarding_profile ADD COLUMN reminder_done INTEGER NOT NULL DEFAULT 0');
} catch (_) { /* column already exists */ }
try {
db.runSync('ALTER TABLE user_onboarding_profile ADD COLUMN collection_done INTEGER NOT NULL DEFAULT 0');
} catch (_) { /* column already exists */ }
repairForeignKeyState(db);
_isDatabaseInitialized = true;
@@ -252,6 +266,9 @@ export const OnboardingProfileDb = {
experience_level: string | null;
lexicon_explored: number;
customization_done: number;
scan_done: number;
reminder_done: number;
collection_done: number;
}>('SELECT * FROM user_onboarding_profile WHERE user_id = ?', [userId])!;
},
@@ -314,6 +331,42 @@ export const OnboardingProfileDb = {
[userId, done ? 1 : 0],
);
},
setScanDone(userId: number, done: boolean) {
const db = getDb();
db.runSync(
`INSERT INTO user_onboarding_profile (user_id, scan_done, updated_at)
VALUES (?, ?, datetime('now'))
ON CONFLICT(user_id) DO UPDATE SET
scan_done = excluded.scan_done,
updated_at = datetime('now')`,
[userId, done ? 1 : 0],
);
},
setReminderDone(userId: number, done: boolean) {
const db = getDb();
db.runSync(
`INSERT INTO user_onboarding_profile (user_id, reminder_done, updated_at)
VALUES (?, ?, datetime('now'))
ON CONFLICT(user_id) DO UPDATE SET
reminder_done = excluded.reminder_done,
updated_at = datetime('now')`,
[userId, done ? 1 : 0],
);
},
setCollectionDone(userId: number, done: boolean) {
const db = getDb();
db.runSync(
`INSERT INTO user_onboarding_profile (user_id, collection_done, updated_at)
VALUES (?, ?, datetime('now'))
ON CONFLICT(user_id) DO UPDATE SET
collection_done = excluded.collection_done,
updated_at = datetime('now')`,
[userId, done ? 1 : 0],
);
},
};
const DEFAULT_CARE_INFO: CareInfo = {

View File

@@ -1,21 +1,31 @@
import { OnboardingProfileDb } from './database';
export type PersistentOnboardingStep = 'lexicon' | 'customize';
export type PersistentOnboardingStep = 'lexicon' | 'customize' | 'scan' | 'reminder' | 'collection';
const STEP_COLUMN: Record<PersistentOnboardingStep, 'lexicon_explored' | 'customization_done' | 'scan_done' | 'reminder_done' | 'collection_done'> = {
lexicon: 'lexicon_explored',
customize: 'customization_done',
scan: 'scan_done',
reminder: 'reminder_done',
collection: 'collection_done',
};
const STEP_SETTER: Record<PersistentOnboardingStep, (userId: number, done: boolean) => void> = {
lexicon: OnboardingProfileDb.setLexiconExplored,
customize: OnboardingProfileDb.setCustomizationDone,
scan: OnboardingProfileDb.setScanDone,
reminder: OnboardingProfileDb.setReminderDone,
collection: OnboardingProfileDb.setCollectionDone,
};
export const OnboardingProgressService = {
isStepCompleted(userId: number, step: PersistentOnboardingStep): boolean {
const profile = OnboardingProfileDb.get(userId);
return step === 'lexicon'
? profile.lexicon_explored === 1
: profile.customization_done === 1;
return profile[STEP_COLUMN[step]] === 1;
},
completeStep(userId: number, step: PersistentOnboardingStep): void {
if (step === 'lexicon') {
OnboardingProfileDb.setLexiconExplored(userId, true);
return;
}
OnboardingProfileDb.setCustomizationDone(userId, true);
STEP_SETTER[step](userId, true);
},
getSignals(userId: number) {
@@ -23,6 +33,9 @@ export const OnboardingProgressService = {
return {
lexiconExplored: profile.lexicon_explored === 1,
customizationDone: profile.customization_done === 1,
scanDone: profile.scan_done === 1,
reminderDone: profile.reminder_done === 1,
collectionDone: profile.collection_done === 1,
};
},

View File

@@ -215,6 +215,7 @@ export const translations = {
reminderOn: "Aktiviert",
reminderOff: "Deaktiviert",
reminderPermissionNeeded: "Berechtigung für Benachrichtigungen erforderlich.",
openSettings: "Zu den Einstellungen",
// Gallery
galleryTitle: "Galerie",
@@ -487,6 +488,7 @@ registerToSave: "Sign up to save",
reminderOn: "Enabled",
reminderOff: "Disabled",
reminderPermissionNeeded: "Notification permission required.",
openSettings: "Open Settings",
// Gallery
galleryTitle: "Gallery",
@@ -759,6 +761,7 @@ registerToSave: "Regístrate para guardar",
reminderOn: "Activado",
reminderOff: "Desactivado",
reminderPermissionNeeded: "Permiso de notificación requerido.",
openSettings: "Abrir Ajustes",
// Gallery
galleryTitle: "Galería",