feat: add form-row-wide class support for checkout fields

- Added isFullWidthField helper to check for form-row-wide in class array
- Added getFieldWrapperClass helper to return md:col-span-2 for full width
- Applied dynamic width to billing_first_name and billing_last_name
- PHP can now control field width via class: ['form-row-wide']
- Added debug logging for shipping to help diagnose shipping not applied issue
This commit is contained in:
Dwindi Ramadhana
2026-01-08 23:57:47 +07:00
parent c6489b6b05
commit e04f1fd93f
2 changed files with 28 additions and 2 deletions

View File

@@ -240,6 +240,22 @@ export default function Checkout() {
const getBillingField = (key: string) => billingFields.find(f => f.key === key);
const getShippingField = (key: string) => shippingFields.find(f => f.key === key);
// Helper to determine if a field should be full width based on class array from PHP
// Supports: form-row-wide, form-row-first (half), form-row-last (half)
const isFullWidthField = (fieldKey: string, fieldset: 'billing' | 'shipping' = 'billing'): boolean => {
const field = fieldset === 'billing' ? getBillingField(fieldKey) : getShippingField(fieldKey);
if (!field?.class || !Array.isArray(field.class)) return false;
return field.class.includes('form-row-wide');
};
// Helper to get wrapper className for a field (handles width based on PHP class)
const getFieldWrapperClass = (fieldKey: string, fieldset: 'billing' | 'shipping' = 'billing', defaultFullWidth = false): string => {
if (isFullWidthField(fieldKey, fieldset) || defaultFullWidth) {
return 'md:col-span-2';
}
return ''; // Default half width in 2-column grid
};
// Filter custom fields by fieldset (legacy support - for plugins that add non-standard fields)
const billingCustomFields = checkoutFields.filter(f => f.fieldset === 'billing' && f.custom && !f.hidden && f.type !== 'hidden');
const shippingCustomFields = checkoutFields.filter(f => f.fieldset === 'shipping' && f.custom && !f.hidden && f.type !== 'hidden');
@@ -687,8 +703,9 @@ export default function Checkout() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* All fields conditionally rendered based on API response */}
{/* This allows ANY field to be hidden via PHP snippet */}
{/* Width controlled via class: ['form-row-wide'] from PHP */}
{getBillingField('billing_first_name') && (
<div>
<div className={getFieldWrapperClass('billing_first_name', 'billing')}>
<label className="block text-sm font-medium mb-2">{getBillingField('billing_first_name')?.label || 'First Name'} {getBillingField('billing_first_name')?.required && '*'}</label>
<input
type="text"
@@ -700,7 +717,7 @@ export default function Checkout() {
</div>
)}
{getBillingField('billing_last_name') && (
<div>
<div className={getFieldWrapperClass('billing_last_name', 'billing')}>
<label className="block text-sm font-medium mb-2">{getBillingField('billing_last_name')?.label || 'Last Name'} {getBillingField('billing_last_name')?.required && '*'}</label>
<input
type="text"

View File

@@ -414,6 +414,11 @@ class CheckoutController {
}
// Shipping (besteffort estimate)
// DEBUG: Log shipping data for troubleshooting
error_log('[WooNooW Shipping Debug] shipping_method: ' . ($payload['shipping_method'] ?? 'null'));
error_log('[WooNooW Shipping Debug] shipping_cost: ' . ($payload['shipping_cost'] ?? 'null'));
error_log('[WooNooW Shipping Debug] shipping_title: ' . ($payload['shipping_title'] ?? 'null'));
if (!empty($payload['shipping_method'])) {
$rate = $this->find_shipping_rate_for_order($order, $payload['shipping_method']);
if ($rate instanceof WC_Shipping_Rate) {
@@ -426,6 +431,7 @@ class CheckoutController {
'taxes' => $rate->get_taxes(),
]);
$order->add_item($item);
error_log('[WooNooW Shipping Debug] Added shipping via WC rate lookup: ' . $rate->get_cost());
} elseif (!empty($payload['shipping_cost']) && $payload['shipping_cost'] > 0) {
// Fallback: use shipping_cost directly from frontend
// This handles API-based shipping like Rajaongkir where WC zones don't apply
@@ -443,6 +449,9 @@ class CheckoutController {
'total' => floatval($payload['shipping_cost']),
]);
$order->add_item($item);
error_log('[WooNooW Shipping Debug] Added shipping via frontend fallback: ' . $payload['shipping_cost']);
} else {
error_log('[WooNooW Shipping Debug] NO shipping added - rate lookup failed and no valid shipping_cost');
}
}