React Native SoluCX Widget

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

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

      <SoluCXWidgetHost />
    </>
  );
}

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

function onCheckoutComplete() {
  SoluCXWidget
    .create('YOUR_SOLUCX_KEY')
    .setType('modal')
    .setData({
      journey: 'post_sale',
      customer_id: 'customer_123',
      email: '[email protected]',
      name: 'John Smith',
    })
    .show();
}

SoluCXWidget
  .create('YOUR_SOLUCX_KEY')
  .setType('modal')
  .setData({ journey: 'quarterly_nps', customer_id: 'customer_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="YOUR_SOLUCX_KEY"
      type="inline"
      data={{
        journey: 'post_sale',
        customer_id: 'customer_123',
        email: '[email protected]',
        name: 'John Smith',
      }}
      callbacks={{
        onOpened: (userId) => {
          console.log('Widget displayed for:', userId);
        },
      }}
    />
  );
}

// Bottom: fixed bar at the bottom (default)
SoluCXWidget.create('KEY').setType('bottom').setData(data).show();

// Top: fixed bar at the top
SoluCXWidget.create('KEY').setType('top').setData(data).show();

// Modal: centered overlay that blocks the background
SoluCXWidget.create('KEY').setType('modal').setData(data).show();

// Inline: integrated into the layout flow (respects JSX position)
SoluCXWidget.create('KEY').setType('inline').setData(data).show();

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

function showSurvey() {
  SoluCXWidget
    .create('YOUR_SOLUCX_KEY')
    .setType('modal')
    .setData({
      journey: 'support',
      customer_id: 'customer_456',
      email: '[email protected]',
      name: 'Maria Santos',
      employee_id: 'agent_01',
      employee_name: 'Carlos',
    })
    .setCallbacks({
      onPreOpen: (userId) => {
        console.log('Preparing widget for:', userId);
      },
      onOpened: (userId) => {
        console.log('Widget displayed for:', userId);
        analytics.track('survey_shown', { userId });
      },
      onBlocked: (reason) => {
        // Display rules prevented the widget from showing
        console.log('Widget blocked:', reason);
        // Ex: "BLOCKED_BY_WIDGET_DISMISS_INTERVAL", "BLOCKED_BY_SAMPLING"
      },
      onClosed: () => {
        console.log('User closed the widget');
      },
      onCompleted: (userId) => {
        console.log('Survey completed by:', userId);
        analytics.track('survey_completed', { userId });
      },
      onPartialCompleted: (userId) => {
        console.log('Survey partially completed by:', userId);
      },
      onError: (message) => {
        console.error('Widget error:', message);
      },
    })
    .show();
}

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

SoluCXWidget.dismiss();

interface WidgetData {
  // Journey identifier (required in practice)
  journey?: string;

  // User identification
  customer_id?: string;
  name?: string;
  email?: string;
  phone?: string;
  phone2?: string;
  document?: string;
  birth_date?: string;     // Format: YYYY-MM-DD

  // Transaction context
  transaction_id?: string;
  store_id?: string;
  store_name?: string;
  employee_id?: string;
  employee_name?: string;
  amount?: number;
  score?: number;

  // Form ID (Flex Survey only)
  form_id?: string;

  // Custom parameters (use the param_ prefix)
  [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 for "post_sale" journey for user_123
SoluCXWidget.create('KEY').setData({ journey: 'post_sale', customer_id: 'customer_123' }).show();

// Widget for "support" journey for customer_123
SoluCXWidget.create('KEY').setData({ journey: 'support', customer_id: 'customer_123' }).show();

// Each has its own counters, timestamps, and logs