@solucx/react-native-solucx-widget 0.1.3 → 0.1.4

package/README.intern.md

@@ -85,7 +85,6 @@ export default function MyComponent() {
         param_REGIAO: "SUDESTE"
       }}
       options={{ 
-        width: 380, 
         height: 400 
       }}
     />
@@ -145,8 +144,7 @@ interface WidgetData {
 
 ```typescript
 interface WidgetOptions {
-  width?: number;              // Largura do widget (padrão: 380)
-  height?: number;             // Altura do widget (padrão: 400)
+  height?: number;             // Altura
   retry?: {                    // Configuração de retry
     attempts?: number;         // Número de tentativas
     interval?: number;         // Intervalo entre tentativas
@@ -277,7 +275,6 @@ Configurações centralizadas em [`webViewConstants.ts`](src/constants/webViewCo
 ```typescript
 export const BASE_URL = 'https://survey-link.solucx.com.br/link';
 export const STORAGE_KEY = '@solucxWidgetLog';
-export const DEFAULT_WIDTH = 380;
 export const MIN_HEIGHT = 200;
 export const FIXED_Z_INDEX = 9999;
 export const MODAL_Z_INDEX = 10000;

package/README.md

@@ -54,8 +54,7 @@ export default function MyScreen() {
         store_id: "loja_01",
         amount: 150.00
       }}
-      options={{ 
-        width: 380, 
+      options={{
         height: 400 
       }}
     />
@@ -138,8 +137,7 @@ interface WidgetData {
 
 ```typescript
 interface WidgetOptions {
-  width?: number;          // Largura (padrão: 380)
-  height?: number;         // Altura (padrão: 400)
+  height?: number;         // Altura
   retry?: {
     attempts?: number;     // Tentativas (padrão: 3)
     interval?: number;     // Intervalo em ms (padrão: 1000)
@@ -239,10 +237,9 @@ const handleMessage = (message: string) => {
 
 ```typescript
 // Ajustar dimensões para o dispositivo:
-const { width, height } = Dimensions.get('window');
+const { height } = Dimensions.get('window');
 
 const options = {
-  width: width * 0.9,
   height: Math.min(height * 0.6, 400)
 };
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solucx/react-native-solucx-widget",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "The React Native SDK for Solucx Widget",
   "main": "src/index",
   "author": " <> ()",
@@ -18,4 +18,4 @@
     "react": ">=18.0.0",
     "react-native": ">=0.72.0"
   }
-}
+}

package/src/SoluCXWidget.tsx

@@ -36,13 +36,12 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
         open,
         close,
         userId,
-    } = useWidgetState(data, type);
+    } = useWidgetState(data, options, type);
 
     const eventService = new WidgetEventService(setIsWidgetVisible, resize, open, userId, options);
 
     const uri = buildWidgetURL(soluCXKey, data);
     const isForm = Boolean(data.form_id);
-    const height = options.height ? Number(options.height) : undefined;
 
     useEffect(() => {
         loadSavedData();
@@ -91,7 +90,7 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
 
     if (type === 'inline') {
         return (
-            <InlineWidget visible={isWidgetVisible} onClose={handleClose}>
+            <InlineWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
                 <WebView
                     ref={webviewRef}
                     style={webViewStyle}

package/src/components/InlineWidget.tsx

@@ -5,15 +5,16 @@ import { CloseButton } from './CloseButton';
 
 interface InlineWidgetProps {
     visible: boolean;
+    height: number;
     children?: React.ReactNode;
     onClose?: () => void;
 }
 
-export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, children, onClose }) => {
+export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, height, children, onClose }) => {
 
     return (
-        <View style={[styles.wrapper, getWidgetVisibility(visible)]}>
-            <View style={[styles.inline, getWidgetVisibility(visible)]}>
+        <View style={[styles.inlineWrapper, getWidgetVisibility(visible)]}>
+            <View style={[styles.inline, { height }, getWidgetVisibility(visible)]}>
                 {children}
                 <CloseButton
                     visible={visible}

package/src/hooks/useWidgetState.ts

@@ -2,12 +2,13 @@ import { useState, useCallback } from 'react';
 import { Dimensions } from 'react-native';
 import { WidgetSamplerLog, WidgetData, WidgetType } from '../interfaces';
 import { StorageService } from '../services/storage';
+import { WidgetOptions } from '@solucx/react-native-solucx-widget';
 
 function getUserId(widgetData: WidgetData): string {
     return widgetData.customer_id ?? widgetData.document ?? widgetData.email ?? "";
 }
 
-export const useWidgetState = (data: WidgetData, type?: WidgetType) => {
+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);
@@ -15,6 +16,7 @@ export const useWidgetState = (data: WidgetData, type?: WidgetType) => {
     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 {
@@ -53,6 +55,10 @@ export const useWidgetState = (data: WidgetData, type?: WidgetType) => {
 
     const resize = useCallback((value: string) => {
         const receivedHeight = Number(value);
+        if (height && receivedHeight > height) {
+            setWidgetHeight(height);
+            return;
+        }
         setWidgetHeight(receivedHeight);
     }, [screenHeight]);
 

package/src/interfaces/WidgetOptions.ts

@@ -1,5 +1,4 @@
 export interface WidgetOptions {
-    width?: number;
     height?: number;
     retry?: {
         attempts?: number;