From ad203ac2288d127840a7bf7389008d5a441e641e Mon Sep 17 00:00:00 2001
From: David Bomba <turbo124@gmail.com>
Date: Wed, 18 May 2022 14:22:04 +1000
Subject: [PATCH] ACH refactor

---
 .../gateways/stripe/ach/pay.blade.php         | 147 ++++++++++++------
 1 file changed, 103 insertions(+), 44 deletions(-)

diff --git a/resources/views/portal/ninja2020/gateways/stripe/ach/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/ach/pay.blade.php
index 3c4dd4e332eb..5a1fc11b44cb 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/ach/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/ach/pay.blade.php
@@ -52,11 +52,6 @@
 
     @else
 
-        @component('portal.ninja2020.components.general.card-element-single')
-            <input type="checkbox" class="form-checkbox mr-1" id="accept-terms" required>
-            <label for="accept-terms" class="cursor-pointer">{{ ctrans('texts.ach_authorization', ['company' => auth()->user()->company->present()->name, 'email' => auth()->guard('contact')->user()->client->company->settings->email]) }}</label>
-        @endcomponent
-
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.account_holder_name')])
             <input class="input w-full" id="account-holder-name-field" type="text" placeholder="{{ ctrans('texts.name') }}" value="{{ $gateway->client->present()->first_name() }} {{ $gateway->client->present()->last_name(); }}"required>
         @endcomponent
@@ -76,11 +71,74 @@
                     <span>{{ $slot ?? ctrans('texts.new_bank_account') }}</span>
                 </button>
             </dd>
+
+            <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
+                <div class="inline-flex rounded-md shadow-sm" x-data="{ open: false }">
+                    <button class="button button-danger" @click="open = true" id="open-delete-popup" style="display: none;">
+                        {{ ctrans('texts.remove_payment_method') }}
+                    </button>
+
+                    <div x-show="open" class="fixed inset-x-0 bottom-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center" style="display: none;">
+                        <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
+                             x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
+                             x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
+                             class="fixed inset-0 transition-opacity">
+                            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+                        </div>
+
+                        <div x-show="open" x-transition:enter="ease-out duration-300"
+                             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
+                             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                             class="px-4 pt-5 pb-4 overflow-hidden transition-all transform bg-white rounded-lg shadow-xl sm:max-w-lg sm:w-full sm:p-6">
+                            <div class="sm:flex sm:items-start">
+                                <div
+                                    class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
+                                    <svg class="w-6 h-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                                    </svg>
+                                </div>
+                                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                                    <h3 class="text-lg font-medium leading-6 text-gray-900" translate>
+                                        {{ ctrans('texts.confirmation') }}
+                                    </h3>
+                                    <div class="mt-2">
+                                        <p class="text-sm leading-5 text-gray-500">
+                                            
+                                            {{ ctrans('texts.ach_authorization', ['company' => auth()->user()->company->present()->name, 'email' => auth()->guard('contact')->user()->client->company->settings->email]) }}
+
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                                <div class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
+                                        <button type="submit" onclick="confirmPayment(() => this.disabled = true, 0); return true;" class="button button-danger button-block" dusk="confirm-payment-removal">
+                                            {{ ctrans('texts.confirm') }}
+                                        </button>
+                                </div>
+                                <div class="flex w-full mt-3 rounded-md shadow-sm sm:mt-0 sm:w-auto">
+
+                                    <button @click="open = false" type="button" class="button button-secondary button-block">
+                                        {{ ctrans('texts.cancel') }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
         </div>
     @endif
 
 @endsection
 
+
+
+
 @push('footer')
     <script src="https://js.stripe.com/v3/"></script>
 
@@ -88,6 +146,23 @@
 
             let payNow = document.getElementById('pay-now');
 
+            let stripePaymentIntent = '';
+
+            let stripe;
+
+            let response;
+
+            let publishableKey = document.querySelector('meta[name="stripe-publishable-key"]').content
+            let stripeConnect = document.querySelector('meta[name="stripe-account-id"]')?.content
+           
+            if(stripeConnect){
+               stripe = Stripe(publishableKey, { stripeAccount: stripeConnect}); 
+            }
+            else {
+                stripe = Stripe(publishableKey);
+            }
+
+
             if(payNow)
             {
             
@@ -113,27 +188,8 @@
 
         document.getElementById('new-bank').addEventListener('click', (ev) => {
 
-            if (!document.getElementById('accept-terms').checked) {
-                    errors.textContent = "You must accept the mandate terms prior to making payment.";
-                    errors.hidden = false;
-
-                    return;
-                }
-
             errors.hidden = true;
 
-            let stripe;
-
-            let publishableKey = document.querySelector('meta[name="stripe-publishable-key"]').content
-            let stripeConnect = document.querySelector('meta[name="stripe-account-id"]')?.content
-           
-            if(stripeConnect){
-               stripe = Stripe(publishableKey, { stripeAccount: stripeConnect}); 
-            }
-            else {
-                stripe = Stripe(publishableKey);
-            }
-
             let newBankButton = document.getElementById('new-bank');
                 newBankButton.disabled = true;
                 newBankButton.querySelector('svg').classList.remove('hidden');
@@ -174,16 +230,23 @@
                       // manually-entered. Display payment method details and mandate text
                       // to the customer and confirm the intent once they accept
                       // the mandate.
+                      stripePaymentIntent = paymentIntent;
 
+                      showModal(paymentIntent);
 
-
-                      confirmPayment(stripe, clientSecret);
                     }
                   });
 
         });
 
-        function confirmPayment(stripe, clientSecret){
+        function showModal(paymentIntent)
+        {
+            document.getElementById('open-delete-popup').click();
+        }
+
+        function confirmPayment(){
+
+          const clientSecret = document.querySelector('meta[name="client_secret"]')?.content;
 
             stripe.confirmUsBankAccountPayment(clientSecret)
               .then(({paymentIntent, error}) => {
@@ -204,35 +267,31 @@
                   // Confirmation succeeded! The account will be debited.
                   // Display a message to customer.
 
-                    // let gateway_response = document.querySelector('input[name="gateway_response"]');
-                    // gateway_response.value = JSON.stringify(paymentIntent.id);
-
-                    var wait = paymentIntent => new Promise(resolve => setTimeout(resolve, paymentIntent));
-
-                    // document.getElementById('server-response').submit();
-
-
                 } else if (paymentIntent.next_action?.type === "verify_with_microdeposits") {
                   // The account needs to be verified via microdeposits.
                   // Display a message to consumer with next steps (consumer waits for
                   // microdeposits, then enters a statement descriptor code on a page sent to them via email).
                 }
+              }).finally((promise) => {
+
+                console.log(promise);
+                console.log("and we are finished")
+
               });
 
-        
+            
+
             resetButtons();
 
+            finalize();
+
         }
 
+        function finalize()
+        {
 
-        function setTimeout(paymentIntent){
-
-            let gateway_response = document.getElementById('gateway_response');
-            gateway_response.value = JSON.stringify(
-                paymentIntent
-            );
-            document.getElementById('server-response').submit();
-
+        document.getElementById('server-response').submit();
+        
         }
 
         function resetButtons()