Web SDK is incorrectly parsing custom action objects (#358)

* OOTB Rework: Need to be pure JS/HTML/CSS * OOTB Rework: Need to be pure JS/HTML/CSS * added id of all component * added custom changes * fixed click issue * fixed comments * handled click by elements name * updated example * fixed cursor pointer * Update EmbeddedMsgs.tsx (sample code) to use EmbeddedMessageUpdateHandler * HTTP call in retrieveEmbeddedMessages * updated test file * fixed client's comments * Fixed comments * updated click events as common * sdk and platform updated * updated test file * Web SDK is incorrectly parsing custom action objects * updated listener name and handle callback * Updated custom action object type * HTTP call in retrieveEmbeddedMessages (#355) * HTTP call in retrieveEmbeddedMessages * updated test file * sdk and platform updated * updated test file --------- Co-authored-by: hardikmashru <hardikmashru@iterable.com> * Too many Embedded-related interfaces? (#359) * Updated interfaces * removed duplicate interface from in-app * Updated IEmbeddedMessage in events * Updated EnbeddedMessagingDismiss, EnbeddedMessagingSession * Removed unused interfaces * Removed unused interfaces * Updated test.ts --------- Co-authored-by: hardikmashru <hardikmashru@iterable.com> * updated code in useeffect * pass package name and expose trackembeddedclick as standalone function (#363) --------- Co-authored-by: hardikmashru <hardikmashru@iterable.com>
Iterable · Apr 29, 2024 · 7e0f556 · 7e0f556
1 parent 666a3b4
commit 7e0f556
Show file tree

Hide file tree

Showing 14 changed files with 211 additions and 378 deletions.
diff --git a/react-example/src/components/EmbeddedForm.tsx b/react-example/src/components/EmbeddedForm.tsx
@@ -9,14 +9,15 @@ import {
 import {
   EmbeddedManager,
   trackEmbeddedMessageReceived,
-  trackEmbeddedMessageClick,
+  trackEmbeddedClick,
   trackEmbeddedMessagingDismiss,
   trackEmbeddedMessagingSession,
   EmbeddedMessageUpdateHandler
 } from '@iterable/web-sdk';
 import TextField from 'src/components/TextField';
 import { Functions } from 'src/utils/Functions';
 import { v4 as uuidv4 } from 'uuid';
+import { IEmbeddedMessage } from '@iterable/web-sdk';
 
 interface Props {
   userId: string;
@@ -76,12 +77,12 @@ export const EmbeddedForm: FC<Props> = ({
   ) => {
     e.preventDefault();
     setTrackingEvent(true);
+    let receivedMessage = {} as IEmbeddedMessage;
 
-    const receivedMessage = {
+    receivedMessage = {
       [Functions.checkEmailValidation(userId) ? 'email' : 'userId']: userId,
       messageId: messageId,
-      deviceInfo: { appPackageName: 'my-lil-site' },
-      createdAt: Date.now()
+      deviceInfo: { appPackageName: 'my-lil-site' }
     };
 
     trackEmbeddedMessageReceived(receivedMessage)
@@ -110,14 +111,12 @@ export const EmbeddedForm: FC<Props> = ({
     const clickedUrl = 'https://example.com';
     const appPackageName = 'my-lil-site';
 
-    trackEmbeddedMessageClick(
-      payload,
+    trackEmbeddedClick({
+      messageId: payload.messageId,
       buttonIdentifier,
       clickedUrl,
-      appPackageName,
-      Date.now(),
-      userId
-    )
+      appPackageName
+    })
       .then((response: any) => {
         setTrackResponse(JSON.stringify(response.data));
         setTrackingEvent(false);

diff --git a/react-example/src/views/EmbeddedMsgs.tsx b/react-example/src/views/EmbeddedMsgs.tsx
@@ -3,19 +3,21 @@ import {
   Card,
   Notification,
   Banner,
-  initialize,
   EmbeddedManager,
   IterableEmbeddedMessage,
-  EmbeddedMessageUpdateHandler
+  EmbeddedMessageUpdateHandler,
+  IterableUrlHandler,
+  IterableCustomActionHandler,
+  IterableAction,
+  IterableConfig
 } from '@iterable/web-sdk';
 import Button from 'src/components/Button';
-import TextField from 'src/components/TextField';
 import { useUser } from 'src/context/Users';
 
 interface Props {}
 
 export const EmbeddedMsgs: FC<Props> = () => {
-  const { loggedInUser, setLoggedInUser } = useUser();
+  const { loggedInUser } = useUser();
 
   const [selectedButtonIndex, setSelectedButtonIndex] = useState(0);
   const [messages, setMessages] = useState([]);
@@ -33,6 +35,27 @@ export const EmbeddedMsgs: FC<Props> = () => {
     }
   };
 
+  useEffect(() => {
+    const urlHandler: IterableUrlHandler = {
+      handleIterableURL: function (uri: string): boolean {
+        window.open(uri, '_blank');
+        return true;
+      }
+    };
+    IterableConfig.urlHandler = urlHandler;
+
+    const customActionHandler: IterableCustomActionHandler = {
+      handleIterableCustomAction: function (action: IterableAction): boolean {
+        if (action.data === 'news') {
+          // handle the custom action here
+          return true;
+        }
+        return false;
+      }
+    };
+    IterableConfig.customActionHandler = customActionHandler;
+  }, []);
+
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       changeCustomElement();

diff --git a/src/embedded/embeddedManager.ts b/src/embedded/embeddedManager.ts
@@ -5,7 +5,7 @@ import {
   IterableAction
 } from './types';
 import { IterableResponse } from '../types';
-import { IEmbeddedMessage } from '../events/embedded/types';
+import { IEmbeddedMessageData } from '../../src/events/embedded/types';
 import { EmbeddedMessagingProcessor } from './embeddedMessageProcessor';
 import { embedded_msg_endpoint, ErrorMessage } from './consts';
 import { trackEmbeddedMessageReceived } from 'src/events/embedded/events';
@@ -15,28 +15,17 @@ import {
   URL_SCHEME_ACTION,
   URL_SCHEME_OPEN,
   WEB_PLATFORM,
-  SHARED_PREF_USER_ID,
-  SHARED_PREF_EMAIL,
   SDK_VERSION
 } from '../constants';
 import { IterableEmbeddedMessage } from './embeddedMessage';
 import { EndPoints } from 'src/events/consts';
 import { trackEmbeddedMessageClickSchema } from 'src/events/embedded/events.schema';
+import { functions } from 'src/utils/functions';
 
 export class EmbeddedManager {
-  private messages: IEmbeddedMessage[] = [];
+  private messages: IEmbeddedMessageData[] = [];
   private updateListeners: EmbeddedMessageUpdateHandler[] = [];
 
-  private addEmailOrUserIdToJson(jsonParams: any): any {
-    const userId = localStorage.getItem(SHARED_PREF_USER_ID);
-    const email = localStorage.getItem(SHARED_PREF_EMAIL);
-    if (userId) {
-      jsonParams.userId = userId;
-    } else if (email) {
-      jsonParams.email = email;
-    }
-    return jsonParams;
-  }
   public async syncMessages(
     packageName: string,
     callback: () => void,
@@ -53,7 +42,7 @@ export class EmbeddedManager {
     try {
       let url = `${embedded_msg_endpoint}?`;
       let params: any = {};
-      params = this.addEmailOrUserIdToJson(params);
+      params = functions.addEmailOrUserIdToJson(params, localStorage);
       if (placementIds.length > 0) {
         params.placementIds = placementIds
           .map((id) => `&placementIds=${id}`)
@@ -97,8 +86,8 @@ export class EmbeddedManager {
     }
   }
 
-  private getEmbeddedMessages(placements: any): IEmbeddedMessage[] {
-    let messages: IEmbeddedMessage[] = [];
+  private getEmbeddedMessages(placements: any): IEmbeddedMessageData[] {
+    let messages: IEmbeddedMessageData[] = [];
     placements.forEach((placement: any) => {
       messages = [...messages, ...placement.embeddedMessages];
     });
@@ -109,11 +98,13 @@ export class EmbeddedManager {
     this.messages = _processor.processedMessagesList();
   }
 
-  public getMessages(): Array<IEmbeddedMessage> {
+  public getMessages(): Array<IEmbeddedMessageData> {
     return this.messages;
   }
 
-  public getMessagesForPlacement(placementId: number): Array<IEmbeddedMessage> {
+  public getMessagesForPlacement(
+    placementId: number
+  ): Array<IEmbeddedMessageData> {
     return this.messages.filter((message) => {
       return message.metadata.placementId === placementId;
     });
@@ -125,9 +116,9 @@ export class EmbeddedManager {
       this.notifyUpdateDelegates();
     }
     for (let i = 0; i < msgsList.length; i++) {
-      let messages = {} as IEmbeddedMessage;
+      let messages = {} as IEmbeddedMessageData;
       messages.messageId = msgsList[i].metadata.messageId;
-      messages = this.addEmailOrUserIdToJson(messages);
+      messages = functions.addEmailOrUserIdToJson(messages, localStorage);
       await trackEmbeddedMessageReceived(messages);
     }
   }
@@ -167,14 +158,14 @@ export class EmbeddedManager {
       let actionName: string;
 
       if (clickedUrl.startsWith(URL_SCHEME_ACTION)) {
-        actionType = URL_SCHEME_ACTION;
-        actionName = clickedUrl.replace(URL_SCHEME_ACTION, '');
+        actionName = '';
+        actionType = clickedUrl;
       } else if (clickedUrl.startsWith(URL_SCHEME_ITBL)) {
-        actionType = URL_SCHEME_ITBL;
-        actionName = clickedUrl.replace(URL_SCHEME_ITBL, '');
+        actionName = '';
+        actionType = clickedUrl.replace(URL_SCHEME_ITBL, '');
       } else {
         actionType = URL_SCHEME_OPEN;
-        actionName = clickedUrl.replace(URL_SCHEME_OPEN, '');
+        actionName = clickedUrl;
       }
 
       const iterableAction: IterableAction = {

diff --git a/src/embedded/embeddedMessageProcessor.ts b/src/embedded/embeddedMessageProcessor.ts
@@ -1,12 +1,12 @@
-import { IEmbeddedMessage } from '../events/embedded/types';
+import { IEmbeddedMessageData } from '../../src/events/embedded/types';
 
 export class EmbeddedMessagingProcessor {
-  private currentMessages: Array<IEmbeddedMessage>;
-  private fetchedMessages: Array<IEmbeddedMessage>;
+  private currentMessages: Array<IEmbeddedMessageData>;
+  private fetchedMessages: Array<IEmbeddedMessageData>;
 
   constructor(
-    currentMessages: Array<IEmbeddedMessage>,
-    fetchedMessages: Array<IEmbeddedMessage>
+    currentMessages: Array<IEmbeddedMessageData>,
+    fetchedMessages: Array<IEmbeddedMessageData>
   ) {
     this.currentMessages = currentMessages; // old messages
     this.fetchedMessages = fetchedMessages; // all messages
@@ -22,20 +22,20 @@ export class EmbeddedMessagingProcessor {
 
   public getNewMessages() {
     return this.fetchedMessages.filter(
-      (messageInfo: IEmbeddedMessage) =>
+      (messageInfo: IEmbeddedMessageData) =>
         !this.getCurrentMessageIds().includes(messageInfo.metadata.messageId)
     );
   }
 
   public getCurrentMessageIds(): string[] {
     return this.currentMessages.map(
-      (messageInfo: IEmbeddedMessage) => messageInfo.metadata.messageId
+      (messageInfo: IEmbeddedMessageData) => messageInfo.metadata.messageId
     );
   }
 
   public getFetchedMessageIds(): string[] {
     return this.fetchedMessages.map(
-      (messageInfo: IEmbeddedMessage) => messageInfo.metadata.messageId
+      (messageInfo: IEmbeddedMessageData) => messageInfo.metadata.messageId
     );
   }
 }
diff --git a/src/embedded/embeddedSessionManager.ts b/src/embedded/embeddedSessionManager.ts
@@ -1,23 +1,22 @@
 import { v4 as uuidv4 } from 'uuid';
 import {
-  IEmbeddedSession,
-  IEmbeddedImpression
-} from '../events/embedded/types';
-import { IEmbeddedImpressionData } from './types';
+  IEmbeddedImpressionData,
+  IEmbeddedSession
+} from '../../src/events/embedded/types';
 import { trackEmbeddedSession } from '../events/embedded/events';
 
 class EmbeddedSession {
   public start?: Date;
   public end?: Date;
   public placementId?: string;
-  public impressions?: Array<IEmbeddedImpression>;
+  public impressions?: Array<IEmbeddedImpressionData>;
   public id: string;
 
   constructor(
     start?: Date,
     end?: Date,
     placementId?: string,
-    impressions?: Array<IEmbeddedImpression>
+    impressions?: Array<IEmbeddedImpressionData>
   ) {
     this.start = start;
     this.end = end;
@@ -41,7 +40,7 @@ class EmbeddedImpressionData {
 }
 
 export class EmbeddedSessionManager {
-  private impressions: Map<string, IEmbeddedImpression> = new Map();
+  private impressions: Map<string, IEmbeddedImpressionData> = new Map();
   public session: IEmbeddedSession = new EmbeddedSession(
     undefined,
     undefined,

diff --git a/src/embedded/types.ts b/src/embedded/types.ts
@@ -3,13 +3,6 @@ export interface EmbeddedMessageUpdateHandler {
   onEmbeddedMessagingDisabled: () => void;
 }
 
-export interface IEmbeddedImpressionData {
-  messageId: string;
-  displayCount: number;
-  duration: number;
-  start?: Date;
-}
-
 export enum IterableActionSource {
   PUSH = 'PUSH',
   APP_LINK = 'APP_LINK',

diff --git a/src/events/embedded/events.ts b/src/events/embedded/events.ts
@@ -1,22 +1,20 @@
 import { baseIterableRequest } from '../../request';
 import {
-  IEmbeddedMessage,
-  IEmbeddedMessageMetadata,
-  IEmbeddedSession,
-  EnbeddedMessagingDismiss,
-  EnbeddedMessagingSession
-} from './types';
+  EmbeddedMessagingDismiss,
+  EmbeddedMessagingSession,
+  IEmbeddedMessageData,
+  IEmbeddedSession
+} from '../../../src/events/embedded/types';
 import { IterableResponse } from '../../types';
 import {
   trackEmbeddedMessageSchema,
-  trackEmbeddedMessageClickSchema,
   trackEmbeddedSessionSchema,
   embaddedMessagingDismissSchema,
   embaddedMessagingSessionSchema
 } from './events.schema';
 import { EndPoints } from '../consts';
 
-export const trackEmbeddedMessageReceived = (payload: IEmbeddedMessage) => {
+export const trackEmbeddedMessageReceived = (payload: IEmbeddedMessageData) => {
   return baseIterableRequest<IterableResponse>({
     method: 'POST',
     url: EndPoints.msg_received_event_track,
@@ -27,29 +25,6 @@ export const trackEmbeddedMessageReceived = (payload: IEmbeddedMessage) => {
   });
 };
 
-export const trackEmbeddedMessageClick = (
-  payload: IEmbeddedMessageMetadata,
-  buttonIdentifier: string,
-  clickedUrl: string,
-  appPackageName: string
-) => {
-  return baseIterableRequest<IterableResponse>({
-    method: 'POST',
-    url: EndPoints.msg_click_event_track,
-    data: {
-      messageId: payload.messageId,
-      buttonIdentifier: buttonIdentifier,
-      targetUrl: clickedUrl,
-      deviceInfo: {
-        appPackageName: appPackageName
-      }
-    },
-    validation: {
-      data: trackEmbeddedMessageClickSchema
-    }
-  });
-};
-
 export const trackEmbeddedSession = (payload: IEmbeddedSession) => {
   return baseIterableRequest<IterableResponse>({
     method: 'POST',
@@ -62,7 +37,7 @@ export const trackEmbeddedSession = (payload: IEmbeddedSession) => {
 };
 
 export const trackEmbeddedMessagingDismiss = (
-  payload: EnbeddedMessagingDismiss
+  payload: EmbeddedMessagingDismiss
 ) => {
   return baseIterableRequest<IterableResponse>({
     method: 'POST',
@@ -75,7 +50,7 @@ export const trackEmbeddedMessagingDismiss = (
 };
 
 export const trackEmbeddedMessagingSession = (
-  payload: EnbeddedMessagingSession
+  payload: EmbeddedMessagingSession
 ) => {
   return baseIterableRequest<IterableResponse>({
     method: 'POST',