@solucx/react-native-solucx-widget 0.2.4 → 2.0.7

package/lib/styles/widgetStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widgetStyles.d.ts","sourceRoot":"","sources":["../../src/styles/widgetStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCjB,CAAC;AAEH,eAAO,MAAM,mBAAmB,GAAI,YAAY,OAAO;;;CAKtD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS/C,CAAC"}
+{"version":3,"file":"widgetStyles.d.ts","sourceRoot":"","sources":["../../src/styles/widgetStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCjB,CAAC;AAEH,eAAO,MAAM,mBAAmB,GAAI,YAAY,OAAO;;;CAKtD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solucx/react-native-solucx-widget",
-  "version": "0.2.4",
+  "version": "2.0.7",
   "description": "The React Native SDK for Solucx Widget",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -42,8 +42,14 @@
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.js"
     ],
+    "testRegex": ".*\\.test\\.(ts|tsx)$",
+    "testMatch": null,
     "testPathIgnorePatterns": [
-      "/lib/"
+      "/lib/",
+      "/old_tests/",
+      "\\.old\\.spec\\.",
+      "\\.spec\\.(ts|tsx)$",
+      "node_modules"
     ],
     "moduleNameMapper": {
       "expo-modules-core/src/Refs": "<rootDir>/src/__mocks__/expo-modules-core.js",

package/src/SoluCXWidget.ts

@@ -0,0 +1,144 @@
+import type { WidgetCallbacks, WidgetData, WidgetOptions, WidgetSamplerLog, WidgetType } from "./domain";
+import { normalizeWidgetOptions } from "./domain/WidgetOptions";
+import { AsyncStorageService } from "./services/storage/AsyncStorageService";
+import { buildStorageId } from "./services/storage/StorageIdBuilder";
+import { WidgetStateManager, type TimestampField } from "./services/WidgetStateManager";
+
+export interface WidgetConfig {
+    instanceKey: string;
+    type: WidgetType;
+    data: WidgetData;
+    options?: WidgetOptions;
+    callbacks: WidgetCallbacks;
+}
+
+type ShowHandler = (config: WidgetConfig) => void;
+type DismissHandler = () => void;
+
+let registeredShowHandler: ShowHandler | null = null;
+let registeredDismissHandler: DismissHandler | null = null;
+
+export function _registerHost(show: ShowHandler, dismiss: DismissHandler) {
+    registeredShowHandler = show;
+    registeredDismissHandler = dismiss;
+}
+
+export function _unregisterHost() {
+    registeredShowHandler = null;
+    registeredDismissHandler = null;
+}
+
+export class SoluCXWidget {
+    private _instanceKey: string = "";
+    private _type: WidgetType = "bottom";
+    private _data: WidgetData = {};
+    private _options: WidgetOptions | null = {};
+    private _callbacks: WidgetCallbacks = {};
+
+    private constructor(instanceKey: string) {
+        this._instanceKey = instanceKey;
+    }
+
+    // --- Builder methods ---
+
+    static create(instanceKey: string): SoluCXWidget {
+        return new SoluCXWidget(instanceKey);
+    }
+
+    setData(data: WidgetData): this {
+        this._data = { ...data };
+        return this;
+    }
+
+    setOptions(options: WidgetOptions): this {
+        const isObjectValid = !!options && Object.keys(options).length > 0;
+        this._options = isObjectValid ? normalizeWidgetOptions(options) : null;
+        return this;
+    }
+
+    setCallbacks(callbacks: WidgetCallbacks): this {
+        this._callbacks = { ...callbacks };
+        return this;
+    }
+
+    setType(type: WidgetType): this {
+        this._type = type;
+        return this;
+    }
+
+    show(): void {
+        if (!registeredShowHandler) {
+            throw new Error("[SoluCXWidget] Cannot show widget — no <SoluCXWidgetHost /> is mounted. " + "Add <SoluCXWidgetHost /> at the root of your app.");
+        }
+
+        registeredShowHandler({
+            instanceKey: this._instanceKey,
+            type: this._type,
+            data: { ...this._data },
+            options: { ...this._options },
+            callbacks: { ...this._callbacks },
+        });
+
+        this._cleanup();
+    }
+
+    // --- Static: dismiss ---
+
+    static dismiss(): void {
+        registeredDismissHandler?.();
+    }
+
+    // --- Log management (instance methods) ---
+
+    /**
+     * Build the storage ID from the builder state.
+     * Uses instanceKey + journey (from data) + userId (from data).
+     */
+    private _buildStorageId(): string {
+        return buildStorageId(this._instanceKey, this._data);
+    }
+
+    private _createStateManager(): WidgetStateManager {
+        const storageId = this._buildStorageId();
+        const storageService = new AsyncStorageService(storageId);
+        return new WidgetStateManager(storageService, storageId);
+    }
+
+    /**
+     * Override a specific event timestamp.
+     * Uses instanceKey from create() and journey/userId from setData().
+     *
+     * @param field - The timestamp field to override (e.g., 'lastFirstAccess', 'lastDismiss')
+     * @param date - The date to set (Date object or timestamp in milliseconds). Use 0 to clear.
+     */
+    async overrideTimestamp(field: TimestampField, date: Date | number): Promise<this> {
+        await this._createStateManager().overrideTimestamp(field, date);
+        return this;
+    }
+
+    /**
+     * Get the current widget logs.
+     * Uses instanceKey from create() and journey/userId from setData().
+     */
+    async getWidgetLogs(): Promise<WidgetSamplerLog> {
+        return this._createStateManager().getLogs();
+    }
+
+    /**
+     * Clear all widget logs.
+     * Uses instanceKey from create() and journey/userId from setData().
+     */
+    async clearWidgetLogs(): Promise<this> {
+        await this._createStateManager().clearLogs();
+        return this;
+    }
+
+    // --- Private ---
+
+    private _cleanup(): void {
+        this._type = "bottom";
+        this._data = {};
+        this._options = {};
+        this._callbacks = {};
+    }
+}

package/src/SoluCXWidgetHost.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { SoluCXWidgetView } from "./SoluCXWidgetView";
+import { _registerHost, _unregisterHost } from "./SoluCXWidget";
+import type { WidgetConfig } from "./SoluCXWidget";
+
+export const SoluCXWidgetHost: React.FC = () => {
+    const [config, setConfig] = useState<WidgetConfig | null>(null);
+    const [refreshKey, setRefreshKey] = useState(0);
+
+    const handleShow = useCallback((newConfig: WidgetConfig) => {
+        setConfig(newConfig);
+        setRefreshKey((k) => k + 1);
+    }, []);
+
+    const handleDismiss = useCallback(() => {
+        setConfig(null);
+    }, []);
+
+    useEffect(() => {
+        _registerHost(handleShow, handleDismiss);
+        return () => _unregisterHost();
+    }, [handleShow, handleDismiss]);
+
+    if (!config) return null;
+
+    const wrappedCallbacks = {
+        ...config.callbacks,
+        onClosed: () => {
+            config.callbacks?.onClosed?.();
+            setConfig(null);
+        },
+    };
+
+    return (
+        <SoluCXWidgetView
+            key={refreshKey}
+            soluCXKey={config.instanceKey}
+            type={config.type}
+            data={config.data}
+            options={config.options}
+            callbacks={wrappedCallbacks}
+        />
+    );
+};

package/src/SoluCXWidgetView.tsx

@@ -0,0 +1,97 @@
+import React, { useCallback, useEffect } from "react";
+import { Dimensions } from "react-native";
+import { WebView } from "react-native-webview";
+
+import { InlineWidget } from "./components/InlineWidget";
+import { ModalWidget } from "./components/ModalWidget";
+import { OverlayWidget } from "./components/OverlayWidget";
+import { WEB_VIEW_MESSAGE_LISTENER } from "./constants/Constants";
+import type { SoluCXKey, WidgetCallbacks, WidgetData, WidgetOptions, WidgetType } from "./domain";
+import { useWidget } from "./hooks/useWidget";
+import { useWidgetBootstrap } from "./hooks/useWidgetBootstrap";
+import { useWidgetServices } from "./hooks/useWidgetServices";
+
+interface SoluCXWidgetProps {
+    soluCXKey: SoluCXKey;
+    type: WidgetType;
+    data: WidgetData;
+    options?: WidgetOptions;
+    callbacks?: WidgetCallbacks;
+}
+
+export const SoluCXWidgetView: React.FC<SoluCXWidgetProps> = ({ soluCXKey, type, data, options, callbacks }) => {
+    const { width } = Dimensions.get("window");
+
+    const { widgetHeight, isWidgetVisible, resize, open, hide, userId, stateManager } = useWidget(soluCXKey, data, options);
+
+    const { validationService, handleWebViewMessage } = useWidgetServices({
+        hide,
+        resize,
+        userId,
+        callbacks,
+        data,
+        stateManager,
+    });
+
+    const { widgetUri, bootstrap } = useWidgetBootstrap({
+        soluCXKey,
+        data,
+        userId,
+        options,
+        callbacks,
+        open,
+        hide,
+        validationService,
+        stateManager,
+    });
+
+    useEffect(() => {
+        bootstrap();
+    }, []);
+
+    const handleClose = useCallback(() => {
+        hide();
+        callbacks?.onClosed?.();
+    }, [hide, callbacks]);
+
+    if (!data) {
+        callbacks?.onError?.("Widget data is required but was not provided");
+        return null;
+    }
+
+    if (!widgetUri) {
+        return null;
+    }
+
+    const webView = (
+        <WebView
+            style={[{ height: widgetHeight }, { width }]}
+            source={{ uri: widgetUri }}
+            injectedJavaScript={WEB_VIEW_MESSAGE_LISTENER}
+            onMessage={event => handleWebViewMessage(event.nativeEvent.data)}
+            originWhitelist={["*"]}
+        />
+    );
+
+    if (type === "modal") {
+        return (
+            <ModalWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
+                {webView}
+            </ModalWidget>
+        );
+    }
+
+    if (type === "inline") {
+        return (
+            <InlineWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
+                {webView}
+            </InlineWidget>
+        );
+    }
+
+    return (
+        <OverlayWidget visible={isWidgetVisible} width={width} height={widgetHeight} position={type} onClose={handleClose}>
+            {webView}
+        </OverlayWidget>
+    );
+};

package/src/__tests__/ClientVersionCollector.test.ts

@@ -10,7 +10,7 @@ describe('ClientVersionCollector', () => {
             },
         }), { virtual: true });
 
