@tagadapay/plugin-sdk 3.1.11 → 3.1.12

package/dist/react/hooks/useShippingRates.d.ts

@@ -27,5 +27,11 @@ export interface UseShippingRatesResult {
     error: Error | null;
     clearError: () => void;
     refetch: () => Promise<void>;
+    /** Preview shipping rates for a country without updating session */
+    previewRates: (countryCode: string, stateCode?: string) => Promise<ShippingRate[]>;
+    /** Rates from the last previewRates call */
+    previewedRates: ShippingRate[] | undefined;
+    /** Loading state for previewRates */
+    isPreviewLoading: boolean;
 }
 export declare const useShippingRates: ({ onSuccess, checkout }?: UseShippingRatesOptions) => UseShippingRatesResult;

package/dist/react/hooks/useShippingRates.js

@@ -39,6 +39,9 @@ export const useShippingRates = ({ onSuccess, checkout } = {}) => {
     const previousSessionIdRef = useRef(undefined);
     const isFetchingRef = useRef(false);
     const hasSyncedSelectionFromCheckoutRef = useRef(false);
+    // Preview rates state
+    const [previewedRates, setPreviewedRates] = useState();
+    const [isPreviewLoading, setIsPreviewLoading] = useState(false);
     const sessionId = checkout?.checkoutSession.id;
     // Track mounted state
     useEffect(() => {
@@ -87,6 +90,38 @@ export const useShippingRates = ({ onSuccess, checkout } = {}) => {
             }
         }
     }, [sessionId, apiService]);
+    // Preview shipping rates for a country without updating session
+    const previewRates = useCallback(async (countryCode, stateCode) => {
+        if (!sessionId || !apiService)
+            return [];
+        try {
+            setIsPreviewLoading(true);
+            const queryParams = new URLSearchParams({ countryCode });
+            if (stateCode)
+                queryParams.set('stateCode', stateCode);
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${sessionId}/shipping-rates/preview?${queryParams}`, { method: 'GET' });
+            const sortedRates = response.rates.slice().sort((a, b) => {
+                if (a.isFree && !b.isFree)
+                    return -1;
+                if (!a.isFree && b.isFree)
+                    return 1;
+                return (a.amount ?? 0) - (b.amount ?? 0);
+            });
+            if (isMountedRef.current) {
+                setPreviewedRates(sortedRates);
+            }
+            return sortedRates;
+        }
+        catch (err) {
+            console.error('Error previewing shipping rates:', err);
+            return [];
+        }
+        finally {
+            if (isMountedRef.current) {
+                setIsPreviewLoading(false);
+            }
+        }
+    }, [sessionId, apiService]);
     useEffect(() => {
         if (sessionId && isMountedRef.current && sessionId !== previousSessionIdRef.current) {
             previousSessionIdRef.current = sessionId;
@@ -196,5 +231,8 @@ export const useShippingRates = ({ onSuccess, checkout } = {}) => {
         error,
         clearError,
         refetch,
+        previewRates,
+        previewedRates,
+        isPreviewLoading,
     };
 };

package/dist/react/providers/TagadaProvider.js

@@ -38,11 +38,11 @@ const InitializationLoader = () => (_jsxs("div", { style: {
                 borderTop: '1.5px solid #9ca3af',
                 borderRadius: '50%',
                 animation: 'tagada-spin 1s linear infinite',
-            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
-        @keyframes tagada-spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
+            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
+        @keyframes tagada-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
       ` })] }));
 const TagadaContext = createContext(null);
 export function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment

package/dist/react/services/apiService.d.ts

@@ -146,6 +146,27 @@ export declare class ApiService {
         shippingCountryChanged: boolean;
         billingCountryChanged: boolean;
     }>;
+    /**
+     * Update shipping address only (no email required)
+     * Useful for fetching shipping rates before email is entered
+     */
+    updateShippingAddressOnly(checkoutSessionId: string, shippingAddress: {
+        firstName?: string;
+        lastName?: string;
+        address1?: string;
+        city?: string;
+        country: string;
+        state?: string;
+        postal?: string;
+        phone?: string;
+    }): Promise<{
+        success: boolean;
+        countryChanged: boolean;
+        errors?: Record<string, {
+            message: string;
+            type: string;
+        }>;
+    }>;
     /**
      * Clear the authentication token
      */

package/dist/react/services/apiService.js

