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

package/src/components/InlineWidget.tsx

@@ -1,36 +1,36 @@
-import React, { useEffect } from 'react';
-import { View } from 'react-native';
-import { styles, getWidgetVisibility } from '../styles/widgetStyles';
-import { CloseButton } from './CloseButton';
-import { Animated } from 'react-native';
-import { useHeightAnimation } from '../hooks/useHeightAnimation';
-
-interface InlineWidgetProps {
-    visible: boolean;
-    height: number;
-    children?: React.ReactNode;
-    onClose?: () => void;
-}
-
-export const InlineWidget: React.FC<InlineWidgetProps> = ({
-    visible,
-    height,
-    children,
-    onClose,
-}) => {
-    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
-
-    useEffect(() => {
-        updateHeight(height);
-    }, [height, updateHeight]);
-
-    return (
-        <View style={[styles.inlineWrapper, getWidgetVisibility(visible)]}>
-            <Animated.View
-                style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
-                {children}
-                <CloseButton visible={visible} onPress={onClose || (() => { })} />
-            </Animated.View>
-        </View>
-    );
-};
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { styles, getWidgetVisibility } from '../styles/widgetStyles';
+import { CloseButton } from './CloseButton';
+import { Animated } from 'react-native';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
+
+interface InlineWidgetProps {
+    visible: boolean;
+    height: number;
+    children?: React.ReactNode;
+    onClose?: () => void;
+}
+
+export const InlineWidget: React.FC<InlineWidgetProps> = ({
+    visible,
+    height,
+    children,
+    onClose,
+}) => {
+    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
+
+    useEffect(() => {
+        updateHeight(height);
+    }, [height, updateHeight]);
+
+    return (
+        <View style={[styles.inlineWrapper, getWidgetVisibility(visible)]}>
+            <Animated.View
+                style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
+                {children}
+                <CloseButton visible={visible} onPress={onClose || (() => { })} />
+            </Animated.View>
+        </View>
+    );
+};

package/src/components/ModalWidget.tsx

@@ -1,59 +1,57 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, SafeAreaView, View, Animated } from 'react-native';
-import { styles, getWidgetVisibility } from '../styles/widgetStyles';
-import { CloseButton } from './CloseButton';
-import { useHeightAnimation } from '../hooks/useHeightAnimation';
-
-interface ModalWidgetProps {
-    visible: boolean;
-    height: number;
-    children?: React.ReactNode;
-    onClose?: () => void;
-}
-
-export const ModalWidget: React.FC<ModalWidgetProps> = ({
-    visible,
-    height,
-    children,
-    onClose,
-}) => {
-    const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
-
-    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
-
-    useEffect(() => {
-        updateHeight(height);
-    }, [height, updateHeight]);
-
-    return (
-        <SafeAreaView>
-            <Modal
-                transparent
-                visible={isWidgetVisible}
-                animationType="slide"
-                hardwareAccelerated
-            >
-                <View style={[styles.modalOverlay, getWidgetVisibility(visible)]}>
-                    <Animated.View
-                        style={[
-                            styles.modalContent,
-                            getWidgetVisibility(visible),
-                            animatedHeightStyle,
-                        ]}
-                    >
-                        {children}
-                        <CloseButton
-                            visible={visible}
-                            onPress={() => {
-                                setIsWidgetVisible(false);
-                                if (onClose) {
-                                    onClose();
-                                }
-                            }}
-                        />
-                    </Animated.View>
-                </View>
-            </Modal>
-        </SafeAreaView>
-    );
-};
+import React, { useState, useEffect } from 'react';
+import { Modal, View, Animated } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { styles, getWidgetVisibility } from '../styles/widgetStyles';
+import { CloseButton } from './CloseButton';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
+
+interface ModalWidgetProps {
+    visible: boolean;
+    height: number;
+    children?: React.ReactNode;
+    onClose?: () => void;
+}
+
+export const ModalWidget: React.FC<ModalWidgetProps> = ({
+    visible,
+    height,
+    children,
+    onClose,
+}) => {
+    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
+
+    useEffect(() => {
+        updateHeight(height);
+    }, [height, updateHeight]);
+
+    return (
+        <SafeAreaView>
+            <Modal
+                transparent
+                visible={visible}
+                animationType="slide"
+                hardwareAccelerated
+            >
+                <View style={[styles.modalOverlay, getWidgetVisibility(visible)]}>
+                    <Animated.View
+                        style={[
+                            styles.modalContent,
+                            getWidgetVisibility(visible),
+                            animatedHeightStyle,
+                        ]}
+                    >
+                        {children}
+                        <CloseButton
+                            visible={visible}
+                            onPress={() => {
+                                if (onClose) {
+                                    onClose();
+                                }
+                            }}
+                        />
+                    </Animated.View>
+                </View>
+            </Modal>
+        </SafeAreaView>
+    );
+};

