IC customer facing: direct payments

app/Http/Controllers/InvoiceController.php

@@ -142,10 +142,19 @@ class InvoiceController extends Controller
     public function icCustomerPortal(Request $request, $customerSlug) {
         $customer = Customer::where('slug', $customerSlug)->where('is_active', true)->first();
         if (!$customer) abort(404);
+        $client = $customer->client;
         $company = $customer->company;
         return view('app.invoice-center.ic-customer-portal', compact('customer', 'company'));
     }
 
+    public function icManageAccount(Request $request, $customerSlug) {
+        $customer = Customer::where('slug', $customerSlug)->where('is_active', true)->first();
+        if (!$customer) abort(404);
+        $client = $customer->client;
+        $company = $customer->company;
+        return view('app.invoice-center.ic-manage-account', compact('customer', 'company', 'client'));
+    }
+
     public function companySuggestJSON(Request $request) {
         $term = $request->input('term') ? trim($request->input('term')) : '';
         if (empty($term)) return '';

app/Models/Customer.php

@@ -25,4 +25,10 @@ class Customer extends Model
     public function customerTransactions() {
         return $this->hasMany(CustomerTransaction::class, 'customer_id', 'id')->orderBy('created_at', 'ASC');
     }
+
+    public function paymentMethods() {
+        return $this->hasMany(PaymentMethod::class, 'customer_id', 'id')
+            ->where('is_active', true)
+            ->orderByRaw('created_at DESC');
+    }
 }

app/Models/PaymentMethod.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Models;
+
+class PaymentMethod extends Model
+{
+    protected $table = 'payment_method';
+
+    public function customer(){
+        return $this->hasOne(Customer::class, 'id', 'customer_id');
+    }
+
+    public function displayName(){
+        // $parsed = json_decode($this->stripe_detail_json);
+        return "Ending: <b>{$this->card_last4}</b>; Expiry: {$this->expiration_month} / {$this->expiration_year}";
+    }
+}

resources/views/app/invoice-center/ic-customer-portal.blade.php

@@ -3,7 +3,7 @@
 <div class="container mcp-theme-1">
     <div class="d-flex align-items-baseline mt-3 mb-2">
         <h3 class="font-size-16 font-weight-bold text-dark">{{$customer->client->displayName()}} / {{$company->name}}</h3>
-        <a href="{{config('app.stagfe6_url')}}" class="ml-auto">
+        <a href="{{config('app.stagfe6_url')}}" class="ml-auto text-nowrap">
             <i class="fa fa-power-off"></i>
             Exit
         </a>
@@ -99,26 +99,7 @@
                 <div class="text-secondary">No transactions yet!</div>
             @endif
         </div>
-        <div class="col-md-4 border-left">
-            <div class="mb-3">
-                <span class="font-weight-bold text-secondary">Current Balance: </span>
-                <span class="font-weight-bold text-dark">${{!is_null($customer->customer_balance) ? $customer->customer_balance : 0}}</span>
-            </div>
-            <h3 class="font-weight-bold mb-2 text-secondary">Redeem Gift Card</h3>
-            <div moe>
-                <form url="/api/giftCard/redeem" show>
-                    <input type="hidden" name="customerUid" value="{{$customer->uid}}">
-                    <p class="mb-2">If you have a gift card from {{$company->name}}, please enter its code below:</p>
-                    <div class="mb-2">
-                        <input type="text" name="code" placeholder="Code" class="form-control form-control-sm">
-                    </div>
-                    <div class="text-left">
-                        <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
-                        <button cancel class="btn btn-sm btn-default border">Cancel</button>
-                    </div>
-                </form>
-            </div>
-        </div>
+        @include('app.invoice-center.ic-rhs')
     </div>
 </div>
 @endsection

resources/views/app/invoice-center/ic-manage-account.blade.php

