feat: Use carmodooApi for PromoPreference to share data with Request Vehicle

- Changed from carsApi to carmodooApi for maker/model data
- Now shares same data source as vehicle-request page
- Added CarmodooMaker and CarmodooModel types

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/PromoPreference.tsx

@@ -2,10 +2,9 @@
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { carsApi, authApi } from '@/lib/api';
+import { carmodooApi, authApi, CarmodooMaker, CarmodooModel } from '@/lib/api';
 import { useAuthStore } from '@/lib/store';
 import { useTranslation, useLanguageStore, translateCarName } from '@/lib/i18n';
-import { CarMaker, CarModel } from '@/types';
 
 export default function PromoPreference() {
   const { t } = useTranslation();
@@ -13,10 +12,12 @@ export default function PromoPreference() {
   const { user, token } = useAuthStore();
   const isLoggedIn = !!token && !!user;
 
-  const [makers, setMakers] = useState<CarMaker[]>([]);
+  const [makers, setMakers] = useState<CarmodooMaker[]>([]);
-  const [models, setModels] = useState<CarModel[]>([]);
+  const [models, setModels] = useState<CarmodooModel[]>([]);
-  const [selectedMaker, setSelectedMaker] = useState<string>('');
+  const [selectedMakerCode, setSelectedMakerCode] = useState<string>('');
-  const [selectedModel, setSelectedModel] = useState<string>('');
+  const [selectedMakerName, setSelectedMakerName] = useState<string>('');
+  const [selectedModelCode, setSelectedModelCode] = useState<string>('');
+  const [selectedModelName, setSelectedModelName] = useState<string>('');
   const [emailEnabled, setEmailEnabled] = useState(false);
   const [loading, setLoading] = useState(false);
   const [saved, setSaved] = useState(false);
@@ -26,7 +27,7 @@ export default function PromoPreference() {
   useEffect(() => {
     const loadMakers = async () => {
       try {
-        const data = await carsApi.getMakers();
+        const data = await carmodooApi.getMakers();
         setMakers(data);
       } catch (error) {
         console.error('Failed to load makers:', error);
@@ -42,16 +43,19 @@ export default function PromoPreference() {
       try {
         const pref = await authApi.getPromoPreference();
         if (pref.promo_preferred_maker) {
-          setSelectedMaker(pref.promo_preferred_maker);
+          // Find maker by name and set code
-          // Load models for selected maker
           const maker = makers.find(m => m.name === pref.promo_preferred_maker);
           if (maker) {
-            const modelsData = await carsApi.getModels(maker.id);
+            setSelectedMakerCode(maker.code);
+            setSelectedMakerName(maker.name);
+            // Load models for selected maker
+            const modelsData = await carmodooApi.getModels(maker.code);
             setModels(modelsData);
           }
         }
         if (pref.promo_preferred_model) {
-          setSelectedModel(pref.promo_preferred_model);
+          setSelectedModelName(pref.promo_preferred_model);
+          // Find model code from loaded models or set it later
         }
         setEmailEnabled(pref.promo_email_enabled);
       } catch (error) {
@@ -64,38 +68,41 @@ export default function PromoPreference() {
   }, [isLoggedIn, makers]);
 
   // Load models when maker changes
-  const handleMakerChange = async (makerName: string) => {
+  const handleMakerChange = async (makerCode: string) => {
     if (!isLoggedIn) {
       setShowLoginPrompt(true);
       return;
     }
     setShowLoginPrompt(false);
-    setSelectedMaker(makerName);
+    setSelectedMakerCode(makerCode);
-    setSelectedModel('');
+    setSelectedModelCode('');
+    setSelectedModelName('');
     setSaved(false);
 
-    if (makerName) {
+    const maker = makers.find(m => m.code === makerCode);
-      const maker = makers.find(m => m.name === makerName);
+    setSelectedMakerName(maker?.name || '');
-      if (maker) {
+
-        try {
+    if (makerCode) {
-          const data = await carsApi.getModels(maker.id);
+      try {
-          setModels(data);
+        const data = await carmodooApi.getModels(makerCode);
-        } catch (error) {
+        setModels(data);
-          console.error('Failed to load models:', error);
+      } catch (error) {
-        }
+        console.error('Failed to load models:', error);
       }
     } else {
       setModels([]);
     }
   };
 
-  const handleModelChange = (modelName: string) => {
+  const handleModelChange = (modelCode: string) => {
     if (!isLoggedIn) {
       setShowLoginPrompt(true);
       return;
     }
     setShowLoginPrompt(false);
-    setSelectedModel(modelName);
+    setSelectedModelCode(modelCode);
+    const model = models.find(m => m.code === modelCode);
+    setSelectedModelName(model?.name || '');
     setSaved(false);
   };
 
@@ -117,8 +124,8 @@ export default function PromoPreference() {
     setLoading(true);
     try {
       await authApi.updatePromoPreference({
-        promo_preferred_maker: selectedMaker || undefined,
+        promo_preferred_maker: selectedMakerName || undefined,
-        promo_preferred_model: selectedModel || undefined,
+        promo_preferred_model: selectedModelName || undefined,
         promo_email_enabled: emailEnabled,
       });
       setSaved(true);
@@ -143,27 +150,27 @@ export default function PromoPreference() {
       <div className="space-y-3">
         <div className="flex flex-col sm:flex-row gap-2">
           <select
-            value={selectedMaker}
+            value={selectedMakerCode}
             onChange={(e) => handleMakerChange(e.target.value)}
             className="flex-1 px-3 py-2 rounded-lg text-sm text-gray-800 bg-white border-0 focus:ring-2 focus:ring-yellow-500"
           >
             <option value="">{t.selectMaker || 'Select Maker'}</option>
             {makers.map((maker) => (
-              <option key={maker.id} value={maker.name}>
+              <option key={maker.code} value={maker.code}>
                 {translateCarName(maker.name, language)}
               </option>
             ))}
           </select>
 
           <select
-            value={selectedModel}
+            value={selectedModelCode}
             onChange={(e) => handleModelChange(e.target.value)}
-            disabled={!selectedMaker}
+            disabled={!selectedMakerCode}
             className="flex-1 px-3 py-2 rounded-lg text-sm text-gray-800 bg-white border-0 focus:ring-2 focus:ring-yellow-500 disabled:bg-gray-100 disabled:text-gray-400"
           >
             <option value="">{t.selectModel || 'Select Model'}</option>
             {models.map((model) => (
-              <option key={model.id} value={model.name}>
+              <option key={model.code} value={model.code}>
                 {translateCarName(model.name, language)}
               </option>
             ))}
@@ -199,7 +206,7 @@ export default function PromoPreference() {
         )}
 
         {/* Save Button */}
-        {isLoggedIn && (selectedMaker || emailEnabled) && (
+        {isLoggedIn && (selectedMakerCode || emailEnabled) && (
           <button
             onClick={handleSave}
             disabled={loading}