Order payment UI fixes and added logo for payment providers

app/Livewire/OrderPayment.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Livewire;
+
+use Illuminate\View\View;
+use Livewire\Component;
+use App\Models\Order;
+use App\Models\Payment;
+
+class OrderPayment extends Component
+{
+    public Order $order;
+    public $payment_method = 'paypal';
+    public $payment_methods = ['paypal', 'cash_app', 'zelle'];
+    public $payment_details;
+
+    public function mount($orderId): void
+    {
+        $this->order = Order::findOrFail($orderId);
+        $this->updatePaymentDetails();
+    }
+
+    public function updatedPaymentMethod()
+    {
+        $this->updatePaymentDetails();
+    }
+
+    private function updatePaymentDetails(): void
+    {
+        $this->payment_details = $this->getPaymentDetails($this->payment_method);
+    }
+
+    public function getPaymentDetails($method): array
+    {
+        $details = [
+            'paypal' => [
+                'logo' => asset('images/paypal.png'),
+                'instructions' => 'Please send your payment to our PayPal address: [email protected]',
+            ],
+            'cash_app' => [
+                'logo' => asset('images/cash-app-logo.png'),
+                'instructions' => 'Please send your payment to our Cash App username: $ExampleUsername',
+            ],
+            'zelle' => [
+                'logo' => asset('images/zelle.png'),
+                'instructions' => 'Please send your payment to our Zelle phone number: (123) 456-7890',
+            ],
+        ];
+
+        return $details[$method] ?? ['logo' => '', 'instructions' => ''];
+    }
+
+    public function pay()
+    {
+        // Implement the payment logic here
+        // Show success message
+        // Redirect to the dashboard
+    }
+
+    public function render(): View
+    {
+        return view('orders.payment');
+    }
+}

resources/views/orders/payment.blade.php

@@ -0,0 +1,57 @@
+<div class="p-2 md:p-0 text-black/80 md:py-4">
+    <x-slot name="header">
+        <h2 class="text-gray-800 flex items-center gap-4 leading-tight">
+            <i class="fas text-green-500 fa-credit-card"></i>
+            {{ __('Payment for Order #:orderId', ['orderId' => $order->id]) }}
+        </h2>
+    </x-slot>
+
+    <div class="max-w-7xl relative h-full mx-auto">
+        <div class="flex sm:mx-3 lg:mx-4 flex-col h-full md:flex-row">
+            <div class="bg-white p-6 relative h-full rounded-lg shadow-sm">
+                <!-- We accept -->
+                <h3 class="text-xl font-semibold mb-10">We Accept</h3>
+                <div class="flex space-x-6 mb-10">
+                    @foreach($payment_methods as $method)
+                        @php
+                        //call getPaymentDetails method from OrderPayment class
+                        $logo = (new App\Livewire\OrderPayment)->getPaymentDetails($method)['logo'];
+                        @endphp
+                        <img src="{{ $logo }}" alt="{{ $method }} Logo" class="h-16 w-auto">
+                    @endforeach
+                </div>
+                <!-- End We accept -->
+
+                <!-- Instructions -->
+                <h3 class="text-lg font-semibold mb-4">Payment Instructions</h3>
+                <ol class="list-decimal list-inside mb-6">
+                    <li>Select your preferred payment method from the dropdown menu below.</li>
+                    <li>Follow the instructions provided for the selected payment method.</li>
+                    <li>After making the payment, our system will verify the transaction.</li>
+                    <li>Once the payment is verified, we will start processing your order immediately.</li>
+                </ol>
+                <!-- End Instructions -->
+
+                <h3 class="text-lg font-semibold mb-4">Select Payment Method</h3>
+                <form wire:submit.prevent="pay">
+    <div class="mb-4">
+        <select wire:model.live="payment_method" class="w-full p-2 border border-gray-300 rounded-lg">
+            <option value="">Select Payment Method</option>
+            @foreach($payment_methods as $method)
+                <option value="{{ $method }}">{{ ucfirst($method) }}</option>
+            @endforeach
+        </select>
+        @error('payment_method') <span class="text-red-500">{{ $message }}</span> @enderror
+    </div>
+    @if ($payment_method)
+        <div class="mb-4">
+            <img src="{{ $payment_details['logo'] }}" alt="{{ $payment_method }} Logo" class="w-32 h-auto mb-2">
+            <p class="text-sm text-gray-700">{{ $payment_details['instructions'] }}</p>
+        </div>
+    @endif
+    <button type="submit" class="w-full py-2 bg-blue-500 text-white font-semibold rounded-lg">Proceed to Pay</button>
+</form>
+            </div>
+        </div>
+    </div>
+</div>

routes/web.php

@@ -4,7 +4,7 @@
 use App\Livewire\OrderCreate;
 use App\Livewire\Dashboard;
 use App\Livewire\Messages;
-use App\Livewire\OrderPay;
+use App\Livewire\OrderPayment;
 use App\Livewire\Orders;
 use App\Livewire\Referrals;
 use Illuminate\Support\Facades\Route;
@@ -26,7 +26,7 @@
     Route::get('/referrals', Referrals::class)->name('referrals');
 
     Route::get('/orders/create', OrderCreate::class)->name('orders.create');
-    Route::get('/orders/{order}/pay', OrderPay::class)->name('orders.pay');
+    Route::get('/orders/pay/{orderId}', OrderPayment::class)->name('orders.pay');
 });
 
 require __DIR__.'/auth.php';