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

package/src/__tests__/useWidgetState.test.ts

@@ -1,189 +1,181 @@
-import { WidgetEventService } from '../services/widgetEventService';
-import { WidgetOptions } from '../interfaces';
-
-const mockWidgetValidationService = {
-    shouldDisplayWidget: jest.fn().mockResolvedValue(true)
-};
-
-jest.mock('../services/widgetValidationService', () => ({
-    WidgetValidationService: jest.fn().mockImplementation(() => mockWidgetValidationService)
-}));
-
-describe('WidgetEventService', () => {
-    let mockSetIsWidgetVisible: jest.Mock;
-    let mockResize: jest.Mock;
-    let service: WidgetEventService;
-    let open: jest.Mock;
-    let mockUserId: string;
-    let mockWidgetOptions: WidgetOptions;
-
-    beforeEach(() => {
-        jest.clearAllMocks();
-
-        mockSetIsWidgetVisible = jest.fn();
-        mockResize = jest.fn();
-        open = jest.fn();
-        mockUserId = 'test-user-123';
-        mockWidgetOptions = {
-            height: 400,
-            retry: {
-                attempts: 5,
-                interval: 1
-            },
-            waitDelayAfterRating: 60
-        };
-
-        mockWidgetValidationService.shouldDisplayWidget.mockResolvedValue(true);
-
-        service = new WidgetEventService(
-            mockSetIsWidgetVisible,
-            mockResize,
-            open,
-            mockUserId,
-            mockWidgetOptions
-        );
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-        jest.restoreAllMocks();
-    });
-
-    it('should handle FORM_OPENED event correctly', async () => {
-        const result = await service.handleMessage('FORM_OPENED', true);
-
-        expect(mockWidgetValidationService.shouldDisplayWidget).toHaveBeenCalledWith(mockWidgetOptions);
-        expect(open).toHaveBeenCalled();
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(true);
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should prevent widget from opening when validation fails', async () => {
-        mockWidgetValidationService.shouldDisplayWidget.mockResolvedValueOnce(await Promise.resolve(false));
-
-        const result = await service.handleMessage('FORM_OPENED', true);
-
-        expect(mockWidgetValidationService.shouldDisplayWidget).toHaveBeenCalledWith(mockWidgetOptions);
-        expect(open).not.toHaveBeenCalled();
-        expect(mockSetIsWidgetVisible).not.toHaveBeenCalled();
-        expect(result).toEqual({ status: 'error', message: 'Widget not allowed' });
-    });
-
-    it('should handle FORM_CLOSE event correctly', async () => {
-        const result = await service.handleMessage('FORM_CLOSE', true);
-
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should handle FORM_RESIZE event correctly', async () => {
-        const result = await service.handleMessage('FORM_RESIZE-350', true);
-
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(true);
-        expect(mockResize).toHaveBeenCalledWith('350');
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should handle FORM_ERROR event correctly', async () => {
-        const result = await service.handleMessage('FORM_ERROR-Something went wrong', true);
-
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
-        expect(result).toEqual({ status: 'error', message: 'Something went wrong' });
-    });
-
-    it('should adapt survey keys to widget keys correctly for non-form widgets', async () => {
-        const result = await service.handleMessage('closeSoluCXWidget', false);
-
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should return error for unknown events', async () => {
-        const result = await service.handleMessage('UNKNOWN_EVENT', true);
-
-        expect(result).toEqual({ status: 'error', message: 'Unknown event' });
-    });
-
-    it('should handle messages with no value correctly', async () => {
-        const result = await service.handleMessage('FORM_OPENED', true);
-
-        expect(mockWidgetValidationService.shouldDisplayWidget).toHaveBeenCalledWith(mockWidgetOptions);
-        expect(open).toHaveBeenCalled();
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(true);
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should handle FORM_PAGECHANGED event correctly', async () => {
-        const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => { });
-        const result = await service.handleMessage('FORM_PAGECHANGED-page2', true);
-
-        expect(consoleSpy).toHaveBeenCalledWith("Page changed:", "page2");
-        expect(result).toEqual({ status: 'success' });
-
-        consoleSpy.mockRestore();
-    });
-
-    it('should handle QUESTION_ANSWERED event correctly', async () => {
-        const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => { });
-        const result = await service.handleMessage('QUESTION_ANSWERED', true);
-        expect(consoleSpy).toHaveBeenCalledWith("Question answered");
-        expect(result).toEqual({ status: 'success' });
-
-        consoleSpy.mockRestore();
-    });
-
-    it('should handle FORM_COMPLETED event correctly', async () => {
-        const result = await service.handleMessage('FORM_COMPLETED', true);
-
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should handle FORM_PARTIALCOMPLETED event correctly', async () => {
-        const result = await service.handleMessage('FORM_PARTIALCOMPLETED', true);
-
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should adapt completeSoluCXWidget to FORM_COMPLETED', async () => {
-        const result = await service.handleMessage('completeSoluCXWidget', false);
-
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should adapt partialSoluCXWidget to FORM_PARTIALCOMPLETED', async () => {
-        const result = await service.handleMessage('partialSoluCXWidget', false);
-
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should adapt dismissSoluCXWidget to FORM_CLOSE', async () => {
-        const result = await service.handleMessage('dismissSoluCXWidget', false);
-
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should adapt openSoluCXWidget to FORM_OPENED', async () => {
-        const result = await service.handleMessage('openSoluCXWidget', false);
-
-        expect(mockWidgetValidationService.shouldDisplayWidget).toHaveBeenCalledWith(mockWidgetOptions);
-        expect(open).toHaveBeenCalled();
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(true);
-        expect(result).toEqual({ status: 'success' });
-    });
-
-    it('should adapt errorSoluCXWidget to FORM_ERROR', async () => {
-        const result = await service.handleMessage('errorSoluCXWidget-Network error', false);
-
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
-        expect(result).toEqual({ status: 'error', message: 'Network error' });
-    });
-
-    it('should adapt resizeSoluCXWidget to FORM_RESIZE', async () => {
-        const result = await service.handleMessage('resizeSoluCXWidget-400', false);
-
-        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(true);
-        expect(mockResize).toHaveBeenCalledWith('400');
-        expect(result).toEqual({ status: 'success' });
-    });
-});
+import { WidgetEventService } from '../services/widgetEventService';
+import type { WidgetCallbacks } from '../interfaces';
+
+describe('WidgetEventService', () => {
+    let mockSetIsWidgetVisible: jest.Mock;
+    let mockResize: jest.Mock;
+    let mockUserId: string;
+    let mockCallbacks: WidgetCallbacks;
+    let service: WidgetEventService;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        mockSetIsWidgetVisible = jest.fn();
+        mockResize = jest.fn();
+        mockUserId = 'test-user-123';
+        mockCallbacks = {
+            onClosed: jest.fn(),
+            onError: jest.fn(),
+            onPageChanged: jest.fn(),
+            onQuestionAnswered: jest.fn(),
+            onCompleted: jest.fn(),
+            onPartialCompleted: jest.fn(),
+            onResize: jest.fn(),
+        };
+
+        service = new WidgetEventService(
+            mockSetIsWidgetVisible,
+            mockResize,
+            mockUserId,
+            mockCallbacks,
+        );
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+        jest.restoreAllMocks();
+    });
+
+    it('should handle FORM_CLOSE event correctly', async () => {
+        const result = await service.handleMessage('FORM_CLOSE', true);
+
+        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
+        expect(mockCallbacks.onClosed).toHaveBeenCalledTimes(1);
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should handle FORM_RESIZE event correctly', async () => {
+        const result = await service.handleMessage('FORM_RESIZE-350', true);
+
+        expect(mockResize).toHaveBeenCalledWith('350');
+        expect(mockCallbacks.onResize).toHaveBeenCalledWith('350');
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should handle FORM_ERROR event correctly', async () => {
+        const result = await service.handleMessage('FORM_ERROR-Something went wrong', true);
+
+        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
+        expect(mockCallbacks.onError).toHaveBeenCalledWith('Something went wrong');
+        expect(result).toEqual({ status: 'error', message: 'Something went wrong' });
+    });
+
+    it('should handle FORM_PAGECHANGED event correctly', async () => {
+        const result = await service.handleMessage('FORM_PAGECHANGED-page2', true);
+
+        expect(mockCallbacks.onPageChanged).toHaveBeenCalledWith('page2');
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should handle QUESTION_ANSWERED event correctly', async () => {
+        const result = await service.handleMessage('QUESTION_ANSWERED', true);
+
+        expect(mockCallbacks.onQuestionAnswered).toHaveBeenCalledTimes(1);
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should handle FORM_COMPLETED event correctly', async () => {
+        const result = await service.handleMessage('FORM_COMPLETED', true);
+
+        expect(mockCallbacks.onPartialCompleted).toHaveBeenCalledWith('test-user-123');
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should handle FORM_PARTIALCOMPLETED event correctly', async () => {
+        const result = await service.handleMessage('FORM_PARTIALCOMPLETED', true);
+
+        expect(mockCallbacks.onPartialCompleted).toHaveBeenCalledWith('test-user-123');
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should return error for unknown events', async () => {
+        const result = await service.handleMessage('UNKNOWN_EVENT', true);
+
+        expect(result).toEqual({ status: 'error', message: 'Unknown event' });
+    });
+
+    it('should return error when FORM_OPENED is sent since it was removed from event handlers', async () => {
+        const result = await service.handleMessage('FORM_OPENED', true);
+
+        expect(result).toEqual({ status: 'error', message: 'Unknown event' });
+    });
+
+    it('should adapt closeSoluCXWidget to FORM_CLOSE', async () => {
+        const result = await service.handleMessage('closeSoluCXWidget', false);
+
+        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
+        expect(mockCallbacks.onClosed).toHaveBeenCalledTimes(1);
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should adapt completeSoluCXWidget to FORM_COMPLETED', async () => {
+        const result = await service.handleMessage('completeSoluCXWidget', false);
+
+        expect(mockCallbacks.onPartialCompleted).toHaveBeenCalledWith('test-user-123');
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should adapt partialSoluCXWidget to FORM_PARTIALCOMPLETED', async () => {
+        const result = await service.handleMessage('partialSoluCXWidget', false);
+
+        expect(mockCallbacks.onPartialCompleted).toHaveBeenCalledWith('test-user-123');
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should adapt dismissSoluCXWidget to FORM_CLOSE', async () => {
+        const result = await service.handleMessage('dismissSoluCXWidget', false);
+
+        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
+        expect(mockCallbacks.onClosed).toHaveBeenCalledTimes(1);
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should adapt errorSoluCXWidget to FORM_ERROR', async () => {
+        const result = await service.handleMessage('errorSoluCXWidget-Network error', false);
+
+        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
+        expect(mockCallbacks.onError).toHaveBeenCalledWith('Network error');
+        expect(result).toEqual({ status: 'error', message: 'Network error' });
+    });
+
+    it('should adapt resizeSoluCXWidget to FORM_RESIZE', async () => {
+        const result = await service.handleMessage('resizeSoluCXWidget-400', false);
+
+        expect(mockResize).toHaveBeenCalledWith('400');
+        expect(mockCallbacks.onResize).toHaveBeenCalledWith('400');
+        expect(result).toEqual({ status: 'success' });
+    });
+
+    it('should adapt openSoluCXWidget to FORM_OPENED which returns unknown event', async () => {
+        const result = await service.handleMessage('openSoluCXWidget', false);
+
+        expect(result).toEqual({ status: 'error', message: 'Unknown event' });
+    });
+
+    it('should not call any callback when event is unknown', async () => {
+        await service.handleMessage('SOME_RANDOM_EVENT', true);
+
+        expect(mockSetIsWidgetVisible).not.toHaveBeenCalled();
+        expect(mockResize).not.toHaveBeenCalled();
+        expect(mockCallbacks.onClosed).not.toHaveBeenCalled();
+        expect(mockCallbacks.onError).not.toHaveBeenCalled();
+        expect(mockCallbacks.onPageChanged).not.toHaveBeenCalled();
+        expect(mockCallbacks.onQuestionAnswered).not.toHaveBeenCalled();
+        expect(mockCallbacks.onPartialCompleted).not.toHaveBeenCalled();
+        expect(mockCallbacks.onResize).not.toHaveBeenCalled();
+    });
+
+    it('should work without callbacks when none are provided', async () => {
+        const serviceWithoutCallbacks = new WidgetEventService(
+            mockSetIsWidgetVisible,
+            mockResize,
+            mockUserId,
+        );
+
+        const result = await serviceWithoutCallbacks.handleMessage('FORM_CLOSE', true);
+
+        expect(mockSetIsWidgetVisible).toHaveBeenCalledWith(false);
+        expect(result).toEqual({ status: 'success' });
+    });
+});

