fix: checkout improvements
1. Hidden fields now respected in SPA
- Added isFieldHidden helper to check if PHP sets type to 'hidden'
- Country/state/city fields conditionally rendered based on API response
- Set default country value for hidden country fields (Indonesia-only stores)
2. Coupon discount now shows correct amount
- Added calculate_totals() before reading discount
- Changed coupons response to include {code, discount, type} per coupon
- Added discount_total at root level for frontend compatibility
3. Order details page now shows shipping info and AWB tracking
- Added shipping_lines, tracking_number, tracking_url to Order interface
- Added Shipping Method section with courier name and cost
- Added AWB tracking section for processing/completed orders
- Track Shipment button with link to tracking URL
This commit is contained in:
Dwindi Ramadhana
@@ -12,6 +12,13 @@ interface OrderItem {
|
||||
image?: string;
|
||||
}
|
||||
|
||||
interface ShippingLine {
|
||||
id: number;
|
||||
method_title: string;
|
||||
method_id: string;
|
||||
total: string;
|
||||
}
|
||||
|
||||
interface Order {
|
||||
id: number;
|
||||
order_number: string;
|
||||
@@ -26,6 +33,11 @@ interface Order {
|
||||
shipping: any;
|
||||
payment_method_title: string;
|
||||
needs_shipping: boolean;
|
||||
shipping_lines?: ShippingLine[];
|
||||
// Tracking info (may be added by shipping plugins)
|
||||
tracking_number?: string;
|
||||
tracking_url?: string;
|
||||
meta_data?: Array<{ key: string; value: string }>;
|
||||
}
|
||||
|
||||
export default function OrderDetails() {
|
||||
@@ -100,7 +112,7 @@ export default function OrderDetails() {
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Orders
|
||||
</Link>
|
||||
|
||||
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">Order #{order.order_number}</h1>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
|
||||
@@ -211,6 +223,59 @@ export default function OrderDetails() {
|
||||
{order.payment_method_title || 'Not specified'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Shipping Method - only for physical product orders */}
|
||||
{order.needs_shipping && order.shipping_lines && order.shipping_lines.length > 0 && (
|
||||
<div className="mt-6 border rounded-lg">
|
||||
<div className="bg-gray-50 px-4 py-3 border-b">
|
||||
<h2 className="text-base font-medium">Shipping Method</h2>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{order.shipping_lines.map((line) => (
|
||||
<div key={line.id} className="flex justify-between text-sm">
|
||||
<span>{line.method_title}</span>
|
||||
<span className="font-medium">{line.total}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* AWB Tracking - show for processing or completed orders */}
|
||||
{(order.status === 'processing' || order.status === 'completed') && (
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
{order.tracking_number ? (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Tracking Number</span>
|
||||
<span className="font-medium font-mono">{order.tracking_number}</span>
|
||||
</div>
|
||||
{order.tracking_url ? (
|
||||
<a
|
||||
href={order.tracking_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Track Shipment
|
||||
</a>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">
|
||||
Use the tracking number above to track your shipment on your courier's website.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-gray-500">
|
||||
<p>Your order is being processed. Tracking information will be available once your order has been shipped.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -194,13 +194,25 @@ export default function Checkout() {
|
||||
// Initialize custom field values with defaults
|
||||
const customDefaults: Record<string, string> = {};
|
||||
data.fields.forEach(field => {
|
||||
if (field.custom && field.default) {
|
||||
if (field.default) {
|
||||
customDefaults[field.key] = field.default;
|
||||
}
|
||||
});
|
||||
if (Object.keys(customDefaults).length > 0) {
|
||||
setCustomFieldData(prev => ({ ...customDefaults, ...prev }));
|
||||
}
|
||||
|
||||
// Set billing default values for hidden fields (e.g., Indonesia-only stores)
|
||||
const billingCountryField = data.fields.find(f => f.key === 'billing_country');
|
||||
if (billingCountryField?.type === 'hidden' && billingCountryField.default) {
|
||||
setBillingData(prev => ({ ...prev, country: billingCountryField.default || prev.country }));
|
||||
}
|
||||
|
||||
// Set shipping default values for hidden fields
|
||||
const shippingCountryField = data.fields.find(f => f.key === 'shipping_country');
|
||||
if (shippingCountryField?.type === 'hidden' && shippingCountryField.default) {
|
||||
setShippingData(prev => ({ ...prev, country: shippingCountryField.default || prev.country }));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load checkout fields:', error);
|
||||
@@ -210,6 +222,12 @@ export default function Checkout() {
|
||||
loadCheckoutFields();
|
||||
}, [cart.items, isVirtualOnly]);
|
||||
|
||||
// Helper to check if a standard field should be hidden (set to type: 'hidden' in PHP)
|
||||
const isFieldHidden = (fieldKey: string): boolean => {
|
||||
const field = checkoutFields.find(f => f.key === fieldKey);
|
||||
return field?.type === 'hidden';
|
||||
};
|
||||
|
||||
// Filter custom fields by fieldset
|
||||
const billingCustomFields = checkoutFields.filter(f => f.fieldset === 'billing' && f.custom && !f.hidden);
|
||||
const shippingCustomFields = checkoutFields.filter(f => f.fieldset === 'shipping' && f.custom && !f.hidden);
|
||||
@@ -705,45 +723,54 @@ export default function Checkout() {
|
||||
className="w-full border rounded-lg px-4 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">City *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={billingData.city}
|
||||
onChange={(e) => setBillingData({ ...billingData, city: e.target.value })}
|
||||
className="w-full border rounded-lg px-4 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Country *</label>
|
||||
<SearchableSelect
|
||||
options={countryOptions}
|
||||
value={billingData.country}
|
||||
onChange={(v) => setBillingData({ ...billingData, country: v })}
|
||||
placeholder="Select country"
|
||||
disabled={countries.length === 1}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">State / Province *</label>
|
||||
{billingStateOptions.length > 0 ? (
|
||||
<SearchableSelect
|
||||
options={billingStateOptions}
|
||||
value={billingData.state}
|
||||
onChange={(v) => setBillingData({ ...billingData, state: v })}
|
||||
placeholder="Select state"
|
||||
/>
|
||||
) : (
|
||||
{/* City field - hidden if PHP sets type to 'hidden' */}
|
||||
{!isFieldHidden('billing_city') && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">City *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={billingData.state}
|
||||
onChange={(e) => setBillingData({ ...billingData, state: e.target.value })}
|
||||
placeholder="Enter state/province"
|
||||
required
|
||||
value={billingData.city}
|
||||
onChange={(e) => setBillingData({ ...billingData, city: e.target.value })}
|
||||
className="w-full border rounded-lg px-4 py-2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Country field - hidden if PHP sets type to 'hidden' */}
|
||||
{!isFieldHidden('billing_country') && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Country *</label>
|
||||
<SearchableSelect
|
||||
options={countryOptions}
|
||||
value={billingData.country}
|
||||
onChange={(v) => setBillingData({ ...billingData, country: v })}
|
||||
placeholder="Select country"
|
||||
disabled={countries.length === 1}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* State field - hidden if PHP sets type to 'hidden' */}
|
||||
{!isFieldHidden('billing_state') && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">State / Province *</label>
|
||||
{billingStateOptions.length > 0 ? (
|
||||
<SearchableSelect
|
||||
options={billingStateOptions}
|
||||
value={billingData.state}
|
||||
onChange={(v) => setBillingData({ ...billingData, state: v })}
|
||||
placeholder="Select state"
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
value={billingData.state}
|
||||
onChange={(e) => setBillingData({ ...billingData, state: e.target.value })}
|
||||
placeholder="Enter state/province"
|
||||
className="w-full border rounded-lg px-4 py-2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Postcode / ZIP *</label>
|
||||
<input
|
||||
@@ -887,45 +914,54 @@ export default function Checkout() {
|
||||
className="w-full border rounded-lg px-4 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">City *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={shippingData.city}
|
||||
onChange={(e) => setShippingData({ ...shippingData, city: e.target.value })}
|
||||
className="w-full border rounded-lg px-4 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Country *</label>
|
||||
<SearchableSelect
|
||||
options={countryOptions}
|
||||
value={shippingData.country}
|
||||
onChange={(v) => setShippingData({ ...shippingData, country: v })}
|
||||
placeholder="Select country"
|
||||
disabled={countries.length === 1}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">State / Province *</label>
|
||||
{shippingStateOptions.length > 0 ? (
|
||||
<SearchableSelect
|
||||
options={shippingStateOptions}
|
||||
value={shippingData.state}
|
||||
onChange={(v) => setShippingData({ ...shippingData, state: v })}
|
||||
placeholder="Select state"
|
||||
/>
|
||||
) : (
|
||||
{/* City field - hidden if PHP sets type to 'hidden' */}
|
||||
{!isFieldHidden('shipping_city') && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">City *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={shippingData.state}
|
||||
onChange={(e) => setShippingData({ ...shippingData, state: e.target.value })}
|
||||
placeholder="Enter state/province"
|
||||
required
|
||||
value={shippingData.city}
|
||||
onChange={(e) => setShippingData({ ...shippingData, city: e.target.value })}
|
||||
className="w-full border rounded-lg px-4 py-2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Country field - hidden if PHP sets type to 'hidden' */}
|
||||
{!isFieldHidden('shipping_country') && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Country *</label>
|
||||
<SearchableSelect
|
||||
options={countryOptions}
|
||||
value={shippingData.country}
|
||||
onChange={(v) => setShippingData({ ...shippingData, country: v })}
|
||||
placeholder="Select country"
|
||||
disabled={countries.length === 1}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* State field - hidden if PHP sets type to 'hidden' */}
|
||||
{!isFieldHidden('shipping_state') && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">State / Province *</label>
|
||||
{shippingStateOptions.length > 0 ? (
|
||||
<SearchableSelect
|
||||
options={shippingStateOptions}
|
||||
value={shippingData.state}
|
||||
onChange={(v) => setShippingData({ ...shippingData, state: v })}
|
||||
placeholder="Select state"
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
value={shippingData.state}
|
||||
onChange={(e) => setShippingData({ ...shippingData, state: e.target.value })}
|
||||
placeholder="Enter state/province"
|
||||
className="w-full border rounded-lg px-4 py-2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Postcode / ZIP *</label>
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user