@ordersune/crm-web-sdk 1.0.11 → 1.0.13

package/README.md

@@ -1,131 +1,249 @@
-# Order Sune CRM TypeScript SDK
-
-A powerful TypeScript SDK for integrating the Order Sune CRM solution into your web applications. Enables seamless user tracking, event monitoring, and customer data management.
-
-## Installation
-
-```bash
-npm install @ordersune/crm-web-sdk
-# or
-yarn add @ordersune/crm-web-sdk
-```
-
-## Usage
-
-### Initialize the SDK
-
-```typescript
-import { WebSDK } from '@ordersune/crm-web-sdk';
-
-const crm = new WebSDK({
-  apiKey: 'your-api-key',
-  endpoint: 'https://api.example.com',
-  debug: false 
-});
-```
-
-### User Identification
-
-Identify and track users with custom traits:
-
-```typescript
-// Identify a registered user
-crm.identify('user123', {
-  email: 'user@example.com',
-  name: 'John Doe',
-  subscription: 'premium'
-});
-
-// Get current user profile
-const userProfile = crm.getUserProfile();
-```
-
-### Event Tracking
-
-Track user events with custom properties:
-
-```typescript
-// Basic event tracking
-crm.trackEvent('page_view');
-
-// Event with properties
-crm.trackEvent('purchase_completed', {
-  productId: 'prod_123',
-  amount: 99.99,
-  currency: 'USD'
-});
-
-// Event with custom options
-crm.trackEvent('custom_event', 
-  { key: 'value' },
-  { 
-    timestamp: '2024-12-28T10:00:00Z',
-    requestId: 'req_abc123'
-  }
-);
-```
-
-### Custom Attributes
-
-Track persistent user attributes:
-
-```typescript
-crm.trackCustomAttribute('preference_theme', 'dark');
-crm.trackCustomAttribute('notification_enabled', true);
-```
-
-## Types
-
-### SDKConfig
-
-```typescript
-interface SDKConfig {
-  apiKey: string;      // Your API key
-  endpoint: string;    // API endpoint URL
-  debug?: boolean;     // Enable debug logging
-}
-```
-
-### UserProfile
-
-```typescript
-interface UserProfile {
-  id: string;                    // User identifier
-  user_type: string;             // 'registered' or 'guest'
-  traits: Record<string, any>;   // Custom user traits
-}
-```
-
-### EventOptions
-
-```typescript
-interface EventOptions {
-  timestamp?: string;    // Custom event timestamp
-  requestId?: string;    // Custom request identifier
-}
-```
-
-## Features
-
-- Automatic session tracking
-- Device and browser detection
-- Batch event processing
-- Offline event queuing
-- TypeScript support with full type definitions
-- Debug mode for development
-
-## Requirements
-
-- TypeScript 5.0+
-- Modern browser environment with localStorage support
-- Stable internet connection for event sending
-
-## License
-
-MIT License
-
-For detailed API documentation and examples, visit our [documentation site](https://docs.ordersune.com/crm).
-
----
-
-Need help? [Contact Support](mailto:support@ordersune.com)
+# Order Sune CRM TypeScript SDK
+
+A comprehensive TypeScript SDK for integrating the Order Sune CRM solution into your web applications. Enables seamless user tracking, event monitoring, purchase analytics, in-app messaging, and customer data management.
+
+## Installation
+
+```bash
+npm install @ordersune/crm-web-sdk
+# or
+yarn add @ordersune/crm-web-sdk
+```
+
+## Quick Start
+
+### Initialize the SDK
+
+```typescript
+import { WebSDK } from '@ordersune/crm-web-sdk';
+
+const crm = new WebSDK({
+  apiKey: 'your-api-key',
+  endpoint: 'https://api.example.com',
+  debug: false,
+  batchSize: 10,
+  batchInterval: 10000
+});
+```
+
+## Core Features
+
+### User Management
+
+#### User Identification
+Track both registered and guest users:
+
+```typescript
+// Identify a registered user
+crm.identify('user123');
+
+// Get current user profile
+const userProfile = crm.getUserProfile();
+
+// Clear user data and generate new device ID
+crm.clearUserData();
+```
+
+### Event Tracking
+
+#### Basic Event Tracking
+```typescript
+// Simple event
+crm.trackEvent('page_view');
+
+// Event with properties
+crm.trackEvent('purchase_completed', {
+  productId: 'prod_123',
+  amount: 99.99,
+  currency: 'USD'
+});
+
+// Event with custom options
+crm.trackEvent('custom_event', 
+  { key: 'value' },
+  { 
+    timestamp: '2024-12-28T10:00:00Z',
+    requestId: 'req_abc123'
+  }
+);
+```
+
+#### Purchase Tracking
+Track detailed purchase events:
+
+```typescript
+crm.logProductPurchase(
+  'order_123',        // orderId
+  'item_456',         // itemId
+  'Premium Widget',   // itemName
+  29.99,              // unitPrice
+  2,                  // quantity
+  'web',              // source
+  'direct',           // channel
+  'electronics'       // itemCategory (optional)
+);
+```
+
+### Custom Attributes
+
+Track persistent user attributes that are sent with every batch:
+
+```typescript
+crm.trackCustomAttribute('preference_theme', 'dark');
+crm.trackCustomAttribute('notification_enabled', true);
+crm.trackCustomAttribute('user_tier', 'premium');
+```
+
+### Push Notifications
+
+#### Token Management
+```typescript
+// Set push notification token
+crm.setToken('your-push-token');
+
+// Log push notification clicks
+crm.logClick('campaign_123');
+```
+
+### In-App Messaging
+
+Display rich in-app messages with customizable styling:
+
+```typescript
+const messageData = JSON.stringify({
+  header: "Welcome!",
+  message: "Check out our new features",
+  modal: {
+    button1: {
+      type: "Continue",
+      backgroundColor: "#007AFF",
+      textColor: "#FFFFFF",
+      borderColor: "#007AFF",
+      webOnClickValue: "redirect_to_web_url",
+      webOnClickAction: "https://example.com"
+    },
+    button2: {
+      type: "Skip",
+      backgroundColor: "#F2F2F2",
+      textColor: "#000000",
+      borderColor: "#CCCCCC"
+    },
+    dismissMessageAutomatically: true,
+    dismissMessageInSeconds: "10",
+    headerColor: "#000000",
+    messageColor: "#666666",
+    closeColor: "#999999"
+  },
+  mediaConfig: {
+    inAppImage: "https://example.com/image.png"
+  }
+});
+
+crm.displayInAppMessage(messageData, 'campaign_456');
+```
+
+### Batch Processing
+
+#### Manual Control
+```typescript
+// Force send all queued events immediately
+await crm.forceSend();
+
+// Clean up resources
+crm.dispose();
+```
+
+## Configuration Options
+
+### SDKConfig
+
+```typescript
+interface SDKConfig {
+  apiKey: string;           // Your API key (required)
+  endpoint: string;         // API endpoint URL (required)
+  debug?: boolean;          // Enable debug logging
+  batchSize?: number;       // Events per batch (default: 10)
+  batchInterval?: number;   // Batch interval in ms (default: 10000)
+}
+```
+
+## Data Types
+
+### UserProfile
+
+```typescript
+interface UserProfile {
+  id: string;              // User identifier
+  guestUserId?: string;    // Guest user identifier
+}
+```
+
+### EventOptions
+
+```typescript
+interface EventOptions {
+  timestamp?: string;      // Custom event timestamp
+  requestId?: string;      // Custom request identifier
+}
+```
+
+### PurchasePayload
+
+```typescript
+interface PurchasePayload {
+  externalId: string;      // Order ID
+  itemId: string;          // Product/item ID
+  itemName: string;        // Product name
+  unitPrice: number;       // Price per unit
+  quantity: number;        // Number of items
+  source: string;          // Purchase source
+  channel: string;         // Purchase channel
+  itemCategory?: string;   // Product category
+}
+```
+
+## Key Features
+
+### Automatic Functionality
+- **Session Management**: Automatic session tracking with device ID generation
+- **Guest User Handling**: Seamless guest-to-registered user transition
+- **Batch Processing**: Efficient event batching with configurable size and interval
+- **Offline Support**: Event queuing when offline with automatic retry
+- **Device Detection**: Automatic platform and device information collection
+- **Timezone Detection**: Automatic timezone detection and tracking
+
+### Performance Optimizations
+- **Event Queuing**: Intelligent batching to reduce network requests
+- **Session Storage**: Persistent storage for user data and custom attributes
+- **Error Handling**: Robust error handling with automatic retry mechanisms
+- **Memory Management**: Efficient cleanup and disposal methods
+
+### Developer Experience
+- **TypeScript Support**: Full type definitions included
+- **Debug Mode**: Comprehensive logging for development
+- **Flexible Configuration**: Customizable batch sizes and intervals
+- **Modern API**: Promise-based async operations
+
+## Requirements
+
+- **TypeScript**: 5.0+
+- **Browser**: Modern browsers with sessionStorage support
+- **Network**: Internet connection for event transmission
+- **Dependencies**: UUID library (automatically installed)
+
+## Browser Compatibility
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## License
+
+MIT License
+
+## Support & Documentation
+
+- [API Documentation](https://docs.ordersune.com/crm)
+- [Support Portal](mailto:support@ordersune.com)
+- [GitHub Issues](https://github.com/ordersune/crm-web-sdk/issues)

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export interface UserProfile {
     id: string;
+    guestUserId?: string;
 }
 export interface EventOptions {
     timestamp?: string;
@@ -24,19 +25,9 @@ export interface PurchasePayload {
 }
 export interface DeviceDetails {
     deviceId: string;
-    deviceModel: string;
-    browser: string;
-    browserVersion: string;
-    language: string;
-    screenResolution: string;
-    userAgent: string;
     platform: string;
     pushToken?: string;
 }
-export interface BrowserInfo {
-    browserType: string;
-    browserVersion: string;
-}
 export interface ButtonProperties {
     backgroundColor: string;
     borderColor: string;

package/dist/web-sdk.d.ts

@@ -7,6 +7,7 @@ export declare class WebSDK {
     private readonly batchInterval;
     private readonly sdkVersion;
     private deviceId;
+    private guestUserId;
     private deviceDetails?;
     private currentUser?;
     private eventQueue;
@@ -34,10 +35,6 @@ export declare class WebSDK {
     private getGuestUserId;
     private buildPurchasePayload;
     private initializeDeviceDetails;
-    private getBrowserInfo;
-    private detectDeviceType;
-    private detectBrowserType;
-    private detectBrowserVersion;
     private startBatchProcessing;
     private queueEvent;
     private processBatch;
@@ -47,7 +44,7 @@ export declare class WebSDK {
     private openWebUrl;
     private showInAppMessage;
     private logInAppMessageClick;
-    private logPushNotificationClick;
+    logClick(campaignId: string): Promise<void>;
     private processCampaignClick;
     private buildCampaignPayload;
 }

package/dist/web-sdk.js

@@ -26,6 +26,7 @@ class WebSDK {
         this.maxBatchSize = (_b = config.batchSize) !== null && _b !== void 0 ? _b : DEFAULT_BATCH_SIZE;
         this.batchInterval = (_c = config.batchInterval) !== null && _c !== void 0 ? _c : DEFAULT_BATCH_INTERVAL;
         this.deviceId = this.getStoredDeviceId() || (0, uuid_1.v4)();
+        this.guestUserId = this.getGuestUserId();
         // Initialize async
         this.initialize().catch((error) => {
             (0, utils_1.log)(this.debug, "Async initialization failed", error);
@@ -68,25 +69,38 @@ class WebSDK {
         if ((storedUser === null || storedUser === void 0 ? void 0 : storedUser.id) === userId)
             return;
         (0, utils_1.log)(this.debug, "Identifying user", userId);
-        this.currentUser = {
-            id: userId || this.getGuestUserId(),
-        };
+        // If userId is empty or matches guest pattern, use guest user
+        if (!userId) {
+            this.currentUser = {
+                id: this.guestUserId,
+                guestUserId: this.guestUserId
+            };
+        }
+        else {
+            // Real user identification - include both userId and guestUserId
+            this.currentUser = {
+                id: userId,
+                guestUserId: this.guestUserId
+            };
+        }
         this.storeUserProfile();
     }
     clearUserData() {
+        // Generate new device ID
+        this.deviceId = (0, uuid_1.v4)();
+        this.guestUserId = this.getGuestUserId();
         this.currentUser = {
-            id: this.getGuestUserId(),
+            id: this.guestUserId,
+            guestUserId: this.guestUserId
         };
         this.attributeQueue = {};
         this.eventQueue = [];
         this.purchaseBatch = [];
+        this.storeDeviceId();
         sessionStorage.setItem(`${STORAGE_PREFIX}${this.apiKey}.current_user`, JSON.stringify(this.currentUser));
         sessionStorage.removeItem(`${STORAGE_PREFIX}${this.apiKey}.custom_attributes`);
-        this.trackEvent("user_logged_out", {
-            device_id: this.deviceId,
-        });
         if (this.debug) {
-            (0, utils_1.log)(this.debug, "User data cleared");
+            (0, utils_1.log)(this.debug, "User data cleared, new device ID generated");
         }
     }
     trackEvent(eventName, properties = {}, options = {}) {
@@ -103,7 +117,12 @@ class WebSDK {
         this.queueEvent(payload);
     }
     setToken(token) {
-        this.deviceDetails.pushToken = token;
+        if (this.deviceDetails) {
+            this.deviceDetails = {
+                ...this.deviceDetails,
+                pushToken: token,
+            };
+        }
     }
     trackCustomAttribute(attributeName, attributeValue) {
         if (!attributeName || typeof attributeName !== "string") {
@@ -155,14 +174,14 @@ class WebSDK {
         }
     }
     getStoredDeviceId() {
-        return localStorage.getItem(`${STORAGE_PREFIX}${this.apiKey}.device_id`);
+        return sessionStorage.getItem(`${STORAGE_PREFIX}${this.apiKey}.device_id`);
     }
     getStoredUserProfile() {
         const storedUser = sessionStorage.getItem(`${STORAGE_PREFIX}${this.apiKey}.current_user`);
         return storedUser ? JSON.parse(storedUser) : null;
     }
     storeDeviceId() {
-        localStorage.setItem(`${STORAGE_PREFIX}${this.apiKey}.device_id`, this.deviceId);
+        sessionStorage.setItem(`${STORAGE_PREFIX}${this.apiKey}.device_id`, this.deviceId);
     }
     storeUserProfile() {
         if (this.currentUser) {
@@ -208,112 +227,11 @@ class WebSDK {
         };
     }
     async initializeDeviceDetails() {
-        const deviceType = await this.detectDeviceType();
-        const browserInfo = await this.getBrowserInfo();
         this.deviceDetails = {
             deviceId: this.deviceId,
-            deviceModel: deviceType,
-            browser: browserInfo.browserType,
-            browserVersion: browserInfo.browserVersion,
-            language: navigator.language,
-            screenResolution: `${window.screen.width}x${window.screen.height}`,
-            userAgent: navigator.userAgent,
             platform: 'web',
         };
     }
-    async getBrowserInfo() {
-        const browserType = this.detectBrowserType();
-        const browserVersion = this.detectBrowserVersion();
-        return {
-            browserType,
-            browserVersion,
-        };
-    }
-    async detectDeviceType() {
-        try {
-            if ("userAgentData" in navigator) {
-                const data = await navigator.userAgentData.getHighEntropyValues(["platform", "mobile"]);
-                if (data.mobile) {
-                    return data.platform.toLowerCase().includes("ios")
-                        ? "ios"
-                        : "android";
-                }
-                const platform = data.platform.toLowerCase();
-                if (platform.includes("mac"))
-                    return "mac";
-                if (platform.includes("win"))
-                    return "windows";
-                if (platform.includes("linux"))
-                    return "linux";
-            }
-        }
-        catch (error) {
-            (0, utils_1.log)(this.debug, "Client Hints API failed", error);
-        }
-        const userAgent = navigator.userAgent.toLowerCase();
-        if (/iphone|ipad|ipod/.test(userAgent))
-            return "ios";
-        if (/android/.test(userAgent))
-            return "android";
-        if (/macintosh|mac os x/.test(userAgent))
-            return "mac";
-        if (/windows|win32|win64/.test(userAgent))
-            return "windows";
-        if (/linux/.test(userAgent))
-            return "linux";
-        return "unknown";
-    }
-    detectBrowserType() {
-        try {
-            if ("userAgentData" in navigator) {
-                const brands = navigator.userAgentData.brands;
-                const brand = brands.find((b) => !["Chrome HTML", "Chromium", "Not A(Brand"].includes(b.brand));
-                if (brand)
-                    return brand.brand.toLowerCase();
-            }
-            const userAgent = navigator.userAgent.toLowerCase();
-            if (/edg\//.test(userAgent))
-                return "edge";
-            if (/chrome/.test(userAgent) && !/edg\//.test(userAgent))
-                return "chrome";
-            if (/firefox/.test(userAgent))
-                return "firefox";
-            if (/safari/.test(userAgent) && !/chrome/.test(userAgent))
-                return "safari";
-            return "unknown";
-        }
-        catch (error) {
-            (0, utils_1.log)(this.debug, "Browser detection failed", error);
-            return "unknown";
-        }
-    }
-    detectBrowserVersion() {
-        try {
-            if ("userAgentData" in navigator) {
-                const brands = navigator.userAgentData.brands;
-                const brand = brands.find((b) => !["Chrome HTML", "Chromium", "Not A(Brand"].includes(b.brand));
-                if (brand)
-                    return brand.version;
-            }
-            const userAgent = navigator.userAgent.toLowerCase();
-            const browserPatterns = {
-                chrome: /chrome\/(\d+)/,
-                firefox: /firefox\/(\d+)/,
-                safari: /version\/(\d+)/,
-                edge: /edg\/(\d+)/,
-            };
-            const browserType = this.detectBrowserType();
-            const pattern = browserPatterns[browserType];
-            if (!pattern)
-                return "unknown";
-            const match = userAgent.match(pattern);
-            return match ? match[1] : "unknown";
-        }
-        catch (error) {
-            (0, utils_1.log)(this.debug, "Browser version detection failed", error);
-            return "unknown";
-        }
-    }
     startBatchProcessing() {
         this.batchProcessingInterval = setInterval(() => {
             if (this.eventQueue.length > 0 ||
@@ -359,7 +277,7 @@ class WebSDK {
         }
     }
     async sendBatchToServer(events, purchases, currentAttributes) {
-        var _a;
+        var _a, _b;
         if (!this.deviceDetails) {
             await this.initializeDeviceDetails();
         }
@@ -367,11 +285,13 @@ class WebSDK {
             sdkVersion: this.sdkVersion,
             deviceInfo: this.deviceDetails,
             userId: (_a = this.currentUser) === null || _a === void 0 ? void 0 : _a.id,
+            guestUserId: (_b = this.currentUser) === null || _b === void 0 ? void 0 : _b.guestUserId,
             time: Date.now(),
             events: events,
             purchases: purchases,
             userAttributes: currentAttributes,
         };
+        (0, utils_1.log)(this.debug, "Sending batch to server", payload);
         try {
             const response = await fetch(`${this.endpoint}/analytics/data`, {
                 method: "POST",
@@ -618,7 +538,7 @@ class WebSDK {
         const campaignClickPayload = await this.buildCampaignPayload(campaignId, opened, clicked, dismissed);
         await this.processCampaignClick(campaignClickPayload);
     }
-    async logPushNotificationClick(campaignId) {
+    async logClick(campaignId) {
         const pushCampaignClickPayload = await this.buildCampaignPayload(campaignId, true, true);
         await this.processCampaignClick(pushCampaignClickPayload);
     }

package/package.json

@@ -1,24 +1,24 @@
-{
-  "name": "@ordersune/crm-web-sdk",
-  "version": "1.0.11",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsc",
-    "prepare": "npm run build"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "dependencies": {
-    "uuid": "^11.0.3"
-  },
-  "devDependencies": {
-    "typescript": "^5.0.0",
-    "@types/uuid": "^9.0.0"
-  }
-}
+{
+  "name": "@ordersune/crm-web-sdk",
+  "version": "1.0.13",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "uuid": "^11.0.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/uuid": "^9.0.0"
+  }
+}