106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
import { createFileRoute, useNavigate } from '@tanstack/react-router'
|
|
import { useState } from 'react'
|
|
import {
|
|
p,
|
|
MyButton,
|
|
Quantifier,
|
|
div,
|
|
} from 'web-components'
|
|
import { useCentralProductStore } from '../lib/stores/central-product-store'
|
|
import { useCentralSlotStore } from '../lib/stores/central-slot-store'
|
|
import { useAddToCart } from '../hooks/cart-query-hooks'
|
|
import { AppLayout } from '../components/AppLayout'
|
|
import { ShoppingCart, Zap } from 'lucide-react'
|
|
|
|
export const Route = createFileRoute('/flash')({ component: FlashDeliveryPage })
|
|
|
|
function FlashDeliveryPage() {
|
|
const navigate = useNavigate()
|
|
const products = useCentralProductStore((s) => s.products)
|
|
const productSlotsMap = useCentralSlotStore((s) => s.productSlotsMap)
|
|
const [selectedQty, setSelectedQty] = useState<Record<number, number>>({})
|
|
const addToCart = useAddToCart('flash')
|
|
|
|
const flashProducts = products.filter(
|
|
(p) => productSlotsMap[p.id]?.isFlashAvailable && !productSlotsMap[p.id]?.isOutOfStock
|
|
)
|
|
|
|
const handleAddToCart = (product: any) => {
|
|
const qty = selectedQty[product.id] || 1
|
|
addToCart.mutate(
|
|
{ productId: product.id, quantity: qty, storeId: product.storeId },
|
|
{ onSuccess: () => navigate({ to: '/flash/cart' }) }
|
|
)
|
|
}
|
|
|
|
return (
|
|
<AppLayout isFlashDelivery={true}>
|
|
<div className="p-4">
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<Zap className="h-6 w-6 text-yellow-500" />
|
|
<p className="font-bold text-xl">
|
|
1 Hr Delivery
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-4 rounded-xl bg-yellow-50 p-3">
|
|
<p className="text-sm text-yellow-800">
|
|
Get these products delivered within 1 hour! Only available for select items.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{flashProducts.map((product) => {
|
|
const price = product.discountedPrice ?? product.price
|
|
const qty = selectedQty[product.id] || 1
|
|
return (
|
|
<div
|
|
key={product.id}
|
|
className="rounded-xl border border-gray-100 bg-white p-3 shadow-sm"
|
|
>
|
|
<div className="mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100">
|
|
{product.images?.[0] && (
|
|
<img
|
|
src={product.images[0].uri}
|
|
alt={product.name}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
<p className="font-semibold text-sm">
|
|
{product.name}
|
|
</p>
|
|
<p className="font-bold text-brand-600">
|
|
₹{price}
|
|
</p>
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<Quantifier
|
|
value={qty}
|
|
setValue={(v) =>
|
|
setSelectedQty((prev) => ({ ...prev, [product.id]: v }))
|
|
}
|
|
/>
|
|
</div>
|
|
<MyButton
|
|
fullWidth
|
|
onClick={() => handleAddToCart(product)}
|
|
className="mt-2 flex items-center justify-center gap-1 bg-brand-500 text-white text-xs"
|
|
disabled={addToCart.isPending}
|
|
>
|
|
<ShoppingCart className="h-3 w-3" />
|
|
Add
|
|
</MyButton>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{flashProducts.length === 0 && (
|
|
<div className="py-20 text-center">
|
|
<p className="text-gray-500">No flash delivery products available</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AppLayout>
|
|
)
|
|
}
|