Merge pull request #6129 from beganovich/v5-2506-client-portal

(v5) Client portal changes

app/Http/Livewire/PaymentMethods/UpdateDefaultMethod.php

@@ -0,0 +1,56 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+namespace App\Http\Livewire\PaymentMethods;
+
+use App\Libraries\MultiDB;
+use Livewire\Component;
+
+class UpdateDefaultMethod extends Component
+{
+    /** @var \App\Models\Company */
+    public $company;
+
+    /** @var \App\Models\ClientGatewayToken */
+    public $token;
+
+    /** @var \App\Models\Client */
+    public $client;
+
+    public function mount()
+    {
+        $this->company = $this->client->company;
+
+        MultiDB::setDb($this->company->db);
+
+        $this->is_disabled = $this->token->is_default;
+    }
+
+    public function makeDefault(): void
+    {
+        if ($this->token->is_default) {
+            return;
+        }
+
+        $this->client->gateway_tokens()->update(['is_default' => 0]);
+
+        $this->token->is_default = 1;
+        $this->token->save();
+
+        $this->emit('UpdateDefaultMethod::method-updated');
+    }
+
+    public function render()
+    {
+        return render('components.livewire.update-default-payment-method');
+    }
+}

app/Http/Livewire/RecurringInvoices/UpdateAutoBilling.php

@@ -0,0 +1,34 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+namespace App\Http\Livewire\RecurringInvoices;
+
+use Livewire\Component;
+
+class UpdateAutoBilling extends Component
+{
+    /** @var \App\Models\RecurringInvoice */
+    public $invoice;
+
+    public function updateAutoBilling(): void
+    {
+        if ($this->invoice->auto_bill === 'optin' || $this->invoice->auto_bill === 'optout') {
+            $this->invoice->auto_bill_enabled = !$this->invoice->auto_bill_enabled;
+            $this->invoice->save();
+        }
+    }
+
+    public function render()
+    {
+        return render('components.livewire.recurring-invoices-switch-autobilling');
+    }
+}

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/app.js": "/js/app.js?id=696e8203d5e8e7cf5ff5",
-    "/css/app.css": "/css/app.css?id=aa13f34cf031c931b1c8",
+    "/css/app.css": "/css/app.css?id=d9b987796d537e68bee7",
     "/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=a09bb529b8e1826f13b4",
     "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=8ce8955ba775ea5f47d1",
     "/js/clients/linkify-urls.js": "/js/clients/linkify-urls.js?id=0dc8c34010d09195d2f7",

resources/lang/en/texts.php

@@ -4268,6 +4268,10 @@ $LANG = array(
     'company_import_failure_body' => 'There was an error importing the company data, the error message was:',
     'recurring_invoice_due_date' => 'Due Date',
     'amount_cents' => 'Amount in pennies,pence or cents',
+    'default_payment_method_label' => 'Default Payment Method',
+    'default_payment_method' => 'Make this your preferred way of paying.',
+    'already_default_payment_method' => 'This is your preferred way of paying.',
+    'auto_bill_disabled' => 'Auto Bill Disabled',
 );
 
 return $LANG;

resources/views/portal/ninja2020/components/livewire/recurring-invoices-switch-autobilling.blade.php

@@ -0,0 +1,8 @@
+<label class="flex items-center cursor-pointer">
+    <input type="checkbox" class="form-checkbox mr-2"
+           wire:change="updateAutoBilling" {{ $invoice->auto_bill_enabled ? 'checked' : '' }}>
+
+    <span class="text-sm leading-5 font-medium text-gray-900">
+        {{ $invoice->auto_bill_enabled ? ctrans('texts.auto_bill_enabled') : ctrans('texts.auto_bill_disabled') }}
+    </span>
+</label>

resources/views/portal/ninja2020/components/livewire/update-default-payment-method.blade.php

@@ -0,0 +1,25 @@
+<div class="mt-4 mb-4 bg-white shadow sm:rounded-lg">
+    <div class="px-4 py-5 sm:p-6">
+        <div class="sm:flex sm:items-start sm:justify-between">
+            <div>
+                <h3 class="text-lg font-medium leading-6 text-gray-900">
+                    {{ ctrans('texts.default_payment_method_label') }}
+                </h3>
+                <div class="max-w-xl mt-2 text-sm leading-5 text-gray-500 flex items-center">
+                    <span class="text-primary mr-1 hidden" data-ref="success-label">{{ ctrans('texts.success') }}!</span>
+
+                    <p>
+                        {{ $token->is_default ? ctrans('texts.already_default_payment_method') : ctrans('texts.default_payment_method') }}
+                    </p>
+                </div>
+            </div>
+            <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
+                <form wire:submit.prevent="makeDefault">
+                    <button class="button button-primary bg-primary" {{ $token->is_default ? 'disabled' : '' }}>
+                        {{ ctrans('texts.save_as_default') }}
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/portal/ninja2020/payment_methods/show.blade.php

@@ -15,61 +15,61 @@
             <div>
                 <dl>
                     @if(!empty($payment_method->gateway_type->name) && !is_null($payment_method->gateway_type->name))
