75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useRouter } from 'expo-router';
|
|
import { useSafeAnalytics } from '../../services/analytics';
|
|
import { useColors } from '../../constants/Colors';
|
|
import { useApp } from '../../context/AppContext';
|
|
import { OnboardingProgressService } from '../../services/onboardingProgressService';
|
|
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
|
import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
|
|
|
|
const SOURCE_OPTIONS = [
|
|
{ id: 'app_store', emoji: '🏬', signal: 'organic_store' },
|
|
{ id: 'instagram', emoji: '📸', signal: 'social_visual' },
|
|
{ id: 'tiktok', emoji: '🎵', signal: 'social_video' },
|
|
{ id: 'friend', emoji: '👥', signal: 'referral' },
|
|
{ id: 'search', emoji: '🔎', signal: 'high_intent_search' },
|
|
{ id: 'other', emoji: '✨', signal: 'unclassified' },
|
|
];
|
|
|
|
export default function OnboardingSourceScreen() {
|
|
const router = useRouter();
|
|
const posthog = useSafeAnalytics();
|
|
const { session, isDarkMode, colorPalette, t } = useApp();
|
|
const colors = useColors(isDarkMode, colorPalette);
|
|
const [selectedSource, setSelectedSource] = useState<string | null>(null);
|
|
|
|
const sourceLabels: Record<string, string> = {
|
|
app_store: t.sourceOptionAppStore,
|
|
instagram: t.sourceOptionInstagram,
|
|
tiktok: t.sourceOptionTikTok,
|
|
friend: t.sourceOptionFriend,
|
|
search: t.sourceOptionSearch,
|
|
other: t.sourceOptionOther,
|
|
};
|
|
|
|
const options: QuestionOption[] = SOURCE_OPTIONS.map((option) => ({
|
|
id: option.id,
|
|
emoji: option.emoji,
|
|
label: sourceLabels[option.id],
|
|
}));
|
|
|
|
const finish = (source: string | null) => {
|
|
if (session?.userId && source) {
|
|
OnboardingProgressService.setAcquisitionSource(session.userId, source);
|
|
}
|
|
if (source) {
|
|
void PreAuthOnboardingService.setAnswer('acquisitionSource', source);
|
|
}
|
|
|
|
posthog.capture('onboarding_source_completed', {
|
|
source: source ?? 'skipped',
|
|
revops_signal: SOURCE_OPTIONS.find((option) => option.id === source)?.signal ?? 'skipped',
|
|
});
|
|
router.replace('/onboarding/goal');
|
|
};
|
|
|
|
return (
|
|
<OnboardingQuestion
|
|
colors={colors}
|
|
isDarkMode={isDarkMode}
|
|
step={1}
|
|
totalSteps={4}
|
|
title={t.sourceOnboardingTitle}
|
|
subtitle={t.sourceOnboardingSubtitle}
|
|
options={options}
|
|
selectedId={selectedSource}
|
|
onSelect={setSelectedSource}
|
|
onContinue={() => finish(selectedSource)}
|
|
onBack={() => router.back()}
|
|
continueLabel={t.sourceOnboardingContinue}
|
|
skipLabel={t.sourceOnboardingSkip}
|
|
onSkip={() => finish(null)}
|
|
/>
|
|
);
|
|
}
|