@@ -0,0 +1,103 @@
+@extends ('layouts.ic')
+@section('content')
+    <div class="container mcp-theme-1">
+        <div class="d-flex align-items-baseline mt-3 mb-2">
+            <h3 class="font-size-16 font-weight-bold text-dark">Manage Account</h3>
+            <a href="{{route('icCustomerPortal', ['customerSlug' => $customer->slug])}}" class="ml-auto">
+                <i class="fa fa-chevron-left"></i>
+                Back to Home
+            </a>
+        </div>
+        <hr class="mt-0 mb-3">
+        <div class="row">
+            <div class="col-md-8">
+                <div class="d-flex align-items-baseline mt-4">
+                    <h4 class="title-sm m-0">Payment Methods</h4>
+                    <div moe class="ml-3">
+                        <a start show href="#" class="text-nowrap">Add Payment Method</a>
+                        <form url="/api/paymentMethod/create">
+                            <input type="hidden" name="customerUid" value="{{$customer->uid}}">
+                            <input type="hidden" name="customerSlug" value="{{$customer->slug}}">
+                            <p class="text-secondary font-weight-bold mb-1 text-nowrap">Add Payment Method</p>
+                            <div class="mb-2">
+                                <lable class="mb-1 text-secondary text-sm">Card Number</lable>
+                                <input type="text" name="cardNumber" value="" class="form-control form-control-sm min-width-200px" required>
+                            </div>
+                            <div class="mb-2">
+                                <lable class="mb-1 text-secondary text-sm">Name nn Card</lable>
+                                <input type="text" name="nameOnCard" value="" class="form-control form-control-sm min-width-200px" required>
+                            </div>
+                            <div class="mb-2">
+                                <lable class="mb-1 text-secondary text-sm">Expiry Date</lable>
+                                <div class="d-flex align-items-start">
+                                    <select class="form-control form-control-sm" name="expirationMonth" required>
+                                        <option value="">-- select --</option>
+                                        <option value="1">January</option>
+                                        <option value="2">February</option>
+                                        <option value="3">March</option>
+                                        <option value="4">April</option>
+                                        <option value="5">May</option>
+                                        <option value="6">June</option>
+                                        <option value="7">July</option>
+                                        <option value="8">August</option>
+                                        <option value="9">September</option>
+                                        <option value="10">October</option>
+                                        <option value="11">November</option>
+                                        <option value="12">December</option>
+                                    </select>
+                                    <select class="form-control form-control-sm ml-2" name="expirationYear" required>
+                                        <option value="">-- select --</option>
+                                        <option value="2022">2022</option>
+                                        <option value="2023">2023</option>
+                                        <option value="2024">2024</option>
+                                        <option value="2025">2025</option>
+                                        <option value="2026">2026</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-2">
+                                <lable class="mb-1 text-secondary text-sm">CVV/CCV Number</lable>
+                                <input type="text" name="ccv" value="" class="form-control form-control-sm min-width-200px" required>
+                            </div>
+                            <div class="mb-2">
+                                <lable class="mb-1 text-secondary text-sm">Billing Zip</lable>
+                                <input type="text" name="billingZip" value="" class="form-control form-control-sm min-width-200px">
+                            </div>
+                            <div class="d-flex align-items-center">
+                                <button submit class="btn btn-sm btn-primary me-2">Submit</button>
+                                <button cancel class="btn btn-sm btn-default">Cancel</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <hr class="red-underline">
+                @if(count($customer->paymentMethods))
+                    @php
+                        $index = 1;
+                    @endphp
+                    @foreach($customer->paymentMethods as $method)
+                        <div class="mb-2 px-3 py-2 bg-light border">
+                            <div class="d-flex align-items-center flex-nowrap">
+                                <span>{!! $method->displayName() !!}</span>
+                                <div moe class="ml-3">
+                                    <a start show href="#" class="text-nowrap text-sm">Remove</a>
+                                    <form url="/api/paymentMethod/deactivate">
+                                        <input type="hidden" name="uid" value="{{$method->uid}}">
+                                        <p class="text-secondary font-weight-bold mb-2 text-nowrap">Remove this Payment Method?</p>
+                                        <div class="d-flex align-items-center">
+                                            <button submit class="btn btn-sm btn-primary me-2">Submit</button>
+                                            <button cancel class="btn btn-sm btn-default">Cancel</button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    @endforeach
+                @else
+                    <div class="my-3">You have not set up any payment methods!</div>
+                @endif
+            </div>
+            @include('app.invoice-center.ic-rhs')
+        </div>
+    </div>
+@endsection

