@tagadapay/plugin-sdk 2.7.14 → 2.7.16

package/dist/v2/react/hooks/useApiClient.d.ts

@@ -0,0 +1,19 @@
+/**
+ * useApiClient Hook - Provides access to the authenticated API client
+ *
+ * This hook returns the ApiClient instance from the TagadaProvider context.
+ * The client is guaranteed to have the latest authentication token.
+ */
+import type { ApiService } from '../../../react/services/apiService';
+/**
+ * Hook to get the authenticated API service from context
+ *
+ * @returns The ApiService instance with the current authentication token
+ *
+ * @example
+ * ```typescript
+ * const apiService = useApiClient();
+ * const response = await apiService.get('/api/endpoint');
+ * ```
+ */
+export declare function useApiClient(): ApiService;

package/dist/v2/react/hooks/useApiClient.js

@@ -0,0 +1,22 @@
+/**
+ * useApiClient Hook - Provides access to the authenticated API client
+ *
+ * This hook returns the ApiClient instance from the TagadaProvider context.
+ * The client is guaranteed to have the latest authentication token.
+ */
+import { useTagadaContext } from '../providers/TagadaProvider';
+/**
+ * Hook to get the authenticated API service from context
+ *
+ * @returns The ApiService instance with the current authentication token
+ *
+ * @example
+ * ```typescript
+ * const apiService = useApiClient();
+ * const response = await apiService.get('/api/endpoint');
+ * ```
+ */
+export function useApiClient() {
+    const { apiService } = useTagadaContext();
+    return apiService;
+}

package/dist/v2/react/hooks/useCredits.js

@@ -33,7 +33,6 @@ export function useCredits(options = {}) {
             if (!customerId || !storeId) {
                 return null;
             }
-            console.log('customerId', customerId, 'storeId', storeId);
             return await creditsResource.getCustomerCredits(customerId, storeId);
         },
         staleTime: 30 * 1000, // 30 seconds - fresher than most resources

package/dist/v2/react/hooks/useFunnel.js

@@ -42,8 +42,13 @@ export function useFunnel(options) {
                 console.warn('🍪 Funnel: No session ID available for query');
                 return null;
             }
+            // ✅ Automatically include currentUrl for session sync on page load/refresh
+            const currentUrl = typeof window !== 'undefined' ? window.location.href : undefined;
             console.log(`🍪 Funnel: Fetching session data for ID: ${context.sessionId}`);
-            const response = await funnelResource.getSession(context.sessionId);
+            if (currentUrl) {
+                console.log(`🍪 Funnel: Including current URL for sync: ${currentUrl}`);
+            }
+            const response = await funnelResource.getSession(context.sessionId, currentUrl);
             console.log(`🍪 Funnel: Session fetch response:`, response);
             if (response.success && response.context) {
                 return response.context;
@@ -133,17 +138,25 @@ export function useFunnel(options) {
             if (!context.sessionId) {
                 throw new Error('Funnel session ID missing - session may be corrupted');
             }
+            // ✅ Automatically include currentUrl for URL-to-Step mapping
+            // User can override by providing event.currentUrl explicitly
+            const currentUrl = event.currentUrl || (typeof window !== 'undefined' ? window.location.href : undefined);
             console.log(`🍪 Funnel: Navigating with session ID: ${context.sessionId}`);
+            if (currentUrl) {
+                console.log(`🍪 Funnel: Current URL for sync: ${currentUrl}`);
+            }
             const requestBody = {
                 sessionId: context.sessionId,
                 event: {
                     type: event.type,
                     data: event.data,
-                    timestamp: event.timestamp || new Date().toISOString()
+                    timestamp: event.timestamp || new Date().toISOString(),
+                    currentUrl: event.currentUrl // Preserve user override if provided
                 },
                 contextUpdates: {
                     lastActivityAt: Date.now()
-                }
+                },
+                currentUrl // ✅ Send to backend for URL→Step mapping
             };
             const response = await funnelResource.navigate(requestBody);
             if (response.success && response.result) {

package/dist/v2/react/hooks/useLocalPluginConfig.d.ts

@@ -0,0 +1,22 @@
+import { RawPluginConfig } from '../../core/utils/pluginConfig';
+/**
+ * Hook to load local plugin config with minimal boilerplate
+ * Handles loading state and returns config when ready
+ *
+ * @example
+ * function MyApp() {
+ *   const { config, isLoading } = useLocalPluginConfig();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <TagadaProvider rawPluginConfig={config}>
+ *       <YourApp />
+ *     </TagadaProvider>
+ *   );
+ * }
+ */
+export declare function useLocalPluginConfig(): {
+    config: RawPluginConfig | null;
+    isLoading: boolean;
+};

package/dist/v2/react/hooks/useLocalPluginConfig.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { localConfigIfAny } from '../../core/utils/pluginConfig';
+/**
+ * Hook to load local plugin config with minimal boilerplate
+ * Handles loading state and returns config when ready
+ *
+ * @example
+ * function MyApp() {
+ *   const { config, isLoading } = useLocalPluginConfig();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <TagadaProvider rawPluginConfig={config}>
+ *       <YourApp />
+ *     </TagadaProvider>
+ *   );
+ * }
+ */
+export function useLocalPluginConfig() {
+    const [config, setConfig] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        localConfigIfAny().then((loadedConfig) => {
+            setConfig(loadedConfig);
+            setIsLoading(false);
+        });
+    }, []);
+    return { config, isLoading };
+}

