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() {