G1j mx uxe/4182 inapp mock change to open new tab

lib/components/Notifications/Inbox.tsx

@@ -22,6 +22,7 @@ export type InboxProps = {
   header?: InboxHeaderProps;
   empty?: React.ReactNode;
   imageShape?: 'circle' | 'square';
+  newTab?: boolean;
 };
 
 export const Inbox: React.FC<InboxProps> = (props) => {
@@ -129,6 +130,7 @@ export const Inbox: React.FC<InboxProps> = (props) => {
                   markAsClicked={context.markAsClicked}
                   renderer={props.notificationRenderer}
                   imageShape={props.imageShape}
+                  newTab={props.newTab}
                 />
               </ListItem>
             )}
@@ -169,6 +171,7 @@ export const Inbox: React.FC<InboxProps> = (props) => {
                   markAsClicked={context.markAsClicked}
                   renderer={props.notificationRenderer}
                   imageShape={props.imageShape}
+                  newTab={props.newTab}
                 />
               </ListItem>
             ))}

lib/components/Notifications/Notification.tsx

@@ -39,6 +39,7 @@ export type NotificationProps = {
   markAsClicked: (ids: string[]) => void;
   renderer?: (notification: InAppNotification[]) => ReactNode;
   imageShape?: 'circle' | 'square';
+  newTab?: boolean;
 };
 
 export const Notification = (props: NotificationProps) => {
@@ -96,7 +97,11 @@ export const Notification = (props: NotificationProps) => {
       onClick={() => {
         props.markAsClicked(ids);
         if (redirectURL) {
-          window.location.href = redirectURL;
+          if (props.newTab) {
+            window.open(redirectURL, '_blank');
+          } else {
+            window.location.href = redirectURL;
+          }
         }
       }}
       style={{

lib/components/Notifications/NotificationFeed.tsx

@@ -22,6 +22,7 @@ export type NotificationFeedProps = {
   };
   header?: InboxHeaderProps;
   imageShape?: 'circle' | 'square';
+  newTab?: boolean;
 };
 
 export const NotificationFeed: React.FC<NotificationFeedProps> = (props) => {
@@ -63,7 +64,8 @@ export const NotificationFeed: React.FC<NotificationFeedProps> = (props) => {
       button2ClickHandler:
         props.header?.button2ClickHandler ?? (() => setOpenPreferences(true))
     },
-    imageShape: props.imageShape || 'circle'
+    imageShape: props.imageShape || 'circle',
+    newTab: props.newTab ?? false
   };
 
   return (
@@ -86,6 +88,7 @@ export const NotificationFeed: React.FC<NotificationFeedProps> = (props) => {
         notificationRenderer={config.renderers.notification}
         header={config.header}
         imageShape={config.imageShape}
+        newTab={config.newTab}
       />
       {context.webPushOptInMessage &&
         localStorage.getItem('hideWebPushOptInMessage') !== 'true' && (

lib/components/Notifications/NotificationLauncher.tsx

@@ -71,7 +71,8 @@ export const NotificationLauncher: React.FC<NotificationLaucherProps> = (
         vertical: props.popoverPosition?.anchorOrigin?.vertical ?? 'top',
         horizontal: props.popoverPosition?.anchorOrigin?.horizontal ?? 'left'
       }
-    }
+    },
+    newTab: props.newTab ?? false
   };
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -133,6 +134,7 @@ export const NotificationLauncher: React.FC<NotificationLaucherProps> = (
           pagePosition={config.pagePosition}
           notificationRenderer={config.renderers.notification}
           header={config.header}
+          newTab={config.newTab}
         />
         {context.webPushOptInMessage &&
           localStorage.getItem('hideWebPushOptInMessage') !== 'true' && (

lib/components/Notifications/NotificationPopup.tsx

@@ -35,6 +35,7 @@ export type NotificationPopupProps = {
       horizontal: 'left' | 'center' | 'right';
     };
   };
+  newTab?: boolean;
 };
 
 export const NotificationPopup: React.FC<NotificationPopupProps> = (props) => {
@@ -86,7 +87,8 @@ export const NotificationPopup: React.FC<NotificationPopupProps> = (props) => {
         vertical: props.popoverPosition?.anchorOrigin?.vertical ?? 'top',
         horizontal: props.popoverPosition?.anchorOrigin?.horizontal ?? 'left'
       }
-    }
+    },
+    newTab: props.newTab ?? false
   };
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -141,6 +143,7 @@ export const NotificationPopup: React.FC<NotificationPopupProps> = (props) => {
             pagePosition={config.pagePosition}
             notificationRenderer={config.renderers.notification}
             header={config.header}
+            newTab={config.newTab}
           />
           {context.webPushOptInMessage &&
             localStorage.getItem('hideWebPushOptInMessage') !== 'true' && (

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "overrides": {
     "esbuild": "^0.25.0",