@encatch/web-sdk 0.0.13

package/src/hooks/useSubmitFeedbackForm.ts

@@ -0,0 +1,125 @@
+import { useState } from "preact/hooks";
+import { SubmitFeedback, ViewFeedback } from "@encatch/schema";
+import { EncatchApiSDK } from "@encatch/api-sdk";
+import { moveFeedbackToSubmitted } from "../utils/feedback-storage";
+
+export interface SubmitFeedbackResponse {
+  success?: boolean;
+  error?: string;
+}
+
+export const useSubmitFeedbackForm = ({
+  apiKey,
+  hostUrl,
+}: {
+  apiKey: string;
+  hostUrl: string;
+}) => {
+  const [loadingSubmitFeedback, setLoadingSubmitFeedback] = useState(false);
+  const [errorSubmitFeedback, setErrorSubmitFeedback] = useState<string | null>(
+    null
+  );
+  const [successSubmitFeedback, setSuccessSubmitFeedback] = useState(false);
+
+  // New state for viewFeedback
+  const [loadingViewFeedback, setLoadingViewFeedback] = useState(false);
+  const [errorViewFeedback, setErrorViewFeedback] = useState<string | null>(
+    null
+  );
+  const [successViewFeedback, setSuccessViewFeedback] = useState(false);
+
+  // Instantiate the SDK once
+  const sdk = new EncatchApiSDK({
+    apiKey,
+    hostUrl,
+    appPackageName: window.location.hostname,
+    enableLogging: true,
+  });
+
+  const submitFeedback = async (
+    params: SubmitFeedback
+  ): Promise<SubmitFeedbackResponse> => {
+    setLoadingSubmitFeedback(true);
+    setErrorSubmitFeedback(null);
+    setSuccessSubmitFeedback(false);
+
+    try {
+      // Ensure sessionInfo is always provided (required by SDK)
+      if (!params.sessionInfo) {
+        throw new Error("sessionInfo is required for submitting feedback");
+      }
+
+      // Use the SDK's submitFeedback method
+      // Type assertion needed because SDK requires sessionInfo to be non-optional
+      const result = await sdk.submitFeedback(params as any);
+
+      if (!result.success) {
+        throw new Error(result.error || "Unknown error from SDK");
+      }
+
+      // Move feedback from pending to submitted with timestamp
+      const feedbackConfigId = params.formConfig.feedbackConfigurationId;
+      if (feedbackConfigId) {
+        moveFeedbackToSubmitted(feedbackConfigId);
+      }
+
+      setSuccessSubmitFeedback(true);
+      return { success: true };
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : "An error occurred while submitting feedback";
+      setErrorSubmitFeedback(errorMessage);
+      return { error: errorMessage };
+    } finally {
+      setLoadingSubmitFeedback(false);
+    }
+  };
+
+  const viewFeedback = async (
+    params: ViewFeedback
+  ): Promise<SubmitFeedbackResponse> => {
+    setLoadingViewFeedback(true);
+    setErrorViewFeedback(null);
+    setSuccessViewFeedback(false);
+
+    try {
+      // Ensure sessionInfo is always provided (required by SDK)
+      if (!params.sessionInfo) {
+        throw new Error("sessionInfo is required for viewing feedback");
+      }
+
+      // Use the SDK's viewFeedback method
+      // Type assertion needed because SDK requires sessionInfo to be non-optional
+      const result = await sdk.viewFeedback(params as any);
+
+      if (!result.success) {
+        throw new Error(result.error || "Unknown error from SDK");
+      }
+
+      setSuccessViewFeedback(true);
+      return { success: true };
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : "An error occurred while viewing feedback";
+      setErrorViewFeedback(errorMessage);
+      return { error: errorMessage };
+    } finally {
+      setLoadingViewFeedback(false);
+    }
+  };
+
+  return {
+    loadingSubmitFeedback,
+    errorSubmitFeedback,
+    successSubmitFeedback,
+    submitFeedback,
+    loadingViewFeedback,
+    errorViewFeedback,
+    successViewFeedback,
+    viewFeedback,
+  };
+};

package/src/hooks/useUserSession.ts