package/src/__tests__/widgetBootstrapService.test.ts

@@ -0,0 +1,182 @@
+import { requestWidgetUrl, buildRequestParams } from '../services/widgetBootstrapService';
+import { WidgetData } from '../interfaces';
+
+// Mock das dependências
+jest.mock('../constants/Constants', () => ({
+    SDK_NAME: 'rn-widget-sdk',
+    SDK_VERSION: '0.1.16',
+}));
+
+jest.mock('../services/ClientVersionCollector', () => ({
+    getClientVersion: jest.fn(() => '1.0.0'),
+}));
+
+jest.mock('../hooks/useDeviceInfoCollector', () => ({
+    getDeviceInfo: jest.fn(() => ({
+        platform: 'ios',
+        osVersion: '16.0',
+        deviceType: 'phone',
+        model: 'iPhone 14 Pro',
+    })),
+}));
+
+// Mock global do fetch
+const originalFetch = global.fetch;
+
+describe('widgetBootstrapService', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        global.fetch = jest.fn();
+    });
+
+    afterEach(() => {
+        global.fetch = originalFetch;
+    });
+
+    describe('buildRequestParams', () => {
+        it('should build URL parameters from widget data', () => {
+            const data: WidgetData = {
+                customer_id: 'cust-123',
+                email: 'test@example.com',
+                journey: 'checkout',
+            };
+
+            const params = buildRequestParams(data);
+
+            expect(params.get('customer_id')).toBe('cust-123');
+            expect(params.get('email')).toBe('test@example.com');
+            expect(params.get('journey')).toBe('checkout');
+            expect(params.get('transactionId')).toBe('');
+            expect(params.get('attemptId')).toBe('');
+        });
+
+        it('should skip undefined and null values', () => {
+            const data: WidgetData = {
+                customer_id: 'cust-123',
+                email: undefined,
+                name: null as any,
+            };
+
+            const params = buildRequestParams(data);
+
+            expect(params.has('customer_id')).toBe(true);
+            expect(params.has('email')).toBe(false);
+            expect(params.has('name')).toBe(false);
+        });
+
+        it('should convert numbers to strings', () => {
+            const data: WidgetData = {
+                amount: 100.50,
+                score: 5,
+            };
+
+            const params = buildRequestParams(data);
+
+            expect(params.get('amount')).toBe('100.5');
+            expect(params.get('score')).toBe('5');
+        });
+    });
+
+    describe('requestWidgetUrl', () => {
+        it('should send request with correct Sec-CH-UA headers', async () => {
+            const mockResponse = {
+                ok: true,
+                json: jest.fn().mockResolvedValue({ url: 'https://widget.url' }),
+            };
+            (global.fetch as jest.Mock).mockResolvedValue(mockResponse);
+
+            const data: WidgetData = {
+                customer_id: 'cust-123',
+                journey: 'test',
+            };
+
+            await requestWidgetUrl('api-key-123', data, 'user-id-456');
+
+            expect(global.fetch).toHaveBeenCalledWith(
+                expect.stringContaining('customer_id=cust-123'),
+                expect.objectContaining({
+                    method: 'GET',
+                    headers: expect.objectContaining({
+                        'x-solucx-api-key': 'api-key-123',
+                        'x-solucx-device-id': 'user-id-456',
+                        'Sec-CH-UA': '"rn-widget-sdk";v="0.1.16", "app";v="1.0.0"',
+                        'Sec-CH-UA-Platform': '"ios"',
+                        'Sec-CH-UA-Mobile': '?1',
+                        'Sec-CH-UA-Platform-Version': '"16.0"',
+                        'Sec-CH-UA-Model': '"iPhone 14 Pro"',
+                        'User-Agent': 'rn-widget-sdk/0.1.16 (ios; OS 16.0; iPhone 14 Pro) App/1.0.0',
+                    }),
+                })
+            );
+        });
+
+        it('should set Sec-CH-UA-Mobile to ?0 for tablets', async () => {
+            const { getDeviceInfo } = require('../hooks/useDeviceInfoCollector');
+            getDeviceInfo.mockReturnValueOnce({
+                platform: 'android',
+                osVersion: '13.0',
+                deviceType: 'tablet',
+                model: 'Samsung Galaxy Tab S8',
+            });
+
+            const mockResponse = {
+                ok: true,
+                json: jest.fn().mockResolvedValue({ url: 'https://widget.url' }),
+            };
+            (global.fetch as jest.Mock).mockResolvedValue(mockResponse);
+
+            const data: WidgetData = { customer_id: 'cust-123' };
+
+            await requestWidgetUrl('api-key-123', data, 'user-id-456');
+
+            expect(global.fetch).toHaveBeenCalledWith(
+                expect.any(String),
+                expect.objectContaining({
+                    headers: expect.objectContaining({
+                        'Sec-CH-UA-Mobile': '?0',
+                        'Sec-CH-UA-Platform': '"android"',
+                    }),
+                })
+            );
+        });
+
+        it('should return widget URL on success', async () => {
+            const mockResponse = {
+                ok: true,
+                json: jest.fn().mockResolvedValue({ url: 'https://widget.url/test' }),
+            };
+            (global.fetch as jest.Mock).mockResolvedValue(mockResponse);
+
+            const result = await requestWidgetUrl(
+                'api-key',
+                { customer_id: 'cust' },
+                'user-id'
+            );
+
+            expect(result).toBe('https://widget.url/test');
+        });
+
+        it('should return undefined when response is not ok', async () => {
+            const mockResponse = {
+                ok: false,
+            };
+            (global.fetch as jest.Mock).mockResolvedValue(mockResponse);
+
+            const result = await requestWidgetUrl(
+                'api-key',
+                { customer_id: 'cust' },
+                'user-id'
+            );
+
+            expect(result).toBeUndefined();
+        });
+
+        it('should return undefined when fetch is not available', async () => {
+            (global as any).fetch = undefined;
+
+            const result = await requestWidgetUrl('api-key', { customer_id: 'cust' }, 'user-id');
+
+            expect(result).toBeUndefined();
+        });
+    });
+});