package/dist/v2/react/hooks/useRemappableParams.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Hook to extract URL parameters that works with both remapped and non-remapped paths
+ *
+ * This hook automatically detects if the current path is remapped and extracts
+ * parameters correctly in both cases, so your components don't need to know
+ * about path remapping at all.
+ *
+ * @param internalPath - The internal path pattern (e.g., "/hello-with-param/:myparam")
+ * @returns Parameters object with extracted values
+ *
+ * @example
+ * ```tsx
+ * function HelloWithParamPage() {
+ *   // Works for both /hello-with-param/test AND /myremap/test
+ *   const { myparam } = useRemappableParams<{ myparam: string }>('/hello-with-param/:myparam');
+ *
+ *   return <div>Parameter: {myparam}</div>;
+ * }
+ * ```
+ */
+export declare function useRemappableParams<T extends Record<string, string>>(internalPath: string): Partial<T>;

package/dist/v2/react/hooks/useRemappableParams.js

@@ -0,0 +1,104 @@
+import { useParams } from 'react-router-dom';
+import { getPathInfo } from '../../core/pathRemapping';
+import { match } from 'path-to-regexp';
+/**
+ * Hook to extract URL parameters that works with both remapped and non-remapped paths
+ *
+ * This hook automatically detects if the current path is remapped and extracts
+ * parameters correctly in both cases, so your components don't need to know
+ * about path remapping at all.
+ *
+ * @param internalPath - The internal path pattern (e.g., "/hello-with-param/:myparam")
+ * @returns Parameters object with extracted values
+ *
+ * @example
+ * ```tsx
+ * function HelloWithParamPage() {
+ *   // Works for both /hello-with-param/test AND /myremap/test
+ *   const { myparam } = useRemappableParams<{ myparam: string }>('/hello-with-param/:myparam');
+ *
+ *   return <div>Parameter: {myparam}</div>;
+ * }
+ * ```
+ */
+export function useRemappableParams(internalPath) {
+    const routerParams = useParams();
+    const pathInfo = getPathInfo();
+    // If not remapped, just return router params
+    if (!pathInfo.isRemapped) {
+        return routerParams;
+    }
+    // If remapped, extract params from the external URL
+    try {
+        // Get the external pattern from localStorage (for testing) or from meta tag
+        let externalPattern = null;
+        // Check localStorage for explicit remapping (development/testing)
+        if (typeof localStorage !== 'undefined') {
+            try {
+                const remapData = localStorage.getItem('tagadapay-remap');
+                if (remapData) {
+                    const parsed = JSON.parse(remapData);
+                    if (parsed.externalPath && parsed.internalPath === internalPath) {
+                        externalPattern = parsed.externalPath;
+                    }
+                }
+            }
+            catch (e) {
+                // Ignore parsing errors
+            }
+        }
+        // Check meta tag for production remapping
+        if (!externalPattern && typeof document !== 'undefined') {
+            const metaTag = document.querySelector('meta[name="tagadapay-path-remap-pattern"]');
+            if (metaTag) {
+                externalPattern = metaTag.getAttribute('content');
+            }
+        }
+        // If we have an external pattern, extract params from it
+        if (externalPattern) {
+            const matchFn = match(externalPattern, { decode: decodeURIComponent });
+            const result = matchFn(pathInfo.externalPath);
+            if (result && typeof result !== 'boolean') {
+                // We have extracted params from external URL
+                // Now we need to map them to internal param names
+                // Extract param names from both patterns
+                const externalParamNames = extractParamNames(externalPattern);
+                const internalParamNames = extractParamNames(internalPath);
+                // Map external params to internal params (by position)
+                const mappedParams = {};
+                externalParamNames.forEach((externalName, index) => {
+                    const internalName = internalParamNames[index];
+                    if (internalName && result.params[externalName] !== undefined) {
+                        mappedParams[internalName] = result.params[externalName];
+                    }
+                });
+                return mappedParams;
+            }
+        }
+        // Fallback: try to extract from internal path directly
+        const matchFn = match(internalPath, { decode: decodeURIComponent });
+        const result = matchFn(pathInfo.externalPath);
+        if (result && typeof result !== 'boolean') {
+            return result.params;
+        }
+    }
+    catch (error) {
+        console.error('[useRemappableParams] Failed to extract params:', error);
+    }
+    // Fallback to router params
+    return routerParams;
+}
+/**
+ * Extract parameter names from a path pattern
+ * @param pattern - Path pattern like "/hello/:param1/:param2"
+ * @returns Array of parameter names like ["param1", "param2"]
+ */
+function extractParamNames(pattern) {
+    const paramRegex = /:([^/]+)/g;
+    const matches = [];
+    let match;
+    while ((match = paramRegex.exec(pattern)) !== null) {
+        matches.push(match[1]);
+    }
+    return matches;
+}

