Update Embedded requests to not need to pass userId or email

.babelrc

@@ -1,7 +1,6 @@
 {
 	"presets": [
 		"@babel/preset-env",
-        "@babel/preset-react",
 		"@babel/preset-typescript"
 	],
 	"ignore": [

package.json

@@ -37,8 +37,6 @@
     "buffer": "^6.0.3",
     "copy-webpack-plugin": "^11.0.0",
     "idb-keyval": "^6.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "throttle-debounce": "^3.0.1",
     "uuid": "^9.0.0",
     "yup": "^0.32.9"
@@ -68,12 +66,9 @@
     "@babel/plugin-transform-runtime": "^7.22.15",
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
     "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.6.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^12.7.1",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
     "@types/throttle-debounce": "^2.1.0",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.38.1",

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;
@@ -63,7 +64,7 @@ export const EmbeddedForm: FC<Props> = ({
       };
       const embeddedManager = new EmbeddedManager();
       embeddedManager.addUpdateListener(updateListener);
-      await embeddedManager.syncMessages(userId, 'Web', '1', 'my-website', () =>
+      await embeddedManager.syncMessages('my-website', () =>
         console.log('Synced message')
       );
     } catch (error: any) {
@@ -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);

react-example/src/views/EmbeddedMsgs.tsx

@@ -3,57 +3,102 @@ import {
   Card,
   Notification,
   Banner,
-  initialize,
-  EmbeddedManager
+  EmbeddedManager,
+  IterableEmbeddedMessage,
+  EmbeddedMessageUpdateHandler,
+  IterableUrlHandler,
+  IterableActionContext,
+  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 [selectedButtonIndex, setSelectedButtonIndex] = useState(0);
-  const [userId, setUserId] = useState<string>();
   const [messages, setMessages] = useState([]);
-  const iterableApi = initialize(process.env.API_KEY);
+
+  const changeCustomElement = () => {
+    const titleElement = document.getElementById('notification-title-custom-0');
+    const imageElement = document.getElementById('banner-image-custom-1');
+
+    if (titleElement) {
+      titleElement.innerText = 'Custom title';
+    }
+    if (imageElement) {
+      imageElement.style.height = '100px';
+      imageElement.style.width = '100px';
+    }
+  };
+
+  useEffect(() => {
+    const urlHandler: IterableUrlHandler = {
+      handleIterableURL: function (
+        uri: string,
+        actionContext: IterableActionContext
+      ): boolean {
+        window.open(uri, '_blank');
+        return true;
+      }
+    };
+    IterableConfig.urlHandler = urlHandler;
+
+    const customActionHandler: IterableCustomActionHandler = {
+      handleIterableCustomAction: function (
+        action: IterableAction,
+        actionContext: IterableActionContext
+      ): boolean {
+        return false;
+      }
+    };
+    IterableConfig.customActionHandler = customActionHandler;
+  }, []);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      changeCustomElement();
+    }, 3000);
+
+    // Clear the timeout to prevent memory leaks
+    return () => clearTimeout(timeoutId);
+  }, [selectedButtonIndex]);
 
   const handleFetchEmbeddedMessages = async () => {
     try {
-      iterableApi.setUserID(userId);
       const embeddedManager = new EmbeddedManager();
-      await embeddedManager.syncMessages(
-        userId,
-        'Web',
-        '1',
-        'my-website',
-        () => {
+      const updateListener: EmbeddedMessageUpdateHandler = {
+        onMessagesUpdated: function (): void {
           setMessages(embeddedManager.getMessages());
+        },
+        onEmbeddedMessagingDisabled: function (): void {
+          setMessages([]);
         }
-      );
+      };
+      embeddedManager.addUpdateListener(updateListener);
+      await embeddedManager.syncMessages('my-website', () => {
+        console.log('messages', JSON.stringify(embeddedManager.getMessages()));
+      });
     } catch (error: any) {
       console.log('error', error);
     }
   };
 
+  useEffect(() => {
+    if (loggedInUser === '') {
+      setMessages([]);
+    } else {
+      handleFetchEmbeddedMessages();
+    }
+  }, [loggedInUser]);
+
   return (
     <>
-      <h1>Fetch Embedded Msgs</h1>
-      <label htmlFor="item-1">UserId</label>
-      <TextField
-        value={userId}
-        onChange={(e) => setUserId(e.target.value)}
-        id="item-1"
-        placeholder="e.g. phone_number"
-        data-qa-update-user-input
-        required
-      />
-      <Button
-        style={{ marginLeft: 20, width: '100px' }}
-        onClick={() => handleFetchEmbeddedMessages()}
-      >
-        Submit
-      </Button>
-      <br />
       <div
         style={{
           display: 'flex',
@@ -123,36 +168,41 @@ export const EmbeddedMsgs: FC<Props> = () => {
         }}
       >
         {messages.length > 0 ? (
-          messages.map((message: any, index: number) => {
+          messages.map((message: IterableEmbeddedMessage, index: number) => {
             const data = message;
-
+            const notification = Notification({
+              message: data,
+              titleId: `notification-title-custom-${index}`,
+              textStyle: `
+                font-size: 20px;
+              `
+            });
+            const banner = Banner({
+              message: data,
+              parentStyle: ` margin-bottom: 10; `,
+              primaryBtnStyle: `
+                background-color: #000fff;
+                border-radius: 8px;
+                padding: 10px;
+                color: #ffffff;
+                `,
+              imageId: `banner-image-custom-${index}`
+            });
+            const card = Card({
+              message: data,
+              parentStyle: ` margin-bottom: 10; `
+            });
             switch (selectedButtonIndex) {
               case 0:
-                return (
-                  <Card
-                    key={index.toString()}
-                    parentStyle={{ margin: 0 }}
-                    message={data}
-                  />
-                );
+                return <div dangerouslySetInnerHTML={{ __html: card }} />;
 
               case 1:
-                return (
-                  <Banner
-                    key={index.toString()}
-                    parentStyle={{ margin: 0 }}
-                    message={data}
-                    primaryBtnStyle={{
-                      backgroundColor: '#000fff',
-                      borderRadius: '8px',
-                      padding: '10px',
-                      color: '#ffffff'
-                    }}
-                  />
-                );
+                return <div dangerouslySetInnerHTML={{ __html: banner }} />;
 
               case 2:
-                return <Notification key={index.toString()} message={data} />;
+                return (
+                  <div dangerouslySetInnerHTML={{ __html: notification }} />
+                );
 
               default:
                 return null;

src/authorization/authorization.ts

@@ -158,7 +158,7 @@ export function initialize(
       */
       if (
         !!(config?.url || '').match(
-          /(users\/update)|(events\/trackInApp)|(events\/inAppConsume)|(events\/track)|(events\/click)|(events\/session)|(events\/dismiss)|(events\/received)/gim
+          /(users\/update)|(events\/trackInApp)|(events\/inAppConsume)|(events\/track)|(events\/click)|(events\/session)|(events\/dismiss)|(events\/impression)|(events\/received)/gim
         )
       ) {
         return {
@@ -273,7 +273,7 @@ export function initialize(
             */
             if (
               !!(config?.url || '').match(
-                /(users\/update)|(events\/trackInApp)|(events\/inAppConsume)|(events\/track)/gim
+                /(users\/update)|(events\/trackInApp)|(events\/inAppConsume)|(events\/track)|(events\/received)|(events\/impression)|(events\/click)/gim
               )
             ) {
               return {
@@ -308,7 +308,7 @@ export function initialize(
             /*
               endpoints that use _userId_ query param in GET requests
             */
-            if (!!(config?.url || '').match(/getMessages/gim)) {
+            if (!!(config?.url || '').match(/(getMessages)|(messages)/gim)) {
               return {
                 ...config,
                 params: {
@@ -666,7 +666,7 @@ export function initialize(
         */
         if (
           !!(config?.url || '').match(
-            /(users\/update)|(events\/trackInApp)|(events\/inAppConsume)|(events\/track)/gim
+            /(users\/update)|(events\/trackInApp)|(events\/inAppConsume)|(events\/track)|(events\/received)|(events\/impression)|(events\/click)/gim
           )
         ) {
           return {
@@ -701,7 +701,7 @@ export function initialize(
         /*
           endpoints that use _userId_ query param in GET requests
         */
-        if (!!(config?.url || '').match(/getMessages/gim)) {
+        if (!!(config?.url || '').match(/(getMessages)|(messages)/gim)) {
           return {
             ...config,
             params: {