From c75d9ce56fa8f0f807ce68156f328f3b8aa3b351 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 11 Jun 2024 15:23:06 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Improve=20error=20logging=20and?=
 =?UTF-8?q?=20dependency=20detection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/Renderer/PreviewButtonManager.js  | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
index fcb61fbe4..fef94d995 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js
@@ -105,16 +105,38 @@ class PreviewButtonManager {
         const customScriptPromise = loadCustomScript({url: this.buttonConfig.sdk_url});
 
         // Wait until PayPal is ready.
-        const paypalPromise = new Promise(resolve => {
-            if (this.widgetBuilder.paypal) {
-                resolve();
-            } else {
-                jQuery(document).on('ppcp-paypal-loaded', resolve);
+        const paypalPromise = new Promise((resolve, reject) => {
+            const maxWaitTime = 3000; // 3 seconds before failing.
+
+            const resolveIfAvailable = () => {
+                if (this.widgetBuilder.paypal) {
+                    resolve();
+                }
             }
+
+            // Resolve this promise instantly, if the PayPal object is available.
+            resolveIfAvailable();
+
+            // If the object is not available yet, wait for (a) the custom event, or (b) a custom timeout.
+            jQuery(document).on('ppcp-paypal-loaded', resolve);
+            setTimeout(() => {
+                resolveIfAvailable();
+                reject('Timeout while waiting for widgetBuilder.paypal')
+            }, maxWaitTime)
         });
 
-        await Promise.all([customScriptPromise, paypalPromise]);
+        // Wait for both promises to resolve before continuing.
+        await Promise
+            .all([customScriptPromise, paypalPromise])
+            .catch(err => {
+                console.log(`Failed to load ${this.methodName} dependencies:`, err)
+            })
 
+        /*
+        The fetchConfig method requires two objects to succeed:
+        (a) the SDK custom-script
+        (b) the `widgetBuilder.paypal` object
+         */
         this.apiConfig = await this.fetchConfig();
         await this.#onInitResolver()