@prosdevlab/experience-sdk-plugins 0.2.0 → 0.3.0

package/src/modal/types.ts

@@ -0,0 +1,114 @@
+import type { PluginFunction } from '@lytics/sdk-kit';
+import type { ExperienceButton } from '../types';
+
+export interface ModalConfig {
+  modal?: {
+    /** Allow dismissal via close button (default: true) */
+    dismissable?: boolean;
+    /** Allow dismissal via backdrop click (default: true) */
+    backdropDismiss?: boolean;
+    /** Z-index for modal (default: 10001) */
+    zIndex?: number;
+    /** Modal size (default: 'md') */
+    size?: 'sm' | 'md' | 'lg' | 'fullscreen' | 'auto';
+    /** Auto-fullscreen on mobile screens <640px (default: true for 'lg', false for others) */
+    mobileFullscreen?: boolean;
+    /** Modal position (default: 'center') */
+    position?: 'center' | 'bottom';
+    /** Animation type (default: 'fade') */
+    animation?: 'fade' | 'slide-up' | 'none';
+    /** Animation duration in ms (default: 200) */
+    animationDuration?: number;
+  };
+}
+
+export interface ModalContent {
+  /** Optional hero image at top of modal */
+  image?: {
+    /** Image source URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Max height in pixels (default: 300, 200 on mobile) */
+    maxHeight?: number;
+  };
+  /** Modal title */
+  title?: string;
+  /** Modal message (supports HTML via sanitizer) */
+  message: string;
+  /** Array of action buttons */
+  buttons?: ExperienceButton[];
+  /** Optional form configuration */
+  form?: FormConfig;
+  /** Custom CSS class */
+  className?: string;
+  /** Inline styles */
+  style?: Record<string, string>;
+}
+
+export interface FormConfig {
+  /** Array of form fields */
+  fields: FormField[];
+  /** Submit button configuration */
+  submitButton: ExperienceButton;
+  /** Success state after submission */
+  successState?: FormState;
+  /** Error state on submission failure */
+  errorState?: FormState;
+  /** Custom validation function (optional) */
+  validate?: (data: Record<string, string>) => ValidationResult;
+}
+
+export interface FormField {
+  /** Field name (used in form data) */
+  name: string;
+  /** Field type */
+  type: 'email' | 'text' | 'textarea' | 'tel' | 'url' | 'number';
+  /** Label text (optional) */
+  label?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Required field (default: false) */
+  required?: boolean;
+  /** Custom validation pattern (regex) */
+  pattern?: string;
+  /** Error message for validation failure */
+  errorMessage?: string;
+  /** Custom CSS class */
+  className?: string;
+  /** Inline styles */
+  style?: Record<string, string>;
+}
+
+export interface FormState {
+  /** Title to show in success/error state */
+  title?: string;
+  /** Message to show */
+  message: string;
+  /** Optional buttons (e.g., "Close", "Try Again") */
+  buttons?: ExperienceButton[];
+}
+
+export interface ValidationResult {
+  /** Whether validation passed */
+  valid: boolean;
+  /** Validation errors by field name */
+  errors?: Record<string, string>;
+}
+
+export interface ModalPlugin {
+  /** Show a modal experience */
+  show(experience: any): void;
+  /** Remove a specific modal */
+  remove(experienceId: string): void;
+  /** Check if a modal is showing */
+  isShowing(experienceId?: string): boolean;
+  /** Show form success or error state */
+  showFormState(experienceId: string, state: 'success' | 'error'): void;
+  /** Reset form to initial state */
+  resetForm(experienceId: string): void;
+  /** Get current form data */
+  getFormData(experienceId: string): Record<string, string> | null;
+}
+
+export type { PluginFunction };

package/src/scroll-depth/scroll-depth.test.ts

@@ -501,6 +501,41 @@ describe('scrollDepthPlugin', () => {
     });
   });
 
