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

package/src/SoluCXWidget.tsx

@@ -1,119 +1,172 @@
-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';
-
-interface SoluCXWidgetProps {
-    soluCXKey: SoluCXKey;
-    type: WidgetType;
-    data: WidgetData;
-    options: WidgetOptions;
-}
-
-export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
-    soluCXKey,
-    type,
-    data,
-    options
-}) => {
-    const webviewRef = useRef<WebView>(null);
-    const { width } = Dimensions.get('window');
-
-    const {
-        widgetHeight,
-        isWidgetVisible,
-        setIsWidgetVisible,
-        loadSavedData,
-        resize,
-        open,
-        close,
-        userId,
-    } = useWidgetState(data, options, type);
-
-    const eventService = new WidgetEventService(setIsWidgetVisible, resize, open, userId, options);
-
-    const uri = buildWidgetURL(soluCXKey, data);
-    const isForm = Boolean(data.form_id);
-
-    useEffect(() => {
-        loadSavedData();
-    }, [loadSavedData]);
-
-    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') {
-            close();
-        }
-        setIsWidgetVisible(false);
-    }, [setIsWidgetVisible]);
-
-
-    const webViewStyle = [
-        { height: widgetHeight },
-        { width }
-    ];
-
-    if (type === 'modal') {
-        return (
-            <ModalWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
-                <WebView
-                    ref={webviewRef}
-                    style={webViewStyle}
-                    source={{ uri }}
-                    onLoadEnd={handleWebViewLoad}
-                    onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
-                    originWhitelist={['*']}
-                />
-            </ModalWidget>
-        );
-    }
-
-    if (type === 'inline') {
-        return (
-            <InlineWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
-                <WebView
-                    ref={webviewRef}
-                    style={webViewStyle}
-                    source={{ uri }}
-                    onLoadEnd={handleWebViewLoad}
-                    onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
-                    originWhitelist={['*']}
-                />
-            </InlineWidget>
-        );
-    }
-
-    return (
-        <OverlayWidget visible={isWidgetVisible} width={width} height={widgetHeight} position={type} onClose={handleClose}>
-            <WebView
-                ref={webviewRef}
-                style={webViewStyle}
-                source={{ uri }}
-                onLoadEnd={handleWebViewLoad}
-                onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
-                originWhitelist={['*']}
-            />
-        </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, callbacks }) => {
+    const webviewRef = useRef<WebView>(null);
+    const { width } = Dimensions.get("window");
+
+    const serializedData = JSON.stringify(data);
+    const normalizedData = useMemo(() => data, [serializedData]);
+
+    const { widgetHeight, isWidgetVisible, setIsWidgetVisible, loadSavedData, resize, open, close, userId } =
+        useWidgetState(normalizedData, options, type);
+
+    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]);
+
+    useEffect(() => {
+        let isActive = true;
+
+        const prepareWidgetURL = async () => {
+            if (isForm) {
+                setWidgetUri(buildWidgetURL(soluCXKey, normalizedData));
+                open(); // Show widget in form mode
+                return;
+            }
+
+            setWidgetUri(null);
+
+            try {
+                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) {
+                if (isActive) {
+                    callbacks?.onPingError?.(error);
+                    setIsWidgetVisible(false);
+                }
+            }
+        };
+
+        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") {
+            close();
+        }
+        setIsWidgetVisible(false);
+    }, [setIsWidgetVisible, close, type]);
+
+    const webViewStyle = [{ height: widgetHeight }, { width }];
+
+    if (!widgetUri) {
+        return null;
+    }
+
+    if (type === "modal") {
+        return (
+            <ModalWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
+                <WebView
+                    ref={webviewRef}
+                    style={webViewStyle}
+                    source={{ uri: widgetUri }}
+                    onLoadEnd={handleWebViewLoad}
+                    onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
+                    originWhitelist={["*"]}
+                />
+            </ModalWidget>
+        );
+    }
+
+    if (type === "inline") {
+        return (
+            <InlineWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
+                <WebView
+                    ref={webviewRef}
+                    style={webViewStyle}
+                    source={{ uri: widgetUri }}
+                    onLoadEnd={handleWebViewLoad}
+                    onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
+                    originWhitelist={["*"]}
+                />
+            </InlineWidget>
+        );
+    }
+
+    return (
+        <OverlayWidget
+            visible={isWidgetVisible}
+            width={width}
+            height={widgetHeight}
+            position={type}
+            onClose={handleClose}
+        >
+            <WebView
+                ref={webviewRef}
+                style={webViewStyle}
+                source={{ uri: widgetUri }}
+                onLoadEnd={handleWebViewLoad}
+                onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
+                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();
+    });
+});