Sign-Up With Plan Sidebar

1"use client"
2 
3import { useState } from "react"
4import { toast } from "sonner"
5import { z } from "zod"
6 
7import { Badge } from "@/components/ui/badge"
8import { Button } from "@/components/ui/button"
9import {
10  CardContent,
11  CardDescription,
12  CardFooter,
13  CardHeader,
14  CardTitle,
15} from "@/components/ui/card"
16import { Checkbox } from "@/components/ui/checkbox"
17import {
18  Field,
19  FieldDescription,
20  FieldError,
21  FieldGroup,
22  FieldLabel,
23} from "@/components/ui/field"
24import { Input } from "@/components/ui/input"
25import { Label } from "@/components/ui/label"
26import { Separator } from "@/components/ui/separator"
27import { Toaster } from "@/components/ui/sonner"
28import { IconPlaceholder } from "@/components/icons/icon-placeholder"
29 
30const BRAND = "Acme"
31const PLANS = [
32  { label: "Free", detail: "Up to 3 projects, 1 GB storage", popular: false },
33  {
34    label: "Pro",
35    detail: "Unlimited projects, 50 GB storage",
36    popular: true,
37  },
38  {
39    label: "Team",
40    detail: "Everything in Pro + admin controls",
41    popular: false,
42  },
43]
44 
45const signUpSchema = z.object({
46  firstName: z.string().min(1, "First name is required"),
47  lastName: z.string().min(1, "Last name is required"),
48  email: z
49    .string()
50    .min(1, "Email is required")
51    .email("Enter a valid email address"),
52  password: z
53    .string()
54    .min(8, "Password must be at least 8 characters")
55    .regex(/[0-9]/, "Include at least one number"),
56})
57 
58export default function AuthBlock() {
59  const [agreed, setAgreed] = useState(false)
60  const [errors, setErrors] = useState<Record<string, string>>({})
61 
62  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
63    event.preventDefault()
64    const data = Object.fromEntries(new FormData(event.currentTarget))
65    const result = signUpSchema.safeParse(data)
66    if (!result.success) {
67      const next: Record<string, string> = {}
68      for (const issue of result.error.issues) {
69        const key = issue.path[0]
70        if (typeof key === "string" && !next[key]) {
71          next[key] = issue.message
72        }
73      }
74      setErrors(next)
75      return
76    }
77    setErrors({})
78    toast.promise(new Promise((resolve) => setTimeout(resolve, 1400)), {
79      loading: "Creating your account…",
80      success: "Account created. Check your inbox to verify.",
81      error: "Could not create account. Please try again.",
82    })
83  }
84 
85  function clearError(name: string) {
86    setErrors((prev) => {
87      if (!prev[name]) return prev
88// … truncated