+  describe('reset()', () => {
+    it('should clear triggered thresholds and max scroll', async () => {
+      const emitSpy = vi.fn();
+
+      await initPlugin({ thresholds: [25, 50, 75] });
+      sdk.on('trigger:scrollDepth', emitSpy);
+      vi.advanceTimersByTime(0);
+
+      // Scroll to 50%
+      simulateScroll(1000, 3000, 1000);
+      vi.advanceTimersByTime(200);
+
+      // Should have triggered 25% and 50%
+      expect(sdk.scrollDepth.getThresholdsCrossed()).toEqual([25, 50]);
+      expect(sdk.scrollDepth.getMaxPercent()).toBeGreaterThan(0);
+      expect(emitSpy).toHaveBeenCalledTimes(2);
+
+      // Reset
+      sdk.scrollDepth.reset();
+
+      // Should clear state
+      expect(sdk.scrollDepth.getThresholdsCrossed()).toEqual([]);
+      expect(sdk.scrollDepth.getMaxPercent()).toBe(0);
+
+      // Scroll again to 50% should trigger again
+      emitSpy.mockClear();
+      simulateScroll(1000, 3000, 1000);
+      vi.advanceTimersByTime(200);
+
+      // Should trigger both 25% and 50% again
+      expect(emitSpy).toHaveBeenCalledTimes(2);
+      expect(sdk.scrollDepth.getThresholdsCrossed()).toEqual([25, 50]);
+    });
+  });
+
   describe('Pathfora compatibility tests', () => {
     it('should match Pathfora test: scrollPercentageToDisplay 50', async () => {
       const emitSpy = vi.fn();

package/src/scroll-depth/scroll-depth.ts

@@ -329,10 +329,9 @@ export const scrollDepthPlugin: PluginFunction = (plugin, instance, config) => {
   }
 
   // Setup destroy handler
-  const destroyHandler = () => {
+  instance.on('sdk:destroy', () => {
     cleanup();
-  };
-  instance.on('destroy', destroyHandler);
+  });
 
   // Expose API
   plugin.expose({
@@ -395,6 +394,5 @@ export const scrollDepthPlugin: PluginFunction = (plugin, instance, config) => {
   // Return cleanup function
   return () => {
     cleanup();
-    instance.off('destroy', destroyHandler);
   };
 };

package/src/time-delay/time-delay.test.ts

@@ -380,7 +380,7 @@ describe('Time Delay Plugin', () => {
       vi.advanceTimersByTime(2000);
 
       // Destroy SDK
-      sdk.emit('destroy');
+      await sdk.destroy();
 
       // Advance past trigger time
       vi.advanceTimersByTime(5000);
@@ -396,7 +396,7 @@ describe('Time Delay Plugin', () => {
       const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
 
       // Destroy SDK
-      sdk.emit('destroy');
+      await sdk.destroy();
 
       // Should have removed visibility listener
       expect(removeEventListenerSpy).toHaveBeenCalledWith('visibilitychange', expect.any(Function));

package/src/time-delay/time-delay.ts

@@ -290,8 +290,7 @@ export const timeDelayPlugin: PluginFunction = (plugin, instance, config) => {
   initialize();
 
   // Cleanup on instance destroy
-  const destroyHandler = () => {
+  instance.on('sdk:destroy', () => {
     cleanup();
-  };
-  instance.on('destroy', destroyHandler);
+  });
 };

package/src/types.ts

@@ -3,10 +3,25 @@
  * These types are re-exported by core for user convenience
  */
 
+import type { InlineContent as _InlineContent } from './inline/types';
+// Import modal and inline content types from their plugins
+import type { ModalContent as _ModalContent } from './modal/types';
+export type ModalContent = _ModalContent;
+export type InlineContent = _InlineContent;
+
 /**
- * Experience content - varies by type
+ * Experience button configuration (used across all experience types)
  */
-export type ExperienceContent = BannerContent | ModalContent | TooltipContent;
+export interface ExperienceButton {
+  text: string;
+  action?: string;
+  url?: string;
+  variant?: 'primary' | 'secondary' | 'link';
+  dismiss?: boolean;
+  metadata?: Record<string, any>;
+  className?: string;
+  style?: Record<string, string>;
+}
 
 /**
  * Banner content configuration
@@ -14,31 +29,13 @@ export type ExperienceContent = BannerContent | ModalContent | TooltipContent;
 export interface BannerContent {
   title?: string;
   message: string;
-  buttons?: Array<{
-    text: string;
-    action?: string;
-    url?: string;
-    variant?: 'primary' | 'secondary' | 'link';
-    metadata?: Record<string, any>;
-    className?: string;
-    style?: Record<string, string>;
-  }>;
+  buttons?: ExperienceButton[];
   dismissable?: boolean;
   position?: 'top' | 'bottom';
   className?: string;
   style?: Record<string, string>;
 }
 
-/**
- * Modal content configuration
- */
-export interface ModalContent {
-  title: string;
-  message: string;
-  confirmText?: string;
-  cancelText?: string;
-}
-
 /**
  * Tooltip content configuration
  */
@@ -48,22 +45,9 @@ export interface TooltipContent {
 }
 
 /**
- * Modal content configuration
- */
-export interface ModalContent {
-  title: string;
-  message: string;
-  confirmText?: string;
-  cancelText?: string;
-}
-
-/**
- * Tooltip content configuration
+ * Experience content - varies by type
  */
-export interface TooltipContent {
-  message: string;
-  position?: 'top' | 'bottom' | 'left' | 'right';
-}
+export type ExperienceContent = BannerContent | ModalContent | InlineContent | TooltipContent;
 
 /**
  * Experience definition

package/src/utils/sanitize.ts

@@ -11,7 +11,7 @@
  * Allowed HTML tags for sanitization
  * Only safe formatting tags are permitted
  */
-const ALLOWED_TAGS = ['strong', 'em', 'a', 'br', 'span', 'b', 'i', 'p'] as const;
+const ALLOWED_TAGS = ['strong', 'em', 'a', 'br', 'span', 'b', 'i', 'p', 'div', 'ul', 'li'] as const;
 
 /**
  * Allowed attributes per tag
@@ -20,6 +20,9 @@ const ALLOWED_ATTRIBUTES: Record<string, string[]> = {
   a: ['href', 'class', 'style', 'title'],
   span: ['class', 'style'],
   p: ['class', 'style'],
+  div: ['class', 'style'],
+  ul: ['class', 'style'],
+  li: ['class', 'style'],
   // Other tags have no attributes allowed
 };