package/dist/v2/react/index.d.ts

@@ -18,8 +18,10 @@ export { useExpressPaymentMethods } from './hooks/useExpressPaymentMethods';
 export { useGeoLocation } from './hooks/useGeoLocation';
 export { useGoogleAutocomplete } from './hooks/useGoogleAutocomplete';
 export { getAvailableLanguages, useCountryOptions, useISOData, useLanguageImport, useRegionOptions } from './hooks/useISOData';
+export { useLocalPluginConfig } from './hooks/useLocalPluginConfig';
 export { useLogin } from './hooks/useLogin';
 export { usePluginConfig } from './hooks/usePluginConfig';
+export { useRemappableParams } from './hooks/useRemappableParams';
 export { queryKeys, useApiMutation, useApiQuery, useInvalidateQuery, usePreloadQuery } from './hooks/useApiQuery';
 export { useCheckoutQuery as useCheckout } from './hooks/useCheckoutQuery';
 export { useCurrency } from './hooks/useCurrency';

package/dist/v2/react/index.js

@@ -21,8 +21,10 @@ export { useExpressPaymentMethods } from './hooks/useExpressPaymentMethods';
 export { useGeoLocation } from './hooks/useGeoLocation';
 export { useGoogleAutocomplete } from './hooks/useGoogleAutocomplete';
 export { getAvailableLanguages, useCountryOptions, useISOData, useLanguageImport, useRegionOptions } from './hooks/useISOData';
+export { useLocalPluginConfig } from './hooks/useLocalPluginConfig';
 export { useLogin } from './hooks/useLogin';
 export { usePluginConfig } from './hooks/usePluginConfig';
+export { useRemappableParams } from './hooks/useRemappableParams';
 // TanStack Query hooks (recommended)
 export { queryKeys, useApiMutation, useApiQuery, useInvalidateQuery, usePreloadQuery } from './hooks/useApiQuery';
 export { useCheckoutQuery as useCheckout } from './hooks/useCheckoutQuery';

package/dist/v2/react/utils/sessionWaiter.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Utility for waiting until session is initialized
+ * Optimized with smart polling and fast path
+ */
+export interface SessionWaiterOptions {
+    checkReady: () => boolean;
+    label?: string;
+    timeoutMs?: number;
+    pollIntervalMs?: number;
+    debug?: boolean;
+}
+export interface SessionReadyCheckOptions {
+    isSessionInitialized: boolean;
+    token?: string | null;
+    debug?: boolean;
+}
+/**
+ * Check if session is fully ready (initialized + token available)
+ * Checks token from context (synchronous and reliable source of truth)
+ */
+export declare function isSessionFullyReady(options: SessionReadyCheckOptions): boolean;
+/**
+ * Wait for a condition to be true with smart polling
+ * Fast path: returns immediately if condition is already true
+ */
+export declare function waitForCondition(options: SessionWaiterOptions): Promise<void>;