@@ -166,6 +166,16 @@ export class ApiService {
             body: data,
         });
     }
+    /**
+     * Update shipping address only (no email required)
+     * Useful for fetching shipping rates before email is entered
+     */
+    async updateShippingAddressOnly(checkoutSessionId, shippingAddress) {
+        return this.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/shipping-address`, {
+            method: 'POST',
+            body: { shippingAddress },
+        });
+    }
     /**
      * Clear the authentication token
      */

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

@@ -9,7 +9,7 @@ export declare enum TrackingProvider {
     FACEBOOK = "facebook",
     TIKTOK = "tiktok",
     SNAPCHAT = "snapchat",
-    META_CONVERSION = "meta_conversion",
+    PINTEREST = "pinterest",
     GTM = "gtm"
 }
 /**
@@ -71,6 +71,17 @@ export interface GTMTrackingConfig extends BaseTrackingConfig {
  * This mirrors `TrackingFormValues` from the CRM.
  */
 export type PixelConfig = PixelTrackingConfig | SnapchatTrackingConfig | MetaConversionTrackingConfig | GTMTrackingConfig;
+/**
+ * Pixels configuration keyed by provider.
+ * Used in RuntimeStepConfig and getAssignedPixels().
+ */
+export type PixelsConfig = {
+    [TrackingProvider.FACEBOOK]?: PixelTrackingConfig[];
+    [TrackingProvider.TIKTOK]?: PixelTrackingConfig[];
+    [TrackingProvider.SNAPCHAT]?: SnapchatTrackingConfig[];
+    [TrackingProvider.PINTEREST]?: PixelTrackingConfig[];
+    [TrackingProvider.GTM]?: GTMTrackingConfig[];
+};
 /**
  * Runtime step configuration injected from the CRM
  * Contains payment flows, static resources, scripts, and tracking configs
@@ -86,13 +97,7 @@ export interface RuntimeStepConfig {
         content: string;
         position?: 'head-start' | 'head-end' | 'body-start' | 'body-end';
     }>;
-    pixels?: {
-        [TrackingProvider.FACEBOOK]?: PixelTrackingConfig[];
-        [TrackingProvider.TIKTOK]?: PixelTrackingConfig[];
-        [TrackingProvider.SNAPCHAT]?: SnapchatTrackingConfig[];
-        [TrackingProvider.META_CONVERSION]?: MetaConversionTrackingConfig[];
-        [TrackingProvider.GTM]?: GTMTrackingConfig[];
-    };
+    pixels?: PixelsConfig;
 }
 /**
  * Local funnel configuration for development
@@ -165,13 +170,7 @@ export declare function getAssignedScripts(position?: 'head-start' | 'head-end'
  * Get assigned pixel tracking configuration (normalized to arrays)
  * Always returns arrays of PixelConfig for consistent consumption.
  */
-export declare function getAssignedPixels(): {
-    [TrackingProvider.FACEBOOK]?: PixelTrackingConfig[];
-    [TrackingProvider.TIKTOK]?: PixelTrackingConfig[];
-    [TrackingProvider.SNAPCHAT]?: SnapchatTrackingConfig[];
-    [TrackingProvider.META_CONVERSION]?: MetaConversionTrackingConfig[];
-    [TrackingProvider.GTM]?: GTMTrackingConfig[];
-} | undefined;
+export declare function getAssignedPixels(): PixelsConfig | undefined;
 export interface FunnelClientConfig {
     apiClient: ApiClient;
     debugMode?: boolean;

package/dist/v2/core/funnelClient.js

@@ -13,7 +13,7 @@ export var TrackingProvider;
     TrackingProvider["FACEBOOK"] = "facebook";
     TrackingProvider["TIKTOK"] = "tiktok";
     TrackingProvider["SNAPCHAT"] = "snapchat";
-    TrackingProvider["META_CONVERSION"] = "meta_conversion";
+    TrackingProvider["PINTEREST"] = "pinterest";
     TrackingProvider["GTM"] = "gtm";
 })(TrackingProvider || (TrackingProvider = {}));
 /**

package/dist/v2/core/resources/shippingRates.d.ts

@@ -19,6 +19,16 @@ export interface ShippingRatesResponse {
     rates: ShippingRate[];
     forceCheckoutSessionRefetch?: boolean;
 }
+export interface ShippingRatesPreviewParams {
+    countryCode: string;
+    stateCode?: string;
+}
+export interface ShippingRatesPreviewResponse {
+    rates: ShippingRate[];
+    pickupPoint?: {
+        apiKey: string | null;
+    };
+}
 export declare class ShippingRatesResource {
     private apiClient;
     constructor(apiClient: ApiClient);
@@ -33,4 +43,9 @@ export declare class ShippingRatesResource {
         success: boolean;
         error?: any;
     }>;
+    /**
+     * Preview shipping rates for a country without updating session
+     * Useful for showing rates before user enters email
+     */
+    previewShippingRates(sessionId: string, params: ShippingRatesPreviewParams): Promise<ShippingRatesPreviewResponse>;
 }

package/dist/v2/core/resources/shippingRates.js

@@ -20,4 +20,15 @@ export class ShippingRatesResource {
             shippingRateId,
         });
     }
+    /**
+     * Preview shipping rates for a country without updating session
+     * Useful for showing rates before user enters email
+     */
+    async previewShippingRates(sessionId, params) {
+        const queryParams = new URLSearchParams({ countryCode: params.countryCode });
+        if (params.stateCode) {
+            queryParams.set('stateCode', params.stateCode);
+        }
+        return this.apiClient.get(`/api/v1/checkout-sessions/${sessionId}/shipping-rates/preview?${queryParams.toString()}`);
+    }
 }

package/dist/v2/core/utils/currency.d.ts

@@ -8,20 +8,6 @@ export interface Currency {
     name: string;
     decimalPlaces: number;
 }
-/**
- * Format money amount from minor units (cents) to a formatted string
- *
- * @param amountMinorUnits - Amount in minor units (e.g., 12345 for $123.45)
- * @param currencyCode - ISO 4217 currency code (e.g., "USD", "EUR")
- * @param locale - Locale for formatting (default: "en-US")
- * @returns Formatted money string (e.g., "$123.45")
- *
- * @example
- * formatMoney(12345, 'USD') // "$123.45"
- * formatMoney(10000, 'EUR', 'de-DE') // "100,00 €"
- * formatMoney(1000, 'JPY') // "¥1,000"
- */
-export declare function formatMoney(amountMinorUnits: number, currencyCode?: string, locale?: string): string;
 export declare class CurrencyUtils {
     /**
      * Get currency from context or fallback to default

package/dist/v2/core/utils/currency.js

@@ -2,46 +2,6 @@
  * Currency Utility Functions
  * Pure functions for currency management
  */
-/**
- * Format money amount from minor units (cents) to a formatted string
- *
- * @param amountMinorUnits - Amount in minor units (e.g., 12345 for $123.45)
- * @param currencyCode - ISO 4217 currency code (e.g., "USD", "EUR")
- * @param locale - Locale for formatting (default: "en-US")
- * @returns Formatted money string (e.g., "$123.45")
- *
- * @example
- * formatMoney(12345, 'USD') // "$123.45"
- * formatMoney(10000, 'EUR', 'de-DE') // "100,00 €"
- * formatMoney(1000, 'JPY') // "¥1,000"
- */
-export function formatMoney(amountMinorUnits, currencyCode = 'USD', locale = 'en-US') {
-    const decimalPlaces = CurrencyUtils.getDecimalPlaces(currencyCode);
-    // Convert minor units to major units
-    // Backend stores amounts with 2 decimal places for all currencies
-    // For currencies with 0 decimal places (JPY, KRW, etc.), divide by 100
-    let value;
-    if (decimalPlaces === 0) {
-        // For zero-decimal currencies, backend still stores with 2 decimals
-        value = amountMinorUnits / 100;
-    }
-    else {
-        value = amountMinorUnits / Math.pow(10, decimalPlaces);
-    }
-    try {
-        return new Intl.NumberFormat(locale, {
-            style: 'currency',
-            currency: currencyCode,
-            minimumFractionDigits: decimalPlaces,
-            maximumFractionDigits: decimalPlaces,
-        }).format(value);
-    }
-    catch {
-        // Fallback if Intl.NumberFormat fails
-        const symbol = CurrencyUtils.getCurrencySymbol(currencyCode);
-        return `${symbol}${value.toFixed(decimalPlaces)}`;
-    }
-}
 export class CurrencyUtils {
     /**
      * Get currency from context or fallback to default

package/dist/v2/core/utils/index.d.ts

@@ -12,4 +12,3 @@ export * from './postPurchases';
 export * from './orderBump';
 export * from './sessionStorage';
 export * from './funnelQueryKeys';
-export * from './configHotReload';

package/dist/v2/core/utils/index.js

@@ -12,5 +12,3 @@ export * from './postPurchases';
 export * from './orderBump';
 export * from './sessionStorage';
 export * from './funnelQueryKeys';
-// Config hot reload for live preview editing
-export * from './configHotReload';

package/dist/v2/core/utils/pluginConfig.d.ts

@@ -22,14 +22,6 @@ export type RawPluginConfig<TConfig = Record<string, any>> = {
     basePath?: string;
     config?: any;
 } & TConfig;
-/**
- * Synchronously get plugin config from meta tags
- * This is a lightweight sync alternative to loadPluginConfig
- * Use this when you need immediate config access (e.g., in CDN bundles)
- *
- * @returns Plugin config from meta tags or defaults
- */
-export declare function getPluginConfig(): PluginConfig;
 /**
  * Core plugin config loading function
  *

package/dist/v2/core/utils/pluginConfig.js

@@ -154,37 +154,9 @@ const loadStaticResources = async () => {
  * Helper to get content from meta tag
  */
 const getMetaContent = (name) => {
-    if (typeof document === 'undefined')
-        return undefined;
     const metaTag = document.querySelector(`meta[name="${name}"]`);
     return metaTag?.getAttribute('content') || undefined;
 };
-/**
- * Synchronously get plugin config from meta tags
- * This is a lightweight sync alternative to loadPluginConfig
- * Use this when you need immediate config access (e.g., in CDN bundles)
- *
- * @returns Plugin config from meta tags or defaults
- */
-export function getPluginConfig() {
-    if (typeof document === 'undefined') {
-        return { basePath: '/', config: {} };
-    }
-    const storeId = getMetaContent('x-plugin-store-id');
-    const accountId = getMetaContent('x-plugin-account-id');
-    const basePath = getMetaContent('x-plugin-base-path') || '/';
-    let config = {};
-    try {
-        const encodedConfig = getMetaContent('x-plugin-config');
-        if (encodedConfig) {
-            config = JSON.parse(decodeURIComponent(encodedConfig));
-        }
-    }
-    catch (error) {
-        console.warn('[TagadaSDK] Failed to parse plugin config from meta tag:', error);
-    }
-    return { storeId, accountId, basePath, config };
-}
 /**
  * Load production config from meta tags (HIGHEST PRIORITY)
  * Meta tags are injected by the plugin middleware during HTML serving

package/dist/v2/core/utils/previewModeIndicator.js

@@ -212,143 +212,143 @@ export function injectPreviewModeIndicator() {
     // Create container
     const container = document.createElement('div');
     container.id = 'tgd-preview-indicator';
-    container.style.cssText = `
-        position: fixed;
-        bottom: 16px;
-        right: 16px;
-        z-index: 999999;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    container.style.cssText = `
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 999999;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     `;
     // Create badge
     const badge = document.createElement('div');
-    badge.style.cssText = `
-        background: ${draftMode ? '#ff9500' : '#007aff'};
-        color: white;
-        padding: 8px 12px;
-        border-radius: 8px;
-        font-size: 13px;
-        font-weight: 600;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        cursor: pointer;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        gap: 6px;
+    badge.style.cssText = `
+        background: ${draftMode ? '#ff9500' : '#007aff'};
+        color: white;
+        padding: 8px 12px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 6px;
     `;
-    badge.innerHTML = `
-        <span style="font-size: 16px;">🔍</span>
-        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
+    badge.innerHTML = `
+        <span style="font-size: 16px;">🔍</span>
+        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
     `;
     // Create details popup (with padding-top to bridge gap with badge)
     const details = document.createElement('div');
-    details.style.cssText = `
-        position: absolute;
-        bottom: calc(100% + 8px);
-        right: 0;
-        background: white;
-        border: 1px solid #e5e5e5;
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        padding: 12px;
-        min-width: 250px;
-        font-size: 12px;
-        line-height: 1.5;
-        display: none;
+    details.style.cssText = `
+        position: absolute;
+        bottom: calc(100% + 8px);
+        right: 0;
+        background: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        padding: 12px;
+        min-width: 250px;
+        font-size: 12px;
+        line-height: 1.5;
+        display: none;
     `;
     details.style.paddingTop = '20px'; // Extra padding to bridge the gap
     // Add invisible bridge between badge and popup to prevent flickering
     const bridge = document.createElement('div');
-    bridge.style.cssText = `
-        position: absolute;
-        bottom: 100%;
-        left: 0;
-        right: 0;
-        height: 8px;
-        display: none;
+    bridge.style.cssText = `
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+        height: 8px;
+        display: none;
     `;
     // Build details content
     let detailsHTML = '<div style="margin-bottom: 8px; font-weight: 600; color: #1d1d1f;">Current Environment</div>';
     detailsHTML += '<div style="display: flex; flex-direction: column; gap: 6px;">';
     if (draftMode) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Draft Mode:</span>
-                <span style="color: #ff9500; font-weight: 600;">ON</span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Draft Mode:</span>
+                <span style="color: #ff9500; font-weight: 600;">ON</span>
+            </div>
         `;
     }
     if (trackingDisabled) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Tracking:</span>
-                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Tracking:</span>
+                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
+            </div>
         `;
     }
     if (params.funnelEnv) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Funnel Env:</span>
