feat(mobile): add onboarding tour for voting page
- Add OnboardingTour component with step-by-step guidance - Add useOnboarding composable for state management - Reset onboarding on logout for re-viewing - 4 steps: welcome, award selection, program voting, progress Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
64
packages/client-mobile/src/composables/useOnboarding.ts
Normal file
64
packages/client-mobile/src/composables/useOnboarding.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
export interface TourStep {
|
||||
target?: string;
|
||||
title?: string;
|
||||
content: string;
|
||||
position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'gala_onboarding_completed';
|
||||
|
||||
// Shared state across components
|
||||
const isCompleted = ref(localStorage.getItem(STORAGE_KEY) === 'true');
|
||||
const showTour = ref(false);
|
||||
const currentStep = ref(0);
|
||||
|
||||
export function useOnboarding() {
|
||||
const shouldShowTour = computed(() => !isCompleted.value);
|
||||
|
||||
function start() {
|
||||
if (isCompleted.value) return;
|
||||
currentStep.value = 0;
|
||||
showTour.value = true;
|
||||
}
|
||||
|
||||
function next() {
|
||||
currentStep.value++;
|
||||
}
|
||||
|
||||
function prev() {
|
||||
if (currentStep.value > 0) {
|
||||
currentStep.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function skip() {
|
||||
complete();
|
||||
}
|
||||
|
||||
function complete() {
|
||||
showTour.value = false;
|
||||
isCompleted.value = true;
|
||||
localStorage.setItem(STORAGE_KEY, 'true');
|
||||
}
|
||||
|
||||
function reset() {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
isCompleted.value = false;
|
||||
currentStep.value = 0;
|
||||
}
|
||||
|
||||
return {
|
||||
isCompleted,
|
||||
showTour,
|
||||
currentStep,
|
||||
shouldShowTour,
|
||||
start,
|
||||
next,
|
||||
prev,
|
||||
skip,
|
||||
complete,
|
||||
reset,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user