From bc8f09deccbc74fa33379e571dbd7dfe058d0770 Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <ecastells@MacBook-Air-de-Emili.local>
Date: Thu, 14 Dec 2023 16:48:41 +0100
Subject: [PATCH] Load script once

---
 .../ppcp-save-payment-methods/package.json    |  3 +-
 .../resources/js/add-payment-method.js        | 51 +++++--------------
 modules/ppcp-save-payment-methods/yarn.lock   | 12 +++++
 3 files changed, 27 insertions(+), 39 deletions(-)

diff --git a/modules/ppcp-save-payment-methods/package.json b/modules/ppcp-save-payment-methods/package.json
index a1e23ce17..9556097d6 100644
--- a/modules/ppcp-save-payment-methods/package.json
+++ b/modules/ppcp-save-payment-methods/package.json
@@ -10,7 +10,8 @@
         "Edge >= 14"
     ],
     "dependencies": {
-        "core-js": "^3.25.0"
+        "core-js": "^3.25.0",
+        "@paypal/paypal-js": "^6.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.19",
diff --git a/modules/ppcp-save-payment-methods/resources/js/add-payment-method.js b/modules/ppcp-save-payment-methods/resources/js/add-payment-method.js
index f9fe06001..829877c3f 100644
--- a/modules/ppcp-save-payment-methods/resources/js/add-payment-method.js
+++ b/modules/ppcp-save-payment-methods/resources/js/add-payment-method.js
@@ -3,14 +3,11 @@ import {
     ORDER_BUTTON_SELECTOR,
     PaymentMethods
 } from "../../../ppcp-button/resources/js/modules/Helper/CheckoutMethodState";
-
+import {loadScript} from "@paypal/paypal-js";
 import {
     setVisible,
     setVisibleByClass
 } from "../../../ppcp-button/resources/js/modules/Helper/Hiding";
-import {
-    loadPaypalJsScriptPromise
-} from "../../../ppcp-button/resources/js/modules/Helper/ScriptLoading";
 import ErrorHandler from "../../../ppcp-button/resources/js/modules/ErrorHandler";
 import {cardFieldStyles} from "../../../ppcp-button/resources/js/modules/Helper/CardFieldsHelper";
 
@@ -22,17 +19,18 @@ const errorHandler = new ErrorHandler(
 const init = () => {
     setVisibleByClass(ORDER_BUTTON_SELECTOR, getCurrentPaymentMethod() !== PaymentMethods.PAYPAL, 'ppcp-hidden');
     setVisible(`#ppc-button-${PaymentMethods.PAYPAL}-save-payment-method`, getCurrentPaymentMethod() === PaymentMethods.PAYPAL);
+}
 
-    const buttonWrapper = document.querySelector(`#ppc-button-${PaymentMethods.PAYPAL}-save-payment-method`);
-    while (buttonWrapper.firstChild) {
-        buttonWrapper.removeChild(buttonWrapper.firstChild);
-    }
+document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+        init();
 
-    if(getCurrentPaymentMethod() === PaymentMethods.PAYPAL) {
-        loadPaypalJsScriptPromise({
+        loadScript({
             clientId: ppcp_add_payment_method.client_id,
             merchantId: ppcp_add_payment_method.merchant_id,
-            dataUserIdToken: ppcp_add_payment_method.id_token
+            dataUserIdToken: ppcp_add_payment_method.id_token,
+            components: 'buttons,card-fields',
         })
             .then((paypal) => {
                 errorHandler.clear();
@@ -85,21 +83,6 @@ const init = () => {
                         }
                     },
                 ).render(`#ppc-button-${PaymentMethods.PAYPAL}-save-payment-method`);
-            })
-            .catch((error) => {
-                console.error(error);
-            });
-    }
-
-    if(getCurrentPaymentMethod() === PaymentMethods.CARDS) {
-        loadPaypalJsScriptPromise({
-            clientId: ppcp_add_payment_method.client_id,
-            merchantId: ppcp_add_payment_method.merchant_id,
-            dataUserIdToken: ppcp_add_payment_method.id_token,
-            components: 'card-fields',
-        }, true)
-            .then((paypal) => {
-                errorHandler.clear();
 
                 const cardField = paypal.CardFields({
                     createVaultSetupToken: async () => {
@@ -189,19 +172,11 @@ const init = () => {
                             console.error(error)
                         });
                 });
-            })
-            .catch((error) => {
-                console.error(error)
-            })
-    }
-}
 
-document.addEventListener(
-    'DOMContentLoaded',
-    () => {
-        jQuery(document.body).on('click init_add_payment_method', '.payment_methods input.input-radio', function () {
-            init()
-        });
+                jQuery(document.body).on('click init_add_payment_method', '.payment_methods input.input-radio', function () {
+                    init()
+                });
+            })
     }
 );
 
diff --git a/modules/ppcp-save-payment-methods/yarn.lock b/modules/ppcp-save-payment-methods/yarn.lock
index 0b4549a0b..2171c2b89 100644
--- a/modules/ppcp-save-payment-methods/yarn.lock
+++ b/modules/ppcp-save-payment-methods/yarn.lock
@@ -1031,6 +1031,13 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@paypal/paypal-js@^6.0.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-6.0.1.tgz#5d68d5863a5176383fee9424bc944231668fcffd"
+  integrity sha512-bvYetmkg2GEC6onsUJQx1E9hdAJWff2bS3IPeiZ9Sh9U7h26/fIgMKm240cq/908sbSoDjHys75XXd8at9OpQA==
+  dependencies:
+    promise-polyfill "^8.3.0"
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.5"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.5.tgz#e28b09dbb1d9d35fdfa8a884225f00440dfc5a3e"
@@ -1868,6 +1875,11 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+promise-polyfill@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
+  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
+
 punycode@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"