-        const { getClientVersion } = require('../services/ClientVersionCollector');
+        const { getClientVersion } = require('../hooks/useClientVersionCollector');
         expect(getClientVersion()).toBe('3.0.0');
     });
 
@@ -19,7 +19,7 @@ describe('ClientVersionCollector', () => {
             getVersion: () => '4.0.0',
         }), { virtual: true });
 
-        const { getClientVersion } = require('../services/ClientVersionCollector');
+        const { getClientVersion } = require('../hooks/useClientVersionCollector');
         expect(getClientVersion()).toBe('4.0.0');
     });
 
@@ -28,7 +28,7 @@ describe('ClientVersionCollector', () => {
             throw new Error('Module not found');
         }, { virtual: true });
 
-        const { getClientVersion } = require('../services/ClientVersionCollector');
+        const { getClientVersion } = require('../hooks/useClientVersionCollector');
         expect(getClientVersion()).toBe('unknown');
     });
 
@@ -37,7 +37,7 @@ describe('ClientVersionCollector', () => {
             default: {},
         }), { virtual: true });
 
-        const { getClientVersion } = require('../services/ClientVersionCollector');
+        const { getClientVersion } = require('../hooks/useClientVersionCollector');
         expect(getClientVersion()).toBe('unknown');
     });
 