package/src/components/CloseButton.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
-
-interface CloseButtonProps {
-    onPress: () => void;
-    visible?: boolean;
-}
-
-export const CloseButton: React.FC<CloseButtonProps> = ({ onPress, visible = true }) => {
-    if (!visible) return null;
-
-    return (
-        <TouchableOpacity style={styles.closeButton} onPress={onPress}>
-            <Text style={styles.closeButtonText}>✕</Text>
-        </TouchableOpacity>
-    );
-};
-
-const styles = StyleSheet.create({
-    closeButton: {
-        position: 'absolute',
-        top: 10,
-        right: 10,
-        width: 30,
-        height: 30,
-        borderRadius: 15,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 10001,
-    },
-    closeButtonText: {
-        color: 'white',
-        fontSize: 16,
-        fontWeight: 'bold',
-    },
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+
+interface CloseButtonProps {
+    onPress: () => void;
+    visible?: boolean;
+}
+
+export const CloseButton: React.FC<CloseButtonProps> = ({ onPress, visible = true }) => {
+    if (!visible) return null;
+
+    return (
+        <TouchableOpacity style={styles.closeButton} onPress={onPress}>
+            <Text style={styles.closeButtonText}>✕</Text>
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    closeButton: {
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 10001,
+    },
+    closeButtonText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
 });