feature(frontend): Contact Us Modal (#2835)

* feature(frontend): Contact Us Modal

* feature(frontend): Contact Us Modal

web/src/components/ContactUs/ContactUs.styled.ts

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import {Modal as AntModal, Button, Typography} from 'antd';
+import Plushie from 'assets/plushie.svg';
+
+export const Container = styled.div`
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  cursor: pointer;
+`;
+
+export const PlushieImage = styled.img.attrs({
+  src: Plushie,
+})``;
+
+export const PulseButtonContainer = styled.div`
+  position: absolute;
+  left: 2px;
+  top: -4px;
+`;
+
+export const ModalFooter = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const FullWidthButton = styled(Button)`
+  && {
+    && {
+      width: 100%;
+      margin: 0px;
+    }
+  }
+`;
+
+export const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+`;
+
+export const Title = styled(Typography.Title)``;
+
+export const Message = styled(Typography.Paragraph)`
+  && {
+    margin: 0;
+  }
+`;
+
+export const Modal = styled(AntModal).attrs({
+  width: 'auto',
+})`
+  right: 32px;
+  top: calc(100vh - 410px);
+  position: absolute;
+  height: max-content;
+  padding: 0;
+
+  .ant-modal-content {
+    width: 340px;
+  }
+
+  .ant-modal-footer {
+    border: none;
+    padding-top: 0;
+  }
+
+  .ant-modal-body {
+    padding-bottom: 19px;
+  }
+`;

web/src/components/ContactUs/ContactUs.tsx

@@ -0,0 +1,35 @@
+import {createContext, useContext, useMemo, useState} from 'react';
+import {noop} from 'lodash';
+import * as S from './ContactUs.styled';
+import ContactUsModal from './ContactUsModal';
+import PulseButton from '../PulseButton';
+
+interface IContext {
+  onOpen(): void;
+}
+
+export const Context = createContext<IContext>({
+  onOpen: noop,
+});
+
+export const useContactUsModal = () => useContext(Context);
+
+const ContactUs: React.FC = ({children}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const value = useMemo<IContext>(() => ({onOpen: () => setIsOpen(true)}), []);
+
+  return (
+    <Context.Provider value={value}>
+      {children}
+      <S.Container onClick={() => setIsOpen(true)}>
+        <S.PulseButtonContainer>
+          <PulseButton />
+        </S.PulseButtonContainer>
+        <S.PlushieImage />
+      </S.Container>
+      <ContactUsModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </Context.Provider>
+  );
+};
+
+export default ContactUs;

web/src/components/ContactUs/ContactUsModal.tsx

@@ -0,0 +1,24 @@
+import * as S from './ContactUs.styled';
+import ContactUsModalFooter from './ContactUsModalFooter';
+
+interface IProps {
+  isOpen: boolean;
+  onClose(): void;
+}
+
+const ContactUsModal = ({isOpen, onClose}: IProps) => {
+  return (
+    <S.Modal visible={isOpen} onCancel={onClose} footer={<ContactUsModalFooter />}>
+      <S.Header>
+        <S.PlushieImage width="100px" height="auto" />
+        <S.Title>Let us help you</S.Title>
+      </S.Header>
+      <S.Message>
+        Technical glitches can be tricky, even for the best of us. Don&apos;t fret! We&apos;re here to save your day.
+        Create an Issue or contact us via Discord and our tech-savvy team are ready to lend a helping hand.
+      </S.Message>
+    </S.Modal>
+  );
+};
+
+export default ContactUsModal;

web/src/components/ContactUs/ContactUsModalFooter.tsx

@@ -0,0 +1,19 @@
+import {DISCORD_URL, GITHUB_ISSUES_URL} from 'constants/Common.constants';
+import * as S from './ContactUs.styled';
+
+const ContactUsModalFooter = () => {
+  return (
+    <S.ModalFooter>
+      <a href={GITHUB_ISSUES_URL} target="_blank">
+        <S.FullWidthButton type="primary">Create an Issue</S.FullWidthButton>
+      </a>
+      <a href={DISCORD_URL} target="_blank">
+        <S.FullWidthButton ghost type="primary">
+          Contact Team on Discord
+        </S.FullWidthButton>
+      </a>
+    </S.ModalFooter>
+  );
+};
+
+export default ContactUsModalFooter;

web/src/components/ContactUs/index.ts

@@ -0,0 +1,5 @@
+import {useContactUsModal} from './ContactUs';
+
+// eslint-disable-next-line no-restricted-exports
+export {default} from './ContactUs';
+export {useContactUsModal};

web/src/components/PulseButton/PulseButton.styled.ts

@@ -0,0 +1,31 @@
+import styled, {DefaultTheme, keyframes} from 'styled-components';
+
+const getPulseAnimation = (theme: DefaultTheme) =>
+  keyframes`
+  0% {
+    transform: scale(.7);
+    box-shadow: 0 0 0 0 ${theme.color.primaryLight};
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 2px ${theme.color.primaryLight};
+  }
+  100% {
+    transform: scale(.7);
+    box-shadow: 0 0 0 0 ${theme.color.primaryLight};
+  }
+`;
+
+export const PulseButton = styled.button`
+  width: 9px;
+  height: 9px;
+  border: none;
+  padding: 0px;
+  border-radius: 50%;
+  cursor: pointer;
+  background: ${({theme}) => theme.color.primary};
+
+  animation-name: ${({theme}) => getPulseAnimation(theme)};
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+`;

web/src/components/PulseButton/index.ts

@@ -0,0 +1,3 @@
+import {PulseButton} from './PulseButton.styled';
+
+export default PulseButton;

web/src/pages/Settings/Settings.tsx

@@ -3,14 +3,17 @@ import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import DataStoreProvider from 'providers/DataStore';
 import SettingsProvider from 'providers/Settings';
 import Content from './Content';
+import ContactUs from '../../components/ContactUs/ContactUs';
 
 const Settings = () => (
   <Layout hasMenu>
-    <DataStoreProvider>
-      <SettingsProvider>
-        <Content />
-      </SettingsProvider>
-    </DataStoreProvider>
+    <ContactUs>
+      <DataStoreProvider>
+        <SettingsProvider>
+          <Content />
+        </SettingsProvider>
+      </DataStoreProvider>
+    </ContactUs>
   </Layout>
 );
 

web/src/providers/DataStore/DataStore.provider.tsx

@@ -9,6 +9,7 @@ import {
   useDeleteDataStoreMutation,
 } from 'redux/apis/TraceTest.api';
 import DataStoreService from 'services/DataStore.service';
+import {useContactUsModal} from 'components/ContactUs';
 import {SupportedDataStores, TConnectionResult, TDraftDataStore} from 'types/DataStore.types';
 import DataStore from 'models/DataStore.model';
 import useDataStoreNotification from './hooks/useDataStoreNotification';
@@ -49,6 +50,8 @@ const DataStoreProvider = ({children}: IProps) => {
   const [isFormValid, setIsFormValid] = useState(false);
   const {showSuccessNotification, showTestConnectionNotification} = useDataStoreNotification();
   const {onOpen} = useConfirmationModal();
+  const [connectionTries, setConnectionTries] = useState(0);
+  const {onOpen: onContactUsOpen} = useContactUsModal();
 
   const onSaveConfig = useCallback(
     async (draft: TDraftDataStore, defaultDataStore: DataStore) => {
@@ -105,11 +108,16 @@ const DataStoreProvider = ({children}: IProps) => {
       try {
         const result = await testConnection(dataStore.spec!).unwrap();
         showTestConnectionNotification(result, draft.dataStoreType!);
+        setConnectionTries(0);
       } catch (err) {
+        setConnectionTries(prev => prev + 1);
         showTestConnectionNotification(err as TConnectionResult, draft.dataStoreType!);
+        if (connectionTries + 1 === 3) {
+          onContactUsOpen();
+        }
       }
     },
-    [showTestConnectionNotification, testConnection]
+    [connectionTries, onContactUsOpen, showTestConnectionNotification, testConnection]
   );
 
   const value = useMemo<IContext>(