React Native SoluCX Widget

// App.tsx
import { SoluCXWidgetHost } from '@solucx/react-native-solucx-widget';

export default function App() {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator>{/* tus pantallas */}</Stack.Navigator>
      </NavigationContainer>

      <SoluCXWidgetHost />
    </>
  );
}

// CheckoutScreen.tsx
import { SoluCXWidget } from '@solucx/react-native-solucx-widget';

function onCheckoutComplete() {
  SoluCXWidget
    .create('TU_CLAVE_SOLUCX')
    .setType('modal')
    .setData({
      journey: 'pos_venta',
      customer_id: 'cliente_123',
      email: '[email protected]',
      name: 'Juan García',
    })
    .show();
}

SoluCXWidget
  .create('TU_CLAVE_SOLUCX')
  .setType('modal')
  .setData({ journey: 'nps_trimestral', customer_id: 'cliente_789' })
  .setOptions({
    height: 600,
    samplingPercentage: 50,
    maxAttemptsAfterDismiss: 5,
    waitDaysAfterWidgetDismiss: 90,
  })
  .show();

// CheckoutScreen.tsx
import { SoluCXWidgetView } from '@solucx/react-native-solucx-widget';

export function CheckoutScreen() {
  return (
    <SoluCXWidgetView
      soluCXKey="TU_CLAVE_SOLUCX"
      type="inline"
      data={{
        journey: 'pos_venta',
        customer_id: 'cliente_123',
        email: '[email protected]',
        name: 'Juan García',
      }}
      callbacks={{
        onOpened: (userId) => {
          console.log('Widget mostrado para:', userId);
        },
      }}
    />
  );
}

// Bottom: barra fija en la parte inferior (por defecto)
SoluCXWidget.create('KEY').setType('bottom').setData(data).show();

// Top: barra fija en la parte superior
SoluCXWidget.create('KEY').setType('top').setData(data).show();

// Modal: superposición centrada que bloquea el fondo
SoluCXWidget.create('KEY').setType('modal').setData(data).show();

// Inline: integrado en el flujo del layout (respeta la posición en JSX)
SoluCXWidget.create('KEY').setType('inline').setData(data).show();

import { SoluCXWidget } from '@solucx/react-native-solucx-widget';

function showSurvey() {
  SoluCXWidget
    .create('TU_CLAVE_SOLUCX')
    .setType('modal')
    .setData({
      journey: 'atención',
      customer_id: 'cliente_456',
      email: '[email protected]',
      name: 'María Santos',
      employee_id: 'agente_01',
      employee_name: 'Carlos',
    })
    .setCallbacks({
      onPreOpen: (userId) => {
        console.log('Preparando widget para:', userId);
      },
      onOpened: (userId) => {
        console.log('Widget mostrado para:', userId);
        analytics.track('survey_shown', { userId });
      },
      onBlocked: (reason) => {
        // Reglas de visualización impidieron la visualización
        console.log('Widget bloqueado:', reason);
        // Ej: "BLOCKED_BY_WIDGET_DISMISS_INTERVAL", "BLOCKED_BY_SAMPLING"
      },
      onClosed: () => {
        console.log('Usuario cerró el widget');
      },
      onCompleted: (userId) => {
        console.log('Encuesta completada por:', userId);
        analytics.track('survey_completed', { userId });
      },
      onPartialCompleted: (userId) => {
        console.log('Encuesta parcialmente completada por:', userId);
      },
      onError: (message) => {
        console.error('Error en el widget:', message);
      },
    })
    .show();
}

import { SoluCXWidget } from '@solucx/react-native-solucx-widget';

SoluCXWidget.dismiss();

interface WidgetData {
  // Identificador de la jornada (obligatorio en la práctica)
  journey?: string;

  // Identificación del usuario
  customer_id?: string;
  name?: string;
  email?: string;
  phone?: string;
  phone2?: string;
  document?: string;
  birth_date?: string;     // Formato: YYYY-MM-DD

  // Contexto de la transacción
  transaction_id?: string;
  store_id?: string;
  store_name?: string;
  employee_id?: string;
  employee_name?: string;
  amount?: number;
  score?: number;

  // ID del formulario (solo para Flex Survey)
  form_id?: string;

  // Parámetros personalizados (usa el prefijo param_)
  [key: `param_${string}`]: string | number | undefined;
}

interface WidgetOptions {
  enabled?: boolean;
  samplingPercentage?: number;
  type?: string;
  height?: number;
  maxAttemptsAfterDismiss?: number;
  waitDaysAfterWidgetDisplayAttempt?: number;
  waitDaysAfterWidgetFirstAccess?: number;
  waitDaysAfterWidgetDisplay?: number;
  waitDaysAfterWidgetDismiss?: number;
  waitDaysAfterWidgetSubmit?: number;
  waitDaysAfterWidgetPartialSubmit?: number;
}

interface WidgetCallbacks {
  onPreOpen?: (userId: string) => void;
  onOpened?: (userId: string) => void;
  onBlocked?: (blockReason: BlockReason | string | undefined) => void;
  onClosed?: () => void;
  onCompleted?: (userId: string) => void;
  onPartialCompleted?: (userId: string) => void;
  onError?: (message: string) => void;
  onPageChanged?: (page: string) => void;
  onQuestionAnswered?: () => void;
  onResize?: (height: string) => void;
}

type BlockReason =
    | "BLOCKED_BY_DISABLED"
    | "BLOCKED_BY_SAMPLING"
    | "BLOCKED_BY_TRANSACTION_ALREADY_ANSWERED"
    | "BLOCKED_BY_MAX_ATTEMPTS"
    | "BLOCKED_BY_WIDGET_DISPLAY_ATTEMPT_INTERVAL"
    | "BLOCKED_BY_WIDGET_FIRST_ACCESS_INTERVAL"
    | "BLOCKED_BY_WIDGET_DISPLAY_INTERVAL"
    | "BLOCKED_BY_WIDGET_DISMISS_INTERVAL"
    | "BLOCKED_BY_WIDGET_SUBMIT_INTERVAL"
    | "BLOCKED_BY_WIDGET_PARTIAL_SUBMIT_INTERVAL";

// Widget de la jornada "pos_venta" para user_123
SoluCXWidget.create('KEY').setData({ journey: 'pos_venta', customer_id: 'cliente_123' }).show();

// Widget de la jornada "atencion" para cliente_123
SoluCXWidget.create('KEY').setData({ journey: 'atencion', customer_id: 'cliente_123' }).show();

// Cada uno tiene sus propios contadores, timestamps y logs