feat: Show user's recommended vehicles in Cost Calculator dropdown
- Fetch vehicles from user's MyRequest - Show dropdown with vehicle names and prices - Auto-select first vehicle if available - Show 'Example: 20,000,000 KRW' if no vehicles
This commit is contained in:
AutonetSellCar Deploy
@@ -1,12 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation, formatPriceWithCurrency } from '@/lib/i18n';
|
||||
import { useTranslation, formatPriceWithCurrency, translateCarName } from '@/lib/i18n';
|
||||
import { useExchangeRateStore } from '@/lib/exchangeRateStore';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import SidebarLayout from '@/components/SidebarLayout';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { vehicleRequestsApi } from '@/lib/api';
|
||||
|
||||
// Cost constants
|
||||
const KOREAN_FEE_PERCENT = 5; // 5% of vehicle price
|
||||
@@ -37,6 +38,14 @@ interface Settings {
|
||||
domestic_export_customs_krw: number;
|
||||
}
|
||||
|
||||
interface MyVehicle {
|
||||
id: number;
|
||||
car_name: string;
|
||||
price_krw: number;
|
||||
year?: number;
|
||||
mileage?: number;
|
||||
}
|
||||
|
||||
export default function CostPage() {
|
||||
const { t, language } = useTranslation();
|
||||
const { user, isLoading } = useAuthStore();
|
||||
@@ -94,6 +103,11 @@ export default function CostPage() {
|
||||
domestic_export_customs_krw: 1150000,
|
||||
});
|
||||
|
||||
// My vehicles from requests
|
||||
const [myVehicles, setMyVehicles] = useState<MyVehicle[]>([]);
|
||||
const [selectedVehicleId, setSelectedVehicleId] = useState<string>('example');
|
||||
const [vehiclesLoading, setVehiclesLoading] = useState(true);
|
||||
|
||||
// Calculator state
|
||||
const [vehiclePrice, setVehiclePrice] = useState<string>('2000');
|
||||
const [carType, setCarType] = useState<'small' | 'compact'>('small');
|
||||
@@ -133,6 +147,63 @@ export default function CostPage() {
|
||||
fetchSettings();
|
||||
}, []);
|
||||
|
||||
// Fetch user's vehicles from requests
|
||||
useEffect(() => {
|
||||
const fetchMyVehicles = async () => {
|
||||
if (!user) {
|
||||
setVehiclesLoading(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const data = await vehicleRequestsApi.getMyVehicles();
|
||||
const vehicles: MyVehicle[] = [];
|
||||
|
||||
// Extract vehicles from vehicle requests
|
||||
data.vehicle_requests.forEach(request => {
|
||||
request.approved_vehicles.forEach(vehicle => {
|
||||
const carData = vehicle.car_data;
|
||||
if (carData) {
|
||||
vehicles.push({
|
||||
id: vehicle.id,
|
||||
car_name: carData.car_name || 'Unknown',
|
||||
price_krw: carData.final_price || 0,
|
||||
year: carData.year,
|
||||
mileage: carData.mileage,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Also add direct purchases
|
||||
data.direct_purchases.forEach(purchase => {
|
||||
const carData = purchase.car_data;
|
||||
if (carData) {
|
||||
vehicles.push({
|
||||
id: purchase.id + 10000, // Offset to avoid id collision
|
||||
car_name: carData.car_name || 'Unknown',
|
||||
price_krw: carData.final_price || 0,
|
||||
year: carData.year,
|
||||
mileage: carData.mileage,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
setMyVehicles(vehicles);
|
||||
|
||||
// Auto-select first vehicle if available
|
||||
if (vehicles.length > 0) {
|
||||
setSelectedVehicleId(vehicles[0].id.toString());
|
||||
setVehiclePrice(Math.round(vehicles[0].price_krw / 10000).toString());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch my vehicles:', error);
|
||||
} finally {
|
||||
setVehiclesLoading(false);
|
||||
}
|
||||
};
|
||||
fetchMyVehicles();
|
||||
}, [user]);
|
||||
|
||||
// Calculate cost for a single slot based on current matched slots
|
||||
const calculateSlotCosts = (slots: ContainerSlot[]): ContainerSlot[] => {
|
||||
const filledSlots = slots.filter(s => s.status !== 'empty');
|
||||
@@ -582,24 +653,89 @@ export default function CostPage() {
|
||||
|
||||
{/* Input Fields */}
|
||||
<div className="space-y-6">
|
||||
{/* Vehicle Price */}
|
||||
{/* Vehicle Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{t.vehiclePrice} ({language === 'ko' ? '만원' : '10,000 KRW'})
|
||||
{t.vehiclePrice}
|
||||
</label>
|
||||
{vehiclesLoading ? (
|
||||
<div className="w-full border border-gray-300 rounded-lg px-4 py-3 bg-gray-50">
|
||||
<span className="text-gray-500">
|
||||
{language === 'ko' ? '차량 목록 불러오는 중...' : 'Loading vehicles...'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<select
|
||||
value={selectedVehicleId}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSelectedVehicleId(value);
|
||||
if (value === 'example') {
|
||||
setVehiclePrice('2000');
|
||||
} else {
|
||||
const vehicle = myVehicles.find(v => v.id.toString() === value);
|
||||
if (vehicle) {
|
||||
setVehiclePrice(Math.round(vehicle.price_krw / 10000).toString());
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-3 text-lg focus:ring-primary-500 focus:border-primary-500 bg-white"
|
||||
>
|
||||
{myVehicles.length === 0 && (
|
||||
<option value="example">
|
||||
{language === 'ko' ? '예시: ₩20,000,000' :
|
||||
language === 'mn' ? 'Жишээ: ₩20,000,000' :
|
||||
language === 'ru' ? 'Пример: ₩20,000,000' :
|
||||
'Example: ₩20,000,000'}
|
||||
</option>
|
||||
)}
|
||||
{myVehicles.map((vehicle) => (
|
||||
<option key={vehicle.id} value={vehicle.id.toString()}>
|
||||
{translateCarName(vehicle.car_name, language)}
|
||||
{vehicle.year ? ` (${vehicle.year})` : ''}
|
||||
- ₩{vehicle.price_krw.toLocaleString()}
|
||||
</option>
|
||||
))}
|
||||
{myVehicles.length > 0 && (
|
||||
<option value="example">
|
||||
{language === 'ko' ? '직접 입력 (예시)' :
|
||||
language === 'mn' ? 'Гараар оруулах (жишээ)' :
|
||||
language === 'ru' ? 'Ввести вручную (пример)' :
|
||||
'Manual input (example)'}
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{myVehicles.length === 0 && (
|
||||
<p className="mt-2 text-sm text-amber-600">
|
||||
{language === 'ko' ? '💡 추천받은 차량이 없습니다. 예시 가격으로 계산합니다.' :
|
||||
language === 'mn' ? '💡 Санал болгосон машин байхгүй. Жишээ үнээр тооцоолно.' :
|
||||
language === 'ru' ? '💡 Нет рекомендованных автомобилей. Расчет по примерной цене.' :
|
||||
'💡 No recommended vehicles. Using example price for calculation.'}
|
||||
</p>
|
||||
)}
|
||||
{selectedVehicleId === 'example' && myVehicles.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<label className="block text-sm text-gray-600 mb-1">
|
||||
{language === 'ko' ? '차량 가격 (만원)' : 'Vehicle Price (10,000 KRW)'}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
value={vehiclePrice}
|
||||
onChange={(e) => setVehiclePrice(e.target.value)}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-3 text-lg focus:ring-primary-500 focus:border-primary-500"
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
placeholder="2000"
|
||||
/>
|
||||
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">
|
||||
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 text-sm">
|
||||
{language === 'ko' ? '만원' : 'x 10,000 KRW'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
= {formatLocalCurrency(parseInt(vehiclePrice || '0') * 10000)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user