643 lines
29 KiB
TypeScript
643 lines
29 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
Building2,
|
|
Mail,
|
|
Lock,
|
|
Eye,
|
|
EyeOff,
|
|
Phone,
|
|
MapPin,
|
|
Globe,
|
|
FileText,
|
|
ArrowLeft,
|
|
} from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { useTranslation } from "@/lib/i18n";
|
|
import { LanguageSwitcher } from "@/components/language-switcher";
|
|
|
|
export default function CompanyRegisterPage() {
|
|
const router = useRouter();
|
|
const { t } = useTranslation();
|
|
const [loading, setLoading] = useState(false);
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
const [currentStep, setCurrentStep] = useState(1);
|
|
|
|
const companySchema = z.object({
|
|
companyName: z.string().min(2, t("register.company.form.errors.companyName")),
|
|
cnpj: z.string().min(14, t("register.company.form.errors.cnpj")),
|
|
email: z.string().email(t("register.company.form.errors.email")),
|
|
password: z.string().min(6, t("register.company.form.errors.password")),
|
|
confirmPassword: z.string(),
|
|
phone: z.string().min(10, t("register.company.form.errors.phone")),
|
|
website: z.string().url(t("register.company.form.errors.website")).optional().or(z.literal("")),
|
|
address: z.string().min(5, t("register.company.form.errors.address")),
|
|
city: z.string().min(2, t("register.company.form.errors.city")),
|
|
state: z.string().min(2, t("register.company.form.errors.state")),
|
|
zipCode: z.string().min(8, t("register.company.form.errors.zipCode")),
|
|
sector: z.string().min(1, t("register.company.form.errors.industry")),
|
|
companySize: z.string().min(1, t("register.company.form.errors.size")),
|
|
description: z.string().min(20, t("register.company.form.errors.description")),
|
|
contactPerson: z.string().min(2, t("register.company.form.errors.contactName")),
|
|
contactRole: z.string().min(2, t("register.company.form.errors.contactRole")),
|
|
acceptTerms: z.boolean().refine(val => val === true, t("register.company.form.errors.acceptTerms")),
|
|
acceptNewsletter: z.boolean().optional(),
|
|
}).refine(data => data.password === data.confirmPassword, {
|
|
message: t("register.company.form.errors.passwordMismatch"),
|
|
path: ["confirmPassword"],
|
|
});
|
|
|
|
type CompanyFormData = z.infer<typeof companySchema>;
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
setValue,
|
|
watch,
|
|
} = useForm<CompanyFormData>({
|
|
resolver: zodResolver(companySchema),
|
|
});
|
|
|
|
const acceptTerms = watch("acceptTerms");
|
|
const acceptNewsletter = watch("acceptNewsletter");
|
|
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
|
|
|
const onSubmit = async (data: CompanyFormData) => {
|
|
setLoading(true);
|
|
setErrorMsg(null);
|
|
try {
|
|
const { registerCompany } = await import("@/lib/auth");
|
|
|
|
await registerCompany({
|
|
companyName: data.companyName,
|
|
cnpj: data.cnpj,
|
|
email: data.email,
|
|
phone: data.phone,
|
|
});
|
|
|
|
router.push("/login?message=Empresa registrada com sucesso! Faça login com seu email e a senha padrão: ChangeMe123!");
|
|
} catch (error: any) {
|
|
console.error("Registration error:", error);
|
|
setErrorMsg(error.message || t("register.company.form.errors.generic"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const nextStep = () => {
|
|
if (currentStep < 3) setCurrentStep(currentStep + 1);
|
|
};
|
|
|
|
const prevStep = () => {
|
|
if (currentStep > 1) setCurrentStep(currentStep - 1);
|
|
};
|
|
|
|
const stepVariants = {
|
|
hidden: { opacity: 0, x: 20 },
|
|
visible: { opacity: 1, x: 0 },
|
|
exit: { opacity: 0, x: -20 }
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-background to-muted/20 flex">
|
|
{/* Left Panel - Information */}
|
|
<div className="hidden lg:flex lg:flex-1 bg-gradient-to-br from-primary to-primary/80 p-8 flex-col justify-center items-center text-primary-foreground relative">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="max-w-md text-center"
|
|
>
|
|
<div className="flex items-center justify-center gap-3 mb-8">
|
|
<Image src="/logohorse.png" alt="GoHorse Jobs" width={80} height={80} className="rounded-lg" />
|
|
</div>
|
|
|
|
<h1 className="text-4xl font-bold mb-4">
|
|
{t("register.company.title")}
|
|
</h1>
|
|
|
|
<p className="text-lg opacity-90 leading-relaxed mb-6">
|
|
{t("register.company.subtitle")}
|
|
</p>
|
|
|
|
<div className="space-y-4 text-left">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-2 h-2 bg-white rounded-full"></div>
|
|
<span>{t("register.company.bullets.free")}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-2 h-2 bg-white rounded-full"></div>
|
|
<span>{t("register.company.bullets.candidates")}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-2 h-2 bg-white rounded-full"></div>
|
|
<span>{t("register.company.bullets.tools")}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-2 h-2 bg-white rounded-full"></div>
|
|
<span>{t("register.company.bullets.dashboard")}</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Right Panel - Form */}
|
|
<div className="flex-1 p-8 flex flex-col justify-center relative">
|
|
<div className="absolute top-4 right-4">
|
|
<LanguageSwitcher />
|
|
</div>
|
|
|
|
<div className="w-full max-w-md mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<Link
|
|
href="/login"
|
|
className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-4 transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
{t("register.company.form.actions.backLogin")}
|
|
</Link>
|
|
|
|
<h2 className="text-2xl font-bold text-foreground mb-2">
|
|
{t("register.company.form.title")}
|
|
</h2>
|
|
<p className="text-muted-foreground">
|
|
{t("register.company.form.subtitle")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Progress Indicator */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium">{t("register.company.form.steps.step", { current: currentStep, total: 3 })}</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
{currentStep === 1 && t("register.company.form.steps.details")}
|
|
{currentStep === 2 && t("register.company.form.steps.address")}
|
|
{currentStep === 3 && t("register.company.form.steps.info")}
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-muted rounded-full h-2">
|
|
<div
|
|
className="bg-primary h-2 rounded-full transition-all duration-300"
|
|
style={{ width: `${(currentStep / 3) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|
{/* Step 1: Company details */}
|
|
{currentStep === 1 && (
|
|
<motion.div
|
|
key="step1"
|
|
variants={stepVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
exit="exit"
|
|
className="space-y-4"
|
|
>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="companyName">{t("register.company.form.fields.companyName")}</Label>
|
|
<div className="relative">
|
|
<Building2 className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="companyName"
|
|
type="text"
|
|
placeholder={t("register.company.form.fields.companyNamePlaceholder")}
|
|
className="pl-10"
|
|
{...register("companyName")}
|
|
/>
|
|
</div>
|
|
{errors.companyName && (
|
|
<span className="text-sm text-destructive">{errors.companyName.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cnpj">{t("register.company.form.fields.cnpj")}</Label>
|
|
<div className="relative">
|
|
<FileText className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="cnpj"
|
|
type="text"
|
|
placeholder={t("register.company.form.fields.cnpjPlaceholder")}
|
|
className="pl-10"
|
|
{...register("cnpj")}
|
|
/>
|
|
</div>
|
|
{errors.cnpj && (
|
|
<span className="text-sm text-destructive">{errors.cnpj.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">{t("register.company.form.fields.email")}</Label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder={t("register.company.form.fields.emailPlaceholder")}
|
|
className="pl-10"
|
|
{...register("email")}
|
|
/>
|
|
</div>
|
|
{errors.email && (
|
|
<span className="text-sm text-destructive">{errors.email.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">{t("register.company.form.fields.password")}</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder={t("register.company.form.fields.passwordPlaceholder")}
|
|
className="pl-10 pr-10"
|
|
{...register("password")}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="h-4 w-4 text-muted-foreground" />
|
|
) : (
|
|
<Eye className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
{errors.password && (
|
|
<span className="text-sm text-destructive">{errors.password.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="confirmPassword">{t("register.company.form.fields.confirmPassword")}</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="confirmPassword"
|
|
type={showConfirmPassword ? "text" : "password"}
|
|
placeholder={t("register.company.form.fields.confirmPasswordPlaceholder")}
|
|
className="pl-10 pr-10"
|
|
{...register("confirmPassword")}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
>
|
|
{showConfirmPassword ? (
|
|
<EyeOff className="h-4 w-4 text-muted-foreground" />
|
|
) : (
|
|
<Eye className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
{errors.confirmPassword && (
|
|
<span className="text-sm text-destructive">{errors.confirmPassword.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<Button type="button" onClick={nextStep} className="w-full">
|
|
{t("register.company.form.actions.next")}
|
|
</Button>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Step 2: Address & contact */}
|
|
{currentStep === 2 && (
|
|
<motion.div
|
|
key="step2"
|
|
variants={stepVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
exit="exit"
|
|
className="space-y-4"
|
|
>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">{t("register.company.form.fields.phone")}</Label>
|
|
<div className="relative">
|
|
<Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
placeholder={t("register.company.form.fields.phonePlaceholder")}
|
|
className="pl-10"
|
|
{...register("phone")}
|
|
/>
|
|
</div>
|
|
{errors.phone && (
|
|
<span className="text-sm text-destructive">{errors.phone.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="website">{t("register.company.form.fields.website")}</Label>
|
|
<div className="relative">
|
|
<Globe className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="website"
|
|
type="url"
|
|
placeholder={t("register.company.form.fields.websitePlaceholder")}
|
|
className="pl-10"
|
|
{...register("website")}
|
|
/>
|
|
</div>
|
|
{errors.website && (
|
|
<span className="text-sm text-destructive">{errors.website.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="address">{t("register.company.form.fields.address")}</Label>
|
|
<div className="relative">
|
|
<MapPin className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
id="address"
|
|
type="text"
|
|
placeholder={t("register.company.form.fields.addressPlaceholder")}
|
|
className="pl-10"
|
|
{...register("address")}
|
|
/>
|
|
</div>
|
|
{errors.address && (
|
|
<span className="text-sm text-destructive">{errors.address.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="city">{t("register.company.form.fields.city")}</Label>
|
|
<Input
|
|
id="city"
|
|
type="text"
|
|
placeholder={t("register.company.form.fields.cityPlaceholder")}
|
|
{...register("city")}
|
|
/>
|
|
{errors.city && (
|
|
<span className="text-sm text-destructive">{errors.city.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="state">{t("register.company.form.fields.state")}</Label>
|
|
<Select onValueChange={(value) => setValue("state", value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("register.company.form.fields.statePlaceholder")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="AC">Acre</SelectItem>
|
|
<SelectItem value="AL">Alagoas</SelectItem>
|
|
<SelectItem value="AP">Amapá</SelectItem>
|
|
<SelectItem value="AM">Amazonas</SelectItem>
|
|
<SelectItem value="BA">Bahia</SelectItem>
|
|
<SelectItem value="CE">Ceará</SelectItem>
|
|
<SelectItem value="DF">Distrito Federal</SelectItem>
|
|
<SelectItem value="ES">Espírito Santo</SelectItem>
|
|
<SelectItem value="GO">Goiás</SelectItem>
|
|
<SelectItem value="MA">Maranhão</SelectItem>
|
|
<SelectItem value="MT">Mato Grosso</SelectItem>
|
|
<SelectItem value="MS">Mato Grosso do Sul</SelectItem>
|
|
<SelectItem value="MG">Minas Gerais</SelectItem>
|
|
<SelectItem value="PA">Pará</SelectItem>
|
|
<SelectItem value="PB">Paraíba</SelectItem>
|
|
<SelectItem value="PR">Paraná</SelectItem>
|
|
<SelectItem value="PE">Pernambuco</SelectItem>
|
|
<SelectItem value="PI">Piauí</SelectItem>
|
|
<SelectItem value="RJ">Rio de Janeiro</SelectItem>
|
|
<SelectItem value="RN">Rio Grande do Norte</SelectItem>
|
|
<SelectItem value="RS">Rio Grande do Sul</SelectItem>
|
|
<SelectItem value="RO">Rondônia</SelectItem>
|
|
<SelectItem value="RR">Roraima</SelectItem>
|
|
<SelectItem value="SC">Santa Catarina</SelectItem>
|
|
<SelectItem value="SP">São Paulo</SelectItem>
|
|
<SelectItem value="SE">Sergipe</SelectItem>
|
|
<SelectItem value="TO">Tocantins</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.state && (
|
|
<span className="text-sm text-destructive">{errors.state.message}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="zipCode">{t("register.company.form.fields.zipCode")}</Label>
|
|
<Input
|
|
id="zipCode"
|
|
type="text"
|
|
placeholder={t("register.company.form.fields.zipCodePlaceholder")}
|
|
{...register("zipCode")}
|
|
/>
|
|
{errors.zipCode && (
|
|
<span className="text-sm text-destructive">{errors.zipCode.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<Button type="button" variant="outline" onClick={prevStep} className="flex-1">
|
|
{t("register.company.form.actions.back")}
|
|
</Button>
|
|
<Button type="button" onClick={nextStep} className="flex-1">
|
|
{t("register.company.form.actions.next")}
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Step 3: Additional information */}
|
|
{currentStep === 3 && (
|
|
<motion.div
|
|
key="step3"
|
|
variants={stepVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
exit="exit"
|
|
className="space-y-4"
|
|
>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="sector">{t("register.company.form.fields.industry")}</Label>
|
|
<Select onValueChange={(value) => setValue("sector", value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("register.company.form.fields.industryPlaceholder")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="technology">{t("register.company.industries.technology")}</SelectItem>
|
|
<SelectItem value="finance">{t("register.company.industries.finance")}</SelectItem>
|
|
<SelectItem value="healthcare">{t("register.company.industries.healthcare")}</SelectItem>
|
|
<SelectItem value="education">{t("register.company.industries.education")}</SelectItem>
|
|
<SelectItem value="retail">{t("register.company.industries.retail")}</SelectItem>
|
|
<SelectItem value="construction">{t("register.company.industries.construction")}</SelectItem>
|
|
<SelectItem value="industry">{t("register.company.industries.industry")}</SelectItem>
|
|
<SelectItem value="services">{t("register.company.industries.services")}</SelectItem>
|
|
<SelectItem value="agriculture">{t("register.company.industries.agriculture")}</SelectItem>
|
|
<SelectItem value="transport">{t("register.company.industries.transport")}</SelectItem>
|
|
<SelectItem value="energy">{t("register.company.industries.energy")}</SelectItem>
|
|
<SelectItem value="consulting">{t("register.company.industries.consulting")}</SelectItem>
|
|
<SelectItem value="marketing">{t("register.company.industries.marketing")}</SelectItem>
|
|
<SelectItem value="other">{t("register.company.industries.other")}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.sector && (
|
|
<span className="text-sm text-destructive">{errors.sector.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="companySize">{t("register.company.form.fields.size")}</Label>
|
|
<Select onValueChange={(value) => setValue("companySize", value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("register.company.form.fields.sizePlaceholder")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="1-10">{t("register.company.sizes.1-10")}</SelectItem>
|
|
<SelectItem value="11-50">{t("register.company.sizes.11-50")}</SelectItem>
|
|
<SelectItem value="51-200">{t("register.company.sizes.51-200")}</SelectItem>
|
|
<SelectItem value="201-500">{t("register.company.sizes.201-500")}</SelectItem>
|
|
<SelectItem value="501-1000">{t("register.company.sizes.501-1000")}</SelectItem>
|
|
<SelectItem value="1000+">{t("register.company.sizes.1000+")}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.companySize && (
|
|
<span className="text-sm text-destructive">{errors.companySize.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">{t("register.company.form.fields.description")}</Label>
|
|
<Textarea
|
|
id="description"
|
|
placeholder={t("register.company.form.fields.descriptionPlaceholder")}
|
|
className="min-h-[100px]"
|
|
{...register("description")}
|
|
/>
|
|
{errors.description && (
|
|
<span className="text-sm text-destructive">{errors.description.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="contactPerson">{t("register.company.form.fields.contactName")}</Label>
|
|
<Input
|
|
id="contactPerson"
|
|
type="text"
|
|
placeholder={t("register.company.form.fields.contactNamePlaceholder")}
|
|
{...register("contactPerson")}
|
|
/>
|
|
{errors.contactPerson && (
|
|
<span className="text-sm text-destructive">{errors.contactPerson.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="contactRole">{t("register.company.form.fields.contactRole")}</Label>
|
|
<Input
|
|
id="contactRole"
|
|
type="text"
|
|
placeholder={t("register.company.form.fields.contactRolePlaceholder")}
|
|
{...register("contactRole")}
|
|
/>
|
|
{errors.contactRole && (
|
|
<span className="text-sm text-destructive">{errors.contactRole.message}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-start space-x-2">
|
|
<Checkbox
|
|
id="acceptTerms"
|
|
checked={acceptTerms}
|
|
onCheckedChange={(checked) => setValue("acceptTerms", checked as boolean)}
|
|
/>
|
|
<div className="grid gap-1.5 leading-none">
|
|
<label
|
|
htmlFor="acceptTerms"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{t("register.company.form.fields.acceptTerms")}{" "}
|
|
<Link href="/terms" className="text-primary hover:underline">
|
|
{t("terms.title")}
|
|
</Link>{" "}
|
|
{t("register.candidate.acceptTerms.and")}{" "}
|
|
<Link href="/privacy" className="text-primary hover:underline">
|
|
{t("privacy.title")}
|
|
</Link>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{errors.acceptTerms && (
|
|
<span className="text-sm text-destructive">{errors.acceptTerms.message}</span>
|
|
)}
|
|
|
|
<div className="flex items-start space-x-2">
|
|
<Checkbox
|
|
id="acceptNewsletter"
|
|
checked={acceptNewsletter}
|
|
onCheckedChange={(checked) => setValue("acceptNewsletter", checked as boolean)}
|
|
/>
|
|
<div className="grid gap-1.5 leading-none">
|
|
<label
|
|
htmlFor="acceptNewsletter"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{t("register.company.form.fields.acceptNewsletter")}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<Button type="button" variant="outline" onClick={prevStep} className="flex-1">
|
|
{t("register.company.form.actions.back")}
|
|
</Button>
|
|
<Button type="submit" disabled={loading} className="flex-1">
|
|
{loading ? t("register.company.form.actions.submitting") : t("register.company.form.actions.submit")}
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</form>
|
|
|
|
<div className="mt-6 text-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("register.company.form.actions.haveAccount")}{" "}
|
|
<Link href="/login" className="text-primary hover:underline font-medium">
|
|
{t("register.company.form.actions.signIn")}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|