-                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
-                    ${params.funnelEnv}
-                </span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Funnel Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.funnelEnv}
+                </span>
+            </div>
         `;
     }
     if (params.tagadaClientEnv) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>API Env:</span>
-                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
-                    ${params.tagadaClientEnv}
-                </span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>API Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.tagadaClientEnv}
+                </span>
+            </div>
         `;
     }
     if (params.tagadaClientBaseUrl) {
-        detailsHTML += `
-            <div style="color: #86868b;">
-                <div style="margin-bottom: 4px;">API URL:</div>
-                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
-                    ${params.tagadaClientBaseUrl}
-                </div>
-            </div>
+        detailsHTML += `
+            <div style="color: #86868b;">
+                <div style="margin-bottom: 4px;">API URL:</div>
+                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.tagadaClientBaseUrl}
+                </div>
+            </div>
         `;
     }
     if (params.funnelId) {
-        detailsHTML += `
-            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-                <div style="margin-bottom: 4px;">Funnel ID:</div>
-                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
-                    ${params.funnelId}
-                </div>
-            </div>
+        detailsHTML += `
+            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+                <div style="margin-bottom: 4px;">Funnel ID:</div>
+                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.funnelId}
+                </div>
+            </div>
         `;
     }
     detailsHTML += '</div>';
-    detailsHTML += `
-        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
-            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
-        </div>
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
+            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
+        </div>
     `;
     // Add action button
