fix first online resevation

2026-05-09 20:01:51 -04:00
parent c4a45c8b21
commit 09b0e3b55f
75 changed files with 6394 additions and 2190 deletions
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { marketplaceFetchOrDefault } from '@/lib/api'
 import { getMarketplaceLanguage } from '@/lib/i18n.server'
-import { formatCurrency } from '@rentaldrivego/types'
+import ExploreVehicleGrid from './ExploreVehicleGrid'

 interface Vehicle {
  id: string
@@ -55,10 +55,12 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
    en: {
      kicker: 'Discovery only',
      title: 'Find your next rental from trusted local companies.',
-      body: 'Every listing links you to the company’s own booking and payment flow.',
+      body: 'Browse, filter, and reserve — the company confirms and contacts you directly.',
      city: 'City or location',
      allCategories: 'All categories',
      anyTransmission: 'Any transmission',
+      makePlaceholder: 'Make (e.g. Toyota)',
+      modelPlaceholder: 'Model (e.g. Corolla)',
      search: 'Search',
      currentDeals: 'Current deals',
      featuredOffers: 'Featured marketplace offers',
@@ -71,7 +73,7 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
      checkAvailability: 'Check availability',
      available: 'Available',
      from: 'From',
-      bookNow: 'Book now',
+      bookNow: 'Reserve',
      details: 'Details',
      vehicleUnavailable: 'Vehicle listings are unavailable right now.',
      browseByCategory: 'Browse by category',
@@ -83,19 +85,38 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
      publishedVehicles: 'published vehicles',
      viewFleet: 'View fleet',
      categories: ['Economy', 'Compact', 'SUV', 'Luxury', 'Van', 'Truck', 'Electric'],
+      // modal
+      reserveVehicle: 'Reserve this vehicle',
+      pickupDate: 'Pick-up date',
+      returnDate: 'Return date',
+      firstName: 'First name',
+      lastName: 'Last name',
+      email: 'Email address',
+      phone: 'Phone number (optional)',
+      notes: 'Additional notes (optional)',
+      cancel: 'Cancel',
+      submitRequest: 'Send reservation request',
+      submitting: 'Sending…',
+      successTitle: 'Request sent!',
+      successBody: 'Your reservation request has been received. Check your inbox for a confirmation email — the company will contact you shortly.',
+      close: 'Close',
+      errorUnavailable: 'This vehicle is no longer available for the selected dates. Please choose different dates.',
+      errorGeneric: 'Something went wrong. Please try again.',
    },
    fr: {
      kicker: 'Découverte uniquement',
-      title: 'Trouvez votre prochaine location auprès d’entreprises locales fiables.',
-      body: 'Chaque annonce vous redirige vers le parcours de réservation et de paiement propre à l’entreprise.',
+      title: "Trouvez votre prochaine location auprès d'entreprises locales fiables.",
+      body: "Parcourez, filtrez et réservez — l'entreprise confirme et vous contacte directement.",
      city: 'Ville ou emplacement',
      allCategories: 'Toutes les catégories',
      anyTransmission: 'Toute transmission',
+      makePlaceholder: 'Marque (ex. Toyota)',
+      modelPlaceholder: 'Modèle (ex. Corolla)',
      search: 'Rechercher',
      currentDeals: 'Offres du moment',
      featuredOffers: 'Offres marketplace mises en avant',
      company: 'Entreprise',
-      validUntil: 'Valable jusqu’au',
+      validUntil: "Valable jusqu'au",
      offersUnavailable: 'Les offres marketplace sont indisponibles pour le moment.',
      availableVehicles: 'Véhicules disponibles',
      listings: 'annonces',
@@ -115,14 +136,32 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
      publishedVehicles: 'véhicules publiés',
      viewFleet: 'Voir la flotte',
      categories: ['Économie', 'Compacte', 'SUV', 'Luxe', 'Van', 'Camion', 'Électrique'],
+      reserveVehicle: 'Réserver ce véhicule',
+      pickupDate: 'Date de prise en charge',
+      returnDate: 'Date de retour',
+      firstName: 'Prénom',
+      lastName: 'Nom',
+      email: 'Adresse e-mail',
+      phone: 'Numéro de téléphone (optionnel)',
+      notes: 'Notes supplémentaires (optionnel)',
+      cancel: 'Annuler',
+      submitRequest: 'Envoyer la demande',
+      submitting: 'Envoi…',
+      successTitle: 'Demande envoyée !',
+      successBody: "Votre demande de réservation a été reçue. Vérifiez votre boîte mail — l'entreprise vous contactera prochainement.",
+      close: 'Fermer',
+      errorUnavailable: "Ce véhicule n'est plus disponible pour les dates sélectionnées.",
+      errorGeneric: 'Une erreur est survenue. Veuillez réessayer.',
    },
    ar: {
      kicker: 'للاستكشاف فقط',
      title: 'اعثر على سيارتك القادمة من شركات محلية موثوقة.',
-      body: 'كل إعلان يوجّهك إلى مسار الحجز والدفع الخاص بالشركة نفسها.',
+      body: 'تصفّح وابحث واحجز — تؤكد الشركة وتتواصل معك مباشرةً.',
      city: 'المدينة أو الموقع',
      allCategories: 'كل الفئات',
      anyTransmission: 'أي ناقل حركة',
+      makePlaceholder: 'الماركة (مثل Toyota)',
+      modelPlaceholder: 'الموديل (مثل Corolla)',
      search: 'بحث',
      currentDeals: 'العروض الحالية',
      featuredOffers: 'عروض السوق المميزة',
@@ -135,7 +174,7 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
      checkAvailability: 'تحقق من التوفر',
      available: 'متاح',
      from: 'ابتداءً من',
-      bookNow: 'احجز الآن',
+      bookNow: 'احجز',
      details: 'التفاصيل',
      vehicleUnavailable: 'قوائم السيارات غير متاحة حالياً.',
      browseByCategory: 'تصفح حسب الفئة',
@@ -147,15 +186,37 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
      publishedVehicles: 'سيارات منشورة',
      viewFleet: 'عرض الأسطول',
      categories: ['اقتصادية', 'مدمجة', 'SUV', 'فاخرة', 'فان', 'شاحنة', 'كهربائية'],
+      reserveVehicle: 'احجز هذه السيارة',
+      pickupDate: 'تاريخ الاستلام',
+      returnDate: 'تاريخ الإرجاع',
+      firstName: 'الاسم الأول',
+      lastName: 'اسم العائلة',
+      email: 'البريد الإلكتروني',
+      phone: 'رقم الهاتف (اختياري)',
+      notes: 'ملاحظات إضافية (اختياري)',
+      cancel: 'إلغاء',
+      submitRequest: 'إرسال طلب الحجز',
+      submitting: 'جارٍ الإرسال…',
+      successTitle: 'تم إرسال الطلب!',
+      successBody: 'تم استلام طلب الحجز. تحقق من بريدك الإلكتروني — ستتواصل معك الشركة قريباً.',
+      close: 'إغلاق',
+      errorUnavailable: 'السيارة غير متاحة في التواريخ المحددة. يرجى اختيار تواريخ أخرى.',
+      errorGeneric: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
    },
  }[language]
