@tagadapay/plugin-sdk 3.0.1 → 3.0.3

package/dist/v2/core/client.d.ts

@@ -4,6 +4,7 @@ import { Environment, EnvironmentConfig, Session, AuthState, Customer, Store, Lo
 import { FunnelClient } from './funnelClient';
 export interface TagadaClientConfig {
     environment?: Environment;
+    customApiConfig?: Partial<EnvironmentConfig>;
     debugMode?: boolean;
     localConfig?: string;
     rawPluginConfig?: RawPluginConfig;

package/dist/v2/core/client.js

@@ -24,7 +24,21 @@ export class TagadaClient {
         }
         // Initialize default state
         const env = this.resolveEnvironment();
-        const envConfig = getEnvironmentConfig(env);
+        let envConfig = getEnvironmentConfig(env);
+        // Apply custom API config if provided
+        if (config.customApiConfig) {
+            envConfig = {
+                ...envConfig,
+                ...config.customApiConfig,
+                apiConfig: {
+                    ...envConfig.apiConfig,
+                    ...config.customApiConfig.apiConfig,
+                },
+            };
+            if (this.config.debugMode) {
+                console.log(`[TagadaClient ${this.instanceId}] Applied custom API config:`, envConfig.apiConfig.baseUrl);
+            }
+        }
         this.state = {
             auth: {
                 isAuthenticated: false,

package/dist/v2/index.d.ts

@@ -24,6 +24,7 @@ export type { StoreConfig } from './core/resources/storeConfig';
 export { FunnelActionType } from './core/resources/funnel';
 export type { BackNavigationActionData, CartUpdatedActionData, DirectNavigationActionData, FormSubmitActionData, FunnelContextUpdateRequest, FunnelContextUpdateResponse, FunnelAction as FunnelEvent, FunnelInitializeRequest, FunnelInitializeResponse, FunnelNavigateRequest, FunnelNavigateResponse, FunnelNavigationAction, FunnelNavigationResult, NextAction, OfferAcceptedActionData, OfferDeclinedActionData, PaymentFailedActionData, PaymentSuccessActionData, SimpleFunnelContext } from './core/resources/funnel';
 export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export type { DebugScript } from './react';
 export type { TranslateFunction, TranslationText, UseTranslationOptions, UseTranslationResult } from './react/hooks/useTranslation';
 export type { FunnelContextValue } from './react/hooks/useFunnel';
 export type { ClubOffer, ClubOfferItem, ClubOfferLineItem, ClubOfferSummary, UseClubOffersOptions, UseClubOffersResult } from './react/hooks/useClubOffers';

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

@@ -77,6 +77,8 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
     const context = useTagadaContext();
     const pluginConfig = usePluginConfig();
     const [activeTab, setActiveTab] = useState('overview');
+    const [runningScripts, setRunningScripts] = useState(new Set());
+    const [scriptResults, setScriptResults] = useState({});
     // Handler to jump to a specific step using direct_navigation
     const handleJumpToStep = async (stepId, stepName) => {
         // Try to get sessionId from debug data or context
@@ -168,7 +170,49 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
     const itemsTab = context.debugCheckout.isActive && context.debugCheckout.data?.checkout?.summary
         ? [{ id: 'items', label: 'Items' }]
         : [];
-    const tabs = [...baseTabs, ...funnelTab, ...checkoutTab, ...itemsTab, { id: 'raw', label: 'Raw Data' }];
+    // Add scripts tab if debug scripts are available
+    const scriptsTab = context.debugScripts && context.debugScripts.length > 0
+        ? [{ id: 'scripts', label: `Scripts (${context.debugScripts.length})` }]
+        : [];
+    const tabs = [
+        ...baseTabs,
+        ...funnelTab,
+        ...checkoutTab,
+        ...itemsTab,
+        ...scriptsTab,
+        { id: 'raw', label: 'Raw Data' },
+    ];
+    // Handler to run a debug script
+    const handleRunScript = async (scriptId) => {
+        const script = context.debugScripts?.find((s) => s.id === scriptId);
+        if (!script)
+            return;
+        setRunningScripts((prev) => new Set(prev).add(scriptId));
+        setScriptResults((prev) => ({ ...prev, [scriptId]: undefined }));
+        try {
+            await script.run(context);
+            setScriptResults((prev) => ({
+                ...prev,
+                [scriptId]: { success: true, message: 'Script executed successfully' },
+            }));
+        }
+        catch (error) {
+            setScriptResults((prev) => ({
+                ...prev,
+                [scriptId]: {
+                    success: false,
+                    message: error instanceof Error ? error.message : 'Script failed',
+                },
+            }));
+        }
+        finally {
+            setRunningScripts((prev) => {
+                const next = new Set(prev);
+                next.delete(scriptId);
+                return next;
+            });
+        }
+    };
     return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     position: 'fixed',
                     top: 0,
@@ -681,6 +725,59 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
                                                                     fontSize: '11px',
                                                                     margin: 0,
                                                                     whiteSpace: 'pre-wrap',
-                                                                }, children: context.debugCheckout.error.stack }))] })] })), _jsxs("div", { children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: "Full Checkout Data" }), _jsx(TreeView, { data: context.debugCheckout.data, name: "checkoutData" })] })] })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No checkout hook active" }))] })), activeTab === 'raw' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Raw Context Data" }), _jsx("div", { style: { fontSize: '12px' }, children: _jsx(TreeView, { data: context, name: "tagadaContext", maxLevel: 4 }) })] }))] })] })] }));
+                                                                }, children: context.debugCheckout.error.stack }))] })] })), _jsxs("div", { children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: "Full Checkout Data" }), _jsx(TreeView, { data: context.debugCheckout.data, name: "checkoutData" })] })] })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No checkout hook active" }))] })), activeTab === 'scripts' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 12px 0', color: '#60a5fa', fontSize: '14px' }, children: "\uD83D\uDEE0\uFE0F Debug Scripts" }), _jsx("p", { style: { margin: '0 0 16px 0', fontSize: '11px', color: '#9ca3af' }, children: "Template-provided scripts for debugging and testing. Click a script to run it." }), context.debugScripts && context.debugScripts.length > 0 ? (_jsx("div", { style: { display: 'grid', gap: '10px' }, children: (() => {
+                                            const grouped = context.debugScripts.reduce((acc, script) => {
+                                                const category = script.category || 'General';
+                                                if (!acc[category])
+                                                    acc[category] = [];
+                                                acc[category].push(script);
+                                                return acc;
+                                            }, {});
+                                            return Object.entries(grouped).map(([category, scripts]) => (_jsxs("div", { children: [_jsx("div", { style: {
+                                                            fontSize: '11px',
+                                                            color: '#9ca3af',
+                                                            fontWeight: 'bold',
+                                                            marginBottom: '8px',
+                                                            textTransform: 'uppercase',
+                                                            letterSpacing: '0.5px',
+                                                        }, children: category }), _jsx("div", { style: { display: 'grid', gap: '8px' }, children: scripts.map((script) => {
+                                                            const isRunning = runningScripts.has(script.id);
+                                                            const result = scriptResults[script.id];
+                                                            return (_jsxs("div", { style: {
+                                                                    border: '1px solid #374151',
+                                                                    borderRadius: '6px',
+                                                                    padding: '10px 12px',
+                                                                    backgroundColor: '#111827',
+                                                                }, children: [_jsxs("div", { style: {
+                                                                            display: 'flex',
+                                                                            justifyContent: 'space-between',
+                                                                            alignItems: 'flex-start',
+                                                                            gap: '12px',
+                                                                        }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: {
+                                                                                            color: '#f9fafb',
+                                                                                            fontWeight: 'bold',
+                                                                                            fontSize: '12px',
+                                                                                            marginBottom: '4px',
+                                                                                        }, children: script.name }), script.description && (_jsx("div", { style: { fontSize: '11px', color: '#9ca3af' }, children: script.description }))] }), _jsx("button", { onClick: () => handleRunScript(script.id), disabled: isRunning, style: {
+                                                                                    backgroundColor: isRunning ? '#374151' : '#3b82f6',
+                                                                                    color: '#fff',
+                                                                                    border: 'none',
+                                                                                    borderRadius: '4px',
+                                                                                    padding: '6px 12px',
+                                                                                    fontSize: '11px',
+                                                                                    fontWeight: 'bold',
+                                                                                    cursor: isRunning ? 'not-allowed' : 'pointer',
+                                                                                    transition: 'background-color 0.2s',
+                                                                                    minWidth: '60px',
+                                                                                }, children: isRunning ? '⏳' : '▶ Run' })] }), result && (_jsxs("div", { style: {
+                                                                            marginTop: '8px',
+                                                                            padding: '6px 8px',
+                                                                            borderRadius: '4px',
+                                                                            fontSize: '10px',
+                                                                            backgroundColor: result.success ? '#065f46' : '#7f1d1d',
+                                                                            color: result.success ? '#6ee7b7' : '#fca5a5',
+                                                                        }, children: [result.success ? '✅' : '❌', " ", result.message] }))] }, script.id));
+                                                        }) })] }, category)));
+                                        })() })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No debug scripts available" }))] })), activeTab === 'raw' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Raw Context Data" }), _jsx("div", { style: { fontSize: '12px' }, children: _jsx(TreeView, { data: context, name: "tagadaContext", maxLevel: 4 }) })] }))] })] })] }));
 };
 export default DebugDrawer;

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

