Novu•2mo ago

primaryAction.url doesn't seem to be working with the new notificationCenter

Hey! we started implementing novu into our system and we've been loving the ease of use so far. After implementing a few workflows emails, and delays, we started implementing the NotificationCenter and we're currently running into issues with the url and other payloads from step.inApp for some reason no matter which url i use in primaryAction.url the button in the notification center doesn't redirect to the url, when i tried to implement a custom onClick, i don't see any of the params i pass through the return type of step.inApp, no primaryAction.url no someOtherParam nothing gets to the frontend onPrimaryActionClick function. Here's my return type:

await step.inApp(
      'send-mention-notification',
      async () => {
        const data = await fetchRelatedData();
        return {
          body: jsonDocument,
          primaryAction: {
            label: 'View Comment',
            url: https://google.com //This won't pass to the "view comment" button in the notificationCenter or to the onNotificationClick method
          },
          someOtherParam: 'someOtherValue', // this will also not go through
          subject: controls.subject ?? `${mentionedByName} mentioned you in a comment`,
        };
      },
      {
        skip: async () => shouldSkipMentionWorkflow(payload),
      },
    );

await step.inApp(
      'send-mention-notification',
      async () => {
        const data = await fetchRelatedData();
        return {
          body: jsonDocument,
          primaryAction: {
            label: 'View Comment',
            url: https://google.com //This won't pass to the "view comment" button in the notificationCenter or to the onNotificationClick method
          },
          someOtherParam: 'someOtherValue', // this will also not go through
          subject: controls.subject ?? `${mentionedByName} mentioned you in a comment`,
        };
      },
      {
        skip: async () => shouldSkipMentionWorkflow(payload),
      },
    );

Is there some way for me to debug this? i couldn't find and references for this in the documentation. Thx for the help 🙏

13 Replies

Eden•2mo ago

Here's my frontend code i test with 🙏

const onNotificationClick = useCallback((thing) => {
    console.log(JSON.stringify({ thing }));
  }, []);

  return (
    <Inbox
      applicationIdentifier={'myIdentifier'}
      subscriberId={userId}
      appearance={appearance}
      onPrimaryActionClick={onNotificationClick}
      onSecondaryActionClick={onNotificationClick}
      // renderBell={(props) => props.unreadCount}
    />
  );

log:
{
   "thing":{
      "notification":{
         "id":"myId",
         "subject":"someone tagged you in a post",
         "body":"someone tagged you in a post",
         "to":{
            "id":"",
            "subscriberId":""
         },
         "isRead":true,
         "isArchived":false,
         "createdAt":"2024-08-26T08:51:24.808Z",
         "readAt":"2024-08-26T08:52:01.621Z",
         "primaryAction":{
            "label":"View Comment",
            // no url
            "isCompleted":false
         },
         "secondaryAction":{
            "label":"Dismiss",
            "isCompleted":true
         },
         "channelType":"in_app",
         "tags":[
            
         ]
      }
   }
}

const onNotificationClick = useCallback((thing) => {
    console.log(JSON.stringify({ thing }));
  }, []);

  return (
    <Inbox
      applicationIdentifier={'myIdentifier'}
      subscriberId={userId}
      appearance={appearance}
      onPrimaryActionClick={onNotificationClick}
      onSecondaryActionClick={onNotificationClick}
      // renderBell={(props) => props.unreadCount}
    />
  );

log:
{
   "thing":{
      "notification":{
         "id":"myId",
         "subject":"someone tagged you in a post",
         "body":"someone tagged you in a post",
         "to":{
            "id":"",
            "subscriberId":""
         },
         "isRead":true,
         "isArchived":false,
         "createdAt":"2024-08-26T08:51:24.808Z",
         "readAt":"2024-08-26T08:52:01.621Z",
         "primaryAction":{
            "label":"View Comment",
            // no url
            "isCompleted":false
         },
         "secondaryAction":{
            "label":"Dismiss",
            "isCompleted":true
         },
         "channelType":"in_app",
         "tags":[
            
         ]
      }
   }
}

@DevRel @Support ❤️

Pawan Jain•2mo ago

Hey @Eden Looking into this @Eden I can reproduce the issue. Thanks for reporting it. primaryAction.url is a bug. Let me check if we support custom data or not someOtherParam: 'someOtherValue', // this will also not go through

Linear•2mo ago

Found issue COM-172.

Eden•2mo ago