+
  const city = typeof searchParams?.city === 'string' ? searchParams.city : ''
  const category = typeof searchParams?.category === 'string' ? searchParams.category : ''
  const transmission = typeof searchParams?.transmission === 'string' ? searchParams.transmission : ''
+  const make = typeof searchParams?.make === 'string' ? searchParams.make : ''
+  const model = typeof searchParams?.model === 'string' ? searchParams.model : ''
+
  const query = new URLSearchParams()
  if (city) query.set('city', city)
  if (category) query.set('category', category)
  if (transmission) query.set('transmission', transmission)
+  if (make) query.set('make', make)
+  if (model) query.set('model', model)
  query.set('pageSize', '24')

  const [offers, vehicles, companies] = await Promise.all([
@@ -171,11 +232,15 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
          <p className="text-sm uppercase tracking-[0.2em] text-amber-300">{dict.kicker}</p>
          <h1 className="mt-4 text-4xl font-black tracking-tight">{dict.title}</h1>
          <p className="mt-4 max-w-2xl text-stone-300">{dict.body}</p>
-          <form className="mt-8 grid gap-3 rounded-[1.5rem] bg-white/10 p-4 md:grid-cols-4">
+          <form className="mt-8 grid gap-3 rounded-[1.5rem] bg-white/10 p-4 md:grid-cols-3 xl:grid-cols-6">
            <input name="city" defaultValue={city} placeholder={dict.city} className="rounded-2xl border border-white/10 bg-white/90 px-4 py-3 text-sm text-stone-900" />
+            <input name="make" defaultValue={make} placeholder={dict.makePlaceholder} className="rounded-2xl border border-white/10 bg-white/90 px-4 py-3 text-sm text-stone-900" />
+            <input name="model" defaultValue={model} placeholder={dict.modelPlaceholder} className="rounded-2xl border border-white/10 bg-white/90 px-4 py-3 text-sm text-stone-900" />
            <select name="category" defaultValue={category} className="rounded-2xl border border-white/10 bg-white/90 px-4 py-3 text-sm text-stone-900">
              <option value="">{dict.allCategories}</option>
-              {['ECONOMY', 'COMPACT', 'SUV', 'LUXURY', 'VAN', 'TRUCK'].map((option) => <option key={option} value={option}>{option}</option>)}
+              {['ECONOMY', 'COMPACT', 'MIDSIZE', 'FULLSIZE', 'SUV', 'LUXURY', 'VAN', 'TRUCK'].map((option) => (
+                <option key={option} value={option}>{option}</option>
+              ))}
            </select>
            <select name="transmission" defaultValue={transmission} className="rounded-2xl border border-white/10 bg-white/90 px-4 py-3 text-sm text-stone-900">
              <option value="">{dict.anyTransmission}</option>
@@ -203,54 +268,7 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
          </div>
        </section>

-        <section>
-          <div className="flex items-center justify-between">
-            <h2 className="text-2xl font-bold text-stone-900">{dict.availableVehicles}</h2>
-            <p className="text-sm text-stone-500">{vehicles.length} {dict.listings}</p>
-          </div>
-          <div className="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-            {vehicles.map((vehicle) => (
-              <article key={vehicle.id} className="card overflow-hidden">
-                <div className="aspect-[16/10] bg-stone-100">
-                  {vehicle.photos[0] ? (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img src={vehicle.photos[0]} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
-                  ) : null}
-                </div>
-                <div className="p-5">
-                  <div className="flex items-start justify-between gap-4">
-                    <div>
-                      <p className="text-xs uppercase tracking-[0.16em] text-stone-500">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</p>
-                      <h3 className="mt-2 text-xl font-bold text-stone-900">{vehicle.make} {vehicle.model}</h3>
-                      <p className="mt-1 text-sm text-stone-500">{vehicle.year} · {vehicle.category}</p>
-                    </div>
-                    <span className={`rounded-full px-3 py-1 text-xs font-semibold ${vehicle.availability === false ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700'}`}>
-                      {vehicle.availability === false ? dict.checkAvailability : dict.available}
-                    </span>
-                  </div>
-                  <div className="mt-5 flex items-end justify-between">
-                    <div>
-                      <p className="text-sm text-stone-500">{dict.from}</p>
-                      <p className="text-2xl font-black text-stone-900">{formatCurrency(vehicle.dailyRate, 'MAD')}</p>
-                    </div>
-                    <div className="flex flex-wrap gap-2">
-                      <a
-                        href={`https://${vehicle.company.brand?.subdomain ?? vehicle.company.slug}.RentalDriveGo.com/book?vehicleId=${vehicle.id}&ref=marketplace`}
-                        className="rounded-full bg-stone-900 px-5 py-2.5 text-sm font-semibold text-white"
-                      >
-                        {dict.bookNow}
-                      </a>
-                      <Link href={`/explore/${vehicle.company.slug}/vehicles/${vehicle.id}`} className="rounded-full border border-stone-300 px-5 py-2.5 text-sm font-semibold text-stone-700">
-                        {dict.details}
-                      </Link>
-                    </div>
-                  </div>
-                </div>
-              </article>
-            ))}
-            {vehicles.length === 0 && <div className="card p-6 text-sm text-stone-500 md:col-span-2 xl:col-span-3">{dict.vehicleUnavailable}</div>}
-          </div>
-        </section>
+        <ExploreVehicleGrid vehicles={vehicles} dict={dict} />

        <section>
          <h2 className="text-2xl font-bold text-stone-900">{dict.browseByCategory}</h2>