@solucx/react-native-solucx-widget 0.1.16 → 0.2.0

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@solucx/react-native-solucx-widget",
-  "version": "0.1.16",
+  "version": "0.2.0",
   "description": "The React Native SDK for Solucx Widget",
   "main": "src/index",
   "author": " <> ()",
   "homepage": "#readme",
   "scripts": {
     "build": "tsc",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "jest"
   },
   "files": [
     "src/",
@@ -17,7 +18,33 @@
     "@react-native-async-storage/async-storage": "^2.2.0",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
-    "react-native-webview": "^13.16.0",
-    "react-native-safe-area-context": "^5.6.1"
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-webview": "^13.16.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "29.5.14",
+    "@types/react": "~19.1.10",
+    "@types/react-native": "^0.72.8",
+    "jest": "~29.7.0",
+    "jest-expo": "~54.0.17",
+    "react-test-renderer": "19.1.0",
+    "typescript": "~5.9.2"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ],
+    "testPathIgnorePatterns": [
+      "/lib/"
+    ],
+    "moduleNameMapper": {
+      "expo-modules-core/src/Refs": "<rootDir>/src/__mocks__/expo-modules-core.js",
+      "expo-modules-core/src/web/index.web": "<rootDir>/src/__mocks__/expo-modules-core-web.js",
+      "expo-modules-core/src/uuid/uuid.web": "<rootDir>/src/__mocks__/expo-modules-core.js",
+      "expo-modules-core$": "<rootDir>/src/__mocks__/expo-modules-core.js"
+    }
   }
 }

package/src/SoluCXWidget.tsx

@@ -1,118 +1,171 @@
-import React, { useEffect, useRef, useCallback } from 'react';
-import { Dimensions } from 'react-native';
-import { WebView } from 'react-native-webview';
-
-import { SoluCXKey, WidgetData, WidgetOptions, WidgetType } from './interfaces';
-import { useWidgetState } from './hooks/useWidgetState';
-import { WidgetEventService } from './services/widgetEventService';
-import { buildWidgetURL } from './utils/urlUtils';
-import { WEB_VIEW_MESSAGE_LISTENER } from './constants/webViewConstants';
-import { ModalWidget } from './components/ModalWidget';
-import { InlineWidget } from './components/InlineWidget';
-import { OverlayWidget } from './components/OverlayWidget';
+import React, { useEffect, useRef, useCallback, useState, useMemo } from "react";
+import { Dimensions } from "react-native";
+import { WebView } from "react-native-webview";
+
+import type { SoluCXKey, WidgetData, WidgetOptions, WidgetType, WidgetCallbacks } from "./interfaces";
+import { useWidgetState } from "./hooks/useWidgetState";
+import { WidgetEventService } from "./services/widgetEventService";
+import { WidgetValidationService } from "./services/widgetValidationService";
+import { buildWidgetURL } from "./utils/urlUtils";
+import { WEB_VIEW_MESSAGE_LISTENER } from "./constants/webViewConstants";
+import { ModalWidget } from "./components/ModalWidget";
+import { InlineWidget } from "./components/InlineWidget";
+import { OverlayWidget } from "./components/OverlayWidget";
+import { requestWidgetUrl } from "./services/widgetBootstrapService";
 
 interface SoluCXWidgetProps {
     soluCXKey: SoluCXKey;
     type: WidgetType;
     data: WidgetData;
     options: WidgetOptions;
+    callbacks?: WidgetCallbacks;
 }
 