-                    <div class="px-4 py-5 bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <div class="px-4 py-5 bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm font-medium leading-5 text-gray-500">
+                            <dt class="text-sm font-medium leading-5 text-gray-500">
-                            {{ ctrans('texts.payment_type') }}
+                                {{ ctrans('texts.payment_type') }}
-                        </dt>
+                            </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            {{ ucfirst($payment_method->gateway_type->name) }}
+                                {{ ucfirst($payment_method->gateway_type->name) }}
-                        </dd>
+                            </dd>
-                    </div>
+                        </div>
                     @endif
 
                     @if(!empty($payment_method->meta) && !is_null($payment_method->meta))
-                    <div class="px-4 py-5 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <div class="px-4 py-5 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm font-medium leading-5 text-gray-500">
+                            <dt class="text-sm font-medium leading-5 text-gray-500">
-                            {{ ctrans('texts.type') }}
+                                {{ ctrans('texts.type') }}
-                        </dt>
+                            </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            {{ optional($payment_method->meta)->brand }}
+                                {{ optional($payment_method->meta)->brand }}
-                            {{ optional($payment_method->meta)->scheme }}
+                                {{ optional($payment_method->meta)->scheme }}
-                        </dd>
+                            </dd>
-                    </div>
+                        </div>
                     @endif
 
                     @if(!empty($payment_method->meta->last4) && !is_null($payment_method->meta->last4))
-                    <div class="px-4 py-5 bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <div class="px-4 py-5 bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm font-medium leading-5 text-gray-500">
+                            <dt class="text-sm font-medium leading-5 text-gray-500">
-                            {{ ctrans('texts.card_number') }}
+                                {{ ctrans('texts.card_number') }}
-                        </dt>
+                            </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            **** {{ ucfirst($payment_method->meta->last4) }}
+                                **** {{ ucfirst($payment_method->meta->last4) }}
-                        </dd>
+                            </dd>
-                    </div>
+                        </div>
                     @endif
-                    
+
                     @if(!empty($payment_method->created_at) && !is_null($payment_method->created_at))
-                    <div class="px-4 py-5 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <div class="px-4 py-5 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm font-medium leading-5 text-gray-500">
+                            <dt class="text-sm font-medium leading-5 text-gray-500">
-                            {{ ctrans('texts.date_created') }}
+                                {{ ctrans('texts.date_created') }}
-                        </dt>
+                            </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            {{ $payment_method->formatDateTimestamp($payment_method->created_at, auth()->user()->client->date_format()) }}
+                                {{ $payment_method->formatDateTimestamp($payment_method->created_at, auth()->user()->client->date_format()) }}
-                        </dd>
+                            </dd>
-                    </div>
+                        </div>
                     @endif
 
                     @if(!empty($payment_method->is_default) && !is_null($payment_method->is_default))
-                    <div class="px-4 py-5 bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <div class="px-4 py-5 bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm font-medium leading-5 text-gray-500">
+                            <dt class="text-sm font-medium leading-5 text-gray-500">
-                            {{ ctrans('texts.default') }}
+                                {{ ctrans('texts.default') }}
-                        </dt>
+                            </dt>
-                        <div class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            <div class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            {{ $payment_method->is_default ? ctrans('texts.yes') : ctrans('texts.no') }}
+                                {{ $payment_method->is_default ? ctrans('texts.yes') : ctrans('texts.no') }}
+                            </div>
                         </div>
-                    </div>
                     @endif
-                    
+
                     @isset($payment_method->meta->exp_month)
                         <div class="px-4 py-5 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                             <dt class="text-sm font-medium leading-5 text-gray-500">
@@ -83,7 +83,10 @@
                 </dl>
             </div>
         </div>
-        <div class="mt-4 mb-4 bg-white shadow sm:rounded-lg" translate>
+
+        @livewire('payment-methods.update-default-method', ['token' => $payment_method, 'client' => $client])
+
+        <div class="mt-4 mb-4 bg-white shadow sm:rounded-lg">
             <div class="px-4 py-5 sm:p-6">
                 <div class="sm:flex sm:items-start sm:justify-between">
                     <div>
@@ -109,3 +112,11 @@
         </div>
     </div>
 @endsection
+
+@section('footer')
+    <script>
+        Livewire.on('UpdateDefaultMethod::method-updated', event => {
+            document.querySelector('span[data-ref=success-label]').classList.remove('hidden');
+        });
+    </script>
+@endsection

resources/views/portal/ninja2020/recurring_invoices/show.blade.php

@@ -59,6 +59,21 @@
             </div>
         </div>
 
+        @if($invoice->auto_bill === 'optin' || $invoice->auto_bill === 'optout')
+            <div class="bg-white shadow overflow-hidden lg:rounded-lg mt-4">
+                <div class="flex flex-col md:flex-row items-start justify-between px-4 py-5 sm:p-6">
+                    <div>
+                        <h3 class="text-lg leading-6 font-medium text-gray-900">Auto Bill</h3>
+                        <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">Change your update bill preferences.</p>
+                    </div>
+
+                    <div class="flex mt-4 space-x-2">
+                        @livewire('recurring-invoices.update-auto-billing', ['invoice' => $invoice])
+                    </div>
+                </div>
+            </div>
+        @endif
+
         @if(is_null($invoice->subscription_id) || optional($invoice->subscription)->allow_cancellation)
             <div class="bg-white shadow sm:rounded-lg mt-4">
                 <div class="px-4 py-5 sm:p-6">