feat(framework): Add new Inbox properties to step.inApp schema

[rifont]

What changed? Why was the change needed?

• New step.inApp properties are needed to support the inbox component.

Screenshots

Everything specified

export const inAppWorkflow = workflow('in-app-workflow', async ({ step }) => {
  await step.inApp('send-in-app', (controls) => ({
    subject: `Welcome!`,
    body: 'Hello there',
    avatar: 'https://static.vecteezy.com/system/resources/thumbnails/006/487/917/small_2x/man-avatar-icon-free-vector.jpg',
    primaryAction: {
      label: 'Primary',
      url: 'https://google.com',
    },
    secondaryAction: {
      label: 'Secondary',
      url: 'https://google.com',
    }
  }));

Studio Preview

Dashboard Preview

V1 In-App Delivered Notification

V2 Inbox Delivered Notification

Expand for optional sections

Related enterprise PR

Special notes for your reviewer

[linear]

NV-4095 😼 Polish the Inbox DX in workflows

[BiswaViraj]

/* 👇is this property meant to be specifiable in the Framework? There's some duplication with avatar */

Not sure, if this is clear now, but still want to address here for visibility.
In the example, it does seem like there's some duplication in avatar and actor as we are using user type
But in the scenario, where avatar is a system icon or custom
The actor will be undefined or null.
@rifont

[rifont]

/* 👇is this property meant to be specifiable in the Framework? There's some duplication with avatar */

Not sure, if this is clear now, but still want to address here for visibility. In the example, it does seem like there's some duplication in avatar and actor as we are using user type But in the scenario, where avatar is a system icon or custom The actor will be undefined or null. @rifont

Thanks for the update @BiswaViraj . In that case, given that the presence of actor in dependent on the presence of avatar, does it make more sense to more closely co-locate the attributes? I am thinking we can merge the avatar and actor property, so we have:

actor.type==='user'

const inAppRes = await step.inApp('send-in-app', async () => ({
  body: 'Test Body',
  actor: {
    type: 'user',
    subscriberId: '[email protected]', // required when type is user
    firstName: 'Joe', // optional when type is user, overrides default subscriber first name
    lastName: 'Smith', // optional when type is user, overrides default subscriber last name
    avatar: 'https://novu.co/image', // optional when type is user, overrides the default subscriber avatar
  },
}));

actor.type==='custom'

const inAppRes = await step.inApp('send-in-app', async () => ({
  body: 'Test Body',
  actor: {
    type: 'custom',
    avatar: 'https://novu.co/image', // type: URL - required when type is `custom`
  },
}));

actor.type==='system'

const inAppRes = await step.inApp('send-in-app', async () => ({
  body: 'Test Body',
  actor: {
    type: 'system',
    avatar: 'robot', // type: IconName - required when type is system
  },
}));

Wdyt?

[rifont]

Converted to draft as we still need to wire-up the Worker implementation to support these new attributes in Framework.