feat(dimentorin): mentor register flow wired to API (4-step form, validation, submit, redirect pending)
This commit is contained in:
asepharyana
@@ -1,11 +1,80 @@
|
||||
import { FC, ReactElement, useState } from 'react';
|
||||
import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
|
||||
import { Button, Select } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
|
||||
import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules';
|
||||
import { usePostRegisterMentor, TMentorRegisterRequest } from '@imphnen-frontend-service/service';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
export const Components: FC = (): ReactElement => {
|
||||
const [ step, setStep ] = useState(1)
|
||||
const [step, setStep] = useState(1)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
const [form, setForm] = useState({
|
||||
email: "", password: "", confirmPassword: "",
|
||||
fullname: "", phone_number: "", gender: "", domicile: "",
|
||||
legal_name: "", phone_for_verification: "", identity_document_url: "",
|
||||
last_education: "", bio: "", linkedin_url: "", github_url: "",
|
||||
cv_url: "", portfolio_url: "", industries: "", expertise: "", languages: "",
|
||||
current_company: "", current_role: "", years_of_experience: "",
|
||||
topics_of_interest: "", preferred_mentee_level: "", preferred_mentoring_formats: "",
|
||||
availability_commitment: "", mentoring_rate_amount: "",
|
||||
})
|
||||
const setF = (k: string, v: string) => setForm((f) => ({ ...f, [k]: v }))
|
||||
const registerMutation = usePostRegisterMentor()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setError("")
|
||||
if (form.password !== form.confirmPassword) {
|
||||
setError("Password dan konfirmasi tidak sama.")
|
||||
return
|
||||
}
|
||||
const payload: TMentorRegisterRequest = {
|
||||
email: form.email,
|
||||
password: form.password,
|
||||
fullname: form.fullname,
|
||||
phone_number: form.phone_number || null,
|
||||
identity_and_verification: {
|
||||
legal_name: form.legal_name || form.fullname,
|
||||
gender: form.gender || null,
|
||||
domicile: form.domicile || null,
|
||||
identity_document_url: form.identity_document_url || "https://example.com/identity.jpg",
|
||||
phone_for_verification: form.phone_for_verification || null,
|
||||
},
|
||||
professional_profile: {
|
||||
bio: form.bio,
|
||||
last_education: form.last_education || null,
|
||||
linkedin_url: form.linkedin_url || null,
|
||||
github_url: form.github_url || null,
|
||||
cv_url: form.cv_url || null,
|
||||
portfolio_url: form.portfolio_url || null,
|
||||
industries: form.industries.split(",").map((s) => s.trim()).filter(Boolean),
|
||||
expertise: form.expertise.split(",").map((s) => s.trim()).filter(Boolean),
|
||||
languages: form.languages.split(",").map((s) => s.trim()).filter(Boolean),
|
||||
current_company: form.current_company,
|
||||
current_role: form.current_role,
|
||||
years_of_experience: Number(form.years_of_experience) || 0,
|
||||
},
|
||||
mentoring_logistics: {
|
||||
topics_of_interest: form.topics_of_interest.split(",").map((s) => s.trim()).filter(Boolean),
|
||||
preferred_mentee_level: [form.preferred_mentee_level].filter(Boolean),
|
||||
preferred_mentoring_formats: form.preferred_mentoring_formats.split(",").map((s) => s.trim()).filter(Boolean),
|
||||
availability_commitment: form.availability_commitment,
|
||||
mentoring_rate_amount: Number(form.mentoring_rate_amount) || 0,
|
||||
},
|
||||
}
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await registerMutation.mutateAsync(payload)
|
||||
navigate('/auth/register-mentor/pending')
|
||||
} catch (e: unknown) {
|
||||
const msg = (e as { response?: { data?: { message?: string } } })?.response?.data?.message
|
||||
setError(msg || "Gagal mendaftar sebagai mentor. Coba lagi.")
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
|
||||
@@ -13,13 +82,6 @@ export const Components: FC = (): ReactElement => {
|
||||
<RegisterResetBanner />
|
||||
<div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
|
||||
<div className="xl:w-[714px]">
|
||||
<Button
|
||||
className='xl:hidden gap-3'
|
||||
variant='secondary'
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
Login
|
||||
</Button>
|
||||
<RegisterMentorStep step={step} />
|
||||
<h3 className="mt-5 text-3xl font-semibold text-primary-500">
|
||||
Register
|
||||
@@ -27,60 +89,44 @@ export const Components: FC = (): ReactElement => {
|
||||
<h5 className="text-primary-500 font-medium">
|
||||
Welcome to the team, Mentor - powered by IMPHNEN
|
||||
</h5>
|
||||
<form>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<div className={`${step !== 1 ? 'hidden' : ''}`}>
|
||||
<div className='mt-7 mb-2'>
|
||||
<InputField
|
||||
label="Nama Lengkap"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Nama Lengkap"
|
||||
name={'fullname'}
|
||||
label="Nama Lengkap" size="lg" className="w-full"
|
||||
placeholder="Nama Lengkap" name="fullname"
|
||||
value={form.fullname} onChange={(e) => setF('fullname', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<SelectField
|
||||
label="Jenis Kelamin"
|
||||
defaultValue=""
|
||||
size="lg"
|
||||
error=""
|
||||
label="Jenis Kelamin" defaultValue="" size="lg" error=""
|
||||
value={form.gender} onChange={(e) => setF('gender', e.target.value)}
|
||||
>
|
||||
<option value="" disabled hidden>
|
||||
Pilih Jenis Kelamin
|
||||
</option>
|
||||
<option value="laki-laki">Laki - Laki</option>
|
||||
<option value="perempuan">Perempuan</option>
|
||||
<option value="" disabled hidden>Pilih Jenis Kelamin</option>
|
||||
<option value="Laki-laki">Laki - Laki</option>
|
||||
<option value="Perempuan">Perempuan</option>
|
||||
</SelectField>
|
||||
<div className='my-2'>
|
||||
<InputField
|
||||
label="No Telp/Whatsapp Only"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Nama Lengkap"
|
||||
name={'fullname'}
|
||||
label="No Telp/Whatsapp Only" size="lg" className="w-full"
|
||||
placeholder="Nomor WhatsApp" name="phone_number"
|
||||
value={form.phone_number} onChange={(e) => setF('phone_number', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<SelectField
|
||||
label="Domisili"
|
||||
defaultValue=""
|
||||
size="lg"
|
||||
error=""
|
||||
label="Domisili" defaultValue="" size="lg" error=""
|
||||
value={form.domicile} onChange={(e) => setF('domicile', e.target.value)}
|
||||
>
|
||||
<option value="" disabled hidden>
|
||||
Pilih Domisili
|
||||
</option>
|
||||
<option value="aceh">Aceh</option>
|
||||
<option value="jawa-selatan">Jawa Selatan</option>
|
||||
<option value="" disabled hidden>Pilih Domisili</option>
|
||||
<option value="Aceh">Aceh</option>
|
||||
<option value="Jawa Barat">Jawa Barat</option>
|
||||
</SelectField>
|
||||
<div className='mt-2'>
|
||||
<SelectField
|
||||
label="Pendidikan Terakhir"
|
||||
defaultValue=""
|
||||
size="lg"
|
||||
error=""
|
||||
label="Pendidikan Terakhir" defaultValue="" size="lg" error=""
|
||||
value={form.last_education} onChange={(e) => setF('last_education', e.target.value)}
|
||||
>
|
||||
<option value="" disabled hidden>
|
||||
Apa pendidikan terakhir senpai
|
||||
</option>
|
||||
<option value="" disabled hidden>Apa pendidikan terakhir senpai</option>
|
||||
<option value="SMA">SMA</option>
|
||||
<option value="S1">S1</option>
|
||||
<option value="S2">S2</option>
|
||||
@@ -90,145 +136,85 @@ export const Components: FC = (): ReactElement => {
|
||||
</div>
|
||||
<div className={`${step !== 2 ? 'hidden' : ''}`}>
|
||||
<div className='mt-7 mb-2 gap-2 flex flex-col'>
|
||||
<InputField
|
||||
label="Perusahaan Saat Ini"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Masukkan Perusahaan tempat kerja, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
|
||||
name={'fullname'}
|
||||
/>
|
||||
<InputField
|
||||
label="Masukan jabatan senpai di perusahaan"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Masukan jabatan senpai di perusahaan"
|
||||
name={'fullname'}
|
||||
/>
|
||||
<SelectField
|
||||
label="Topik Keahlian Yang Ingin Diajarkan"
|
||||
defaultValue=""
|
||||
size="lg"
|
||||
error=""
|
||||
>
|
||||
<option value="" disabled hidden>
|
||||
Apa yang ingin anda ajarkan senpaii
|
||||
</option>
|
||||
<option value="Frontend Developer">Frontend Developer</option>
|
||||
<option value="Backend Developer">Backend Developer</option>
|
||||
<option value="Other">Other</option>
|
||||
</SelectField>
|
||||
<InputField
|
||||
label="Jika Mengisi “Other”, Tulis Topik yang Kamu Kuasai"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Tolong isi jika tidak ada di pilihan senpai"
|
||||
name={'fullname'}
|
||||
/>
|
||||
<InputField
|
||||
label="Skill Utama yang Kamu Miliki (boleh lebih dari satu)"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Isi Skill nya dong senpai"
|
||||
name={'fullname'}
|
||||
/>
|
||||
<InputField label="Perusahaan Saat Ini" size="lg" className="w-full"
|
||||
placeholder="Masukkan Perusahaan tempat kerja, Senpai~! ✨" name="current_company"
|
||||
value={form.current_company} onChange={(e) => setF('current_company', e.target.value)} />
|
||||
<InputField label="Masukan jabatan senpai di perusahaan" size="lg" className="w-full"
|
||||
placeholder="Jabatan" name="current_role"
|
||||
value={form.current_role} onChange={(e) => setF('current_role', e.target.value)} />
|
||||
<InputField label="Topik Keahlian Yang Ingin Diajarkan (pisahkan koma)" size="lg" className="w-full"
|
||||
placeholder="mis. Backend Developer, Rust" name="expertise"
|
||||
value={form.expertise} onChange={(e) => setF('expertise', e.target.value)} />
|
||||
<InputField label="Industri (pisahkan koma)" size="lg" className="w-full"
|
||||
placeholder="mis. Software, Education" name="industries"
|
||||
value={form.industries} onChange={(e) => setF('industries', e.target.value)} />
|
||||
<InputField label="Skill Utama / Bahasa (pisahkan koma)" size="lg" className="w-full"
|
||||
placeholder="mis. Rust, TypeScript" name="languages"
|
||||
value={form.languages} onChange={(e) => setF('languages', e.target.value)} />
|
||||
<InputField label="Tahun Pengalaman" type="number" size="lg" className="w-full"
|
||||
placeholder="mis. 3" name="years_of_experience"
|
||||
value={form.years_of_experience} onChange={(e) => setF('years_of_experience', e.target.value)} />
|
||||
<InputField label="Bio Singkat" size="lg" className="w-full"
|
||||
placeholder="Ceritakan pengalaman Anda" name="bio"
|
||||
value={form.bio} onChange={(e) => setF('bio', e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${step !== 3 ? 'hidden' : ''}`}>
|
||||
<div className='mt-7 mb-2 gap-2 flex flex-col'>
|
||||
<SelectField
|
||||
label="Durasi Sesi Mentoring"
|
||||
defaultValue=""
|
||||
size="lg"
|
||||
error=""
|
||||
>
|
||||
<option value="" disabled hidden>
|
||||
Placeholder
|
||||
</option>
|
||||
<InputField label="Topik Mentoring (pisahkan koma)" size="lg" className="w-full"
|
||||
placeholder="mis. Rust Programming, Backend" name="topics_of_interest"
|
||||
value={form.topics_of_interest} onChange={(e) => setF('topics_of_interest', e.target.value)} />
|
||||
<SelectField label="Tingkat Mentee" defaultValue="" size="lg" error=""
|
||||
value={form.preferred_mentee_level} onChange={(e) => setF('preferred_mentee_level', e.target.value)}>
|
||||
<option value="" disabled hidden>Pilih tingkat mentee</option>
|
||||
<option value="beginner">Beginner</option>
|
||||
<option value="intermediate">Intermediate</option>
|
||||
<option value="advanced">Advanced</option>
|
||||
</SelectField>
|
||||
<SelectField
|
||||
label="Format Pengajaran yang Anda Sediakan"
|
||||
defaultValue=""
|
||||
size="lg"
|
||||
error=""
|
||||
>
|
||||
<option value="" disabled hidden>
|
||||
Placeholder
|
||||
</option>
|
||||
</SelectField>
|
||||
<InputField
|
||||
type="file"
|
||||
label="Unggah Curiculum Vitae"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<InputField
|
||||
label="Unggah Portofolio"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Google Drive, Behance, GitHub, Notion, dan lainnya"
|
||||
/>
|
||||
<InputField
|
||||
type='number'
|
||||
label="Honorarium yang Diharapkan per Sesi (Online) Durasi rata-rata sesi: 2,5–3 jam"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Isi Nominalnya dong senpaiii!!!"
|
||||
/>
|
||||
<InputField label="Format Pengajaran (pisahkan koma, mis. online,offline)" size="lg" className="w-full"
|
||||
placeholder="online,offline" name="preferred_mentoring_formats"
|
||||
value={form.preferred_mentoring_formats} onChange={(e) => setF('preferred_mentoring_formats', e.target.value)} />
|
||||
<InputField label="Komitmen Ketersediaan" size="lg" className="w-full"
|
||||
placeholder="mis. 2 jam per minggu" name="availability_commitment"
|
||||
value={form.availability_commitment} onChange={(e) => setF('availability_commitment', e.target.value)} />
|
||||
<InputField label="Honorarium yang Diharapkan per Sesi" type="number" size="lg" className="w-full"
|
||||
placeholder="mis. 500000" name="mentoring_rate_amount"
|
||||
value={form.mentoring_rate_amount} onChange={(e) => setF('mentoring_rate_amount', e.target.value)} />
|
||||
<InputField label="URL LinkedIn" size="lg" className="w-full"
|
||||
placeholder="https://linkedin.com/in/..." name="linkedin_url"
|
||||
value={form.linkedin_url} onChange={(e) => setF('linkedin_url', e.target.value)} />
|
||||
<InputField label="URL Portofolio" size="lg" className="w-full"
|
||||
placeholder="Google Drive, GitHub, Behance" name="portfolio_url"
|
||||
value={form.portfolio_url} onChange={(e) => setF('portfolio_url', e.target.value)} />
|
||||
<h6 className='text-xs'>Silahkan isi dalam angka (Contoh:500.000)</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${step !== 4 ? 'hidden' : ''}`}>
|
||||
<div className='mt-7 mb-2 gap-2 flex flex-col'>
|
||||
<InputField
|
||||
type='email'
|
||||
label="Email"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="isi emailnya dong senpai!!!"
|
||||
/>
|
||||
<InputField
|
||||
type='password'
|
||||
label="Buat Password"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Buat Password"
|
||||
/>
|
||||
<InputField
|
||||
type='password'
|
||||
label="Buat Password"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder="Buat Password"
|
||||
/>
|
||||
<InputField type='email' label="Email" size="lg" className="w-full"
|
||||
placeholder="isi emailnya dong senpai!!!" name="email"
|
||||
value={form.email} onChange={(e) => setF('email', e.target.value)} />
|
||||
<InputField type='password' label="Buat Password" size="lg" className="w-full"
|
||||
placeholder="Buat Password" name="password"
|
||||
value={form.password} onChange={(e) => setF('password', e.target.value)} />
|
||||
<InputField type='password' label="Konfirmasi Password" size="lg" className="w-full"
|
||||
placeholder="Ulangi Password" name="confirmPassword"
|
||||
value={form.confirmPassword} onChange={(e) => setF('confirmPassword', e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="text-danger-600 text-xs mt-3 font-medium">{error}</p>}
|
||||
<div className='flex justify-end mt-4 gap-2'>
|
||||
<Button
|
||||
variant='secondary'
|
||||
onClick={() => setStep(step - 1)}
|
||||
type='button'
|
||||
className={`${step === 1 ? 'hidden' : ''}`}
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
Kembali
|
||||
<Button variant='secondary' onClick={() => setStep(step - 1)} type='button'
|
||||
className={`${step === 1 ? 'hidden' : ''}`}>
|
||||
<ArrowLeftOutlined /> Kembali
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
onClick={() => setStep(step + 1)}
|
||||
type='button'
|
||||
className={`${step === 4 ? 'hidden' : ''}`}
|
||||
>
|
||||
Lanjutkan
|
||||
<ArrowRightOutlined />
|
||||
<Button variant='primary' onClick={() => setStep(step + 1)} type='button'
|
||||
className={`${step === 4 ? 'hidden' : ''}`}>
|
||||
Lanjutkan <ArrowRightOutlined />
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
onClick={() => setStep(step + 1)}
|
||||
type='button'
|
||||
className={`${step === 4 ? '' : 'hidden'}`}
|
||||
>
|
||||
Selesaikan
|
||||
<ArrowRightOutlined />
|
||||
<Button variant='primary' onClick={handleSubmit} type='button'
|
||||
className={`${step === 4 ? '' : 'hidden'}`} disabled={submitting}>
|
||||
{submitting ? "Mengirim..." : "Selesaikan"} <ArrowRightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -239,4 +225,4 @@ export const Components: FC = (): ReactElement => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Components;
|
||||
export default Components;
|
||||
Reference in New Issue
Block a user