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
@@ -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