Payment float

app/Livewire/InvoiceSummary.php

@@ -0,0 +1,34 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2024. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class InvoiceSummary extends Component
+{
+    public $context;
+
+    public $invoice;
+
+    public function mount()
+    {
+        $this->invoice = $this->context['invoice'];
+    }
+
+    public function render()
+    {
+        return render('components.livewire.invoice-summary',[
+            'invoice' => $this->invoice
+        ]);
+    }
+}

public/build/manifest.json

@@ -240,11 +240,15 @@
     "src": "resources/js/setup/setup.js"
   },
   "resources/sass/app.scss": {
+<<<<<<< HEAD
 <<<<<<< HEAD
     "file": "assets/app-fee1da41.css",
 =======
     "file": "assets/app-8e387ada.css",
 >>>>>>> 3e760e6cc6 (New payment flow)
+=======
+    "file": "assets/app-26306e87.css",
+>>>>>>> c315911da4 (Payment float)
     "isEntry": true,
     "src": "resources/sass/app.scss"
   }

resources/views/portal/ninja2020/components/livewire/invoice-pay.blade.php

@@ -1,3 +1,10 @@
-<div>
+<div class="grid grid-cols-1 md:grid-cols-2">
-    @livewire($this->component,['context' => $context], key($this->componentUniqueId()))
+    <div>
+        @livewire('invoice-summary',['context' => $context])
+    </div>
+
+    <div>
+        @livewire($this->component,['context' => $context], key($this->componentUniqueId()))
+    </div>
+    
 </div>

resources/views/portal/ninja2020/components/livewire/invoice-summary.blade.php

@@ -0,0 +1,14 @@
+<div style="w-full">
+
+<table width="100%">
+    <thead>
+    </thead>
+    <tbody>
+        <tr><td>{{ ctrans('texts.invoice')}} #</td><td>{{ $invoice->number }}</td></tr>
+        <tr><td>{{ ctrans('texts.due_date')}} #</td><td>{{ $invoice->due_date }}</td></tr>
+        <tr><td>{{ ctrans('texts.amount')}} #</td><td>{{ $invoice->amount }}</td></tr>
+        <tr><td>{{ ctrans('texts.balance')}} #</td><td>{{ $invoice->balance }}</td></tr>
+    </tbody>
+</table>
+
+</div>

resources/views/portal/ninja2020/components/livewire/signature.blade.php

@@ -1,15 +1,13 @@
-<div style="w-full">
+<div class="">
-    <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6">
+    <div class="bg-white p-6 rounded-lg shadow-lg">
-        <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
+        <h2 class="text-xl text-center py-0 px-4">{{ ctrans('texts.sign_here_ux_tip') }}</h2>
-            <h2 class="text-xl text-center mx-auto py-4 px-4">{{ ctrans('texts.sign_here_ux_tip') }}</h2>
+        <canvas id="signature-pad" class="border border-gray-300 w-full h-64"></canvas>
-            <canvas id="signature-pad" class="border border-gray-300 w-full h-64"></canvas>
+        <div class="flex justify-between items-center px-4 py-4">
-            <div class="flex justify-between px-4 py-4">
+            <button id="clear-signature" class="px-4 py-2 mr-6 bg-red-500 text-white rounded">{{ ctrans('texts.clear') }}</button>
-                <button id="clear-signature" class="px-4 bg-red-500 text-white rounded">{{ ctrans('texts.clear') }}</button>
+            <button id="save-button" class="button button-primary bg-primary hover:bg-primary-darken">{{ ctrans('texts.next') }}</button>
-                <button id="save-button" class="button button-primary bg-primary hover:bg-primary-darken inline-flex items-center">{{ ctrans('texts.next') }}</button>
-            </div>
         </div>
     </div>
-
+    
     @assets
     <script src="{{ asset('vendor/signature_pad@5/signature_pad.umd.min.js') }}"></script>
     @endassets

resources/views/portal/ninja2020/components/livewire/terms.blade.php

@@ -1,28 +1,23 @@
-<div>
+<div class="pb-8">
-    <div class="bg-color: white">
+    <div class="bg-white p-6 rounded-lg shadow-lg">
-        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+        <h2 class="text-xl text-center py-0 px-4">{{ ctrans('texts.terms') }}</h2>
-            <h3 class="text-xl leading-6 font-medium text-gray-900">
+        <div class="mt-0 h-64 overflow-y-auto">
-                {{ ctrans('texts.terms') }}
+            <div class="py-0">
-            </h3>
+                <p class="text-sm leading-6 font-medium text-gray-500">{{ ctrans('texts.invoice') }} {{ $invoice->number }}:</p>
-            <div class="mt-4 h-64 overflow-y-auto">
+                @if($variables && $invoice->terms)
-                    <div class="mb-4">
+                    <h5 data-ref="entity-terms">{!! $invoice->parseHtmlVariables('terms', $variables) !!}</h5>
-                        <p class="text-sm leading-6 font-medium text-gray-500">{{ ctrans('texts.invoice') }} {{ $invoice->number }}:</p>
+                @elseif($invoice->terms)
-                        @if($variables && $invoice->terms)
+                    <h5 data-ref="entity-terms" class="text-sm leading-5 text-gray-900">{!! $invoice->terms !!}</h5>
-                            <h5 data-ref="entity-terms">{!! $invoice->parseHtmlVariables('terms', $variables) !!}</h5>
+                @else
-                        @elseif($invoice->terms)
+                    <i class="text-sm leading-5 text-gray-500">{{ ctrans('texts.not_specified') }}</i>
-                            <h5 data-ref="entity-terms" class="text-sm leading-5 text-gray-900">{!! $invoice->terms !!}</h5>
+                @endif
-                        @else
-                            <i class="text-sm leading-5 text-gray-500">{{ ctrans('texts.not_specified') }}</i>
-                        @endif
-                    </div>
             </div>
         </div>
-    </div>
+        <div class="flex justify-end items-center px-4 py-4">
-    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+            <button id="accept-terms-button" class="button button-primary bg-primary hover:bg-primary-darken float-end">{{ ctrans('texts.next') }}</button>
-        <div class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto" x-data>
-            <button id="accept-terms-button" class="button button-primary bg-primary hover:bg-primary-darken inline-flex items-center">{{ ctrans('texts.next') }}</button>
         </div>
     </div>
+    
     @script
     <script>