867 lines
41 KiB
TypeScript
867 lines
41 KiB
TypeScript
import {
|
||
mdiArrowRight,
|
||
mdiBasketOutline,
|
||
mdiCarrot,
|
||
mdiCashFast,
|
||
mdiCheckCircleOutline,
|
||
mdiClockOutline,
|
||
mdiLeaf,
|
||
mdiMapMarkerOutline,
|
||
mdiMinus,
|
||
mdiPlus,
|
||
mdiSprout,
|
||
mdiStorefrontOutline,
|
||
mdiTruckFastOutline,
|
||
} from '@mdi/js';
|
||
import Head from 'next/head';
|
||
import Link from 'next/link';
|
||
import React, { ReactElement, useEffect, useMemo, useState } from 'react';
|
||
import axios from 'axios';
|
||
import BaseButton from '../components/BaseButton';
|
||
import BaseIcon from '../components/BaseIcon';
|
||
import CardBox from '../components/CardBox';
|
||
import LoadingSpinner from '../components/LoadingSpinner';
|
||
import SectionMain from '../components/SectionMain';
|
||
import LayoutAuthenticated from '../layouts/Authenticated';
|
||
import { getPageTitle } from '../config';
|
||
import { hasPermission } from '../helpers/userPermissions';
|
||
import { useAppSelector } from '../stores/hooks';
|
||
|
||
type Category = {
|
||
id: string;
|
||
name: string;
|
||
};
|
||
|
||
type Product = {
|
||
id: string;
|
||
name: string;
|
||
short_description?: string | null;
|
||
description?: string | null;
|
||
unit?: string | null;
|
||
unit_size?: number | string | null;
|
||
price?: number | string | null;
|
||
compare_at_price?: number | string | null;
|
||
tax_rate?: number | string | null;
|
||
is_taxable?: boolean;
|
||
stock_quantity?: number | null;
|
||
is_active?: boolean;
|
||
is_featured?: boolean;
|
||
category?: Category | null;
|
||
};
|
||
|
||
type DeliverySlot = {
|
||
id: string;
|
||
name: string;
|
||
slot_type: 'delivery' | 'pickup';
|
||
starts_at?: string | null;
|
||
ends_at?: string | null;
|
||
capacity?: number | null;
|
||
reserved_count?: number | null;
|
||
notes?: string | null;
|
||
is_active?: boolean;
|
||
};
|
||
|
||
type Address = {
|
||
id: string;
|
||
label?: string | null;
|
||
recipient_name?: string | null;
|
||
phone?: string | null;
|
||
line1?: string | null;
|
||
line2?: string | null;
|
||
city?: string | null;
|
||
state?: string | null;
|
||
postal_code?: string | null;
|
||
country?: string | null;
|
||
};
|
||
|
||
type Order = {
|
||
id: string;
|
||
order_number?: string | null;
|
||
status?: string | null;
|
||
fulfillment_method?: 'delivery' | 'pickup' | null;
|
||
total_amount?: number | string | null;
|
||
placed_at?: string | null;
|
||
delivery_slot?: DeliverySlot | null;
|
||
delivery_address?: Address | null;
|
||
};
|
||
|
||
type CheckoutOrder = Order & {
|
||
order_items_order?: Array<{
|
||
id: string;
|
||
product_name?: string | null;
|
||
quantity?: number | null;
|
||
line_total?: number | string | null;
|
||
}>;
|
||
};
|
||
|
||
type NewAddressForm = {
|
||
label: string;
|
||
recipient_name: string;
|
||
phone: string;
|
||
line1: string;
|
||
line2: string;
|
||
city: string;
|
||
state: string;
|
||
postal_code: string;
|
||
country: string;
|
||
};
|
||
|
||
const currencyFormatter = new Intl.NumberFormat('en-US', {
|
||
style: 'currency',
|
||
currency: 'USD',
|
||
});
|
||
|
||
const formatCurrency = (value: number | string | null | undefined) => {
|
||
const parsed = Number(value || 0);
|
||
return currencyFormatter.format(Number.isNaN(parsed) ? 0 : parsed);
|
||
};
|
||
|
||
const formatSlotWindow = (slot: DeliverySlot) => {
|
||
if (!slot.starts_at) {
|
||
return 'Time to be confirmed';
|
||
}
|
||
|
||
const start = new Date(slot.starts_at);
|
||
const end = slot.ends_at ? new Date(slot.ends_at) : null;
|
||
const base = start.toLocaleDateString('en-US', {
|
||
weekday: 'short',
|
||
month: 'short',
|
||
day: 'numeric',
|
||
});
|
||
const time = start.toLocaleTimeString('en-US', {
|
||
hour: 'numeric',
|
||
minute: '2-digit',
|
||
});
|
||
|
||
if (!end) {
|
||
return `${base} · ${time}`;
|
||
}
|
||
|
||
return `${base} · ${time}–${end.toLocaleTimeString('en-US', {
|
||
hour: 'numeric',
|
||
minute: '2-digit',
|
||
})}`;
|
||
};
|
||
|
||
const formatAddress = (address: Address) => {
|
||
return [
|
||
address.line1,
|
||
address.line2,
|
||
[address.city, address.state].filter(Boolean).join(', '),
|
||
address.postal_code,
|
||
address.country,
|
||
]
|
||
.filter(Boolean)
|
||
.join(' · ');
|
||
};
|
||
|
||
const initialAddressForm = {
|
||
label: 'Fresh delivery',
|
||
recipient_name: '',
|
||
phone: '',
|
||
line1: '',
|
||
line2: '',
|
||
city: '',
|
||
state: '',
|
||
postal_code: '',
|
||
country: 'USA',
|
||
};
|
||
|
||
const StorefrontPage = () => {
|
||
const { currentUser } = useAppSelector((state) => state.auth);
|
||
const corners = useAppSelector((state) => state.style.corners);
|
||
const focusRingColor = useAppSelector((state) => state.style.focusRingColor);
|
||
const textSecondary = useAppSelector((state) => state.style.textSecondary);
|
||
|
||
const [products, setProducts] = useState<Product[]>([]);
|
||
const [deliverySlots, setDeliverySlots] = useState<DeliverySlot[]>([]);
|
||
const [addresses, setAddresses] = useState<Address[]>([]);
|
||
const [recentOrders, setRecentOrders] = useState<Order[]>([]);
|
||
const [cart, setCart] = useState<Record<string, number>>({});
|
||
const [search, setSearch] = useState('');
|
||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||
const [fulfillmentMethod, setFulfillmentMethod] = useState<'delivery' | 'pickup'>('delivery');
|
||
const [selectedSlotId, setSelectedSlotId] = useState('');
|
||
const [selectedAddressId, setSelectedAddressId] = useState('new');
|
||
const [customerNote, setCustomerNote] = useState('');
|
||
const [newAddress, setNewAddress] = useState<NewAddressForm>(initialAddressForm);
|
||
const [loading, setLoading] = useState(true);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [loadError, setLoadError] = useState('');
|
||
const [submitError, setSubmitError] = useState('');
|
||
const [successOrder, setSuccessOrder] = useState<CheckoutOrder | null>(null);
|
||
|
||
const hasReadProducts = hasPermission(currentUser, 'READ_PRODUCTS');
|
||
const hasReadOrders = hasPermission(currentUser, 'READ_ORDERS');
|
||
const hasReadAddresses = hasPermission(currentUser, 'READ_ADDRESSES');
|
||
const hasReadSlots = hasPermission(currentUser, 'READ_DELIVERY_SLOTS');
|
||
const canCheckout = hasPermission(currentUser, 'CREATE_ORDERS');
|
||
|
||
useEffect(() => {
|
||
if (!currentUser) {
|
||
return;
|
||
}
|
||
|
||
setNewAddress((previous) => ({
|
||
...previous,
|
||
recipient_name: previous.recipient_name || [currentUser.firstName, currentUser.lastName].filter(Boolean).join(' '),
|
||
phone: previous.phone || currentUser.phoneNumber || '',
|
||
}));
|
||
}, [currentUser]);
|
||
|
||
const loadStorefront = React.useCallback(async () => {
|
||
if (!currentUser?.id || !hasReadProducts) {
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
setLoadError('');
|
||
|
||
try {
|
||
const requests = [
|
||
axios.get('/products', { params: { limit: 24, page: 0 } }),
|
||
hasReadSlots ? axios.get('/delivery_slots', { params: { limit: 100, page: 0 } }) : Promise.resolve({ data: { rows: [] } }),
|
||
hasReadAddresses ? axios.get('/addresses', { params: { limit: 100, page: 0, user: currentUser.id } }) : Promise.resolve({ data: { rows: [] } }),
|
||
hasReadOrders ? axios.get('/orders', { params: { limit: 4, page: 0, user: currentUser.id } }) : Promise.resolve({ data: { rows: [] } }),
|
||
];
|
||
|
||
const [productsResponse, slotsResponse, addressesResponse, ordersResponse] = await Promise.all(requests);
|
||
|
||
setProducts(Array.isArray(productsResponse.data?.rows) ? productsResponse.data.rows : []);
|
||
setDeliverySlots(
|
||
(Array.isArray(slotsResponse.data?.rows) ? slotsResponse.data.rows : []).filter((slot: DeliverySlot) => slot.is_active !== false),
|
||
);
|
||
const fetchedAddresses = Array.isArray(addressesResponse.data?.rows) ? addressesResponse.data.rows : [];
|
||
setAddresses(fetchedAddresses);
|
||
setSelectedAddressId((previous) => (previous === 'new' ? 'new' : previous || (fetchedAddresses[0]?.id || 'new')));
|
||
setRecentOrders(Array.isArray(ordersResponse.data?.rows) ? ordersResponse.data.rows : []);
|
||
} catch (error) {
|
||
if (axios.isAxiosError(error)) {
|
||
setLoadError(error.response?.data || error.message || 'We could not load the storefront.');
|
||
} else {
|
||
setLoadError('We could not load the storefront.');
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [currentUser?.id, hasReadAddresses, hasReadOrders, hasReadProducts, hasReadSlots]);
|
||
|
||
useEffect(() => {
|
||
loadStorefront();
|
||
}, [loadStorefront]);
|
||
|
||
const categories = useMemo(() => {
|
||
const seen = new Map<string, Category>();
|
||
products.forEach((product) => {
|
||
if (product.category?.id && product.category?.name) {
|
||
seen.set(product.category.id, product.category);
|
||
}
|
||
});
|
||
|
||
return Array.from(seen.values()).sort((left, right) => left.name.localeCompare(right.name));
|
||
}, [products]);
|
||
|
||
const filteredProducts = useMemo(() => {
|
||
const needle = search.trim().toLowerCase();
|
||
|
||
return products
|
||
.filter((product) => product.is_active !== false)
|
||
.filter((product) => {
|
||
if (selectedCategory === 'all') {
|
||
return true;
|
||
}
|
||
|
||
return product.category?.id === selectedCategory;
|
||
})
|
||
.filter((product) => {
|
||
if (!needle) {
|
||
return true;
|
||
}
|
||
|
||
return [product.name, product.short_description, product.description, product.category?.name]
|
||
.filter(Boolean)
|
||
.some((value) => String(value).toLowerCase().includes(needle));
|
||
})
|
||
.sort((left, right) => Number(Boolean(right.is_featured)) - Number(Boolean(left.is_featured)));
|
||
}, [products, search, selectedCategory]);
|
||
|
||
const selectedSlots = useMemo(() => {
|
||
return deliverySlots.filter((slot) => slot.slot_type === fulfillmentMethod);
|
||
}, [deliverySlots, fulfillmentMethod]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedSlots.length) {
|
||
setSelectedSlotId('');
|
||
return;
|
||
}
|
||
|
||
if (!selectedSlots.some((slot) => slot.id === selectedSlotId)) {
|
||
setSelectedSlotId(selectedSlots[0].id);
|
||
}
|
||
}, [selectedSlotId, selectedSlots]);
|
||
|
||
const cartItems = useMemo(() => {
|
||
return Object.entries(cart)
|
||
.map(([productId, quantity]) => {
|
||
const product = products.find((item) => item.id === productId);
|
||
if (!product || quantity <= 0) {
|
||
return null;
|
||
}
|
||
|
||
return {
|
||
...product,
|
||
quantity,
|
||
};
|
||
})
|
||
.filter(Boolean) as Array<Product & { quantity: number }>;
|
||
}, [cart, products]);
|
||
|
||
const pricing = useMemo(() => {
|
||
const subtotal = cartItems.reduce((sum, item) => sum + Number(item.price || 0) * item.quantity, 0);
|
||
const tax = cartItems.reduce((sum, item) => {
|
||
if (!item.is_taxable) {
|
||
return sum;
|
||
}
|
||
|
||
return sum + Number(item.price || 0) * item.quantity * Number(item.tax_rate || 0);
|
||
}, 0);
|
||
const deliveryFee = fulfillmentMethod === 'delivery' && cartItems.length ? 4.99 : 0;
|
||
const total = subtotal + tax + deliveryFee;
|
||
|
||
return {
|
||
subtotal,
|
||
tax,
|
||
deliveryFee,
|
||
total,
|
||
};
|
||
}, [cartItems, fulfillmentMethod]);
|
||
|
||
const addToCart = (productId: string, amount = 1) => {
|
||
setCart((previous) => {
|
||
const currentQuantity = previous[productId] || 0;
|
||
const product = products.find((item) => item.id === productId);
|
||
const maxQuantity = Number(product?.stock_quantity || 0);
|
||
const nextQuantity = Math.min(Math.max(currentQuantity + amount, 0), maxQuantity);
|
||
|
||
if (!nextQuantity) {
|
||
const nextCart = { ...previous };
|
||
delete nextCart[productId];
|
||
return nextCart;
|
||
}
|
||
|
||
return {
|
||
...previous,
|
||
[productId]: nextQuantity,
|
||
};
|
||
});
|
||
};
|
||
|
||
const handleCheckout = async () => {
|
||
setSubmitError('');
|
||
setSuccessOrder(null);
|
||
|
||
if (!cartItems.length) {
|
||
setSubmitError('Add vegetables to the basket before placing your order.');
|
||
return;
|
||
}
|
||
|
||
if (!selectedSlotId) {
|
||
setSubmitError(`Choose a ${fulfillmentMethod} slot to continue.`);
|
||
return;
|
||
}
|
||
|
||
if (fulfillmentMethod === 'delivery' && selectedAddressId === 'new') {
|
||
const requiredFields: Array<keyof NewAddressForm> = ['recipient_name', 'phone', 'line1', 'city', 'state', 'postal_code', 'country'];
|
||
const missingField = requiredFields.find((field) => !newAddress[field]?.trim());
|
||
|
||
if (missingField) {
|
||
setSubmitError('Complete the delivery address before placing your order.');
|
||
return;
|
||
}
|
||
}
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
const payload = {
|
||
fulfillment_method: fulfillmentMethod,
|
||
delivery_slotId: selectedSlotId,
|
||
payment_provider: fulfillmentMethod === 'delivery' ? 'cash_on_delivery' : 'cash_on_pickup',
|
||
customer_note: customerNote,
|
||
items: cartItems.map((item) => ({
|
||
productId: item.id,
|
||
quantity: item.quantity,
|
||
})),
|
||
...(fulfillmentMethod === 'delivery'
|
||
? selectedAddressId !== 'new'
|
||
? { delivery_addressId: selectedAddressId }
|
||
: { delivery_address: newAddress }
|
||
: {}),
|
||
};
|
||
|
||
const response = await axios.post('/orders/checkout', { data: payload });
|
||
const order = response.data as CheckoutOrder;
|
||
|
||
setSuccessOrder(order);
|
||
setCart({});
|
||
setCustomerNote('');
|
||
setSelectedAddressId(order.delivery_address?.id || (addresses[0]?.id ? addresses[0].id : 'new'));
|
||
await loadStorefront();
|
||
} catch (error) {
|
||
if (axios.isAxiosError(error)) {
|
||
setSubmitError(error.response?.data || error.message || 'Your order could not be placed.');
|
||
} else {
|
||
setSubmitError('Your order could not be placed.');
|
||
}
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const inputClassName = `w-full border border-gray-200 bg-white/80 px-3 py-2 text-sm text-gray-900 shadow-sm ${corners} ${focusRingColor}`;
|
||
|
||
if (!hasReadProducts) {
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>{getPageTitle('Storefront')}</title>
|
||
</Head>
|
||
<SectionMain>
|
||
<CardBox className="border-emerald-100 bg-white/90">
|
||
<div className="space-y-3">
|
||
<div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700">
|
||
<BaseIcon path={mdiStorefrontOutline} size={26} />
|
||
</div>
|
||
<h1 className="text-2xl font-semibold text-gray-900">Storefront access is not enabled for this role</h1>
|
||
<p className="text-sm text-gray-600">
|
||
Ask an administrator to grant product and order permissions so you can browse vegetables and place orders.
|
||
</p>
|
||
<BaseButton href="/dashboard" color="info" label="Back to dashboard" />
|
||
</div>
|
||
</CardBox>
|
||
</SectionMain>
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>{getPageTitle('Storefront')}</title>
|
||
</Head>
|
||
<SectionMain>
|
||
<section className="mb-8 overflow-hidden rounded-[2rem] bg-gradient-to-br from-emerald-600 via-green-600 to-lime-500 text-white shadow-xl shadow-emerald-200/70">
|
||
<div className="grid gap-6 px-6 py-8 md:px-8 lg:grid-cols-[1.4fr_0.9fr] lg:items-center lg:px-10 lg:py-10">
|
||
<div className="space-y-5">
|
||
<div className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-emerald-50">
|
||
<BaseIcon path={mdiLeaf} size={16} /> Fresh, local, and easy to order
|
||
</div>
|
||
<div className="space-y-3">
|
||
<h1 className="max-w-2xl text-4xl font-bold tracking-tight md:text-5xl">Build a beautiful first-order flow for your vegetable shop.</h1>
|
||
<p className="max-w-2xl text-sm leading-6 text-emerald-50/90 md:text-base">
|
||
Browse your active products, curate a basket, choose delivery or pickup, and place an order in one polished flow.
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3 text-sm">
|
||
<div className="inline-flex items-center gap-2 rounded-2xl bg-white/10 px-4 py-2 backdrop-blur">
|
||
<BaseIcon path={mdiCarrot} size={18} /> {products.filter((product) => product.is_active !== false).length} active vegetables
|
||
</div>
|
||
<div className="inline-flex items-center gap-2 rounded-2xl bg-white/10 px-4 py-2 backdrop-blur">
|
||
<BaseIcon path={fulfillmentMethod === 'delivery' ? mdiTruckFastOutline : mdiStorefrontOutline} size={18} /> {fulfillmentMethod === 'delivery' ? 'Delivery ready' : 'Pickup ready'}
|
||
</div>
|
||
<div className="inline-flex items-center gap-2 rounded-2xl bg-white/10 px-4 py-2 backdrop-blur">
|
||
<BaseIcon path={mdiCashFast} size={18} /> Pay on {fulfillmentMethod}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="grid gap-4 rounded-[1.75rem] border border-white/15 bg-white/10 p-5 backdrop-blur">
|
||
<div>
|
||
<p className="text-xs uppercase tracking-[0.24em] text-emerald-100">How the MVP works</p>
|
||
<h2 className="mt-2 text-2xl font-semibold">Catalog → basket → checkout → order detail</h2>
|
||
</div>
|
||
<div className="grid gap-3 text-sm text-emerald-50/90">
|
||
<div className="flex items-start gap-3 rounded-2xl bg-black/10 px-4 py-3">
|
||
<BaseIcon path={mdiBasketOutline} size={18} className="mt-0.5" /> Add produce to a live basket with instant totals.
|
||
</div>
|
||
<div className="flex items-start gap-3 rounded-2xl bg-black/10 px-4 py-3">
|
||
<BaseIcon path={mdiClockOutline} size={18} className="mt-0.5" /> Reserve a delivery or pickup slot right in checkout.
|
||
</div>
|
||
<div className="flex items-start gap-3 rounded-2xl bg-black/10 px-4 py-3">
|
||
<BaseIcon path={mdiCheckCircleOutline} size={18} className="mt-0.5" /> Generate a real order, payment stub, and stock adjustment.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{loading ? (
|
||
<CardBox className="min-h-[20rem] justify-center">
|
||
<LoadingSpinner />
|
||
</CardBox>
|
||
) : (
|
||
<div className="grid gap-6 xl:grid-cols-[1.4fr_0.95fr]">
|
||
<div className="space-y-6">
|
||
<CardBox className="border-emerald-100 bg-white/90">
|
||
<div className="grid gap-4 lg:grid-cols-[1.3fr_1fr]">
|
||
<div>
|
||
<label className="mb-2 block text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Search vegetables</label>
|
||
<input
|
||
className={inputClassName}
|
||
value={search}
|
||
onChange={(event) => setSearch(event.target.value)}
|
||
placeholder="Search carrots, basil, spinach…"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="mb-2 block text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Category</label>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setSelectedCategory('all')}
|
||
className={`rounded-full px-4 py-2 text-sm font-medium transition ${selectedCategory === 'all' ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-100' : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100'}`}
|
||
>
|
||
All produce
|
||
</button>
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category.id}
|
||
type="button"
|
||
onClick={() => setSelectedCategory(category.id)}
|
||
className={`rounded-full px-4 py-2 text-sm font-medium transition ${selectedCategory === category.id ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-100' : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100'}`}
|
||
>
|
||
{category.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardBox>
|
||
|
||
{loadError ? (
|
||
<CardBox className="border border-rose-200 bg-rose-50">
|
||
<div className="space-y-2">
|
||
<h2 className="text-lg font-semibold text-rose-800">Storefront unavailable</h2>
|
||
<p className="text-sm text-rose-700">{loadError}</p>
|
||
</div>
|
||
</CardBox>
|
||
) : null}
|
||
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
{filteredProducts.map((product) => {
|
||
const inCart = cart[product.id] || 0;
|
||
const stock = Number(product.stock_quantity || 0);
|
||
const isSoldOut = stock <= 0;
|
||
|
||
return (
|
||
<CardBox key={product.id} className="border border-emerald-100 bg-white/90 shadow-sm shadow-emerald-100/60">
|
||
<div className="flex h-full flex-col gap-5">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="space-y-2">
|
||
<div className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
|
||
<BaseIcon path={mdiSprout} size={14} />
|
||
{product.category?.name || 'Seasonal pick'}
|
||
</div>
|
||
<div>
|
||
<h2 className="text-xl font-semibold text-gray-900">{product.name}</h2>
|
||
<p className={`mt-1 text-sm ${textSecondary || 'text-gray-500'}`}>
|
||
{product.short_description || product.description || 'Fresh produce, ready to order.'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{product.is_featured ? (
|
||
<div className="rounded-full bg-lime-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-lime-700">Featured</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||
<div className="rounded-2xl bg-gray-50 px-4 py-3">
|
||
<p className="text-xs uppercase tracking-wide text-gray-500">Price</p>
|
||
<p className="mt-1 text-lg font-semibold text-gray-900">{formatCurrency(product.price)}</p>
|
||
</div>
|
||
<div className="rounded-2xl bg-gray-50 px-4 py-3">
|
||
<p className="text-xs uppercase tracking-wide text-gray-500">Unit</p>
|
||
<p className="mt-1 text-lg font-semibold text-gray-900">
|
||
{product.unit_size ? `${product.unit_size} ` : ''}
|
||
{product.unit || 'each'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-auto flex items-center justify-between gap-4 rounded-2xl border border-emerald-100 bg-emerald-50/70 px-4 py-3">
|
||
<div>
|
||
<p className="text-xs uppercase tracking-wide text-emerald-700">Stock</p>
|
||
<p className="font-semibold text-emerald-900">{isSoldOut ? 'Sold out' : `${stock} available`}</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
{inCart ? (
|
||
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-white px-2 py-1 shadow-sm">
|
||
<button type="button" aria-label={`Decrease ${product.name}`} onClick={() => addToCart(product.id, -1)} className="rounded-full p-1 text-emerald-700 transition hover:bg-emerald-50">
|
||
<BaseIcon path={mdiMinus} size={14} />
|
||
</button>
|
||
<span className="min-w-6 text-center text-sm font-semibold text-emerald-900">{inCart}</span>
|
||
<button type="button" aria-label={`Increase ${product.name}`} onClick={() => addToCart(product.id, 1)} className="rounded-full p-1 text-emerald-700 transition hover:bg-emerald-50" disabled={inCart >= stock}>
|
||
<BaseIcon path={mdiPlus} size={14} />
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
<BaseButton
|
||
color="success"
|
||
label={isSoldOut ? 'Sold out' : inCart ? 'Add more' : 'Add to basket'}
|
||
icon={mdiBasketOutline}
|
||
disabled={isSoldOut}
|
||
onClick={() => addToCart(product.id, 1)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardBox>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{!filteredProducts.length ? (
|
||
<CardBox className="border-dashed border-emerald-200 bg-white/80">
|
||
<div className="space-y-2 py-6 text-center">
|
||
<h2 className="text-lg font-semibold text-gray-900">No vegetables match this view yet</h2>
|
||
<p className="text-sm text-gray-500">Try a different search, or add fresh products in the admin catalog.</p>
|
||
<div className="flex justify-center">
|
||
<BaseButton href="/products/products-new" color="info" label="Add a product" />
|
||
</div>
|
||
</div>
|
||
</CardBox>
|
||
) : null}
|
||
|
||
<CardBox className="border-emerald-100 bg-white/90">
|
||
<div className="flex items-center justify-between gap-4">
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Recent orders</p>
|
||
<h2 className="mt-1 text-2xl font-semibold text-gray-900">Track the latest checkout outcomes</h2>
|
||
</div>
|
||
<BaseButton href="/orders/orders-list" color="info" label="Admin orders" icon={mdiArrowRight} />
|
||
</div>
|
||
<div className="mt-5 grid gap-4 md:grid-cols-2">
|
||
{recentOrders.map((order) => (
|
||
<div key={order.id} className="rounded-[1.5rem] border border-gray-100 bg-gray-50 p-4 shadow-sm">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700">{order.order_number || 'Draft order'}</p>
|
||
<h3 className="mt-1 text-lg font-semibold text-gray-900">{formatCurrency(order.total_amount)}</h3>
|
||
</div>
|
||
<div className="rounded-full bg-white px-3 py-1 text-xs font-semibold capitalize text-gray-700 shadow-sm">
|
||
{String(order.status || 'processing').replace(/_/g, ' ')}
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 space-y-2 text-sm text-gray-600">
|
||
<div className="flex items-center gap-2">
|
||
<BaseIcon path={order.fulfillment_method === 'delivery' ? mdiTruckFastOutline : mdiStorefrontOutline} size={16} className="text-emerald-600" />
|
||
<span className="capitalize">{order.fulfillment_method || 'pickup'}</span>
|
||
</div>
|
||
{order.delivery_slot ? (
|
||
<div className="flex items-start gap-2">
|
||
<BaseIcon path={mdiClockOutline} size={16} className="mt-0.5 text-emerald-600" />
|
||
<span>{formatSlotWindow(order.delivery_slot)}</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<div className="mt-4">
|
||
<Link href={`/shop/orders/${order.id}`} className="inline-flex items-center gap-2 text-sm font-semibold text-emerald-700 hover:text-emerald-800">
|
||
View order details <BaseIcon path={mdiArrowRight} size={16} />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{!recentOrders.length ? (
|
||
<div className="mt-5 rounded-[1.5rem] border border-dashed border-emerald-200 bg-emerald-50/50 px-5 py-6 text-sm text-emerald-800">
|
||
No orders yet. Place the first test order from the basket and it will appear here instantly.
|
||
</div>
|
||
) : null}
|
||
</CardBox>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<CardBox className="sticky top-20 border-emerald-100 bg-white/95 shadow-lg shadow-emerald-100/60">
|
||
<div className="space-y-6">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Basket & checkout</p>
|
||
<h2 className="mt-1 text-2xl font-semibold text-gray-900">Finish the first order journey</h2>
|
||
</div>
|
||
<div className="rounded-full bg-emerald-100 px-3 py-1 text-sm font-semibold text-emerald-800">
|
||
{cartItems.reduce((sum, item) => sum + item.quantity, 0)} items
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{(['delivery', 'pickup'] as const).map((option) => (
|
||
<button
|
||
key={option}
|
||
type="button"
|
||
onClick={() => setFulfillmentMethod(option)}
|
||
className={`rounded-[1.35rem] border px-4 py-3 text-left transition ${fulfillmentMethod === option ? 'border-emerald-500 bg-emerald-50 text-emerald-900 shadow-md shadow-emerald-100' : 'border-gray-200 bg-white text-gray-700 hover:border-emerald-200 hover:bg-emerald-50/50'}`}
|
||
>
|
||
<div className="flex items-center gap-2 text-sm font-semibold capitalize">
|
||
<BaseIcon path={option === 'delivery' ? mdiTruckFastOutline : mdiStorefrontOutline} size={18} /> {option}
|
||
</div>
|
||
<p className="mt-2 text-xs text-gray-500">{option === 'delivery' ? 'Drop-off with cash on delivery' : 'Scheduled farm pickup with cash on pickup'}</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-2 block text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">{fulfillmentMethod} slot</label>
|
||
<select className={inputClassName} value={selectedSlotId} onChange={(event) => setSelectedSlotId(event.target.value)}>
|
||
<option value="">Choose a slot</option>
|
||
{selectedSlots.map((slot) => (
|
||
<option key={slot.id} value={slot.id}>{slot.name} · {formatSlotWindow(slot)}</option>
|
||
))}
|
||
</select>
|
||
{!selectedSlots.length ? (
|
||
<p className="mt-2 text-sm text-amber-700">Add a {fulfillmentMethod} slot in admin before accepting this order type.</p>
|
||
) : null}
|
||
</div>
|
||
|
||
{fulfillmentMethod === 'delivery' ? (
|
||
<div className="space-y-3 rounded-[1.5rem] border border-emerald-100 bg-emerald-50/50 p-4">
|
||
<div className="flex items-center gap-2 text-sm font-semibold text-emerald-900">
|
||
<BaseIcon path={mdiMapMarkerOutline} size={18} /> Delivery address
|
||
</div>
|
||
{addresses.map((address) => (
|
||
<label key={address.id} className={`flex cursor-pointer gap-3 rounded-2xl border px-4 py-3 text-sm transition ${selectedAddressId === address.id ? 'border-emerald-500 bg-white shadow-sm' : 'border-emerald-100 bg-white/70 hover:border-emerald-200'}`}>
|
||
<input type="radio" checked={selectedAddressId === address.id} onChange={() => setSelectedAddressId(address.id)} />
|
||
<div>
|
||
<p className="font-semibold text-gray-900">{address.label || address.recipient_name || 'Saved address'}</p>
|
||
<p className="mt-1 text-gray-600">{formatAddress(address)}</p>
|
||
</div>
|
||
</label>
|
||
))}
|
||
<label className={`flex cursor-pointer gap-3 rounded-2xl border px-4 py-3 text-sm transition ${selectedAddressId === 'new' ? 'border-emerald-500 bg-white shadow-sm' : 'border-emerald-100 bg-white/70 hover:border-emerald-200'}`}>
|
||
<input type="radio" checked={selectedAddressId === 'new'} onChange={() => setSelectedAddressId('new')} />
|
||
<div>
|
||
<p className="font-semibold text-gray-900">New address</p>
|
||
<p className="mt-1 text-gray-600">Create a fresh delivery destination while checking out.</p>
|
||
</div>
|
||
</label>
|
||
|
||
{selectedAddressId === 'new' ? (
|
||
<div className="grid gap-3 md:grid-cols-2">
|
||
<input className={inputClassName} placeholder="Label" value={newAddress.label} onChange={(event) => setNewAddress((previous) => ({ ...previous, label: event.target.value }))} />
|
||
<input className={inputClassName} placeholder="Recipient name" value={newAddress.recipient_name} onChange={(event) => setNewAddress((previous) => ({ ...previous, recipient_name: event.target.value }))} />
|
||
<input className={inputClassName} placeholder="Phone" value={newAddress.phone} onChange={(event) => setNewAddress((previous) => ({ ...previous, phone: event.target.value }))} />
|
||
<input className={inputClassName} placeholder="Line 1" value={newAddress.line1} onChange={(event) => setNewAddress((previous) => ({ ...previous, line1: event.target.value }))} />
|
||
<input className={inputClassName} placeholder="Line 2" value={newAddress.line2} onChange={(event) => setNewAddress((previous) => ({ ...previous, line2: event.target.value }))} />
|
||
<input className={inputClassName} placeholder="City" value={newAddress.city} onChange={(event) => setNewAddress((previous) => ({ ...previous, city: event.target.value }))} />
|
||
<input className={inputClassName} placeholder="State" value={newAddress.state} onChange={(event) => setNewAddress((previous) => ({ ...previous, state: event.target.value }))} />
|
||
<input className={inputClassName} placeholder="Postal code" value={newAddress.postal_code} onChange={(event) => setNewAddress((previous) => ({ ...previous, postal_code: event.target.value }))} />
|
||
<input className={`md:col-span-2 ${inputClassName}`} placeholder="Country" value={newAddress.country} onChange={(event) => setNewAddress((previous) => ({ ...previous, country: event.target.value }))} />
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<div className="rounded-[1.5rem] border border-amber-200 bg-amber-50 px-4 py-4 text-sm text-amber-900">
|
||
Pickup orders skip the address step and create a cash-on-pickup payment stub automatically.
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className="mb-2 block text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Order note</label>
|
||
<textarea className={`${inputClassName} min-h-28`} value={customerNote} onChange={(event) => setCustomerNote(event.target.value)} placeholder="Gate code, ripeness preferences, or pickup instructions" />
|
||
</div>
|
||
|
||
<div className="space-y-3 rounded-[1.5rem] border border-gray-100 bg-gray-50 p-4">
|
||
{cartItems.map((item) => (
|
||
<div key={item.id} className="flex items-center justify-between gap-3 rounded-2xl bg-white px-4 py-3 shadow-sm">
|
||
<div>
|
||
<p className="font-semibold text-gray-900">{item.name}</p>
|
||
<p className="text-xs text-gray-500">{formatCurrency(item.price)} each</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 px-2 py-1">
|
||
<button type="button" onClick={() => addToCart(item.id, -1)} className="rounded-full p-1 text-emerald-700 hover:bg-emerald-50">
|
||
<BaseIcon path={mdiMinus} size={14} />
|
||
</button>
|
||
<span className="min-w-6 text-center text-sm font-semibold text-emerald-900">{item.quantity}</span>
|
||
<button type="button" onClick={() => addToCart(item.id, 1)} className="rounded-full p-1 text-emerald-700 hover:bg-emerald-50" disabled={item.quantity >= Number(item.stock_quantity || 0)}>
|
||
<BaseIcon path={mdiPlus} size={14} />
|
||
</button>
|
||
</div>
|
||
<span className="min-w-20 text-right text-sm font-semibold text-gray-900">{formatCurrency(Number(item.price || 0) * item.quantity)}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{!cartItems.length ? (
|
||
<div className="rounded-2xl border border-dashed border-gray-200 bg-white px-4 py-6 text-center text-sm text-gray-500">
|
||
Your basket is empty. Add a few vegetables from the catalog to unlock checkout.
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="space-y-2 rounded-[1.5rem] bg-gray-950 px-5 py-4 text-white shadow-xl shadow-gray-200">
|
||
<div className="flex items-center justify-between text-sm text-white/80">
|
||
<span>Subtotal</span>
|
||
<span>{formatCurrency(pricing.subtotal)}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-sm text-white/80">
|
||
<span>Tax</span>
|
||
<span>{formatCurrency(pricing.tax)}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-sm text-white/80">
|
||
<span>{fulfillmentMethod === 'delivery' ? 'Delivery fee' : 'Pickup fee'}</span>
|
||
<span>{formatCurrency(pricing.deliveryFee)}</span>
|
||
</div>
|
||
<div className="mt-3 flex items-center justify-between border-t border-white/10 pt-3 text-lg font-semibold">
|
||
<span>Total</span>
|
||
<span>{formatCurrency(pricing.total)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{submitError ? (
|
||
<div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
||
{submitError}
|
||
</div>
|
||
) : null}
|
||
|
||
{successOrder ? (
|
||
<div className="rounded-[1.5rem] border border-emerald-200 bg-emerald-50 px-4 py-4 text-sm text-emerald-900">
|
||
<div className="flex items-start gap-3">
|
||
<div className="rounded-full bg-white p-2 text-emerald-600 shadow-sm">
|
||
<BaseIcon path={mdiCheckCircleOutline} size={18} />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<p className="font-semibold">Order {successOrder.order_number} placed successfully.</p>
|
||
<p>Your basket has been converted into a real order with payment tracking and stock adjustments.</p>
|
||
<div className="flex flex-wrap gap-3 pt-1">
|
||
<BaseButton href={`/shop/orders/${successOrder.id}`} color="success" label="View order detail" />
|
||
<BaseButton href="/orders/orders-list" color="whiteDark" outline label="Open admin orders" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
<BaseButton
|
||
color="success"
|
||
label={isSubmitting ? 'Placing order…' : canCheckout ? 'Place order' : 'Checkout unavailable'}
|
||
icon={mdiCheckCircleOutline}
|
||
className="w-full justify-center py-3 text-base font-semibold"
|
||
disabled={isSubmitting || !canCheckout}
|
||
onClick={handleCheckout}
|
||
/>
|
||
</div>
|
||
</CardBox>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</SectionMain>
|
||
</>
|
||
);
|
||
};
|
||
|
||
StorefrontPage.getLayout = function getLayout(page: ReactElement) {
|
||
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
||
};
|
||
|
||
export default StorefrontPage;
|