resources/views/app/invoice-center/ic-pay-invoice.blade.php

@@ -52,51 +52,62 @@
                                 <span class="text-success">PAID</span>
                             </div>
                         @else
-                            @if($customer->customer_balance >= $invoice->balance)
-                                <div moe relative class="mt-3">
-                                    <a href="#" start show class="btn btn-sm btn-primary text-white font-weight-bold py-2">Pay <b>${{$invoice->balance}}</b> from your current balance (${{$customer->customer_balance}})</a>
-                                    <form url="/api/invoiceTransaction/createPlusForCustomerTransaction">
-                                        <p class="mb-2 text-left">Confirm Payment?</p>
-                                        <input type="hidden" name="invoiceUid" value="{{$invoice->uid}}">
-                                        <input type="hidden" name="amount" value="{{$invoice->balance}}">
-                                        <input type="hidden" name="customMemo" value="Payment by customer via balance">
-                                        <div class="text-left">
-                                            <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
-                                            <button cancel class="btn btn-sm btn-default border">Cancel</button>
-                                        </div>
-                                    </form>
-                                </div>
-                            @else
-                                <div class="mt-3 border rounded border-secondary p-2 text-center text-warning-dark">
-                                    Your current balance (${{$customer->customer_balance}}) is less than the due amount (${{$invoice->balance}}). If you have a gift card, use its code on the right hand side to add funds to your balance.
-                                </div>
-                            @endif
+                            <div class="d-flex align-items-start flex-wrap justify-content-end">
+                                @if($customer->customer_balance >= $invoice->balance)
+                                    <div moe relative class="mt-3">
+                                        <a href="#" start show class="btn btn-sm btn-primary text-white font-weight-bold py-2">Pay <b>${{$invoice->balance}}</b> from your current balance (${{$customer->customer_balance}})</a>
+                                        <form url="/api/invoiceTransaction/createPlusForCustomerTransaction">
+                                            <p class="mb-2 text-left">Confirm Payment?</p>
+                                            <input type="hidden" name="invoiceUid" value="{{$invoice->uid}}">
+                                            <input type="hidden" name="amount" value="{{$invoice->balance}}">
+                                            <input type="hidden" name="customMemo" value="Payment by customer via balance">
+                                            <div class="text-left">
+                                                <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
+                                                <button cancel class="btn btn-sm btn-default border">Cancel</button>
+                                            </div>
+                                        </form>
+                                    </div>
+                                @else
+                                    <div class="mt-3 border rounded border-secondary p-2 text-left text-warning-dark w-100">
+                                        <b>Cannot pay from your balance:</b> Your current balance (${{$customer->customer_balance}}) is less than the due amount (${{$invoice->balance}}). If you have a gift card, use its code on the right hand side to add funds to your balance.
+                                    </div>
+                                @endif
+                                @if(count($customer->paymentMethods))
+                                    <div moe relative class="mt-3 text-left ml-2">
+                                        <a href="#" start show class="btn btn-sm btn-primary text-white font-weight-bold py-2">Pay <b>${{$invoice->balance}}</b> from your credit card</a>
+                                        <form url="/api/financialTransaction/createForInvoice">
+                                            <p class="mb-2 text-left">Pay Invoice</p>
+                                            <input type="hidden" name="invoiceUid" value="{{$invoice->uid}}">
+                                            <input type="hidden" name="amount" value="{{$invoice->balance}}">
+                                            <input type="hidden" name="paymentLinkSlug" value="{{$invoice->payment_link_slug}}">
+                                            <div class="mb-2">
+                                                <label class="text-sm text-secondary mb-1">Payment Method</label>
+                                                <select name="paymentMethodUid" class="form-control form-control-sm" required>
+                                                    <option value="">-- select --</option>
+                                                    @foreach($customer->paymentMethods as $paymentMethod)
+                                                        <option value="{{$paymentMethod->uid}}">{{strip_tags($paymentMethod->displayName())}}</option>
+                                                    @endforeach
+                                                </select>
+                                            </div>
+                                            <div class="text-left">
+                                                <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
+                                                <button cancel class="btn btn-sm btn-default border">Cancel</button>
+                                            </div>
+                                        </form>
+                                    </div>
+                                @else
+                                    <div class="mt-3 border rounded border-secondary p-2 text-left text-warning-dark w-100">
+                                        You have not setup any payment methods yet. <a href="/ic/manageAccount/{{$customer->slug}}">Click here</a> to set one up.
+                                    </div>
+                                @endif
+                            </div>
                         @endif
                     </td>
                 </tr>
                 </tbody>
             </table>
         </div>
