@ordersune/crm-web-sdk 1.0.6 → 1.0.8

package/dist/types/index.d.ts

@@ -1,7 +1,5 @@
 export interface UserProfile {
     id: string;
-    user_type: string;
-    traits: Record<string, any>;
 }
 export interface EventOptions {
     timestamp?: string;
@@ -11,4 +9,76 @@ export interface SDKConfig {
     apiKey: string;
     endpoint: string;
     debug?: boolean;
+    batchSize?: number;
+    batchInterval?: number;
+}
+export interface PurchasePayload {
+    externalId: string;
+    itemId: string;
+    itemName: string;
+    unitPrice: number;
+    quantity: number;
+    source: string;
+    channel: string;
+    itemCategory?: string;
+}
+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;
+    textColor: string;
+    androidOnClickValue?: string;
+    androidOnClickAction?: string;
+    iOSOnClickValue?: string;
+    iOSOnClickAction?: string;
+    type?: string;
+    [key: string]: any;
+}
+export interface ModalConfig {
+    button1: ButtonProperties;
+    button2: ButtonProperties;
+    dismissMessageAutomatically: boolean;
+    dismissMessageInSeconds: string;
+    headerColor: string;
+    messageColor: string;
+    closeColor: string;
+}
+export interface MediaConfig {
+    inAppImage: string;
+}
+export interface InAppMessageData {
+    header: string;
+    message: string;
+    modal: ModalConfig;
+    mediaConfig: MediaConfig;
+}
+export interface ShowInAppMessageOptions {
+    context?: any;
+    title: string;
+    body: string;
+    primaryButtonText: string;
+    secondaryButtonText?: string;
+    imageUrl: string;
+    onClose?: () => void;
+    buttonPropertiesPrimary: ButtonProperties;
+    buttonPropertiesSecondary: ButtonProperties;
+    dismissMessageAutomatically: boolean;
+    dismissMessageInSeconds: string;
+    headerColor: string;
+    messageColor: string;
+    closeColor: string;
 }

package/dist/web-sdk.d.ts

