connected api with profile, order
This commit is contained in:
Jelaletdin12
@@ -1,53 +1,79 @@
|
||||
"use client"
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import CartItemCard from "./ui/CartItemCard"
|
||||
import OrderSummary from "./ui/OrderSummary"
|
||||
import { useCart, useCreateOrder, useRegions, useAddresses, usePaymentTypes } from "@/lib/hooks"
|
||||
import { useTranslations } from "next-intl"
|
||||
import { useRouter } from "next/navigation"
|
||||
import type { DeliveryType, PaymentTypeOption } from "./ui/types"
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import CartItemCard from "../../../features/cart/components/CartItemCard";
|
||||
import OrderSummary from "../../../features/cart/components/OrderSummary";
|
||||
import {
|
||||
useCart,
|
||||
useCreateOrder,
|
||||
useRegions,
|
||||
usePaymentTypes,
|
||||
} from "@/lib/hooks";
|
||||
import { userStore } from "@/features/profile/userStore";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { DeliveryType, PaymentType } from "../../../features/cart/types";
|
||||
|
||||
export default function CartPage() {
|
||||
const [isClient, setIsClient] = useState(false)
|
||||
const [paymentType, setPaymentType] = useState<PaymentTypeOption | null>(null)
|
||||
const [deliveryType, setDeliveryType] = useState<DeliveryType>("SELECTED_DELIVERY")
|
||||
const [selectedRegion, setSelectedRegion] = useState<string | null>(null)
|
||||
const [selectedAddress, setSelectedAddress] = useState<string>("")
|
||||
const [note, setNote] = useState<string>("")
|
||||
const router = useRouter()
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
const [paymentType, setPaymentType] = useState<PaymentType | null>(null);
|
||||
const [deliveryType, setDeliveryType] = useState<DeliveryType>("SELECTED_DELIVERY");
|
||||
const [selectedRegion, setSelectedRegion] = useState<string>("");
|
||||
const [selectedProvince, setSelectedProvince] = useState<number | null>(null);
|
||||
const [note, setNote] = useState<string>("");
|
||||
const router = useRouter();
|
||||
|
||||
const t = useTranslations()
|
||||
const t = useTranslations();
|
||||
|
||||
// useCart dönen data yapısı: { message: "success", data: [...] }
|
||||
const { data: cartResponse, isLoading, isError } = useCart()
|
||||
const { data: regions = [] } = useRegions()
|
||||
const { data: addresses = [] } = useAddresses()
|
||||
const { data: paymentTypes = [] } = usePaymentTypes()
|
||||
const { mutate: createOrder, isPending: isCreatingOrder } = useCreateOrder()
|
||||
const { data: cartResponse, isLoading, isError } = useCart();
|
||||
const { data: provinces = [] } = useRegions();
|
||||
const { data: paymentTypes = [] } = usePaymentTypes();
|
||||
const { mutate: createOrder, isPending: isCreatingOrder } = useCreateOrder();
|
||||
|
||||
// Cart items'ı doğru şekilde al
|
||||
const cartItems = cartResponse?.data || []
|
||||
const cartItems = cartResponse?.data || [];
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true)
|
||||
}, [])
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
const regionGroups = provinces.reduce((acc, province) => {
|
||||
if (!acc[province.region]) {
|
||||
acc[province.region] = [];
|
||||
}
|
||||
acc[province.region].push(province);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof provinces>);
|
||||
|
||||
const availableRegions = Object.keys(regionGroups);
|
||||
|
||||
const handleDeliveryTypeChange = (type: DeliveryType) => {
|
||||
setDeliveryType(type)
|
||||
setSelectedAddress("")
|
||||
}
|
||||
setDeliveryType(type);
|
||||
setSelectedProvince(null);
|
||||
};
|
||||
|
||||
const handleCompleteOrder = () => {
|
||||
if (!selectedRegion || !selectedAddress || !paymentType) {
|
||||
console.warn("Missing required fields for order")
|
||||
return
|
||||
if (!selectedRegion || !selectedProvince || !paymentType) {
|
||||
console.warn("Missing required fields for order");
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedProvinceData = provinces.find((p) => p.id === selectedProvince);
|
||||
if (!selectedProvinceData) return;
|
||||
|
||||
// Kullanıcı bilgilerini store'dan al
|
||||
const orderData = userStore.getOrderData();
|
||||
if (!orderData) {
|
||||
console.error("User data not found");
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
createOrder(
|
||||
{
|
||||
customer_address: selectedAddress,
|
||||
customer_name: orderData.customer_name,
|
||||
customer_phone: orderData.customer_phone,
|
||||
customer_address: selectedProvinceData.name,
|
||||
shipping_method: deliveryType === "PICK_UP" ? "pickup" : "standart",
|
||||
payment_type_id: paymentType.id,
|
||||
region: selectedRegion,
|
||||
@@ -55,30 +81,30 @@ export default function CartPage() {
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
router.push(`/orders`)
|
||||
router.push(`/orders`);
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
if (!isClient) return null
|
||||
if (!isClient) return null;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 min-h-[90vh] flex items-center justify-center">
|
||||
<p>{t("loading")}</p>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || cartItems.length === 0) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 min-h-[90vh] flex items-center justify-center">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl text-gray-400 font-semibold">
|
||||
{t("emptyCart") || "Your cart is empty"}
|
||||
{t("emptyCart")}
|
||||
</h2>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const translations = {
|
||||
@@ -100,105 +126,108 @@ export default function CartPage() {
|
||||
placeOrder: t("order"),
|
||||
emptyCart: t("cart_empty"),
|
||||
map: t("address"),
|
||||
}
|
||||
};
|
||||
|
||||
// Group items by seller (from channel)
|
||||
const itemsBySeller = cartItems.reduce(
|
||||
(acc, item) => {
|
||||
const sellerId = item.product.channel?.[0]?.id || 0
|
||||
const sellerName = item.product.channel?.[0]?.name || "Unknown Seller"
|
||||
|
||||
if (!acc[sellerId]) {
|
||||
acc[sellerId] = {
|
||||
seller: { id: sellerId, name: sellerName },
|
||||
items: []
|
||||
}
|
||||
}
|
||||
acc[sellerId].items.push(item)
|
||||
return acc
|
||||
},
|
||||
{} as Record<number, { seller: any; items: typeof cartItems }>
|
||||
)
|
||||
const itemsBySeller = cartItems.reduce((acc, item) => {
|
||||
const sellerId = item.product.channel?.[0]?.id || 0;
|
||||
const sellerName = item.product.channel?.[0]?.name || "Unknown Seller";
|
||||
|
||||
if (!acc[sellerId]) {
|
||||
acc[sellerId] = {
|
||||
seller: { id: sellerId, name: sellerName },
|
||||
items: [],
|
||||
};
|
||||
}
|
||||
acc[sellerId].items.push(item);
|
||||
return acc;
|
||||
}, {} as Record<number, { seller: any; items: typeof cartItems }>);
|
||||
|
||||
// Calculate total
|
||||
const totalAmount = cartItems.reduce((sum, item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0")
|
||||
return sum + (price * item.product_quantity)
|
||||
}, 0)
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
return sum + price * item.product_quantity;
|
||||
}, 0);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{translations.cart}</h1>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
{/* Cart Items Section */}
|
||||
<div className="flex-1">
|
||||
<Card className="p-6 rounded-xl">
|
||||
{/* Sellers */}
|
||||
{Object.entries(itemsBySeller).map(([sellerId, { seller, items }]) => (
|
||||
<div key={sellerId} className="mb-6">
|
||||
<p className="text-base font-semibold mb-3">{seller.name}</p>
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0")
|
||||
const quantity = item.product_quantity
|
||||
const total = price * quantity
|
||||
|
||||
return (
|
||||
<CartItemCard
|
||||
key={item.id}
|
||||
item={{
|
||||
...item,
|
||||
quantity: quantity,
|
||||
price: price,
|
||||
total: total,
|
||||
seller: seller,
|
||||
price_formatted: `${item.product.price_amount} TMT`,
|
||||
sub_total_formatted: `${item.product.price_amount} TMT`,
|
||||
total_formatted: `${total.toFixed(2)} TMT`,
|
||||
discount_formatted: "0 TMT",
|
||||
product: {
|
||||
...item.product,
|
||||
image: item.product.media?.[0]?.images_800x800 || item.product.media?.[0]?.thumbnail,
|
||||
images: item.product.media?.map(m => m.images_800x800 || m.thumbnail) || []
|
||||
}
|
||||
}}
|
||||
translations={translations}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{Object.entries(itemsBySeller).map(
|
||||
([sellerId, { seller, items }]) => (
|
||||
<div key={sellerId} className="mb-6">
|
||||
<p className="text-base font-semibold mb-3">{seller.name}</p>
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
const quantity = item.product_quantity;
|
||||
const total = price * quantity;
|
||||
|
||||
return (
|
||||
<CartItemCard
|
||||
key={item.id}
|
||||
item={{
|
||||
...item,
|
||||
quantity: quantity,
|
||||
price: price,
|
||||
total: total,
|
||||
seller: seller,
|
||||
price_formatted: `${item.product.price_amount} TMT`,
|
||||
sub_total_formatted: `${item.product.price_amount} TMT`,
|
||||
total_formatted: `${total.toFixed(2)} TMT`,
|
||||
discount_formatted: "0 TMT",
|
||||
product: {
|
||||
...item.product,
|
||||
image:
|
||||
item.product.media?.[0]?.images_800x800 ||
|
||||
item.product.media?.[0]?.thumbnail,
|
||||
images:
|
||||
item.product.media?.map(
|
||||
(m) => m.images_800x800 || m.thumbnail
|
||||
) || [],
|
||||
},
|
||||
}}
|
||||
translations={translations}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{Object.entries(itemsBySeller).length > 1 && (
|
||||
<Separator className="mt-4" />
|
||||
)}
|
||||
</div>
|
||||
{Object.entries(itemsBySeller).length > 1 && <Separator className="mt-4" />}
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Order Summary Sidebar */}
|
||||
<OrderSummary
|
||||
order={{
|
||||
id: 1,
|
||||
seller: { id: 1, name: "Store" },
|
||||
items: cartItems.map(item => ({
|
||||
items: cartItems.map((item) => ({
|
||||
...item,
|
||||
quantity: item.product_quantity,
|
||||
price: parseFloat(item.product.price_amount || "0"),
|
||||
total: parseFloat(item.product.price_amount || "0") * item.product_quantity,
|
||||
seller: {
|
||||
id: item.product.channel?.[0]?.id || 0,
|
||||
name: item.product.channel?.[0]?.name || "Unknown"
|
||||
}
|
||||
total:
|
||||
parseFloat(item.product.price_amount || "0") *
|
||||
item.product_quantity,
|
||||
seller: {
|
||||
id: item.product.channel?.[0]?.id || 0,
|
||||
name: item.product.channel?.[0]?.name || "Unknown",
|
||||
},
|
||||
})),
|
||||
billing: {
|
||||
body: [
|
||||
{
|
||||
title: t("goods"),
|
||||
value: `${totalAmount.toFixed(2)} TMT`
|
||||
}
|
||||
{
|
||||
title: t("goods"),
|
||||
value: `${totalAmount.toFixed(2)} TMT`,
|
||||
},
|
||||
],
|
||||
footer: {
|
||||
title: t("total"),
|
||||
value: `${totalAmount.toFixed(2)} TMT`
|
||||
footer: {
|
||||
title: t("total"),
|
||||
value: `${totalAmount.toFixed(2)} TMT`,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@@ -206,21 +235,20 @@ export default function CartPage() {
|
||||
paymentType={paymentType}
|
||||
deliveryType={deliveryType}
|
||||
selectedRegion={selectedRegion}
|
||||
selectedAddress={selectedAddress}
|
||||
selectedProvince={selectedProvince}
|
||||
note={note}
|
||||
regions={regions}
|
||||
addresses={addresses}
|
||||
regionGroups={regionGroups}
|
||||
availableRegions={availableRegions}
|
||||
paymentTypes={paymentTypes}
|
||||
onPaymentTypeChange={setPaymentType}
|
||||
onDeliveryTypeChange={handleDeliveryTypeChange}
|
||||
onRegionChange={setSelectedRegion}
|
||||
onAddressChange={setSelectedAddress}
|
||||
onProvinceChange={setSelectedProvince}
|
||||
onNoteChange={setNote}
|
||||
onMapOpen={() => {}}
|
||||
onCompleteOrder={handleCompleteOrder}
|
||||
isLoading={isCreatingOrder}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -1,229 +0,0 @@
|
||||
"use client"
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import Image from "next/image"
|
||||
import { Minus, Plus, Trash2 } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import {
|
||||
useUpdateCartItemQuantity,
|
||||
useRemoveFromCart
|
||||
} from "@/lib/hooks"
|
||||
import type { CartItem, CartTranslations } from "./types"
|
||||
|
||||
interface CartItemCardProps {
|
||||
item: CartItem
|
||||
translations: CartTranslations
|
||||
onUpdate?: () => void
|
||||
}
|
||||
|
||||
export default function CartItemCard({
|
||||
item,
|
||||
translations: t,
|
||||
onUpdate
|
||||
}: CartItemCardProps) {
|
||||
const [localQuantity, setLocalQuantity] = useState(item.quantity)
|
||||
const [pendingQuantity, setPendingQuantity] = useState(item.quantity)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const updateTimeoutRef = useRef<NodeJS.Timeout>()
|
||||
|
||||
const { mutate: updateQuantity } = useUpdateCartItemQuantity()
|
||||
const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart()
|
||||
|
||||
// Sync local quantity with server quantity
|
||||
useEffect(() => {
|
||||
setLocalQuantity(item.quantity)
|
||||
setPendingQuantity(item.quantity)
|
||||
}, [item.quantity])
|
||||
|
||||
// Debounced update effect
|
||||
useEffect(() => {
|
||||
if (pendingQuantity === item.quantity) {
|
||||
return
|
||||
}
|
||||
|
||||
// Clear previous timeout
|
||||
if (updateTimeoutRef.current) {
|
||||
clearTimeout(updateTimeoutRef.current)
|
||||
}
|
||||
|
||||
// Set new timeout for update
|
||||
updateTimeoutRef.current = setTimeout(() => {
|
||||
setIsLoading(true)
|
||||
|
||||
if (pendingQuantity <= 0) {
|
||||
removeItem(item.id, {
|
||||
onSuccess: () => {
|
||||
onUpdate?.()
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Failed to remove item:", error)
|
||||
// Revert on error
|
||||
setLocalQuantity(item.quantity)
|
||||
setPendingQuantity(item.quantity)
|
||||
},
|
||||
onSettled: () => {
|
||||
setIsLoading(false)
|
||||
},
|
||||
})
|
||||
} else {
|
||||
updateQuantity(
|
||||
{ itemId: item.id, quantity: pendingQuantity },
|
||||
{
|
||||
onSuccess: () => {
|
||||
onUpdate?.()
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Failed to update quantity:", error)
|
||||
// Revert on error
|
||||
setLocalQuantity(item.quantity)
|
||||
setPendingQuantity(item.quantity)
|
||||
},
|
||||
onSettled: () => {
|
||||
setIsLoading(false)
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
}, 300)
|
||||
|
||||
return () => {
|
||||
if (updateTimeoutRef.current) {
|
||||
clearTimeout(updateTimeoutRef.current)
|
||||
}
|
||||
}
|
||||
}, [pendingQuantity, item.quantity, item.id, updateQuantity, removeItem, onUpdate])
|
||||
|
||||
const handleQuantityIncrease = (e: React.MouseEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
if (isLoading) return
|
||||
|
||||
const newQuantity = localQuantity + 1
|
||||
setLocalQuantity(newQuantity)
|
||||
setPendingQuantity(newQuantity)
|
||||
}
|
||||
|
||||
const handleQuantityDecrease = (e: React.MouseEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
if (isLoading) return
|
||||
|
||||
const newQuantity = localQuantity - 1
|
||||
|
||||
if (newQuantity < 1) {
|
||||
handleDelete()
|
||||
return
|
||||
}
|
||||
|
||||
setLocalQuantity(newQuantity)
|
||||
setPendingQuantity(newQuantity)
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
setIsLoading(true)
|
||||
removeItem(item.id, {
|
||||
onSuccess: () => {
|
||||
onUpdate?.()
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Failed to remove item:", error)
|
||||
},
|
||||
onSettled: () => {
|
||||
setIsLoading(false)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const getImageSrc = () => {
|
||||
if (item.product.image) return item.product.image
|
||||
if (item.product.images && item.product.images.length > 0) {
|
||||
return item.product.images[0]
|
||||
}
|
||||
return "/placeholder.svg"
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-4 shadow-none border">
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
{/* Product Image & Info */}
|
||||
<div className="flex gap-4 flex-1">
|
||||
<div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden flex-shrink-0">
|
||||
<Image
|
||||
src={getImageSrc()}
|
||||
alt={item.product.name}
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="font-semibold text-base">{item.product.name}</h3>
|
||||
<p className="text-sm text-gray-600">{item.seller.name}</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
disabled={isRemoving || isLoading}
|
||||
className="w-fit p-0 h-auto hover:bg-transparent hover:text-red-500"
|
||||
>
|
||||
<Trash2 className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price & Quantity */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-semibold">
|
||||
{t.pricePerUnit}{" "}
|
||||
<span className="text-primary">
|
||||
{item.price_formatted || `${item.price} TMT`}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{t.additionalPrice}{" "}
|
||||
{item.sub_total_formatted || `${item.total} TMT`}
|
||||
</p>
|
||||
{item.discount_formatted && item.discount_formatted !== "0 TMT" && (
|
||||
<p className="text-sm font-semibold">
|
||||
{t.discount} {item.discount_formatted}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold">{t.totalPrice}</span>
|
||||
<span className="bg-green-500 text-white px-3 py-1 rounded-xl font-semibold text-base">
|
||||
{item.total_formatted || `${item.total} TMT`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quantity Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleQuantityDecrease}
|
||||
disabled={isLoading || isRemoving}
|
||||
className="rounded-xl bg-blue-50"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="w-12 text-center font-semibold">
|
||||
{localQuantity}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleQuantityIncrease}
|
||||
disabled={isLoading || isRemoving}
|
||||
className="rounded-xl bg-blue-50"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
"use client"
|
||||
import { Truck, Warehouse } from "lucide-react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { DeliveryType, CartTranslations } from "./types"
|
||||
|
||||
interface DeliveryTypeSelectorProps {
|
||||
selectedType: DeliveryType
|
||||
onSelect: (type: DeliveryType) => void
|
||||
translations: CartTranslations
|
||||
}
|
||||
|
||||
export default function DeliveryTypeSelector({
|
||||
selectedType,
|
||||
onSelect,
|
||||
translations: t,
|
||||
}: DeliveryTypeSelectorProps) {
|
||||
const deliveryOptions: {
|
||||
type: DeliveryType
|
||||
label: string
|
||||
icon: typeof Truck
|
||||
}[] = [
|
||||
{ type: "SELECTED_DELIVERY", label: t.delivery, icon: Truck },
|
||||
{ type: "PICK_UP", label: t.pickup, icon: Warehouse },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold mb-3">{t.deliveryType}</h3>
|
||||
<div className="flex gap-2">
|
||||
{deliveryOptions.map(({ type, label, icon: Icon }) => (
|
||||
<Card
|
||||
key={type}
|
||||
className={`flex-1 cursor-pointer transition-all hover:shadow-md ${
|
||||
selectedType === type
|
||||
? "border-2 border-[#005bff] bg-blue-50"
|
||||
: "border-2 border-gray-200"
|
||||
}`}
|
||||
onClick={() => onSelect(type)}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center p-4 gap-2">
|
||||
<Icon
|
||||
className={`h-8 w-8 ${
|
||||
selectedType === type ? "text-[#005bff]" : "text-gray-600"
|
||||
}`}
|
||||
/>
|
||||
<span className={`text-xs font-medium ${
|
||||
selectedType === type ? "text-[#005bff]" : "text-gray-700"
|
||||
}`}>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,216 +0,0 @@
|
||||
"use client"
|
||||
import { MapPin } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select"
|
||||
import DeliveryTypeSelector from "./DeliveryTypeSelector"
|
||||
import type {
|
||||
Order,
|
||||
Region,
|
||||
Address,
|
||||
DeliveryType,
|
||||
CartTranslations,
|
||||
PaymentTypeOption
|
||||
} from "./types"
|
||||
|
||||
interface OrderSummaryProps {
|
||||
order: Order
|
||||
translations: CartTranslations
|
||||
paymentType: PaymentTypeOption | null
|
||||
deliveryType: DeliveryType
|
||||
selectedRegion: string | null
|
||||
selectedAddress: string
|
||||
note: string
|
||||
regions: Region[]
|
||||
addresses: Address[]
|
||||
paymentTypes: PaymentTypeOption[]
|
||||
onPaymentTypeChange: (type: PaymentTypeOption) => void
|
||||
onDeliveryTypeChange: (type: DeliveryType) => void
|
||||
onRegionChange: (regionCode: string) => void
|
||||
onAddressChange: (address: string) => void
|
||||
onNoteChange: (note: string) => void
|
||||
onMapOpen: () => void
|
||||
onCompleteOrder: () => void
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
export default function OrderSummary({
|
||||
order,
|
||||
translations: t,
|
||||
paymentType,
|
||||
deliveryType,
|
||||
selectedRegion,
|
||||
selectedAddress,
|
||||
note,
|
||||
regions,
|
||||
addresses,
|
||||
paymentTypes,
|
||||
onPaymentTypeChange,
|
||||
onDeliveryTypeChange,
|
||||
onRegionChange,
|
||||
onAddressChange,
|
||||
onNoteChange,
|
||||
onMapOpen,
|
||||
onCompleteOrder,
|
||||
isLoading,
|
||||
}: OrderSummaryProps) {
|
||||
// Filter addresses based on selected region
|
||||
const filteredAddresses = selectedRegion
|
||||
? addresses.filter((addr) => {
|
||||
const region = regions.find((r) => r.code === selectedRegion)
|
||||
return region && addr.region_id === region.id
|
||||
})
|
||||
: []
|
||||
|
||||
// Validate form completion
|
||||
const isFormValid = selectedRegion && selectedAddress && paymentType
|
||||
|
||||
return (
|
||||
<Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
|
||||
{/* Payment Type Selection */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
|
||||
<div className="flex gap-2">
|
||||
{paymentTypes.map((type) => (
|
||||
<Card
|
||||
key={type.id}
|
||||
className={`flex-1 cursor-pointer transition-all ${
|
||||
paymentType?.id === type.id
|
||||
? "border-2 border-[#005bff]"
|
||||
: "border-2 border-gray-200"
|
||||
}`}
|
||||
onClick={() => onPaymentTypeChange(type)}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center p-4 gap-2">
|
||||
<span className="text-xs font-medium">{type.name}</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delivery Type Selection */}
|
||||
<DeliveryTypeSelector
|
||||
selectedType={deliveryType}
|
||||
onSelect={onDeliveryTypeChange}
|
||||
translations={t}
|
||||
/>
|
||||
|
||||
{/* Region Selection */}
|
||||
<div className="mb-6">
|
||||
<Label className="text-lg font-semibold mb-3 block">
|
||||
{t.selectRegion}
|
||||
</Label>
|
||||
<RadioGroup
|
||||
value={selectedRegion || ""}
|
||||
onValueChange={onRegionChange}
|
||||
className="flex flex-wrap gap-4"
|
||||
>
|
||||
{regions.map((region) => (
|
||||
<div key={region.id} className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value={region.code}
|
||||
id={`region-${region.id}`}
|
||||
className="border-2 border-gray-400 data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white data-[state=checked]:[&_svg]:fill-[#005bff] data-[state=checked]:[&_svg]:stroke-[#005bff]"
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`region-${region.id}`}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{region.name}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
{/* Address Selection (only show when region is selected) */}
|
||||
{selectedRegion && filteredAddresses.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<Label className="text-lg font-semibold mb-3 block">
|
||||
{t.selectAddress}
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<Select value={selectedAddress} onValueChange={onAddressChange}>
|
||||
<SelectTrigger className="rounded-xl">
|
||||
<SelectValue placeholder={t.selectAddress} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{filteredAddresses.map((addr) => (
|
||||
<SelectItem key={addr.id} value={addr.address}>
|
||||
{addr.title} - {addr.address}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onMapOpen}
|
||||
className="rounded-xl flex-shrink-0 bg-transparent"
|
||||
>
|
||||
<MapPin className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Note Input */}
|
||||
<div className="mb-6">
|
||||
<Label className="text-lg font-semibold mb-3 block">{t.note}</Label>
|
||||
<Textarea
|
||||
value={note}
|
||||
onChange={(e) => onNoteChange(e.target.value)}
|
||||
className="rounded-xl resize-none"
|
||||
rows={3}
|
||||
placeholder={t.note}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Billing Summary */}
|
||||
<div className="space-y-2 mb-4">
|
||||
{order.billing.body.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex justify-between text-base font-medium"
|
||||
>
|
||||
<span>{item.title}:</span>
|
||||
<span>{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
{/* Total Amount */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="text-lg font-semibold">
|
||||
{order.billing.footer.title}:
|
||||
</span>
|
||||
<span className="text-lg font-bold text-green-600">
|
||||
{order.billing.footer.value}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Complete Order Button */}
|
||||
<Button
|
||||
onClick={onCompleteOrder}
|
||||
disabled={!isFormValid || isLoading}
|
||||
className="w-full rounded-xl bg-[#005bff] hover:bg-[#004dcc] cursor-pointer h-12 text-lg font-bold disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
size="lg"
|
||||
>
|
||||
{isLoading ? `${t.placeOrder}...` : t.placeOrder}
|
||||
</Button>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import React from "react";
|
||||
import { CreditCard } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { PaymentType, CartTranslations } from "./types";
|
||||
|
||||
interface PaymentTypeSelectorProps {
|
||||
selectedType: PaymentType;
|
||||
onSelect: (type: PaymentType) => void;
|
||||
translations: CartTranslations;
|
||||
}
|
||||
|
||||
export default function PaymentTypeSelector({
|
||||
selectedType,
|
||||
onSelect,
|
||||
translations: t,
|
||||
}: PaymentTypeSelectorProps) {
|
||||
const paymentOptions: { type: PaymentType; label: string }[] = [
|
||||
{ type: "CASH", label: t.cash },
|
||||
{ type: "CARD", label: t.card },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
|
||||
<div className="flex gap-2">
|
||||
{paymentOptions.map(({ type, label }) => (
|
||||
<Card
|
||||
key={type}
|
||||
className={`flex-1 cursor-pointer transition-all ${
|
||||
selectedType === type
|
||||
? "border-2 border-[#005bff]"
|
||||
: "border-2 border-gray-200"
|
||||
}`}
|
||||
onClick={() => onSelect(type)}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center p-4 gap-2">
|
||||
<CreditCard
|
||||
className={`h-8 w-8 ${
|
||||
selectedType === type ? "text-[#005bff]" : ""
|
||||
}`}
|
||||
/>
|
||||
<span className="text-xs">{label}</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
import type { StaticImageData } from "next/image"
|
||||
|
||||
export interface CartItem {
|
||||
id: number
|
||||
product_id: number
|
||||
product: {
|
||||
id: number
|
||||
name: string
|
||||
description?: string
|
||||
images: (StaticImageData | string)[]
|
||||
image?: StaticImageData | string
|
||||
stock?: number
|
||||
price_amount?: string
|
||||
}
|
||||
seller: {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
quantity: number
|
||||
product_quantity?: number // For compatibility with old API
|
||||
price: number
|
||||
total: number
|
||||
price_formatted?: string
|
||||
sub_total_formatted?: string
|
||||
discount_formatted?: string
|
||||
total_formatted?: string
|
||||
}
|
||||
|
||||
export interface Cart {
|
||||
message: string
|
||||
data: CartItem[]
|
||||
errorDetails?: string
|
||||
total?: number
|
||||
total_formatted?: string
|
||||
items?: CartItem[] // Alternative structure
|
||||
}
|
||||
|
||||
export interface Order {
|
||||
id: number
|
||||
seller: {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
items: CartItem[]
|
||||
billing: {
|
||||
body: Array<{ title: string; value: string }>
|
||||
footer: { title: string; value: string }
|
||||
}
|
||||
}
|
||||
|
||||
export interface Region {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface Address {
|
||||
id: number
|
||||
title: string
|
||||
region_id: number
|
||||
address: string
|
||||
phone?: string
|
||||
is_default?: boolean
|
||||
}
|
||||
|
||||
export interface PickUpPoint {
|
||||
id: number
|
||||
name: string
|
||||
address: string
|
||||
}
|
||||
|
||||
export interface PaymentTypeOption {
|
||||
id: number
|
||||
name: string
|
||||
code: string
|
||||
}
|
||||
|
||||
export interface CartTranslations {
|
||||
cart: string
|
||||
ordersIn: string
|
||||
pricePerUnit: string
|
||||
additionalPrice: string
|
||||
discount: string
|
||||
totalPrice: string
|
||||
paymentType: string
|
||||
cash: string
|
||||
card: string
|
||||
deliveryType: string
|
||||
delivery: string
|
||||
pickup: string
|
||||
selectRegion: string
|
||||
selectAddress: string
|
||||
note: string
|
||||
placeOrder: string
|
||||
emptyCart: string
|
||||
map: string
|
||||
}
|
||||
|
||||
export type PaymentType = "CASH" | "CARD"
|
||||
export type DeliveryType = "SELECTED_DELIVERY" | "PICK_UP"
|
||||
|
||||
// API Response types
|
||||
export interface ApiResponse<T> {
|
||||
message: string
|
||||
data: T
|
||||
errorDetails?: string
|
||||
}
|
||||
|
||||
export interface CreateOrderPayload {
|
||||
customer_name?: string
|
||||
customer_phone?: string
|
||||
customer_address: string
|
||||
shipping_method: string
|
||||
payment_type_id: number
|
||||
delivery_time?: string
|
||||
delivery_at?: string
|
||||
region: string
|
||||
note?: string
|
||||
}
|
||||
Reference in New Issue
Block a user