@ordersune/crm-web-sdk 1.0.7 → 1.0.8

package/dist/types/index.d.ts

@@ -31,8 +31,54 @@ export interface DeviceDetails {
     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

@@ -19,6 +19,7 @@ export declare class WebSDK {
     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;
@@ -41,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

@@ -102,6 +102,9 @@ class WebSDK {
         };
         this.queueEvent(payload);
     }
+    setToken(token) {
+        this.deviceDetails.pushToken = token;
+    }
     trackCustomAttribute(attributeName, attributeValue) {
         if (!attributeName || typeof attributeName !== "string") {
             throw new Error("Attribute name is required and must be a string");
@@ -215,7 +218,7 @@ class WebSDK {
             language: navigator.language,
             screenResolution: `${window.screen.width}x${window.screen.height}`,
             userAgent: navigator.userAgent,
-            platform: navigator.platform,
+            platform: 'web',
         };
     }
     async getBrowserInfo() {
@@ -395,5 +398,215 @@ class WebSDK {
             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.7",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {