{step === 1 ? "البيانات الأساسية" : "بيانات الاستثمار"}

); } function SignupStepOneFields({ register, errors, show, showConfirm, onToggleShow, onToggleShowConfirm, }: Readonly<{ register: UseFormRegister; errors: FieldErrors; show: boolean; showConfirm: boolean; onToggleShow: () => void; onToggleShowConfirm: () => void; }>) { return (

الاسم الأول {errors.first_name && (

{errors.first_name.message}

)}

الاسم الأخير {errors.last_name && (

{errors.last_name.message}

)}

البريد الإلكتروني

{errors.email && (
{errors.email.message}
)}

رقم الجوال

🇸🇦

{errors.phone && (
{errors.phone.message}
)}

كلمة المرور

تأكيد كلمة المرور

); } function SignupStepTwoFields({ register, errors, documents, vehicleCount, termsAccepted, setValue, onOpenTerms, onOpenPrivacy, profitRate, }: Readonly<{ register: UseFormRegister; errors: FieldErrors; documents: File[]; vehicleCount: string; termsAccepted: boolean; setValue: UseFormSetValue; onOpenTerms: () => void; onOpenPrivacy: () => void; profitRate: ProfitRateValue; }>) { return (

رقم الهوية الوطنية

{errors.national_id && (
{errors.national_id.message}
)}

رقم الآيبان البنكي

{errors.iban && (
{errors.iban.message}
)}

عدد المركبات المراد استثمارها
{["10+", "6-10", "3-5", "1-2"].map((n) => ( ))}

setValue("documents", [...documents, file], { shouldValidate: true, }) } onRemoveFile={(idx) => setValue( "documents", documents.filter((_, i) => i !== idx), { shouldValidate: true }, ) } /> {errors.documents && (
{errors.documents.message}
)}

نسبة الأرباح المتوقعة

{profitRate === null ? "سيتم تحديد نسبة أرباحك من النظام" : `ستحصل على ${String(profitRate).includes("%") ? profitRate : `${profitRate}%`} من إجمالي إيرادات مركباتك`}

أوافق على{" "} {" "} و{" "}
{errors.terms_accepted && (
{errors.terms_accepted.message}
)}
); } function buildSignupFormData(data: SignupData): FormData { const fd = new FormData(); fd.append("first_name", data.first_name); fd.append("last_name", data.last_name); fd.append("email", data.email); fd.append("phone", data.phone); fd.append("country_code", "966"); fd.append("password", data.password); fd.append("password_confirmation", data.password_confirmation); fd.append("national_id", data.national_id); fd.append("iban", data.iban); fd.append("vehicle_count", data.vehicle_count); fd.append("terms_accepted", "1"); data.documents.forEach((file) => { fd.append("documents[]", file); }); return fd; } export default function SignupForm() { const router = useRouter(); const setAuth = useAuthStore((s) => s.setAuth); const { validation } = useValidation(); const { stats } = useProviderStats(); const schema = object({ first_name: validation.name("الرجاء إدخال الاسم الأول"), last_name: validation.name("الرجاء إدخال الاسم الأخير"), email: validation.email(), phone: validation.phone(), password: validation.strict_password(), password_confirmation: validation.strict_password_confirmation(), national_id: validation.national_id(), iban: validation.iban(), vehicle_count: validation.select_option(), documents: validation.files("الرجاء إرفاق المستندات المطلوبة"), terms_accepted: validation.checkbox( "يجب الموافقة على الشروط والأحكام للمتابعة", ), }); const { register, handleSubmit: rhfSubmit, trigger, watch, setValue, formState: { errors }, } = useForm({ resolver: yupResolver(schema) as Resolver, defaultValues: { first_name: "", last_name: "", email: "", phone: "", password: "", password_confirmation: "", national_id: "", iban: "", vehicle_count: "6-10", documents: [], terms_accepted: false, }, }); const [show, setShow] = useState(false); const [showConfirm, setShowConfirm] = useState(false); const [step, setStep] = useState<1 | 2 | 3>(1); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [legalModal, setLegalModal] = useState<"terms" | "privacy" | null>( null, ); const vehicleCount = watch("vehicle_count"); const documents = watch("documents"); const termsAccepted = watch("terms_accepted"); const handleNextStep = async () => { setError(""); const ok = await trigger([ "first_name", "last_name", "email", "phone", "password", "password_confirmation", ]); if (ok) { setStep(2); } }; const onValid = async (data: SignupData) => { setError(""); setLoading(true); await apiFetch("/provider/register", { method: "POST", getSuccess: true, body: buildSignupFormData(data), successCase: (res) => { if (res.data) setAuth(res.data); setStep(3); }, errorCase: (res) => { setError( formatApiMsg(res.msg) || "حدث خطأ أثناء إنشاء الحساب، حاول مرة أخرى", ); }, needApproveCase: () => { router.push("/login"); }, needVerifyCase: (res) => { setError(formatApiMsg(res.msg) || "يرجى التحقق من حسابك"); }, }); setLoading(false); }; const handleFormSubmit = (e: SubmitEvent) => { if (step === 1) { e.preventDefault(); handleNextStep(); return; } rhfSubmit(onValid)(e); }; if (step === 3) { return ; } const activeStep: 1 | 2 = step; return (

إنشاء حساب جديد ✨

انضم لمنصة BEEBPEEP وابدأ استثمارك

{activeStep === 1 ? ( setShow((value) => !value)} onToggleShowConfirm={() => setShowConfirm((value) => !value)} /> ) : ( setLegalModal("terms")} onOpenPrivacy={() => setLegalModal("privacy")} profitRate={stats.profit_rate} /> )} {error && (

{error}

)} {activeStep === 2 && ( )}
لديك حساب بالفعل؟{" "} تسجيل الدخول
setLegalModal(null)} title="الشروط والأحكام" endpoint="/terms" /> setLegalModal(null)} title="سياسة الخصوصية" endpoint="/privacy" />
); }

تم إنشاء الحساب!

إنشاء حساب جديد ✨