Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 8x | "use client";
/**
* SignupSuccess - Welcome screen after successful B2C signup
* @see /tests/features/authentication/b2c-self-serve-signup.feature
* @see JCN-4
*/
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle2, ArrowRight, Sparkles } from "lucide-react";
interface SignupSuccessProps {
userName?: string;
onContinue?: () => void;
}
export function SignupSuccess({
userName = "there",
onContinue,
}: SignupSuccessProps) {
return (
<Card className="w-full max-w-md mx-auto">
<CardHeader className="text-center">
<CheckCircle2 className="h-12 w-12 text-green-500 mx-auto mb-4" />
<CardTitle className="text-2xl">Welcome to Juncan, {userName}!</CardTitle>
<CardDescription className="text-base">
Your account has been created successfully
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="rounded-lg bg-muted p-4 space-y-3">
<div className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium text-sm">Account created</p>
<p className="text-sm text-muted-foreground">
Your email has been verified
</p>
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium text-sm">Personal workspace ready</p>
<p className="text-sm text-muted-foreground">
Your private tenant has been set up
</p>
</div>
</div>
<div className="flex items-start gap-3">
<Sparkles className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium text-sm">Ready to get started</p>
<p className="text-sm text-muted-foreground">
Begin managing your pre-owned goods
</p>
</div>
</div>
</div>
</CardContent>
<CardFooter className="flex flex-col gap-3">
<Button className="w-full" size="lg" onClick={onContinue} data-testid="continue-to-dashboard">
Go to Dashboard
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
<p className="text-xs text-center text-muted-foreground">
You can update your profile and preferences anytime
</p>
</CardFooter>
</Card>
);
}
|