@Pawan Jain First of all, thank you so much for looking into this. I'd love to know if custom data is/will be supported soon, since it's a base requirement for us to use the NotificationCenter Thx again 🙏

Novu_Bot•2mo ago

@Eden, you just advanced to level 1!

Pawan Jain•2mo ago

Hey @Eden Pawel from our team created a PR for something similar to your requirement. https://github.com/novuhq/novu/pull/6391 What do you think? it will fit into your usecase?

Eden•2mo ago

@Pawan Jain Looks like it'll fit, i still hope that if primaryAction.url is a built in feature, it will be fixed for ease of use, but for my use-case a custom data object will do the trick. 🙏

Pawan Jain•2mo ago

Sorry for confusion, above PR is for custom data someOtherParam: 'someOtherValue', // this will also not go through primaryAction.url one is a bug and will be fixed soon

Eden•2mo ago

The above pr fixes my need for someOtherValue' // this will also not go through and thank you for the update about the url, i'd appriciate your help and would love to know when i can try it and show my team.

Pawan Jain•2mo ago

@Eden A small update on this. This bug is now fixed in latest version 2.0.0-canary.3 of @novu/react

Pawan Jain•2mo ago

Correct code snippet from @novu/framework workflow is as below https://docs.novu.co/sdks/framework/typescript/steps/inbox#inbox-step-output

Pawan Jain•2mo ago

@novu/framework latest version is 2.0.0

Eden•2mo ago

@Pawan Jain Thx so much, this really helps @Pawan Jain I'm sorry to bother you again, but the bug has not been fixed as far as i'm noticing, can you please try and reproduce? here's my updated code:

await step.inApp(
      'send-mention-notification',
      async () => {

        return {
          body: jsonDocument,
          subject: controls.subject ?? `${mentionedByName} mentioned you in a comment`,
          data: {
            url: getCommentUrl(comment.url ?? '', comment.id),
          },
        };
      },
      {
        skip: async () => shouldSkipMentionWorkflow(payload),
      },
    );
  },

await step.inApp(
      'send-mention-notification',
      async () => {

        return {
          body: jsonDocument,
          subject: controls.subject ?? `${mentionedByName} mentioned you in a comment`,
          data: {
            url: getCommentUrl(comment.url ?? '', comment.id),
          },
        };
      },
      {
        skip: async () => shouldSkipMentionWorkflow(payload),
      },
    );
  },

    <Inbox
      applicationIdentifier={novuApplicationIdentifier}
      subscriberId={userId}
      appearance={appearance}
      renderNotification={(notification) => {
        console.log('Notification received', JSON.stringify(notification));
        return (
          <div>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</p>
          </div>
        );
      }}
    />

    <Inbox
      applicationIdentifier={novuApplicationIdentifier}
      subscriberId={userId}
      appearance={appearance}
      renderNotification={(notification) => {
        console.log('Notification received', JSON.stringify(notification));
        return (
          <div>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</p>
          </div>
        );
      }}
    />

And here's my FE console.log: Notification received {"notification":

{
   "notification":{
      "id":"66d598377b008e3d36f88668",
      "subject":"Eden Lender mentioned you in a comment",
      "body":"wow let's go Totally different person Another Person Eden Lender",
      "to":{
         "id":"66bca3ac9314a600ef264457",
         "subscriberId":"607a88f8-bfc4-4675-83c6-f1a9894cd797"
      },
      "isRead":true,
      "isArchived":false,
      "createdAt":"2024-09-02T10:49:27.551Z",
      "readAt":"2024-09-02T10:49:33.945Z",
      "channelType":"in_app",
      "tags":[
         
      ]
   }
}

{
   "notification":{
      "id":"66d598377b008e3d36f88668",
      "subject":"Eden Lender mentioned you in a comment",
      "body":"wow let's go Totally different person Another Person Eden Lender",
      "to":{
         "id":"66bca3ac9314a600ef264457",
         "subscriberId":"607a88f8-bfc4-4675-83c6-f1a9894cd797"
      },
      "isRead":true,
      "isArchived":false,
      "createdAt":"2024-09-02T10:49:27.551Z",
      "readAt":"2024-09-02T10:49:33.945Z",
      "channelType":"in_app",
      "tags":[
         
      ]
   }
}

@Pawan Jain updated my comment 🙏 @Pawan Jain Also, please lmk if i should open a new ticket for it

Gaming

Programming

primaryAction.url doesn't seem to be working with the new notificationCenter