diff --git a/lib/components/Notifications/Inbox.tsx b/lib/components/Notifications/Inbox.tsx index d1b9fcf..d934c25 100644 --- a/lib/components/Notifications/Inbox.tsx +++ b/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 = (props) => { @@ -129,6 +130,7 @@ export const Inbox: React.FC = (props) => { markAsClicked={context.markAsClicked} renderer={props.notificationRenderer} imageShape={props.imageShape} + newTab={props.newTab} /> )} @@ -169,6 +171,7 @@ export const Inbox: React.FC = (props) => { markAsClicked={context.markAsClicked} renderer={props.notificationRenderer} imageShape={props.imageShape} + newTab={props.newTab} /> ))} diff --git a/lib/components/Notifications/Notification.tsx b/lib/components/Notifications/Notification.tsx index 1d7972c..d3c5e09 100644 --- a/lib/components/Notifications/Notification.tsx +++ b/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={{ diff --git a/lib/components/Notifications/NotificationFeed.tsx b/lib/components/Notifications/NotificationFeed.tsx index a33aa61..e0d505b 100644 --- a/lib/components/Notifications/NotificationFeed.tsx +++ b/lib/components/Notifications/NotificationFeed.tsx @@ -22,6 +22,7 @@ export type NotificationFeedProps = { }; header?: InboxHeaderProps; imageShape?: 'circle' | 'square'; + newTab?: boolean; }; export const NotificationFeed: React.FC = (props) => { @@ -63,7 +64,8 @@ export const NotificationFeed: React.FC = (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 = (props) => { notificationRenderer={config.renderers.notification} header={config.header} imageShape={config.imageShape} + newTab={config.newTab} /> {context.webPushOptInMessage && localStorage.getItem('hideWebPushOptInMessage') !== 'true' && ( diff --git a/lib/components/Notifications/NotificationLauncher.tsx b/lib/components/Notifications/NotificationLauncher.tsx index b76a0c8..1bc7f8b 100644 --- a/lib/components/Notifications/NotificationLauncher.tsx +++ b/lib/components/Notifications/NotificationLauncher.tsx @@ -71,7 +71,8 @@ export const NotificationLauncher: React.FC = ( vertical: props.popoverPosition?.anchorOrigin?.vertical ?? 'top', horizontal: props.popoverPosition?.anchorOrigin?.horizontal ?? 'left' } - } + }, + newTab: props.newTab ?? false }; const handleClick = (event: React.MouseEvent) => { @@ -133,6 +134,7 @@ export const NotificationLauncher: React.FC = ( pagePosition={config.pagePosition} notificationRenderer={config.renderers.notification} header={config.header} + newTab={config.newTab} /> {context.webPushOptInMessage && localStorage.getItem('hideWebPushOptInMessage') !== 'true' && ( diff --git a/lib/components/Notifications/NotificationPopup.tsx b/lib/components/Notifications/NotificationPopup.tsx index e378acf..76576f8 100644 --- a/lib/components/Notifications/NotificationPopup.tsx +++ b/lib/components/Notifications/NotificationPopup.tsx @@ -35,6 +35,7 @@ export type NotificationPopupProps = { horizontal: 'left' | 'center' | 'right'; }; }; + newTab?: boolean; }; export const NotificationPopup: React.FC = (props) => { @@ -86,7 +87,8 @@ export const NotificationPopup: React.FC = (props) => { vertical: props.popoverPosition?.anchorOrigin?.vertical ?? 'top', horizontal: props.popoverPosition?.anchorOrigin?.horizontal ?? 'left' } - } + }, + newTab: props.newTab ?? false }; const handleClick = (event: React.MouseEvent) => { @@ -141,6 +143,7 @@ export const NotificationPopup: React.FC = (props) => { pagePosition={config.pagePosition} notificationRenderer={config.renderers.notification} header={config.header} + newTab={config.newTab} /> {context.webPushOptInMessage && localStorage.getItem('hideWebPushOptInMessage') !== 'true' && ( diff --git a/package-lock.json b/package-lock.json index bc2932b..d1b8080 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@notificationapi/react", - "version": "1.6.0", + "version": "1.6.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@notificationapi/react", - "version": "1.6.0", + "version": "1.6.1", "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", diff --git a/package.json b/package.json index bb354e3..3eea77e 100644 --- a/package.json +++ b/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",