@solucx/react-native-solucx-widget 0.1.0

package/src/components/ModalWidget.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Modal, SafeAreaView, View } from 'react-native';
+import { styles, getWidgetVisibility } from '../styles/widgetStyles';
+import { CloseButton } from './CloseButton';
+
+interface ModalWidgetProps {
+    visible: boolean;
+    children?: React.ReactNode;
+    onClose?: () => void;
+}
+
+export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, children, onClose }) => {
+    const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
+
+    return (
+        <SafeAreaView>
+            <Modal transparent visible={isWidgetVisible} animationType="fade" hardwareAccelerated>
+                <View style={[styles.modalOverlay, getWidgetVisibility(visible)]}>
+                    <View style={[styles.modalContent, getWidgetVisibility(visible)]}>
+                        {children}
+                        <CloseButton
+                            visible={visible}
+                            onPress={() => {
+                                setIsWidgetVisible(false);
+                                if (onClose) {
+                                    onClose();
+                                }
+                            }}
+                        />
+                    </View>
+                </View>
+            </Modal>
+        </SafeAreaView>
+    );
+};

package/src/components/OverlayWidget.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { View, ViewStyle, Modal } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { getWidgetStyles, getWidgetVisibility } from '../styles/widgetStyles';
+import { FIXED_Z_INDEX } from '../constants/webViewConstants';
+import { CloseButton } from './CloseButton';
+
+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 = useSafeAreaInsets();
+    const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
+
+    const containerStyle: ViewStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: FIXED_Z_INDEX,
+        backgroundColor: 'transparent',
+    }
+
+    const contentStyle = [
+        getWidgetStyles(position).content,
+        {
+            width,
+            height,
+            ...(position === 'top' && {
+                top: insets.top,
+            }),
+            ...(position === 'bottom' && {
+                bottom: insets.bottom,
+            }),
+        }
+    ];
+
+    return (
+        <Modal
+            transparent
+            visible={isWidgetVisible}
+            animationType="fade"
+            hardwareAccelerated
+        >
+            <View style={[containerStyle, getWidgetVisibility(visible)]}>
+                <View style={[contentStyle, getWidgetVisibility(visible)]}>
+                    {children}
+                    <CloseButton
+                        visible={visible}
+                        onPress={() => {
+                            setIsWidgetVisible(false);
+                            if (onClose) {
+                                onClose();
+                            }
+                        }}
+                    />
+                </View>
+            </View>
+        </Modal>
+    );
+};

package/src/constants/webViewConstants.ts

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

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useWidgetState } from './useWidgetState';

package/src/hooks/useWidgetState.ts

@@ -0,0 +1,72 @@
+import { useState, useCallback } from 'react';
+import { Dimensions } from 'react-native';
+import { WidgetSamplerLog, WidgetData, WidgetType } from '../interfaces';
+import { StorageService } from '../services/storage';
+
+function getUserId(widgetData: WidgetData): string {
+    return widgetData.customer_id ?? widgetData.document ?? widgetData.email ?? "";
+}
+
+export const useWidgetState = (data: WidgetData, 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 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);
+        setWidgetHeight(receivedHeight);
+    }, [screenHeight]);
+
+    return {
+        savedData,
+        widgetHeight,
+        isWidgetVisible,
+        setIsWidgetVisible,
+        loadSavedData,
+        saveData,
+        open,
+        close,
+        resize,
+        userId,
+        screenHeight
+    };
+};

package/src/index.ts

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

package/src/interfaces/WidgetData.ts

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

package/src/interfaces/WidgetOptions.ts

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

package/src/interfaces/WidgetResponse.ts

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

package/src/interfaces/WidgetSamplerLog.ts

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

package/src/interfaces/index.ts

@@ -0,0 +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 { WidgetResponse } from './WidgetResponse';
+export { WidgetData } from './WidgetData';
+export { WidgetOptions } from './WidgetOptions';
+export { WidgetSamplerLog } from './WidgetSamplerLog';
+export { WidgetError } from './WidgetResponse';

package/src/services/storage.ts

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

package/src/services/widgetEventService.ts

