fix(unmount when init): make sure to unmount if we see the component …

…has been rendered

packages/client-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/client-api",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "",
   "main": "dist/index.js",
   "private": true,

packages/client-graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/client-graphql",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",

packages/components/README.md

@@ -111,7 +111,7 @@ To listen for actions that happen inside Courier's SDK.
         title: "Hello",
         body: "World",
       });
-    };
+    });
   };
 </script>
 ```
@@ -123,7 +123,7 @@ To listen for actions that happen inside Courier's SDK.
   window.courierAsyncInit = () => {
     window.courier.on("inbox/init", () => {
       console.log(window.courier.inbox.config);
-    };
+    });
   };
 </script>
 ```

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/components",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "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.2.2",
-    "@trycourier/react-inbox": "^4.2.2",
-    "@trycourier/react-preferences": "^4.2.2",
-    "@trycourier/react-provider": "^4.2.2",
-    "@trycourier/react-toast": "^4.2.2",
+    "@trycourier/react-brand-designer": "^4.2.3",
+    "@trycourier/react-inbox": "^4.2.3",
+    "@trycourier/react-preferences": "^4.2.3",
+    "@trycourier/react-provider": "^4.2.3",
+    "@trycourier/react-toast": "^4.2.3",
     "babel-loader": "^8.0.6",
     "babel-preset-preact": "^2.0.0",
     "camel-case": "^4.1.2",

packages/components/src/components/CourierSdk.tsx

@@ -1,20 +1,20 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { useCourier } from "@trycourier/react-provider";
 import { useInbox } from "@trycourier/react-hooks";
 
-const didActionsInit = {
-  inbox: false,
-  toast: false,
-  preferences: false,
-};
-
 export const CourierSdk: React.FunctionComponent<{
   activeComponents: {
     inbox: boolean;
     toast: boolean;
     preferences: boolean;
   };
 }> = ({ activeComponents, children }) => {
+  const ref = useRef({
+    inbox: false,
+    toast: false,
+    preferences: false,
+  });
+
   const courier = useCourier();
   const inbox = useInbox();
 
@@ -45,7 +45,7 @@ export const CourierSdk: React.FunctionComponent<{
     for (const component of Object.keys(activeComponents)) {
       const typedComponent = component as "inbox" | "toast";
 
-      if (!courier[typedComponent] || didActionsInit[typedComponent]) {
+      if (!courier[typedComponent] || ref.current[typedComponent]) {
         continue;
       }
 
@@ -55,7 +55,7 @@ export const CourierSdk: React.FunctionComponent<{
         initAction();
       }
 
-      didActionsInit[typedComponent] = true;
+      ref.current[typedComponent] = true;
     }
   }, [courier?.inbox, courier?.toast, activeComponents]);
 

packages/components/src/components/index.tsx

@@ -26,6 +26,7 @@ export const CourierComponents: React.FunctionComponent = () => {
 
   const componentConfigs = window.courierConfig?.components;
   const initialInbox = querySelector(window?.document?.body, "courier-inbox");
+
   const [inboxElement, setInboxElement] = useState(initialInbox ?? undefined);
 
   const [inboxConfig, setInboxConfig] = useState({
@@ -34,6 +35,7 @@ export const CourierComponents: React.FunctionComponent = () => {
   });
 
   const initialToast = querySelector(window?.document?.body, "courier-toast");
+
   const [toastElement, setToastElement] = useState(initialToast ?? undefined);
 
   const [toastConfig, setToastConfig] = useState({
@@ -45,6 +47,7 @@ export const CourierComponents: React.FunctionComponent = () => {
     window?.document?.body,
     "courier-preferences"
   );
+
   const [preferencesElement, setPreferencesElement] = useState(
     initialPreferences ?? undefined
   );

packages/components/src/index.html

@@ -263,6 +263,7 @@
           })();
         });
       };*/
