Merge pull request #10035 from beganovich/1512-view-and-pay

New payment flow: PDF on the show page

app/Livewire/PdfSlot.php

@@ -59,6 +59,8 @@ class PdfSlot extends Component
 
     public $html_entity_option = true;
 
+    public ?string $with_close_button = null;
+
     public function mount()
     {
         MultiDB::setDb($this->db);

public/build/manifest.json

@@ -372,7 +372,7 @@
     "src": "resources/js/setup/setup.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-9c3f71d4.css",
+    "file": "assets/app-22043157.css",
     "isEntry": true,
     "src": "resources/sass/app.scss"
   }

resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php

@@ -1,7 +1,8 @@
 <div>
   <div class="flex flex-row space-x-2 float-right mb-2" x-data>
-    <button wire:loading.attr="disabled" wire:click="downloadPdf" class="button bg-primary text-white px-4 py-4 lg:px-2 lg:py-2 rounded" type="button">
+    <button wire:loading.attr="disabled" wire:click="downloadPdf" class="button bg-primary text-white px-4 py-4 lg:px-2 lg:py-2 rounded flex items-center space-x-2" type="button">
         <span class="mr-0">{{ ctrans('texts.download_pdf') }}</span>
+
         <div wire:loading wire:target="downloadPdf">
             <svg class="animate-spin h-5 w-5 text-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -9,8 +10,15 @@
             </svg>
         </div>
     </button>
+
+    @if($with_close_button)
+      <button wire:loading.attr="disabled" @click="document.querySelector('{{ $with_close_button }}').close()" class="button px-4 py-4 lg:px-2 lg:py-2 rounded" type="button">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+      </button>
+    @endif
+    
     @if($entity_type == 'invoice' && $settings->enable_e_invoice)
-    <button wire:loading.attr="disabled" wire:click="downloadEDocument" class="button bg-primary text-white px-4 py-4 lg:px-2 lg:py-2 rounded" type="button">
+    <button wire:loading.attr="disabled" wire:click="downloadEDocument" class="button bg-primary text-white px-4 py-4 lg:px-2 lg:py-2 rounded flex items-center space-x-2" type="button">
         <span>{{ ctrans('texts.download_e_invoice') }}</span>
         <div wire:loading wire:target="downloadEDocument">
             <svg class="animate-spin h-5 w-5 text-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -21,7 +29,7 @@
     </button>
     @endif
       @if($entity_type == 'credit' && $settings->enable_e_invoice)
-          <button wire:loading.attr="disabled" wire:click="downloadEDocument" class="button bg-primary text-white px-4 py-4 lg:px-2 lg:py-2 rounded" type="button">
+          <button wire:loading.attr="disabled" wire:click="downloadEDocument" class="button bg-primary text-white px-4 py-4 lg:px-2 lg:py-2 rounded flex items-center space-x-2" type="button">
               <span>{{ ctrans('texts.download_e_credit') }}</span>
               <div wire:loading wire:target="downloadEDocument">
                   <svg class="animate-spin h-5 w-5 text-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -32,7 +40,7 @@
           </button>
       @endif
       @if($entity_type == 'quote' && $settings->enable_e_invoice)
-          <button wire:loading.attr="disabled" wire:click="downloadEDocument" class="button bg-primary text-white px-4 py-4 lg:px-2 lg:py-2 rounded" type="button">
+          <button wire:loading.attr="disabled" wire:click="downloadEDocument" class="button bg-primary text-white px-4 py-4 lg:px-2 lg:py-2 rounded flex items-center space-x-2" type="button">
               <span>{{ ctrans('texts.download_e_quote') }}</span>
               <div wire:loading wire:target="downloadEDocument">
                   <svg class="animate-spin h-5 w-5 text-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -106,7 +114,7 @@
 
   @if($html_entity_option)
   <div class="block lg:hidden">
-    @include('portal.ninja2020.components.html-viewer')
+      @include('portal.ninja2020.components.html-viewer')
   </div>
   @endif
 

resources/views/portal/ninja2020/invoices/show_smooth.blade.php

@@ -1,10 +1,30 @@
 @extends('portal.ninja2020.layout.app')
 @section('meta_title', ctrans('texts.view_invoice'))
 
-@push('head')
-@endpush
-
 @section('body')
+    @if(Route::is('client.invoice.show'))
+        <dialog class="w-full bg-white rounded-lg px-4 pt-5 pb-4 shadow-xl transform transition-all sm:p-6" id="dialogPdf">
+            @livewire('pdf-slot', ['entity' => $invoice, 'invitation' => $invitation, 'db' => $invoice->company->db, 'with_close_button' => 'dialog#dialogPdf'])
+        </dialog>
+
+        <div class="px-2">
+            <div class="bg-white shadow rounded-lg mb-4" translate>
+                <div class="px-4 py-5 sm:p-6">
+                    <div class="sm:flex sm:items-start sm:justify-between">
+                        <div>
+                            <h3 class="text-lg leading-6 font-medium text-gray-900">
+                                {{ ctrans('texts.invoice_number_placeholder', ['invoice' => $invoice->number])}}
+                            </h3>
+                        </div>
+                        <div class="sm:mt-0 sm:ml-6 flex justify-end">
+                            <button @click="document.getElementById('dialogPdf').showModal()" type="button"
+                                class="button button-primary bg-primary">{{ ctrans('texts.view_pdf') }}</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endif
 
     @if($invoice->isPayable() && $client->getSetting('custom_message_unpaid_invoice'))
         @component('portal.ninja2020.components.message')
@@ -19,11 +39,4 @@
     @if($invoice->isPayable())
         @livewire('flow2.invoice-pay', ['invoices' => $invoices, 'invitation_id' => $invitation->id, 'db' => $db, 'variables' => $variables])
     @endif
-
 @endsection
-
-@section('footer')
-@endsection
-
-@push('head')
-@endpush