Merge pull request #528 from captain-Akshay/feedbackbtn

feat(button): added feedback icon

src/custom/CustomTooltip/customTooltip.tsx

@@ -1,25 +1,48 @@
-import { type TooltipProps } from '@mui/material';
+import { Tooltip, type TooltipProps } from '@mui/material';
 import React from 'react';
-import { Tooltip } from '../../base/Tooltip';
+import { CHARCOAL, WHITE } from '../../theme';
 
 type CustomTooltipProps = {
-  title: string;
+  title: string | React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   children: React.ReactNode;
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
-function StyledTooltip({
+function CustomTooltip({
   title,
   onClick,
   placement,
   children,
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
-    <Tooltip title={title} placement={placement} onClick={onClick} arrow {...props}>
+    <Tooltip
+      componentsProps={{
+        tooltip: {
+          sx: {
+            background: CHARCOAL,
+            color: WHITE,
+            fontSize: '0.75rem',
+            borderRadius: '0.9375rem',
+            padding: '0.9rem',
+            zIndex: '999999'
+          }
+        },
+        popper: {
+          sx: {
+            opacity: '1'
+          }
+        }
+      }}
+      title={title}
+      placement={placement}
+      onClick={onClick}
+      arrow
+      {...props}
+    >
       {children}
     </Tooltip>
   );
 }
 
-export default StyledTooltip;
+export default CustomTooltip;

src/custom/ErrorBoundary/ErrorBoundary.tsx

@@ -5,6 +5,7 @@ import { Box } from '../../base/Box';
 import { Link } from '../../base/Link';
 import { Typography } from '../../base/Typography';
 import { BLACK, KEPPEL } from '../../theme/colors';
+import { DARK_JUNGLE_GREEN } from '../../theme/colors/colors';
 
 const ErrorMessage = styled(Typography)(() => ({
   color: BLACK,
@@ -31,7 +32,7 @@ export function Fallback({ error, children }: FallbackComponentProps): JSX.Eleme
       <h2>Uh-oh!😔 Please pardon the mesh.</h2>
       <div
         style={{
-          backgroundColor: '#1E2117',
+          backgroundColor: DARK_JUNGLE_GREEN,
           color: '#FFFFFF',
           padding: '.85rem',
           borderRadius: '.2rem',

src/custom/Feedback/FeedbackButton.tsx

@@ -0,0 +1,237 @@
+import Typography from '@mui/material/Typography';
+import React, { CSSProperties, useRef, useState } from 'react';
+import {
+  CalenderIcon,
+  CloseIcon,
+  FeedbackIcon,
+  IdeaIcon,
+  QuestionIcon,
+  SuccessIcon
+} from '../../icons';
+import { CULTURED } from '../../theme';
+import { CustomTooltip } from '../CustomTooltip';
+import { ModalCard } from '../ModalCard';
+import {
+  ActionWrapper,
+  CloseButton,
+  Container,
+  FeedbackButton,
+  FeedbackForm,
+  FeedbackMessage,
+  FeedbackMiniIcon,
+  FeedbackOptionButton,
+  FeedbackOptions,
+  FeedbackSubmitButton,
+  FeedbackTextArea,
+  HelperWrapper,
+  InnerComponentWrapper,
+  StyledCheckbox,
+  StyledLink,
+  StyledTextArea
+} from './style';
+
+const tooltipContent = (
+  <p>
+    Some account and system information may be sent to Layer5. We will use it to fix problems and
+    improve our services, subject to our{' '}
+    <StyledLink target="_blank" href="https://layer5.io/company/legal/privacy">
+      Privacy Policy
+    </StyledLink>{' '}
+    and{' '}
+    <StyledLink target="_blank" href="https://layer5.io/company/legal/terms-of-service">
+      Terms of Service
+    </StyledLink>
+    . We may email you for more information or updates.
+  </p>
+);
+
+interface FeedbackDataItem {
+  icon: JSX.Element;
+  label: string;
+  placeholder?: string;
+  isTextInput: boolean;
+  innerComponent?: JSX.Element;
+}
+
+const feedbackData: FeedbackDataItem[] = [
+  {
+    icon: <FeedbackIcon />,
+    label: 'Issue',
+    placeholder: 'I’m having an issue with...',
+    isTextInput: true
+  },
+  {
+    icon: <IdeaIcon />,
+    label: 'Suggestion',
+    placeholder: 'I have a suggestion about...',
+    isTextInput: true
+  },
+  {
+    icon: <CalenderIcon />,
+    label: 'Meet Request',
+    isTextInput: false,
+    innerComponent: (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          height: '137px',
+          color: 'black'
+        }}
+      >
+        <Typography style={{ lineHeight: '2.5', textAlign: 'center' }}>
+          Need help or have more feedback than fits here?
+          <br /> Meet with us.
+        </Typography>
+        <StyledLink
+          target="_blank"
+          href="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56"
+        >
+          Select a time convenient for you.
+        </StyledLink>
+      </div>
+    )
+  }
+];
+
+interface FeedbackComponentProps {
+  onSubmit: (data: { label: string; message: string }) => void;
+  containerStyles?: CSSProperties;
+  feedbackOptionStyles?: CSSProperties;
+}
+
+const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
+  onSubmit,
+  containerStyles,
+  feedbackOptionStyles
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const [category, setCategory] = useState<FeedbackDataItem | undefined>();
+  const [messageValue, setMessageValue] = useState<string | undefined>();
+  const feedbackTextRef = useRef<HTMLTextAreaElement>(null);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsChecked(event.target.checked);
+  };
+
+  const handleFeedback = () => {
+    setIsOpen(!isOpen);
+    setCategory(feedbackData[0]);
+    setSubmitted(false);
+    setMessageValue('');
+  };
+
+  const handleSubmit = () => {
+    setSubmitted(true);
+    if (messageValue && isChecked) {
+      onSubmit({ label: category?.label || '', message: messageValue });
+    }
+    setTimeout(() => {
+      setIsOpen(false);
+      setCategory(undefined);
+      setSubmitted(false);
+      setMessageValue('');
+    }, 2000);
+  };
+
+  return (
+    <Container isOpen={isOpen} style={containerStyles}>
+      {submitted ? (
+        <FeedbackMessage isOpen={isOpen}>
+          <SuccessIcon width={'32'} height={'32'} />
+          We got your concern. Thank you!
+        </FeedbackMessage>
+      ) : (
+        <>
+          <FeedbackButton onClick={handleFeedback}>Feedback</FeedbackButton>
+
+          <ModalCard
+            onClose={() => {}}
+            open={true}
+            closeComponent={
+              <CloseButton onClick={() => setIsOpen(false)}>
+                <CloseIcon width={'30'} height={'30'} fill={CULTURED} />
+              </CloseButton>
+            }
+            actions={
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center'
+                }}
+              >
+                <ActionWrapper>
+                  <StyledCheckbox checked={isChecked} onChange={handleCheckboxChange} />
+                  <Typography style={{ color: 'white', fontSize: '12px', height: '15px' }}>
+                    We may email you for more information or updates
+                  </Typography>
+                </ActionWrapper>
+                <FeedbackSubmitButton
+                  type="submit"
+                  disabled={!(messageValue && isChecked)}
+                  isOpen={!(messageValue && isChecked)}
+                  onClick={handleSubmit}
+                >
+                  Send
+                </FeedbackSubmitButton>
+              </div>
+            }
+            leftHeaderIcon={<FeedbackIcon />}
+            title="Feedback"
+            helpArea={
+              <CustomTooltip placement="top" title={tooltipContent} arrow>
+                <HelperWrapper>
+                  <QuestionIcon width={'30'} height={'30'} />
+                </HelperWrapper>
+              </CustomTooltip>
+            }
+            helpText={'Help'}
+            content={
+              <FeedbackForm>
+                <FeedbackOptions>
+                  {feedbackData?.map((item) => (
+                    <FeedbackOptionButton
+                      key={item.label}
+                      style={feedbackOptionStyles}
+                      type="button"
+                      onClick={() => {
+                        setCategory(item);
+                      }}
+                      isOpen={category?.label === item.label}
+                    >
+                      <FeedbackMiniIcon>{item.icon}</FeedbackMiniIcon>
+                      <Typography>{item.label}</Typography>
+                    </FeedbackOptionButton>
+                  ))}
+                </FeedbackOptions>
+                {category?.isTextInput ? (
+                  <FeedbackTextArea>
+                    <StyledTextArea
+                      value={messageValue || ''}
+                      onChange={(e) => {
+                        setMessageValue(e.target.value);
+                      }}
+                      ref={feedbackTextRef}
+                      required
+                      placeholder={category.placeholder}
+                      rows={5}
+                      cols={30}
+                    />
+                  </FeedbackTextArea>
+                ) : (
+                  <InnerComponentWrapper>{category?.innerComponent}</InnerComponentWrapper>
+                )}
+              </FeedbackForm>
+            }
+          ></ModalCard>
+        </>
+      )}
+    </Container>
+  );
+};
+
+export default FeedbackComponent;

src/custom/Feedback/index.tsx

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