@trycourier/react-hooks 1.62.3-internal.6997551.0 → 2.0.1-internal.2d2dd97.0

package/README.md

@@ -15,101 +15,6 @@
 
 This also enables using this package with `react-native` in a much simpler way.
 
-#### Elemental Inbox
-
-React Hooks exposes two inbox hooks, `useInbox` and `useElementalInbox`. Elemental inbox is a new inbox
-that takes advantage of Courier's content specification, [Elemental](https://www.courier.com/docs/elemental/).
-
-Elemental provides a more advanced format for delivered
-notifications. This includes the ability to add customized buttons, images, and markdown formatted text
-to your messages.
-
-See [types](#1typesmd) for details on the interface.
-
-#### Example Usage
-
-```tsx
-import { CourierProvider } from "@trycourier/react-provider";
-import { useElementalInbox } from "@trycourier/react-hooks";
-
-const MyApp = () => {
-  /**
-   * Auth token for courier provider, can be a token from Courier's auth/issue-token endpoint
-   * or a JWT signed with a valid courier api key. Must include scope: "user_id:<user_id_here> inbox:read:messages",
-   * you must also include the "inbox:write:events" scope if making a write request or mutation as well.
-   *
-   * For more information on the auth/issue-token endpoint, visit:
-   * https://courier.com/docs/reference/auth/intro/
-   */
-  const authorization = await fetchAuthToken();
-
-  return (
-    <CourierProvider authorization="abc123" userId="MY_USER_ID">
-      <MyInbox />
-    </CourierProvider>
-  );
-};
-
-const MyInbox = () => {
-  const inbox = useElementalInbox();
-
-  useEffect(() => {
-    inbox.fetchMessages();
-  }, []);
-
-  // Sets message.read to current date
-  const handleReadMessage = (message) => () => {
-    inbox.markMessageRead(message.messageId);
-  };
-
-  // Removes message.read
-  const handleUnreadMessage = (message) => () => {
-    inbox.markMessageUnread(message.messageId);
-  };
-
-  // Archived messages are not included in inbox.fetchMessages()
-  const handleArchiveMessage = (message) => () => {
-    inbox.markMessageArchived(message.messageId);
-  };
-
-  // If the supplied authorization token is short lived, renew the session with a fresh token
-  // proactively before the token is set to expire. Here we use 5 minutes assuming our token only
-  // lasts 10 minutes
-  useEffect(() => {
-    const interval = setInterval(async () => {
-      const authorization = await fetchAuthToken();
-      inbox.renewSession(authorization);
-    }, 300000);
-
-    // Return a cleanup function to tell react how to stop renewal when the component is unmounted.
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <>
-      {inbox.messages.map((message) => {
-        return (
-          <Message>
-            {message.read ? (
-              <>
-                <button onClick={handleUnreadMessage(message)}>
-                  Unread Me
-                </button>
-                <button onClick={handleArchiveMessage(message)}>
-                  Archive Me
-                </button>
-              </>
-            ) : (
-              <button onClick={handleReadMessage(message)}>Read Me</button>
-            )}
-          </Message>
-        );
-      })}
-    </>
-  );
-};
-```
-
 <a name="1typesmd"></a>
 
 ### [Types](#types)
@@ -119,14 +24,6 @@ Standard Inbox (`useInbox`):
 ```ts
 const inbox: IInbox & IInboxActions = useInbox();
 
-interface ITab {
-  filters: {
-    isRead?: boolean;
-  };
-  id: string;
-  label: string;
-}
-
 interface IMessage {
   blocks?: Array<IActionBlock | ITextBlock>;
   body: string;
@@ -155,83 +52,20 @@ interface IInboxActions {
   markAllAsRead: () => void;
   markMessageRead: (messageId: string, trackingId: string) => Promise<void>;
   markMessageUnread: (messageId: string, trackingId: string) => Promise<void>;
-  setCurrentTab: (newTab: ITab) => void;
   setView: (view: "messages" | "preferences") => void;
   toggleInbox: (isOpen?: boolean) => void;
 }
 
 interface IInbox {
-  currentTab?: ITab;
   isLoading?: boolean;
   isOpen?: boolean;
   messages?: Array<IMessage>;
   startCursor?: string;
-  tabs?: ITab[];
   unreadMessageCount?: number;
   view?: "messages" | "preferences";
 }
 ```
 
-Elemental Inbox (`useElementalInbox`):
-
-```ts
-// This interface defines the return value of useElemental Inbox
-interface IElementalInbox {
-  brand?: Brand;
-  from?: number;
-  isLoading?: boolean;
-  isOpen?: boolean;
-  lastMessagesFetched?: number;
-  messages?: Array<IElementalInboxMessage>;
-  startCursor?: string;
-  unreadMessageCount?: number;
-  view?: "messages" | "preferences";
-  /** Fetches messages from the server, sets inbox.messages to the received value */
-  fetchMessages: (params?: IFetchMessagesParams) => void;
-  /** Returns a count of messages that do not have a message.read date */
-  getUnreadMessageCount: (params?: IGetInboxMessagesParams) => void;
-  init: (inbox: IElementalInbox) => void;
-  /** Marks all messages as read by setting message.read to the current ISO 8601 date */
-  markAllAsRead: () => void;
-  /** Archives the supplied message, archived messages are not returned by fetchMessages */
-  markMessageArchived: (messageId: string) => Promise<void>;
-  /** Sets message.read to the current ISO 8601 date  */
-  markMessageRead: (messageId: string) => Promise<void>;
-  /** Removes message.read, signalling that the message is no longer read */
-  markMessageUnread: (messageId: string) => Promise<void>;
-  setView: (view: "messages" | "preferences") => void;
-  toggleInbox: (isOpen?: boolean) => void;
-
-  /**
-   * Allows for renewal of sessions authorized with short lived tokens.
-   * For example, if the supplied authorization token lasts 10 minutes,
-   * this function can be called with a new token every 5 minutes to ensure
-   * messages are received in real time with no interruptions.
-   */
-  renewSession: (authorization: string) => void;
-}
-
-interface IInboxMessage {
-  created?: string;
-  messageId: string;
-  preview?: string;
-  /** ISO 8601 date the message was read */
-  read?: string;
-  title?: string;
-}
-
-export interface IFetchMessagesParams {
-  params?: IGetInboxMessagesParams;
-  after?: string;
-}
-
-export interface IGetInboxMessagesParams {
-  status?: "read" | "unread";
-  limit?: number;
-  tags?: string[];
-}
-```
-
 <a name="2eventsmd"></a>
 
 ### [Events](#events)
@@ -242,7 +76,7 @@ Inbox supports a few different events that can be triggered on the client side.
 
 These events are:
 
-- Delivered
+- Opened
 - Read
 - Unread
 - Click
@@ -327,6 +161,68 @@ const MyApp = () => {
 };
 ```
 
+<a name="3use-elemental-inboxmd"></a>
+
+> useElementalInbox is in **BETA**
+
+```ts
+interface IInboxMessage {
+  created?: string;
+  messageId: string;
+  preview?: string;
+  /** ISO 8601 date the message was read */
+  read?: string;
+  title?: string;
+}
+
+export interface IFetchMessagesParams {
+  params?: IGetInboxMessagesParams;
+  after?: string;
+}
+
+export interface IGetInboxMessagesParams {
+  status?: "read" | "unread";
+  limit?: number;
+  tags?: string[];
+}
+
+// This interface defines the return value of useElemental Inbox
+interface IElementalInbox {
+  brand?: Brand;
+  from?: number;
+  isLoading?: boolean;
+  isOpen?: boolean;
+  lastMessagesFetched?: number;
+  messages?: Array<IElementalInboxMessage>;
+  startCursor?: string;
+  unreadMessageCount?: number;
+  view?: "messages" | "preferences";
+  /** Fetches messages from the server, sets inbox.messages to the received value */
+  fetchMessages: (params?: IFetchMessagesParams) => void;
+  /** Returns a count of messages that do not have a message.read date */
+  getUnreadMessageCount: (params?: IGetInboxMessagesParams) => void;
+  init: (inbox: IElementalInbox) => void;
+  /** Marks all messages as read by setting message.read to the current ISO 8601 date */
+  markAllAsRead: () => void;
+  /** Archives the supplied message, archived messages are not returned by fetchMessages */
+  markMessageArchived: (messageId: string) => Promise<void>;
+  /** Sets message.read to the current ISO 8601 date  */
+  markMessageRead: (messageId: string) => Promise<void>;
+  /** Removes message.read, signalling that the message is no longer read */
+  markMessageUnread: (messageId: string) => Promise<void>;
+  setView: (view: "messages" | "preferences") => void;
+  toggleInbox: (isOpen?: boolean) => void;
+
+  /**
+   * Allows for renewal of sessions authorized with short lived tokens.
+   * For example, if the supplied authorization token lasts 10 minutes,
+   * this function can be called with a new token every 5 minutes to ensure
+   * messages are received in real time with no interruptions.
+   */
+  renewSession: (authorization: string) => void;
+}
+```
+
 #### Manually calling events (`useElementalInbox` Example)
 
 You can call events manually by importing the corresponding function from the react hook.
@@ -388,3 +284,98 @@ const MyApp = () => {
   );
 };
 ```
+
+#### Elemental Inbox
+
+React Hooks exposes two inbox hooks, `useInbox` and `useElementalInbox`. Elemental inbox is a new inbox
+that takes advantage of Courier's content specification, [Elemental](https://www.courier.com/docs/elemental/).
+
+Elemental provides a more advanced format for delivered
+notifications. This includes the ability to add customized buttons, images, and markdown formatted text
+to your messages.
+
+See [types](#1typesmd) for details on the interface.
+
+#### Example Usage
+
+```tsx
+import { CourierProvider } from "@trycourier/react-provider";
+import { useElementalInbox } from "@trycourier/react-hooks";
+
+const MyApp = () => {
+  /**
+   * Auth token for courier provider, can be a token from Courier's auth/issue-token endpoint
+   * or a JWT signed with a valid courier api key. Must include scope: "user_id:<user_id_here> inbox:read:messages",
+   * you must also include the "inbox:write:events" scope if making a write request or mutation as well.
+   *
+   * For more information on the auth/issue-token endpoint, visit:
+   * https://courier.com/docs/reference/auth/intro/
+   */
+  const authorization = await fetchAuthToken();
+
+  return (
+    <CourierProvider authorization="abc123" userId="MY_USER_ID">
+      <MyInbox />
+    </CourierProvider>
+  );
+};
+
+const MyInbox = () => {
+  const inbox = useElementalInbox();
+
+  useEffect(() => {
+    inbox.fetchMessages();
+  }, []);
+
+  // Sets message.read to current date
+  const handleReadMessage = (message) => () => {
+    inbox.markMessageRead(message.messageId);
+  };
+
+  // Removes message.read
+  const handleUnreadMessage = (message) => () => {
+    inbox.markMessageUnread(message.messageId);
+  };
+
+  // Archived messages are not included in inbox.fetchMessages()
+  const handleArchiveMessage = (message) => () => {
+    inbox.markMessageArchived(message.messageId);
+  };
+
+  // If the supplied authorization token is short lived, renew the session with a fresh token
+  // proactively before the token is set to expire. Here we use 5 minutes assuming our token only
+  // lasts 10 minutes
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      const authorization = await fetchAuthToken();
+      inbox.renewSession(authorization);
+    }, 300000);
+
+    // Return a cleanup function to tell react how to stop renewal when the component is unmounted.
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      {inbox.messages.map((message) => {
+        return (
+          <Message>
+            {message.read ? (
+              <>
+                <button onClick={handleUnreadMessage(message)}>
+                  Unread Me
+                </button>
+                <button onClick={handleArchiveMessage(message)}>
+                  Archive Me
+                </button>
+              </>
+            ) : (
+              <button onClick={handleReadMessage(message)}>Read Me</button>
+            )}
+          </Message>
+        );
+      })}
+    </>
+  );
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-hooks",
-  "version": "1.62.3-internal.6997551.0+6997551",
+  "version": "2.0.1-internal.2d2dd97.0+2d2dd97",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,7 +20,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/client-graphql": "^1.62.3-internal.6997551.0+6997551",
+    "@trycourier/client-graphql": "^2.0.1-internal.2d2dd97.0+2d2dd97",
     "deep-extend": "^0.6.0",
     "rimraf": "^3.0.2"
   },
@@ -36,5 +36,5 @@
     ".": "./dist/index.js",
     "./use-inbox": "./dist/inbox/use-inbox.js"
   },
-  "gitHead": "69975515ba610266714a3ee576ee0f31ba19ed13"
+  "gitHead": "2d2dd9794f242e01a9fd4e158dff931a7fe67904"
 }