Refactor UI folder (#2016)

* Added Overview page * Revised Getting Started page * Minor revision * Edited readme, minor modifications to docs * Removed sweep.yaml, .devcontainer, .ergomake * Moved security.md to .github, added contributing.md * changes as per code review * updated contributing.md * fixed broken links & added missing links in doc, improved structure * fixed link in wsl setup * fixed server link, added https cloning in yarn-setup * removed package-lock.json * added doc card, admonitions * removed underline from nav buttons * refactoring modules/ui * refactoring modules/ui * Change folder case * Fix theme location * Fix case 2 * Fix storybook --------- Co-authored-by: Nimra Ahmed <nimra1408@gmail.com> Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
2023-10-14 00:04:29 +02:00
parent a35ea5e8f9
commit 258685467b
732 changed files with 1106 additions and 1010 deletions
--- a/front/src/modules/ui/navigation/navbar/components/SupportChat.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/SupportChat.tsx
@ -0,0 +1,93 @@
+import { useCallback, useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { supportChatState } from '@/client-config/states/supportChatState';
+import { IconHelpCircle } from '@/ui/display/icon';
+import { Button } from '@/ui/input/button/components/Button';
+import { User } from '~/generated/graphql';
+
+const StyledButtonContainer = styled.div`
+  display: flex;
+`;
+
+const insertScript = ({
+  src,
+  innerHTML,
+  onLoad,
+}: {
+  src?: string;
+  innerHTML?: string;
+  onLoad?: (...args: any[]) => void;
+}) => {
+  const script = document.createElement('script');
+  if (src) script.src = src;
+  if (innerHTML) script.innerHTML = innerHTML;
+  if (onLoad) script.onload = onLoad;
+  document.body.appendChild(script);
+};
+
+const SupportChat = () => {
+  const currentUser = useRecoilValue(currentUserState);
+  const supportChat = useRecoilValue(supportChatState);
+  const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
+
+  const configureFront = useCallback(
+    (
+      chatId: string,
+      currentUser: Pick<User, 'email' | 'displayName' | 'supportUserHash'>,
+    ) => {
+      const url = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
+      const script = document.querySelector(`script[src="${url}"]`);
+
+      if (!script) {
+        insertScript({
+          src: url,
+          onLoad: () => {
+            window.FrontChat?.('init', {
+              chatId,
+              useDefaultLauncher: false,
+              email: currentUser.email,
+              name: currentUser.displayName,
+              userHash: currentUser?.supportUserHash,
+            });
+            setIsFrontChatLoaded(true);
+          },
+        });
+      }
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (
+      supportChat?.supportDriver === 'front' &&
+      supportChat.supportFrontChatId &&
+      currentUser?.email &&
+      !isFrontChatLoaded
+    ) {
+      configureFront(supportChat.supportFrontChatId, currentUser);
+    }
+  }, [
+    configureFront,
+    currentUser,
+    isFrontChatLoaded,
+    supportChat?.supportDriver,
+    supportChat.supportFrontChatId,
+  ]);
+
+  return isFrontChatLoaded ? (
+    <StyledButtonContainer>
+      <Button
+        variant={'tertiary'}
+        size={'small'}
+        title="Support"
+        Icon={IconHelpCircle}
+        onClick={() => window.FrontChat?.('show')}
+      />
+    </StyledButtonContainer>
+  ) : null;
+};
+
+export default SupportChat;