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

package/src/SoluCXWidget.tsx

@@ -1,119 +1,119 @@
-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 } 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>
+    );
+};

package/src/__tests__/urlUtils.test.ts

@@ -1,56 +1,56 @@
-import { buildWidgetURL } from '../utils/urlUtils';
-
-describe('urlUtils', () => {
-    describe('buildWidgetURL', () => {
-        const mockKey = 'test-widget-key';
-
-        it('should build URL with transaction_id when provided', () => {
-            const data = {
-                customer_id: 'customer123',
-                form_id: 'form456',
-                transaction_id: 'trans789'
-            };
-
-            const result = buildWidgetURL(mockKey, data);
-
-            expect(result).toContain('https://survey-link.solucx.com.br/link/test-widget-key/?mode=widget');
-            expect(result).toContain('customer_id=customer123');
-            expect(result).toContain('form_id=form456');
-            expect(result).toContain('transaction_id=trans789');
-        });
-
-        it('should build URL with empty transaction_id when not provided', () => {
-            const data = {
-                customer_id: 'customer123',
-                form_id: 'form456'
-            };
-
-            const result = buildWidgetURL(mockKey, data);
-
-            expect(result).toContain('https://survey-link.solucx.com.br/link/test-widget-key/?mode=widget');
-            expect(result).toContain('transaction_id=&');
-            expect(result).toContain('customer_id=customer123');
-            expect(result).toContain('form_id=form456');
-        });
-
-        it('should handle empty data object', () => {
-            const data = {};
-
-            const result = buildWidgetURL(mockKey, data);
-
-            expect(result).toBe('https://survey-link.solucx.com.br/link/test-widget-key/?mode=widget&transaction_id=&');
-        });
-
-        it('should encode URL parameters correctly', () => {
-            const data = {
-                email: 'test@example.com',
-                name: 'John Doe'
-            };
-
-            const result = buildWidgetURL(mockKey, data);
-
-            expect(result).toContain('email=test%40example.com');
-            expect(result).toContain('name=John+Doe');
-        });
-    });
-});
+import { buildWidgetURL } from '../utils/urlUtils';
+
+describe('urlUtils', () => {
+    describe('buildWidgetURL', () => {
+        const mockKey = 'test-widget-key';
+
+        it('should build URL with transaction_id when provided', () => {
+            const data = {
+                customer_id: 'customer123',
+                form_id: 'form456',
+                transaction_id: 'trans789'
+            };
+
+            const result = buildWidgetURL(mockKey, data);
+
+            expect(result).toContain('https://survey-link.solucx.com.br/link/test-widget-key/?mode=widget');
+            expect(result).toContain('customer_id=customer123');
+            expect(result).toContain('form_id=form456');
+            expect(result).toContain('transaction_id=trans789');
+        });
+
+        it('should build URL with empty transaction_id when not provided', () => {
+            const data = {
+                customer_id: 'customer123',
+                form_id: 'form456'
+            };
+
+            const result = buildWidgetURL(mockKey, data);
+
+            expect(result).toContain('https://survey-link.solucx.com.br/link/test-widget-key/?mode=widget');
+            expect(result).toContain('transaction_id=&');
+            expect(result).toContain('customer_id=customer123');
+            expect(result).toContain('form_id=form456');
+        });
+
+        it('should handle empty data object', () => {
+            const data = {};
+
+            const result = buildWidgetURL(mockKey, data);
+
+            expect(result).toBe('https://survey-link.solucx.com.br/link/test-widget-key/?mode=widget&transaction_id=&');
+        });
+
+        it('should encode URL parameters correctly', () => {
+            const data = {
+                email: 'test@example.com',
+                name: 'John Doe'
+            };
+
+            const result = buildWidgetURL(mockKey, data);
+
+            expect(result).toContain('email=test%40example.com');
+            expect(result).toContain('name=John+Doe');
+        });
+    });
+});