@@ -0,0 +1,111 @@
+import { EventKey, SurveyEventKey, WidgetResponse, WidgetOptions } from '../interfaces';
+import { WidgetValidationService } from './widgetValidationService';
+
+export class WidgetEventService {
+    private setIsWidgetVisible: (visible: boolean) => void;
+    private resize: (value: string) => void;
+    private open: () => void;
+    private validationService: WidgetValidationService;
+    private widgetOptions: WidgetOptions;
+
+    constructor(
+        setIsWidgetVisible: (visible: boolean) => void,
+        resize: (value: string) => void,
+        open: () => void,
+        userId: string,
+        widgetOptions: WidgetOptions
+    ) {
+        this.setIsWidgetVisible = setIsWidgetVisible;
+        this.resize = resize;
+        this.open = open;
+        this.validationService = new WidgetValidationService(userId);
+        this.widgetOptions = widgetOptions;
+    }
+
+    async handleMessage(message: string, isForm: boolean): Promise<WidgetResponse> {
+        const [eventKey, value = ""] = message.split("-");
+        const processedKey = isForm
+            ? eventKey as EventKey
+            : this.adaptSurveyKeyToWidgetKey(eventKey as SurveyEventKey);
+
+        return await this.executeEvent(processedKey, value);
+    }
+
+    private async executeEvent(eventKey: EventKey, value: string): Promise<WidgetResponse> {
+        const eventHandlers = {
+            FORM_OPENED: () => this.handleFormOpened(),
+            FORM_CLOSE: () => this.handleFormClose(),
+            FORM_ERROR: (value: string) => this.handleFormError(value),
+            FORM_PAGECHANGED: (value: string) => this.handlePageChanged(value),
+            QUESTION_ANSWERED: () => this.handleQuestionAnswered(),
+            FORM_COMPLETED: () => this.handleFormCompleted(),
+            FORM_PARTIALCOMPLETED: () => this.handlePartialCompleted(),
+            FORM_RESIZE: (value: string) => this.handleResize(value),
+        };
+
+        const handler = eventHandlers[eventKey];
+        return await (handler?.(value) || { status: "error", message: "Unknown event" });
+    }
+
+    private async handleFormOpened(): Promise<WidgetResponse> {
+        const canDisplay = await this.validationService.shouldDisplayWidget(this.widgetOptions);
+
+        if (!canDisplay) {
+            return { status: "error", message: "Widget not allowed" };
+        }
+
+        this.open();
+        this.setIsWidgetVisible(true);
+        return { status: "success" };
+    }
+
+    private handleFormClose(): WidgetResponse {
+        this.setIsWidgetVisible(false);
+        return { status: "success" };
+    }
+
+    private handleFormError(value: string): WidgetResponse {
+        this.setIsWidgetVisible(false);
+        return { status: "error", message: value };
+    }
+
+    private handlePageChanged(value: string): WidgetResponse {
+        console.log("Page changed:", value);
+        return { status: "success" };
+    }
+
+    private handleQuestionAnswered(): WidgetResponse {
+        console.log("Question answered");
+        return { status: "success" };
+    }
+
+    private handleFormCompleted(): WidgetResponse {
+        // TODO: Implement completion logic
+        return { status: "success" };
+    }
+
+    private handlePartialCompleted(): WidgetResponse {
+        // TODO: Implement partial completion logic
+        return { status: "success" };
+    }
+
+    private handleResize(value: string): WidgetResponse {
+        this.setIsWidgetVisible(true);
+        this.resize(value);
+        return { status: "success" };
+    }
+
+    private adaptSurveyKeyToWidgetKey(key: SurveyEventKey): EventKey {
+        const keyMapping = {
+            closeSoluCXWidget: "FORM_CLOSE",
+            dismissSoluCXWidget: "FORM_CLOSE",
+            completeSoluCXWidget: "FORM_COMPLETED",
+            partialSoluCXWidget: "FORM_PARTIALCOMPLETED",
+            resizeSoluCXWidget: "FORM_RESIZE",
+            openSoluCXWidget: "FORM_OPENED",
+            errorSoluCXWidget: "FORM_ERROR",
+        } as const;
+
+        return keyMapping[key] as EventKey;
+    }
+}

package/src/services/widgetValidationService.ts

