@tagadapay/plugin-sdk 3.1.5 → 3.1.9

package/dist/v2/react/components/FunnelScriptInjector.d.ts

@@ -6,7 +6,9 @@ interface FunnelScriptInjectorProps extends FunnelState {
  *
  * This component:
  * - Sets up Tagada on the window object
- * - Injects and manages funnel scripts from the context
+ * - Injects scripts from stepConfig.scripts (NEW: from HTML injection, supports A/B variants)
+ * - Falls back to context.script (LEGACY: from funnel context)
+ * - Handles script positions: head-start, head-end, body-start, body-end
  * - Prevents duplicate script injection (handles React StrictMode)
  * - Cleans up scripts when context changes or component unmounts
  */

package/dist/v2/react/components/FunnelScriptInjector.js

@@ -1,167 +1,169 @@
 'use client';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { getAssignedStepConfig } from '../../core';
 /**
  * FunnelScriptInjector - Handles injection of funnel scripts into the page.
  *
  * This component:
  * - Sets up Tagada on the window object
- * - Injects and manages funnel scripts from the context
+ * - Injects scripts from stepConfig.scripts (NEW: from HTML injection, supports A/B variants)
+ * - Falls back to context.script (LEGACY: from funnel context)
+ * - Handles script positions: head-start, head-end, body-start, body-end
  * - Prevents duplicate script injection (handles React StrictMode)
  * - Cleans up scripts when context changes or component unmounts
  */
 export function FunnelScriptInjector({ context, isInitialized }) {
-    console.log('FunnelScriptInjector here', context, isInitialized); // Track last injected script to prevent duplicate execution
+    // Track last injected scripts to prevent duplicate execution
     const lastInjectedScriptRef = useRef(null);
-    useEffect(() => {
-        // Only run in browser environment
-        if (typeof document === 'undefined') {
-            return;
+    const lastInjectedStepConfigScriptsRef = useRef(null);
+    // Get stepConfig scripts from HTML injection or local config
+    // Re-compute when initialized (local config loads async, so we need to re-check)
+    const stepConfigScripts = useMemo(() => {
+        const stepConfig = getAssignedStepConfig();
+        const scripts = stepConfig?.scripts?.filter(s => s.enabled) || [];
+        if (scripts.length > 0) {
+            console.log('📜 [SDK] Found stepConfig scripts:', scripts.length, scripts.map(s => s.name));
         }
-        // Set up Tagada for funnel scripts (similar to HtmlScript.tsx)
-        const setupTagada = () => {
-            // @ts-expect-error - Adding utilities to window
-            if (window.Tagada) {
-                // Update pageType if context is available
-                if (context?.currentStepId) {
-                    // @ts-expect-error - Updating window property
-                    window.Tagada.pageType = context.currentStepId;
-                }
-                // Update isInitialized
-                // @ts-expect-error - Updating window property
-                window.Tagada.isInitialized = isInitialized;
-                // Update ressources
+        return scripts;
+    }, [isInitialized]); // Re-compute when funnel initializes (local config should be loaded by then)
+    // Set up Tagada on window object - must be available before any scripts run
+    // Memoized to prevent unnecessary recreations across re-renders
+    const setupTagada = useCallback(() => {
+        if (typeof window === 'undefined')
+            return;
+        // @ts-expect-error - Adding utilities to window
+        if (window.Tagada) {
+            // Update properties if Tagada already exists
+            if (context?.currentStepId) {
                 // @ts-expect-error - Updating window property
-                window.Tagada.ressources = context?.resources || null;
-                return; // Utils already exist, just update properties
+                window.Tagada.pageType = context.currentStepId;
             }
-            // @ts-expect-error - Adding utilities to window
-            window.Tagada = {
-                // Wait for DOM to be ready
-                ready: (callback) => {
-                    if (document.readyState === 'loading') {
-                        document.addEventListener('DOMContentLoaded', callback);
-                    }
-                    else {
+            // @ts-expect-error - Updating window property
+            window.Tagada.isInitialized = isInitialized;
+            // @ts-expect-error - Updating window property
+            window.Tagada.ressources = context?.resources || null;
+            return;
+        }
+        // @ts-expect-error - Adding utilities to window
+        window.Tagada = {
+            // Wait for DOM to be ready
+            ready: (callback) => {
+                if (document.readyState === 'loading') {
+                    document.addEventListener('DOMContentLoaded', callback);
+                }
+                else {
+                    callback();
+                }
+            },
+            // Wait for window to be fully loaded AND funnel to be initialized
+            loaded: (callback) => {
+                const checkBothConditions = () => {
+                    const pageLoaded = document.readyState === 'complete';
+                    // @ts-expect-error - Accessing window property
+                    const funnelInitialized = window.Tagada?.isInitialized === true;
+                    if (pageLoaded && funnelInitialized) {
                         callback();
+                        return true;
                     }
-                },
-                // Wait for window to be fully loaded AND funnel to be initialized
-                loaded: (callback) => {
-                    const checkBothConditions = () => {
-                        const pageLoaded = document.readyState === 'complete';
-                        // @ts-expect-error - Accessing window property
-                        const funnelInitialized = window.Tagada?.isInitialized === true;
-                        if (pageLoaded && funnelInitialized) {
-                            callback();
-                            return true;
-                        }
-                        return false;
-                    };
-                    // Check immediately
-                    if (checkBothConditions()) {
-                        return;
+                    return false;
+                };
+                if (checkBothConditions()) {
+                    return;
+                }
+                let loadListener = null;
+                let initCheckInterval = null;
+                let hasCalled = false;
+                const cleanup = () => {
+                    if (loadListener) {
+                        window.removeEventListener('load', loadListener);
+                        loadListener = null;
                     }
-                    // Set up listeners for both conditions
-                    let loadListener = null;
-                    let initCheckInterval = null;
-                    let hasCalled = false;
-                    const cleanup = () => {
-                        if (loadListener) {
-                            window.removeEventListener('load', loadListener);
-                            loadListener = null;
-                        }
-                        if (initCheckInterval) {
-                            clearInterval(initCheckInterval);
-                            initCheckInterval = null;
-                        }
-                    };
-                    // Listen for page load
-                    loadListener = () => {
-                        if (checkBothConditions() && !hasCalled) {
-                            hasCalled = true;
-                            cleanup();
-                        }
-                    };
-                    window.addEventListener('load', loadListener);
-                    // Poll for initialization status (in case page loads before initialization)
-                    initCheckInterval = setInterval(() => {
-                        if (checkBothConditions() && !hasCalled) {
-                            hasCalled = true;
-                            cleanup();
-                        }
-                    }, 100);
-                    // Timeout fallback (10 seconds max wait)
-                    setTimeout(() => {
-                        if (!hasCalled) {
-                            hasCalled = true;
-                            cleanup();
-                            // Call anyway if page is loaded (graceful degradation)
-                            if (document.readyState === 'complete') {
-                                callback();
-                            }
-                        }
-                    }, 10000);
-                },
-                // Execute with delay
-                delay: (callback, ms = 1000) => {
-                    setTimeout(callback, ms);
-                },
-                // Retry until condition is met
-                retry: (condition, callback, maxAttempts = 10, interval = 500) => {
-                    let attempts = 0;
-                    const check = () => {
-                        attempts++;
-                        if (condition() || attempts >= maxAttempts) {
+                    if (initCheckInterval) {
+                        clearInterval(initCheckInterval);
+                        initCheckInterval = null;
+                    }
+                };
+                loadListener = () => {
+                    if (checkBothConditions() && !hasCalled) {
+                        hasCalled = true;
+                        cleanup();
+                    }
+                };
+                window.addEventListener('load', loadListener);
+                initCheckInterval = setInterval(() => {
+                    if (checkBothConditions() && !hasCalled) {
+                        hasCalled = true;
+                        cleanup();
+                    }
+                }, 100);
+                setTimeout(() => {
+                    if (!hasCalled) {
+                        hasCalled = true;
+                        cleanup();
+                        if (document.readyState === 'complete') {
                             callback();
                         }
-                        else {
-                            setTimeout(check, interval);
-                        }
-                    };
-                    check();
-                },
-                // Wait for element to exist
-                waitForElement: (selector, callback, timeout = 10000) => {
+                    }
+                }, 10000);
+            },
+            delay: (callback, ms = 1000) => {
+                setTimeout(callback, ms);
+            },
+            retry: (condition, callback, maxAttempts = 10, interval = 500) => {
+                let attempts = 0;
+                const check = () => {
+                    attempts++;
+                    if (condition() || attempts >= maxAttempts) {
+                        callback();
+                    }
+                    else {
+                        setTimeout(check, interval);
+                    }
+                };
+                check();
+            },
+            waitForElement: (selector, callback, timeout = 10000) => {
+                const element = document.querySelector(selector);
+                if (element) {
+                    callback(element);
+                    return;
+                }
+                const observer = new MutationObserver(() => {
                     const element = document.querySelector(selector);
                     if (element) {
-                        callback(element);
-                        return;
-                    }
-                    const observer = new MutationObserver(() => {
-                        const element = document.querySelector(selector);
-                        if (element) {
-                            observer.disconnect();
-                            callback(element);
-                        }
-                    });
-                    observer.observe(document.body, {
-                        childList: true,
-                        subtree: true,
-                    });
-                    // Timeout fallback
-                    setTimeout(() => {
                         observer.disconnect();
-                    }, timeout);
-                },
-                // Page type helper (current step ID)
-                pageType: context?.currentStepId || null,
-                // Funnel initialization status
-                isInitialized: isInitialized,
-                // Expose resources directly (convenience access)
-                ressources: context?.resources || null,
-                // Expose funnel context data
-                funnel: context
-                    ? {
-                        sessionId: context.sessionId,
-                        funnelId: context.funnelId,
-                        currentStepId: context.currentStepId,
-                        previousStepId: context.previousStepId,
-                        ressources: context.resources,
+                        callback(element);
                     }
-                    : null,
-            };
+                });
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                });
+                setTimeout(() => {
+                    observer.disconnect();
+                }, timeout);
+            },
+            pageType: context?.currentStepId || null,
+            isInitialized: isInitialized,
+            ressources: context?.resources || null,
+            funnel: context
+                ? {
+                    sessionId: context.sessionId,
+                    funnelId: context.funnelId,
+                    currentStepId: context.currentStepId,
+                    previousStepId: context.previousStepId,
+                    ressources: context.resources,
+                }
+                : null,
+            stepConfig: getAssignedStepConfig() || null,
         };
-        // Set up utilities before injecting script
+    }, [context, isInitialized]);
+    useEffect(() => {
+        // Only run in browser environment
+        if (typeof document === 'undefined') {
+            return;
+        }
+        // Set up Tagada utilities before injecting legacy script
         setupTagada();
         const scriptContent = context?.script;
         const scriptId = 'tagada-funnel-script';
@@ -197,27 +199,27 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             existingScript.remove();
         }
         // Wrap script content with error handling and context checks
-        const wrappedScript = `
-      (function() {
-        try {
-          // Check if we have basic DOM access
-          if (typeof document === 'undefined') {
-            console.error('[TagadaPay] Document not available');
-            return;
-          }
-          
-          // Check if we have Tagada
-          if (!window.Tagada) {
-            console.error('[TagadaPay] Tagada not available');
-            return;
-          }
-          
-          // Execute the original script
-          ${scriptBody}
-        } catch (error) {
-          console.error('[TagadaPay] Script execution error:', error);
-        }
-      })();
+        const wrappedScript = `
+      (function() {
+        try {
+          // Check if we have basic DOM access
+          if (typeof document === 'undefined') {
+            console.error('[TagadaPay] Document not available');
+            return;
+          }
+          
+          // Check if we have Tagada
+          if (!window.Tagada) {
+            console.error('[TagadaPay] Tagada not available');
+            return;
+          }
+          
+          // Execute the original script
+          ${scriptBody}
+        } catch (error) {
+          console.error('[TagadaPay] Script execution error:', error);
+        }
+      })();
     `;
         // Create and inject new script element
         const scriptElement = document.createElement('script');
@@ -236,7 +238,98 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             // This prevents React StrictMode from re-injecting the same script on the second run
             // The ref will be cleared when script content actually changes (next effect run)
         };
-    }, [context?.script, context?.currentStepId, isInitialized]);
+    }, [context?.script, context?.currentStepId, isInitialized, setupTagada]);
+    // Effect for NEW stepConfig.scripts (from HTML injection, supports A/B variants)
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        // IMPORTANT: Set up Tagada BEFORE injecting any scripts
+        // This ensures Tagada.ready() is always available when scripts run
+        setupTagada();
+        if (stepConfigScripts.length === 0)
+            return;
+        // Create a hash of current scripts to detect changes
+        const scriptsHash = JSON.stringify(stepConfigScripts.map(s => ({ name: s.name, content: s.content, position: s.position })));
+        // Check if scripts are actually in the DOM (handles React StrictMode cleanup)
+        const existingScripts = document.querySelectorAll('[data-tagada-stepconfig-script]');
+        const scriptsExistInDom = existingScripts.length > 0;
+        // Skip ONLY if: same hash AND scripts actually exist in DOM
+        // This handles React StrictMode where cleanup removes scripts but ref persists
+        if (lastInjectedStepConfigScriptsRef.current === scriptsHash && scriptsExistInDom) {
+            return;
+        }
+        // Remove any existing stepConfig scripts before re-injecting
+        existingScripts.forEach(el => el.remove());
+        // Inject each enabled script at its correct position
+        stepConfigScripts.forEach((script, index) => {
+            const position = script.position || 'head-end';
+            const scriptId = `tagada-stepconfig-script-${index}`;
+            // Extract script content (remove <script> tags if present)
+            let scriptBody = script.content.trim();
+            const scriptTagMatch = scriptBody.match(/^<script[^>]*>([\s\S]*)<\/script>$/i);
+            if (scriptTagMatch) {
+                scriptBody = scriptTagMatch[1].trim();
+            }
+            if (!scriptBody)
+                return;
+            // Wrap script content with error handling
+            const wrappedScript = `
+        (function() {
+          try {
+            // Script: ${script.name}
+            ${scriptBody}
+          } catch (error) {
+            console.error('[TagadaPay] StepConfig script "${script.name}" error:', error);
+          }
+        })();
+      `;
+            // Create script element
+            const scriptElement = document.createElement('script');
+            scriptElement.id = scriptId;
+            scriptElement.setAttribute('data-tagada-stepconfig-script', 'true');
+            scriptElement.setAttribute('data-script-name', script.name);
+            scriptElement.textContent = wrappedScript;
+            // Inject at the correct position
+            switch (position) {
+                case 'head-start':
+                    // Insert at the beginning of <head>
+                    if (document.head.firstChild) {
+                        document.head.insertBefore(scriptElement, document.head.firstChild);
+                    }
+                    else {
+                        document.head.appendChild(scriptElement);
+                    }
+                    break;
+                case 'head-end':
+                    // Insert at the end of <head>
+                    document.head.appendChild(scriptElement);
+                    break;
+                case 'body-start':
+                    // Insert at the beginning of <body>
+                    if (document.body.firstChild) {
+                        document.body.insertBefore(scriptElement, document.body.firstChild);
+                    }
+                    else {
+                        document.body.appendChild(scriptElement);
+                    }
+                    break;
+                case 'body-end':
+                default:
+                    // Insert at the end of <body>
+                    document.body.appendChild(scriptElement);
+                    break;
+            }
+        });
+        // Track injected scripts to prevent re-injection
+        lastInjectedStepConfigScriptsRef.current = scriptsHash;
+        // Cleanup: remove scripts on unmount
+        // Note: We keep the ref intact but check DOM existence on re-mount
+        // This handles both StrictMode (re-inject if cleanup removed them) and
+        // real unmounts (scripts properly cleaned up)
+        return () => {
+            document.querySelectorAll('[data-tagada-stepconfig-script]').forEach(el => el.remove());
+        };
+    }, [stepConfigScripts, setupTagada]);
     // This component doesn't render anything
     return null;
 }

package/dist/v2/react/components/GooglePayButton.d.ts

@@ -14,6 +14,8 @@ export interface GooglePayButtonProps {
     size?: 'sm' | 'md' | 'lg';
     buttonColor?: 'default' | 'black' | 'white';
     buttonType?: 'buy' | 'plain' | 'donate' | 'pay';
+    /** Override shipping requirement. If undefined, auto-detects based on shippingMethods. */
+    requiresShipping?: boolean;
 }
 export declare const GooglePayButton: React.FC<GooglePayButtonProps>;
 export default GooglePayButton;