@@ -49,7 +49,7 @@ describe('ClientVersionCollector', () => {
             getVersion: () => '6.0.0',
         }), { virtual: true });
 
-        const { getClientVersion } = require('../services/ClientVersionCollector');
+        const { getClientVersion } = require('../hooks/useClientVersionCollector');
         expect(getClientVersion()).toBe('5.0.0');
     });
 });

package/src/__tests__/OverlayWidget.rendering.test.tsx

@@ -47,41 +47,39 @@ describe('OverlayWidget rendering', () => {
         expect(mockOnClose).toHaveBeenCalledTimes(1);
     });
 
-    it('should hide entirely after close button is pressed', () => {
-        const { getByText, queryByText } = render(
-            <OverlayWidget visible={true} width={390} height={300} position="bottom" onClose={jest.fn()}>
+    it('should call onClose when close button is pressed and component is controlled by parent', () => {
+        const mockOnClose = jest.fn();
+        const { getByText } = render(
+            <OverlayWidget visible={true} width={390} height={300} position="bottom" onClose={mockOnClose}>
                 <Text>Dismissible Content</Text>
             </OverlayWidget>
         );
 
         fireEvent.press(getByText('✕'));
 
-        expect(queryByText('Dismissible Content')).toBeNull();
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
     });
 
-    it('should not render content when internal visibility is set to false after close', () => {
-        const { getByText, queryByText } = render(
-            <OverlayWidget visible={true} width={390} height={300} position="top" onClose={jest.fn()}>
+    it('should not render when visible prop is false', () => {
+        const { queryByText } = render(
+            <OverlayWidget visible={false} width={390} height={300} position="top" onClose={jest.fn()}>
                 <Text>Top Content</Text>
             </OverlayWidget>
         );
 
-        fireEvent.press(getByText('✕'));
-
+        expect(queryByText('Top Content')).toBeNull();
         expect(queryByText('✕')).toBeNull();
     });
 
-    it('should not reopen after internal state is set to false even if rerendered', () => {
-        const { getByText, queryByText, rerender } = render(
+    it('should hide content when visible prop changes to false', () => {
+        const { queryByText, rerender } = render(
             <OverlayWidget visible={true} width={390} height={300} position="bottom" onClose={jest.fn()}>
                 <Text>Content</Text>
             </OverlayWidget>
         );
 
-        fireEvent.press(getByText('✕'));
-
         rerender(
-            <OverlayWidget visible={true} width={390} height={300} position="bottom" onClose={jest.fn()}>
+            <OverlayWidget visible={false} width={390} height={300} position="bottom" onClose={jest.fn()}>
                 <Text>Content</Text>
             </OverlayWidget>
         );