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

package/src/services/widgetEventService.ts

@@ -1,111 +1,110 @@
-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;
-    }
-}
+import type {
+  EventKey,
+  SurveyEventKey,
+  WidgetResponse,
+  WidgetCallbacks,
+} from "../interfaces";
+
+export class WidgetEventService {
+  private setIsWidgetVisible: (visible: boolean) => void;
+  private resize: (value: string) => void;
+  private userId: string;
+  private callbacks?: WidgetCallbacks;
+
+  constructor(
+    setIsWidgetVisible: (visible: boolean) => void,
+    resize: (value: string) => void,
+    userId: string,
+    callbacks?: WidgetCallbacks,
+  ) {
+    this.setIsWidgetVisible = setIsWidgetVisible;
+    this.resize = resize;
+    this.userId = userId;
+    this.callbacks = callbacks;
+  }
+
+  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_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 handleFormClose(): WidgetResponse {
+    this.setIsWidgetVisible(false);
+    this.callbacks?.onClosed?.();
+    return { status: "success" };
+  }
+
+  private handleFormError(value: string): WidgetResponse {
+    this.setIsWidgetVisible(false);
+    this.callbacks?.onError?.(value);
+    return { status: "error", message: value };
+  }
+
+  private handlePageChanged(value: string): WidgetResponse {
+    this.callbacks?.onPageChanged?.(value);
+    return { status: "success" };
+  }
+
+  private handleQuestionAnswered(): WidgetResponse {
+    this.callbacks?.onQuestionAnswered?.();
+    return { status: "success" };
+  }
+
+  private handleFormCompleted(): WidgetResponse {
+    this.callbacks?.onPartialCompleted?.(this.userId);
+    return { status: "success" };
+  }
+
+  private handlePartialCompleted(): WidgetResponse {
+    this.callbacks?.onPartialCompleted?.(this.userId);
+    return { status: "success" };
+  }
+
+  private handleResize(value: string): WidgetResponse {
+    this.resize(value);
+    this.callbacks?.onResize?.(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

@@ -1,86 +1,102 @@
-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;
-        }
-    }
-}
+import type { WidgetOptions, WidgetSamplerLog } from "../interfaces";
+import { StorageService } from "./storage";
+
+export type BlockReason =
+    | "BLOCKED_BY_RATING_INTERVAL"
+    | "BLOCKED_BY_PARTIAL_INTERVAL"
+    | "BLOCKED_BY_MAX_RETRY_ATTEMPTS";
+
+export interface WidgetDisplayResult {
+    canDisplay: boolean;
+    blockReason?: BlockReason;
+}
+
+export class WidgetValidationService {
+    private storageService: StorageService;
+
+    constructor(userId: string) {
+        this.storageService = new StorageService(userId);
+    }
+
+    async shouldDisplayWidget(widgetOptions: WidgetOptions): Promise<WidgetDisplayResult> {
+        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 { canDisplay: false, blockReason: "BLOCKED_BY_RATING_INTERVAL" };
+        }
+        if (this.isWithinCollectPartialInterval(userLog, waitDelayAfterRating, now, dayInMilliseconds)) {
+            return { canDisplay: false, blockReason: "BLOCKED_BY_PARTIAL_INTERVAL" };
+        }
+        if (this.isWithinRetryInterval(userLog, interval, attempts, now, dayInMilliseconds)) {
+            return { canDisplay: false, blockReason: "BLOCKED_BY_MAX_RETRY_ATTEMPTS" };
+        }
+
+        await this.resetAttemptsIfNeeded(userLog, attempts);
+        await this.setLog(userLog);
+        return { canDisplay: 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/setupTests.js

@@ -0,0 +1,43 @@
+// Mock react-native-safe-area-context
+jest.mock('react-native-safe-area-context', () => {
+  const React = require('react');
+  return {
+    SafeAreaView: ({ children, ...props}) =>
+      React.createElement('SafeAreaView', props, children),
+    SafeAreaProvider: ({ children }) => children,
+    useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
+  };
+});
+
+// Suppress act() warnings from Animated components
+// These warnings are expected for components with animations in tests
+// since we're testing rendering, not animation behavior
+const originalError = console.error;
+
+beforeAll(() => {
+  console.error = (...args) => {
+    if (
+      typeof args[0] === 'string' &&
+      (args[0].includes('An update to Animated') ||
+       args[0].includes('was not wrapped in act'))
+    ) {
+      return;
+    }
+    originalError.call(console, ...args);
+  };
+});
+
+afterAll(() => {
+  console.error = originalError;
+});
+
+// Use fake timers to control React Native animations and prevent teardown errors
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.runOnlyPendingTimers();
+  jest.clearAllTimers();
+  jest.useRealTimers();
+});

package/src/styles/widgetStyles.ts

@@ -1,58 +1,58 @@
-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,
-    },
-});
-
-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;
-};
+import { StyleSheet } from 'react-native';
+import type { 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,
+    },
+});
+
+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

@@ -1,13 +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()}`;
-}
+import { BASE_URL } from "../constants/webViewConstants";
+import type { 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()}`;
+}