@@ -10,18 +10,31 @@ export declare class WebSDK {
     private deviceDetails?;
     private currentUser?;
     private eventQueue;
+    private purchaseBatch;
+    private attributeQueue;
     private isProcessingQueue;
-    private customAttributes;
+    private batchProcessingInterval?;
     constructor(config: SDKConfig);
-    identify(userId: string, traits?: Record<string, any>): void;
+    private initialize;
+    identify(userId: string): void;
+    clearUserData(): void;
     trackEvent(eventName: string, properties?: Record<string, any>, options?: EventOptions): void;
+    setToken(token: string): void;
     trackCustomAttribute(attributeName: string, attributeValue: any): void;
+    logProductPurchase(orderId: string, itemId: string, itemName: string, unitPrice: number, quantity: number, source: string, channel: string, itemCategory?: string): void;
     getUserProfile(): UserProfile | undefined;
-    private initialize;
+    forceSend(): Promise<void>;
+    dispose(): void;
     private getStoredDeviceId;
+    private getStoredUserProfile;
     private storeDeviceId;
+    private storeUserProfile;
+    private storeCustomAttributes;
+    private loadCustomAttributes;
     private getGuestUserId;
+    private buildPurchasePayload;
     private initializeDeviceDetails;
+    private getBrowserInfo;
     private detectDeviceType;
     private detectBrowserType;
     private detectBrowserVersion;
@@ -29,4 +42,8 @@ export declare class WebSDK {
     private queueEvent;
     private processBatch;
     private sendBatchToServer;
+    displayInAppMessage(inAppMessageData: string, context?: any): void;
+    private hexToColor;
+    private openWebUrl;
+    private showInAppMessage;
 }

package/dist/web-sdk.js

@@ -6,76 +6,232 @@ const uuid_1 = require("uuid");
 const STORAGE_PREFIX = "os.";
 const DEFAULT_BATCH_SIZE = 10;
 const DEFAULT_BATCH_INTERVAL = 10000;
-const SDK_VERSION = "1.0.6";
+const SDK_VERSION = "1.0.7";
 class WebSDK {
     constructor(config) {
-        var _a;
+        var _a, _b, _c;
         this.maxBatchSize = DEFAULT_BATCH_SIZE;
         this.batchInterval = DEFAULT_BATCH_INTERVAL;
         this.sdkVersion = SDK_VERSION;
         this.eventQueue = [];
+        this.purchaseBatch = [];
+        this.attributeQueue = {};
         this.isProcessingQueue = false;
-        this.customAttributes = {};
+        if (!config.apiKey || !config.endpoint) {
+            throw new Error("API key and endpoint are required");
+        }
         this.apiKey = config.apiKey;
         this.endpoint = config.endpoint;
         this.debug = (_a = config.debug) !== null && _a !== void 0 ? _a : false;
+        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.initialize();
+        // Initialize async
+        this.initialize().catch((error) => {
+            (0, utils_1.log)(this.debug, "Async initialization failed", error);
+        });
     }
-    identify(userId, traits = {}) {
-        var _a;
+    async initialize() {
+        try {
+            (0, utils_1.log)(this.debug, "SDK Initialized");
+            this.storeDeviceId();
+            await this.initializeDeviceDetails();
+            await this.loadCustomAttributes();
+            const storedUser = this.getStoredUserProfile();
+            if (storedUser) {
+                this.currentUser = storedUser;
+                (0, utils_1.log)(this.debug, "Loaded user profile", this.currentUser);
+            }
+            else {
+                this.identify("");
+            }
+            try {
+                const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+                this.trackCustomAttribute("timezone", timezone);
+            }
+            catch (error) {
+                (0, utils_1.log)(this.debug, "Failed to detect timezone", error);
+            }
+            this.startBatchProcessing();
+            this.trackEvent("app_started", {});
+        }
+        catch (error) {
+            (0, utils_1.log)(this.debug, "Initialization failed", error);
+            throw error;
+        }
+    }
+    identify(userId) {
+        if (typeof userId !== "string") {
+            throw new Error("User ID must be a string");
+        }
+        const storedUser = this.getStoredUserProfile();
+        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(),
-            user_type: userId ? "registered" : "guest",
-            traits: { ...(_a = this.currentUser) === null || _a === void 0 ? void 0 : _a.traits, ...traits },
         };
-        this.trackEvent("user_identified", {
-            user_id: this.currentUser.id,
-            traits,
+        this.storeUserProfile();
+    }
+    clearUserData() {
+        this.currentUser = {
+            id: this.getGuestUserId(),
+        };
+        this.attributeQueue = {};
+        this.eventQueue = [];
+        this.purchaseBatch = [];
+        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");
+        }
     }
     trackEvent(eventName, properties = {}, options = {}) {
+        if (!eventName || typeof eventName !== "string") {
+            throw new Error("Event name is required and must be a string");
+        }
         const payload = {
             deviceId: this.deviceId,
             eventName,
             timestamp: options.timestamp || Date.now(),
             requestId: options.requestId || (0, uuid_1.v4)(),
-            properties,
+            properties: properties,
         };
         this.queueEvent(payload);
     }
+    setToken(token) {
+        this.deviceDetails.pushToken = token;
+    }
     trackCustomAttribute(attributeName, attributeValue) {
-        this.customAttributes[attributeName] = attributeValue;
+        if (!attributeName || typeof attributeName !== "string") {
+            throw new Error("Attribute name is required and must be a string");
+        }
+        this.attributeQueue = {
+            ...this.attributeQueue,
+            [attributeName]: attributeValue,
+        };
+        (0, utils_1.log)(this.debug, "Custom attribute queued", attributeName, attributeValue);
+        this.storeCustomAttributes();
+    }
+    logProductPurchase(orderId, itemId, itemName, unitPrice, quantity, source, channel, itemCategory) {
+        const purchasePayload = this.buildPurchasePayload({
+            externalId: orderId,
+            itemId,
+            itemName,
+            unitPrice,
+            quantity,
+            source,
+            channel,
+            itemCategory,
+        });
+        this.purchaseBatch.push(purchasePayload);
+        if (this.debug) {
+            (0, utils_1.log)(this.debug, "Purchase event queued", purchasePayload);
+        }
     }
     getUserProfile() {
         return this.currentUser;
     }
-    initialize() {
-        this.storeDeviceId();
-        this.initializeDeviceDetails();
-        this.identify("");
-        this.startBatchProcessing();
-        (0, utils_1.log)(this.debug, "SDK Initialized");
+    async forceSend() {
+        if (this.eventQueue.length > 0 ||
+            this.purchaseBatch.length > 0 ||
+            this.attributeQueue.length > 0) {
+            await this.processBatch();
+        }
+    }
+    dispose() {
+        if (this.batchProcessingInterval) {
+            clearInterval(this.batchProcessingInterval);
+        }
+        if (this.eventQueue.length > 0 ||
+            this.purchaseBatch.length > 0 ||
+            this.attributeQueue.length > 0) {
+            this.processBatch().catch((error) => {
+                (0, utils_1.log)(this.debug, "Error during disposal", error);
+            });
+        }
     }
     getStoredDeviceId() {
         return localStorage.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);
     }
+    storeUserProfile() {
+        if (this.currentUser) {
+            sessionStorage.setItem(`${STORAGE_PREFIX}${this.apiKey}.current_user`, JSON.stringify(this.currentUser));
+        }
+    }
+    storeCustomAttributes() {
+        const existingAttributes = sessionStorage.getItem(`${STORAGE_PREFIX}${this.apiKey}.custom_attributes`);
+        const existingParsed = existingAttributes
+            ? JSON.parse(existingAttributes)
+            : {};
+        const mergedAttributes = {
+            ...existingParsed,
+            ...this.attributeQueue,
+        };
+        sessionStorage.setItem(`${STORAGE_PREFIX}${this.apiKey}.custom_attributes`, JSON.stringify(mergedAttributes));
+    }
+    async loadCustomAttributes() {
+        const stored = sessionStorage.getItem(`${STORAGE_PREFIX}${this.apiKey}.custom_attributes`);
+        if (stored) {
+            this.attributeQueue = {
+                ...this.attributeQueue,
+                ...JSON.parse(stored),
+            };
+        }
+    }
     getGuestUserId() {
         return `guest_user_${this.deviceId}`;
     }
+    buildPurchasePayload({ externalId, itemId, itemName, unitPrice, quantity, source, channel, itemCategory, }) {
+        const timestamp = Date.now();
+        return {
+            external_id: externalId,
+            item_id: itemId,
+            item_name: itemName,
+            item_category: itemCategory,
+            quantity: quantity,
+            unit_price: unitPrice,
+            total_price: unitPrice * quantity,
+            source: source,
+            channel: channel,
+            purchased_at: timestamp,
+        };
+    }
     async initializeDeviceDetails() {
+        const deviceType = await this.detectDeviceType();
+        const browserInfo = await this.getBrowserInfo();
         this.deviceDetails = {
-            deviceModel: await this.detectDeviceType(),
-            browser: this.detectBrowserType(),
-            browserVersion: this.detectBrowserVersion(),
+            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() {
-        if ("userAgentData" in navigator) {
-            try {
+        try {
+            if ("userAgentData" in navigator) {
                 const data = await navigator.userAgentData.getHighEntropyValues(["platform", "mobile"]);
                 if (data.mobile) {
                     return data.platform.toLowerCase().includes("ios")
@@ -90,9 +246,9 @@ class WebSDK {
                 if (platform.includes("linux"))
                     return "linux";
             }
-            catch (error) {
-                (0, utils_1.log)(this.debug, "Client Hints API failed", error);
-            }
+        }
+        catch (error) {
+            (0, utils_1.log)(this.debug, "Client Hints API failed", error);
         }
         const userAgent = navigator.userAgent.toLowerCase();
         if (/iphone|ipad|ipod/.test(userAgent))
@@ -108,58 +264,64 @@ class WebSDK {
         return "unknown";
     }
     detectBrowserType() {
-        if ("userAgentData" in navigator) {
-            try {
+        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();
             }
-            catch (error) {
-                (0, utils_1.log)(this.debug, "Browser detection failed", error);
-            }
+            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";
         }
-        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";
     }
     detectBrowserVersion() {
-        if ("userAgentData" in navigator) {
-            try {
+        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;
             }
-            catch (error) {
-                (0, utils_1.log)(this.debug, "Browser version detection failed", error);
-            }
+            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";
         }
-        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)
+        catch (error) {
+            (0, utils_1.log)(this.debug, "Browser version detection failed", error);
             return "unknown";
-        const match = userAgent.match(pattern);
-        return match ? match[1] : "unknown";
+        }
     }
     startBatchProcessing() {
-        setInterval(() => {
-            if (this.eventQueue.length > 0) {
-                this.processBatch();
+        this.batchProcessingInterval = setInterval(() => {
+            if (this.eventQueue.length > 0 ||
+                this.purchaseBatch.length > 0 ||
+                this.attributeQueue.length > 0) {
+                this.processBatch().catch((error) => {
+                    (0, utils_1.log)(this.debug, "Batch processing failed", error);
+                });
             }
         }, this.batchInterval);
     }
@@ -167,33 +329,48 @@ class WebSDK {
         this.eventQueue.push(payload);
         (0, utils_1.log)(this.debug, "Event queued", payload);
         if (this.eventQueue.length >= this.maxBatchSize) {
-            this.processBatch();
+            this.processBatch().catch((error) => {
+                (0, utils_1.log)(this.debug, "Batch processing failed", error);
+            });
         }
     }
     async processBatch() {
         if (this.isProcessingQueue)
             return;
         this.isProcessingQueue = true;
-        const batchToSend = this.eventQueue.splice(0, this.maxBatchSize);
+        const eventsToSend = [...this.eventQueue];
+        const purchasesToSend = [...this.purchaseBatch];
+        const attributesToSend = { ...this.attributeQueue };
+        this.eventQueue = [];
+        this.purchaseBatch = [];
+        this.attributeQueue = {};
         try {
-            await this.sendBatchToServer(batchToSend);
+            await this.sendBatchToServer(eventsToSend, purchasesToSend, attributesToSend);
         }
         catch (error) {
-            this.eventQueue.unshift(...batchToSend);
+            this.eventQueue.unshift(...eventsToSend);
+            this.purchaseBatch.unshift(...purchasesToSend);
+            this.attributeQueue = { ...this.attributeQueue, ...attributesToSend };
             (0, utils_1.log)(this.debug, "Batch processing failed", error);
+            throw error;
         }
         finally {
             this.isProcessingQueue = false;
         }
     }
-    async sendBatchToServer(batch) {
+    async sendBatchToServer(events, purchases, currentAttributes) {
         var _a;
+        if (!this.deviceDetails) {
+            await this.initializeDeviceDetails();
+        }
         const payload = {
             sdkVersion: this.sdkVersion,
             deviceInfo: this.deviceDetails,
             userId: (_a = this.currentUser) === null || _a === void 0 ? void 0 : _a.id,
-            events: batch,
-            userAttributes: this.customAttributes,
+            time: Date.now(),
+            events: events,
+            purchases: purchases,
+            userAttributes: currentAttributes,
         };
         try {
             const response = await fetch(`${this.endpoint}/analytics/data`, {
@@ -207,12 +384,229 @@ class WebSDK {
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
+            if (this.debug) {
+                (0, utils_1.log)(this.debug, `Batch dispatched successfully: ${payload.events.length} events, ${payload.purchases.length} purchases, ${Object.keys(payload.userAttributes).length} attributes`);
+            }
             await response.json();
+            if (Object.keys(currentAttributes).length > 0) {
+                this.attributeQueue = {};
+                sessionStorage.removeItem(`${STORAGE_PREFIX}${this.apiKey}.custom_attributes`);
+            }
         }
         catch (error) {
-            (0, utils_1.log)(this.debug, "Failed to send batch to server", error);
+            (0, utils_1.log)(this.debug, "Failed to send payload to server", error);
             throw error;
         }
     }
+    displayInAppMessage(inAppMessageData, context) {
+        const transformedData = JSON.parse(inAppMessageData);
+        const title = transformedData.header;
+        const body = transformedData.message;
+        const buttonDataPrimary = transformedData.modal.button1;
+        const buttonDataSecondary = transformedData.modal.button2;
+        const buttonTextPrimary = buttonDataPrimary.type || "";
+        const buttonTextSecondary = buttonDataSecondary.type || "";
+        const imageUrl = transformedData.mediaConfig.inAppImage;
+        this.showInAppMessage({
+            context,
+            title,
+            body,
+            primaryButtonText: buttonTextPrimary,
+            secondaryButtonText: buttonTextSecondary,
+            imageUrl,
+            buttonPropertiesPrimary: buttonDataPrimary,
+            buttonPropertiesSecondary: buttonDataSecondary,
+            dismissMessageAutomatically: transformedData.modal.dismissMessageAutomatically,
+            dismissMessageInSeconds: transformedData.modal.dismissMessageInSeconds,
+            headerColor: transformedData.modal.headerColor,
+            messageColor: transformedData.modal.messageColor,
+            closeColor: transformedData.modal.closeColor
+        });
+    }
+    hexToColor(hexColor) {
+        hexColor = hexColor.toUpperCase().replace("#", "");
+        if (hexColor.length === 6) {
+            return `#${hexColor}`;
+        }
+        return `#${hexColor.substring(2)}`;
+    }
+    openWebUrl(url) {
+        if (url) {
+            window.open(url, '_blank');
+        }
+    }
+    showInAppMessage(options) {
+        const { title, body, primaryButtonText, secondaryButtonText, imageUrl, onClose, buttonPropertiesPrimary, buttonPropertiesSecondary, dismissMessageAutomatically, dismissMessageInSeconds, headerColor, messageColor, closeColor } = options;
+        // Create modal container
+        const modalOverlay = document.createElement('div');
+        modalOverlay.style.position = 'fixed';
+        modalOverlay.style.top = '0';
+        modalOverlay.style.left = '0';
+        modalOverlay.style.width = '100%';
+        modalOverlay.style.height = '100%';
+        modalOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+        modalOverlay.style.display = 'flex';
+        modalOverlay.style.justifyContent = 'center';
+        modalOverlay.style.alignItems = 'center';
+        modalOverlay.style.zIndex = '9999';
+        // Create modal dialog
+        const modalDialog = document.createElement('div');
+        modalDialog.style.backgroundColor = 'white';
+        modalDialog.style.borderRadius = '12px';
+        modalDialog.style.padding = '16px';
+        modalDialog.style.maxWidth = '400px';
+        modalDialog.style.width = '90%';
+        modalDialog.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+        modalDialog.style.position = 'relative';
+        // Close button
+        const closeButton = document.createElement('button');
+        closeButton.innerHTML = '×';
+        closeButton.style.position = 'absolute';
+        closeButton.style.top = '8px';
+        closeButton.style.right = '8px';
+        closeButton.style.background = 'none';
+        closeButton.style.border = 'none';
+        closeButton.style.fontSize = '20px';
+        closeButton.style.cursor = 'pointer';
+        closeButton.style.color = this.hexToColor(closeColor);
+        closeButton.onclick = () => {
+            if (onClose) {
+                onClose();
+            }
+            document.body.removeChild(modalOverlay);
+        };
+        // Create content
+        const contentContainer = document.createElement('div');
+        contentContainer.style.display = 'flex';
+        contentContainer.style.flexDirection = 'column';
+        contentContainer.style.alignItems = 'center';
+        contentContainer.style.textAlign = 'center';
+        // Image
+        if (imageUrl && imageUrl.trim() !== '') {
+            const image = document.createElement('img');
+            image.src = imageUrl;
+            image.style.width = '100px';
+            image.style.height = '100px';
+            image.style.marginBottom = '16px';
+            image.style.marginTop = '16px';
+            image.onerror = () => {
+                image.style.display = 'none';
+            };
+            contentContainer.appendChild(image);
+        }
+        // Title
+        const titleElement = document.createElement('h2');
+        titleElement.textContent = title;
+        titleElement.style.fontSize = '22px';
+        titleElement.style.fontWeight = '600';
+        titleElement.style.color = this.hexToColor(headerColor);
+        titleElement.style.margin = '8px 0';
+        contentContainer.appendChild(titleElement);
+        // Body
+        const bodyElement = document.createElement('p');
+        bodyElement.textContent = body;
+        bodyElement.style.fontSize = '14px';
+        bodyElement.style.color = this.hexToColor(messageColor);
+        bodyElement.style.fontWeight = '500';
+        bodyElement.style.margin = '8px 0 24px 0';
+        contentContainer.appendChild(bodyElement);
+        // Button handlers
+        const onPrimaryButtonPress = () => {
+            if (buttonPropertiesPrimary.webOnClickValue === "redirect_to_web_url" ||
+                buttonPropertiesPrimary.webOnClickValue === "deeplink_into_app") {
+                this.openWebUrl(buttonPropertiesPrimary.webOnClickAction || '');
+            }
+        };
+        const onSecondaryButtonPress = () => {
+            if (buttonPropertiesSecondary.webOnClickValue === "redirect_to_web_url" ||
+                buttonPropertiesSecondary.webOnClickValue === "deeplink_into_app") {
+                this.openWebUrl(buttonPropertiesSecondary.webOnClickAction || '');
+            }
+        };
+        // Create buttons
+        const buttonsContainer = document.createElement('div');
+        buttonsContainer.style.display = 'flex';
+        buttonsContainer.style.justifyContent = 'center';
+        buttonsContainer.style.width = '100%';
+        buttonsContainer.style.gap = '16px';
+        if (secondaryButtonText && secondaryButtonText.trim() !== '') {
+            // Primary button
+            const primaryButton = document.createElement('button');
+            primaryButton.textContent = primaryButtonText;
+            primaryButton.style.flex = '1';
+            primaryButton.style.maxWidth = '140px';
+            primaryButton.style.padding = '12px';
+            primaryButton.style.backgroundColor = this.hexToColor(buttonPropertiesPrimary.backgroundColor);
+            primaryButton.style.color = this.hexToColor(buttonPropertiesPrimary.textColor);
+            primaryButton.style.border = `2px solid ${this.hexToColor(buttonPropertiesPrimary.borderColor)}`;
+            primaryButton.style.borderRadius = '8px';
+            primaryButton.style.fontSize = '16px';
+            primaryButton.style.fontWeight = '600';
+            primaryButton.style.cursor = 'pointer';
+            primaryButton.onclick = () => {
+                document.body.removeChild(modalOverlay);
+                onPrimaryButtonPress();
+            };
+            buttonsContainer.appendChild(primaryButton);
+            // Secondary button
+            const secondaryButton = document.createElement('button');
+            secondaryButton.textContent = secondaryButtonText;
+            secondaryButton.style.flex = '1';
+            secondaryButton.style.maxWidth = '140px';
+            secondaryButton.style.padding = '12px';
+            secondaryButton.style.backgroundColor = this.hexToColor(buttonPropertiesSecondary.backgroundColor);
+            secondaryButton.style.color = this.hexToColor(buttonPropertiesSecondary.textColor);
+            secondaryButton.style.border = `2px solid ${this.hexToColor(buttonPropertiesSecondary.borderColor)}`;
+            secondaryButton.style.borderRadius = '8px';
+            secondaryButton.style.fontSize = '16px';
+            secondaryButton.style.fontWeight = '600';
+            secondaryButton.style.cursor = 'pointer';
+            secondaryButton.onclick = () => {
+                document.body.removeChild(modalOverlay);
+                onSecondaryButtonPress();
+            };
+            buttonsContainer.appendChild(secondaryButton);
+        }
+        else {
+            // Single button
+            const primaryButton = document.createElement('button');
+            primaryButton.textContent = primaryButtonText;
+            primaryButton.style.width = '100%';
+            primaryButton.style.padding = '12px';
+            primaryButton.style.backgroundColor = this.hexToColor(buttonPropertiesPrimary.backgroundColor);
+            primaryButton.style.color = this.hexToColor(buttonPropertiesPrimary.textColor);
+            primaryButton.style.border = `2px solid ${this.hexToColor(buttonPropertiesPrimary.borderColor)}`;
+            primaryButton.style.borderRadius = '8px';
+            primaryButton.style.fontSize = '16px';
+            primaryButton.style.fontWeight = '600';
+            primaryButton.style.cursor = 'pointer';
+            primaryButton.onclick = () => {
+                document.body.removeChild(modalOverlay);
+                onPrimaryButtonPress();
+            };
+            buttonsContainer.appendChild(primaryButton);
+        }
+        // Add all elements to the modal
+        modalDialog.appendChild(closeButton);
+        modalDialog.appendChild(contentContainer);
+        contentContainer.appendChild(buttonsContainer);
+        modalOverlay.appendChild(modalDialog);
+        // Add to document
+        document.body.appendChild(modalOverlay);
+        // Auto dismiss if enabled
+        if (dismissMessageAutomatically) {
+            setTimeout(() => {
+                if (document.body.contains(modalOverlay)) {
+                    document.body.removeChild(modalOverlay);
+                }
+            }, parseInt(dismissMessageInSeconds) * 1000);
+        }
+        // Add click event to close when clicking outside
+        modalOverlay.addEventListener('click', (event) => {
+            if (event.target === modalOverlay) {
+                document.body.removeChild(modalOverlay);
+            }
+        });
+    }
 }
 exports.WebSDK = WebSDK;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordersune/crm-web-sdk",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {