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

package/src/components/OverlayWidget.tsx

@@ -1,81 +1,88 @@
-import React, { useState, useEffect } from 'react';
-import { View, ViewStyle } from 'react-native';
-import { initialWindowMetrics } from 'react-native-safe-area-context';
-import { getWidgetStyles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
-import { FIXED_Z_INDEX } from '../constants/webViewConstants';
-import { CloseButton } from './CloseButton';
-import Animated from 'react-native-reanimated';
-
-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, 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/webViewConstants.ts

@@ -1,14 +1,14 @@
-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 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 +1,2 @@
-export { useWidgetState } from './useWidgetState';
+export { useWidgetState } from './useWidgetState';
+export { useWidgetHeight } from './useWidgetHeight';

package/src/hooks/useHeightAnimation.ts

@@ -0,0 +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 };
+}

package/src/hooks/useWidgetHeight.ts

@@ -0,0 +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
+  };
+};

package/src/hooks/useWidgetState.ts

@@ -1,77 +1,101 @@
-import { useState, useCallback } from 'react';
-import { Dimensions } from 'react-native';
-import { WidgetData, WidgetOptions, WidgetType, WidgetSamplerLog } from '../interfaces';
-import { StorageService } from '../services/storage';
-
-function getUserId(widgetData: WidgetData): string {
-    return widgetData.customer_id ?? widgetData.document ?? widgetData.email ?? "default_user";
-}
-
-export const useWidgetState = (data: WidgetData, options?: WidgetOptions, type?: WidgetType) => {
-    const [savedData, setSavedData] = useState<WidgetSamplerLog | null>(null);
-    const [widgetHeight, setWidgetHeight] = useState<number>(0);
-    const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(false);
-
-    const userId = getUserId(data);
-    const storageService = new StorageService(userId);
-    const screenHeight = Dimensions.get('screen').height;
-    const height = options?.height ? Number(options.height) : undefined;
-
-    const loadSavedData = useCallback(async () => {
-        try {
-            const jsonValue = await storageService.read();
-            setSavedData(jsonValue);
-        } catch (error) {
-            console.error('Error loading storage data:', error);
-        }
-    }, [storageService]);
-
-    const saveData = useCallback(async (data: WidgetSamplerLog) => {
-        try {
-            await storageService.write(data);
-            setSavedData(data);
-        } catch (error) {
-            console.error('Error saving storage data:', error);
-        }
-    }, [storageService]);
-
-    const open = useCallback(async () => {
-        const userLogs = await storageService.read();
-        userLogs.attempts++;
-        userLogs.lastAttempt = Date.now();
-        try {
-            await storageService.write(userLogs);
-            setSavedData(userLogs);
-        } catch (error) {
-            console.error('Error saving storage data:', error);
-        }
-        setIsWidgetVisible(true);
-    }, []);
-
-    const close = useCallback(() => {
-        setIsWidgetVisible(false);
-    }, []);
-
-    const resize = useCallback((value: string) => {
-        const receivedHeight = Number(value);
-        if (height && receivedHeight > height) {
-            setWidgetHeight(height);
-            return;
-        }
-        setWidgetHeight(receivedHeight);
-    }, [screenHeight]);
-
-    return {
-        savedData,
-        widgetHeight,
-        isWidgetVisible,
-        setIsWidgetVisible,
-        loadSavedData,
-        saveData,
-        open,
-        close,
-        resize,
-        userId,
-        screenHeight
-    };
-};
+import { useState, useCallback, useMemo } from 'react';
+import { Dimensions } from 'react-native';
+import {
+  WidgetData,
+  WidgetOptions,
+  WidgetType,
+  WidgetSamplerLog
+} from '../interfaces';
+import { StorageService } from '../services/storage';
+
+function getUserId(widgetData: WidgetData): string {
+  return (
+    widgetData.customer_id ??
+    widgetData.document ??
+    widgetData.email ??
+    'default_user'
+  );
+}
+
+export const useWidgetState = (
+  data: WidgetData,
+  options?: WidgetOptions,
+  type?: WidgetType
+) => {
+  const [savedData, setSavedData] = useState<WidgetSamplerLog | null>(null);
+  const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(false);
+
+  const userId = getUserId(data);
+
+  const storageService = useMemo(() => new StorageService(userId), [userId]);
+
+  const screenHeight = Dimensions.get('screen').height;
+  const height = options?.height ? Number(options.height) : undefined;
+
+  const [widgetHeight, setWidgetHeight] = useState<number>(height ?? 300);
+
+  const loadSavedData = useCallback(async () => {
+    try {
+      const jsonValue = await storageService.read();
+      setSavedData(jsonValue);
+    } catch (error) {
+      console.error('Error loading storage data:', error);
+    }
+  }, [storageService]);
+
+  const saveData = useCallback(
+    async (data: WidgetSamplerLog) => {
+      try {
+        await storageService.write(data);
+        setSavedData(data);
+      } catch (error) {
+        console.error('Error saving storage data:', error);
+      }
+    },
+    [storageService]
+  );
+
+  const open = useCallback(async () => {
+    const userLogs = await storageService.read();
+    userLogs.attempts = (userLogs.attempts || 0) + 1;
+    userLogs.lastAttempt = Date.now();
+    try {
+      await storageService.write(userLogs);
+      setSavedData(userLogs);
+    } catch (error) {
+      console.error('Error saving storage data:', error);
+    }
+    setIsWidgetVisible(true);
+  }, [storageService]);
+
+  const close = useCallback(() => {
+    setIsWidgetVisible(false);
+  }, []);
+
+  const resize = useCallback(
+    (value: string) => {
+      const receivedHeight = Number(value);
+
+      if (height !== undefined) {
+        setWidgetHeight(height);
+      } else if (receivedHeight > 0) {
+        setWidgetHeight(receivedHeight);
+      }
+    },
+    [height]
+  );
+
+  return {
+    savedData,
+    widgetHeight,
+    isWidgetVisible,
+    setIsWidgetVisible,
+    loadSavedData,
+    saveData,
+    open,
+    close,
+    resize,
+    userId,
+    screenHeight
+  };
+};

package/src/index.ts

@@ -1,8 +1,8 @@
-export { SoluCXWidget } from './SoluCXWidget';
-export { useWidgetState } from './hooks/useWidgetState';
-export { WidgetEventService } from './services/widgetEventService';
-export { StorageService } from './services/storage';
-export { buildWidgetURL } from './utils/urlUtils';
-export { ModalWidget } from './components/ModalWidget';
-export { getWidgetStyles, styles } from './styles/widgetStyles';
-export * from './interfaces';
+export { SoluCXWidget } from './SoluCXWidget';
+export { useWidgetState } from './hooks/useWidgetState';
+export { WidgetEventService } from './services/widgetEventService';
+export { StorageService } from './services/storage';
+export { buildWidgetURL } from './utils/urlUtils';
+export { ModalWidget } from './components/ModalWidget';
+export { getWidgetStyles, styles } from './styles/widgetStyles';
+export * from './interfaces';

package/src/interfaces/WidgetData.ts

@@ -1,20 +1,20 @@
-export interface WidgetData {
-    transaction_id?: string;
-    attempt_id?: string;
-    form_id?: string;
-    customer_id?: string;
-    name?: string;
-    email?: string;
-    phone?: string;
-    phone2?: string;
-    document?: string;
-    birth_date?: string;
-    store_id?: string;
-    store_name?: string;
-    employee_id?: string;
-    employee_name?: string;
-    amount?: number;
-    score?: number;
-    journey?: string;
-    [key: string]: string | number | undefined;
+export interface WidgetData {
+    transaction_id?: string;
+    attempt_id?: string;
+    form_id?: string;
+    customer_id?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    phone2?: string;
+    document?: string;
+    birth_date?: string;
+    store_id?: string;
+    store_name?: string;
+    employee_id?: string;
+    employee_name?: string;
+    amount?: number;
+    score?: number;
+    journey?: string;
+    [key: string]: string | number | undefined;
 }

package/src/interfaces/WidgetOptions.ts

@@ -1,8 +1,8 @@
-export interface WidgetOptions {
-    height?: number;
-    retry?: {
-        attempts?: number;
-        interval?: number;
-    };
-    waitDelayAfterRating?: number;
+export interface WidgetOptions {
+    height?: number;
+    retry?: {
+        attempts?: number;
+        interval?: number;
+    };
+    waitDelayAfterRating?: number;
 }

package/src/interfaces/WidgetResponse.ts

@@ -1,15 +1,15 @@
-export interface WidgetResponse {
-    status?: "success" | "error";
-    message?: string;
-}
-
-export class WidgetError extends Error implements WidgetResponse {
-    status: "error";
-    message: string;
-
-    constructor(message: string) {
-        super(message);
-        this.status = "error";
-        this.message = message;
-    }
-}
+export interface WidgetResponse {
+    status?: "success" | "error";
+    message?: string;
+}
+
+export class WidgetError extends Error implements WidgetResponse {
+    status: "error";
+    message: string;
+
+    constructor(message: string) {
+        super(message);
+        this.status = "error";
+        this.message = message;
+    }
+}

package/src/interfaces/WidgetSamplerLog.ts

@@ -1,6 +1,6 @@
-export interface WidgetSamplerLog {
-    attempts: number;
-    lastAttempt: number;
-    lastRating: number;
-    lastParcial: number;
+export interface WidgetSamplerLog {
+    attempts: number;
+    lastAttempt: number;
+    lastRating: number;
+    lastParcial: number;
 }

package/src/interfaces/index.ts

@@ -1,24 +1,24 @@
-export type SoluCXKey = string;
-export type WidgetType = "bottom" | "top" | "inline" | "modal";
-export type EventKey =
-    | "FORM_OPENED"
-    | "FORM_CLOSE"
-    | "FORM_ERROR"
-    | "FORM_PAGECHANGED"
-    | "QUESTION_ANSWERED"
-    | "FORM_COMPLETED"
-    | "FORM_PARTIALCOMPLETED"
-    | "FORM_RESIZE";
-export type SurveyEventKey =
-    | "closeSoluCXWidget"
-    | "dismissSoluCXWidget"
-    | "completeSoluCXWidget"
-    | "partialSoluCXWidget"
-    | "resizeSoluCXWidget"
-    | "openSoluCXWidget"
-    | `errorSoluCXWidget`;
-export type { WidgetResponse } from './WidgetResponse';
-export type { WidgetData } from './WidgetData';
-export type { WidgetOptions } from './WidgetOptions';
-export type { WidgetSamplerLog } from './WidgetSamplerLog';
+export type SoluCXKey = string;
+export type WidgetType = "bottom" | "top" | "inline" | "modal";
+export type EventKey =
+    | "FORM_OPENED"
+    | "FORM_CLOSE"
+    | "FORM_ERROR"
+    | "FORM_PAGECHANGED"
+    | "QUESTION_ANSWERED"
+    | "FORM_COMPLETED"
+    | "FORM_PARTIALCOMPLETED"
+    | "FORM_RESIZE";
+export type SurveyEventKey =
+    | "closeSoluCXWidget"
+    | "dismissSoluCXWidget"
+    | "completeSoluCXWidget"
+    | "partialSoluCXWidget"
+    | "resizeSoluCXWidget"
+    | "openSoluCXWidget"
+    | `errorSoluCXWidget`;
+export type { WidgetResponse } from './WidgetResponse';
+export type { WidgetData } from './WidgetData';
+export type { WidgetOptions } from './WidgetOptions';
+export type { WidgetSamplerLog } from './WidgetSamplerLog';
 export type { WidgetError } from './WidgetResponse';

package/src/services/storage.ts

@@ -1,21 +1,21 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { WidgetSamplerLog } from '../interfaces';
-import { STORAGE_KEY } from '../constants/webViewConstants';
-
-export class StorageService {
-    private key: string;
-
-    constructor(key: string) {
-        this.key = `${STORAGE_KEY}_${key}`;
-    }
-
-    async write(data: WidgetSamplerLog): Promise<void> {
-        const json = JSON.stringify(data);
-        await AsyncStorage.setItem(this.key, json);
-    }
-
-    async read(): Promise<WidgetSamplerLog> {
-        const json = await AsyncStorage.getItem(this.key);
-        return json ? JSON.parse(json) as WidgetSamplerLog : {} as WidgetSamplerLog;
-    }
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { WidgetSamplerLog } from '../interfaces';
+import { STORAGE_KEY } from '../constants/webViewConstants';
+
+export class StorageService {
+    private key: string;
+
+    constructor(key: string) {
+        this.key = `${STORAGE_KEY}_${key}`;
+    }
+
+    async write(data: WidgetSamplerLog): Promise<void> {
+        const json = JSON.stringify(data);
+        await AsyncStorage.setItem(this.key, json);
+    }
+
+    async read(): Promise<WidgetSamplerLog> {
+        const json = await AsyncStorage.getItem(this.key);
+        return json ? JSON.parse(json) as WidgetSamplerLog : {} as WidgetSamplerLog;
+    }
 }