@digia-engage/core 1.0.0-beta.5 → 1.0.0

package/src/Digia.ts

@@ -15,14 +15,25 @@
  * ```
  */
 
+import { DeviceEventEmitter } from 'react-native';
 import { nativeDigiaModule } from './NativeDigiaEngage';
-import type { DigiaConfig, DigiaDelegate, DigiaPlugin, InAppPayload } from './types';
+import type {
+    DigiaConfig,
+    DigiaDelegate,
+    DigiaExperienceEvent,
+    DigiaPlugin,
+    InAppPayload,
+} from './types';
 
 class DigiaClass implements DigiaDelegate {
     private readonly _plugins = new Map<string, DigiaPlugin>();
     // Tracks whether the native bridge plugin (RNEventBridgePlugin) has been
     // wired to the native SDK. Done once on the first Digia.register() call.
     private _nativeBridgeWired = false;
+    // Cache of triggered payloads keyed by campaign ID, used to reconstruct
+    // the full InAppPayload when overlay lifecycle events arrive from native.
+    private readonly _activePayloads = new Map<string, InAppPayload>();
+    private _engageSubscription: { remove(): void } | null = null;
 
     /**
      * Initialise the Digia Engage SDK.
@@ -59,6 +70,7 @@ class DigiaClass implements DigiaDelegate {
         // so the delegate is ready when JS campaigns start flowing.
         if (!this._nativeBridgeWired) {
             nativeDigiaModule.registerBridge();
+            this._startEngageListener();
             this._nativeBridgeWired = true;
         }
         plugin.setup(this);
@@ -87,18 +99,65 @@ class DigiaClass implements DigiaDelegate {
         this._plugins.forEach((plugin) => plugin.forwardScreen(name));
     }
 
+
     // ── DigiaDelegate ────────────────────────────────────────────────────────
     // Mirrors DigiaCEPDelegate on Android.
     // Forwards to the native DigiaCEPDelegate via the bridge.
 
     onCampaignTriggered(payload: InAppPayload): void {
+        this._activePayloads.set(payload.id, payload);
         nativeDigiaModule.triggerCampaign(payload.id, payload.content, payload.cepContext);
     }
 
     onCampaignInvalidated(campaignId: string): void {
+        this._activePayloads.delete(campaignId);
         nativeDigiaModule.invalidateCampaign(campaignId);
     }
 
+    // ── Overlay event forwarding ─────────────────────────────────────────────
+
+    /**
+     * Subscribes to `digiaOverlayEvent` emitted by the native
+     * RNEventBridgePlugin when the Compose overlay fires a lifecycle event
+     * (impressed / clicked / dismissed).
+     *
+     * Each event is forwarded to every registered plugin's notifyEvent() so
+     * that CEP plugins (e.g. WebEngagePlugin) can report analytics.
+     */
+    private _startEngageListener(): void {
+        if (this._engageSubscription) return;
+        this._engageSubscription = DeviceEventEmitter.addListener(
+            'digiaEngageEvent',
+            (data: { campaignId: string; type: string; elementId?: string }) =>
+                this._forwardExperienceEvent(data),
+        );
+    }
+
+    private _forwardExperienceEvent(
+        data: { campaignId: string; type: string; elementId?: string },
+    ): void {
+        const payload = this._activePayloads.get(data.campaignId);
+        if (!payload) return;
+
+        let event: DigiaExperienceEvent;
+        switch (data.type) {
+            case 'impressed':
+                event = { type: 'impressed' };
+                break;
+            case 'clicked':
+                event = { type: 'clicked', elementId: data.elementId };
+                break;
+            case 'dismissed':
+                event = { type: 'dismissed' };
+                this._activePayloads.delete(data.campaignId);
+                break;
+            default:
+                return;
+        }
+
+        this._plugins.forEach((plugin) => plugin.notifyEvent(event, payload));
+    }
+
 }
 
 export const Digia = new DigiaClass();

package/src/DigiaHostView.tsx

@@ -1,35 +1,8 @@
 /**
  * DigiaHostView
  *
- * A transparent React Native view that attaches the Digia Android Compose
- * overlay layer (dialogs, bottom sheets) on top of your app's content.
- *
- * ─── Usage ───────────────────────────────────────────────────────────────────
- * Place `<DigiaHostView>` at the **root** of your component tree so that
- * Digia dialogs and bottom sheets can stack on top of all your content.
- *
- * ```tsx
- * import React from 'react';
- * import { StyleSheet, View } from 'react-native';
- * import { DigiaHostView } from '@digia/engage-react-native';
- *
- * export default function App() {
- *   return (
- *     <View style={styles.root}>
- *       <DigiaHostView style={StyleSheet.absoluteFill} />
- *       {/ * your navigation / app content here * /}
- *     </View>
- *   );
- * }
- *
- * const styles = StyleSheet.create({ root: { flex: 1 } });
- * ```
- *
- * On Android this mounts a Jetpack Compose `DigiaHost` composable that
- * manages dialog + bottom-sheet presentation triggered by CEP plugins.
- * On iOS this mounts a SwiftUI `DigiaHost` via UIHostingController that
- * manages the same overlay layer above React Native content.
- * ─────────────────────────────────────────────────────────────────────────────
+ * Transparent full-screen overlay that hosts Digia dialogs and bottom sheets.
+ * Place at the root of your component tree so overlays stack above all content.
  */
 
 import React from 'react';
@@ -45,41 +18,25 @@ interface DigiaHostViewProps {
     style?: StyleProp<ViewStyle>;
 }
 
-// requireNativeComponent expects a plain ViewStyle, not StyleProp.
 interface NativeDigiaHostViewProps {
     style?: ViewStyle;
+    pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
 }
 
-// Fabric (New Architecture) resolves view configs lazily — no UIManager
-// guard needed. requireNativeComponent is called unconditionally on iOS and Android.
 const NativeDigiaHostView =
     Platform.OS === 'android' || Platform.OS === 'ios'
         ? requireNativeComponent<NativeDigiaHostViewProps>('DigiaHostView')
         : null;
 
-// ── DigiaHostView ─────────────────────────────────────────────────────────────
-
 export function DigiaHostView({ style }: DigiaHostViewProps) {
     if ((Platform.OS === 'android' || Platform.OS === 'ios') && NativeDigiaHostView) {
-        // The native DigiaHost (Compose on Android, SwiftUI on iOS) renders
-        // dialogs / bottom sheets that float above the view hierarchy on their
-        // own — the host view only needs to be mounted in the tree, not take up
-        // any screen space.
         return (
             <NativeDigiaHostView
-                style={StyleSheet.flatten([styles.host, style])}
+                pointerEvents="none"
+                style={StyleSheet.flatten([StyleSheet.absoluteFillObject, style])}
             />
         );
     }
 
-    // Other platforms: no-op.
     return null;
 }
-
-const styles = StyleSheet.create({
-    host: {
-        width: 0,
-        height: 0,
-        overflow: 'hidden',
-    },
-});

package/src/DigiaSlotView.tsx

@@ -1,80 +1,72 @@
 /**
  * DigiaSlotView
  *
- * A React Native view that renders inline campaign content (banners, cards,
- * widgets) at a specific placement position inside your screen layout.
- *
- * On Android this mounts a Jetpack Compose `DigiaSlot` composable that
- * observes the slot payload for the given placement key and renders the
- * matching campaign component. On iOS this mounts the equivalent SwiftUI
- * `DigiaSlot` view via UIHostingController.
- *
- * ─── Usage ───────────────────────────────────────────────────────────────────
- * ```tsx
- * import { DigiaSlotView } from '@digia/engage-react-native';
- *
- * // Fixed height (you control the space)
- * <DigiaSlotView
- *   placementKey="hero_banner"
- *   style={{ width: '100%', height: 200 }}
- * />
- *
- * // Inside a scroll view
- * <ScrollView>
- *   <ProductList />
- *   <DigiaSlotView
- *     placementKey="pdp_mid_banner"
- *     style={{ width: '100%', height: 120 }}
- *   />
- *   <RelatedProducts />
- * </ScrollView>
- * ```
- *
- * The `placementKey` must match the key the marketer selects when creating
- * inline content on the Digia dashboard. The view collapses to nothing when
- * no campaign is active for that key.
- *
- * ─── Sizing ──────────────────────────────────────────────────────────────────
- * React Native's layout system controls the dimensions of this view.
- * Provide an explicit `height` (or flex) via the `style` prop so that the
- * native Compose layer has space to render. When no campaign is active the
- * Compose `DigiaSlot` renders nothing inside that space.
- * ─────────────────────────────────────────────────────────────────────────────
+ * Renders inline campaign content at a placement position.
+ * Auto-sizes to match native content height via `onContentSizeChange`;
+ * pass an explicit `height` in `style` to fix the size instead.
  */
 
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import {
     Platform,
+    StyleSheet,
     requireNativeComponent,
     type StyleProp,
     type ViewStyle,
 } from 'react-native';
 
 interface DigiaSlotViewProps {
-    /** Placement key that links this view to a Digia dashboard slot. */
     placementKey: string;
     style?: StyleProp<ViewStyle>;
 }
 
-// Fabric (New Architecture) resolves view configs lazily — no UIManager
-// guard needed. requireNativeComponent is called unconditionally on iOS and Android.
+interface NativeDigiaSlotViewProps extends DigiaSlotViewProps {
+    onContentSizeChange?: (event: { nativeEvent: { height: number } }) => void;
+    collapsable?: boolean;
+}
+
 const NativeDigiaSlotView =
     Platform.OS === 'android' || Platform.OS === 'ios'
-        ? requireNativeComponent<DigiaSlotViewProps>('DigiaSlotView')
+        ? requireNativeComponent<NativeDigiaSlotViewProps>('DigiaSlotView')
         : null;
 
-// ── DigiaSlotView ─────────────────────────────────────────────────────────────
-
 export function DigiaSlotView({ placementKey, style }: DigiaSlotViewProps) {
+    const [contentHeight, setContentHeight] = useState(0);
+
+    const onContentSizeChange = useCallback(
+        (event: { nativeEvent: { height: number } }) => {
+            const h = event.nativeEvent.height ?? 0;
+            setContentHeight(Math.max(0, h));
+        },
+        [],
+    );
+
     if ((Platform.OS === 'android' || Platform.OS === 'ios') && NativeDigiaSlotView) {
+        const flatStyle = StyleSheet.flatten(style) || {};
+        const hasExplicitHeight = flatStyle.height !== undefined;
+
+        if (hasExplicitHeight) {
+            return (
+                <NativeDigiaSlotView
+                    placementKey={placementKey}
+                    style={[{ width: '100%' }, style]}
+                    {...(Platform.OS === 'android' ? { collapsable: false } : {})}
+                />
+            );
+        }
+
+        // 1dp bootstrap ensures a real layout pass before any campaign arrives.
+        const bootstrapHeight = Math.max(contentHeight, 1);
+
         return (
             <NativeDigiaSlotView
                 placementKey={placementKey}
-                style={style}
+                style={[{ width: '100%', height: bootstrapHeight }, style]}
+                onContentSizeChange={onContentSizeChange}
+                {...(Platform.OS === 'android' ? { collapsable: false } : {})}
             />
         );
     }
 
-    // Other platforms: not yet implemented — render nothing.
     return null;
 }

package/src/NativeDigiaEngage.ts

@@ -50,6 +50,7 @@ export interface Spec extends TurboModule {
 
     /** Invalidate / dismiss a campaign by its ID. */
     invalidateCampaign(campaignId: string): void;
+
 }
 
 // Try TurboModuleRegistry first (New Architecture / JSI).

package/src/index.ts

@@ -12,4 +12,4 @@
 export { Digia } from './Digia';
 export { DigiaHostView } from './DigiaHostView';
 export { DigiaSlotView } from './DigiaSlotView';
-export type { DigiaConfig, DigiaDelegate, DigiaPlugin, InAppPayload } from './types';
+export type { DigiaConfig, DigiaDelegate, DigiaExperienceEvent, DigiaPlugin, InAppPayload } from './types';

package/src/types.ts

@@ -12,6 +12,30 @@ export interface InAppPayload {
     cepContext: Record<string, unknown>;
 }
 
+// ─── Experience events ────────────────────────────────────────────────────────
+
+/** The experience became visible to the user. */
+export interface ExperienceImpressed {
+    readonly type: 'impressed';
+}
+
+/** The user interacted with an actionable element. */
+export interface ExperienceClicked {
+    readonly type: 'clicked';
+    readonly elementId?: string;
+}
+
+/** The experience was dismissed — by the user or programmatically. */
+export interface ExperienceDismissed {
+    readonly type: 'dismissed';
+}
+
+/** Discriminated union of all experience event types. */
+export type DigiaExperienceEvent =
+    | ExperienceImpressed
+    | ExperienceClicked
+    | ExperienceDismissed;
+
 /**
  * Delegate passed by the Digia SDK to each registered plugin via setup().
  *
@@ -35,6 +59,12 @@ export interface DigiaPlugin {
     readonly identifier: string;
     /** Called by Digia.register() — do not call manually. */
     setup(delegate: DigiaDelegate): void;
+    /**
+     * Called by the Digia SDK when the overlay fires a lifecycle event
+     * (impressed / clicked / dismissed). Plugins use this to report
+     * analytics back to their CEP platform.
+     */
+    notifyEvent(event: DigiaExperienceEvent, payload: InAppPayload): void;
     /** Called by Digia.setCurrentScreen() — do not call manually. */
     forwardScreen(name: string): void;
     /** Called by Digia.unregister() or when tearing down the app. */