MOB-8139 & MOB-8028

jest.config.js

@@ -16,5 +16,5 @@ module.exports = {
   moduleNameMapper: pathsToModuleNameMapper(config.compilerOptions.paths, {
     prefix: '<rootDir>/'
   }),
-  transformIgnorePatterns: ['node_modules/(?!axios)'],
+  transformIgnorePatterns: ['node_modules/(?!axios)']
 };

react-example/src/views/EmbeddedMsgs.tsx

@@ -18,11 +18,13 @@ interface Props {}
 
 export const EmbeddedMsgs: FC<Props> = () => {
   const { loggedInUser } = useUser();
-
+  const appPackageName = 'my-website';
   const [selectedButtonIndex, setSelectedButtonIndex] = useState(0);
   const [messages, setMessages] = useState([]);
 
-  const [embeddedManager] = useState(new IterableEmbeddedManager('my-website'));
+  const [embeddedManager] = useState(
+    new IterableEmbeddedManager(appPackageName)
+  );
 
   const changeCustomElement = () => {
     const titleElement = document.getElementById('notification-title-custom-0');
@@ -49,7 +51,7 @@ export const EmbeddedMsgs: FC<Props> = () => {
     const customActionHandler: IterableCustomActionHandler = {
       handleIterableCustomAction: function (action: IterableAction): boolean {
         if (action.data === 'news') {
-          // handle the custom action here
+          // handle the custom action here and navigate based on action data
           return true;
         }
         return false;
@@ -71,6 +73,7 @@ export const EmbeddedMsgs: FC<Props> = () => {
     try {
       const updateListener: IterableEmbeddedMessageUpdateHandler = {
         onMessagesUpdated: function (): void {
+          // this callback gets called when messages are fetched/updated
           setMessages(embeddedManager.getMessages());
         },
         onEmbeddedMessagingDisabled: function (): void {
@@ -166,43 +169,46 @@ export const EmbeddedMsgs: FC<Props> = () => {
       >
         {messages.length > 0 ? (
           messages.map((message: IterableEmbeddedMessage, index: number) => {
-            const data = message;
-            const notification = IterableEmbeddedNotification({
-              embeddedManager,
-              message: data,
-              titleId: `notification-title-custom-${index}`,
-              textStyle: `
-                font-size: 20px;
-              `
-            });
-            const banner = IterableEmbeddedBanner({
-              embeddedManager,
-              message: data,
-              parentStyle: ' margin-bottom: 10; ',
-              primaryBtnStyle: `
-                background-color: #000fff;
-                border-radius: 8px;
-                padding: 10px;
-                color: #ffffff;
-                `,
-              imageId: `banner-image-custom-${index}`
-            });
-            const card = IterableEmbeddedCard({
-              embeddedManager,
-              message: data,
-              parentStyle: ' margin-bottom: 10; '
-            });
             switch (selectedButtonIndex) {
-              case 0:
+              case 0: {
+                const card = IterableEmbeddedCard({
+                  appPackageName,
+                  message,
+                  parentStyle: ' margin-bottom: 10; ',
+                  errorCallback: (error) => console.log('handleError: ', error)
+                });
                 return <div dangerouslySetInnerHTML={{ __html: card }} />;
-
-              case 1:
+              }
+
+              case 1: {
+                const banner = IterableEmbeddedBanner({
+                  appPackageName,
+                  message,
+                  parentStyle: ' margin-bottom: 10; ',
+                  primaryBtnStyle: `
+                    background-color: #000fff;
+                    border-radius: 8px;
+                    padding: 10px;
+                    color: #ffffff;
+                    `,
+                  imageId: `banner-image-custom-${index}`
+                });
                 return <div dangerouslySetInnerHTML={{ __html: banner }} />;
-
-              case 2:
+              }
+
+              case 2: {
+                const notification = IterableEmbeddedNotification({
+                  appPackageName,
+                  message,
+                  titleId: `notification-title-custom-${index}`,
+                  textStyle: `
+                    font-size: 20px;
+                  `
+                });
                 return (
                   <div dangerouslySetInnerHTML={{ __html: notification }} />
                 );
+              }
 
               default:
                 return null;

react-example/src/views/EmbeddedMsgsImpressionTracker.tsx

@@ -120,7 +120,7 @@ export const EmbeddedMsgsImpressionTracker: FC<Props> = () => {
             const card = IterableEmbeddedCard({
               embeddedManager,
               message: data,
-              parentStyle: ` margin-bottom: 10; `
+              parentStyle: ' margin-bottom: 10; '
             });
             return (
               <div

react-example/yarn.lock

@@ -6390,3 +6390,4 @@ yup@^0.32.9:
     nanoclone "^0.2.1"
     property-expr "^2.0.4"
     toposort "^2.0.2"
+

src/components/banner/index.tsx

@@ -1,12 +1,13 @@
-import { EmbeddedMessageData } from '../types';
 import {
   handleElementClick,
   addButtonClickEvent
 } from '../../embedded/embeddedClickEvents';
 import { IterableEmbeddedButton } from 'src/embedded';
+import { EmbeddedMessageData } from '../types';
 
 export function IterableEmbeddedBanner({
-  embeddedManager,
+  appPackageName,
+  message,
   parentStyle,
   disablePrimaryBtn = false,
   disableSecondaryBtn = false,
@@ -17,7 +18,6 @@ export function IterableEmbeddedBanner({
   secondaryDisableBtnStyle,
   textStyle,
   titleStyle,
-  message,
   titleId = 'banner-title',
   textId = 'banner-text',
   primaryButtonId = 'banner-primary-button',
@@ -26,7 +26,8 @@ export function IterableEmbeddedBanner({
   imageId = 'banner-image',
   buttonsDivId = 'banner-buttons-div',
   textTitleDivId = 'banner-text-title-div',
-  textTitleImageDivId = 'banner-text-title-image-div'
+  textTitleImageDivId = 'banner-text-title-image-div',
+  errorCallback
 }: EmbeddedMessageData): string {
   const defaultBannerStyles = `
     border: 1px solid #ccc;
@@ -103,14 +104,26 @@ export function IterableEmbeddedBanner({
     )[0];
     if (bannerDiv) {
       bannerDiv.addEventListener('click', () =>
-        handleElementClick(embeddedManager, message)
+        handleElementClick(message, appPackageName, errorCallback)
       );
     }
     if (primaryButtonClick) {
-      addButtonClickEvent(embeddedManager, primaryButtonClick, 0, message);
+      addButtonClickEvent(
+        primaryButtonClick,
+        0,
+        message,
+        appPackageName,
+        errorCallback
+      );
     }
     if (secondaryButtonClick) {
-      addButtonClickEvent(embeddedManager, secondaryButtonClick, 1, message);
+      addButtonClickEvent(
+        secondaryButtonClick,
+        1,
+        message,
+        appPackageName,
+        errorCallback
+      );
     }
   }, 0);
 

src/components/card/index.tsx

@@ -1,12 +1,13 @@
-import { EmbeddedMessageData } from '../types';
 import {
   handleElementClick,
   addButtonClickEvent
 } from '../../embedded/embeddedClickEvents';
 import { IterableEmbeddedButton } from 'src/embedded';
+import { EmbeddedMessageData } from '../types';
 
 export function IterableEmbeddedCard({
-  embeddedManager,
+  appPackageName,
+  message,
   parentStyle,
   disablePrimaryBtn = false,
   disableSecondaryBtn = false,
@@ -17,15 +18,15 @@ export function IterableEmbeddedCard({
   secondaryDisableBtnStyle,
   textStyle,
   titleStyle,
-  message,
   titleId = 'card-title',
   textId = 'card-text',
   primaryButtonId = 'card-primary-button',
   secondaryButtonId = 'card-secondary-button',
   parentId = 'card-parent',
   imageId = 'card-image',
   buttonsDivId = 'card-buttons-div',
-  textTitleDivId = 'card-text-title-div'
+  textTitleDivId = 'card-text-title-div',
+  errorCallback
 }: EmbeddedMessageData): string {
   const defaultCardStyles = `
     border: 1px solid #ccc;
@@ -106,14 +107,26 @@ export function IterableEmbeddedCard({
     )[0];
     if (cardDiv) {
       cardDiv.addEventListener('click', () =>
-        handleElementClick(embeddedManager, message)
+        handleElementClick(message, appPackageName, errorCallback)
       );
     }
     if (primaryButtonClick) {
-      addButtonClickEvent(embeddedManager, primaryButtonClick, 0, message);
+      addButtonClickEvent(
+        primaryButtonClick,
+        0,
+        message,
+        appPackageName,
+        errorCallback
+      );
     }
     if (secondaryButtonClick) {
-      addButtonClickEvent(embeddedManager, secondaryButtonClick, 1, message);
+      addButtonClickEvent(
+        secondaryButtonClick,
+        1,
+        message,
+        appPackageName,
+        errorCallback
+      );
     }
   }, 0);
 

src/components/notification/index.tsx

@@ -6,7 +6,7 @@ import {
 import { IterableEmbeddedButton } from 'src/embedded';
 
 export function IterableEmbeddedNotification({
-  embeddedManager,
+  appPackageName,
   message,
   disablePrimaryBtn = false,
   disableSecondaryBtn = false,
@@ -22,7 +22,8 @@ export function IterableEmbeddedNotification({
   secondaryButtonId = 'notification-secondary-button',
   parentId = 'notification-parent',
   buttonsDivId = 'notification-buttons-div',
-  textTitleDivId = 'notification-text-title-div'
+  textTitleDivId = 'notification-text-title-div',
+  errorCallback
 }: EmbeddedMessageData): string {
   const defaultTitleStyles = `
     font-size: 20px;
@@ -78,14 +79,26 @@ export function IterableEmbeddedNotification({
     )[0];
     if (notificationDiv) {
       notificationDiv.addEventListener('click', () =>
-        handleElementClick(embeddedManager, message)
+        handleElementClick(message, appPackageName, errorCallback)
       );
     }
     if (primaryButtonClick) {
-      addButtonClickEvent(embeddedManager, primaryButtonClick, 0, message);
+      addButtonClickEvent(
+        primaryButtonClick,
+        0,
+        message,
+        appPackageName,
+        errorCallback
+      );
     }
     if (secondaryButtonClick) {
-      addButtonClickEvent(embeddedManager, secondaryButtonClick, 1, message);
+      addButtonClickEvent(
+        secondaryButtonClick,
+        1,
+        message,
+        appPackageName,
+        errorCallback
+      );
     }
   }, 0);
 

src/components/types.ts

@@ -1,7 +1,8 @@
-import { IterableEmbeddedManager, IterableEmbeddedMessage } from '..';
+import { ErrorHandler } from '../types';
+import { IterableEmbeddedMessage } from '../embedded/types';
 
 export interface EmbeddedMessageData {
-  embeddedManager: IterableEmbeddedManager;
+  appPackageName: string;
   message: IterableEmbeddedMessage;
   disablePrimaryBtn?: boolean;
   disableSecondaryBtn?: boolean;
@@ -22,4 +23,5 @@ export interface EmbeddedMessageData {
   buttonsDivId?: string;
   textTitleDivId?: string;
   textTitleImageDivId?: string;
+  errorCallback?: ErrorHandler;
 }