dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: checkout improvements

Browse Source 
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
2026-01-08 20:51:26 +07:00
parent 26faa008cb
commit e8c60b3a09
3 changed files with 190 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
customer-spa/src/pages/Account/OrderDetails.tsx
View File

@@ -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() {
@@ -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>
);
}

38
customer-spa/src/pages/Checkout/index.tsx
View File

@@ -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,6 +723,8 @@ export default function Checkout() {
className="w-full border rounded-lg px-4 py-2"
/>
</div>
{/* 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
@@ -715,6 +735,9 @@ export default function Checkout() {
className="w-full border rounded-lg px-4 py-2"
/>
</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
@@ -725,6 +748,9 @@ export default function Checkout() {
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 ? (
@@ -744,6 +770,7 @@ export default function Checkout() {
/>
)}
</div>
)}
<div>
<label className="block text-sm font-medium mb-2">Postcode / ZIP *</label>
<input
@@ -887,6 +914,8 @@ export default function Checkout() {
className="w-full border rounded-lg px-4 py-2"
/>
</div>
{/* 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
@@ -897,6 +926,9 @@ export default function Checkout() {
className="w-full border rounded-lg px-4 py-2"
/>
</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
@@ -907,6 +939,9 @@ export default function Checkout() {
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 ? (
@@ -926,6 +961,7 @@ export default function Checkout() {
/>
)}
</div>
)}
<div>
<label className="block text-sm font-medium mb-2">Postcode / ZIP *</label>
<input

18
includes/Api/Controllers/CartController.php
View File

@@ -131,6 +131,21 @@ class CartController extends WP_REST_Controller {
$cart = WC()->cart;
// Calculate totals to ensure discounts are computed
$cart->calculate_totals();
// Format coupons with discount amounts
$coupons_with_discounts = [];
foreach ($cart->get_applied_coupons() as $coupon_code) {
$coupon = new \WC_Coupon($coupon_code);
$discount = $cart->get_coupon_discount_amount($coupon_code);
$coupons_with_discounts[] = [
'code' => $coupon_code,
'discount' => (float) $discount,
'type' => $coupon->get_discount_type(),
];
}
return new WP_REST_Response([
'items' => $this->format_cart_items($cart->get_cart()),
'totals' => [
@@ -145,7 +160,8 @@ class CartController extends WP_REST_Controller {
'total' => $cart->get_total(''),
'total_tax' => $cart->get_total_tax(),
],
'coupons' => $cart->get_applied_coupons(),
'coupons' => $coupons_with_discounts,
'discount_total' => (float) $cart->get_discount_total(), // Root level for frontend
'needs_shipping' => $cart->needs_shipping(),
'needs_payment' => $cart->needs_payment(),
'item_count' => $cart->get_cart_contents_count(),