+
       window.courierConfig = {
         inboxApiUrl:
           "https://3rjq5oe9b1.execute-api.us-east-1.amazonaws.com/dev/q",

packages/components/src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "react-dom";
+import { render, unmountComponentAtNode } from "react-dom";
 
 import {
   CourierProvider,
@@ -64,7 +64,7 @@ interface ICourierConfig {
   preferencePageDraftMode?: boolean;
 }
 
-const initCourier = async (courierConfig?: ICourierConfig) => {
+const initCourier = (courierConfig?: ICourierConfig) => {
   const {
     tenantId,
     apiUrl,
@@ -86,9 +86,15 @@ const initCourier = async (courierConfig?: ICourierConfig) => {
   if (!userId || !clientKey) {
     return;
   }
+  const existingCourierRoot =
+    document.getElementsByTagName("courier-root")?.[0];
 
-  const courierRoot = document.createElement("courier-root");
-  document.body.appendChild(courierRoot);
+  if (existingCourierRoot) {
+    unmountComponentAtNode(existingCourierRoot);
+  } else {
+    const courierRoot = document.createElement("courier-root");
+    document.body.appendChild(courierRoot);
+  }
 
   render(
     <CourierProvider
@@ -106,7 +112,7 @@ const initCourier = async (courierConfig?: ICourierConfig) => {
     >
       <CourierComponents />
     </CourierProvider>,
-    courierRoot
+    document.getElementsByTagName("courier-root")?.[0]
   );
 };
 

packages/react-brand-designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-brand-designer",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "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.2.2",
+    "@trycourier/react-elements": "^4.2.3",
     "rimraf": "^3.0.2"
   },
   "devDependencies": {

packages/react-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-elements",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "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",

packages/react-hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-hooks",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,7 +20,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/client-graphql": "^4.2.2",
+    "@trycourier/client-graphql": "^4.2.3",
     "deep-extend": "^0.6.0",
     "rimraf": "^3.0.2"
   },

packages/react-inbox-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-inbox-next",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "",
   "private": true,
   "main": "dist/index.js",

packages/react-inbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-inbox",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "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.2.2",
-    "@trycourier/react-elements": "^4.2.2",
-    "@trycourier/react-hooks": "^4.2.2",
-    "@trycourier/react-preferences": "^4.2.2",
+    "@trycourier/client-graphql": "^4.2.3",
+    "@trycourier/react-elements": "^4.2.3",
+    "@trycourier/react-hooks": "^4.2.3",
+    "@trycourier/react-preferences": "^4.2.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.19.0",
     "deep-extend": "^0.6.0",

packages/react-preferences/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-preferences",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "@trycourier/react-hooks": "^4.2.2",
+    "@trycourier/react-hooks": "^4.2.3",
     "react-toggle": "^4.1.2",
     "styled-components": "^5.3.6"
   }

packages/react-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-provider",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -16,7 +16,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@trycourier/client-graphql": "^4.2.2",
+    "@trycourier/client-graphql": "^4.2.3",
     "buffer": "^6.0.3",
     "jwt-decode": "^3.1.2",
     "react-use": "^17.2.1",

packages/react-provider/src/hooks/use-transport.ts

@@ -30,7 +30,7 @@ const useTransport = ({
       transport: CourierTransport;
     }>();
 
-  return useMemo(() => {
+  const newTransport = useMemo(() => {
     if (transport) {
       return transport;
     }
@@ -86,6 +86,8 @@ const useTransport = ({
     }
     return newTransport;
   }, [tenantId, authorization, clientKey, transport, userSignature, wsOptions]);
+
+  return newTransport;
 };
 
 export default useTransport;

packages/react-toast/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-toast",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "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.2.2",
+    "@trycourier/react-hooks": "^4.2.3",
     "deep-extend": "^0.6.0",
     "markdown-to-jsx": "^7.1.7",
     "react-toastify": "^9.1.3",

packages/storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/storybook",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "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.2.2",
-    "@trycourier/react-brand-designer": "^4.2.2",
-    "@trycourier/react-inbox": "^4.2.2",
-    "@trycourier/react-preferences": "^4.2.2",
-    "@trycourier/react-provider": "^4.2.2",
-    "@trycourier/react-toast": "^4.2.2",
+    "@trycourier/components": "^4.2.3",
+    "@trycourier/react-brand-designer": "^4.2.3",
+    "@trycourier/react-inbox": "^4.2.3",
+    "@trycourier/react-preferences": "^4.2.3",
+    "@trycourier/react-provider": "^4.2.3",
+    "@trycourier/react-toast": "^4.2.3",
     "react-frame-component": "^5.2.3",
     "react-markdown": "^8.0.1",
     "rehype-raw": "^6.1.1",

packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trycourier/types",
   "private": true,
-  "version": "4.2.2",
+  "version": "4.2.3",
   "main": "index.d.ts",
   "types": "index.d.ts",
   "scripts": {}