package/src/components/OverlayWidget.tsx

@@ -1,88 +1,88 @@
-import React, { useState, useEffect } from 'react';
-import { View, ViewStyle, Animated } from 'react-native';
-import { initialWindowMetrics } from 'react-native-safe-area-context';
-import { getWidgetStyles, getWidgetVisibility } from '../styles/widgetStyles';
-import { FIXED_Z_INDEX } from '../constants/webViewConstants';
-import { CloseButton } from './CloseButton';
-import { useHeightAnimation } from '../hooks/useHeightAnimation';
-
-interface OverlayWidgetProps {
-    visible: boolean;
-    width: number;
-    height: number;
-    position: 'top' | 'bottom';
-    children?: React.ReactNode;
-    onClose?: () => void;
-}
-
-export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
-    visible,
-    width,
-    height,
-    position,
-    children,
-    onClose,
-}) => {
-    const insets =
-        initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
-    const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
-
-    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
-
-    useEffect(() => {
-        updateHeight(height);
-    }, [height, updateHeight]);
-
-    const containerStyle: ViewStyle = {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: FIXED_Z_INDEX,
-        pointerEvents: 'box-none',
-    };
-
-    const contentStyle = [
-        getWidgetStyles(position).content,
-        {
-            width,
-            pointerEvents: 'auto' as const,
-            ...(position === 'top' && {
-                top: insets.top,
-            }),
-            ...(position === 'bottom' && {
-                bottom: insets.bottom,
-            }),
-        },
-    ];
-
-    return (
-        <>
-            {isWidgetVisible && (
-                <View style={[containerStyle, getWidgetVisibility(visible)]}>
-                    <Animated.View
-                        style={[
-                            contentStyle,
-                            animatedHeightStyle,
-                            getWidgetVisibility(visible),
-                        ]}
-                    >
-                        {children}
-                        <CloseButton
-                            visible={visible}
-                            onPress={() => {
-                                setIsWidgetVisible(false);
-                                if (onClose) {
-                                    onClose();
-                                }
-                            }}
-                        />
-                    </Animated.View>
-                </View>
-            )}
-        </>
-    );
-};
+import React, { useState, useEffect } from 'react';
+import { View, type ViewStyle, Animated } from 'react-native';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
+import { getWidgetStyles, getWidgetVisibility } from '../styles/widgetStyles';
+import { FIXED_Z_INDEX } from '../constants/webViewConstants';
+import { CloseButton } from './CloseButton';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
+
+interface OverlayWidgetProps {
+    visible: boolean;
+    width: number;
+    height: number;
+    position: 'top' | 'bottom';
+    children?: React.ReactNode;
+    onClose?: () => void;
+}
+
+export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
+    visible,
+    width,
+    height,
+    position,
+    children,
+    onClose,
+}) => {
+    const insets =
+        initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+    const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
+
+    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
+
+    useEffect(() => {
+        updateHeight(height);
+    }, [height, updateHeight]);
+
+    const containerStyle: ViewStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: FIXED_Z_INDEX,
+        pointerEvents: 'box-none',
+    };
+
+    const contentStyle = [
+        getWidgetStyles(position).content,
+        {
+            width,
+            pointerEvents: 'auto' as const,
+            ...(position === 'top' && {
+                top: insets.top,
+            }),
+            ...(position === 'bottom' && {
+                bottom: insets.bottom,
+            }),
+        },
+    ];
+
+    return (
+        <>
+            {isWidgetVisible && (
+                <View style={[containerStyle, getWidgetVisibility(visible)]}>
+                    <Animated.View
+                        style={[
+                            contentStyle,
+                            animatedHeightStyle,
+                            getWidgetVisibility(visible),
+                        ]}
+                    >
+                        {children}
+                        <CloseButton
+                            visible={visible}
+                            onPress={() => {
+                                setIsWidgetVisible(false);
+                                if (onClose) {
+                                    onClose();
+                                }
+                            }}
+                        />
+                    </Animated.View>
+                </View>
+            )}
+        </>
+    );
+};

