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

package/README.md

@@ -1,285 +1,285 @@
-# @solucx/react-native-solucx-widget
-
-[![npm version](https://badge.fury.io/js/@solucx%2Freact-native-solucx-widget.svg)](https://badge.fury.io/js/@solucx%2Freact-native-solucx-widget)
-[![React Native](https://img.shields.io/badge/React%20Native-0.70+-blue.svg)](https://reactnative.dev/)
-[![Expo](https://img.shields.io/badge/Expo-50+-lightgrey.svg)](https://expo.dev/)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
-[![iOS](https://img.shields.io/badge/iOS-11+-lightgrey.svg)](https://developer.apple.com/ios/)
-[![Android](https://img.shields.io/badge/Android-API%2021+-green.svg)](https://developer.android.com/)
-[![License](https://img.shields.io/badge/License-Proprietary-red.svg)](LICENSE)
-
-Um widget React Native modular para coleta de feedback e pesquisas de satisfação, desenvolvido pela SoluCX seguindo princípios de Clean Code e arquitetura escalável.
-
-## 🛠️ Tecnologias
-
-![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
-![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
-![WebView](https://img.shields.io/badge/WebView-4285F4?style=for-the-badge&logo=googlechrome&logoColor=white)
-![AsyncStorage](https://img.shields.io/badge/AsyncStorage-FF6B6B?style=for-the-badge&logo=react&logoColor=white)
-![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)
-
-## 📋 Visão Geral
-
-O SoluCX Widget permite integrar pesquisas de satisfação diretamente em aplicações React Native/Expo de forma simples e flexível. Desenvolvido para empresas que precisam coletar feedback em tempo real através de diferentes modalidades de apresentação.
-
-### 🎯 Principais Características
-
-- **4 Modos de Renderização**: Bottom, Top, Modal e Inline
-- **Persistência Automática**: Controle inteligente de frequência
-- **Comunicação WebView**: Integração transparente com plataforma SoluCX
-- **TypeScript**: Totalmente tipado para melhor experiência de desenvolvimento
-- **Performático**: Carregamento otimizado e cache local
-
-## 🚀 Instalação
-
-```bash
-npm install @solucx/react-native-solucx-widget
-```
-
-## 🎛️ Uso Básico
-
-```tsx
-import React from 'react';
-import { SoluCXWidget } from '@solucx/react-native-solucx-widget';
-
-export default function MyScreen() {
-  return (
-    <SoluCXWidget
-      soluCXKey='sua-chave-solucx'
-      type='bottom'
-      data={{
-        journey: 'checkout_flow',
-        name: 'João Silva',
-        email: 'joao@email.com',
-        store_id: 'loja_01',
-        amount: 150.0
-      }}
-      options={{
-        height: 400
-      }}
-    />
-  );
-}
-```
-
-## 📱 Modos de Renderização
-
-### Bottom (Padrão)
-
-Widget fixo na parte inferior da tela, ideal para feedback não intrusivo.
-
-```tsx
-<SoluCXWidget type='bottom' {...props} />
-```
-
-### Top
-
-Widget fixo no topo da tela, perfeito para notificações importantes.
-
-```tsx
-<SoluCXWidget type='top' {...props} />
-```
-
-### Modal
-
-Sobreposição centralizada que bloqueia interação com o fundo.
-
-```tsx
-<SoluCXWidget type='modal' {...props} />
-```
-
-### Inline
-
-Integrado ao fluxo normal do layout, respeitando a posição no código.
-
-```tsx
-<SoluCXWidget type='inline' {...props} />
-```
-
-## 🔧 API Completa
-
-### Props
-
-| Propriedade | Tipo            | Obrigatório | Descrição                    |
-| ----------- | --------------- | ----------- | ---------------------------- |
-| `soluCXKey` | `string`        | ✅          | Chave de autenticação SoluCX |
-| `type`      | `WidgetType`    | ✅          | Modo de renderização         |
-| `data`      | `WidgetData`    | ✅          | Dados do cliente/transação   |
-| `options`   | `WidgetOptions` | ✅          | Configurações do widget      |
-
-### WidgetData
-
-```typescript
-interface WidgetData {
-  // Identificadores
-  transaction_id?: string;
-  customer_id?: string;
-
-  // Dados do cliente
-  name?: string;
-  email?: string;
-  phone?: string;
-  birth_date?: string; // Formato: YYYY-MM-DD
-  document?: string;
-
-  // Contexto da transação
-  store_id?: string;
-  store_name?: string;
-  employee_id?: string;
-  employee_name?: string;
-  amount?: number;
-  score?: number;
-  journey?: string; // Nome da jornada/fluxo
-
-  // Parâmetros customizados (prefixo param_)
-  param_REGIAO?: string;
-  [key: string]: string | number | undefined;
-}
-```
-
-### WidgetOptions
-
-```typescript
-interface WidgetOptions {
-  height?: number; // Altura fixa em pontos (points, não pixels)
-  // Se não fornecido, será dinâmica baseada em eventos de resize
-  // Se fornecido, será fixa independente do tipo de widget
-  retry?: {
-    attempts?: number; // Tentativas (padrão: 3)
-    interval?: number; // Intervalo em ms (padrão: 1000)
-  };
-  waitDelayAfterRating?: number; // Delay após avaliação
-}
-```
-
-**Comportamento da Altura (height):**
-
-- **Altura Dinâmica (padrão)**: Quando `height` não é fornecido, o widget se ajusta automaticamente baseado em eventos de resize do conteúdo. Isso funciona para todos os tipos: `bottom`, `top`, `inline` e `modal`.
-
-  ```tsx
-  // Altura dinâmica - se adapta ao conteúdo
-  <SoluCXWidget
-    type='bottom'
-    options={{}} // ou options={{ retry: { attempts: 3 } }}
-    {...props}
-  />
-  ```
-
-- **Altura Fixa**: Quando `height` é especificado, o valor é fixo e eventos de resize são ignorados. Funciona para todos os tipos de widget.
-
-  ```tsx
-  // Altura fixa de 400 pontos
-  <SoluCXWidget type='modal' options={{ height: 400 }} {...props} />
-  ```
-
-**⚠️ Importante**: O valor de `height` é sempre em **pontos** (points), não pixels, seguindo o padrão do React e React Native. O sistema operacional converte automaticamente para pixels considerando a densidade da tela.
-
-### WidgetType
-
-```typescript
-type WidgetType = 'bottom' | 'top' | 'inline' | 'modal';
-```
-
-## 🔄 Sistema de Eventos
-
-O widget processa automaticamente os seguintes eventos da pesquisa:
-
-- `FORM_OPENED` - Widget foi aberto
-- `FORM_CLOSE` - Usuário fechou o widget
-- `FORM_COMPLETED` - Pesquisa concluída
-- `FORM_PARTIALCOMPLETED` - Completada parcialmente
-- `FORM_RESIZE` - Widget redimensionado
-- `FORM_ERROR` - Erro no carregamento
-
-## 💾 Persistência Inteligente
-
-O widget controla automaticamente:
-
-- **Histórico de tentativas**: Evita spam de widgets
-- **Última avaliação**: Data da última interação
-- **Controle de frequência**: Respeita configurações de exibição
-- **Armazenamento local**: Dados persistem entre sessões
-
-## ⚙️ Múltiplos Widgets
-
-```tsx
-const widgets = ['bottom', 'top'] as WidgetType[];
-
-return (
-  <>
-    {widgets.map((type) => (
-      <SoluCXWidget
-        key={type}
-        soluCXKey={key}
-        type={type}
-        data={data}
-        options={options}
-      />
-    ))}
-  </>
-);
-```
-
-## 🚨 Considerações Importantes
-
-### Posicionamento
-
-⚠️ **Comportamento Crítico**: A posição no JSX **não determina** onde widgets `top`, `bottom` e `modal` aparecem:
-
-```tsx
-// ❌ Widget "bottom" sempre aparece embaixo, independente da posição
-<Text>Conteúdo antes</Text>
-<SoluCXWidget type="bottom" {...props} />
-<Text>Conteúdo depois</Text>
-
-// ✅ Apenas "inline" respeita a posição no código
-<Text>Conteúdo antes</Text>
-<SoluCXWidget type="inline" {...props} />
-<Text>Conteúdo depois</Text>
-```
-
-## 🔍 Troubleshooting
-
-### Widget não aparece
-
-```typescript
-// Verificações essenciais:
-// ✅ Chave SoluCX válida?
-// ✅ Conectividade com internet?
-// ✅ Logs do WebView no console?
-// ✅ Dados obrigatórios preenchidos?
-```
-
-### Eventos não funcionam
-
-```typescript
-// Debug de comunicação:
-const handleMessage = (message: string) => {
-  console.log('Widget event:', message);
-};
-
-// Verificar se JavaScript foi injetado corretamente
-```
-
-### Layout quebrado
-
-```typescript
-// Ajustar dimensões para o dispositivo:
-const { height } = Dimensions.get('window');
-
-const options = {
-  height: Math.min(height * 0.6, 400)
-};
-```
-
-## 📚 Compatibilidade
-
-| Versão | React Native | Expo | iOS | Android |
-| ------ | ------------ | ---- | --- | ------- |
-| 1.0.x  | 0.70+        | 50+  | 11+ | API 21+ |
-
-## 📄 Licença
-
-Este pacote é proprietário da SoluCX. O uso é restrito a clientes licenciados da plataforma SoluCX.
-
----
+# @solucx/react-native-solucx-widget
+
+[![npm version](https://badge.fury.io/js/@solucx%2Freact-native-solucx-widget.svg)](https://badge.fury.io/js/@solucx%2Freact-native-solucx-widget)
+[![React Native](https://img.shields.io/badge/React%20Native-0.70+-blue.svg)](https://reactnative.dev/)
+[![Expo](https://img.shields.io/badge/Expo-50+-lightgrey.svg)](https://expo.dev/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
+[![iOS](https://img.shields.io/badge/iOS-11+-lightgrey.svg)](https://developer.apple.com/ios/)
+[![Android](https://img.shields.io/badge/Android-API%2021+-green.svg)](https://developer.android.com/)
+[![License](https://img.shields.io/badge/License-Proprietary-red.svg)](LICENSE)
+
+Um widget React Native modular para coleta de feedback e pesquisas de satisfação, desenvolvido pela SoluCX seguindo princípios de Clean Code e arquitetura escalável.
+
+## 🛠️ Tecnologias
+
+![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
+![WebView](https://img.shields.io/badge/WebView-4285F4?style=for-the-badge&logo=googlechrome&logoColor=white)
+![AsyncStorage](https://img.shields.io/badge/AsyncStorage-FF6B6B?style=for-the-badge&logo=react&logoColor=white)
+![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)
+
+## 📋 Visão Geral
+
+O SoluCX Widget permite integrar pesquisas de satisfação diretamente em aplicações React Native/Expo de forma simples e flexível. Desenvolvido para empresas que precisam coletar feedback em tempo real através de diferentes modalidades de apresentação.
+
+### 🎯 Principais Características
+
+- **4 Modos de Renderização**: Bottom, Top, Modal e Inline
+- **Persistência Automática**: Controle inteligente de frequência
+- **Comunicação WebView**: Integração transparente com plataforma SoluCX
+- **TypeScript**: Totalmente tipado para melhor experiência de desenvolvimento
+- **Performático**: Carregamento otimizado e cache local
+
+## 🚀 Instalação
+
+```bash
+npm install @solucx/react-native-solucx-widget
+```
+
+## 🎛️ Uso Básico
+
+```tsx
+import React from 'react';
+import { SoluCXWidget } from '@solucx/react-native-solucx-widget';
+
+export default function MyScreen() {
+  return (
+    <SoluCXWidget
+      soluCXKey='sua-chave-solucx'
+      type='bottom'
+      data={{
+        journey: 'checkout_flow',
+        name: 'João Silva',
+        email: 'joao@email.com',
+        store_id: 'loja_01',
+        amount: 150.0
+      }}
+      options={{
+        height: 400
+      }}
+    />
+  );
+}
+```
+
+## 📱 Modos de Renderização
+
+### Bottom (Padrão)
+
+Widget fixo na parte inferior da tela, ideal para feedback não intrusivo.
+
+```tsx
+<SoluCXWidget type='bottom' {...props} />
+```
+
+### Top
+
+Widget fixo no topo da tela, perfeito para notificações importantes.
+
+```tsx
+<SoluCXWidget type='top' {...props} />
+```
+
+### Modal
+
+Sobreposição centralizada que bloqueia interação com o fundo.
+
+```tsx
+<SoluCXWidget type='modal' {...props} />
+```
+
+### Inline
+
+Integrado ao fluxo normal do layout, respeitando a posição no código.
+
+```tsx
+<SoluCXWidget type='inline' {...props} />
+```
+
+## 🔧 API Completa
+
+### Props
+
+| Propriedade | Tipo            | Obrigatório | Descrição                    |
+| ----------- | --------------- | ----------- | ---------------------------- |
+| `soluCXKey` | `string`        | ✅          | Chave de autenticação SoluCX |
+| `type`      | `WidgetType`    | ✅          | Modo de renderização         |
+| `data`      | `WidgetData`    | ✅          | Dados do cliente/transação   |
+| `options`   | `WidgetOptions` | ✅          | Configurações do widget      |
+
+### WidgetData
+
+```typescript
+interface WidgetData {
+  // Identificadores
+  transaction_id?: string;
+  customer_id?: string;
+
+  // Dados do cliente
+  name?: string;
+  email?: string;
+  phone?: string;
+  birth_date?: string; // Formato: YYYY-MM-DD
+  document?: string;
+
+  // Contexto da transação
+  store_id?: string;
+  store_name?: string;
+  employee_id?: string;
+  employee_name?: string;
+  amount?: number;
+  score?: number;
+  journey?: string; // Nome da jornada/fluxo
+
+  // Parâmetros customizados (prefixo param_)
+  param_REGIAO?: string;
+  [key: string]: string | number | undefined;
+}
+```
+
+### WidgetOptions
+
+```typescript
+interface WidgetOptions {
+  height?: number; // Altura fixa em pontos (points, não pixels)
+  // Se não fornecido, será dinâmica baseada em eventos de resize
+  // Se fornecido, será fixa independente do tipo de widget
+  retry?: {
+    attempts?: number; // Tentativas (padrão: 3)
+    interval?: number; // Intervalo em ms (padrão: 1000)
+  };
+  waitDelayAfterRating?: number; // Delay após avaliação
+}
+```
+
+**Comportamento da Altura (height):**
+
+- **Altura Dinâmica (padrão)**: Quando `height` não é fornecido, o widget se ajusta automaticamente baseado em eventos de resize do conteúdo. Isso funciona para todos os tipos: `bottom`, `top`, `inline` e `modal`.
+
+  ```tsx
+  // Altura dinâmica - se adapta ao conteúdo
+  <SoluCXWidget
+    type='bottom'
+    options={{}} // ou options={{ retry: { attempts: 3 } }}
+    {...props}
+  />
+  ```
+
+- **Altura Fixa**: Quando `height` é especificado, o valor é fixo e eventos de resize são ignorados. Funciona para todos os tipos de widget.
+
+  ```tsx
+  // Altura fixa de 400 pontos
+  <SoluCXWidget type='modal' options={{ height: 400 }} {...props} />
+  ```
+
+**⚠️ Importante**: O valor de `height` é sempre em **pontos** (points), não pixels, seguindo o padrão do React e React Native. O sistema operacional converte automaticamente para pixels considerando a densidade da tela.
+
+### WidgetType
+
+```typescript
+type WidgetType = 'bottom' | 'top' | 'inline' | 'modal';
+```
+
+## 🔄 Sistema de Eventos
+
+O widget processa automaticamente os seguintes eventos da pesquisa:
+
+- `FORM_OPENED` - Widget foi aberto
+- `FORM_CLOSE` - Usuário fechou o widget
+- `FORM_COMPLETED` - Pesquisa concluída
+- `FORM_PARTIALCOMPLETED` - Completada parcialmente
+- `FORM_RESIZE` - Widget redimensionado
+- `FORM_ERROR` - Erro no carregamento
+
+## 💾 Persistência Inteligente
+
+O widget controla automaticamente:
+
+- **Histórico de tentativas**: Evita spam de widgets
+- **Última avaliação**: Data da última interação
+- **Controle de frequência**: Respeita configurações de exibição
+- **Armazenamento local**: Dados persistem entre sessões
+
+## ⚙️ Múltiplos Widgets
+
+```tsx
+const widgets = ['bottom', 'top'] as WidgetType[];
+
+return (
+  <>
+    {widgets.map((type) => (
+      <SoluCXWidget
+        key={type}
+        soluCXKey={key}
+        type={type}
+        data={data}
+        options={options}
+      />
+    ))}
+  </>
+);
+```
+
+## 🚨 Considerações Importantes
+
+### Posicionamento
+
+⚠️ **Comportamento Crítico**: A posição no JSX **não determina** onde widgets `top`, `bottom` e `modal` aparecem:
+
+```tsx
+// ❌ Widget "bottom" sempre aparece embaixo, independente da posição
+<Text>Conteúdo antes</Text>
+<SoluCXWidget type="bottom" {...props} />
+<Text>Conteúdo depois</Text>
+
+// ✅ Apenas "inline" respeita a posição no código
+<Text>Conteúdo antes</Text>
+<SoluCXWidget type="inline" {...props} />
+<Text>Conteúdo depois</Text>
+```
+
+## 🔍 Troubleshooting
+
+### Widget não aparece
+
+```typescript
+// Verificações essenciais:
+// ✅ Chave SoluCX válida?
+// ✅ Conectividade com internet?
+// ✅ Logs do WebView no console?
+// ✅ Dados obrigatórios preenchidos?
+```
+
+### Eventos não funcionam
+
+```typescript
+// Debug de comunicação:
+const handleMessage = (message: string) => {
+  console.log('Widget event:', message);
+};
+
+// Verificar se JavaScript foi injetado corretamente
+```
+
+### Layout quebrado
+
+```typescript
+// Ajustar dimensões para o dispositivo:
+const { height } = Dimensions.get('window');
+
+const options = {
+  height: Math.min(height * 0.6, 400)
+};
+```
+
+## 📚 Compatibilidade
+
+| Versão | React Native | Expo | iOS | Android |
+| ------ | ------------ | ---- | --- | ------- |
+| 1.0.x  | 0.70+        | 50+  | 11+ | API 21+ |
+
+## 📄 Licença
+
+Este pacote é proprietário da SoluCX. O uso é restrito a clientes licenciados da plataforma SoluCX.
+
+---

package/package.json

@@ -1,23 +1,23 @@
-{
-  "name": "@solucx/react-native-solucx-widget",
-  "version": "0.1.15",
-  "description": "The React Native SDK for Solucx Widget",
-  "main": "src/index",
-  "author": " <> ()",
-  "homepage": "#readme",
-  "scripts": {
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "files": [
-    "src/",
-    "README.md"
-  ],
-  "peerDependencies": {
-    "@react-native-async-storage/async-storage": "^2.2.0",
-    "react": ">=18.0.0",
-    "react-native": ">=0.72.0",
-    "react-native-webview": "^13.16.0",
-    "react-native-safe-area-context": "^5.6.1"
-  }
-}
+{
+  "name": "@solucx/react-native-solucx-widget",
+  "version": "0.1.16",
+  "description": "The React Native SDK for Solucx Widget",
+  "main": "src/index",
+  "author": " <> ()",
+  "homepage": "#readme",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "src/",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-webview": "^13.16.0",
+    "react-native-safe-area-context": "^5.6.1"
+  }
+}