package/dist/v2/react/utils/sessionWaiter.js

@@ -0,0 +1,72 @@
+/**
+ * Utility for waiting until session is initialized
+ * Optimized with smart polling and fast path
+ */
+/**
+ * Check if session is fully ready (initialized + token available)
+ * Checks token from context (synchronous and reliable source of truth)
+ */
+export function isSessionFullyReady(options) {
+    const { isSessionInitialized, token, debug = false } = options;
+    if (!isSessionInitialized) {
+        if (debug)
+            console.log('🔍 [SessionWaiter] Session not initialized yet');
+        return false;
+    }
+    const hasToken = !!token;
+    if (debug) {
+        if (hasToken) {
+            console.log(`✅ [SessionWaiter] Session fully ready - Token: ${token.substring(0, 8)}...`);
+        }
+        else {
+            console.log('⚠️ [SessionWaiter] Session initialized but NO TOKEN in context');
+        }
+    }
+    return hasToken;
+}
+/**
+ * Wait for a condition to be true with smart polling
+ * Fast path: returns immediately if condition is already true
+ */
+export async function waitForCondition(options) {
+    const { checkReady, label = 'Condition', timeoutMs = 10000, pollIntervalMs = 50, debug = false } = options;
+    const startTime = Date.now();
+    // Fast path: if already ready, return immediately
+    if (checkReady()) {
+        console.log(`⚡ [${label}] Already ready (fast path)`);
+        return Promise.resolve();
+    }
+    console.log(`⏳ [${label}] Waiting... (timeout: ${timeoutMs}ms, poll interval: ${pollIntervalMs}ms)`);
+    // Smart polling
+    return new Promise((resolve, reject) => {
+        const maxAttempts = Math.floor(timeoutMs / pollIntervalMs);
+        let attempts = 0;
+        let lastLogTime = startTime;
+        const check = () => {
+            attempts++;
+            const elapsed = Date.now() - startTime;
+            if (debug) {
+                console.log(`🔍 [${label}] Check #${attempts} (${elapsed}ms elapsed)`);
+            }
+            // Log every 1 second to show we're still waiting
+            if (elapsed - (lastLogTime - startTime) >= 1000) {
+                console.log(`⏳ [${label}] Still waiting... (${elapsed}ms elapsed, ${attempts} checks)`);
+                lastLogTime = Date.now();
+            }
+            if (checkReady()) {
+                console.log(`✅ [${label}] Ready! (took ${elapsed}ms, ${attempts} checks)`);
+                resolve();
+                return;
+            }
+            if (attempts >= maxAttempts) {
+                console.error(`❌ [${label}] Timeout after ${timeoutMs}ms (${attempts} checks)`);
+                reject(new Error(`${label} timeout after ${timeoutMs}ms. Please refresh the page and try again.`));
+                return;
+            }
+            // Continue polling
+            setTimeout(check, pollIntervalMs);
+        };
+        // Start checking
+        check();
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "2.7.14",
+  "version": "2.7.16",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,7 +25,9 @@
     "build": "tsc",
     "clean": "rm -rf dist",
     "lint": "echo \"No linting configured\"",
-    "test": "echo \"No tests yet\" && exit 0",
+    "test": "jest --no-watchman",
+    "test:watch": "jest --watch --no-watchman",
+    "test:coverage": "jest --coverage --no-watchman",
     "dev": "tsc --watch",
     "prepublishOnly": "npm run clean && npm run build",
     "publish:patch": "npm version patch && npm publish",
@@ -60,6 +62,7 @@
     "@basis-theory/basis-theory-react": "^1.32.5",
     "@basis-theory/web-threeds": "^1.0.1",
     "@google-pay/button-react": "^3.0.10",
+    "@tagadapay/plugin-sdk": "link:",
     "@tanstack/react-query": "^5.90.2",
     "axios": "^1.10.0",
     "iso3166-2-db": "^2.3.11",
@@ -68,9 +71,12 @@
     "swr": "^2.3.6"
   },
   "devDependencies": {
+    "@types/jest": "^29.5.0",
     "@types/node": "^18.0.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "jest": "^29.5.0",
+    "ts-jest": "^29.1.0",
     "typescript": "^5.0.0"
   },
   "peerDependencies": {