package/src/constants/Constants.ts

@@ -0,0 +1,4 @@
+import packageJson from "../../package.json";
+
+export const SDK_VERSION = packageJson.version;
+export const SDK_NAME = "rn-widget-sdk";

package/src/constants/webViewConstants.ts

@@ -1,14 +1,15 @@
-export const BASE_URL = 'https://survey-link.solucx.com.br/link';
-export const STORAGE_KEY = '@solucxWidgetLog';
-export const DEFAULT_CHANNEL_NUMBER = 1;
-export const DEFAULT_CHANNEL = 'widget';
-export const DEFAULT_WIDTH = 380;
-export const MIN_HEIGHT = 200;
-export const FIXED_Z_INDEX = 9999;
-export const MODAL_Z_INDEX = 10000;
-export const DESIGN_HEIGHT = 700;
-export const WEB_VIEW_MESSAGE_LISTENER = `
-  window.addEventListener('message', function(event) {
-    window.ReactNativeWebView.postMessage(event.data);
-  });
-`;
+export const BASE_URL = 'https://survey-link.solucx.com.br/link';
+export const RATING_FORM_ENDPOINT = 'https://widget-api.solucx.com.br/widget/preflight';
+export const STORAGE_KEY = '@solucxWidgetLog';
+export const DEFAULT_CHANNEL_NUMBER = 1;
+export const DEFAULT_CHANNEL = 'widget';
+export const DEFAULT_WIDTH = 380;
+export const MIN_HEIGHT = 200;
+export const FIXED_Z_INDEX = 9999;
+export const MODAL_Z_INDEX = 10000;
+export const DESIGN_HEIGHT = 700;
+export const WEB_VIEW_MESSAGE_LISTENER = `
+  window.addEventListener('message', function(event) {
+    window.ReactNativeWebView.postMessage(event.data);
+  });
+`;

package/src/hooks/index.ts

@@ -1,2 +1,2 @@
-export { useWidgetState } from './useWidgetState';
-export { useWidgetHeight } from './useWidgetHeight';
+export { useWidgetState } from './useWidgetState';
+export { useWidgetHeight } from './useWidgetHeight';

package/src/hooks/useDeviceInfoCollector.ts

@@ -0,0 +1,67 @@
+import { Platform, Dimensions } from "react-native";
+
+export interface DeviceInfo {
+    platform: "ios" | "android" | "web" | "windows" | "macos";
+    osVersion: string;
+    screenWidth: number;
+    screenHeight: number;
+    windowWidth: number;
+    windowHeight: number;
+    scale: number;
+    fontScale: number;
+    deviceType?: "tablet" | "phone";
+    model: string;
+}
+
+const isTablet = (): boolean => {
+    const { width, height } = Dimensions.get("screen");
+    const aspectRatio = height / width;
+
+    return Math.min(width, height) >= 600 && aspectRatio < 1.6;
+};
+
+const getDeviceModel = (): string => {
+    try {
+        const DeviceInfo = require('react-native-device-info');
+        if (DeviceInfo?.default?.getModel) {
+            return DeviceInfo.default.getModel();
+        }
+        if (DeviceInfo?.getModel) {
+            return DeviceInfo.getModel();
+        }
+    } catch (error) {
+        // react-native-device-info não disponível
+    }
+
+    try {
+        const constants = Platform.constants as any;
+        if (constants?.Model) {
+            return constants.Model;
+        }
+        if (constants?.model) {
+            return constants.model;
+        }
+    } catch (error) {
+        // Nada disponível
+    }
+
+    return 'unknown';
+};
+
+export const getDeviceInfo = (): DeviceInfo => {
+    const screen = Dimensions.get("screen");
+    const window = Dimensions.get("window");
+
+    return {
+        platform: Platform.OS,
+        osVersion: Platform.Version.toString(),
+        screenWidth: screen.width,
+        screenHeight: screen.height,
+        windowWidth: window.width,
+        windowHeight: window.height,
+        scale: screen.scale,
+        fontScale: screen.fontScale,
+        deviceType: isTablet() ? "tablet" : "phone",
+        model: getDeviceModel(),
+    };
+};

