71aa8d3940
## Issues Fixed: ### 1. Shipping rates not recalculating when address changes ✅ **Problem:** - Change province → Rates stay the same - Query was cached incorrectly **Root Cause:** Query key only tracked country, state, postcode: ```ts queryKey: [..., shippingData.country, shippingData.state, shippingData.postcode] ``` But Rajaongkir and other plugins also need: - City (different rates per city) - Address (for some plugins) **Solution:** ```ts queryKey: [ ..., shippingData.country, shippingData.state, shippingData.city, // Added shippingData.postcode, shippingData.address_1 // Added ], staleTime: 0, // Always refetch when key changes ``` ### 2. First rate auto-selected but dropdown shows placeholder ✅ **Problem:** - Rates calculated → First rate used in total - But dropdown shows "Select shipping" - Confusing UX **Solution:** Added useEffect to auto-select first rate: ```ts useEffect(() => { if (shippingRates?.methods?.length > 0) { const firstRateId = shippingRates.methods[0].id; const currentExists = shippingRates.methods.some(m => m.id === shippingMethod); // Auto-select if no selection or current not in new rates if (!shippingMethod || !currentExists) { setShippingMethod(firstRateId); } } }, [shippingRates?.methods]); ``` ## Benefits: - ✅ Change province → Rates recalculate immediately - ✅ First rate auto-selected in dropdown - ✅ Selection cleared if no rates available - ✅ Selection preserved if still valid after recalculation ## Testing: 1. Select Jakarta → Shows JNE rates 2. Change to Bali → Rates recalculate, first auto-selected 3. Change to remote area → Different rates, first auto-selected 4. Dropdown always shows current selection
1046 lines
45 KiB
TypeScript
1046 lines
45 KiB
TypeScript
// Product search item type for API results
|
|
type ProductSearchItem = {
|
|
id: number;
|
|
name: string;
|
|
price?: number | string | null;
|
|
regular_price?: number | string | null;
|
|
sale_price?: number | string | null;
|
|
sku?: string;
|
|
stock?: number | null;
|
|
virtual?: boolean;
|
|
downloadable?: boolean;
|
|
};
|
|
import * as React from 'react';
|
|
import { makeMoneyFormatter, getStoreCurrency } from '@/lib/currency';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { api, ProductsApi, CustomersApi } from '@/lib/api';
|
|
import { cn } from '@/lib/utils';
|
|
import { __ } from '@/lib/i18n';
|
|
import { toast } from 'sonner';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { SearchableSelect } from '@/components/ui/searchable-select';
|
|
|
|
// --- Types ------------------------------------------------------------
|
|
export type CountryOption = { code: string; name: string };
|
|
export type StatesMap = Record<string, Record<string, string>>; // { US: { CA: 'California' } }
|
|
export type PaymentChannel = { id: string; title: string; meta?: any };
|
|
export type PaymentMethod = {
|
|
id: string;
|
|
title: string;
|
|
enabled?: boolean;
|
|
channels?: PaymentChannel[]; // If present, show channels instead of gateway
|
|
};
|
|
export type ShippingMethod = { id: string; title: string; cost: number };
|
|
|
|
export type LineItem = {
|
|
line_item_id?: number; // present in edit mode to update existing line
|
|
product_id: number;
|
|
qty: number;
|
|
name?: string;
|
|
price?: number;
|
|
virtual?: boolean;
|
|
downloadable?: boolean;
|
|
regular_price?: number;
|
|
sale_price?: number | null;
|
|
};
|
|
|
|
export type ExistingOrderDTO = {
|
|
id: number;
|
|
status?: string;
|
|
billing?: any;
|
|
shipping?: any;
|
|
items?: LineItem[];
|
|
payment_method?: string;
|
|
payment_method_id?: string;
|
|
shipping_method?: string;
|
|
shipping_method_id?: string;
|
|
customer_note?: string;
|
|
currency?: string;
|
|
currency_symbol?: string;
|
|
};
|
|
|
|
export type OrderPayload = {
|
|
status: string;
|
|
billing: any;
|
|
shipping?: any;
|
|
items?: LineItem[];
|
|
payment_method?: string;
|
|
shipping_method?: string;
|
|
customer_note?: string;
|
|
register_as_member?: boolean;
|
|
coupons?: string[];
|
|
};
|
|
|
|
type Props = {
|
|
mode: 'create' | 'edit';
|
|
initial?: ExistingOrderDTO | null;
|
|
countries: CountryOption[];
|
|
states: StatesMap;
|
|
defaultCountry?: string;
|
|
payments?: PaymentMethod[];
|
|
shippings?: ShippingMethod[];
|
|
onSubmit: (payload: OrderPayload) => Promise<void> | void;
|
|
className?: string;
|
|
currency?: string;
|
|
currencySymbol?: string;
|
|
leftTop?: React.ReactNode;
|
|
rightTop?: React.ReactNode;
|
|
itemsEditable?: boolean;
|
|
showCoupons?: boolean;
|
|
formRef?: React.RefObject<HTMLFormElement>;
|
|
hideSubmitButton?: boolean;
|
|
};
|
|
|
|
const STATUS_LIST = ['pending','processing','on-hold','completed','cancelled','refunded','failed'];
|
|
|
|
// --- Component --------------------------------------------------------
|
|
export default function OrderForm({
|
|
mode,
|
|
initial,
|
|
countries,
|
|
states,
|
|
defaultCountry,
|
|
payments = [],
|
|
shippings = [],
|
|
onSubmit,
|
|
className,
|
|
leftTop: _leftTop,
|
|
rightTop,
|
|
itemsEditable = true,
|
|
showCoupons = true,
|
|
currency,
|
|
currencySymbol,
|
|
formRef,
|
|
hideSubmitButton = false,
|
|
}: Props) {
|
|
const oneCountryOnly = countries.length === 1;
|
|
const firstCountry = countries[0]?.code || 'US';
|
|
const baseCountry = (defaultCountry && countries.find(c => c.code === defaultCountry)?.code) || firstCountry;
|
|
|
|
// Billing
|
|
const [bFirst, setBFirst] = React.useState(initial?.billing?.first_name || '');
|
|
const [bLast, setBLast] = React.useState(initial?.billing?.last_name || '');
|
|
const [bEmail, setBEmail] = React.useState(initial?.billing?.email || '');
|
|
const [bPhone, setBPhone] = React.useState(initial?.billing?.phone || '');
|
|
const [bAddr1, setBAddr1] = React.useState(initial?.billing?.address_1 || '');
|
|
const [bCity, setBCity] = React.useState(initial?.billing?.city || '');
|
|
const [bPost, setBPost] = React.useState(initial?.billing?.postcode || '');
|
|
const [bCountry, setBCountry] = React.useState(initial?.billing?.country || baseCountry);
|
|
const [bState, setBState] = React.useState(initial?.billing?.state || '');
|
|
|
|
// Shipping toggle + dynamic fields
|
|
const [shipDiff, setShipDiff] = React.useState(Boolean(initial?.shipping && !isEmptyAddress(initial?.shipping)));
|
|
const [shippingData, setShippingData] = React.useState<Record<string, any>>(initial?.shipping || {});
|
|
|
|
// If store sells to a single country, force-select it for billing & shipping
|
|
React.useEffect(() => {
|
|
if (oneCountryOnly) {
|
|
const only = countries[0]?.code || '';
|
|
if (only && bCountry !== only) setBCountry(only);
|
|
}
|
|
}, [oneCountryOnly, countries, bCountry]);
|
|
|
|
React.useEffect(() => {
|
|
if (oneCountryOnly) {
|
|
const only = countries[0]?.code || '';
|
|
if (shipDiff) {
|
|
if (only && shippingData.country !== only) {
|
|
setShippingData({...shippingData, country: only});
|
|
}
|
|
} else {
|
|
// keep shipping synced to billing when not different
|
|
setShippingData({...shippingData, country: bCountry});
|
|
}
|
|
}
|
|
}, [oneCountryOnly, countries, shipDiff, bCountry, shippingData.country]);
|
|
|
|
// Order meta
|
|
const [status, setStatus] = React.useState(initial?.status || 'pending');
|
|
const [paymentMethod, setPaymentMethod] = React.useState(initial?.payment_method_id || initial?.payment_method || '');
|
|
const [shippingMethod, setShippingMethod] = React.useState(initial?.shipping_method_id || initial?.shipping_method || '');
|
|
const [note, setNote] = React.useState(initial?.customer_note || '');
|
|
const [registerAsMember, setRegisterAsMember] = React.useState(false);
|
|
const [selectedCustomerId, setSelectedCustomerId] = React.useState<number | null>(null);
|
|
const [submitting, setSubmitting] = React.useState(false);
|
|
|
|
const [items, setItems] = React.useState<LineItem[]>(initial?.items || []);
|
|
const [couponInput, setCouponInput] = React.useState('');
|
|
const [validatedCoupons, setValidatedCoupons] = React.useState<any[]>([]);
|
|
const [couponValidating, setCouponValidating] = React.useState(false);
|
|
|
|
// Fetch dynamic checkout fields based on cart items
|
|
const { data: checkoutFields } = useQuery({
|
|
queryKey: ['checkout-fields', items.map(i => ({ product_id: i.product_id, qty: i.qty }))],
|
|
queryFn: async () => {
|
|
if (items.length === 0) return null;
|
|
return api.post('/checkout/fields', {
|
|
items: items.map(i => ({ product_id: i.product_id, qty: i.qty })),
|
|
});
|
|
},
|
|
enabled: items.length > 0,
|
|
});
|
|
|
|
// Calculate shipping rates dynamically
|
|
const { data: shippingRates, isLoading: shippingLoading } = useQuery({
|
|
queryKey: ['shipping-rates', items.map(i => ({ product_id: i.product_id, qty: i.qty })), shippingData.country, shippingData.state, shippingData.city, shippingData.postcode, shippingData.address_1],
|
|
queryFn: async () => {
|
|
if (!shippingData.country) return null;
|
|
return api.post('/shipping/calculate', {
|
|
items: items.map(i => ({ product_id: i.product_id, qty: i.qty })),
|
|
shipping: shippingData,
|
|
});
|
|
},
|
|
enabled: !!shippingData.country && items.length > 0,
|
|
staleTime: 0, // Always refetch when query key changes
|
|
});
|
|
|
|
// Calculate order preview with taxes
|
|
const { data: orderPreview, isLoading: previewLoading } = useQuery({
|
|
queryKey: ['order-preview', items.map(i => ({ product_id: i.product_id, qty: i.qty })), bCountry, bState, bPost, bCity, shippingData.country, shippingData.state, shippingData.city, shippingData.postcode, shippingMethod, validatedCoupons.map(c => c.code)],
|
|
queryFn: async () => {
|
|
if (items.length === 0) return null;
|
|
return api.post('/orders/preview', {
|
|
items: items.map(i => ({ product_id: i.product_id, qty: i.qty })),
|
|
billing: { country: bCountry, state: bState, postcode: bPost, city: bCity },
|
|
shipping: shipDiff ? shippingData : undefined,
|
|
shipping_method: shippingMethod,
|
|
coupons: validatedCoupons.map(c => c.code),
|
|
});
|
|
},
|
|
enabled: items.length > 0 && !!bCountry,
|
|
staleTime: 0, // Always refetch when query key changes
|
|
});
|
|
|
|
// --- Product search for Add Item ---
|
|
const [searchQ, setSearchQ] = React.useState('');
|
|
const [customerSearchQ, setCustomerSearchQ] = React.useState('');
|
|
const productsQ = useQuery({
|
|
queryKey: ['products', searchQ],
|
|
queryFn: () => ProductsApi.search(searchQ),
|
|
enabled: !!searchQ,
|
|
});
|
|
|
|
const customersQ = useQuery({
|
|
queryKey: ['customers', customerSearchQ],
|
|
queryFn: () => CustomersApi.search(customerSearchQ),
|
|
enabled: !!customerSearchQ && customerSearchQ.length >= 2,
|
|
});
|
|
const raw = productsQ.data as any;
|
|
const products: ProductSearchItem[] = Array.isArray(raw)
|
|
? raw
|
|
: Array.isArray(raw?.data)
|
|
? raw.data
|
|
: Array.isArray(raw?.rows)
|
|
? raw.rows
|
|
: [];
|
|
|
|
const customersRaw = customersQ.data as any;
|
|
const customers: any[] = Array.isArray(customersRaw) ? customersRaw : [];
|
|
|
|
const itemsCount = React.useMemo(
|
|
() => items.reduce((n, it) => n + (Number(it.qty) || 0), 0),
|
|
[items]
|
|
);
|
|
const itemsTotal = React.useMemo(
|
|
() => items.reduce((sum, it) => sum + (Number(it.qty) || 0) * (Number(it.price) || 0), 0),
|
|
[items]
|
|
);
|
|
|
|
// Calculate shipping cost
|
|
const shippingCost = React.useMemo(() => {
|
|
if (!shippingMethod) return 0;
|
|
const method = shippings.find(s => s.id === shippingMethod);
|
|
return method ? Number(method.cost) || 0 : 0;
|
|
}, [shippingMethod, shippings]);
|
|
|
|
// Calculate discount from validated coupons
|
|
const couponDiscount = React.useMemo(() => {
|
|
return validatedCoupons.reduce((sum, c) => sum + (c.discount_amount || 0), 0);
|
|
}, [validatedCoupons]);
|
|
|
|
// Calculate order total (items + shipping - coupons)
|
|
const orderTotal = React.useMemo(() => {
|
|
return Math.max(0, itemsTotal + shippingCost - couponDiscount);
|
|
}, [itemsTotal, shippingCost, couponDiscount]);
|
|
|
|
// Validate coupon
|
|
const validateCoupon = async (code: string) => {
|
|
if (!code.trim()) return;
|
|
|
|
// Check if already added
|
|
if (validatedCoupons.some(c => c.code.toLowerCase() === code.toLowerCase())) {
|
|
toast.error(__('Coupon already added'));
|
|
return;
|
|
}
|
|
|
|
setCouponValidating(true);
|
|
try {
|
|
const response = await api.post('/coupons/validate', {
|
|
code: code.trim(),
|
|
subtotal: itemsTotal,
|
|
});
|
|
|
|
if (response.valid) {
|
|
setValidatedCoupons([...validatedCoupons, response]);
|
|
setCouponInput('');
|
|
toast.success(`${__('Coupon applied')}: ${response.code}`);
|
|
} else {
|
|
toast.error(response.error || __('Invalid coupon'));
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error?.message || __('Failed to validate coupon'));
|
|
} finally {
|
|
setCouponValidating(false);
|
|
}
|
|
};
|
|
|
|
const removeCoupon = (code: string) => {
|
|
setValidatedCoupons(validatedCoupons.filter(c => c.code !== code));
|
|
};
|
|
|
|
// Auto-select first shipping rate when rates change
|
|
React.useEffect(() => {
|
|
if (shippingRates?.methods && shippingRates.methods.length > 0) {
|
|
const firstRateId = shippingRates.methods[0].id;
|
|
// Only auto-select if no method selected or current method not in new rates
|
|
const currentMethodExists = shippingRates.methods.some((m: any) => m.id === shippingMethod);
|
|
if (!shippingMethod || !currentMethodExists) {
|
|
setShippingMethod(firstRateId);
|
|
}
|
|
} else if (shippingRates?.methods && shippingRates.methods.length === 0) {
|
|
// Clear selection if no rates available
|
|
setShippingMethod('');
|
|
}
|
|
}, [shippingRates?.methods]);
|
|
|
|
// Check if cart has physical products
|
|
const hasPhysicalProduct = React.useMemo(
|
|
() => items.some(item => {
|
|
// Check item's stored metadata first
|
|
if (typeof item.virtual !== 'undefined' || typeof item.downloadable !== 'undefined') {
|
|
return !item.virtual && !item.downloadable;
|
|
}
|
|
// Fallback: check products array (for search results)
|
|
const product = products.find(p => p.id === item.product_id);
|
|
return product ? !product.virtual && !product.downloadable : true; // Default to physical if unknown
|
|
}),
|
|
[items, products]
|
|
);
|
|
|
|
// --- Currency-aware formatting for unit prices and totals ---
|
|
const storeCur = getStoreCurrency();
|
|
const currencyCode = currency || initial?.currency || storeCur.currency;
|
|
const symbol = initial?.currency_symbol ?? currencySymbol ?? storeCur.symbol;
|
|
const money = React.useMemo(() => makeMoneyFormatter({ currency: currencyCode, symbol }), [currencyCode, symbol]);
|
|
|
|
// Keep shipping country synced to billing when unchecked
|
|
React.useEffect(() => {
|
|
if (!shipDiff) setShippingData({...shippingData, country: bCountry});
|
|
}, [shipDiff, bCountry]);
|
|
|
|
// Clamp states when country changes
|
|
React.useEffect(() => {
|
|
if (bState && !states[bCountry]?.[bState]) setBState('');
|
|
}, [bCountry]);
|
|
React.useEffect(() => {
|
|
if (shippingData.state && !states[shippingData.country]?.[shippingData.state]) {
|
|
setShippingData({...shippingData, state: ''});
|
|
}
|
|
}, [shippingData.country]);
|
|
|
|
const countryOptions = countries.map(c => ({ value: c.code, label: `${c.name} (${c.code})` }));
|
|
const bStateOptions = Object.entries(states[bCountry] || {}).map(([code, name]) => ({ value: code, label: name }));
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
|
|
// For virtual-only products, don't send address fields
|
|
const billingData: any = {
|
|
first_name: bFirst,
|
|
last_name: bLast,
|
|
email: bEmail,
|
|
phone: bPhone,
|
|
};
|
|
|
|
// Only add address fields for physical products
|
|
if (hasPhysicalProduct) {
|
|
billingData.address_1 = bAddr1;
|
|
billingData.city = bCity;
|
|
billingData.state = bState;
|
|
billingData.postcode = bPost;
|
|
billingData.country = bCountry;
|
|
}
|
|
|
|
const payload: OrderPayload = {
|
|
status,
|
|
billing: billingData,
|
|
shipping: shipDiff && hasPhysicalProduct ? shippingData : undefined,
|
|
payment_method: paymentMethod || undefined,
|
|
shipping_method: shippingMethod || undefined,
|
|
customer_note: note || undefined,
|
|
register_as_member: registerAsMember,
|
|
items: itemsEditable ? items : undefined,
|
|
coupons: showCoupons ? validatedCoupons.map(c => c.code) : undefined,
|
|
};
|
|
|
|
try {
|
|
setSubmitting(true);
|
|
await onSubmit(payload);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form ref={formRef} onSubmit={handleSubmit} className={cn('grid grid-cols-1 lg:grid-cols-3 gap-6', className)}>
|
|
{/* Left: Order details */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Items and Coupons */}
|
|
{(mode === 'create' || showCoupons || itemsEditable) && (
|
|
<div className="space-y-4">
|
|
{/* Items */}
|
|
<div className="rounded border p-4 space-y-3">
|
|
<div className="font-medium flex items-center justify-between">
|
|
<span>{__('Items')}</span>
|
|
{itemsEditable ? (
|
|
<div className="flex items-center gap-2">
|
|
<SearchableSelect
|
|
options={
|
|
products.map((p: ProductSearchItem) => ({
|
|
value: String(p.id),
|
|
label: (
|
|
<div className="leading-tight">
|
|
<div className="font-medium">{p.name}</div>
|
|
{(typeof p.price !== 'undefined' && p.price !== null && !Number.isNaN(Number(p.price))) && (
|
|
<div className="text-xs text-muted-foreground">
|
|
{p.sale_price ? (
|
|
<>
|
|
{money(Number(p.sale_price))} <span className="line-through">{money(Number(p.regular_price))}</span>
|
|
</>
|
|
) : money(Number(p.price))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
),
|
|
searchText: p.name,
|
|
product: p,
|
|
}))
|
|
}
|
|
value={undefined}
|
|
onChange={(val: string) => {
|
|
const p = products.find((prod: ProductSearchItem) => String(prod.id) === val);
|
|
if (!p) return;
|
|
if (items.find(x => x.product_id === p.id)) return;
|
|
setItems(prev => [
|
|
...prev,
|
|
{
|
|
product_id: p.id,
|
|
name: p.name,
|
|
price: Number(p.price) || 0,
|
|
qty: 1,
|
|
virtual: p.virtual,
|
|
downloadable: p.downloadable,
|
|
}
|
|
]);
|
|
setSearchQ('');
|
|
}}
|
|
placeholder={__('Search products…')}
|
|
search={searchQ}
|
|
onSearch={setSearchQ}
|
|
disabled={!itemsEditable}
|
|
showCheckIndicator={false}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs opacity-70">({__('locked')})</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Desktop/table view */}
|
|
<div className="hidden md:block">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left border-b">
|
|
<th className="px-2 py-1">{__('Product')}</th>
|
|
<th className="px-2 py-1 w-24">{__('Qty')}</th>
|
|
<th className="px-2 py-1 w-16"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((it, idx) => (
|
|
<tr key={it.product_id} className="border-b last:border-0">
|
|
<td className="px-2 py-1">
|
|
<div>
|
|
<div>{it.name || `Product #${it.product_id}`}</div>
|
|
{typeof it.price === 'number' && (
|
|
<div className="text-xs opacity-60">
|
|
{/* Show strike-through regular price if on sale */}
|
|
{(() => {
|
|
// Check item's own data first (for edit mode)
|
|
if (it.sale_price && it.regular_price && it.sale_price < it.regular_price) {
|
|
return (
|
|
<>
|
|
<span className="line-through text-gray-400 mr-1">{money(Number(it.regular_price))}</span>
|
|
<span className="text-red-600 font-semibold">{money(Number(it.sale_price))}</span>
|
|
</>
|
|
);
|
|
}
|
|
// Fallback: check products array (for create mode)
|
|
const product = products.find(p => p.id === it.product_id);
|
|
if (product && product.sale_price && product.regular_price && product.sale_price < product.regular_price) {
|
|
return (
|
|
<>
|
|
<span className="text-red-600 font-semibold">{money(Number(product.sale_price))}</span>
|
|
<span className="line-through text-gray-400 ml-1">{money(Number(product.regular_price))}</span>
|
|
</>
|
|
);
|
|
}
|
|
return money(Number(it.price));
|
|
})()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-2 py-1">
|
|
<Input
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
min={1}
|
|
className="ui-ctrl w-24 text-center"
|
|
value={String(it.qty)}
|
|
onChange={(e) => {
|
|
if (!itemsEditable) return;
|
|
const raw = e.target.value.replace(/[^0-9]/g, '');
|
|
const v = Math.max(1, parseInt(raw || '1', 10));
|
|
setItems(prev => prev.map((x, i) => i === idx ? { ...x, qty: v } : x));
|
|
}}
|
|
disabled={!itemsEditable}
|
|
/>
|
|
</td>
|
|
<td className="px-2 py-1 text-right">
|
|
{itemsEditable && (
|
|
<button
|
|
className="text-red-600"
|
|
type="button"
|
|
onClick={() => setItems(prev => prev.filter((x) => x.product_id !== it.product_id))}
|
|
>
|
|
{__('Remove')}
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{items.length === 0 && (
|
|
<tr>
|
|
<td className="px-2 py-4 text-center opacity-70" colSpan={3}>{__('No items yet')}</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Mobile/card view */}
|
|
<div className="md:hidden divide-y">
|
|
{items.length ? (
|
|
items.map((it, idx) => (
|
|
<div key={it.product_id} className="py-3">
|
|
<div className="px-1 flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="font-medium truncate">{it.name || `Product #${it.product_id}`}</div>
|
|
{typeof it.price === 'number' && (
|
|
<div className="text-xs opacity-60">{money(Number(it.price))}</div>
|
|
)}
|
|
</div>
|
|
<div className="text-right">
|
|
{itemsEditable && (
|
|
<button
|
|
className="text-red-600 text-xs"
|
|
type="button"
|
|
onClick={() => setItems(prev => prev.filter((x) => x.product_id !== it.product_id))}
|
|
>
|
|
{__('Remove')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 px-1 grid grid-cols-3 gap-2 items-center">
|
|
<div className="col-span-2 text-sm opacity-70">{__('Quantity')}</div>
|
|
<div>
|
|
<Input
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
min={1}
|
|
className="ui-ctrl w-full text-center"
|
|
value={String(it.qty)}
|
|
onChange={(e) => {
|
|
if (!itemsEditable) return;
|
|
const raw = e.target.value.replace(/[^0-9]/g, '');
|
|
const v = Math.max(1, parseInt(raw || '1', 10));
|
|
setItems(prev => prev.map((x, i) => i === idx ? { ...x, qty: v } : x));
|
|
}}
|
|
disabled={!itemsEditable}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="px-2 py-4 text-center opacity-70">{__('No items yet')}</div>
|
|
)}
|
|
</div>
|
|
<div className="rounded-md border px-3 py-2 text-sm bg-white/60 space-y-1.5">
|
|
<div className="flex justify-between">
|
|
<span className="opacity-70">{__('Items')}</span>
|
|
<span>{itemsCount}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="opacity-70">{__('Subtotal')}</span>
|
|
<span>
|
|
{orderPreview ? money(orderPreview.subtotal) : itemsTotal ? money(itemsTotal) : '—'}
|
|
</span>
|
|
</div>
|
|
{(orderPreview?.shipping_total > 0 || shippingCost > 0) && (
|
|
<div className="flex justify-between">
|
|
<span className="opacity-70">{__('Shipping')}</span>
|
|
<span>{orderPreview ? money(orderPreview.shipping_total) : money(shippingCost)}</span>
|
|
</div>
|
|
)}
|
|
{(orderPreview?.discount_total > 0 || couponDiscount > 0) && (
|
|
<div className="flex justify-between text-green-700">
|
|
<span>{__('Discount')}</span>
|
|
<span>-{orderPreview ? money(orderPreview.discount_total) : money(couponDiscount)}</span>
|
|
</div>
|
|
)}
|
|
{orderPreview?.total_tax > 0 && (
|
|
<div className="flex justify-between">
|
|
<span className="opacity-70">{__('Tax')}</span>
|
|
<span>{money(orderPreview.total_tax)}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between pt-1.5 border-t font-medium">
|
|
<span>{__('Total')}</span>
|
|
<span>
|
|
{previewLoading ? (
|
|
<span className="opacity-50">{__('Calculating...')}</span>
|
|
) : orderPreview ? (
|
|
money(orderPreview.total)
|
|
) : (
|
|
money(orderTotal)
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Coupons */}
|
|
{showCoupons && (
|
|
<div className="rounded border p-4 space-y-3">
|
|
<div className="font-medium flex items-center justify-between">
|
|
<span>{__('Coupons')}</span>
|
|
{!itemsEditable && (
|
|
<span className="text-xs opacity-70">({__('locked')})</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Coupon Input */}
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={couponInput}
|
|
onChange={(e) => setCouponInput(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
validateCoupon(couponInput);
|
|
}
|
|
}}
|
|
placeholder={__('Enter coupon code')}
|
|
disabled={!itemsEditable || couponValidating}
|
|
className="flex-1"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={() => validateCoupon(couponInput)}
|
|
disabled={!itemsEditable || !couponInput.trim() || couponValidating}
|
|
size="sm"
|
|
>
|
|
{couponValidating ? __('Validating...') : __('Apply')}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Applied Coupons */}
|
|
{validatedCoupons.length > 0 && (
|
|
<div className="space-y-2">
|
|
{validatedCoupons.map((coupon) => (
|
|
<div key={coupon.code} className="flex items-center justify-between p-2 bg-green-50 border border-green-200 rounded text-sm">
|
|
<div className="flex-1">
|
|
<div className="font-medium text-green-800">{coupon.code}</div>
|
|
{coupon.description && (
|
|
<div className="text-xs text-green-700 opacity-80">{coupon.description}</div>
|
|
)}
|
|
<div className="text-xs text-green-700 mt-1">
|
|
{coupon.discount_type === 'percent' && `${coupon.amount}% off`}
|
|
{coupon.discount_type === 'fixed_cart' && `${money(coupon.amount)} off`}
|
|
{coupon.discount_type === 'fixed_product' && `${money(coupon.amount)} off per item`}
|
|
{' · '}
|
|
<span className="font-medium">{__('Discount')}: {money(coupon.discount_amount)}</span>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeCoupon(coupon.code)}
|
|
disabled={!itemsEditable}
|
|
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
|
>
|
|
{__('Remove')}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-[11px] opacity-70">
|
|
{__('Enter coupon code and click Apply to validate and calculate discount')}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{/* Billing address - only show full address for physical products */}
|
|
<div className="rounded border p-4 space-y-3">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-sm font-medium">{__('Billing address')}</h3>
|
|
{mode === 'create' && (
|
|
<SearchableSelect
|
|
options={customers.map((c: any) => ({
|
|
value: String(c.id),
|
|
label: (
|
|
<div className="leading-tight">
|
|
<div className="font-medium">{c.name || c.email}</div>
|
|
<div className="text-xs text-muted-foreground">{c.email}</div>
|
|
</div>
|
|
),
|
|
searchText: `${c.name} ${c.email}`,
|
|
customer: c,
|
|
}))}
|
|
value={undefined}
|
|
onChange={async (val: string) => {
|
|
const customer = customers.find((c: any) => String(c.id) === val);
|
|
if (!customer) return;
|
|
|
|
// Fetch full customer data
|
|
try {
|
|
const data = await CustomersApi.searchByEmail(customer.email);
|
|
if (data.found && data.billing) {
|
|
// Always fill name, email, phone
|
|
setBFirst(data.billing.first_name || data.first_name || '');
|
|
setBLast(data.billing.last_name || data.last_name || '');
|
|
setBEmail(data.email || '');
|
|
setBPhone(data.billing.phone || '');
|
|
|
|
// Only fill address fields if cart has physical products
|
|
if (hasPhysicalProduct) {
|
|
setBAddr1(data.billing.address_1 || '');
|
|
setBCity(data.billing.city || '');
|
|
setBPost(data.billing.postcode || '');
|
|
setBCountry(data.billing.country || bCountry);
|
|
setBState(data.billing.state || '');
|
|
|
|
// Autofill shipping if available
|
|
if (data.shipping && data.shipping.address_1) {
|
|
setShipDiff(true);
|
|
setShippingData({
|
|
first_name: data.shipping.first_name || '',
|
|
last_name: data.shipping.last_name || '',
|
|
address_1: data.shipping.address_1 || '',
|
|
city: data.shipping.city || '',
|
|
postcode: data.shipping.postcode || '',
|
|
country: data.shipping.country || bCountry,
|
|
state: data.shipping.state || '',
|
|
});
|
|
}
|
|
}
|
|
|
|
// Mark customer as selected (hide register checkbox)
|
|
setSelectedCustomerId(data.user_id);
|
|
setRegisterAsMember(false);
|
|
}
|
|
} catch (e) {
|
|
console.error('Customer autofill error:', e);
|
|
}
|
|
|
|
setCustomerSearchQ('');
|
|
}}
|
|
onSearch={setCustomerSearchQ}
|
|
placeholder={__('Search customer...')}
|
|
className="w-64"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div>
|
|
<Label>{__('First name')}</Label>
|
|
<Input className="rounded-md border px-3 py-2" value={bFirst} onChange={e=>setBFirst(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<Label>{__('Last name')}</Label>
|
|
<Input className="rounded-md border px-3 py-2" value={bLast} onChange={e=>setBLast(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<Label>{__('Email')}</Label>
|
|
<Input
|
|
inputMode="email"
|
|
autoComplete="email"
|
|
className="rounded-md border px-3 py-2 appearance-none"
|
|
value={bEmail}
|
|
onChange={e=>setBEmail(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>{__('Phone')}</Label>
|
|
<Input className="rounded-md border px-3 py-2" value={bPhone} onChange={e=>setBPhone(e.target.value)} />
|
|
</div>
|
|
{/* Only show full address fields for physical products */}
|
|
{hasPhysicalProduct && (
|
|
<>
|
|
<div className="md:col-span-2">
|
|
<Label>{__('Address')}</Label>
|
|
<Input className="rounded-md border px-3 py-2" value={bAddr1} onChange={e=>setBAddr1(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<Label>{__('City')}</Label>
|
|
<Input className="rounded-md border px-3 py-2" value={bCity} onChange={e=>setBCity(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<Label>{__('Postcode')}</Label>
|
|
<Input className="rounded-md border px-3 py-2" value={bPost} onChange={e=>setBPost(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<Label>{__('Country')}</Label>
|
|
<SearchableSelect
|
|
options={countryOptions}
|
|
value={bCountry}
|
|
onChange={setBCountry}
|
|
placeholder={countries.length ? __('Select country') : __('No countries')}
|
|
disabled={oneCountryOnly}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>{__('State/Province')}</Label>
|
|
<Select value={bState} onValueChange={setBState}>
|
|
<SelectTrigger className="w-full"><SelectValue placeholder={__('Select state')} /></SelectTrigger>
|
|
<SelectContent className="max-h-64">
|
|
{bStateOptions.length ? bStateOptions.map(o => (
|
|
<SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
|
|
)) : (
|
|
<SelectItem value="__none__" disabled>{__('N/A')}</SelectItem>
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conditional: Only show address fields and shipping for physical products */}
|
|
{!hasPhysicalProduct && (
|
|
<div className="rounded border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800">
|
|
{__('Digital products only - shipping not required')}
|
|
</div>
|
|
)}
|
|
|
|
{/* Shipping toggle */}
|
|
{hasPhysicalProduct && (
|
|
<div className="pt-2 mt-4">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Checkbox id="shipDiff" checked={shipDiff} onCheckedChange={(v)=> setShipDiff(Boolean(v))} />
|
|
<Label htmlFor="shipDiff" className="leading-none">{__('Ship to a different address')}</Label>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Shipping address - Dynamic Fields */}
|
|
{hasPhysicalProduct && shipDiff && checkoutFields?.fields && (
|
|
<div className="rounded border p-4 space-y-3 mt-4">
|
|
<h3 className="text-sm font-medium">{__('Shipping address')}</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{checkoutFields.fields
|
|
.filter((f: any) => f.fieldset === 'shipping' && !f.hidden)
|
|
.sort((a: any, b: any) => (a.priority || 0) - (b.priority || 0))
|
|
.map((field: any) => {
|
|
const isWide = ['address_1', 'address_2'].includes(field.key.replace('shipping_', ''));
|
|
const fieldKey = field.key.replace('shipping_', '');
|
|
|
|
return (
|
|
<div key={field.key} className={isWide ? 'md:col-span-2' : ''}>
|
|
<Label>
|
|
{field.label}
|
|
{field.required && <span className="text-destructive ml-1">*</span>}
|
|
</Label>
|
|
{field.type === 'select' && field.options ? (
|
|
<Select
|
|
value={shippingData[fieldKey] || ''}
|
|
onValueChange={(v) => setShippingData({...shippingData, [fieldKey]: v})}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder={field.placeholder || field.label} />
|
|
</SelectTrigger>
|
|
<SelectContent className="max-h-64">
|
|
{Object.entries(field.options).map(([value, label]: [string, any]) => (
|
|
<SelectItem key={value} value={value}>{label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : field.key === 'shipping_country' ? (
|
|
<SearchableSelect
|
|
options={countryOptions}
|
|
value={shippingData.country || ''}
|
|
onChange={(v) => setShippingData({...shippingData, country: v})}
|
|
placeholder={field.placeholder || __('Select country')}
|
|
disabled={oneCountryOnly}
|
|
/>
|
|
) : field.type === 'textarea' ? (
|
|
<Textarea
|
|
value={shippingData[fieldKey] || ''}
|
|
onChange={(e) => setShippingData({...shippingData, [fieldKey]: e.target.value})}
|
|
placeholder={field.placeholder}
|
|
required={field.required}
|
|
/>
|
|
) : (
|
|
<Input
|
|
type={field.type === 'email' ? 'email' : field.type === 'tel' ? 'tel' : 'text'}
|
|
value={shippingData[fieldKey] || ''}
|
|
onChange={(e) => setShippingData({...shippingData, [fieldKey]: e.target.value})}
|
|
placeholder={field.placeholder}
|
|
required={field.required}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right: Settings + Actions */}
|
|
<aside className="lg:col-span-1">
|
|
<div className="sticky top-4 space-y-4">
|
|
{rightTop}
|
|
<div className="rounded border p-4 space-y-3">
|
|
<div className="font-medium">{__('Order Settings')}</div>
|
|
<div>
|
|
<Label>{__('Status')}</Label>
|
|
<Select value={status} onValueChange={setStatus}>
|
|
<SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
{STATUS_LIST.map((s) => (
|
|
<SelectItem key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label>{__('Payment method')}</Label>
|
|
<Select value={paymentMethod} onValueChange={setPaymentMethod}>
|
|
<SelectTrigger className="w-full"><SelectValue placeholder={payments.length ? __('Select payment') : __('No methods')} /></SelectTrigger>
|
|
<SelectContent>
|
|
{payments.map(p => {
|
|
// If gateway has channels, show channels instead of gateway
|
|
if (p.channels && p.channels.length > 0) {
|
|
return p.channels.map((channel: any) => (
|
|
<SelectItem key={channel.id} value={channel.id}>
|
|
{channel.title}
|
|
</SelectItem>
|
|
));
|
|
}
|
|
// Otherwise show gateway
|
|
return (
|
|
<SelectItem key={p.id} value={p.id}>{p.title}</SelectItem>
|
|
);
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{/* Only show shipping method for physical products */}
|
|
{hasPhysicalProduct && (
|
|
<div>
|
|
<Label>{__('Shipping method')}</Label>
|
|
{shippingLoading ? (
|
|
<div className="text-sm text-muted-foreground py-2">{__('Calculating rates...')}</div>
|
|
) : shippingRates?.methods && shippingRates.methods.length > 0 ? (
|
|
<Select value={shippingMethod} onValueChange={setShippingMethod}>
|
|
<SelectTrigger className="w-full"><SelectValue placeholder={__('Select shipping')} /></SelectTrigger>
|
|
<SelectContent>
|
|
{shippingRates.methods.map((rate: any) => (
|
|
<SelectItem key={rate.id} value={rate.id}>
|
|
{rate.label} - {money(rate.cost)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : shippingData.country ? (
|
|
<div className="text-sm text-muted-foreground py-2">{__('No shipping methods available')}</div>
|
|
) : (
|
|
<Select value={shippingMethod} onValueChange={setShippingMethod}>
|
|
<SelectTrigger className="w-full"><SelectValue placeholder={shippings.length ? __('Select shipping') : __('No methods')} /></SelectTrigger>
|
|
<SelectContent>
|
|
{shippings.map(s => (
|
|
<SelectItem key={s.id} value={s.id}>{s.title}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded border p-4 space-y-2">
|
|
<Label>{__('Customer note (optional)')}</Label>
|
|
<Textarea value={note} onChange={e=>setNote(e.target.value)} placeholder={__('Write a note for this order…')} />
|
|
</div>
|
|
|
|
{/* Register as member checkbox (only for new orders and when no existing customer selected) */}
|
|
{mode === 'create' && !selectedCustomerId && (
|
|
<div className="rounded border p-4">
|
|
<div className="flex items-start gap-2">
|
|
<Checkbox
|
|
id="register_member"
|
|
checked={registerAsMember}
|
|
onCheckedChange={(v) => setRegisterAsMember(Boolean(v))}
|
|
/>
|
|
<div className="flex-1">
|
|
<Label htmlFor="register_member" className="cursor-pointer">
|
|
{__('Register customer as site member')}
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{__('Customer will receive login credentials via email and can track their orders.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!hideSubmitButton && (
|
|
<Button type="submit" disabled={submitting} className="w-full">
|
|
{submitting ? (mode === 'edit' ? __('Saving…') : __('Creating…')) : (mode === 'edit' ? __('Save changes') : __('Create order'))}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function isEmptyAddress(a: any) {
|
|
if (!a) return true;
|
|
const keys = ['first_name','last_name','address_1','city','state','postcode','country'];
|
|
return keys.every(k => !a[k]);
|
|
} |