Add Photos onboarding step; let pending/rejected users re-edit freely
- New /onboarding/photos step (upload/delete grid, needs >=1 photo to continue), inserted as step 2 right after basic info. - Pending screen gets an "edit your info" entry point into the wizard; Rejected screen's edit button now goes there too instead of just the read-only profile page. - Step 1's back button now returns to /home instead of /login when the user is already onboarded (was previously always /login). - Progress bar segments become clickable to jump directly to any step once the user is already onboarded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Bell, HourglassIcon, XCircle, SlidersHorizontal, Heart } from "lucide-react";
|
||||
import { Bell, HourglassIcon, XCircle, SlidersHorizontal, Heart, Pencil } from "lucide-react";
|
||||
import { EmptyState } from "@/components/ui/EmptyState";
|
||||
import { Badge } from "@/components/ui/Badge";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
@@ -28,6 +28,7 @@ function BrandHeader() {
|
||||
}
|
||||
|
||||
function PendingReview() {
|
||||
const router = useRouter();
|
||||
const { refreshUser } = useAuth();
|
||||
const [checking, setChecking] = useState(false);
|
||||
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
@@ -64,6 +65,14 @@ function PendingReview() {
|
||||
actionLabel={checking ? "در حال بررسی..." : "بررسی وضعیت"}
|
||||
onAction={handleCheck}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
icon={<Pencil size={14} />}
|
||||
onClick={() => router.push("/onboarding/basic-info")}
|
||||
>
|
||||
هنوز وقت هست؛ اطلاعاتت رو ویرایش کن
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -90,7 +99,7 @@ function Rejected({ reason }: { reason?: string }) {
|
||||
<p className="text-[14px] text-(--color-content-secondary) leading-6">{reason}</p>
|
||||
)}
|
||||
</div>
|
||||
<Button size="sm" onClick={() => router.push("/profile")}>
|
||||
<Button size="sm" onClick={() => router.push("/onboarding/basic-info")}>
|
||||
ویرایش پروفایل
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,7 @@ import { useRequireAuth } from "@/lib/hooks";
|
||||
import { FullScreenLoader } from "@/components/ui/FullScreenLoader";
|
||||
import { OnboardingScreen } from "@/components/onboarding/OnboardingScreen";
|
||||
import { BasicInfoStep } from "@/components/onboarding/steps/BasicInfoStep";
|
||||
import { PhotosStep } from "@/components/onboarding/steps/PhotosStep";
|
||||
import { BodyInfoStep } from "@/components/onboarding/steps/BodyInfoStep";
|
||||
import { ProfileQuestionsStep } from "@/components/onboarding/steps/ProfileQuestionsStep";
|
||||
import { EducationStep } from "@/components/onboarding/steps/EducationStep";
|
||||
@@ -90,12 +91,19 @@ export default function OnboardingStepPage() {
|
||||
return <FullScreenLoader />;
|
||||
}
|
||||
|
||||
const alreadyOnboarded = !!onboardingStatus?.is_onboarded;
|
||||
|
||||
return (
|
||||
<OnboardingScreen
|
||||
order={meta.order}
|
||||
title={meta.title}
|
||||
emoji={meta.emoji}
|
||||
onBack={meta.order === 1 ? () => router.push("/login") : undefined}
|
||||
onBack={
|
||||
meta.order === 1
|
||||
? () => router.push(alreadyOnboarded ? "/home" : "/login")
|
||||
: undefined
|
||||
}
|
||||
onJumpToStep={alreadyOnboarded ? (s) => router.push(`/onboarding/${s}`) : undefined}
|
||||
>
|
||||
{renderStep(slug, profile, goNext)}
|
||||
</OnboardingScreen>
|
||||
@@ -106,6 +114,8 @@ function renderStep(slug: string, profile: FullProfile | null, onNext: () => voi
|
||||
switch (slug) {
|
||||
case "basic-info":
|
||||
return <BasicInfoStep initialProfile={profile} onNext={onNext} />;
|
||||
case "photos":
|
||||
return <PhotosStep initialProfile={profile} onNext={onNext} />;
|
||||
case "body-info":
|
||||
return <BodyInfoStep initialProfile={profile} onNext={onNext} />;
|
||||
case "profile-questions":
|
||||
|
||||
@@ -12,6 +12,9 @@ interface OnboardingScreenProps {
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
onBack?: () => void;
|
||||
// وقتی پروفایل قبلاً کامل شده (در انتظار بررسی یا ردشده)، کاربر میتونه
|
||||
// مستقیم روی هر بخش از نوار پیشرفت بزنه و بین مراحل جابهجا بشه
|
||||
onJumpToStep?: (slug: string) => void;
|
||||
}
|
||||
|
||||
export function OnboardingScreen({
|
||||
@@ -21,6 +24,7 @@ export function OnboardingScreen({
|
||||
description,
|
||||
children,
|
||||
onBack,
|
||||
onJumpToStep,
|
||||
}: OnboardingScreenProps) {
|
||||
const router = useRouter();
|
||||
const total = ONBOARDING_STEPS.length;
|
||||
@@ -36,14 +40,25 @@ export function OnboardingScreen({
|
||||
<ChevronRight size={20} className="text-(--color-content-secondary)" />
|
||||
</button>
|
||||
<div className="flex-1 flex gap-1.5">
|
||||
{ONBOARDING_STEPS.map((s) => (
|
||||
<div
|
||||
key={s.key}
|
||||
className={`h-1.5 flex-1 rounded-(--radius-full) transition-colors duration-300 ${
|
||||
s.order <= order ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
{ONBOARDING_STEPS.map((s) =>
|
||||
onJumpToStep ? (
|
||||
<button
|
||||
key={s.key}
|
||||
onClick={() => onJumpToStep(s.slug)}
|
||||
aria-label={s.title}
|
||||
className={`h-1.5 flex-1 rounded-(--radius-full) transition-colors duration-300 cursor-pointer ${
|
||||
s.order <= order ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
|
||||
}`}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
key={s.key}
|
||||
className={`h-1.5 flex-1 rounded-(--radius-full) transition-colors duration-300 ${
|
||||
s.order <= order ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
|
||||
}`}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[11px] font-bold text-(--color-content-tertiary) shrink-0">
|
||||
{order}/{total}
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { Plus, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { ErrorBanner } from "@/components/ui/ErrorBanner";
|
||||
import { confirmPhotosStep, uploadPhoto, deletePhoto, photoUrl, FullProfile, Photo } from "@/lib/api";
|
||||
import { formatApiError } from "@/lib/hooks";
|
||||
|
||||
const MAX_PHOTOS = 6;
|
||||
|
||||
export function PhotosStep({
|
||||
initialProfile,
|
||||
onNext,
|
||||
}: {
|
||||
initialProfile: FullProfile | null;
|
||||
onNext: () => void;
|
||||
}) {
|
||||
const [photos, setPhotos] = useState<Photo[]>(initialProfile?.photos ?? []);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const photo = await uploadPhoto(file);
|
||||
setPhotos((prev) => [...prev, photo]);
|
||||
} catch (err) {
|
||||
setError(formatApiError(err));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
setError(null);
|
||||
try {
|
||||
await deletePhoto(id);
|
||||
setPhotos((prev) => prev.filter((p) => p.id !== id));
|
||||
} catch (err) {
|
||||
setError(formatApiError(err));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNext() {
|
||||
if (photos.length === 0) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await confirmPhotosStep();
|
||||
onNext();
|
||||
} catch (err) {
|
||||
setError(formatApiError(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<p className="text-[13px] font-semibold text-(--color-content-secondary)">
|
||||
حداقل ۱ عکس لازمه؛ هرچی بیشتر بذاری، شانس دیده شدنت بیشتره ({photos.length}/{MAX_PHOTOS})
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2.5">
|
||||
{photos.map((p) => (
|
||||
<div key={p.id} className="relative aspect-square rounded-(--radius-md) overflow-hidden">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={photoUrl(p.url)} alt="" className="w-full h-full object-cover" />
|
||||
<button
|
||||
onClick={() => handleDelete(p.id)}
|
||||
className="absolute top-1 left-1 w-6 h-6 rounded-full bg-black/50 flex items-center justify-center text-white"
|
||||
aria-label="حذف عکس"
|
||||
>
|
||||
<X size={13} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{photos.length < MAX_PHOTOS && (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploading}
|
||||
className="aspect-square rounded-(--radius-md) border-2 border-dashed border-(--color-border-default) flex items-center justify-center text-(--color-content-tertiary) disabled:opacity-50"
|
||||
>
|
||||
<Plus size={22} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
onChange={handleFile}
|
||||
/>
|
||||
|
||||
<ErrorBanner message={error} />
|
||||
|
||||
<Button size="lg" isBlock disabled={photos.length === 0} isLoading={loading} onClick={handleNext}>
|
||||
بریم مرحله بعد
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -342,6 +342,11 @@ export function submitBasicInfo(payload: {
|
||||
});
|
||||
}
|
||||
|
||||
// خودِ عکسها با uploadPhoto/deletePhoto آپلود میشن؛ این فقط مرحله رو تایید/رد میکنه
|
||||
export function confirmPhotosStep() {
|
||||
return authRequest<OnboardingStatus>("/onboarding/photos", { method: "POST" });
|
||||
}
|
||||
|
||||
export function submitBodyInfo(payload: { height_cm: number; weight_kg: number }) {
|
||||
return authRequest<OnboardingStatus>("/onboarding/body-info", {
|
||||
method: "POST",
|
||||
|
||||
@@ -9,19 +9,20 @@ export interface StepMeta {
|
||||
// همون ترتیب و کلیدهایی که بکاند در models.OnboardingStepOrder برمیگردونه
|
||||
export const ONBOARDING_STEPS: StepMeta[] = [
|
||||
{ key: "basic_info", slug: "basic-info", order: 1, title: "خب اول بگو کی هستی", emoji: "👋" },
|
||||
{ key: "body_info", slug: "body-info", order: 2, title: "قد و وزنت چقدره؟", emoji: "📏" },
|
||||
{ key: "profile_questions", slug: "profile-questions", order: 3, title: "یکم از خودت بگو", emoji: "💬" },
|
||||
{ key: "education", slug: "education", order: 4, title: "تحصیلاتت چیه؟", emoji: "🎓" },
|
||||
{ key: "occupations", slug: "occupations", order: 5, title: "چیکار میکنی؟", emoji: "💼" },
|
||||
{ key: "photos", slug: "photos", order: 2, title: "چندتا عکس از خودت بذار", emoji: "📸" },
|
||||
{ key: "body_info", slug: "body-info", order: 3, title: "قد و وزنت چقدره؟", emoji: "📏" },
|
||||
{ key: "profile_questions", slug: "profile-questions", order: 4, title: "یکم از خودت بگو", emoji: "💬" },
|
||||
{ key: "education", slug: "education", order: 5, title: "تحصیلاتت چیه؟", emoji: "🎓" },
|
||||
{ key: "occupations", slug: "occupations", order: 6, title: "چیکار میکنی؟", emoji: "💼" },
|
||||
{
|
||||
key: "relationship_importance",
|
||||
slug: "relationship-importance",
|
||||
order: 6,
|
||||
order: 7,
|
||||
title: "توی رابطه چی برات مهمه؟",
|
||||
emoji: "❤️",
|
||||
},
|
||||
{ key: "interests", slug: "interests", order: 7, title: "به چی علاقه داری؟", emoji: "✨" },
|
||||
{ key: "looking_for", slug: "looking-for", order: 8, title: "دنبال چی میگردی؟", emoji: "🔍" },
|
||||
{ key: "interests", slug: "interests", order: 8, title: "به چی علاقه داری؟", emoji: "✨" },
|
||||
{ key: "looking_for", slug: "looking-for", order: 9, title: "دنبال چی میگردی؟", emoji: "🔍" },
|
||||
];
|
||||
|
||||
export function stepBySlug(slug: string) {
|
||||
|
||||
Reference in New Issue
Block a user