From 378d2d0f37679e544774c6a4f507c691bf709934 Mon Sep 17 00:00:00 2001
From: Rahaf <User@DESKTOP-JSF2AL8>
Date: Wed, 6 May 2026 18:54:05 +0300
Subject: [PATCH] Edit register for owner

---
 app/register/owner/page.js | 50 ++++++++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/app/register/owner/page.js b/app/register/owner/page.js
index 84bccaa..b4852d4 100644
--- a/app/register/owner/page.js
+++ b/app/register/owner/page.js
@@ -618,7 +618,7 @@
 
 'use client';
 
-import { useState, useRef, useMemo } from 'react';
+import { useState, useRef, useMemo, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
@@ -666,7 +666,11 @@ export default function OwnerRegisterPage() {
   const fileInputBackRef = useRef(null);
   const fileInputLicenseRef = useRef(null);
 
-  const isCompany = formData.ownerType === OwnerType.REAL_ESTATE_AGENCY;
+  const [isCompany, setIsCompany] = useState(Number(formData.ownerType) === OwnerType.REAL_ESTATE_AGENCY);
+
+  useEffect(() => {
+    setIsCompany(Number(formData.ownerType) === OwnerType.REAL_ESTATE_AGENCY);
+  }, [formData.ownerType]);
 
   const handleImageUpload = (side, file) => {
     if (!file) return;
@@ -722,7 +726,6 @@ export default function OwnerRegisterPage() {
     const newErrors = {};
     if (!idImages.front) newErrors.front = 'صورة الوجه الأمامي للهوية مطلوبة';
     if (!idImages.back) newErrors.back = 'صورة الوجه الخلفي للهوية مطلوبة';
-    if (isCompany && !idImages.license) newErrors.license = 'صورة الرخصة/السجل التجاري مطلوبة';
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
@@ -1058,8 +1061,18 @@ export default function OwnerRegisterPage() {
 
                   <motion.div variants={fadeInUp}>
                     <label className="block text-sm font-medium text-gray-300 mb-2">نوع المالك <span className="text-red-500">*</span></label>
-                    <select value={formData.ownerType}
-                      onChange={(e) => setFormData({...formData, ownerType: e.target.value})}
+                    <select value={formData.ownerType.toString()}
+                      onChange={(e) => {
+                        const selectedType = parseInt(e.target.value, 10);
+                        setFormData((prev) => ({
+                          ...prev,
+                          ownerType: selectedType,
+                          ...(selectedType !== OwnerType.REAL_ESTATE_AGENCY ? {
+                            licenseNumber: '',
+                            companyAddress: ''
+                          } : {})
+                        }));
+                      }}
                       className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white appearance-none cursor-pointer">
                       {Object.entries(OwnerTypeLabels).map(([value, label]) => (
                         <option key={value} value={value} className="bg-gray-900 text-white">{label}</option>
@@ -1185,18 +1198,20 @@ export default function OwnerRegisterPage() {
                     {errors.back && <p className="text-red-500 text-sm mt-1">{errors.back}</p>}
                   </motion.div>
 
-                  <AnimatePresence>
-                    {isCompany && (
-                      <motion.div
-                        initial={{ opacity: 0, height: 0 }}
-                        animate={{ opacity: 1, height: 'auto' }}
-                        exit={{ opacity: 0, height: 0 }}
-                        className="overflow-hidden"
-                      >
+                  {isCompany && (
+                    <motion.div
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: 'auto' }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.3 }}
+                      className="overflow-hidden"
+                    >
+                      <motion.div variants={fadeInUp} className="space-y-4">
                         <motion.div variants={fadeInUp}>
-                          <label className="block text-sm font-medium text-gray-300 mb-2">صورة الرخصة/السجل التجاري <span className="text-red-500">*</span></label>
+                          <label className="block text-sm font-medium text-gray-300 mb-2">صورة الرخصة/السجل التجاري <span className="text-gray-400">(اختياري)</span></label>
+                          <div className="mb-2 text-xs text-gray-400">رفع صورة رخصة المكتب يساعد في تسريع عملية التحقق، لكنه غير مطلوب لإتمام التسجيل.</div>
                           <div onClick={() => fileInputLicenseRef.current?.click()}
-                            className={`relative border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all ${idImagePreviews.license ? 'border-green-500 bg-green-500/10' : errors.license ? 'border-red-500 bg-red-500/10' : 'border-gray-700 hover:border-amber-500 hover:bg-white/5'}`}>
+                            className={`relative border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all ${idImagePreviews.license ? 'border-green-500 bg-green-500/10' : 'border-gray-700 hover:border-amber-500 hover:bg-white/5'}`}>
                             <input ref={fileInputLicenseRef} type="file" accept="image/*" onChange={(e) => handleImageUpload('license', e.target.files?.[0])} className="hidden" />
                             {idImagePreviews.license ? (
                               <div className="relative">
@@ -1208,11 +1223,10 @@ export default function OwnerRegisterPage() {
                               </div>
                             ) : (<><Camera className="w-12 h-12 text-gray-500 mx-auto mb-3" /><p className="text-gray-400">اضغط لرفع الصورة</p><p className="text-xs text-gray-500 mt-2">JPEG, PNG, JPG • حتى 5MB</p></>)}
                           </div>
-                          {errors.license && <p className="text-red-500 text-sm mt-1">{errors.license}</p>}
                         </motion.div>
                       </motion.div>
-                    )}
-                  </AnimatePresence>
+                    </motion.div>
+                  )}
 
                   <motion.div variants={fadeInUp} className="flex items-center gap-2">
                     <input type="checkbox" id="terms" checked={formData.agreeTerms}