@digia-engage/core 1.1.0 → 2.0.0-rc.1

package/src/DigiaSlotView.tsx

@@ -6,8 +6,9 @@
  * pass an explicit `height` in `style` to fix the size instead.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
+    DeviceEventEmitter,
     Platform,
     StyleSheet,
     requireNativeComponent,
@@ -21,7 +22,7 @@ interface DigiaSlotViewProps {
 }
 
 interface NativeDigiaSlotViewProps extends DigiaSlotViewProps {
-    onContentSizeChange?: (event: { nativeEvent: { height: number } }) => void;
+    onContentSizeChange?: (event: { nativeEvent: { height: number; width: number } }) => void;
     collapsable?: boolean;
 }
 
@@ -32,24 +33,43 @@ const NativeDigiaSlotView =
 
 export function DigiaSlotView({ placementKey, style }: DigiaSlotViewProps) {
     const [contentHeight, setContentHeight] = useState(0);
+    const [contentWidth, setContentWidth] = useState<number | null>(null);
+
+    useEffect(() => {
+        console.log('[DigiaSlotView:debug] mounted placementKey=' + placementKey);
+        const sub = DeviceEventEmitter.addListener(
+            'digiaSlotWidth',
+            (data: { slotKey: string; width: number | null }) => {
+                console.log('[DigiaSlotView:debug] digiaSlotWidth event received', JSON.stringify(data), 'myKey=' + placementKey, 'match=' + (data.slotKey === placementKey));
+                if (data.slotKey === placementKey) {
+                    setContentWidth(data.width && data.width > 0 ? data.width : null);
+                }
+            },
+        );
+        return () => sub.remove();
+    }, [placementKey]);
 
     const onContentSizeChange = useCallback(
-        (event: { nativeEvent: { height: number } }) => {
+        (event: { nativeEvent: { height: number; width: number } }) => {
             const h = event.nativeEvent.height ?? 0;
+            const w = event.nativeEvent.width ?? 0;
+            console.log('[DigiaSlotView:debug] onContentSizeChange placementKey=' + placementKey + ' h=' + h + ' w=' + w);
             setContentHeight(Math.max(0, h));
+            setContentWidth(w > 0 ? w : null);
         },
-        [],
+        [placementKey],
     );
 
     if ((Platform.OS === 'android' || Platform.OS === 'ios') && NativeDigiaSlotView) {
         const flatStyle = StyleSheet.flatten(style) || {};
         const hasExplicitHeight = flatStyle.height !== undefined;
+        const resolvedWidth = contentWidth ?? '100%';
 
         if (hasExplicitHeight) {
             return (
                 <NativeDigiaSlotView
                     placementKey={placementKey}
-                    style={[{ width: '100%' }, style]}
+                    style={[{ width: resolvedWidth }, style]}
                     {...(Platform.OS === 'android' ? { collapsable: false } : {})}
                 />
             );
@@ -61,7 +81,7 @@ export function DigiaSlotView({ placementKey, style }: DigiaSlotViewProps) {
         return (
             <NativeDigiaSlotView
                 placementKey={placementKey}
-                style={[{ width: '100%', height: bootstrapHeight }, style]}
+                style={[{ width: resolvedWidth, height: bootstrapHeight }, style]}
                 onContentSizeChange={onContentSizeChange}
                 {...(Platform.OS === 'android' ? { collapsable: false } : {})}
             />

package/src/NativeDigiaEngage.ts

@@ -1,15 +1,13 @@
 /**
  * NativeDigiaModule
  *
- * Low-level TurboModule binding to the native Digia Engage module.
+ * Low-level native binding to the Digia Engage module.
  *
  * The module is resolved lazily on first use (not at import time) so that
  * module evaluation before native initialisation doesn't throw.
  * Resolution order:
- *   1. TurboModuleRegistry.get()   — New Architecture / JSI path
- *   2. NativeModules               — bridge interop layer (RN 0.73+ New Arch
- *                                    with isTurboModule: false in ReactModuleInfo)
- *   3. null                        — non-Android environments; methods no-op
+ *   1. NativeModules               — iOS bridge module
+ *   2. null                        — non-Android environments; methods no-op
  *
  * Prefer using the high-level `Digia` singleton from `index.ts`.
  */
@@ -26,7 +24,7 @@ import { NativeModules, TurboModuleRegistry } from 'react-native';
  */
 export interface Spec extends TurboModule {
     /** Initialise the SDK. Call once before anything else. */
-    initialize(apiKey: string, environment: string, logLevel: string): Promise<void>;
+    initialize(projectId: string, environment: string, logLevel: string, baseUrl?: string, fontFamily?: string): Promise<void>;
 
     /**
      * Wire the internal RNEventBridgePlugin with the native SDK.
@@ -51,6 +49,15 @@ export interface Spec extends TurboModule {
     /** Invalidate / dismiss a campaign by its ID. */
     invalidateCampaign(campaignId: string): void;
 
+    /** Register an anchor element position for tooltip/spotlight targeting. */
+    registerAnchor(key: string, x: number, y: number, width: number, height: number): void;
+
+    /** Remove a previously registered anchor. */
+    unregisterAnchor(key: string): void;
+
+    /** Return all component keys registered with the native SDK. */
+    getRegisteredComponents(): Promise<string[]>;
+
 }
 
 
@@ -61,12 +68,17 @@ export interface Spec extends TurboModule {
 // If neither resolves, warn in DEV and use no-op stubs so non-Android
 // environments (web, Storybook) don't crash.
 let _resolved: Spec | null = null;
+let _didResolve = false;
+
+function resolveCodegenModule(): Spec | null {
+    return TurboModuleRegistry.get<Spec>('DigiaEngageModule') ?? null;
+}
+
 function getModule(): Spec | null {
-    if (_resolved !== null) return _resolved;
-    _resolved =
-        TurboModuleRegistry.get<Spec>('DigiaEngageModule') ??
-        (NativeModules.DigiaEngageModule as Spec | undefined) ??
-        null;
+    if (_didResolve) return _resolved;
+    _didResolve = true;
+
+    _resolved = (NativeModules.DigiaEngageModule as Spec | undefined) ?? resolveCodegenModule();
     if (__DEV__ && !_resolved) {
         console.warn(
             '[Digia] DigiaEngageModule not found.\n' +
@@ -77,12 +89,15 @@ function getModule(): Spec | null {
 }
 
 export const nativeDigiaModule: Spec = {
-    initialize: (apiKey, environment, logLevel) =>
-        getModule()?.initialize(apiKey, environment, logLevel) ?? Promise.resolve(),
+    initialize: (projectId, environment, logLevel, baseUrl, fontFamily) =>
+        getModule()?.initialize(projectId, environment, logLevel, baseUrl, fontFamily) ?? Promise.resolve(),
     registerBridge: () => getModule()?.registerBridge(),
     setCurrentScreen: (name) => getModule()?.setCurrentScreen(name),
     triggerCampaign: (id, content, cepContext) =>
         getModule()?.triggerCampaign(id, content, cepContext),
     invalidateCampaign: (campaignId) => getModule()?.invalidateCampaign(campaignId),
+    registerAnchor: (key, x, y, width, height) => getModule()?.registerAnchor(key, x, y, width, height),
+    unregisterAnchor: (key) => getModule()?.unregisterAnchor(key),
+    getRegisteredComponents: () => getModule()?.getRegisteredComponents() ?? Promise.resolve([]),
     getConstants: () => getModule()?.getConstants?.() ?? {},
 };

package/src/actionHandler.ts

@@ -0,0 +1,311 @@
+import { AppState, type AppStateStatus, Linking } from 'react-native';
+import type { DigiaAction, ActionContext, OnAction, InAppBrowserAdapter } from './types';
+import type { Action } from './templateTypes';
+import { digiaHealthReporter, HealthEventType } from './DigiaHealthReporter';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ActionCallbacks = {
+    onNext: () => void;
+    onBack: () => void;
+    onDismissSelf: () => void;
+    onDismissAll: () => void;
+};
+
+type ActionHandlerConfig = {
+    onAction?: OnAction;
+    routeViaSystemLinking: boolean;
+    inAppBrowser?: InAppBrowserAdapter;
+};
+
+// ─── Internal state ───────────────────────────────────────────────────────────
+
+let _config: ActionHandlerConfig = { routeViaSystemLinking: true };
+let _lastActionKey = '';
+let _lastActionAt = 0;
+let _inappBrowserWarned = false;
+const _invalidContextWarned = new Set<string>();
+const MAX_WARNED_KEYS = 50;
+
+const DEBOUNCE_MS = 500;
+const HANDLER_TIMEOUT_MS = 2000;
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function isValidUrl(url: string): boolean {
+    if (!url) return false;
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        return /^[a-zA-Z][a-zA-Z0-9+\-.]*:\/\//.test(url);
+    }
+}
+
+function isDuplicate(action: DigiaAction, campaignId: string): boolean {
+    const key = `${campaignId}:${action.type}`;
+    const now = Date.now();
+    if (key === _lastActionKey && now - _lastActionAt < DEBOUNCE_MS) return true;
+    _lastActionKey = key;
+    _lastActionAt = now;
+    return false;
+}
+
+function emitHealth(eventType: HealthEventType, detail: Record<string, unknown>): void {
+    digiaHealthReporter.report(eventType, detail);
+}
+
+// ─── Convert widget Action → public DigiaAction ───────────────────────────────
+
+export const toDigiaAction = (action: Action): DigiaAction => {
+    switch (action.type) {
+        case 'dismiss':    return { type: 'dismiss', scope: action.scope };
+        case 'next':       return { type: 'next' };
+        case 'back':       return { type: 'back' };
+        case 'prev':       return { type: 'back' };
+        case 'deep_link':  return { type: 'deep_link', url: action.url, fallback_url: action.fallback_url };
+        case 'open_url':   return { type: 'open_url', url: action.url, presentation: action.presentation };
+    }
+};
+
+// ─── onAction invocation with timeout + error handling ───────────────────────
+
+async function callOnAction(
+    onAction: OnAction,
+    action: DigiaAction,
+    context: ActionContext,
+): Promise<boolean> {
+    const timedOut = { value: false };
+    try {
+        const result = onAction(action, context);
+        if (result === true) return true;
+        if (result === false || result === undefined || result === null) return false;
+        const timeoutPromise = new Promise<boolean>((resolve) =>
+            setTimeout(() => { timedOut.value = true; resolve(false); }, HANDLER_TIMEOUT_MS),
+        );
+        const resolved = await Promise.race([
+            Promise.resolve(result as Promise<boolean>).catch(() => false),
+            timeoutPromise,
+        ]);
+        if (timedOut.value) {
+            emitHealth(HealthEventType.action_handler_timeout, {
+                campaign_id: context.campaign_id,
+                action_type: action.type,
+            });
+        }
+        return resolved === true;
+    } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        emitHealth(HealthEventType.action_handler_threw, {
+            campaign_id: context.campaign_id,
+            action_type: action.type,
+            error_message: err.message,
+            error_stack: err.stack,
+        });
+        return false;
+    }
+}
+
+// ─── Default behavior per action type ────────────────────────────────────────
+
+async function runDefault(
+    action: DigiaAction,
+    context: ActionContext,
+    callbacks: ActionCallbacks,
+): Promise<void> {
+    switch (action.type) {
+        case 'deep_link': {
+            if (!isValidUrl(action.url)) {
+                emitHealth(HealthEventType.invalid_action_url, {
+                    url: action.url, action_type: 'deep_link', campaign_id: context.campaign_id,
+                });
+                return;
+            }
+            const canOpen = await Linking.canOpenURL(action.url).catch(() => false);
+            if (canOpen) {
+                Linking.openURL(action.url).catch(() => {});
+                callbacks.onDismissSelf();
+                return;
+            }
+            if (action.fallback_url) {
+                if (!isValidUrl(action.fallback_url)) {
+                    emitHealth(HealthEventType.invalid_action_url, {
+                        url: action.fallback_url, action_type: 'deep_link', campaign_id: context.campaign_id,
+                    });
+                } else {
+                    const canOpenFallback = await Linking.canOpenURL(action.fallback_url).catch(() => false);
+                    if (canOpenFallback) {
+                        Linking.openURL(action.fallback_url).catch(() => {});
+                        callbacks.onDismissSelf();
+                        return;
+                    }
+                }
+            }
+            emitHealth(HealthEventType.deep_link_no_handler, {
+                url: action.url,
+                ...(action.fallback_url ? { fallback_url: action.fallback_url } : {}),
+                campaign_id: context.campaign_id,
+            });
+            callbacks.onDismissSelf();
+            return;
+        }
+
+        case 'open_url': {
+            if (!isValidUrl(action.url)) {
+                emitHealth(HealthEventType.invalid_action_url, {
+                    url: action.url, action_type: 'open_url', campaign_id: context.campaign_id,
+                });
+                return;
+            }
+            const presentation = action.presentation ?? 'external';
+            if (presentation === 'in_app' && _config.inAppBrowser) {
+                _config.inAppBrowser.open(action.url).catch(() => {});
+            } else {
+                if (presentation === 'in_app' && !_inappBrowserWarned) {
+                    _inappBrowserWarned = true;
+                    emitHealth(HealthEventType.inapp_browser_unavailable, { campaign_id: context.campaign_id });
+                }
+                Linking.openURL(action.url).catch(() => {});
+            }
+            callbacks.onDismissSelf();
+            return;
+        }
+
+        case 'dismiss': {
+            if (action.scope === 'all') {
+                callbacks.onDismissAll();
+            } else {
+                callbacks.onDismissSelf();
+            }
+            return;
+        }
+
+        case 'next': {
+            const isLastStep =
+                context.step_total !== undefined &&
+                context.step_index !== undefined &&
+                context.step_index >= context.step_total - 1;
+            if (isLastStep) {
+                const warnKey = `next:${context.campaign_id}`;
+                if (!_invalidContextWarned.has(warnKey)) {
+                    if (_invalidContextWarned.size >= MAX_WARNED_KEYS) _invalidContextWarned.clear();
+                    _invalidContextWarned.add(warnKey);
+                    emitHealth(HealthEventType.invalid_action_context, {
+                        campaign_id: context.campaign_id, action_type: 'next',
+                    });
+                }
+                callbacks.onDismissSelf();
+                return;
+            }
+            callbacks.onNext();
+            return;
+        }
+
+        case 'back': {
+            if (context.step_index === 0) {
+                const warnKey = `back:${context.campaign_id}`;
+                if (!_invalidContextWarned.has(warnKey)) {
+                    if (_invalidContextWarned.size >= MAX_WARNED_KEYS) _invalidContextWarned.clear();
+                    _invalidContextWarned.add(warnKey);
+                    emitHealth(HealthEventType.invalid_action_context, {
+                        campaign_id: context.campaign_id, action_type: 'back',
+                    });
+                }
+                return;
+            }
+            callbacks.onBack();
+            return;
+        }
+
+    }
+}
+
+// ─── Public interface ─────────────────────────────────────────────────────────
+
+const configure = (config: Partial<ActionHandlerConfig>): void => {
+    _config = { routeViaSystemLinking: true, ...config };
+};
+
+const execute = async (
+    widgetAction: Action,
+    context: ActionContext,
+    callbacks: ActionCallbacks,
+): Promise<void> => {
+    const action = toDigiaAction(widgetAction);
+
+    if (isDuplicate(action, context.campaign_id)) return;
+
+    // Guard: queue if app not in foreground (cold-start scenario)
+    if (AppState.currentState !== 'active') {
+        digiaActionQueue.enqueue(widgetAction, action.type, context, callbacks);
+        return;
+    }
+
+    // 1. Analytics click — fire-and-forget (handled by caller via onExperienceEvent)
+
+    // 2. Invoke onAction override
+    let handled = false;
+    if (_config.onAction) {
+        handled = await callOnAction(_config.onAction, action, context);
+    }
+
+    // 3. Run default if not handled
+    if (!handled) {
+        await runDefault(action, context, callbacks);
+    }
+};
+
+export const digiaActionHandler = { configure, execute };
+
+// ─── Cold-start queue ─────────────────────────────────────────────────────────
+
+type QueuedItem = {
+    widgetAction: Action;
+    actionType: string;
+    context: ActionContext;
+    callbacks: ActionCallbacks;
+};
+
+const MAX_QUEUE_SIZE = 5;
+
+class ActionQueue {
+    private _items: QueuedItem[] = [];
+    private _subscription: { remove(): void } | null = null;
+
+    constructor() {
+        this._subscription = AppState.addEventListener('change', (state: AppStateStatus) => {
+            if (state === 'active') this._flush();
+        });
+    }
+
+    enqueue(widgetAction: Action, actionType: string, context: ActionContext, callbacks: ActionCallbacks): void {
+        if (this._items.length >= MAX_QUEUE_SIZE) {
+            const dropped = this._items.shift()!;
+            emitHealth(HealthEventType.cold_start_queue_overflow, {
+                dropped_action_type: dropped.actionType,
+                dropped_campaign_id: dropped.context.campaign_id,
+            });
+        }
+        this._items.push({ widgetAction, actionType, context, callbacks });
+    }
+
+    destroy(): void {
+        this._subscription?.remove();
+        this._subscription = null;
+        this._items = [];
+    }
+
+    private _flush(): void {
+        const items = this._items.splice(0);
+        const processAt = (index: number) => {
+            if (index >= items.length) return;
+            const item = items[index];
+            digiaActionHandler.execute(item.widgetAction, item.context, item.callbacks).finally(() => {
+                setTimeout(() => processAt(index + 1), 100);
+            });
+        };
+        processAt(0);
+    }
+}
+
+const digiaActionQueue = new ActionQueue();

package/src/defaultInAppBrowser.ts

@@ -0,0 +1,31 @@
+import type { InAppBrowserAdapter } from './types';
+
+// Lazy accessor — throws at first access if the package is not installed,
+// giving the developer a clear error at init time rather than silently
+// falling back to Linking.openURL.
+type InAppBrowserModule = { open(url: string, options?: Record<string, unknown>): Promise<void> };
+let _module: InAppBrowserModule | null = null;
+
+const loadModule = (): InAppBrowserModule => {
+    if (_module) return _module;
+    try {
+        // Dynamic require at runtime — not available at build time.
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const pkg = (globalThis as any).require('react-native-inappbrowser-reborn');
+        if (!pkg) throw new Error('not installed');
+        _module = (pkg.InAppBrowser ?? pkg.default?.InAppBrowser ?? pkg) as InAppBrowserModule;
+        return _module;
+    } catch {
+        throw new Error(
+            '[Digia] defaultInAppBrowser requires react-native-inappbrowser-reborn. ' +
+            'Run: npm install react-native-inappbrowser-reborn',
+        );
+    }
+};
+
+export const defaultInAppBrowser: InAppBrowserAdapter = {
+    open: async (url: string) => {
+        const browser = loadModule();
+        await browser!.open(url);
+    },
+};

package/src/digiaAnchorRegistry.ts

@@ -0,0 +1,27 @@
+type AnchorLayout = { pageX: number; pageY: number; width: number; height: number }
+type Listener = (layout: AnchorLayout) => void
+
+const _layouts = new Map<string, AnchorLayout>()
+const _listeners = new Map<string, Listener>()
+
+const setLayout = (key: string, layout: AnchorLayout) => {
+    _layouts.set(key, layout)
+    _listeners.get(key)?.(layout)
+}
+
+const getLayout = (key: string): AnchorLayout | undefined => _layouts.get(key)
+
+const subscribe = (key: string, listener: Listener): () => void => {
+    _listeners.set(key, listener)
+    const existing = _layouts.get(key)
+    if (existing) listener(existing)
+    return () => { if (_listeners.get(key) === listener) _listeners.delete(key) }
+}
+
+const remove = (key: string) => {
+    _layouts.delete(key)
+    _listeners.delete(key)
+}
+
+export type { AnchorLayout }
+export const digiaAnchorRegistry = { setLayout, getLayout, subscribe, remove }

package/src/index.ts

@@ -11,6 +11,7 @@
 
 export { Digia } from './Digia';
 export { DigiaHostView } from './DigiaHostView';
+export { DigiaHost } from './DigiaProvider';
 export { DigiaSlotView } from './DigiaSlotView';
 export { DigiaAnchorView } from './DigiaAnchorView';
 export type { DigiaConfig, DigiaDelegate, DigiaExperienceEvent, DigiaPlugin, InAppPayload } from './types';

package/src/templateTypes.ts

@@ -0,0 +1,121 @@
+export type Action =
+    | { type: 'dismiss';    label: string; style: 'primary' | 'secondary' | 'ghost'; scope?: 'self' | 'all' }
+    | { type: 'next';       label: string; style: 'primary' | 'secondary' | 'ghost' }
+    | { type: 'back';       label: string; style: 'primary' | 'secondary' | 'ghost' }
+    | { type: 'prev';       label: string; style: 'primary' | 'secondary' | 'ghost' }
+    | { type: 'deep_link';  label: string; style: 'primary' | 'secondary' | 'ghost'; url: string; fallback_url?: string }
+    | { type: 'open_url';   label: string; style: 'primary' | 'secondary' | 'ghost'; url: string; presentation: 'external' | 'in_app' }
+
+
+export type TooltipStep = {
+    anchorKey: string
+    title: string
+    body: string
+    placement: 'top' | 'bottom' | 'left' | 'right' | 'auto'
+    backgroundColor: string
+    borderColor: string
+    borderWidth: number
+    cornerRadius: number
+    shadow: boolean
+    maxWidth: number
+    padding: number
+    showArrow: boolean
+    arrowColor?: string
+    arrowBorderColor?: string
+    arrowSize?: number
+    titleColor: string
+    titleSize: number
+    titleWeight: '400' | '600' | '700'
+    bodyColor: string
+    bodySize: number
+    buttonPrimaryBackgroundColor: string
+    buttonPrimaryTextColor: string
+    buttonGhostTextColor: string
+    actions: Action[]
+}
+
+export type SpotlightStep = {
+    anchorKey: string
+    title: string
+    body: string
+    calloutPosition: 'above' | 'below' | 'left' | 'right' | 'auto'
+    calloutGap?: number
+    overlayColor: string
+    overlayOpacity: number
+    highlightShape: 'rect' | 'circle' | 'pill'
+    highlightCornerRadius: number
+    highlightPadding: number
+    highlightGlowColor: string
+    highlightGlowWidth: number
+    calloutBackgroundColor: string
+    calloutCornerRadius: number
+    calloutMaxWidth: number
+    calloutPadding: number
+    calloutShadow: boolean
+    calloutBorderColor: string
+    calloutBorderWidth: number
+    showArrow?: boolean
+    arrowColor?: string
+    arrowBorderColor?: string
+    arrowSize?: number
+    titleColor: string
+    titleSize: number
+    titleWeight: '400' | '600' | '700'
+    bodyColor: string
+    bodySize: number
+    buttonPrimaryBackgroundColor: string
+    buttonPrimaryTextColor: string
+    buttonGhostTextColor: string
+    actions: Action[]
+}
+
+export type TooltipConfig = {
+    templateType: 'tooltip'
+    templateId: string | null
+    steps: TooltipStep[]
+    outsideTapBehavior?: 'dismiss' | 'next' | 'nothing'
+}
+
+export type SpotlightConfig = {
+    templateType: 'spotlight'
+    templateId: string | null
+    steps: SpotlightStep[]
+    outsideTapBehavior?: 'dismiss' | 'next' | 'nothing'
+}
+
+export type CarouselItem = { imageUrl: string; deepLink?: string }
+export type CarouselIndicatorConfig = {
+    showIndicator: boolean
+    dotHeight: number
+    dotWidth: number
+    spacing: number
+    dotColor: string
+    activeDotColor: string
+    indicatorEffectType: 'slide' | 'expanding' | 'worm' | 'scale' | 'jumping' | 'scrolling'
+}
+export type CarouselConfig = {
+    templateType: 'carousel'
+    slotKey: string
+    items: CarouselItem[]
+    height: number
+    width?: number
+    autoPlay: boolean
+    autoPlayInterval: number
+    animationDuration: number
+    infiniteScroll: boolean
+    viewportFraction: number
+    indicator: CarouselIndicatorConfig
+}
+
+export type SurveyTemplateConfig = {
+    templateType: 'survey'
+    templateId: string
+    surveyName: string
+    uiTemplateId: string | null
+    settings: Record<string, unknown>
+    blocks: Record<string, unknown>[]
+    nodes: Record<string, unknown>[]
+    rootNodeId: string
+}
+
+export type TemplateConfig = TooltipConfig | SpotlightConfig | CarouselConfig | SurveyTemplateConfig