@trycourier/react-hooks 1.16.0 → 1.16.1-internal.2e7fdad.0

package/README.md

@@ -3,6 +3,7 @@
 
 - [Overview](#overview)
 - [Types](#types)
+- [Events](#events)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -42,6 +43,7 @@ interface IMessage {
     clickAction: string;
   };
   trackingIds?: {
+    archiveTrackingId: string;
     clickTrackingId: string;
     deliveredTrackingId: string;
     readTrackingId: string;
@@ -72,3 +74,98 @@ interface IInbox {
   view?: "messages" | "preferences";
 }
 ```
+
+<a name="2eventsmd"></a>
+
+### [Events](#events)
+
+#### Inbox
+
+Inbox supports a few different events that can be triggered on the client side.
+
+These events are:
+
+- Delivered
+- Read
+- Unread
+- Click
+- Archive
+
+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
+
+You can call events manually by importing the corresponding function from the react hook.
+
+For Example:
+
+```js
+import { CourierProvider } from "@trycourier/react-provider";
+import { useInbox } from "@trycourier/react-hooks";
+
+const MyInbox = () => {
+  const inbox = useInbox();
+
+  useEffect(() => {
+    inbox.fetchMessages();
+  }, []);
+
+  const handleReadMessage = (message) => (event) => {
+    event.preventDefault();
+    inbox.markMessageRead(
+      message.messageId,
+      message.trackingIds.readTrackingId
+    );
+  };
+
+  const handleUnreadMessage = (message) => (event) => {
+    event.preventDefault();
+    inbox.markMessageUnread(
+      message.messageId,
+      message.trackingIds.unreadTrackingId
+    );
+  };
+
+  const handleArchiveMessage = (message) => (event) => {
+    event.preventDefault();
+    inbox.markMessageArchived(
+      message.messageId,
+      message.trackingIds.archiveTrackingId
+    );
+  };
+
+  return (
+    <Container>
+      {inbox.messsages.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>
+  );
+};
+```

package/dist/inbox/reducer.js

@@ -162,6 +162,28 @@ var _default = function _default() {
         });
       }
 
+    case "inbox/MARK_MESSAGE_ARCHIVED":
+      {
+        var _state$unreadMessageC3, _state$messages5;
+
+        var _unreadMessageCount2 = (_state$unreadMessageC3 = state.unreadMessageCount) !== null && _state$unreadMessageC3 !== void 0 ? _state$unreadMessageC3 : 0;
+
+        var _newMessages = state === null || state === void 0 ? void 0 : (_state$messages5 = state.messages) === null || _state$messages5 === void 0 ? void 0 : _state$messages5.filter(function (message) {
+          var isMatching = message.messageId === action.payload.messageId;
+
+          if (isMatching && !message.read) {
+            _unreadMessageCount2 = Math.max(_unreadMessageCount2 - 1, 0);
+          }
+
+          return !isMatching;
+        });
+
+        return _objectSpread(_objectSpread({}, state), {}, {
+          messages: _newMessages,
+          unreadMessageCount: _unreadMessageCount2
+        });
+      }
+
     case "inbox/FETCH_MESSAGES/ERROR":
       {
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -171,10 +193,10 @@ var _default = function _default() {
 
     case "inbox/NEW_MESSAGE":
       {
-        var _state$unreadMessageC3, _action$payload$messa, _action$payload$data;
+        var _state$unreadMessageC4, _action$payload$messa, _action$payload$data;
 
         return _objectSpread(_objectSpread({}, state), {}, {
-          unreadMessageCount: ((_state$unreadMessageC3 = state === null || state === void 0 ? void 0 : state.unreadMessageCount) !== null && _state$unreadMessageC3 !== void 0 ? _state$unreadMessageC3 : 0) + 1,
+          unreadMessageCount: ((_state$unreadMessageC4 = state === null || state === void 0 ? void 0 : state.unreadMessageCount) !== null && _state$unreadMessageC4 !== void 0 ? _state$unreadMessageC4 : 0) + 1,
           messages: [{
             created: new Date().getTime(),
             messageId: (_action$payload$messa = action.payload.messageId) !== null && _action$payload$messa !== void 0 ? _action$payload$messa : new Date().getTime(),
@@ -189,24 +211,24 @@ var _default = function _default() {
 
     case "inbox/MARK_ALL_AS_READ":
       {
-        var _state$currentTab3, _state$currentTab3$fi, _state$messages5;
+        var _state$currentTab3, _state$currentTab3$fi, _state$messages6;
 
-        var _unreadMessageCount2 = 0;
+        var _unreadMessageCount3 = 0;
 
         if (((_state$currentTab3 = state.currentTab) === null || _state$currentTab3 === void 0 ? void 0 : (_state$currentTab3$fi = _state$currentTab3.filters) === null || _state$currentTab3$fi === void 0 ? void 0 : _state$currentTab3$fi.isRead) === false) {
           return _objectSpread(_objectSpread({}, state), {}, {
             messages: [],
-            unreadMessageCount: _unreadMessageCount2
+            unreadMessageCount: _unreadMessageCount3
           });
         }
 
         return _objectSpread(_objectSpread({}, state), {}, {
-          messages: state === null || state === void 0 ? void 0 : (_state$messages5 = state.messages) === null || _state$messages5 === void 0 ? void 0 : _state$messages5.map(function (message) {
+          messages: state === null || state === void 0 ? void 0 : (_state$messages6 = state.messages) === null || _state$messages6 === void 0 ? void 0 : _state$messages6.map(function (message) {
             return _objectSpread(_objectSpread({}, message), {}, {
               read: true
             });
           }),
-          unreadMessageCount: _unreadMessageCount2
+          unreadMessageCount: _unreadMessageCount3
         });
       }
   }

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

@@ -24,9 +24,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var useInboxActions = function useInboxActions() {
   var _useCourier = (0, _reactProvider.useCourier)(),
       apiUrl = _useCourier.apiUrl,
+      clientKey = _useCourier.clientKey,
       dispatch = _useCourier.dispatch,
       inbox = _useCourier.inbox,
-      clientKey = _useCourier.clientKey,
       userId = _useCourier.userId,
       userSignature = _useCourier.userSignature;
 
@@ -84,6 +84,15 @@ var useInboxActions = function useInboxActions() {
         from: inbox === null || inbox === void 0 ? void 0 : inbox.from
       }, newTab === null || newTab === void 0 ? void 0 : newTab.filters);
 
+      dispatch({
+        type: "inbox/SET_UNREAD_MESSAGE_COUNT",
+        payload: function payload() {
+          return messages.getMessageCount({
+            from: inbox === null || inbox === void 0 ? void 0 : inbox.from,
+            isRead: false
+          });
+        }
+      });
       dispatch({
         type: "inbox/FETCH_MESSAGES",
         meta: meta,
@@ -142,20 +151,17 @@ var useInboxActions = function useInboxActions() {
 
       return markMessageRead;
     }(),
-    markMessageUnread: function () {
-      var _markMessageUnread = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(messageId, trackingId) {
+    markAllAsRead: function () {
+      var _markAllAsRead = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
         return _regenerator["default"].wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 dispatch({
-                  type: "inbox/MARK_MESSAGE_UNREAD",
-                  payload: {
-                    messageId: messageId
-                  }
+                  type: "inbox/MARK_ALL_AS_READ"
                 });
                 _context2.next = 3;
-                return events.trackEvent(trackingId);
+                return events.trackEventBatch("read");
 
               case 3:
               case "end":
@@ -165,23 +171,26 @@ var useInboxActions = function useInboxActions() {
         }, _callee2);
       }));
 
-      function markMessageUnread(_x3, _x4) {
-        return _markMessageUnread.apply(this, arguments);
+      function markAllAsRead() {
+        return _markAllAsRead.apply(this, arguments);
       }
 
-      return markMessageUnread;
+      return markAllAsRead;
     }(),
-    markAllAsRead: function () {
-      var _markAllAsRead = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    markMessageUnread: function () {
+      var _markMessageUnread = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(messageId, trackingId) {
         return _regenerator["default"].wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 dispatch({
-                  type: "inbox/MARK_ALL_AS_READ"
+                  type: "inbox/MARK_MESSAGE_UNREAD",
+                  payload: {
+                    messageId: messageId
+                  }
                 });
                 _context3.next = 3;
-                return events.trackEventBatch("read");
+                return events.trackEvent(trackingId);
 
               case 3:
               case "end":
@@ -191,11 +200,40 @@ var useInboxActions = function useInboxActions() {
         }, _callee3);
       }));
 
-      function markAllAsRead() {
-        return _markAllAsRead.apply(this, arguments);
+      function markMessageUnread(_x3, _x4) {
+        return _markMessageUnread.apply(this, arguments);
       }
 
-      return markAllAsRead;
+      return markMessageUnread;
+    }(),
+    markMessageArchived: function () {
+      var _markMessageArchived = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(messageId, trackingId) {
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                dispatch({
+                  type: "inbox/MARK_MESSAGE_ARCHIVED",
+                  payload: {
+                    messageId: messageId
+                  }
+                });
+                _context4.next = 3;
+                return events.trackEvent(trackingId);
+
+              case 3:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      function markMessageArchived(_x5, _x6) {
+        return _markMessageArchived.apply(this, arguments);
+      }
+
+      return markMessageArchived;
     }()
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-hooks",
-  "version": "1.16.0",
+  "version": "1.16.1-internal.2e7fdad.0+2e7fdad",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -12,7 +12,7 @@
     "test": "jest -c jest.config.js --runInBand --silent",
     "type-check": "tsc --noEmit",
     "readme": "concat-md --toc --decrease-title-levels --dir-name-as-title docs > README.md",
-    "types": "tsc --declaration --outDir typings/ --emitDeclarationOnly --declarationMap --allowJs false --checkJs false"
+    "types": "tsc --build"
   },
   "license": "ISC",
   "devDependencies": {
@@ -20,8 +20,8 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/client-graphql": "^1.16.0",
-    "@trycourier/react-provider": "^1.16.0",
+    "@trycourier/client-graphql": "^1.16.1-internal.2e7fdad.0+2e7fdad",
+    "@trycourier/react-provider": "^1.16.1-internal.2e7fdad.0+2e7fdad",
     "deep-extend": "^0.6.0",
     "rimraf": "^3.0.2"
   },
@@ -36,5 +36,5 @@
     ".": "./dist/index.js",
     "./use-inbox": "./dist/inbox/use-inbox.js"
   },
-  "gitHead": "d2a5dc400add5158997c8bfdd8274cababe419d1"
+  "gitHead": "2e7fdad2c7f8ab30c6673f91a084b78d673e156c"
 }

package/typings/inbox/reducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../src/inbox/reducer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,MAAM,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,YAAY;;;;;;;;;;;;IAaxB,CAAC;oEAsBqD,MAAM;AAA7D,wBAkKE"}
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../src/inbox/reducer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,MAAM,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,YAAY;;;;;;;;;;;;IAaxB,CAAC;oEAsBqD,MAAM;AAA7D,wBAqLE"}

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

@@ -5,15 +5,16 @@ export interface IFetchMessagesParams {
     after?: string;
 }
 interface IInboxActions {
-    init: (inbox: IInbox) => void;
-    toggleInbox: (isOpen?: boolean) => void;
-    setView: (view: "messages" | "preferences") => void;
-    setCurrentTab: (newTab: ITab) => void;
     fetchMessages: (params?: IFetchMessagesParams) => void;
     getMessageCount: (params?: IGetMessagesParams) => void;
+    init: (inbox: IInbox) => void;
+    markAllAsRead: () => void;
+    markMessageArchived: (messageId: string, trackingId: string) => Promise<void>;
     markMessageRead: (messageId: string, trackingId: string) => Promise<void>;
     markMessageUnread: (messageId: string, trackingId: string) => Promise<void>;
-    markAllAsRead: () => void;
+    setCurrentTab: (newTab: ITab) => void;
+    setView: (view: "messages" | "preferences") => void;
+    toggleInbox: (isOpen?: boolean) => void;
 }
 declare const useInboxActions: () => IInboxActions;
 export default useInboxActions;

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

@@ -1 +1 @@
-{"version":3,"file":"use-inbox-actions.d.ts","sourceRoot":"","sources":["../../src/inbox/use-inbox-actions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAQvC,OAAO,EACL,kBAAkB,EAEnB,MAAM,6CAA6C,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,CAAC,MAAM,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,MAAM,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,QAAA,MAAM,eAAe,QAAO,aAqH3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"use-inbox-actions.d.ts","sourceRoot":"","sources":["../../src/inbox/use-inbox-actions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAQvC,OAAO,EACL,kBAAkB,EAEnB,MAAM,6CAA6C,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,aAAa,EAAE,CAAC,MAAM,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9E,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,aAAa,EAAE,CAAC,MAAM,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,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,eAAe,QAAO,aA+H3B,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,14 +1,15 @@
 import { IInbox } from "./types";
 declare const useInbox: () => {
-    init: (inbox: IInbox) => void;
-    toggleInbox: (isOpen?: boolean | undefined) => void;
-    setView: (view: "messages" | "preferences") => void;
-    setCurrentTab: (newTab: import("./types").ITab) => void;
     fetchMessages: (params?: import("./use-inbox-actions").IFetchMessagesParams | undefined) => void;
     getMessageCount: (params?: import("@trycourier/client-graphql/typings/messages").IGetMessagesParams | undefined) => void;
+    init: (inbox: IInbox) => void;
+    markAllAsRead: () => void;
+    markMessageArchived: (messageId: string, trackingId: string) => Promise<void>;
     markMessageRead: (messageId: string, trackingId: string) => Promise<void>;
     markMessageUnread: (messageId: string, trackingId: string) => Promise<void>;
-    markAllAsRead: () => void;
+    setCurrentTab: (newTab: import("./types").ITab) => void;
+    setView: (view: "messages" | "preferences") => void;
+    toggleInbox: (isOpen?: boolean | undefined) => void;
     brand?: import("@trycourier/react-provider").Brand | undefined;
     isOpen?: boolean | undefined;
     tabs?: import("./types").ITab[] | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"use-inbox.d.ts","sourceRoot":"","sources":["../../src/inbox/use-inbox.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;CAgCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"use-inbox.d.ts","sourceRoot":"","sources":["../../src/inbox/use-inbox.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;CAgCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}