-    detailsHTML += `
-        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-            <button id="tgd-leave-preview" style="
-                background: #ff3b30;
-                color: white;
-                border: none;
-                border-radius: 6px;
-                padding: 10px 12px;
-                font-size: 13px;
-                font-weight: 600;
-                cursor: pointer;
-                transition: opacity 0.2s;
-                width: 100%;
-            ">
-                🚪 Leave Preview Mode
-            </button>
-        </div>
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+            <button id="tgd-leave-preview" style="
+                background: #ff3b30;
+                color: white;
+                border: none;
+                border-radius: 6px;
+                padding: 10px 12px;
+                font-size: 13px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: opacity 0.2s;
+                width: 100%;
+            ">
+                🚪 Leave Preview Mode
+            </button>
+        </div>
     `;
     details.innerHTML = detailsHTML;
     // Hover behavior - keep popup visible when hovering over badge, bridge, or popup

package/dist/v2/index.d.ts

@@ -14,7 +14,7 @@ export * from './core/utils/previewMode';
 export { injectPreviewModeIndicator, isIndicatorInjected, removePreviewModeIndicator } from './core/utils/previewModeIndicator';
 export * from './core/utils/products';
 export { getAssignedPaymentFlowId, getAssignedScripts, getAssignedStaticResources, getAssignedStepConfig, getLocalFunnelConfig, loadLocalFunnelConfig } from './core/funnelClient';
-export type { LocalFunnelConfig, RuntimeStepConfig } from './core/funnelClient';
+export type { LocalFunnelConfig, PixelsConfig, RuntimeStepConfig } from './core/funnelClient';
 export * from './core/pathRemapping';
 export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion } from './core/resources/checkout';
 export type { Order, OrderLineItem } from './core/utils/order';