Docs for the inbox Schedule page (#976)

* Docs for the inbox Schedule page

* Upate styling docs with Schdedule feature

* Update content/docs/platform/inbox/features/schedule.mdx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Create docs for the useSchedule in React SDK

* Update content/docs/platform/inbox/configuration/styling.mdx

Co-authored-by: DianaHackmamba <[email protected]>

* Update content/docs/platform/inbox/features/schedule.mdx

Co-authored-by: DianaHackmamba <[email protected]>

* Update content/docs/platform/inbox/features/schedule.mdx

Co-authored-by: DianaHackmamba <[email protected]>

* Update content/docs/platform/sdks/react/hooks/use-schedule.mdx

Co-authored-by: DianaHackmamba <[email protected]>

* Update base on feedback

* Update content/docs/platform/inbox/features/schedule.mdx

Co-authored-by: DianaHackmamba <[email protected]>

* Update the docs for JS SDK

* Update based on feedback

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: DianaHackmamba <[email protected]>

Author: 3 people

content/docs/platform/inbox/configuration/meta.json

@@ -1,6 +1,6 @@
 {
   "title": "Customize and configure",
   "icon": "SlidersHorizontal",
-  "pages": ["styling", "icons", "tabs", "preferences", "snooze", "data-object"],
+  "pages": ["styling", "icons", "tabs", "preferences", "data-object"],
   "description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, and snooze functionality"
 }

content/docs/platform/inbox/configuration/styling.mdx

@@ -160,6 +160,14 @@ Here's a list of some available elements that can be styled using the elements o
 | Snooze button                | `notificationSnooze__button`          |
 | Unread/read indicator button | `notificationUnread__button`          |
 | Notification list container  | `notificationList`                    |
+| Schedule container           | `scheduleContainer`                     |
+| Schedule header              | `scheduleHeader`                        |
+| Schedule body                | `scheduleBody`                          |
+| Schedule table               | `scheduleTable`                         |
+| Day schedule copy title      | `dayScheduleCopyTitle`                  |
+| Day schedule copy menu       | `dayScheduleCopy__dropdownContent`      |
+| Time select drop-down list         | `timeSelect__dropdownTrigger`           |
+| Time select list             | `timeSelect__dropdownContent`           |
 
 <Callout type="info" title="How to find other elements?">
   Any selector that appears before the 🔔 emoji in the Devtools, can be targeted via the elements property in the appearance prop (stripping the `nv-` prefix). You can also use TS autocomplete to find the available elements.
@@ -352,6 +360,31 @@ You can customize specific parts of the Inbox UI by providing callback functions
 | `notificationDeliveredAt__icon`               | `(context: { notification: Notification }) => string`                                                             |
 | `notificationSnoozedUntil__icon`              | `(context: { notification: Notification }) => string`                                                             |
 | `notificationDot`                             | `(context: { notification: Notification }) => string`                                                             |
+| **Schedule**                              |                                                                 |
+| `scheduleContainer`                       | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleHeader`                          | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleLabelContainer`                  | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleLabelIcon`                       | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleLabel`                           | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleActionsContainer`                | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleActionsContainerRight`           | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleBody`                            | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleDescription`                     | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleTable`                           | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleTableHeader`                     | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleHeaderColumn`                    | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleTableBody`                       | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleBodyRow`                         | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleBodyColumn`                      | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleInfoContainer`                   | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleInfoIcon`                        | `(context: { schedule?: Schedule }) => string`                  |
+| `scheduleInfo`                            | `(context: { schedule?: Schedule }) => string`                  |
+| **Day Schedule Copy**                      |                                                                 |
+| `dayScheduleCopyTitle`                    | `(context: { schedule?: Schedule }) => string`                  |
+| `dayScheduleCopyIcon`                     | `(context: { schedule?: Schedule }) => string`                  |
+| `dayScheduleCopySelectAll`                | `(context: { schedule?: Schedule }) => string`                  |
+| `dayScheduleCopyDay`                      | `(context: { schedule?: Schedule }) => string`                  |
+| `dayScheduleCopyFooterContainer`          | `(context: { schedule?: Schedule }) => string`                  |
 
   </Accordion>
 </Accordions>

content/docs/platform/inbox/features/meta.json

@@ -0,0 +1,6 @@
+{
+  "title": "<Inbox /> Features",
+  "icon": "Blocks",
+  "pages": ["snooze", "schedule"],
+  "description": "Learn how to customize the appearance and behavior of the inbox component to match your application’s design system."
+}

content/docs/platform/inbox/features/schedule.mdx

@@ -0,0 +1,101 @@
+---
+title: 'Schedule'
+description: "Learn how subscribers can use the Schedule feature in the Inbox component to control when they receive notifications from email, SMS and push channels."
+icon: 'CalendarCheck'
+---
+
+The **Schedule** feature in the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method> lets subscribers control when they want to receive notifications from email, SMS, and push channels.
+
+By defining their hours of availability from the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method> UI, subscribers can automatically skip notifications outside of their chosen time range.
+
+![](/images/inbox/schedule.png)
+
+<Callout>In-app notifications and notifications from critical workflows are never paused and will always be delivered, regardless of schedule settings.</Callout>
+
+## How scheduling works
+
+The schedule functionality is based on a clear set of rules controlled by the subscriber within the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method>. When a subscriber enables their schedule, they can then manage their availability for each day of the week.
+
+### Daily availability
+For any day that the main schedule is active, there will be two possible states:
+
+- **Day is enabled**: If a day is toggled on, then the subscriber must set a time range. Notifications will only be delivered within these hours.
+
+- **Day is disabled**: If a day is toggled off, then the subscriber will not receive any non-critical notifications for that entire day.
+
+### Automatic timezone handling
+
+The schedule operates in the subscriber's local timezone, detected automatically from their system settings. There is no need for manual configuration.
+
+For example, if a subscriber in Warsaw sets their schedule from 9:00 AM to 5:00 PM, they will receive notifications during those hours in Central European Time (CET).
+
+## Manage Schedule
+
+The schedule UI in the preferences section is designed to be intuitive, giving subscribers several tools to quickly configure their availability.
+
+You can access **Schedule** from the **Preferences** section of the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method> UI. By default, scheduling is turned off, and all notifications will be delivered normally.
+
+![Manage schedule](/images/inbox/inbox-schedule.png)
+
+### Enable the main schedule
+
+The entire feature is controlled by a main schedule toggle. When a subscriber turns this on, they can begin configuring individual days. When it's off, all other settings will be inactive, and notifications will be delivered normally.
+
+### Setting daily availability
+
+For each day of the week, the subscriber can:
+
+- Use the toggle next to the day's name to activate or deactivate it.
+- If activated, use the time-selector menus to set a "from" and "to" time. The time pickers are set to 30-minute increments for ease of use.
+
+### Edit or remove schedules
+
+Existing availability can be adjusted at any time. Subscribers can:
+- Change the start and end times for a day.
+- Re-enable a previously disabled day.
+- Clear a schedule entirely to return to unrestricted delivery.
+
+### Copying times to multiple days
+
+To make setup faster, subscribers can configure the time for one day and apply it to others in a few clicks:
+
+1. Set the desired time range for a single day.
+2. Click **Copy times to...** associated with that day.
+3. In the menu that appears, select the other days of the week to apply this schedule to.
+4. Click "Apply." The selected days will automatically be enabled and updated with the new time range.
+
+![Copying times to multiple days](/images/inbox/schedule.gif)
+
+### Automatic saving
+
+All changes made in the schedule interface will be saved automatically in the background. The UI updates optimistically, providing a seamless experience without requiring the subscriber to click save.
+
+## Set default schedule for Subscribers
+
+You can provide a default schedule for your subscribers by passing the `defaultSchedule` prop to the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method>. This is useful for pre-configuring a recommended schedule that your subscribers can then customize.
+
+This default schedule only applies if a subscriber has not yet configured their own schedule. Once they make any changes, their custom schedule takes precedence.
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function InboxWithDefaultSchedule() {
+  return (
+      <Inbox
+        applicationIdentifier="YOUR_APP_IDENTIFIER"
+        subscriberId="YOUR_SUBSCRIBER_ID"
+        defaultSchedule={{
+          isEnabled: true,
+          weeklySchedule: {
+            tuesday: {
+              isEnabled: true,
+              hours: [{start: '09:00 AM', end: '07:00 PM'}]
+            }
+          }
+        }}
+      />
+  );
+}
+
+export default InboxWithDefaultSchedule;
+```

content/docs/platform/inbox/configuration/snooze.mdx renamed to content/docs/platform/inbox/features/snooze.mdx

@@ -2,7 +2,7 @@
   "pages": [
     "overview",
     "setup-inbox",
-    "navigation-and-events",
+    "features",
     "configuration",
     "advanced-customization",
     "advanced-concepts",

content/docs/platform/inbox/meta.json

@@ -466,6 +466,64 @@ The response will be of type:
   }
 }} />
 
+
+### Schedule
+
+The `preferences.schedule` submodule lets you fetch and update a subscriber’s delivery schedule.
+
+#### get
+
+Fetches the subscriber’s schedule.
+
+```tsx
+const novu = new Novu(...);
+
+const { data: { schedule } } = await novu.preferences.schedule.get();
+```
+
+#### update
+
+Updates the subscriber’s schedule. You can update the entire weekly schedule or only specific days.
+
+```tsx
+const novu = new Novu(...);
+
+// Update schedule via preferences
+const { data: { schedule } } = await novu.preferences.schedule.update({
+  weeklySchedule: {
+    monday: {
+      isEnabled: true,
+      hours: [{ start: '09:00 AM', end: '05:00 PM' }],
+    },
+  },
+});
+
+// Or update directly from a Schedule instance
+const { data: { schedule: updatedSchedule } } =
+  await schedule.update({ isEnabled: false });
+```
+
+### Schedule Class
+
+A `Schedule` instance is returned when fetching or updating a schedule.
+
+<TypeTable name="Schedule" type={{
+    "isEnabled": {
+      "description": "Whether the schedule is active",
+      "type": "boolean"
+    },
+    "weeklySchedule": {
+      "description": "A map of days with availability settings",
+      "type": "WeeklySchedule"
+    },
+    "update": {
+      "description": "Update the schedule with partial data",
+      "type": "(schedule: Partial<WeeklySchedule>) => Result<Schedule>"
+    }
+  }}
+/>
+
+
 ## Events
 
 The Novu client provides real-time event handling through WebSocket connections.
@@ -475,6 +533,10 @@ The Novu client provides real-time event handling through WebSocket connections.
 - `notifications.notification_received`: Triggered when a new notification is received
 - `notifications.unread_count_changed`: Triggered when the unread count changes
 - `notifications.unseen_count_changed`: Triggered when the unseen count changes
+- `preferences.schedule.get.pending`: Triggered when fetching a schedule starts
+- `preferences.schedule.get.resolved`: Triggered when fetching a schedule succeeds
+- `preferences.schedule.update.pending`: Triggered when updating a schedule starts
+- `preferences.schedule.update.resolved`: Triggered when updating a schedule succeeds
 
 ### Usage
 
@@ -496,6 +558,10 @@ novu.on('notifications.unread_count_changed', (data) => {
 novu.on('notifications.unseen_count_changed', (data) => {
   console.log('Unseen count:', data);
 });
+
+novu.on('preferences.schedule.update.resolved', ({ data }) => {
+  console.log('Schedule updated:', data.schedule);
+});
 ```
 
 ## Types

content/docs/platform/sdks/javascript/index.mdx

@@ -1,3 +1,10 @@
 {
-  "pages": ["novu-provider", "use-novu", "use-notifications", "use-counts", "use-preferences"]
+  "pages": [
+    "novu-provider",
+    "use-novu",
+    "use-notifications",
+    "use-counts",
+    "use-preferences",
+    "use-schedule"
+  ]
 }