package/src/hooks/useHeightAnimation.ts

@@ -1,22 +1,22 @@
-// hooks/useHeightAnimation.ts
-import { useRef, useCallback } from 'react';
-import { Animated } from 'react-native';
-
-export function useHeightAnimation(initialHeight = 0, duration = 300) {
-    const height = useRef(new Animated.Value(initialHeight)).current;
-
-    const updateHeight = useCallback(
-        (toValue: number) => {
-            Animated.timing(height, {
-                toValue,
-                duration,
-                useNativeDriver: false,
-            }).start();
-        },
-        [height, duration],
-    );
-
-    const animatedHeightStyle = { height };
-
-    return { animatedHeightStyle, updateHeight, height };
-}
+// hooks/useHeightAnimation.ts
+import { useRef, useCallback } from 'react';
+import { Animated } from 'react-native';
+
+export function useHeightAnimation(initialHeight = 0, duration = 300) {
+    const height = useRef(new Animated.Value(initialHeight)).current;
+
+    const updateHeight = useCallback(
+        (toValue: number) => {
+            Animated.timing(height, {
+                toValue,
+                duration,
+                useNativeDriver: false,
+            }).start();
+        },
+        [height, duration],
+    );
+
+    const animatedHeightStyle = { height };
+
+    return { animatedHeightStyle, updateHeight, height };
+}

package/src/hooks/useWidgetHeight.ts

@@ -1,38 +1,38 @@
-import { useState, useCallback } from 'react';
-import type { WidgetOptions } from '../interfaces';
-
-interface UseWidgetHeightProps {
-  options?: WidgetOptions;
-  initialHeight?: number;
-}
-
-interface UseWidgetHeightReturn {
-  height: number;
-  isFixedHeight: boolean;
-  handleResize: (newHeight: number) => void;
-}
-
-export const useWidgetHeight = ({
-  options,
-  initialHeight = 300
-}: UseWidgetHeightProps): UseWidgetHeightReturn => {
-  const [dynamicHeight, setDynamicHeight] = useState<number>(initialHeight);
-  const hasFixedHeight = typeof options?.height === 'number';
-
-  const height = hasFixedHeight ? options!.height! : dynamicHeight;
-
-  const handleResize = useCallback(
-    (newHeight: number) => {
-      if (!hasFixedHeight && newHeight > 0) {
-        setDynamicHeight(newHeight);
-      }
-    },
-    [hasFixedHeight]
-  );
-
-  return {
-    height,
-    isFixedHeight: hasFixedHeight,
-    handleResize
-  };
-};
+import { useState, useCallback } from 'react';
+import type { WidgetOptions } from '../interfaces';
+
+interface UseWidgetHeightProps {
+  options?: WidgetOptions;
+  initialHeight?: number;
+}
+
+interface UseWidgetHeightReturn {
+  height: number;
+  isFixedHeight: boolean;
+  handleResize: (newHeight: number) => void;
+}
+
+export const useWidgetHeight = ({
+  options,
+  initialHeight = 300
+}: UseWidgetHeightProps): UseWidgetHeightReturn => {
+  const [dynamicHeight, setDynamicHeight] = useState<number>(initialHeight);
+  const hasFixedHeight = typeof options?.height === 'number';
+
+  const height = hasFixedHeight ? options!.height! : dynamicHeight;
+
+  const handleResize = useCallback(
+    (newHeight: number) => {
+      if (!hasFixedHeight && newHeight > 0) {
+        setDynamicHeight(newHeight);
+      }
+    },
+    [hasFixedHeight]
+  );
+
+  return {
+    height,
+    isFixedHeight: hasFixedHeight,
+    handleResize
+  };
+};