Extract Javascript into separate file

public/mix-manifest.json

@@ -5,6 +5,7 @@
     "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=8ce8955ba775ea5f47d1",
     "/js/clients/linkify-urls.js": "/js/clients/linkify-urls.js?id=0dc8c34010d09195d2f7",
     "/js/clients/payment_methods/authorize-authorize-card.js": "/js/clients/payment_methods/authorize-authorize-card.js?id=f7f4ecfb1771951b91e7",
+    "/js/clients/payment_methods/braintree-ach.js": "/js/clients/payment_methods/braintree-ach.js?id=9fb7941baba1f9645ed9",
     "/js/clients/payment_methods/wepay-bank-account.js": "/js/clients/payment_methods/wepay-bank-account.js?id=8fea0be371d430064a89",
     "/js/clients/payments/authorize-credit-card-payment.js": "/js/clients/payments/authorize-credit-card-payment.js?id=7c2cbef525868592f42e",
     "/js/clients/payments/braintree-credit-card.js": "/js/clients/payments/braintree-credit-card.js?id=81957e7cb1cb49f23b90",

resources/js/clients/payment_methods/braintree-ach.js

@@ -0,0 +1,66 @@
+/**
+ * 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
+ */
+
+window.braintree.client.create({
+    authorization: document.querySelector('meta[name="client-token"]')?.content
+}).then(function (clientInstance) {
+    return braintree.usBankAccount.create({
+        client: clientInstance
+    });
+}).then(function (usBankAccountInstance) {
+    document
+        .getElementById('authorize-bank-account')
+        ?.addEventListener('click', (e) => {
+            e.target.parentElement.disabled = true;
+
+            document.getElementById('errors').hidden = true;
+            document.getElementById('errors').textContent = '';
+
+            let bankDetails = {
+                accountNumber: document.getElementById('account-number').value,
+                routingNumber: document.getElementById('routing-number').value,
+                accountType: document.querySelector('input[name="account-type"]:checked').value,
+                ownershipType: document.querySelector('input[name="ownership-type"]:checked').value,
+                billingAddress: {
+                    streetAddress: document.getElementById('billing-street-address').value,
+                    extendedAddress: document.getElementById('billing-extended-address').value,
+                    locality: document.getElementById('billing-locality').value,
+                    region: document.getElementById('billing-region').value,
+                    postalCode: document.getElementById('billing-postal-code').value
+                }
+            }
+
+            if (bankDetails.ownershipType === 'personal') {
+                let name = document.getElementById('account-holder-name').value.split(' ', 2);
+
+                bankDetails.firstName = name[0];
+                bankDetails.lastName = name[1];
+            } else {
+                bankDetails.businessName = document.getElementById('account-holder-name').value;
+            }
+
+            usBankAccountInstance.tokenize({
+                bankDetails,
+                mandateText: 'By clicking ["Checkout"], I authorize Braintree, a service of PayPal, on behalf of [your business name here] (i) to verify my bank account information using bank information and consumer reports and (ii) to debit my bank account.'
+            }).then(function (payload) {
+                document.querySelector('input[name=nonce]').value = payload.nonce;
+                document.getElementById('server_response').submit();
+            })
+                .catch(function (error) {
+                    e.target.parentElement.disabled = false;
+
+                    document.getElementById('errors').textContent = `${error.details.originalError.message} ${error.details.originalError.details.originalError[0].message}`;
+                    document.getElementById('errors').hidden = false;
+                });
+        });
+}).catch(function (err) {
+    document.getElementById('errors').textContent = `${error.details.originalError.message} ${error.details.originalError.details.originalError[0].message}`;
+    document.getElementById('errors').hidden = false;
+});

resources/views/portal/ninja2020/gateways/braintree/ach/authorize.blade.php

@@ -87,63 +87,5 @@
 @section('gateway_footer')
     <script src="https://js.braintreegateway.com/web/3.81.0/js/client.min.js"></script>
     <script src="https://js.braintreegateway.com/web/3.81.0/js/us-bank-account.min.js"></script>
-
-    <script>
-        braintree.client.create({
-            authorization: document.querySelector('meta[name="client-token"]')?.content
-        }).then(function (clientInstance) {
-            return braintree.usBankAccount.create({
-                client: clientInstance
-            });
-        }).then(function (usBankAccountInstance) {
-            document
-                .getElementById('authorize-bank-account')
-                ?.addEventListener('click', (e) => {
-                    e.target.parentElement.disabled = true;
-
-                    document.getElementById('errors').hidden = true;
-                    document.getElementById('errors').textContent = '';
-
-                    let bankDetails = {
-                        accountNumber: document.getElementById('account-number').value,
-                        routingNumber: document.getElementById('routing-number').value,
-                        accountType: document.querySelector('input[name="account-type"]:checked').value,
-                        ownershipType: document.querySelector('input[name="ownership-type"]:checked').value,
-                        billingAddress: {
-                            streetAddress: document.getElementById('billing-street-address').value,
-                            extendedAddress: document.getElementById('billing-extended-address').value,
-                            locality: document.getElementById('billing-locality').value,
-                            region: document.getElementById('billing-region').value,
-                            postalCode: document.getElementById('billing-postal-code').value
-                        }
-                    }
-
-                    if (bankDetails.ownershipType === 'personal') {
-                        let name = document.getElementById('account-holder-name').value.split(' ', 2);
-
-                        bankDetails.firstName = name[0];
-                        bankDetails.lastName = name[1];
-                    } else {
-                        bankDetails.businessName = document.getElementById('account-holder-name').value;
-                    }
-
-                    usBankAccountInstance.tokenize({
-                        bankDetails,
-                        mandateText: 'By clicking ["Checkout"], I authorize Braintree, a service of PayPal, on behalf of [your business name here] (i) to verify my bank account information using bank information and consumer reports and (ii) to debit my bank account.'
-                    }).then(function (payload) {
-                        document.querySelector('input[name=nonce]').value = payload.nonce;
-                        document.getElementById('server_response').submit();
-                    })
-                        .catch(function (error) {
-                            e.target.parentElement.disabled = false;
-
-                            document.getElementById('errors').textContent = `${error.details.originalError.message} ${error.details.originalError.details.originalError[0].message}`;
-                            document.getElementById('errors').hidden = false;
-                        });
-                });
-        }).catch(function (err) {
-            document.getElementById('errors').textContent = `${error.details.originalError.message} ${error.details.originalError.details.originalError[0].message}`;
-            document.getElementById('errors').hidden = false;
-        });
-    </script>
+    <script src="{{ asset('js/clients/payment_methods/braintree-ach.js') }}"></script>
 @endsection

webpack.mix.js

@@ -93,6 +93,10 @@ mix.js("resources/js/app.js", "public/js")
     .js(
         "resources/js/clients/payments/eway-credit-card.js",
         "public/js/clients/payments/eway-credit-card.js"
+    )
+    .js(
+        "resources/js/clients/payment_methods/braintree-ach.js",
+        "public/js/clients/payment_methods/braintree-ach.js"
     );
 
 mix.copyDirectory('node_modules/card-js/card-js.min.css', 'public/css/card-js.min.css');