Fixes for copy billing button in livewire checkout form

app/Livewire/Flow2/RequiredFields.php

@@ -15,7 +15,6 @@ namespace App\Livewire\Flow2;
 use Livewire\Component;
 use App\Libraries\MultiDB;
 use App\Models\CompanyGateway;
-use Livewire\Attributes\Computed;
 use App\Services\Client\RFFService;
 use App\Utils\Traits\WithSecureContext;
 

resources/views/portal/ninja2020/components/livewire/required-client-info.blade.php

@@ -37,15 +37,13 @@
                 @endif
             @endforeach
 
-            @if($this->showCopyBillingCheckbox())
-                @component('portal.ninja2020.components.general.card-element-single')
-                    <div class="flex justify-end">
-                        <button type="button" class="bg-gray-100 px-2 py-1 text-sm rounded" wire:click="handleCopyBilling">
-                            {{ ctrans('texts.copy_billing') }}
-                        </button>
-                    </div>
-                @endcomponent
-            @endif
+            @component('portal.ninja2020.components.general.card-element-single')
+                <div class="flex justify-end">
+                    <button type="button" class="bg-gray-100 px-2 py-1 text-sm rounded" wire:click="handleCopyBilling">
+                        {{ ctrans('texts.copy_billing') }}
+                    </button>
+                </div>
+            @endcomponent
 
             @if($show_terms)
 

resources/views/portal/ninja2020/flow2/required-fields.blade.php

@@ -1,4 +1,57 @@
-<div x-data="{ fields: @entangle('fields') }"
+<div x-data="{ 
+        fields: @entangle('fields'),
+        copyBillingToShipping() {
+            // Mapping: billing field => shipping field
+            const mappings = {
+                'client_address_line_1': 'client_shipping_address_line_1',
+                'client_address_line_2': 'client_shipping_address_line_2',
+                'client_city': 'client_shipping_city',
+                'client_state': 'client_shipping_state',
+                'client_postal_code': 'client_shipping_postal_code',
+                'client_country_id': 'client_shipping_country_id'
+            };
+            
+            // Copy values from billing fields to shipping fields
+            Object.entries(mappings).forEach(([billingField, shippingField]) => {
+                const billingInput = document.querySelector(`input[name='${billingField}'], select[name='${billingField}']`);
+                const shippingInput = document.querySelector(`input[name='${shippingField}'], select[name='${shippingField}']`);
+                
+                if (billingInput && shippingInput) {
+                    // Get the value from billing field (read from form, not database)
+                    let value = billingInput.value;
+                    
+                    // Handle country_id specially - ensure it's a valid number or null
+                    if (billingField === 'client_country_id') {
+                        if (value === 'none' || value === '' || value === null) {
+                            value = null;
+                        } else {
+                            value = parseInt(value, 10);
+                        }
+                    }
+                    
+                    // Update Livewire model property first
+                    if (shippingInput.hasAttribute('wire:model')) {
+                        const modelName = shippingInput.getAttribute('wire:model');
+                        $wire.set(modelName, value);
+                    }
+                    
+                    // Update the DOM input/select value for immediate visual feedback
+                    // For select, convert back to string for the option value
+                    if (shippingInput.tagName === 'SELECT') {
+                        shippingInput.value = value !== null ? String(value) : 'none';
+                        // Trigger change event for select - this is important for Livewire
+                        shippingInput.dispatchEvent(new Event('change', { bubbles: true }));
+                        // Also trigger input event
+                        shippingInput.dispatchEvent(new Event('input', { bubbles: true }));
+                    } else {
+                        shippingInput.value = value !== null ? value : '';
+                        // Trigger Livewire's input event to ensure sync
+                        shippingInput.dispatchEvent(new Event('input', { bubbles: true }));
+                    }
+                }
+            });
+        }
+    }"
     class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden px-4 py-5 bg-white sm:gap-4 sm:px-6">
 
     <p class="font-semibold tracking-tight group flex items-center gap-2 text-lg mb-3">
@@ -43,6 +96,14 @@
 
             @endforeach
 
+            <div class="bg-white px-4 py-5 flex items-center w-full justify-end">
+                <button type="button" 
+                        @click="copyBillingToShipping()"
+                        class="bg-gray-100 hover:bg-gray-200 px-4 py-2 text-sm rounded transition-colors">
+                    {{ ctrans('texts.copy_billing') }}
+                </button>
+            </div>
+
             <div class="bg-white px-4 py-5 flex items-center w-full justify-end space-x-3">
                 <svg wire:loading class="animate-spin h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 24 24">