feat(allow inbox append to): allow appending inbox wherever they want

trycourier · Oct 31, 2023 · 17d9b48 · 17d9b48
1 parent 7b6441e
commit 17d9b48
Show file tree

Hide file tree

Showing 17 changed files with 79 additions and 75 deletions.
diff --git a/packages/client-api/package.json b/packages/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/client-api",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "",
   "main": "dist/index.js",
   "private": true,

diff --git a/packages/client-graphql/package.json b/packages/client-graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/client-graphql",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/components",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "private": true,
   "description": "Beautiful, easy React toast notifications",
   "author": "Courier <support@courier.com>",
@@ -18,11 +18,11 @@
   "license": "MIT",
   "dependencies": {
     "@trycourier/courier": "^1.3.0",
-    "@trycourier/react-brand-designer": "^4.4.0",
-    "@trycourier/react-inbox": "^4.4.0",
-    "@trycourier/react-preferences": "^4.4.0",
-    "@trycourier/react-provider": "^4.4.0",
-    "@trycourier/react-toast": "^4.4.0",
+    "@trycourier/react-brand-designer": "^4.5.0",
+    "@trycourier/react-inbox": "^4.5.0",
+    "@trycourier/react-preferences": "^4.5.0",
+    "@trycourier/react-provider": "^4.5.0",
+    "@trycourier/react-toast": "^4.5.0",
     "babel-loader": "^8.0.6",
     "babel-preset-preact": "^2.0.0",
     "camel-case": "^4.1.2",

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -281,6 +281,7 @@
         userId: "70f6a4f4-2907-4518-b8f3-b9cfab224764",
         components: {
           inbox: {
+            appendTo: "#test",
             onEvent: (params) => {
               console.log("params", params);
               if (
@@ -331,8 +332,10 @@
   </head>
   <body>
     <courier-inbox></courier-inbox>
-    <courier-preferences></courier-preferences>
     <courier-toast></courier-toast>
-    <div id="root" />
+    <courier-preferences></courier-preferences>
+    <div id="root">
+      <div id="test">hello world</div>
+    </div>
   </body>
 </html>
diff --git a/packages/react-brand-designer/package.json b/packages/react-brand-designer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-brand-designer",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Embeddable brand designer for multi-channel notifications",
   "homepage": "https://github.com/trycourier/courier-react/tree/main/packages/react-elements#readme",
   "license": "ISC",
@@ -29,7 +29,7 @@
     "url": "https://github.com/trycourier/courier-react/issues"
   },
   "dependencies": {
-    "@trycourier/react-elements": "^4.4.0",
+    "@trycourier/react-elements": "^4.5.0",
     "rimraf": "^3.0.2"
   },
   "devDependencies": {

diff --git a/packages/react-elements/package.json b/packages/react-elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-elements",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Shareable components for each Courier package",
   "author": "Drew Youngwerth <drew@youngwerth.com>",
   "homepage": "https://github.com/trycourier/courier-react/tree/main/packages/react-elements#readme",

diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-hooks",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,7 +20,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/client-graphql": "^4.4.0",
+    "@trycourier/client-graphql": "^4.5.0",
     "deep-extend": "^0.6.0",
     "rimraf": "^3.0.2"
   },

diff --git a/packages/react-inbox-next/package.json b/packages/react-inbox-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-inbox-next",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "",
   "private": true,
   "main": "dist/index.js",

diff --git a/packages/react-inbox/README.md b/packages/react-inbox/README.md
@@ -343,71 +343,64 @@ interface IActionBlock {
   url: string;
 }
 
+
 interface InboxProps {
-  //Brand Override
+  tenantId?: string;
   brand?: Brand;
-
-  //Icon Class Name
   className?: string;
+  defaultIcon?: false | string;
 
-  // defaults to true
-  openLinksInNewTab?: boolean;
+  // start date of the inbox to fetch messages
+  from?: number;
 
-  // Default Icon to use if no Icon is present in Message
-  defaultIcon?: false | string;
+  isOpen?: boolean;
 
-  formatDate?: (date: string) => string;
+  // allows different views with different filter params
+  views?: Array<{
+    id: string;
+    label: string;
+    params?: IGetInboxMessagesParams;
+  }>;
+  formatDate?: (isoDate: string) => string;
+
+  // html query selector to render the inbox into
+  appendTo?: string;
   labels?: {
     archiveMessage?: string;
+    backToInbox?: string;
     closeInbox?: string;
     emptyState?: string;
     markAllAsRead?: string;
     markAsRead?: string;
     markAsUnread?: string;
-    scrollTop?: string | (count: string) => string;
-  }
+    scrollTop?: string | ((count: string) => string);
+  };
 
-  // Placement of the Bell relative to the Inbox
-  placement?: "top" | "left" | "right" | "bottom";
+  // event listener for events such as "read", "unread", "archive"
+  onEvent?: OnEvent;
+  openLinksInNewTab?: boolean;
 
-  // render props to override rendering
+  // relative to the inbox beel
+  placement?: TippyProps["placement"];
+  showUnreadMessageCount?: boolean;
+  theme?: InboxTheme;
+  title?: string;
+  trigger?: TippyProps["trigger"];
+  renderContainer?: React.FunctionComponent;
   renderBell?: React.FunctionComponent<{
     className?: string;
-    isOpen?: boolean;
+    isOpen: boolean;
     onClick?: (event: React.MouseEvent) => void;
-    onMouseEnter?: (event: React.MouseEvent) => void;
   }>;
-  renderBlocks?: {
-    action?: React.FunctionComponent<IActionBlock>;
-    text?: React.FunctionComponent<ITextBlock>;
-  }
   renderFooter?: React.FunctionComponent;
   renderHeader?: React.FunctionComponent<IHeaderProps>;
   renderPin?: React.FunctionComponent<PinDetails>;
   renderIcon?: React.FunctionComponent<{
     isOpen: boolean;
     unreadMessageCount?: number;
   }>;
-  renderMessage?: React.FunctionComponent<IMessage>;
+  renderMessage?: React.FunctionComponent<IInboxMessagePreview>;
   renderNoMessages?: React.FunctionComponent;
-
-  views?: Array<{
-    id: string;
-    label: string;
-    params: {
-      archived?: boolean;
-      status?: "unread" | "read";
-      from?: string | number;
-      limit?: number;
-      tags?: string[];
-    }
-  }>;
-
-  theme?: ThemeObject;
-  title?: string;
-
-  // should the inbox open on hover or on click?
-  trigger?: "click" | "hover";
 }
 ```
 

diff --git a/packages/react-inbox/package.json b/packages/react-inbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-inbox",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,10 +20,10 @@
   "dependencies": {
     "@fontsource/poppins": "^4.5.9",
     "@tippyjs/react": "^4.2.3",
-    "@trycourier/client-graphql": "^4.4.0",
-    "@trycourier/react-elements": "^4.4.0",
-    "@trycourier/react-hooks": "^4.4.0",
-    "@trycourier/react-preferences": "^4.4.0",
+    "@trycourier/client-graphql": "^4.5.0",
+    "@trycourier/react-elements": "^4.5.0",
+    "@trycourier/react-hooks": "^4.5.0",
+    "@trycourier/react-preferences": "^4.5.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.19.0",
     "deep-extend": "^0.6.0",

diff --git a/packages/react-inbox/src/components/Inbox/index.tsx b/packages/react-inbox/src/components/Inbox/index.tsx
@@ -131,11 +131,18 @@ const Inbox: React.FunctionComponent<InboxProps> = (props) => {
   const isOpen = props.isOpen ?? isOpenState;
 
   const tippyProps: TippyProps = {
-    visible: isOpen,
-    placement: props.placement ?? brand?.inapp?.placement ?? "right",
     interactive: true,
+    placement: props.placement ?? brand?.inapp?.placement ?? "right",
+    visible: isOpen,
   };
 
+  if (props.appendTo) {
+    const appendToElem = document.querySelector(props.appendTo);
+    if (appendToElem) {
+      tippyProps.appendTo = appendToElem;
+    }
+  }
+
   const localStorageState = useLocalStorageMessages(
     courierContext.clientKey,
     courierContext.userId

diff --git a/packages/react-inbox/src/types.ts b/packages/react-inbox/src/types.ts
@@ -54,6 +54,7 @@ export interface InboxProps {
     params?: IGetInboxMessagesParams;
   }>;
   formatDate?: (isoDate: string) => string;
+  appendTo?: string;
   labels?: {
     archiveMessage?: string;
     backToInbox?: string;

diff --git a/packages/react-preferences/package.json b/packages/react-preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-preferences",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "@trycourier/react-hooks": "^4.4.0",
+    "@trycourier/react-hooks": "^4.5.0",
     "react-toggle": "^4.1.2",
     "styled-components": "^5.3.6"
   }

diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-provider",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -16,7 +16,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@trycourier/client-graphql": "^4.4.0",
+    "@trycourier/client-graphql": "^4.5.0",
     "buffer": "^6.0.3",
     "jwt-decode": "^3.1.2",
     "react-use": "^17.2.1",

diff --git a/packages/react-toast/package.json b/packages/react-toast/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-toast",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Beautiful, easy React toast notifications",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -24,7 +24,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/react-hooks": "^4.4.0",
+    "@trycourier/react-hooks": "^4.5.0",
     "deep-extend": "^0.6.0",
     "markdown-to-jsx": "7.1.7",
     "react-toastify": "^9.1.3",

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/storybook",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "private": true,
   "description": "Beautiful, easy React toast notifications",
   "author": "Courier <support@courier.com>",
@@ -23,12 +23,12 @@
     "@storybook/addon-links": "^6.5.9",
     "@storybook/addon-viewport": "^6.5.9",
     "@storybook/react": "^6.5.9",
-    "@trycourier/components": "^4.4.0",
-    "@trycourier/react-brand-designer": "^4.4.0",
-    "@trycourier/react-inbox": "^4.4.0",
-    "@trycourier/react-preferences": "^4.4.0",
-    "@trycourier/react-provider": "^4.4.0",
-    "@trycourier/react-toast": "^4.4.0",
+    "@trycourier/components": "^4.5.0",
+    "@trycourier/react-brand-designer": "^4.5.0",
+    "@trycourier/react-inbox": "^4.5.0",
+    "@trycourier/react-preferences": "^4.5.0",
+    "@trycourier/react-provider": "^4.5.0",
+    "@trycourier/react-toast": "^4.5.0",
     "react-frame-component": "^5.2.3",
     "react-markdown": "^8.0.1",
     "rehype-raw": "^6.1.1",

diff --git a/packages/types/package.json b/packages/types/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@trycourier/types",
   "private": true,
-  "version": "4.4.0",
+  "version": "4.5.0",
   "main": "index.d.ts",
   "types": "index.d.ts",
   "scripts": {}