Skip to content

Commit

Permalink
Merge pull request #681 from novuhq/inbox-docs-custom-data-and-redire…
Browse files Browse the repository at this point in the history 
…ct-urls

chore: inbox and framework docs update for the notification data prop and redirect urls
  • Loading branch information
@LetItRock
LetItRock authored Aug 29, 2024
2 parents 09243ea + 89a41f6 commit 4a71a60
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 39 deletions.
57 changes: 37 additions & 20 deletions inbox/react/components.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Inbox Components"
sidebarTitle: "Components"
description: "Learn how to use the different components of the Inbox"
title: 'Inbox Components'
sidebarTitle: 'Components'
description: 'Learn how to use the different components of the Inbox'
---

## Components
Expand All @@ -20,7 +20,7 @@ It renders an opinionated `<Inbox />` with a bell button, that triggers a popove
#### Default Inbox

```tsx
import { Inbox } from "@novu/react";
import { Inbox } from '@novu/react';

function Novu() {
return (
Expand All @@ -35,7 +35,7 @@ function Novu() {
#### Controlled Popover state

```tsx
import { Inbox } from "@novu/react";
import { Inbox } from '@novu/react';

function Novu() {
const [open, setOpen] = React.useState(false);
Expand All @@ -55,8 +55,13 @@ function Novu() {

#### Custom Notification item

Customize the notification item by passing a render function to the `renderNotification` prop.
You can access the notification object and render the notification item as per your requirements.
The `notification.data` property allows you acessing the custom information while rendering notification item.
You can check how to pass it with the Novu Framework in-app step output [here](/sdks/framework/typescript/steps/inbox#inbox-step-output).

```tsx
import { Inbox } from "@novu/react";
import { Inbox } from '@novu/react';

function Novu() {
return (
Expand All @@ -67,6 +72,7 @@ function Novu() {
<div>
<h3>{notification.subject}</h3>
<p>{notification.body}</p>
<p>{notification.data.text}</p>
</div>
)}
/>
Expand All @@ -77,7 +83,7 @@ function Novu() {
#### Custom Bell

```tsx
import { Inbox } from "@novu/react";
import { Inbox } from '@novu/react';

function Novu() {
return (
Expand All @@ -97,7 +103,7 @@ function Novu() {
#### Handle notification click

```tsx
import { Inbox } from "@novu/react";
import { Inbox } from '@novu/react';

function Novu() {
return (
Expand All @@ -112,10 +118,15 @@ function Novu() {
}
```

#### Redirect on the notification click

The `redirect` [object](/sdks/framework/typescript/steps/inbox#inbox-step-output) allows to define the URL to visit when clicking on the notification item.
The value will be implicitly passed to the notification and used when click event happens.

#### Handle notification button clicks

```tsx
import { Inbox } from "@novu/react";
import { Inbox } from '@novu/react';

function Novu() {
return (
Expand All @@ -133,12 +144,17 @@ function Novu() {
}
```

#### Redirect on the notification action button click

The `redirect` [object](/sdks/framework/typescript/steps/inbox#inbox-step-output) on the `primaryAction` or `secondaryAction` prop allows to define the URL to visit when clicking on the notification action button.
The value will be implicitly passed to the action buttons and used when click event happens.

### Bell

The `Bell` component is used to display the notification bell icon. It can be used to show the number of unread notifications.

```tsx
import { Inbox, Bell } from "@novu/react";
import { Inbox, Bell } from '@novu/react';

function Novu() {
return (
Expand All @@ -157,8 +173,8 @@ function Novu() {
You can pass custom components as children to the `Bell` component to render the custom bell icon.

```tsx
import { Inbox, Bell } from "@novu/react";
import { BellIcon } from "./icons";
import { Inbox, Bell } from '@novu/react';
import { BellIcon } from './icons';

function Novu() {
return (
Expand All @@ -183,7 +199,7 @@ The `Notifications` component is used to display the list of notifications.
#### Notifications as a list without the Bell and Popover

```tsx
import { Inbox, Notifications } from "@novu/react";
import { Inbox, Notifications } from '@novu/react';

function Novu() {
return (
Expand All @@ -200,7 +216,7 @@ function Novu() {
### Notifications as a list with custom Notification item

```tsx
import { Inbox, Notifications } from "@novu/react";
import { Inbox, Notifications } from '@novu/react';

function Novu() {
return (
Expand All @@ -213,6 +229,7 @@ function Novu() {
<div>
<h3>{notification.subject}</h3>
<p>{notification.body}</p>
<p>{notification.data.text}</p>
</div>
)}
/>
Expand All @@ -227,7 +244,7 @@ The `Preferences` component is used to display the preferences. It can be used t
Use the `Preferences` component to show the preferences without the bell and popover.

```tsx
import { Inbox, Preferences } from "@novu/react";
import { Inbox, Preferences } from '@novu/react';

function Novu() {
return (
Expand All @@ -247,11 +264,11 @@ component allows you to bring your own popover component along with custom compo
Below is an example of how you can bring your own popover component with Radix UI.

```tsx
import React from "react";
import * as Popover from "@radix-ui/react-popover";
import { BellIcon, Cross2Icon } from "@radix-ui/react-icons";
import { Inbox, Bell, Notifications } from "@novu/react";
import "./styles.css";
import React from 'react';
import * as Popover from '@radix-ui/react-popover';
import { BellIcon, Cross2Icon } from '@radix-ui/react-icons';
import { Inbox, Bell, Notifications } from '@novu/react';
import './styles.css';

const PopoverDemo = () => (
<Inbox
Expand Down
114 changes: 95 additions & 19 deletions sdks/framework/typescript/steps/inbox.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "In-App Channel Step"
sidebarTitle: "Inbox"
icon: "inbox"
title: 'In-App Channel Step'
sidebarTitle: 'Inbox'
icon: 'inbox'
---

The `inbox` step allows you to send a message to your Inbox component. This is useful when you need to send a message to a user's inbox, such as a mobile app or web app.
Expand All @@ -13,13 +13,27 @@ The `inbox` step allows you to send a message to your Inbox component. This is u
subject: 'Welcome to Acme!',
body: 'We are excited to have you on board.',
avatar: 'https://acme.com/avatar.png',
redirect: {
url: 'https://acme.com/welcome',
target: '_blank',
},
primaryAction: {
label: 'Get Started',
url: 'https://acme.com/get-started',
redirect: {
url: 'https://acme.com/get-started',
target: '_self',
}
},
secondaryAction: {
label: 'Learn More',
url: 'https://acme.com/learn-more',
redirect: {
url: 'https://acme.com/learn-more',
target: '_self',
}
},
data: {
customData: 'customValue',
text: payload.text,
},
};
});
Expand All @@ -43,45 +57,107 @@ The `inbox` step allows you to send a message to your Inbox component. This is u
The body of the inbox notification. The main content of the notification.
</ParamField>
<ParamField path="subject" type="string">
The subject of the inbox notification. This property communicates the subject of the notification to the user.
The subject of the inbox notification. This property communicates the subject
of the notification to the user.
</ParamField>
<ParamField path="avatar" type="string">
The avatar shown in the inbox notification. When specified, overrides the avatar of the actor initiating the notification.
The avatar shown in the inbox notification. When specified, overrides the
avatar of the actor initiating the notification.
</ParamField>
<ParamField path="redirect" type="object">
The redirect object is used to define the URL to visit when interacting with
the notification. This property can be omitted in place of an
`onNotificationClick`
[handler](/inbox/react/components#handle-notification-click) implemented in
the Inbox component.
<Expandable title="properties" defaultOpen>
<ParamField path="url" type="string" required>
The URL to visit when clicking on the notification.
</ParamField>
<ParamField path="target" type="string">
The target attribute specifies where the new window or tab will be opened.
This property is optional and defaults to `_blank`. The supported values
are: `_self, _blank, _parent, _top, _unfencedTop`.
</ParamField>
</Expandable>
</ParamField>
<ParamField path="primaryAction" type="object">
Define a primary action to be shown in the inbox notification. The primary action will appear with an accent color.
Define a primary action to be shown in the inbox notification. The primary
action will appear with an accent color.
<Expandable title="properties" defaultOpen>
<ParamField path="label" type="string" required>
The label of the action.
The label of the action.
</ParamField>
<ParamField path="url" type="string">
The URL to visit when interacting with the action. This property can be omitted in place of an `onClick` handler implemented in the Inbox component.
<ParamField path="redirect" type="object">
The redirect object is used to define the URL to visit when interacting
with the notification action buttons. This property can be omitted in
place of an `onPrimaryActionClick`
[handler](/inbox/react/components#handle-notification-button-clicks)
implemented in the Inbox component.
<Expandable title="properties">
<ParamField path="url" type="string" required>
The URL to visit when clicking on the notification action button.
</ParamField>
<ParamField path="target" type="string">
The target attribute specifies where the new window or tab will be
opened. This property is optional and defaults to `_blank`. The
supported values are: `_self, _blank, _parent, _top, _unfencedTop`.
</ParamField>
</Expandable>
</ParamField>
</Expandable>
</ParamField>
<ParamField path="secondaryAction" type="object">
Define a secondary action to be shown in the inbox notification. The secondary action will appear with a muted color.
Define a secondary action to be shown in the inbox notification. The secondary
action will appear with a muted color.
<Expandable title="properties" defaultOpen>
<ParamField path="label" type="string" required>
The label of the action.
The label of the action.
</ParamField>
<ParamField path="url" type="string">
The URL to visit when interacting with the action. This property can be omitted in place of an `onClick` handler implemented in the Inbox component.
<ParamField path="redirect" type="object">
The redirect object is used to define the URL to visit when interacting
with the notification action buttons. This property can be omitted in
place of an `onSecondaryActionClick`
[handler](/inbox/react/components#handle-notification-button-clicks)
implemented in the Inbox component.
<Expandable title="properties">
<ParamField path="url" type="string" required>
The URL to visit when clicking on the notification action button.
</ParamField>
<ParamField path="target" type="string">
The target attribute specifies where the new window or tab will be
opened. This property is optional and defaults to `_blank`. The
supported values are: `_self, _blank, _parent, _top, _unfencedTop`.
</ParamField>
</Expandable>
</ParamField>
</Expandable>
</ParamField>
<ParamField path="data" type="object">
Custom data to be sent with the notification. This data can be used to
[customize the notification item
rendered](/inbox/react/components#custom-notification-item) in the Inbox.
</ParamField>

## Inbox Step Result

<ParamField path="seen" type="boolean" required>
A flag indicating if the notification has been seen. This property is useful when conditionally delivering notifications in subsequent steps via the `skip` function. A notification is marked as seen when the user views the notification.
A flag indicating if the notification has been seen. This property is useful
when conditionally delivering notifications in subsequent steps via the `skip`
function. A notification is marked as seen when the user views the
notification.
</ParamField>
<ParamField path="read" type="boolean" required>
A flag indicating if the notification has been read. A notification is marked as read when the user confirms the notification.
A flag indicating if the notification has been read. A notification is marked
as read when the user confirms the notification.
</ParamField>
<ParamField path="lastSeenDate" type="date | null" required>
The date the notification was last seen. This corresponds to the date the `seen` property was set to `true`, or `null` if the notification has not been seen.
The date the notification was last seen. This corresponds to the date the
`seen` property was set to `true`, or `null` if the notification has not been
seen.
</ParamField>
<ParamField path="lastReadDate" type="date | null" required>
The date the notification was last read. This corresponds to the date the `read` property was set to `true`, or `null` if the notification has not been read.
The date the notification was last read. This corresponds to the date the
`read` property was set to `true`, or `null` if the notification has not been
read.
</ParamField>

0 comments on commit 4a71a60

Please sign in to comment.