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>
This commit is contained in:
AutonetSellCar Deploy
@@ -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 [models, setModels] = useState<CarModel[]>([]);
|
||||
const [selectedMaker, setSelectedMaker] = useState<string>('');
|
||||
const [selectedModel, setSelectedModel] = useState<string>('');
|
||||
const [makers, setMakers] = useState<CarmodooMaker[]>([]);
|
||||
const [models, setModels] = useState<CarmodooModel[]>([]);
|
||||
const [selectedMakerCode, setSelectedMakerCode] = 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);
|
||||
// Load models for selected maker
|
||||
// Find maker by name and set code
|
||||
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);
|
||||
setSelectedModel('');
|
||||
setSelectedMakerCode(makerCode);
|
||||
setSelectedModelCode('');
|
||||
setSelectedModelName('');
|
||||
setSaved(false);
|
||||
|
||||
if (makerName) {
|
||||
const maker = makers.find(m => m.name === makerName);
|
||||
if (maker) {
|
||||
try {
|
||||
const data = await carsApi.getModels(maker.id);
|
||||
setModels(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load models:', error);
|
||||
}
|
||||
const maker = makers.find(m => m.code === makerCode);
|
||||
setSelectedMakerName(maker?.name || '');
|
||||
|
||||
if (makerCode) {
|
||||
try {
|
||||
const data = await carmodooApi.getModels(makerCode);
|
||||
setModels(data);
|
||||
} 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_model: selectedModel || undefined,
|
||||
promo_preferred_maker: selectedMakerName || 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}
|
||||
|
||||
Reference in New Issue
Block a user