-        <div class="col-md-4 border-left">
-            <div class="mb-3">
-                <span class="font-weight-bold text-secondary">Current Balance: </span>
-                <span class="font-weight-bold text-dark">${{!is_null($customer->customer_balance) ? $customer->customer_balance : 0}}</span>
-            </div>
-            <h3 class="font-weight-bold mb-2 text-secondary">Redeem Gift Card</h3>
-            <div moe>
-                <form url="/api/giftCard/redeem" show>
-                    <input type="hidden" name="customerUid" value="{{$customer->uid}}">
-                    <p class="mb-2">If you have a gift card from {{$company->name}}, please enter its code below:</p>
-                    <div class="mb-2">
-                        <input type="text" name="code" placeholder="Code" class="form-control form-control-sm">
-                    </div>
-                    <div class="text-left">
-                        <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
-                        <button cancel class="btn btn-sm btn-default border">Cancel</button>
-                    </div>
-                </form>
-            </div>
-        </div>
+        @include('app.invoice-center.ic-rhs')
     </div>
 </div>
 @endsection

resources/views/app/invoice-center/ic-rhs.blade.php

@@ -0,0 +1,23 @@
+<div class="col-md-4 border-left">
+    <div class="mb-3">
+        <span class="font-weight-bold text-secondary">Current Balance: </span>
+        <span class="font-weight-bold text-dark">${{!is_null($customer->customer_balance) ? $customer->customer_balance : 0}}</span>
+    </div>
+    @if(request()->route()->getName() !== 'icManageAccount')
+        <a href="/ic/manageAccount/{{$customer->slug}}" class="font-weight-bold mb-3 d-block">Manage Payment Methods</a>
+    @endif
+    <h3 class="font-weight-bold mb-2 text-secondary">Redeem Gift Card</h3>
+    <div moe>
+        <form url="/api/giftCard/redeem" show>
+            <input type="hidden" name="customerUid" value="{{$customer->uid}}">
+            <p class="mb-2">If you have a gift card from {{$company->name}}, please enter its code below:</p>
+            <div class="mb-2">
+                <input type="text" name="code" placeholder="Code" class="form-control form-control-sm">
+            </div>
+            <div class="text-left">
+                <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
+                <button cancel class="btn btn-sm btn-default border">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>

routes/web.php

@@ -784,3 +784,4 @@ Route::get('/document-pdf/{uid}', 'DocumentsController@generateDocumentPDF')->na
 // ic pages - client facing
 Route::get('/ic/home/{customerSlug}', 'InvoiceController@icCustomerPortal')->name('icCustomerPortal');
 Route::get('/ic/pay/{invoiceSlug}', 'InvoiceController@icPayInvoice')->name('icPayInvoice');
+Route::get('/ic/manageAccount/{customerSlug}', 'InvoiceController@icManageAccount')->name('icManageAccount');