feat(framework): cta support with target (novuhq#6394)

.cspell.json

@@ -712,7 +712,9 @@
     "Primitivestring",
     "Listofobjects",
     "Nestedobject",
-    "Listoflistofobjects"
+    "Listoflistofobjects",
+    "noopener",
+    "noreferrer"
   ],
   "flagWords": [],
   "patterns": [

apps/api/src/app/inbox/utils/notification-mapper.ts

@@ -45,16 +45,29 @@ const mapSingleItem = ({
     primaryAction: primaryCta && {
       label: primaryCta.content,
       isCompleted: actionType === ButtonTypeEnum.PRIMARY && actionStatus === MessageActionStatusEnum.DONE,
+      redirect: primaryCta.url
+        ? {
+            url: primaryCta.url,
+            target: primaryCta.target,
+          }
+        : undefined,
     },
     secondaryAction: secondaryCta && {
       label: secondaryCta.content,
       isCompleted: actionType === ButtonTypeEnum.SECONDARY && actionStatus === MessageActionStatusEnum.DONE,
+      redirect: secondaryCta.url
+        ? {
+            url: secondaryCta.url,
+            target: secondaryCta.target,
+          }
+        : undefined,
     },
     channelType: channel,
     tags,
     redirect: cta.data?.url
       ? {
           url: cta.data.url,
+          target: cta.data.target,
         }
       : undefined,
     data,

apps/api/src/app/inbox/utils/types.ts

@@ -1,4 +1,4 @@
-import type { ChannelTypeEnum } from '@novu/shared';
+import type { ChannelTypeEnum, Redirect } from '@novu/shared';
 
 export type Subscriber = {
   id: string;
@@ -11,6 +11,7 @@ export type Subscriber = {
 type Action = {
   label: string;
   isCompleted: boolean;
+  redirect?: Redirect;
 };
 
 export type InboxNotification = {
@@ -28,10 +29,8 @@ export type InboxNotification = {
   secondaryAction?: Action;
   channelType: ChannelTypeEnum;
   tags?: string[];
-  redirect?: {
-    url: string;
-  };
   data?: Record<string, unknown>;
+  redirect?: Redirect;
 };
 
 export type NotificationFilter = {

libs/shared/src/entities/messages/messages.interface.ts

@@ -1,8 +1,7 @@
+import { ActorTypeEnum, ChannelCTATypeEnum, ChannelTypeEnum, IEmailBlock, UrlTarget } from '../../types';
 import { INotificationTemplate } from '../notification-template';
 import { ButtonTypeEnum } from './action.enum';
 
-import { ChannelCTATypeEnum, ChannelTypeEnum, IEmailBlock, ActorTypeEnum } from '../../types';
-
 export interface IMessage {
   _id: string;
   _templateId: string;
@@ -33,6 +32,7 @@ export interface IMessageCTA {
   type: ChannelCTATypeEnum;
   data: {
     url?: string;
+    target?: UrlTarget;
   };
   action?: IMessageAction;
 }
@@ -51,6 +51,7 @@ export interface IMessageButton {
   content: string;
   resultContent?: string;
   url?: string;
+  target?: UrlTarget;
 }
 
 export enum MessageActionStatusEnum {

libs/shared/src/types/messages/index.ts

@@ -4,3 +4,10 @@ export enum MessagesStatusEnum {
   UNREAD = 'unread',
   UNSEEN = 'unseen',
 }
+
+export type UrlTarget = '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop';
+
+export type Redirect = {
+  url: string;
+  target?: UrlTarget;
+};

libs/shared/src/utils/bridge.utils.ts

@@ -1,5 +1,5 @@
 import { ButtonTypeEnum, IMessage, IMessageCTA } from '../entities/messages';
-import { ChannelCTATypeEnum, WorkflowTypeEnum } from '../types';
+import { ChannelCTATypeEnum, Redirect, WorkflowTypeEnum } from '../types';
 
 export const isBridgeWorkflow = (workflowType?: WorkflowTypeEnum): boolean => {
   return workflowType === WorkflowTypeEnum.BRIDGE || workflowType === WorkflowTypeEnum.ECHO;
@@ -19,13 +19,14 @@ type InAppOutput = {
   avatar?: string;
   primaryAction?: {
     label: string;
-    url?: string;
+    redirect?: Redirect;
   };
   secondaryAction?: {
     label: string;
-    url?: string;
+    redirect?: Redirect;
   };
   data?: Record<string, unknown>;
+  redirect?: Redirect;
 };
 
 type InAppMessage = Pick<IMessage, 'subject' | 'content' | 'cta' | 'avatar' | 'data'>;
@@ -36,7 +37,10 @@ type InAppMessage = Pick<IMessage, 'subject' | 'content' | 'cta' | 'avatar' | 'd
 export const inAppMessageFromBridgeOutputs = (outputs?: InAppOutput) => {
   const cta = {
     type: ChannelCTATypeEnum.REDIRECT,
-    data: {},
+    data: {
+      url: outputs?.redirect?.url,
+      target: outputs?.redirect?.target,
+    },
     action: {
       result: {},
       buttons: [
@@ -45,7 +49,8 @@ export const inAppMessageFromBridgeOutputs = (outputs?: InAppOutput) => {
               {
                 type: ButtonTypeEnum.PRIMARY,
                 content: outputs.primaryAction.label,
-                url: outputs.primaryAction.url,
+                url: outputs.primaryAction.redirect?.url,
+                target: outputs?.primaryAction.redirect?.target,
               },
             ]
           : []),
@@ -54,7 +59,8 @@ export const inAppMessageFromBridgeOutputs = (outputs?: InAppOutput) => {
               {
                 type: ButtonTypeEnum.SECONDARY,
                 content: outputs.secondaryAction.label,
-                url: outputs.secondaryAction.url,
+                url: outputs.secondaryAction.redirect?.url,
+                target: outputs?.secondaryAction.redirect?.target,
               },
             ]
           : []),

packages/framework/src/schemas/steps/channels/in-app.schema.ts

@@ -1,10 +1,20 @@
 import { Schema } from '../../../types/schema.types';
 
+const redirectSchema = {
+  type: 'object',
+  properties: {
+    url: { type: 'string', format: 'uri' },
+    target: { type: 'string', enum: ['_self', '_blank', '_parent', '_top', '_unfencedTop'], default: '_blank' },
+  },
+  required: ['url'],
+  additionalProperties: false,
+} as const satisfies Schema;
+
 const actionSchema = {
   type: 'object',
   properties: {
     label: { type: 'string' },
-    url: { type: 'string' },
+    redirect: redirectSchema,
   },
   required: ['label'],
   additionalProperties: false,
@@ -19,6 +29,7 @@ const inAppOutputSchema = {
     primaryAction: actionSchema,
     secondaryAction: actionSchema,
     data: { type: 'object', additionalProperties: true },
+    redirect: redirectSchema,
   },
   required: ['body'],
   additionalProperties: false,

packages/js/src/types.ts

@@ -79,9 +79,15 @@ export type Subscriber = {
   subscriberId: string;
 };
 
+export type Redirect = {
+  url: string;
+  target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop';
+};
+
 export type Action = {
   label: string;
   isCompleted: boolean;
+  redirect?: Redirect;
 };
 
 export type InboxNotification = {
@@ -99,10 +105,8 @@ export type InboxNotification = {
   secondaryAction?: Action;
   channelType: ChannelType;
   tags?: string[];
-  redirect?: {
-    url: string;
-  };
   data?: Record<string, unknown>;
+  redirect?: Redirect;
 };
 
 export type NotificationFilter = {

packages/js/src/ui/components/Notification/DefaultNotification.tsx

@@ -1,8 +1,9 @@
 import { createEffect, createMemo, createSignal, JSX, Show } from 'solid-js';
+
 import type { Notification } from '../../../notifications';
 import { ActionTypeEnum } from '../../../types';
 import { useInboxContext, useLocalization } from '../../context';
-import { cn, formatToRelativeTime, useStyle } from '../../helpers';
+import { cn, formatToRelativeTime, useStyle, DEFAULT_TARGET, DEFAULT_REFERRER } from '../../helpers';
 import { Archive, ReadAll, Unarchive, Unread } from '../../icons';
 import type { NotificationActionClickHandler, NotificationClickHandler } from '../../types';
 import { NotificationStatus } from '../../types';
@@ -45,7 +46,8 @@ export const DefaultNotification = (props: DefaultNotificationProps) => {
 
     props.onNotificationClick?.(props.notification);
     if (props.notification.redirect?.url) {
-      window.open(props.notification.redirect?.url, '_blank', 'noreferrer noopener');
+      const target = props.notification.redirect?.target || DEFAULT_TARGET;
+      window.open(props.notification.redirect?.url, target, DEFAULT_REFERRER);
     }
   };
 
@@ -55,9 +57,18 @@ export const DefaultNotification = (props: DefaultNotificationProps) => {
     if (action === ActionTypeEnum.PRIMARY) {
       props.notification.completePrimary();
       props.onPrimaryActionClick?.(props.notification);
+      if (props.notification.primaryAction?.redirect?.url) {
+        const target = props.notification.primaryAction?.redirect?.target || DEFAULT_TARGET;
+        window.open(props.notification.primaryAction?.redirect?.url, target, DEFAULT_REFERRER);
+      }
     } else {
       props.notification.completeSecondary();
       props.onSecondaryActionClick?.(props.notification);
+
+      if (props.notification.secondaryAction?.redirect?.url) {
+        const target = props.notification.secondaryAction?.redirect?.target || DEFAULT_TARGET;
+        window.open(props.notification.secondaryAction?.redirect?.url, target, DEFAULT_REFERRER);
+      }
     }
   };
 

packages/js/src/ui/helpers/constants.ts

@@ -1,2 +1,5 @@
 export const NV_INBOX_TABS_CHANNEL = 'nv-inbox-tabs-channel';
 export const NV_INBOX_WEBSOCKET_LOCK = 'nv-inbox-websocket-lock';
+
+export const DEFAULT_TARGET = '_blank';
+export const DEFAULT_REFERRER = 'noopener noreferrer';

packages/js/src/ui/helpers/index.ts

@@ -3,3 +3,4 @@ export * from './formatToRelativeTime';
 export * from './useStyle';
 export * from './useUncontrolledState';
 export * from './utils';
+export * from './constants';

packages/js/src/ws/socket.ts

@@ -66,16 +66,29 @@ const mapToNotification = ({
     primaryAction: primaryCta && {
       label: primaryCta.content,
       isCompleted: actionType === ActionTypeEnum.PRIMARY && actionStatus === NotificationActionStatus.DONE,
+      redirect: primaryCta.url
+        ? {
+            target: primaryCta.target,
+            url: primaryCta.url,
+          }
+        : undefined,
     },
     secondaryAction: secondaryCta && {
       label: secondaryCta.content,
       isCompleted: actionType === ActionTypeEnum.SECONDARY && actionStatus === NotificationActionStatus.DONE,
+      redirect: secondaryCta.url
+        ? {
+            target: secondaryCta.target,
+            url: secondaryCta.url,
+          }
+        : undefined,
     },
     channelType: channel,
     tags,
     redirect: cta.data?.url
       ? {
           url: cta.data.url,
+          target: cta.data.target,
         }
       : undefined,
     data,