@trycourier/react-hooks 1.48.6-internal.517ceb8.0 → 1.48.6-internal.d175161.0

package/README.md

@@ -15,11 +15,107 @@
 
 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"
+   *
+   * 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">
+      <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)
 
-```
+Standard Inbox (`useInbox`):
+
+```ts
 const inbox: IInbox & IInboxActions = useInbox();
 
 interface ITab {
@@ -74,6 +170,66 @@ interface IInbox {
 }
 ```
 
+Elemental Inbox (`useElementalInbox`):
+
+```ts
+// This interface defines the return value of useElemental Inbox
+interface IElementalInbox {
+  lastMessagesFetched?: number;
+  brand?: Brand;
+  from?: number;
+  isLoading?: boolean;
+  isOpen?: boolean;
+  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)
@@ -95,7 +251,7 @@ Some of these events are called automatically.
 - Delivered events are called automatically inside the Courier Provider when a message has been delivered through the websocket
 - Click events are triggered using our `click through tracking` links. Click events will also automatically trigger a `read` event.
 
-#### Manually calling events
+#### Manually calling events (`useInbox` Example)
 
 You can call events manually by importing the corresponding function from the react hook.
 
@@ -138,7 +294,69 @@ const MyInbox = () => {
 
   return (
     <Container>
-      {inbox.messsages.map((message) => {
+      {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>
+        );
+      })}
+    </Container>
+  );
+};
+
+const MyApp = () => {
+  return (
+    <CourierProvider userId="MY_USER_ID" clientKey="MY_CLIENT_KEY">
+      <MyInbox />
+    </CourierProvider>
+  );
+};
+```
+
+#### Manually calling events (`useElementalInbox` Example)
+
+You can call events manually by importing the corresponding function from the react hook.
+
+For Example:
+
+```js
+import { CourierProvider } from "@trycourier/react-provider";
+import { useElementalInbox } from "@trycourier/react-hooks";
+
+const MyInbox = () => {
+  const inbox = useElementalInbox();
+
+  useEffect(() => {
+    inbox.fetchMessages();
+  }, []);
+
+  const handleReadMessage = (message) => () => {
+    inbox.markMessageRead(message.messageId);
+  };
+
+  const handleUnreadMessage = (message) => () => {
+    inbox.markMessageUnread(message.messageId);
+  };
+
+  const handleArchiveMessage = (message) => () => {
+    inbox.markMessageArchived(message.messageId);
+  };
+
+  return (
+    <Container>
+      {inbox.messages.map((message) => {
         return (
           <Message>
             {message.read ? (

package/dist/inbox/elemental-inbox/use-inbox-actions.js

@@ -43,7 +43,8 @@ var useElementalInboxActions = function useElementalInboxActions() {
       dispatch = _useCourier.dispatch,
       inbox = _useCourier.inbox,
       userId = _useCourier.userId,
-      userSignature = _useCourier.userSignature;
+      userSignature = _useCourier.userSignature,
+      transport = _useCourier.transport;
 
   var courierClient = (0, _clientGraphql.createCourierClient)({
     authorization: authorization,
@@ -192,6 +193,30 @@ var useElementalInboxActions = function useElementalInboxActions() {
       }
 
       return markMessageArchived;
+    }(),
+    renewSession: function () {
+      var _renewSession = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(token) {
+        return _regenerator["default"].wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                if (transport instanceof _reactProvider.CourierTransport) {
+                  transport.renewSession(token);
+                }
+
+              case 1:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5);
+      }));
+
+      function renewSession(_x4) {
+        return _renewSession.apply(this, arguments);
+      }
+
+      return renewSession;
     }()
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-hooks",
-  "version": "1.48.6-internal.517ceb8.0+517ceb8",
+  "version": "1.48.6-internal.d175161.0+d175161",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,7 +20,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/client-graphql": "^1.48.6-internal.517ceb8.0+517ceb8",
+    "@trycourier/client-graphql": "^1.48.6-internal.d175161.0+d175161",
     "deep-extend": "^0.6.0",
     "rimraf": "^3.0.2"
   },
@@ -36,5 +36,5 @@
     ".": "./dist/index.js",
     "./use-inbox": "./dist/inbox/use-inbox.js"
   },
-  "gitHead": "517ceb82177ad9b1fd05a47196c1f8c66a3a7b04"
+  "gitHead": "d175161b39549991b55ff7fae9e5512af738ad83"
 }

package/typings/inbox/elemental-inbox/use-inbox-actions.d.ts

@@ -5,15 +5,28 @@ export interface IFetchMessagesParams {
     after?: string;
 }
 interface IInboxActions {
+    /** 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;
 }
 declare const useElementalInboxActions: () => IInboxActions;
 export default useElementalInboxActions;

package/typings/inbox/elemental-inbox/use-inbox-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-inbox-actions.d.ts","sourceRoot":"","sources":["../../../src/inbox/elemental-inbox/use-inbox-actions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AASrE,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,aAAa,EAAE,CAAC,MAAM,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,qBAAqB,EAAE,CAAC,MAAM,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAClE,IAAI,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACpD,WAAW,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED,QAAA,MAAM,wBAAwB,QAAO,aAgFpC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"use-inbox-actions.d.ts","sourceRoot":"","sources":["../../../src/inbox/elemental-inbox/use-inbox-actions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AASrE,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,kFAAkF;IAClF,aAAa,EAAE,CAAC,MAAM,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,uEAAuE;IACvE,qBAAqB,EAAE,CAAC,MAAM,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAClE,IAAI,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACvC,sFAAsF;IACtF,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,yFAAyF;IACzF,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,sDAAsD;IACtD,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,0EAA0E;IAC1E,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACpD,WAAW,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;;;OAKG;IACH,YAAY,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,wBAAwB,QAAO,aAsFpC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}