@@ -4,6 +4,7 @@
  */
 export { ExpressPaymentMethodsProvider } from './providers/ExpressPaymentMethodsProvider';
 export { TagadaProvider, useTagadaContext } from './providers/TagadaProvider';
+export type { DebugScript } from './providers/TagadaProvider';
 export { ApplePayButton } from './components/ApplePayButton';
 export { GooglePayButton } from './components/GooglePayButton';
 export { useAuth } from './hooks/useAuth';

package/dist/v2/react/providers/TagadaProvider.d.ts

@@ -1,11 +1,27 @@
 import { ReactNode } from 'react';
-import { TagadaClient, TagadaState, TagadaClientConfig } from '../../core/client';
-import { RawPluginConfig } from '../../core/utils/pluginConfig';
-import { Environment, EnvironmentConfig } from '../../core/types';
 import { ApiService } from '../../../react/services/apiService';
-import { formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, convertCurrency } from '../../../react/utils/money';
-import { FunnelAction, FunnelNavigationResult, SimpleFunnelContext } from '../../core/resources/funnel';
+import { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits } from '../../../react/utils/money';
+import { TagadaClient, TagadaClientConfig, TagadaState } from '../../core/client';
 import { FunnelState } from '../../core/funnelClient';
+import { FunnelAction, FunnelNavigationResult, SimpleFunnelContext } from '../../core/resources/funnel';
+import { Environment, EnvironmentConfig } from '../../core/types';
+import { RawPluginConfig } from '../../core/utils/pluginConfig';
+/**
+ * Debug Script Definition
+ * Templates can provide debug scripts that will appear in the Debug Drawer "Scripts" tab
+ */
+export interface DebugScript {
+    /** Unique identifier for the script */
+    id: string;
+    /** Display name shown in the Scripts tab */
+    name: string;
+    /** Optional description of what the script does */
+    description?: string;
+    /** The function to execute when the script is run */
+    run: (context: TagadaContextValue) => void | Promise<void>;
+    /** Optional category to group scripts */
+    category?: string;
+}
 interface TagadaContextValue extends TagadaState {
     client: TagadaClient;
     apiService: ApiService;
@@ -38,6 +54,7 @@ interface TagadaContextValue extends TagadaState {
         lastUpdated: Date | null;
     };
     updateFunnelDebugData: (data: any, error?: Error | null, isLoading?: boolean) => void;
+    debugScripts: DebugScript[];
     refreshCoordinator: {
         registerCheckoutRefresh: (refreshFn: () => Promise<void>, name?: string) => void;
         registerOrderBumpRefresh: (refreshFn: () => Promise<void>) => void;
@@ -91,8 +108,13 @@ interface TagadaProviderProps {
      * Callback fired on funnel errors
      */
     onFunnelError?: (error: Error) => void;
+    /**
+     * Debug scripts provided by the template.
+     * These will appear in the Debug Drawer "Scripts" tab when debugMode is enabled.
+     * Only shown if the array is not empty.
+     */
+    debugScripts?: DebugScript[];
 }
-export declare function TagadaProvider({ children, environment, customApiConfig, // Ignored for now in TagadaClient, or need to add support
-debugMode, localConfig, blockUntilSessionReady, rawPluginConfig, features, funnelId, autoInitializeFunnel, onNavigate, onFunnelError, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagadaProvider({ children, environment, customApiConfig, debugMode, localConfig, blockUntilSessionReady, rawPluginConfig, features, funnelId, autoInitializeFunnel, onNavigate, onFunnelError, debugScripts, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTagadaContext(): TagadaContextValue;
 export {};

package/dist/v2/react/providers/TagadaProvider.js

@@ -4,10 +4,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * TagadaProvider - Main provider component for the Tagada Pay React SDK
  */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef, } from 'react';
-import { TagadaClient } from '../../core/client';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { ApiService } from '../../../react/services/apiService';
-import { formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, convertCurrency, } from '../../../react/utils/money';
+import { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, } from '../../../react/utils/money';
+import { TagadaClient } from '../../core/client';
 import { default as DebugDrawer } from '../components/DebugDrawer';
 import { setGlobalApiClient } from '../hooks/useApiQuery';
 // Professional, subtle loading component for initialization
@@ -43,8 +43,7 @@ const InitializationLoader = () => (_jsxs("div", { style: {
         }
       ` })] }));
 const TagadaContext = createContext(null);
-export function TagadaProvider({ children, environment, customApiConfig, // Ignored for now in TagadaClient, or need to add support
-debugMode, localConfig, blockUntilSessionReady = false, rawPluginConfig, features, funnelId, autoInitializeFunnel = true, onNavigate, onFunnelError, }) {
+export function TagadaProvider({ children, environment, customApiConfig, debugMode, localConfig, blockUntilSessionReady = false, rawPluginConfig, features, funnelId, autoInitializeFunnel = true, onNavigate, onFunnelError, debugScripts = [], }) {
     // Auto-detect debug mode from environment if not explicitly set
     const effectiveDebugMode = debugMode !== undefined
         ? debugMode
@@ -54,6 +53,7 @@ debugMode, localConfig, blockUntilSessionReady = false, rawPluginConfig, feature
     const client = useMemo(() => {
         const config = {
             environment,
+            customApiConfig,
             debugMode: effectiveDebugMode,
             localConfig,
             rawPluginConfig,
@@ -280,6 +280,7 @@ debugMode, localConfig, blockUntilSessionReady = false, rawPluginConfig, feature
         updateCheckoutDebugData,
         debugFunnel,
         updateFunnelDebugData,
+        debugScripts,
         refreshCoordinator,
         money: moneyUtils,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",