From 64d422ddd8db077c4ef8c71ca0e0b4f180db8ff0 Mon Sep 17 00:00:00 2001
From: Rahaf <User@DESKTOP-JSF2AL8>
Date: Tue, 16 Jun 2026 15:18:29 +0300
Subject: [PATCH] Hide rent-type fields on buy/sell tabs and disable
 auto-search on tab click

- Property type and rent period fields now only display when 'Rent' tab is active
- Adjusted grid column spans to fill layout when fields are hidden
- Tab switching no longer triggers an automatic search; search runs only on button click
---
 app/components/home/HeroSearch.js | 98 ++++++++++++++++---------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/app/components/home/HeroSearch.js b/app/components/home/HeroSearch.js
index ff6d0c4..ffe10ea 100644
--- a/app/components/home/HeroSearch.js
+++ b/app/components/home/HeroSearch.js
@@ -67,9 +67,7 @@ export default function HeroSearch({ onSearch, isAuthenticated }) {
     setActiveTab(tab);
     if ((tab === 'rent' || tab === 'sell') && !isAuthenticated) {
       setShowLoginDialog(true);
-      return;
     }
-    handleSearch();
   };
 
   const handleSearch = () => {
@@ -139,30 +137,32 @@ export default function HeroSearch({ onSearch, isAuthenticated }) {
             ))}
           </select>
         </div>
-        <div>
-          <label className="block text-sm font-medium text-white mb-2">
-            <div className="flex items-center gap-1">
-              <Home className="w-4 h-4" />
-              {t("rentTypeLabel")}
-            </div>
-          </label>
-          <select
-            value={filters.propertyType}
-            onChange={(e) => setFilters({...filters, propertyType: e.target.value})}
-            className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
-            style={{
-              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
-              backgroundRepeat: 'no-repeat',
-              backgroundPosition: 'left 1rem center',
-              backgroundSize: '1rem',
-              paddingLeft: '2.5rem'
-            }}
-          >
-            {propertyTypes.map(type => (
-              <option key={type.id} value={type.id}>{type.label}</option>
-            ))}
-          </select>
-        </div>
+        {activeTab === 'rent' && (
+          <div>
+            <label className="block text-sm font-medium text-white mb-2">
+              <div className="flex items-center gap-1">
+                <Home className="w-4 h-4" />
+                {t("rentTypeLabel")}
+              </div>
+            </label>
+            <select
+              value={filters.propertyType}
+              onChange={(e) => setFilters({...filters, propertyType: e.target.value})}
+              className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
+              style={{
+                backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'left 1rem center',
+                backgroundSize: '1rem',
+                paddingLeft: '2.5rem'
+              }}
+            >
+              {propertyTypes.map(type => (
+                <option key={type.id} value={type.id}>{type.label}</option>
+              ))}
+            </select>
+          </div>
+        )}
         <div>
           <label className="block text-sm font-medium text-white mb-2">
             <div className="flex items-center gap-1">
@@ -234,29 +234,31 @@ export default function HeroSearch({ onSearch, isAuthenticated }) {
           </select>
         </div>
 
-        <div>
-          <label className="block text-sm font-medium text-white mb-2">نوع الإيجار</label>
-          <select
-            value={filters.rentPeriod}
-            onChange={(e) => setFilters({ ...filters, rentPeriod: e.target.value })}
-            className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
-            style={{
-              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
-              backgroundRepeat: 'no-repeat',
-              backgroundPosition: 'left 1rem center',
-              backgroundSize: '1rem',
-              paddingLeft: '2.5rem'
-            }}
-          >
-            {rentPeriods.map((period) => (
-              <option key={period.id} value={period.id}>
-                {period.label}
-              </option>
-            ))}
-          </select>
-        </div>
+        {activeTab === 'rent' && (
+          <div>
+            <label className="block text-sm font-medium text-white mb-2">نوع الإيجار</label>
+            <select
+              value={filters.rentPeriod}
+              onChange={(e) => setFilters({ ...filters, rentPeriod: e.target.value })}
+              className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
+              style={{
+                backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'left 1rem center',
+                backgroundSize: '1rem',
+                paddingLeft: '2.5rem'
+              }}
+            >
+              {rentPeriods.map((period) => (
+                <option key={period.id} value={period.id}>
+                  {period.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
 
-        <div className="md:col-span-2 flex flex-col justify-between p-4 rounded-2xl border border-dashed border-white/30 bg-white/5">
+        <div className={`${activeTab === 'rent' ? 'md:col-span-2' : 'md:col-span-3'} flex flex-col justify-between p-4 rounded-2xl border border-dashed border-white/30 bg-white/5`}>
           <label className="mt-4 flex items-center gap-3 text-white text-sm">
             <input
               type="checkbox"