From e04f1fd93fab42a8295c639ff970c0232e1ef809 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Thu, 8 Jan 2026 23:57:47 +0700
Subject: [PATCH] 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
---
 customer-spa/src/pages/Checkout/index.tsx | 21 +++++++++++++++++++--
 includes/Api/CheckoutController.php       |  9 +++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/customer-spa/src/pages/Checkout/index.tsx b/customer-spa/src/pages/Checkout/index.tsx
index 91b1906..30052e2 100644
--- a/customer-spa/src/pages/Checkout/index.tsx
+++ b/customer-spa/src/pages/Checkout/index.tsx
@@ -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"
diff --git a/includes/Api/CheckoutController.php b/includes/Api/CheckoutController.php
index 8d933a2..6333333 100644
--- a/includes/Api/CheckoutController.php
+++ b/includes/Api/CheckoutController.php
@@ -414,6 +414,11 @@ class CheckoutController {
         }
 
         // Shipping (best‑effort 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');
             }
         }