@@ -0,0 +1,86 @@
+import { WidgetOptions, WidgetSamplerLog } from '../interfaces';
+import { StorageService } from './storage';
+
+export class WidgetValidationService {
+    private storageService: StorageService;
+
+    constructor(userId: string) {
+        this.storageService = new StorageService(userId);
+    }
+
+    async shouldDisplayWidget(widgetOptions: WidgetOptions): Promise<boolean> {
+        const { retry, waitDelayAfterRating = 60 } = widgetOptions;
+        const { attempts = 5, interval = 1 } = retry || {};
+        const userLog = await this.getLog();
+        const now = Date.now();
+        const dayInMilliseconds = 86400000;
+
+        if (this.isWithinCollectInterval(userLog, waitDelayAfterRating, now, dayInMilliseconds)) return false;
+        if (this.isWithinCollectPartialInterval(userLog, waitDelayAfterRating, now, dayInMilliseconds)) return false;
+        if (this.isWithinRetryInterval(userLog, interval, attempts, now, dayInMilliseconds)) return false;
+
+        await this.resetAttemptsIfNeeded(userLog, attempts);
+        await this.setLog(userLog);
+        return true;
+    }
+
+    private async getLog(): Promise<WidgetSamplerLog> {
+        try {
+            return await this.storageService.read();
+        } catch (error) {
+            console.error('Error reading widget log:', error);
+            return {
+                attempts: 0,
+                lastAttempt: 0,
+                lastRating: 0,
+                lastParcial: 0
+            };
+        }
+    }
+
+    private async setLog(userLog: WidgetSamplerLog): Promise<void> {
+        try {
+            await this.storageService.write(userLog);
+        } catch (error) {
+            console.error('Error writing widget log:', error);
+        }
+    }
+
+    private isWithinCollectInterval(
+        userLog: WidgetSamplerLog,
+        waitDelayAfterRating: number,
+        now: number,
+        dayInMilliseconds: number
+    ): boolean {
+        const timeSinceLastRating = now - userLog.lastRating;
+        return userLog.lastRating > 0 && timeSinceLastRating < waitDelayAfterRating * dayInMilliseconds;
+    }
+
+    private isWithinCollectPartialInterval(
+        userLog: WidgetSamplerLog,
+        waitDelayAfterRating: number,
+        now: number,
+        dayInMilliseconds: number
+    ): boolean {
+        const timeSinceLastPartial = now - userLog.lastParcial;
+        return userLog.lastParcial > 0 && timeSinceLastPartial < waitDelayAfterRating * dayInMilliseconds;
+    }
+
+    private isWithinRetryInterval(
+        userLog: WidgetSamplerLog,
+        interval: number,
+        attempts: number,
+        now: number,
+        dayInMilliseconds: number
+    ): boolean {
+        if (userLog.attempts < attempts) return false;
+        const timeSinceLastAttempt = now - userLog.lastAttempt;
+        return timeSinceLastAttempt < interval * dayInMilliseconds;
+    }
+
+    private async resetAttemptsIfNeeded(userLog: WidgetSamplerLog, maxAttempts: number): Promise<void> {
+        if (userLog.attempts >= maxAttempts) {
+            userLog.attempts = 0;
+        }
+    }
+}

package/src/styles/widgetStyles.ts

@@ -0,0 +1,59 @@
+import { StyleSheet } from 'react-native';
+import { WidgetType } from '../interfaces';
+
+export const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    inlineWrapper: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    bottom: {
+        position: 'absolute',
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    top: {
+        position: 'absolute',
+        top: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    inline: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    modalOverlay: {
+        flex: 1,
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        alignItems: 'center',
+    },
+    modalContent: {
+        backgroundColor: 'white',
+        borderRadius: 10,
+        maxHeight: '60%',
+    },
+});
+
+export const getWidgetVisibility = (visibility: boolean) => {
+    return {
+        opacity: visibility ? 1 : 0,
+        pointerEvents: visibility ? 'auto' as const : 'none' as const,
+    };
+};
+
+export const getWidgetStyles = (type: WidgetType) => {
+    const styleMap = {
+        'bottom': { container: styles.wrapper, content: styles.bottom },
+        'top': { container: styles.wrapper, content: styles.top },
+        'inline': { container: styles.inlineWrapper, content: styles.inline },
+        'modal': { container: styles.wrapper, content: styles.inline }
+    };
+
+    return styleMap[type] || styleMap.bottom;
+};

package/src/utils/urlUtils.ts

@@ -0,0 +1,13 @@
+import { BASE_URL } from '../constants/webViewConstants';
+import { WidgetData, SoluCXKey } from '../interfaces';
+
+export function buildWidgetURL(key: SoluCXKey, data: WidgetData): string {
+    const params = new URLSearchParams(data as Record<string, string>);
+    const baseURL = `${BASE_URL}/${key}/?mode=widget`;
+
+    if (data.transaction_id) {
+        return `${baseURL}&${params.toString()}`;
+    }
+
+    return `${baseURL}&transaction_id=&${params.toString()}`;
+}