-export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
-    soluCXKey,
-    type,
-    data,
-    options
-}) => {
+export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({ soluCXKey, type, data, options, callbacks }) => {
     const webviewRef = useRef<WebView>(null);
-    const { width } = Dimensions.get('window');
+    const { width } = Dimensions.get("window");
 
-    const {
-        widgetHeight,
-        isWidgetVisible,
-        setIsWidgetVisible,
-        loadSavedData,
-        resize,
-        open,
-        close,
-        userId,
-    } = useWidgetState(data, options, type);
+    const serializedData = JSON.stringify(data);
+    const normalizedData = useMemo(() => data, [serializedData]);
 
-    const eventService = new WidgetEventService(setIsWidgetVisible, resize, open, userId, options);
+    const { widgetHeight, isWidgetVisible, setIsWidgetVisible, loadSavedData, resize, open, close, userId } =
+        useWidgetState(normalizedData, options, type);
 
-    const uri = buildWidgetURL(soluCXKey, data);
-    const isForm = Boolean(data.form_id);
+    const eventService = useMemo(
+        () => new WidgetEventService(setIsWidgetVisible, resize, userId, callbacks),
+        [setIsWidgetVisible, resize],
+    );
+
+    const validationService = useMemo(() => new WidgetValidationService(userId), [userId]);
+    const isForm = Boolean(normalizedData.form_id);
+    const [widgetUri, setWidgetUri] = useState<string | null>(() =>
+        isForm ? buildWidgetURL(soluCXKey, normalizedData) : null,
+    );
 
     useEffect(() => {
         loadSavedData();
     }, [loadSavedData]);
 
-    const handleWebViewMessage = useCallback(async (message: string) => {
-        if (message && message.length > 0) {
+    useEffect(() => {
+        let isActive = true;
+
+        const prepareWidgetURL = async () => {
+            if (isForm) {
+                setWidgetUri(buildWidgetURL(soluCXKey, normalizedData));
+                open(); // Show widget in form mode
+                return;
+            }
+
+            setWidgetUri(null);
+
             try {
-                await eventService.handleMessage(message, isForm);
+                const widgetUrl = await requestWidgetUrl(soluCXKey, normalizedData, userId);
+                if (!isActive || !widgetUrl) return;
+
+                const result = await validationService.shouldDisplayWidget(options);
+                if (!isActive) return;
+
+                if (!result.canDisplay) {
+                    const blockReason = result?.blockReason;
+                    callbacks?.onBlock?.(blockReason);
+                    setIsWidgetVisible(false);
+                    return;
+                }
+
+                callbacks?.onPreOpen?.(userId);
+                open();
+                setWidgetUri(widgetUrl);
+                callbacks?.onOpened?.(userId);
             } catch (error) {
-                console.error('Error handling widget message:', error);
+                if (isActive) {
+                    callbacks?.onPingError?.(error);
+                    setIsWidgetVisible(false);
+                }
             }
-        }
-    }, [eventService, isForm]);
+        };
+
+        prepareWidgetURL();
+
+        return () => {
+            isActive = false;
+        };
+    }, [validationService, soluCXKey, normalizedData, isForm, setIsWidgetVisible, options, open, userId, callbacks]);
+
+    const handleWebViewMessage = useCallback(
+        async (message: string) => {
+            if (message && message.length > 0) {
+                try {
+                    await eventService.handleMessage(message, isForm);
+                } catch (error) {
+                    console.error("Error handling widget message:", error);
+                }
+            }
+        },
+        [eventService, isForm],
+    );
 
     const handleWebViewLoad = useCallback(() => {
         webviewRef.current?.injectJavaScript(WEB_VIEW_MESSAGE_LISTENER);
     }, []);
 
     const handleClose = useCallback(() => {
-        if (type === 'inline' || type === 'modal') {
+        if (type === "inline" || type === "modal") {
             close();
         }
         setIsWidgetVisible(false);
-    }, [setIsWidgetVisible]);
+    }, [setIsWidgetVisible, close, type]);
 
+    const webViewStyle = [{ height: widgetHeight }, { width }];
 
-    const webViewStyle = [
-        { height: widgetHeight },
-        { width }
-    ];
+    if (!widgetUri) {
+        return null;
+    }
 
-    if (type === 'modal') {
+    if (type === "modal") {
         return (
             <ModalWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
                 <WebView
                     ref={webviewRef}
                     style={webViewStyle}
-                    source={{ uri }}
+                    source={{ uri: widgetUri }}
                     onLoadEnd={handleWebViewLoad}
                     onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
-                    originWhitelist={['*']}
+                    originWhitelist={["*"]}
                 />
             </ModalWidget>
         );
     }
 
-    if (type === 'inline') {
+    if (type === "inline") {
         return (
             <InlineWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
                 <WebView
                     ref={webviewRef}
                     style={webViewStyle}
-                    source={{ uri }}
+                    source={{ uri: widgetUri }}
                     onLoadEnd={handleWebViewLoad}
                     onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
-                    originWhitelist={['*']}
+                    originWhitelist={["*"]}
                 />
             </InlineWidget>
         );
     }
 
     return (
-        <OverlayWidget visible={isWidgetVisible} width={width} height={widgetHeight} position={type} onClose={handleClose}>
+        <OverlayWidget
+            visible={isWidgetVisible}
+            width={width}
+            height={widgetHeight}
+            position={type}
+            onClose={handleClose}
+        >
             <WebView
                 ref={webviewRef}
                 style={webViewStyle}
-                source={{ uri }}
+                source={{ uri: widgetUri }}
                 onLoadEnd={handleWebViewLoad}
                 onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
-                originWhitelist={['*']}
+                originWhitelist={["*"]}
             />
         </OverlayWidget>
     );

package/src/__mocks__/expo-modules-core-web.js

@@ -0,0 +1,16 @@
+// Mock for expo-modules-core/src/web/index.web
+// Provides stubs for web globals normally installed via JSI
+
+if (typeof globalThis.expo === 'undefined') {
+  globalThis.expo = {
+    EventEmitter: class EventEmitter {
+      constructor() { this._listeners = {}; }
+      addListener() { return { remove: () => {} }; }
+      removeAllListeners() {}
+      emit() {}
+    },
+    NativeModule: class NativeModule {},
+    SharedObject: class SharedObject {},
+    modules: {},
+  };
+}

package/src/__mocks__/expo-modules-core.js

@@ -0,0 +1,33 @@
+// Comprehensive mock for expo-modules-core
+const EventEmitter = class EventEmitter {
+  constructor() { this._listeners = {}; }
+  addListener() { return { remove: () => {} }; }
+  removeAllListeners() {}
+  emit() {}
+};
+
+const NativeModule = class NativeModule {};
+const SharedObject = class SharedObject {};
+
+const createSnapshotFriendlyRef = () => {
+  const ref = { current: null };
+  Object.defineProperty(ref, 'toJSON', {
+    value: () => '[React.ref]',
+  });
+  return ref;
+};
+
+module.exports = {
+  EventEmitter,
+  NativeModule,
+  SharedObject,
+  NativeModulesProxy: {},
+  requireOptionalNativeModule: () => null,
+  requireNativeModule: (name) => { throw new Error(`Cannot find native module '${name}'`); },
+  requireNativeViewManager: () => ({}),
+  uuid: {
+    v4: () => 'mock-uuid-v4',
+    v5: () => 'mock-uuid-v5',
+  },
+  createSnapshotFriendlyRef,
+};

package/src/__tests__/ClientVersionCollector.test.ts

@@ -0,0 +1,55 @@
+describe('ClientVersionCollector', () => {
+    beforeEach(() => {
+        jest.resetModules();
+    });
+
+    it('should get version from react-native-device-info default export when available', () => {
+        jest.doMock('react-native-device-info', () => ({
+            default: {
+                getVersion: () => '3.0.0',
+            },
+        }), { virtual: true });
+
+        const { getClientVersion } = require('../services/ClientVersionCollector');
+        expect(getClientVersion()).toBe('3.0.0');
+    });
+
+    it('should get version from react-native-device-info direct export when default is not available', () => {
+        jest.doMock('react-native-device-info', () => ({
+            getVersion: () => '4.0.0',
+        }), { virtual: true });
+
+        const { getClientVersion } = require('../services/ClientVersionCollector');
+        expect(getClientVersion()).toBe('4.0.0');
+    });
+
+    it('should return "unknown" when react-native-device-info is not available', () => {
+        jest.doMock('react-native-device-info', () => {
+            throw new Error('Module not found');
+        }, { virtual: true });
+
+        const { getClientVersion } = require('../services/ClientVersionCollector');
+        expect(getClientVersion()).toBe('unknown');
+    });
+
+    it('should return "unknown" when react-native-device-info has no getVersion method', () => {
+        jest.doMock('react-native-device-info', () => ({
+            default: {},
+        }), { virtual: true });
+
+        const { getClientVersion } = require('../services/ClientVersionCollector');
+        expect(getClientVersion()).toBe('unknown');
+    });
+
+    it('should prefer default.getVersion when both default and direct getVersion are available', () => {
+        jest.doMock('react-native-device-info', () => ({
+            default: {
+                getVersion: () => '5.0.0',
+            },
+            getVersion: () => '6.0.0',
+        }), { virtual: true });
+
+        const { getClientVersion } = require('../services/ClientVersionCollector');
+        expect(getClientVersion()).toBe('5.0.0');
+    });
+});

package/src/__tests__/CloseButton.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { CloseButton } from '../components/CloseButton';
+
+describe('CloseButton', () => {
+    it('should render close button text when visible is true', () => {
+        const { getByText } = render(
+            <CloseButton onPress={jest.fn()} visible={true} />
+        );
+
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should not render when visible is false', () => {
+        const { queryByText } = render(
+            <CloseButton onPress={jest.fn()} visible={false} />
+        );
+
+        expect(queryByText('✕')).toBeNull();
+    });
+
+    it('should render by default when visible prop is omitted', () => {
+        const { getByText } = render(
+            <CloseButton onPress={jest.fn()} />
+        );
+
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should call onPress when pressed', () => {
+        const mockOnPress = jest.fn();
+        const { getByText } = render(
+            <CloseButton onPress={mockOnPress} visible={true} />
+        );
+
+        fireEvent.press(getByText('✕'));
+
+        expect(mockOnPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onPress when not pressed', () => {
+        const mockOnPress = jest.fn();
+        render(<CloseButton onPress={mockOnPress} visible={true} />);
+
+        expect(mockOnPress).not.toHaveBeenCalled();
+    });
+});

package/src/__tests__/Constants.test.ts

@@ -0,0 +1,17 @@
+import { SDK_NAME, SDK_VERSION } from '../constants/Constants';
+
+describe('Constants', () => {
+    describe('SDK_NAME', () => {
+        it('should have the correct SDK name', () => {
+            expect(SDK_NAME).toBe('rn-widget-sdk');
+        });
+    });
+
+    describe('SDK_VERSION', () => {
+        it('should import version from package.json', () => {
+            expect(SDK_VERSION).toBeDefined();
+            expect(typeof SDK_VERSION).toBe('string');
+            expect(SDK_VERSION).toMatch(/^\d+\.\d+\.\d+$/); // Verifica formato semver
+        });
+    });
+});

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { InlineWidget } from '../components/InlineWidget';
+
+describe('InlineWidget rendering', () => {
+    it('should render children when visible is true', () => {
+        const { getByText } = render(
+            <InlineWidget visible={true} height={300}>
+                <Text>Inline Survey</Text>
+            </InlineWidget>
+        );
+
+        expect(getByText('Inline Survey')).toBeTruthy();
+    });
+
+    it('should render close button when visible is true', () => {
+        const { getByText } = render(
+            <InlineWidget visible={true} height={300}>
+                <Text>Content</Text>
+            </InlineWidget>
+        );
+
+        expect(getByText('✕')).toBeTruthy();
+    });
+
+    it('should call onClose when close button is pressed', () => {
+        const mockOnClose = jest.fn();
+        const { getByText } = render(
+            <InlineWidget visible={true} height={300} onClose={mockOnClose}>
+                <Text>Content</Text>
+            </InlineWidget>
+        );
+
+        fireEvent.press(getByText('✕'));
+
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('should still render content when visible is false', () => {
+        const { getByText } = render(
+            <InlineWidget visible={false} height={300}>
+                <Text>Hidden Content</Text>
+            </InlineWidget>
+        );
+
+        expect(getByText('Hidden Content')).toBeTruthy();
+    });
+
+    it('should hide close button when visible is false', () => {
+        const { queryByText } = render(
+            <InlineWidget visible={false} height={300}>
+                <Text>Content</Text>
+            </InlineWidget>
+        );
+
+        expect(queryByText('✕')).toBeNull();
+    });
+
+    it('should not throw when onClose is not provided and close is pressed', () => {
+        const { getByText } = render(
+            <InlineWidget visible={true} height={300}>
+                <Text>Content</Text>
+            </InlineWidget>
+        );
+
+        expect(() => fireEvent.press(getByText('✕'))).not.toThrow();
+    });
+
+    it('should render multiple children', () => {
+        const { getByText } = render(
+            <InlineWidget visible={true} height={300}>
+                <Text>Child A</Text>
+                <Text>Child B</Text>
+            </InlineWidget>
+        );
+
+        expect(getByText('Child A')).toBeTruthy();
+        expect(getByText('Child B')).toBeTruthy();
+    });
+});