dashboard fix

2026-05-19 21:25:38 -04:00
parent 7ac0098c7f
commit d4f7de5762
27 changed files with 705 additions and 336 deletions
@@ -0,0 +1,246 @@
+'use client'
+
+import { useState } from 'react'
+import { marketplacePost } from '@/lib/api'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+
+type Props = {
+  vehicleId: string
+  companySlug: string
+  dailyRate: number
+}
+
+const copy = {
+  en: {
+    title: 'Reserve this vehicle',
+    firstName: 'First name',
+    lastName: 'Last name',
+    email: 'Email',
+    phone: 'Phone',
+    startDate: 'Pick-up date',
+    endDate: 'Return date',
+    notes: 'Notes (optional)',
+    submit: 'Request reservation',
+    submitting: 'Sending…',
+    successTitle: 'Request received!',
+    successBody: 'Your reservation request has been sent. The company will review it and get in touch with you shortly.',
+    invalidDates: 'Return date must be after pick-up date.',
+    required: 'Please fill in all required fields.',
+    perDay: '/ day',
+    estimatedTotal: 'Estimated total',
+    days: 'day(s)',
+  },
+  fr: {
+    title: 'Réserver ce véhicule',
+    firstName: 'Prénom',
+    lastName: 'Nom',
+    email: 'Email',
+    phone: 'Téléphone',
+    startDate: 'Date de départ',
+    endDate: 'Date de retour',
+    notes: 'Notes (optionnelles)',
+    submit: 'Demander une réservation',
+    submitting: 'Envoi…',
+    successTitle: 'Demande reçue !',
+    successBody: 'Votre demande de réservation a été envoyée. La société va l'examiner et vous contactera prochainement.',
+    invalidDates: 'La date de retour doit être après la date de départ.',
+    required: 'Veuillez remplir tous les champs obligatoires.',
+    perDay: '/ jour',
+    estimatedTotal: 'Total estimé',
+    days: 'jour(s)',
+  },
+  ar: {
+    title: 'احجز هذه السيارة',
+    firstName: 'الاسم الأول',
+    lastName: 'اسم العائلة',
+    email: 'البريد الإلكتروني',
+    phone: 'الهاتف',
+    startDate: 'تاريخ الاستلام',
+    endDate: 'تاريخ الإعادة',
+    notes: 'ملاحظات (اختيارية)',
+    submit: 'طلب حجز',
+    submitting: 'جارٍ الإرسال…',
+    successTitle: 'تم استلام الطلب!',
+    successBody: 'تم إرسال طلب الحجز. ستراجعه الشركة وستتواصل معك قريباً.',
+    invalidDates: 'يجب أن يكون تاريخ الإعادة بعد تاريخ الاستلام.',
+    required: 'يرجى تعبئة جميع الحقول المطلوبة.',
+    perDay: '/ يوم',
+    estimatedTotal: 'الإجمالي التقديري',
+    days: 'يوم',
+  },
+} as const
+
+export default function BookingForm({ vehicleId, companySlug, dailyRate }: Props) {
+  const { language } = useMarketplacePreferences()
+  const t = copy[language]
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [email, setEmail] = useState('')
+  const [phone, setPhone] = useState('')
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
+  const [notes, setNotes] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+
+  const totalDays =
+    startDate && endDate
+      ? Math.max(0, Math.ceil((new Date(endDate).getTime() - new Date(startDate).getTime()) / 86_400_000))
+      : 0
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+
+    if (!firstName.trim() || !lastName.trim() || !email.trim() || !phone.trim() || !startDate || !endDate) {
+      setError(t.required)
+      return
+    }
+
+    const start = new Date(startDate)
+    const end = new Date(endDate)
+    if (end <= start) {
+      setError(t.invalidDates)
+      return
+    }
+
+    setSubmitting(true)
+    try {
+      await marketplacePost('/marketplace/reservations', {
+        vehicleId,
+        companySlug,
+        firstName: firstName.trim(),
+        lastName: lastName.trim(),
+        email: email.trim(),
+        phone: phone.trim(),
+        startDate: start.toISOString(),
+        endDate: end.toISOString(),
+        notes: notes.trim() || undefined,
+      })
+      setSuccess(true)
+    } catch (err: any) {
+      setError(err.message ?? 'Something went wrong. Please try again.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="rounded-2xl border border-green-200 bg-green-50 p-6 dark:border-green-800 dark:bg-green-950/40">
+        <p className="text-base font-semibold text-green-800 dark:text-green-300">{t.successTitle}</p>
+        <p className="mt-2 text-sm text-green-700 dark:text-green-400">{t.successBody}</p>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <p className="text-sm font-semibold text-stone-900 dark:text-stone-100">{t.title}</p>
+
+      {error ? (
+        <p className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400">
+          {error}
+        </p>
+      ) : null}
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.firstName} <span className="text-red-500">*</span></label>
+          <input
+            required
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100 dark:focus:border-stone-500"
+          />
+        </div>
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.lastName} <span className="text-red-500">*</span></label>
+          <input
+            required
+            value={lastName}
+            onChange={(e) => setLastName(e.target.value)}
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100 dark:focus:border-stone-500"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.email} <span className="text-red-500">*</span></label>
+        <input
+          required
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100 dark:focus:border-stone-500"
+        />
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.phone} <span className="text-red-500">*</span></label>
+        <input
+          required
+          type="tel"
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100 dark:focus:border-stone-500"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.startDate} <span className="text-red-500">*</span></label>
+          <input
+            required
+            type="date"
+            value={startDate}
+            min={new Date().toISOString().slice(0, 10)}
+            onChange={(e) => setStartDate(e.target.value)}
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100 dark:focus:border-stone-500"
+          />
+        </div>
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.endDate} <span className="text-red-500">*</span></label>
+          <input
+            required
+            type="date"
+            value={endDate}
+            min={startDate || new Date().toISOString().slice(0, 10)}
+            onChange={(e) => setEndDate(e.target.value)}
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100 dark:focus:border-stone-500"
+          />
+        </div>
+      </div>
+
+      {totalDays > 0 ? (
+        <p className="text-sm text-stone-600 dark:text-stone-400">
+          {t.estimatedTotal}:{' '}
+          <strong className="text-stone-900 dark:text-stone-100">
+            {(dailyRate * totalDays).toLocaleString()} MAD
+          </strong>{' '}
+          ({totalDays} {t.days})
+        </p>
+      ) : null}
+
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.notes}</label>
+        <textarea
+          value={notes}
+          onChange={(e) => setNotes(e.target.value)}
+          rows={3}
+          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100 dark:focus:border-stone-500"
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={submitting}
+        className="w-full rounded-full bg-stone-900 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-stone-700 disabled:opacity-60 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
+      >
+        {submitting ? t.submitting : t.submit}
+      </button>
+    </form>
+  )
+}
@@ -189,6 +189,16 @@ function SegmentedControl<T extends string>({
  )
 }

+function detectBrowserLanguage(): string | null {
+  if (typeof navigator === 'undefined') return null
+  const langs = Array.from(navigator.languages ?? [navigator.language])
+  for (const lang of langs) {
+    const code = lang.split('-')[0].toLowerCase()
+    if (code === 'fr' || code === 'ar' || code === 'en') return code
+  }
+  return null
+}
+
 export function useMarketplacePreferences() {
  const context = useContext(PreferencesContext)
  if (!context) throw new Error('useMarketplacePreferences must be used within MarketplaceShell')
@@ -262,6 +272,9 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo

    if (isMarketplaceLanguage(storedLanguage)) {
      setLanguage(storedLanguage)
+    } else {
+      const detected = detectBrowserLanguage()
+      if (isMarketplaceLanguage(detected)) setLanguage(detected)
    }

    if (storedTheme === 'light' || storedTheme === 'medium' || storedTheme === 'dark') {