@@ -0,0 +1,53 @@
+import { UserInfo } from "@encatch/schema";
+import { useState, useEffect } from "preact/hooks";
+
+const USER_STORAGE_KEY = "encatch_app_user";
+const SESSION_STORAGE_KEY = "app_session";
+
+function generateSessionId() {
+  return crypto.randomUUID();
+}
+
+export const useUserSession = () => {
+  const [userInfoObject, setUserInfoObject] = useState<UserInfo>({
+    userName: "",
+    properties: {},
+  });
+  const [sessionId, setSessionId] = useState<string | null>(null);
+
+  const updateUserInfo = (userId: string, traits?: Record<string, any>) => {
+    const newUserInfo: UserInfo = {
+      userName: userId,
+      properties: traits || {},
+    };
+    setUserInfoObject(newUserInfo);
+    localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(newUserInfo));
+  };
+
+  useEffect(() => {
+    // Handle session - check if there's an existing session
+    const storedSessionId = localStorage.getItem(SESSION_STORAGE_KEY);
+    if (storedSessionId) {
+      setSessionId(storedSessionId);
+    } else {
+      // Create new session if none exists
+      const newSessionId = generateSessionId();
+      localStorage.setItem(SESSION_STORAGE_KEY, newSessionId);
+      setSessionId(newSessionId);
+    }
+
+    // Handle user info
+    const storedUser = localStorage.getItem(USER_STORAGE_KEY);
+    if (storedUser) {
+      setUserInfoObject(JSON.parse(storedUser));
+    }
+
+  }, []);
+
+  return {
+    userInfoObject,
+    updateUserInfo,
+    sessionId,
+    setUserInfoObject,
+  };
+};

package/src/module.tsx

