963 lines
56 KiB
TypeScript
963 lines
56 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { translations, Language } from "./translations";
|
|
import { toast } from "sonner";
|
|
import { Navbar } from "@/components/navbar";
|
|
import { Footer } from "@/components/footer";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import {
|
|
Building2, Briefcase, Mail, Lock, Phone, MapPin,
|
|
Eye, EyeOff, Globe
|
|
} from "lucide-react";
|
|
import { LocationPicker } from "@/components/location-picker";
|
|
import { RichTextEditor } from "@/components/rich-text-editor";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { useTranslation } from "@/lib/i18n";
|
|
import { JobFormBuilder, Question } from "@/components/job-form-builder";
|
|
|
|
// Common Country Codes
|
|
const COUNTRY_CODES = [
|
|
{ code: "+55", country: "Brasil (BR)" },
|
|
{ code: "+1", country: "Estados Unidos (US)" },
|
|
{ code: "+351", country: "Portugal (PT)" },
|
|
{ code: "+44", country: "Reino Unido (UK)" },
|
|
{ code: "+33", country: "França (FR)" },
|
|
{ code: "+49", country: "Alemanha (DE)" },
|
|
{ code: "+34", country: "Espanha (ES)" },
|
|
{ code: "+39", country: "Itália (IT)" },
|
|
{ code: "+81", country: "Japão (JP)" },
|
|
{ code: "+86", country: "China (CN)" },
|
|
{ code: "+91", country: "Índia (IN)" },
|
|
{ code: "+52", country: "México (MX)" },
|
|
{ code: "+54", country: "Argentina (AR)" },
|
|
{ code: "+57", country: "Colômbia (CO)" },
|
|
{ code: "+56", country: "Chile (CL)" },
|
|
{ code: "+51", country: "Peru (PE)" },
|
|
].sort((a, b) => a.country.localeCompare(b.country));
|
|
|
|
// Currency symbol helper
|
|
const getCurrencySymbol = (code: string): string => {
|
|
const symbols: Record<string, string> = {
|
|
'BRL': 'R$', 'USD': '$', 'EUR': '€', 'JPY': '¥', 'GBP': '£',
|
|
'CNY': '¥', 'AED': 'د.إ', 'CAD': 'C$', 'AUD': 'A$', 'CHF': 'Fr'
|
|
};
|
|
return symbols[code] || code;
|
|
};
|
|
|
|
|
|
|
|
export default function PostJobPage() {
|
|
const router = useRouter();
|
|
const [step, setStep] = useState<1 | 2 | 3>(1);
|
|
const { locale, setLocale } = useTranslation();
|
|
|
|
const lang = useMemo<Language>(() => (locale === "pt-BR" ? "pt" : locale), [locale]);
|
|
const t = translations[lang];
|
|
|
|
// Helper inside to use t
|
|
const getSalaryPeriodLabel = (type: string): string => {
|
|
const labels: Record<string, string> = {
|
|
'hourly': t.options.period.hourly,
|
|
'daily': t.options.period.daily,
|
|
'weekly': t.options.period.weekly,
|
|
'monthly': t.options.period.monthly,
|
|
'yearly': t.options.period.yearly
|
|
};
|
|
return labels[type] || '';
|
|
};
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// Company/User data
|
|
const [company, setCompany] = useState({
|
|
name: "",
|
|
email: "",
|
|
document: "",
|
|
password: "",
|
|
confirmPassword: "",
|
|
ddi: "+55",
|
|
phone: "",
|
|
website: "",
|
|
employeeCount: "",
|
|
foundedYear: "",
|
|
description: "",
|
|
});
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
|
|
// Job data
|
|
const [job, setJob] = useState({
|
|
title: "",
|
|
description: "",
|
|
location: "",
|
|
country: "",
|
|
salaryMin: "",
|
|
salaryMax: "",
|
|
salaryFixed: "", // For fixed salary mode
|
|
currency: "BRL", // Default currency
|
|
salaryType: "monthly", // Default salary period
|
|
employmentType: "",
|
|
workMode: "remote",
|
|
workingHours: "",
|
|
salaryNegotiable: false, // Candidate proposes salary
|
|
descriptionLanguage: "",
|
|
applicationChannel: "email",
|
|
applicationEmail: "",
|
|
applicationUrl: "",
|
|
applicationPhone: "",
|
|
resumeRequirement: "optional",
|
|
jobCategory: "",
|
|
benefits: [] as string[],
|
|
});
|
|
|
|
const [questions, setQuestions] = useState<Question[]>([]);
|
|
|
|
// Salary mode toggle: 'fixed' | 'range'
|
|
const [salaryMode, setSalaryMode] = useState<'fixed' | 'range'>('fixed');
|
|
|
|
const BENEFIT_OPTIONS = ["Plano de saúde", "Vale refeição", "Vale transporte", "Bônus", "Home office", "Gym pass"];
|
|
|
|
const JOB_CATEGORIES = ["Tecnologia", "Produto", "Dados", "Marketing", "Vendas", "Operações", "Financeiro", "RH"];
|
|
|
|
const JOB_COUNTRIES = ["BR", "PT", "US", "ES", "UK", "DE", "FR", "JP"];
|
|
|
|
const cleanCNPJ = (value: string) => value.replace(/\D/g, "");
|
|
|
|
const isValidCNPJ = (value: string) => {
|
|
const cnpj = cleanCNPJ(value);
|
|
if (cnpj.length !== 14) return false;
|
|
if (/^(\d)\1+$/.test(cnpj)) return false;
|
|
|
|
const calcCheckDigit = (base: string, weights: number[]) => {
|
|
const sum = base
|
|
.split("")
|
|
.reduce((acc, current, index) => acc + Number(current) * weights[index], 0);
|
|
const mod = sum % 11;
|
|
return mod < 2 ? 0 : 11 - mod;
|
|
};
|
|
|
|
const base12 = cnpj.slice(0, 12);
|
|
const digit1 = calcCheckDigit(base12, [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2]);
|
|
const digit2 = calcCheckDigit(`${base12}${digit1}`, [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2]);
|
|
return cnpj === `${base12}${digit1}${digit2}`;
|
|
};
|
|
|
|
const isHttpsUrl = (value: string) => /^https:\/\/.+/i.test(value);
|
|
const isPhoneWithDDI = (value: string) => /^\+\d{1,3}\s?\d{8,14}$/.test(value.trim());
|
|
|
|
const formatPhoneForDisplay = (value: string) => {
|
|
// Simple formatting to just allow numbers and basic separators if needed
|
|
// For now, just pass through but maybe restrict chars?
|
|
return value.replace(/[^\d\s-]/g, "");
|
|
};
|
|
|
|
const validateForm = () => {
|
|
if (!company.name || !company.email || !company.password) {
|
|
toast.error(t.errors.company_required);
|
|
setStep(1); // Ensure we are on step 1 for company data errors
|
|
return false;
|
|
}
|
|
|
|
if (company.document && !isValidCNPJ(company.document)) {
|
|
toast.error("CNPJ inválido.");
|
|
setStep(1);
|
|
return false;
|
|
}
|
|
|
|
if (company.password !== company.confirmPassword) {
|
|
toast.error(t.errors.password_mismatch);
|
|
setStep(1); // Ensure we are on step 1 for password mismatch
|
|
return false;
|
|
}
|
|
|
|
if (company.password.length < 8) {
|
|
toast.error(t.errors.password_length);
|
|
setStep(1); // Ensure we are on step 1 for password length
|
|
return false;
|
|
}
|
|
|
|
if (!job.title || !job.description || !job.location || !job.country || !job.descriptionLanguage) {
|
|
toast.error(t.errors.job_required);
|
|
setStep(1); // Stay on step 1 for job data errors
|
|
return false;
|
|
}
|
|
|
|
if (job.title.length > 65) {
|
|
toast.error("O título da vaga deve ter no máximo 65 caracteres.");
|
|
setStep(1);
|
|
return false;
|
|
}
|
|
|
|
if (job.applicationChannel === "email" && !job.applicationEmail) {
|
|
toast.error("Informe um e-mail para candidatura.");
|
|
setStep(1);
|
|
return false;
|
|
}
|
|
|
|
if (job.applicationChannel === "url" && !isHttpsUrl(job.applicationUrl)) {
|
|
toast.error("Informe uma URL HTTPS válida para candidatura.");
|
|
setStep(1);
|
|
return false;
|
|
}
|
|
|
|
if (job.applicationChannel === "phone" && !isPhoneWithDDI(job.applicationPhone)) {
|
|
toast.error("Informe um telefone com DDI válido (ex: +55 11999998888).");
|
|
setStep(1);
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
const handleNext = () => {
|
|
// Only validate step 1 fields to move to step 2
|
|
if (step === 1) {
|
|
if (!company.name || !company.email || !company.password) {
|
|
toast.error(t.errors.company_required);
|
|
return;
|
|
}
|
|
if (company.password !== company.confirmPassword) {
|
|
toast.error(t.errors.password_mismatch);
|
|
return;
|
|
}
|
|
if (company.password.length < 8) {
|
|
toast.error(t.errors.password_length);
|
|
return;
|
|
}
|
|
if (!job.title || !job.description || !job.location || !job.country || !job.descriptionLanguage) {
|
|
toast.error("Preencha título, localidade, país, idioma e descrição da vaga.");
|
|
return;
|
|
}
|
|
if (job.title.length > 65) {
|
|
toast.error("O título da vaga deve ter no máximo 65 caracteres.");
|
|
return;
|
|
}
|
|
setStep(2);
|
|
} else if (step === 2) {
|
|
setStep(3);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!validateForm()) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
|
|
|
|
// Format phone: DDI + Phone (digits only)
|
|
const cleanPhone = company.phone.replace(/\D/g, "");
|
|
const finalPhone = cleanPhone ? `${company.ddi}${cleanPhone}` : "";
|
|
|
|
// 1. Register Company (creates user + company)
|
|
const registerRes = await fetch(`${apiBase}/api/v1/auth/register/company`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
companyName: company.name,
|
|
email: company.email,
|
|
document: cleanCNPJ(company.document) || null,
|
|
password: company.password,
|
|
phone: finalPhone,
|
|
website: company.website || null,
|
|
employeeCount: company.employeeCount || null,
|
|
foundedYear: company.foundedYear ? parseInt(company.foundedYear) : null,
|
|
description: company.description || null,
|
|
}),
|
|
});
|
|
|
|
if (!registerRes.ok) {
|
|
const err = await registerRes.json();
|
|
throw new Error(err.message || "Erro ao registrar empresa");
|
|
}
|
|
|
|
const { token } = await registerRes.json();
|
|
|
|
// 2. Create Job with token
|
|
const jobRes = await fetch(`${apiBase}/api/v1/jobs`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Authorization": `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({
|
|
title: job.title,
|
|
description: job.description,
|
|
location: `${job.location}, ${job.country}`,
|
|
// Salary logic: if negotiable, send null values
|
|
salaryMin: job.salaryNegotiable ? null : (salaryMode === 'fixed' ? (job.salaryFixed ? parseInt(job.salaryFixed) : null) : (job.salaryMin ? parseInt(job.salaryMin) : null)),
|
|
salaryMax: job.salaryNegotiable ? null : (salaryMode === 'fixed' ? (job.salaryFixed ? parseInt(job.salaryFixed) : null) : (job.salaryMax ? parseInt(job.salaryMax) : null)),
|
|
salaryType: job.salaryNegotiable ? null : job.salaryType,
|
|
currency: job.salaryNegotiable ? null : job.currency,
|
|
salaryNegotiable: job.salaryNegotiable,
|
|
employmentType: job.employmentType || null,
|
|
workingHours: job.workingHours || null,
|
|
workMode: job.workMode,
|
|
status: "pending",
|
|
questions: questions.length > 0 ? questions : null,
|
|
languageLevel: job.descriptionLanguage || null,
|
|
requirements: {
|
|
category: job.jobCategory || null,
|
|
resumeRequirement: job.resumeRequirement,
|
|
applicationChannel: job.applicationChannel,
|
|
},
|
|
benefits: {
|
|
selected: job.benefits,
|
|
},
|
|
}),
|
|
});
|
|
|
|
if (!jobRes.ok) {
|
|
const err = await jobRes.json();
|
|
throw new Error(err.message || "Erro ao criar vaga");
|
|
}
|
|
|
|
// Save token for future use
|
|
localStorage.setItem("token", token);
|
|
localStorage.setItem("auth_token", token);
|
|
|
|
toast.success(t.success.job_created);
|
|
router.push("/dashboard/jobs");
|
|
|
|
} catch (err: any) {
|
|
toast.error(err.message || t.errors.submit_failed);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col">
|
|
<Navbar />
|
|
|
|
<main className="flex-1 py-12">
|
|
<div className="container max-w-2xl mx-auto px-4">
|
|
<div className="relative mb-8">
|
|
<div className="absolute right-0 top-0">
|
|
<Select
|
|
value={lang}
|
|
onValueChange={(value) => {
|
|
const nextLang = value as Language;
|
|
setLocale(nextLang === "pt" ? "pt-BR" : nextLang);
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="pt">🇧🇷 Português</SelectItem>
|
|
<SelectItem value="en">🇺🇸 English</SelectItem>
|
|
<SelectItem value="es">🇪🇸 Español</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="text-center pt-2">
|
|
<h1 className="text-3xl font-bold mb-2">{t.title}</h1>
|
|
<p className="text-muted-foreground">
|
|
{t.subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress Steps */}
|
|
<div className="flex justify-center gap-4 mb-8">
|
|
{[1, 2, 3].map((s) => (
|
|
<div
|
|
key={s}
|
|
className={`flex items-center gap-2 ${step >= s ? "text-primary" : "text-muted-foreground"}`}
|
|
>
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${step >= s ? "bg-primary text-white" : "bg-muted"}`}>
|
|
{s}
|
|
</div>
|
|
<span className="hidden sm:inline text-sm">
|
|
{s === 1 ? t.steps.data : s === 2 ? "Formulário" : t.steps.confirm}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
{step === 1 && t.cardTitle.step1}
|
|
{step === 2 && "Configure o Formulário"}
|
|
{step === 3 && t.cardTitle.step2}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{step === 1 && t.cardDesc.step1}
|
|
{step === 2 && "Defina as perguntas que os candidatos deverão responder."}
|
|
{step === 3 && t.cardDesc.step2}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* Step 1: Company */}
|
|
{step === 1 && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label>{t.company.name}</Label>
|
|
<div className="relative">
|
|
<Building2 className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
value={company.name}
|
|
onChange={(e) => setCompany({ ...company, name: e.target.value })}
|
|
placeholder={t.company.namePlaceholder}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label>{t.company.email}</Label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="email"
|
|
value={company.email}
|
|
onChange={(e) => setCompany({ ...company, email: e.target.value })}
|
|
placeholder="contato@empresa.com"
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>CNPJ da empresa (opcional)</Label>
|
|
<Input
|
|
value={company.document}
|
|
onChange={(e) => setCompany({ ...company, document: e.target.value })}
|
|
placeholder="00.000.000/0000-00"
|
|
/>
|
|
</div>
|
|
|
|
{/* Password Field */}
|
|
<div>
|
|
<Label>{t.company.password}</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type={showPassword ? "text" : "password"}
|
|
value={company.password}
|
|
onChange={(e) => setCompany({ ...company, password: e.target.value })}
|
|
placeholder="••••••••"
|
|
className="pl-10 pr-10" // Extra padding for eye icon
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-3 text-muted-foreground hover:text-foreground focus:outline-none"
|
|
>
|
|
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Confirm Password Field */}
|
|
<div>
|
|
<Label>{t.company.confirmPassword}</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type={showConfirmPassword ? "text" : "password"}
|
|
value={company.confirmPassword}
|
|
onChange={(e) => setCompany({ ...company, confirmPassword: e.target.value })}
|
|
placeholder="••••••••"
|
|
className="pl-10 pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
className="absolute right-3 top-3 text-muted-foreground hover:text-foreground focus:outline-none"
|
|
>
|
|
{showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Phone Field with DDI */}
|
|
<div>
|
|
<Label>{t.company.phone}</Label>
|
|
<div className="flex border rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
|
|
<div className="w-[140px] border-r">
|
|
<Select value={company.ddi} onValueChange={(val) => setCompany({ ...company, ddi: val })}>
|
|
<SelectTrigger className="pl-9 relative border-0 shadow-none focus:ring-0 rounded-r-none h-10">
|
|
<Globe className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<SelectValue placeholder="DDI" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{COUNTRY_CODES.map((item) => (
|
|
<SelectItem key={item.country} value={item.code}>
|
|
<span className="flex items-center justify-between w-full min-w-[80px]">
|
|
<span>{item.code}</span>
|
|
<span className="text-muted-foreground ml-2 text-xs truncate max-w-[100px]">{item.country}</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="relative flex-1">
|
|
<Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="tel"
|
|
value={formatPhoneForDisplay(company.phone)}
|
|
onChange={(e) => setCompany({ ...company, phone: e.target.value })}
|
|
placeholder="11 99999-9999"
|
|
className="pl-10 border-0 shadow-none focus-visible:ring-0 rounded-l-none h-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-1 ml-1">
|
|
{t.company.phoneHelp}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Website */}
|
|
<div>
|
|
<Label>{t.company.website}</Label>
|
|
<div className="relative">
|
|
<Globe className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="url"
|
|
value={company.website}
|
|
onChange={(e) => setCompany({ ...company, website: e.target.value })}
|
|
placeholder="https://www.suaempresa.com.br"
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Employee Count & Founded Year */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>{t.company.size}</Label>
|
|
<select
|
|
value={company.employeeCount}
|
|
onChange={(e) => setCompany({ ...company, employeeCount: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background"
|
|
>
|
|
<option value="">{t.company.sizePlaceholder}</option>
|
|
<option value="1-10">1-10</option>
|
|
<option value="11-50">11-50</option>
|
|
<option value="51-200">51-200</option>
|
|
<option value="201-500">201-500</option>
|
|
<option value="501-1000">501-1000</option>
|
|
<option value="1001+">1001+</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<Label>{t.company.founded}</Label>
|
|
<Input
|
|
type="number"
|
|
value={company.foundedYear}
|
|
onChange={(e) => setCompany({ ...company, foundedYear: e.target.value })}
|
|
placeholder="ex: 2010"
|
|
min="1800"
|
|
max={new Date().getFullYear()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* About Company */}
|
|
<div>
|
|
<Label>{t.company.description}</Label>
|
|
<RichTextEditor
|
|
value={company.description}
|
|
onChange={(val) => setCompany({ ...company, description: val })}
|
|
placeholder="Descreva sua empresa, cultura, missão e valores..."
|
|
minHeight="120px"
|
|
/>
|
|
</div>
|
|
|
|
{/* Separator */}
|
|
<div className="border-t pt-6 mt-6">
|
|
<h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
|
|
<Briefcase className="h-5 w-5" /> {t.job.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>{t.job.jobTitle}</Label>
|
|
<div className="relative">
|
|
<Briefcase className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
value={job.title}
|
|
onChange={(e) => setJob({ ...job, title: e.target.value })}
|
|
placeholder={t.job.jobTitlePlaceholder}
|
|
className="pl-10"
|
|
maxLength={65}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-1">{job.title.length}/65 caracteres</p>
|
|
</div>
|
|
<div>
|
|
<Label>{t.job.description}</Label>
|
|
<RichTextEditor
|
|
value={job.description}
|
|
onChange={(val) => setJob({ ...job, description: val })}
|
|
placeholder="Descreva as responsabilidades, requisitos e benefícios..."
|
|
minHeight="150px"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
{/* Includes Label and Layout internally. */}
|
|
<LocationPicker
|
|
value={job.location}
|
|
onChange={(val) => setJob({ ...job, location: val })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>País da vaga *</Label>
|
|
<select
|
|
value={job.country}
|
|
onChange={(e) => setJob({ ...job, country: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background"
|
|
>
|
|
<option value="">Selecione</option>
|
|
{JOB_COUNTRIES.map((country) => (
|
|
<option key={country} value={country}>{country}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<Label>Idioma da descrição *</Label>
|
|
<select
|
|
value={job.descriptionLanguage}
|
|
onChange={(e) => setJob({ ...job, descriptionLanguage: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background"
|
|
>
|
|
<option value="">Selecione</option>
|
|
<option value="pt">Português</option>
|
|
<option value="en">English</option>
|
|
<option value="es">Español</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{/* Salary Section */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label>{t.job.salary}</Label>
|
|
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={job.salaryNegotiable}
|
|
onChange={(e) => setJob({ ...job, salaryNegotiable: e.target.checked })}
|
|
className="rounded"
|
|
/>
|
|
<span className="text-muted-foreground">{t.job.salaryNegotiable}</span>
|
|
</label>
|
|
</div>
|
|
|
|
{!job.salaryNegotiable && (
|
|
<>
|
|
{/* Currency and Period Row */}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<Label className="text-xs text-muted-foreground">{t.job.currency}</Label>
|
|
<select
|
|
value={job.currency}
|
|
onChange={(e) => setJob({ ...job, currency: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background text-sm"
|
|
>
|
|
<option value="BRL">R$ (BRL)</option>
|
|
<option value="USD">$ (USD)</option>
|
|
<option value="EUR">€ (EUR)</option>
|
|
<option value="JPY">¥ (JPY)</option>
|
|
<option value="GBP">£ (GBP)</option>
|
|
<option value="CNY">¥ (CNY)</option>
|
|
<option value="AED">د.إ (AED)</option>
|
|
<option value="CAD">$ (CAD)</option>
|
|
<option value="AUD">$ (AUD)</option>
|
|
<option value="CHF">Fr (CHF)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs text-muted-foreground">{t.job.period}</Label>
|
|
<select
|
|
value={job.salaryType}
|
|
onChange={(e) => setJob({ ...job, salaryType: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background text-sm"
|
|
>
|
|
<option value="hourly">{t.options.period.hourly}</option>
|
|
<option value="daily">{t.options.period.daily}</option>
|
|
<option value="weekly">{t.options.period.weekly}</option>
|
|
<option value="monthly">{t.options.period.monthly}</option>
|
|
<option value="yearly">{t.options.period.yearly}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Salary Value(s) */}
|
|
{salaryMode === 'fixed' ? (
|
|
<Input
|
|
type="number"
|
|
value={job.salaryFixed}
|
|
onChange={(e) => setJob({ ...job, salaryFixed: e.target.value })}
|
|
placeholder="Valor"
|
|
/>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<Input
|
|
type="number"
|
|
value={job.salaryMin}
|
|
onChange={(e) => setJob({ ...job, salaryMin: e.target.value })}
|
|
placeholder="Mín"
|
|
/>
|
|
<Input
|
|
type="number"
|
|
value={job.salaryMax}
|
|
onChange={(e) => setJob({ ...job, salaryMax: e.target.value })}
|
|
placeholder="Máx"
|
|
/>
|
|
</div>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => setSalaryMode(salaryMode === 'fixed' ? 'range' : 'fixed')}
|
|
className="flex items-center gap-1 text-sm text-primary hover:underline"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
{salaryMode === 'fixed' ? 'Faixa salarial' : 'Salário fixo'}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<Label>{t.job.contractType}</Label>
|
|
<select
|
|
value={job.employmentType}
|
|
onChange={(e) => setJob({ ...job, employmentType: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background"
|
|
>
|
|
<option value="">{t.options.any}</option>
|
|
<option value="permanent">{t.options.contract.permanent}</option>
|
|
<option value="contract">{t.options.contract.contract}</option>
|
|
<option value="training">{t.options.contract.training}</option>
|
|
<option value="temporary">{t.options.contract.temporary}</option>
|
|
<option value="voluntary">{t.options.contract.voluntary}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<Label>{t.job.workingHours}</Label>
|
|
<select
|
|
value={job.workingHours}
|
|
onChange={(e) => setJob({ ...job, workingHours: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background"
|
|
>
|
|
<option value="">{t.options.any}</option>
|
|
<option value="full-time">{t.options.hours.fullTime}</option>
|
|
<option value="part-time">{t.options.hours.partTime}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<Label>{t.job.workMode}</Label>
|
|
<select
|
|
value={job.workMode}
|
|
onChange={(e) => setJob({ ...job, workMode: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg"
|
|
>
|
|
<option value="remote">{t.options.mode.remote}</option>
|
|
<option value="hybrid">{t.options.mode.hybrid}</option>
|
|
<option value="onsite">{t.options.mode.onsite}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Canal de candidatura</Label>
|
|
<select
|
|
value={job.applicationChannel}
|
|
onChange={(e) => setJob({ ...job, applicationChannel: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background"
|
|
>
|
|
<option value="email">E-mail</option>
|
|
<option value="url">Link externo</option>
|
|
<option value="phone">Telefone</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<Label>Currículo</Label>
|
|
<select
|
|
value={job.resumeRequirement}
|
|
onChange={(e) => setJob({ ...job, resumeRequirement: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background"
|
|
>
|
|
<option value="required">Obrigatório</option>
|
|
<option value="optional">Opcional</option>
|
|
<option value="none">Não solicitado</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{job.applicationChannel === "email" && (
|
|
<div>
|
|
<Label>E-mail para candidatura</Label>
|
|
<Input
|
|
type="email"
|
|
value={job.applicationEmail}
|
|
onChange={(e) => setJob({ ...job, applicationEmail: e.target.value })}
|
|
placeholder="jobs@empresa.com"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{job.applicationChannel === "url" && (
|
|
<div>
|
|
<Label>URL externa (HTTPS)</Label>
|
|
<Input
|
|
value={job.applicationUrl}
|
|
onChange={(e) => setJob({ ...job, applicationUrl: e.target.value })}
|
|
placeholder="https://empresa.com/carreiras"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{job.applicationChannel === "phone" && (
|
|
<div>
|
|
<Label>Telefone com DDI</Label>
|
|
<Input
|
|
value={job.applicationPhone}
|
|
onChange={(e) => setJob({ ...job, applicationPhone: e.target.value })}
|
|
placeholder="+55 11999998888"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Área de atuação</Label>
|
|
<select
|
|
value={job.jobCategory}
|
|
onChange={(e) => setJob({ ...job, jobCategory: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg bg-background"
|
|
>
|
|
<option value="">Selecione</option>
|
|
{JOB_CATEGORIES.map((category) => (
|
|
<option key={category} value={category}>{category}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<Label>Benefícios</Label>
|
|
<div className="grid grid-cols-2 gap-2 text-sm">
|
|
{BENEFIT_OPTIONS.map((benefit) => {
|
|
const checked = job.benefits.includes(benefit);
|
|
return (
|
|
<label key={benefit} className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={(e) => {
|
|
const nextBenefits = e.target.checked
|
|
? [...job.benefits, benefit]
|
|
: job.benefits.filter((item) => item !== benefit);
|
|
setJob({ ...job, benefits: nextBenefits });
|
|
}}
|
|
/>
|
|
{benefit}
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button onClick={handleNext} className="w-full">
|
|
{t.buttons.next}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: Questions */}
|
|
{step === 2 && (
|
|
<div className="space-y-6">
|
|
<div className="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded text-sm mb-4">
|
|
<p><strong>Crie formulários inteligentes:</strong> Faça perguntas específicas para filtrar os melhores candidatos.</p>
|
|
</div>
|
|
|
|
<JobFormBuilder
|
|
questions={questions}
|
|
onChange={setQuestions}
|
|
/>
|
|
|
|
<div className="flex gap-3 pt-6">
|
|
<Button variant="outline" onClick={() => setStep(1)} className="flex-1">
|
|
{t.buttons.back}
|
|
</Button>
|
|
<Button onClick={handleNext} className="flex-1">
|
|
Revisar e Publicar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 3: Confirm */}
|
|
{step === 3 && (
|
|
<div className="space-y-6">
|
|
<div className="bg-muted/50 rounded-lg p-4">
|
|
<h3 className="font-semibold mb-2 flex items-center gap-2">
|
|
<Building2 className="h-4 w-4" /> {t.common.company}
|
|
</h3>
|
|
<p><strong>{t.common.name}:</strong> {company.name}</p>
|
|
<p><strong>{t.common.email}:</strong> {company.email}</p>
|
|
{company.phone && <p><strong>{t.common.phone}:</strong> {company.ddi} {company.phone}</p>}
|
|
</div>
|
|
<div className="bg-muted/50 rounded-lg p-4">
|
|
<h3 className="font-semibold mb-2 flex items-center gap-2">
|
|
<Briefcase className="h-4 w-4" /> {t.common.job}
|
|
</h3>
|
|
<p><strong>{t.common.title}:</strong> {job.title}</p>
|
|
<p><strong>{t.common.location}:</strong> {job.location || "Não informado"}</p>
|
|
<p><strong>País:</strong> {job.country || "Não informado"}</p>
|
|
<p><strong>Idioma:</strong> {job.descriptionLanguage || "Não informado"}</p>
|
|
<p><strong>{t.common.salary}:</strong> {
|
|
job.salaryNegotiable
|
|
? t.job.salaryNegotiable
|
|
: salaryMode === 'fixed'
|
|
? (job.salaryFixed ? `${getCurrencySymbol(job.currency)} ${job.salaryFixed} ${getSalaryPeriodLabel(job.salaryType)}` : t.job.salaryNegotiable)
|
|
: (job.salaryMin && job.salaryMax ? `${getCurrencySymbol(job.currency)} ${job.salaryMin} - ${job.salaryMax} ${getSalaryPeriodLabel(job.salaryType)}` : t.job.salaryNegotiable)
|
|
}</p>
|
|
<p><strong>Perguntas Personalizadas:</strong> {questions.length}</p>
|
|
<p><strong>Canal de candidatura:</strong> {job.applicationChannel}</p>
|
|
<p><strong>Currículo:</strong> {job.resumeRequirement}</p>
|
|
<p><strong>Área:</strong> {job.jobCategory || "Não informado"}</p>
|
|
<p><strong>Benefícios:</strong> {job.benefits.length > 0 ? job.benefits.join(", ") : "Não informado"}</p>
|
|
<p><strong>{t.common.type}:</strong> {
|
|
(job.employmentType ? (t.options.contract[job.employmentType as keyof typeof t.options.contract] || job.employmentType) : t.options.any)
|
|
} / {
|
|
job.workingHours === 'full-time' ? t.options.hours.fullTime : job.workingHours === 'part-time' ? t.options.hours.partTime : t.options.any
|
|
} / {
|
|
job.workMode === 'remote' ? t.options.mode.remote : job.workMode === 'hybrid' ? t.options.mode.hybrid : t.options.mode.onsite
|
|
}</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<Button variant="outline" onClick={() => setStep(2)} className="flex-1">
|
|
{t.buttons.back}
|
|
</Button>
|
|
<Button onClick={handleSubmit} disabled={loading} className="flex-1">
|
|
{loading ? t.buttons.publishing : t.buttons.publish}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</main >
|
|
|
|
<Footer />
|
|
</div >
|
|
);
|
|
}
|