@flagship.io/react-native-sdk/dist/TouchCaptureProvider.js

Flagship SDK for React Native

import { Flagship, useFlagship } from '@flagship.io/react-sdk';
import React, { useCallback, useEffect, useRef } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { MAX_CLICK_PATH_LENGTH, TIMEOUT_DURATION } from './Constant';
function TouchCaptureProviderFunc({ children }) {
    const lastTouchCoordinates = useRef(null);
    const lastTouchEventTime = useRef(null);
    const touchPath = useRef('');
    const touchPathTimeoutId = useRef(null);
    const touchPositionTimeoutId = useRef(null);
    const fs = useFlagship();
    const [isEAIDataCollecting, setIsEAIDataCollecting] = React.useState(false);
    const onEAICollectStatusChange = useCallback((status) => {
        setIsEAIDataCollecting(status);
    }, []);
    useEffect(() => {
        const visitor = Flagship.getVisitor();
        if (visitor) {
            visitor.onEAICollectStatusChange(onEAICollectStatusChange);
        }
    }, [fs]);
    const sendTouchPositionEvent = useCallback(({ pageX, pageY }) => {
        var _a;
        const visitor = Flagship.getVisitor();
        if (!visitor)
            return;
        const screen = Dimensions.get('screen');
        const timestamp = Date.now().toString().slice(-5);
        const visitorEvent = {
            customerAccountId: (_a = Flagship.getConfig()) === null || _a === void 0 ? void 0 : _a.envId,
            visitorId: visitor.visitorId,
            currentUrl: '',
            clickPosition: `${pageY},${pageX},${timestamp},0;`,
            screenSize: `${screen.width},${screen.height};`
        };
        visitor.sendEaiVisitorEvent(visitorEvent);
    }, []);
    const sendTouchPathEvent = useCallback(() => {
        var _a;
        const visitor = Flagship.getVisitor();
        if (!visitor)
            return;
        const screen = Dimensions.get('screen');
        const visitorEvent = {
            visitorId: visitor.visitorId || '',
            customerAccountId: ((_a = Flagship.getConfig()) === null || _a === void 0 ? void 0 : _a.envId) || '',
            clickPath: touchPath.current,
            screenSize: `${screen.width},${screen.height};`,
            currentUrl: ''
        };
        touchPath.current = '';
        visitor.sendEaiVisitorEvent(visitorEvent);
    }, []);
    const processTouchMoveEvent = useCallback(({ pageX, pageY }) => {
        if (touchPathTimeoutId.current) {
            clearTimeout(touchPathTimeoutId.current);
        }
        touchPath.current += `${pageY},${pageX},${Date.now()
            .toString()
            .slice(-5)};`;
        if (touchPath.current.length > MAX_CLICK_PATH_LENGTH) {
            sendTouchPathEvent();
            return;
        }
        touchPathTimeoutId.current = setTimeout(sendTouchPathEvent, TIMEOUT_DURATION);
    }, [sendTouchPathEvent]);
    const handleTouchStart = useCallback((event) => {
        if (touchPositionTimeoutId.current) {
            clearTimeout(touchPositionTimeoutId.current);
        }
        const { pageX, pageY } = event.nativeEvent;
        const coordinates = { pageX, pageY };
        if (lastTouchCoordinates.current) {
            sendTouchPositionEvent(lastTouchCoordinates.current);
        }
        lastTouchEventTime.current = Date.now();
        lastTouchCoordinates.current = coordinates;
        touchPositionTimeoutId.current = setTimeout(() => {
            if (lastTouchCoordinates.current) {
                sendTouchPositionEvent(coordinates);
                lastTouchEventTime.current = null;
                lastTouchCoordinates.current = null;
            }
        }, TIMEOUT_DURATION);
    }, [sendTouchPositionEvent]);
    const handleTouchMove = useCallback((event) => {
        if (lastTouchEventTime.current &&
            Date.now() - lastTouchEventTime.current < TIMEOUT_DURATION) {
            lastTouchEventTime.current = null;
            lastTouchCoordinates.current = null;
        }
        const { pageX, pageY } = event.nativeEvent;
        processTouchMoveEvent({ pageX, pageY });
    }, [processTouchMoveEvent]);
    return (<View style={styles.container} pointerEvents="box-none" onTouchStart={isEAIDataCollecting ? handleTouchStart : undefined} onTouchMove={isEAIDataCollecting ? handleTouchMove : undefined}>
            {children}
        </View>);
}
const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'transparent',
        zIndex: 10000
    }
});
export const TouchCaptureProvider = React.memo(TouchCaptureProviderFunc);