@@ -0,0 +1,427 @@
+/**
+ * Module entry point for @encatch/web-sdk
+ * 
+ * Usage:
+ * ```typescript
+ * import { Encatch } from '@encatch/web-sdk';
+ * 
+ * const encatch = new Encatch();
+ * encatch.init('YOUR_API_KEY', {
+ *   host: 'https://your-host.com',
+ *   autoStartEnabled: true
+ * });
+ * ```
+ */
+
+import { createEncatchInstance } from "./encatch-instance";
+import { EncatchConfig, FormEventType, FormEventPayload } from "./@types/encatch-type";
+
+let coreLoaded = false;
+
+/**
+ * Load the core wrapper for module usage
+ * SSR-safe: Only runs in browser environment
+ */
+async function loadCore() {
+  // SSR safety check
+  if (coreLoaded || typeof window === "undefined" || typeof document === "undefined") return;
+  coreLoaded = true;
+
+  try {
+    // Dynamically import and render the core wrapper
+    const { render } = await import("preact");
+    const CoreWrapper = (await import("./core-wrapper")).default;
+
+    // Ensure root exists (SSR-safe)
+    if (typeof document === "undefined") return;
+    
+    let root = document.getElementById("enisght-root");
+    if (!root && document.body) {
+      root = document.createElement("div");
+      root.id = "enisght-root";
+      document.body.appendChild(root);
+    }
+
+    // Render the core wrapper (only if we have a root)
+    if (root) {
+      render(<CoreWrapper />, root);
+    }
+  } catch (err) {
+    console.error("Failed to load Encatch core:", err);
+  }
+}
+
+// Singleton instance for static API
+let defaultInstance: Encatch | null = null;
+
+/**
+ * Encatch SDK class for module-based usage
+ */
+export class Encatch {
+  private instance: EncatchGlobal;
+
+  constructor() {
+    this.instance = createEncatchInstance();
+    
+    // Sync instance with window.encatch for core-wrapper compatibility
+    // This ensures core-wrapper can access the instance
+    if (typeof window !== "undefined") {
+      // Only set if not already set (to avoid overwriting CDN version)
+      if (!window.encatch) {
+        window.encatch = this.instance;
+      }
+    }
+    
+    // Ensure the root div exists (SSR-safe)
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      if (!document.getElementById("enisght-root")) {
+        const rootDiv = document.createElement("div");
+        rootDiv.id = "enisght-root";
+        if (document.body) {
+          document.body.appendChild(rootDiv);
+        } else {
+          // Wait for DOM to be ready
+          if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", () => {
+              if (!document.getElementById("enisght-root") && document.body) {
+                document.body.appendChild(rootDiv);
+              }
+            });
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Static method to initialize the default Encatch instance
+   * This provides a convenient API: Encatch.init(apiKey, options)
+   */
+  static init(apiKey: string, options?: EncatchConfig): Encatch {
+    if (!defaultInstance) {
+      defaultInstance = new Encatch();
+    }
+    defaultInstance.init(apiKey, options);
+    return defaultInstance;
+  }
+
+  /**
+   * Get the default singleton instance
+   */
+  static getInstance(): Encatch {
+    if (!defaultInstance) {
+      defaultInstance = new Encatch();
+    }
+    return defaultInstance;
+  }
+
+  /**
+   * Initialize the Encatch SDK
+   * SSR-safe: Can be called on server, but only initializes in browser
+   */
+  init(apiKey: string, options?: EncatchConfig): void {
+    // SSR safety check
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      // In SSR environment, just store config for later initialization
+      this.instance.apiKey = apiKey;
+      if (options) {
+        Object.assign(this.instance.config, options);
+      }
+      return;
+    }
+
+    // Override the init to load core directly instead of via script tag
+    if (this.instance.initialized) return;
+
+    // Update all config first
+    this.instance.apiKey = apiKey;
+    // Set host with default if not provided
+    this.instance.config.host = options?.host || "https://app.encatch.com";
+    if (options?.autoStartSessionDisabled !== undefined) {
+      this.instance.config.autoStartSessionDisabled =
+        options.autoStartSessionDisabled;
+    }
+    if (options?.processAfterIdentitySet !== undefined) {
+      this.instance.config.processAfterIdentitySet =
+        options.processAfterIdentitySet;
+    } else {
+      this.instance.config.processAfterIdentitySet = false;
+    }
+
+    if (options?.autoStartEnabled !== undefined) {
+      this.instance.config.autoStartEnabled = options.autoStartEnabled;
+    }
+    if (options?.themeMode) {
+      this.instance.config.themeMode = options.themeMode;
+    } else {
+      this.instance.config.themeMode = "light";
+    }
+    if (options?.language) {
+      this.instance.config.language = options.language;
+    } else {
+      this.instance.config.language = "en";
+    }
+
+    if (options?.customCssLink) {
+      this.instance.config.customCssLink = options.customCssLink;
+    }
+
+    if (options?.setUser) {
+      this.instance.config.setUser = options.setUser;
+    }
+
+    if (options?.onFormEvent) {
+      this.instance.config.onFormEvent = options.onFormEvent;
+    }
+
+    if (options?.customProperties) {
+      this.instance.config.customProperties = options.customProperties;
+    }
+
+    if (options?.onSessionDisabled) {
+      this.instance.config.onSessionDisabled = options.onSessionDisabled;
+    }
+
+    // Mark as initialized
+    this.instance.initialized = true;
+
+    // Sync instance with window.encatch AFTER all config is set
+    // This ensures core-wrapper can access all properties
+    if (typeof window !== "undefined") {
+      window.encatch = this.instance;
+    }
+
+    // Load core directly for module usage (after window.encatch is set)
+    loadCore();
+  }
+
+  /**
+   * Track a custom event
+   */
+  trackEvent(eventName: string, properties?: Record<string, any>): void {
+    if (this.instance.trackEvent) {
+      this.instance.trackEvent(eventName, properties);
+    } else {
+      this.instance._i.push(["trackEvent", eventName, properties]);
+    }
+  }
+
+  /**
+   * Start the SDK session
+   */
+  start(
+    userId?: string,
+    traits?: {
+      $set?: Record<string, any>;
+      $set_once?: Record<string, any>;
+      $counter?: Record<string, any>;
+      $unset?: string[];
+      [key: string]: any;
+    }
+  ): void {
+    if (this.instance.start) {
+      this.instance.start(userId, traits);
+    } else {
+      this.instance._i.push(["start", userId, traits]);
+    }
+  }
+
+  /**
+   * Stop the SDK session
+   */
+  stop(): void {
+    if (this.instance.stop) {
+      this.instance.stop();
+    } else {
+      this.instance._i.push(["stop"]);
+    }
+  }
+
+  /**
+   * Set or update user identity
+   */
+  setUser(
+    userId?: string,
+    traits?: {
+      $set?: Record<string, any>;
+      $set_once?: Record<string, any>;
+      $counter?: Record<string, any>;
+      $unset?: string[];
+      [key: string]: any;
+    }
+  ): void {
+    if (this.instance.setUser) {
+      this.instance.setUser(userId, traits);
+    } else {
+      this.instance._i.push(["setUser", userId, traits]);
+    }
+  }
+
+  /**
+   * Set theme mode
+   */
+  setThemeMode(theme: "light" | "dark"): void {
+    if (this.instance.setThemeMode) {
+      this.instance.setThemeMode(theme);
+    } else {
+      this.instance._i.push(["setThemeMode", theme]);
+    }
+  }
+
+  /**
+   * Set language
+   */
+  setLanguage(language: string): void {
+    if (this.instance.setLanguage) {
+      this.instance.setLanguage(language);
+    } else {
+      this.instance._i.push(["setLanguage", language]);
+    }
+  }
+
+  /**
+   * Set custom properties
+   */
+  setCustomProperties(customProperties: Record<string, string>): void {
+    if (this.instance.setCustomProperties) {
+      this.instance.setCustomProperties(customProperties);
+    } else {
+      this.instance._i.push(["setCustomProperties", customProperties]);
+    }
+  }
+
+  /**
+   * Open feedback by configuration ID
+   */
+  openFeedbackById(
+    feedbackConfigurationId: string,
+    theme?: "light" | "dark",
+    language?: string,
+    event?: string,
+    customProperties?: Record<string, string>,
+    prepopulatedAnswers?: any[]
+  ): void {
+    if (this.instance.openFeedbackById) {
+      this.instance.openFeedbackById(
+        feedbackConfigurationId,
+        theme,
+        language,
+        event,
+        customProperties,
+        prepopulatedAnswers
+      );
+    } else {
+      this.instance._i.push([
+        "openFeedbackById",
+        feedbackConfigurationId,
+        theme,
+        language,
+        event,
+        customProperties,
+        prepopulatedAnswers,
+      ]);
+    }
+  }
+
+  /**
+   * Open feedback by configuration name
+   */
+  openFeedbackByName(
+    feedbackConfigurationName: string,
+    theme?: "light" | "dark",
+    language?: string,
+    event?: string,
+    customProperties?: Record<string, string>,
+    prepopulatedAnswers?: any[]
+  ): void {
+    if (this.instance.openFeedbackByName) {
+      this.instance.openFeedbackByName(
+        feedbackConfigurationName,
+        theme,
+        language,
+        event,
+        customProperties,
+        prepopulatedAnswers
+      );
+    } else {
+      this.instance._i.push([
+        "openFeedbackByName",
+        feedbackConfigurationName,
+        theme,
+        language,
+        event,
+        customProperties,
+        prepopulatedAnswers,
+      ]);
+    }
+  }
+
+  /**
+   * Verify which feedback IDs are eligible
+   */
+  verifyFeedbackIds(feedbackConfigurationIds: string[]): string[] {
+    if (this.instance.verifyFeedbackIds) {
+      return this.instance.verifyFeedbackIds(feedbackConfigurationIds);
+    }
+    return [];
+  }
+
+  /**
+   * Force fetch eligible feedbacks
+   */
+  async forceFetchEligibleFeedbacks(): Promise<void> {
+    if (this.instance.forceFetchEligibleFeedbacks) {
+      return this.instance.forceFetchEligibleFeedbacks();
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * Capture page scroll event
+   */
+  capturePageScrollEvent(scrollPercent: string): void {
+    if (this.instance.capturePageScrollEvent) {
+      this.instance.capturePageScrollEvent(scrollPercent);
+    } else {
+      this.instance._i.push(["capturePageScrollEvent", scrollPercent]);
+    }
+  }
+
+  /**
+   * Subscribe to form events
+   */
+  on<T extends FormEventType>(
+    eventType: T,
+    callback: (payload: FormEventPayload[T]) => void
+  ): () => void {
+    if (this.instance.on) {
+      return this.instance.on(eventType, callback);
+    }
+    // Fallback to queue
+    const subscription = { eventType, callback };
+    this.instance._eventSubscriptions = this.instance._eventSubscriptions || [];
+    this.instance._eventSubscriptions.push(subscription);
+    return () => {
+      const index = this.instance._eventSubscriptions?.indexOf(subscription);
+      if (index !== undefined && index > -1) {
+        this.instance._eventSubscriptions?.splice(index, 1);
+      }
+    };
+  }
+
+  /**
+   * Get the internal instance (for advanced usage)
+   */
+  getInstance(): EncatchGlobal {
+    return this.instance;
+  }
+}
+
+// Export a default instance for convenience (SSR-safe)
+export const encatch = typeof window !== "undefined" ? new Encatch() : (null as any);
+
+// Export types
+export type { EncatchConfig, OnFormEventHandler, FormEventBuilder } from "./@types/encatch-type";
+
+// Encatch class is already exported above with "export class Encatch"
+