bugfix: remove react-facebook to react-messenger-customer-chat (#25)

frontend/package.json

@@ -32,9 +32,9 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dark-mode-toggle": "^0.2.0",
     "react-dom": "18.2.0",
-    "react-facebook": "^9.0.12",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^9.0.0",
+    "react-messenger-customer-chat": "^0.8.0",
     "react-scroll": "^1.9.0",
     "react-slick": "^0.29.0",
     "react-syntax-highlighter": "^15.5.0",

frontend/src/lib/facebook-messenger.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
-import { FacebookProvider, CustomChat } from 'react-facebook'
+// @ts-expect-error: Temporary workaround for missing types in 'react-messenger-customer-chat' library
+import MessengerCustomerChat from 'react-messenger-customer-chat'
 
 export const FacebbokMessenger = (): JSX.Element => {
   return (
-    <FacebookProvider appId={process.env.MESSENGER_APP_ID as string} chatSupport>
-      <CustomChat pageId={process.env.MESSENGER_PAGE_ID as string} minimized={true} />
-    </FacebookProvider>
+    <MessengerCustomerChat
+      pageId={process.env.MESSENGER_APP_ID as string}
+      appId={process.env.MESSENGER_PAGE_ID as string}
+    />
   )
 }

frontend/src/pages/_app.tsx

@@ -26,7 +26,7 @@ const MyApp: FC<AppProps> = ({ Component, pageProps }): JSX.Element => {
       <div className={cn(openSans.className)}>
         <Component {...pageProps} />
       </div>
-      <FacebbokMessenger />
+      {process.env.NODE_ENV === 'production' && <FacebbokMessenger />}
     </ThemeProvider>
   )
 }

frontend/yarn.lock

@@ -19,7 +19,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.20.6", "@babel/runtime@^7.3.1":
+"@babel/runtime@^7.3.1":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -3218,7 +3218,7 @@ prismjs@~1.27.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
   integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -3296,13 +3296,6 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-facebook@^9.0.12:
-  version "9.0.12"
-  resolved "https://registry.yarnpkg.com/react-facebook/-/react-facebook-9.0.12.tgz#a8ce7ce29c1980a8cdf45a3f34967b6f8b31728b"
-  integrity sha512-u7L9wWEG8/UR1kj3JRvHR5SR/cBvZkC4ZCnIt4ZmXMpg4LGVJkihcYIb2/L3FOHUsNt6p9k6jpA+7Cz3zD34iA==
-  dependencies:
-    "@babel/runtime" "^7.20.6"
-
 react-hot-toast@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
@@ -3341,6 +3334,13 @@ react-markdown@^9.0.0:
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
+react-messenger-customer-chat@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/react-messenger-customer-chat/-/react-messenger-customer-chat-0.8.0.tgz#c0696af9f71d5804a1b1149ae67d672802dee15d"
+  integrity sha512-7HItF+2nElXCBLi1q5eccgE9X4P86BmjmzF5nBcok+hJNWVjdKJTdWxl9VZTQnjkp3GHB7WwTwN2l3d/RKmFuQ==
+  dependencies:
+    prop-types "^15.6.0"
+
 react-remove-scroll-bar@^2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"