From 464e1c58c1f3a1fc521eb427fec87d6a9e0183e4 Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Thu, 21 Nov 2024 22:44:33 +0800
Subject: [PATCH] refactor: remove unused components

---
 .../Group/detail/Contact/ContactPopup.jsx     | 260 ------------------
 .../Group/detail/Contact/FeedbackPopup.jsx    | 107 -------
 .../Group/detail/Contact/LoginPopup.jsx       | 117 --------
 .../Group/detail/Contact/TransitionSlide.jsx  |   8 -
 components/Group/detail/Contact/index.jsx     | 109 --------
 .../Profile/Contact/ContactDone/index.jsx     |  81 ------
 .../Profile/Contact/ContactError/index.jsx    |  66 -----
 components/Profile/Contact/index.jsx          | 195 -------------
 8 files changed, 943 deletions(-)
 delete mode 100644 components/Group/detail/Contact/ContactPopup.jsx
 delete mode 100644 components/Group/detail/Contact/FeedbackPopup.jsx
 delete mode 100644 components/Group/detail/Contact/LoginPopup.jsx
 delete mode 100644 components/Group/detail/Contact/TransitionSlide.jsx
 delete mode 100644 components/Group/detail/Contact/index.jsx
 delete mode 100644 components/Profile/Contact/ContactDone/index.jsx
 delete mode 100644 components/Profile/Contact/ContactError/index.jsx
 delete mode 100644 components/Profile/Contact/index.jsx

diff --git a/components/Group/detail/Contact/ContactPopup.jsx b/components/Group/detail/Contact/ContactPopup.jsx
deleted file mode 100644
index 5feb215d..00000000
--- a/components/Group/detail/Contact/ContactPopup.jsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import { useId, useState } from 'react';
-import Link from 'next/link';
-import styled from '@emotion/styled';
-import {
-  Avatar,
-  Box,
-  Button,
-  Dialog,
-  DialogTitle,
-  IconButton,
-  Typography,
-  TextareaAutosize,
-  useMediaQuery,
-} from '@mui/material';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import CloseIcon from '@mui/icons-material/Close';
-import { ROLE } from '@/constants/member';
-import TransitionSlide from './TransitionSlide';
-
-const StyledTitle = styled.label`
-  display: block;
-  color: var(--black-white-gray-dark, #293a3d);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 140%; /* 22.4px */
-  margin-bottom: 11px;
-`;
-const StyledTextArea = styled(TextareaAutosize)`
-  display: block;
-  padding: 12px 16px;
-  background: var(--black-white-white, #fff);
-  border-radius: 8px;
-  border: 1px solid var(--black-white-gray-very-light, #dbdbdb);
-  width: 100%;
-  min-height: 128px;
-`;
-
-const StyledDesc = styled.p`
-  font-size: 14px;
-  color: #92989a;
-
-  a {
-    color: #92989a;
-    text-decoration: underline;
-  }
-`;
-
-const desc = (
-  <StyledDesc>
-    您填的資訊將透過島島阿學 email
-    給這位夥伴，請確認訊息未涉及個人隱私並符合本網站{' '}
-    <Link href="/terms/service" target="_blank">
-      使用者條款
-    </Link>
-  </StyledDesc>
-);
-
-function ContactPopup({
-  open,
-  user,
-  label,
-  description,
-  descriptionPlaceholder,
-  isLoading,
-  onClose,
-  onSubmit,
-}) {
-  const isMobileScreen = useMediaQuery('(max-width: 560px)');
-  const [message, setMessage] = useState('');
-  const [contact, setContact] = useState('');
-  const [isChecked, setIsChecked] = useState(false);
-  const id = useId();
-  const titleId = `modal-title-${id}`;
-  const descriptionId = `modal-description-${id}`;
-  const messageId = `message-${id}`;
-  const contactId = `contact-${id}`;
-  const role =
-    ROLE.find(({ key }) => user?.roleList?.includes(key))?.label || '暫無資料';
-
-  const handleClose = () => {
-    setMessage('');
-    setContact('');
-    onClose();
-  };
-
-  const handleSubmit = () => {
-    onSubmit({ message, contact });
-  };
-
-  const checkbox = (
-    <Checkbox size="small" onClick={() => setIsChecked((pre) => !pre)} />
-  );
-
-  return (
-    <Dialog
-      keepMounted
-      scroll="body"
-      fullScreen={isMobileScreen}
-      open={open}
-      onClose={handleClose}
-      aria-labelledby={titleId}
-      aria-describedby={descriptionId}
-      TransitionComponent={TransitionSlide}
-      sx={{
-        '.MuiPaper-root': {
-          marginTop: isMobileScreen ? '84px' : undefined,
-        },
-      }}
-      PaperProps={{
-        sx: {
-          p: '16px 40px 32px',
-          borderRadius: '16px',
-        },
-      }}
-    >
-      <DialogTitle
-        id={titleId}
-        sx={{
-          color: '#536166',
-          fontWeight: 700,
-          fontSize: '18px',
-          textAlign: 'center',
-        }}
-      >
-        {label}
-      </DialogTitle>
-      <IconButton
-        aria-label="close"
-        onClick={handleClose}
-        sx={{
-          position: 'absolute',
-          right: 32,
-          top: 24,
-          color: '#536166',
-        }}
-      >
-        <CloseIcon />
-      </IconButton>
-      <Box
-        sx={{
-          width: isMobileScreen ? '100%' : '400px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '16px',
-        }}
-      >
-        <Box
-          sx={{
-            p: '12px',
-            backgroundColor: '#DEF5F5',
-            display: 'flex',
-            borderRadius: '16px',
-            alignItems: 'center',
-            gap: '12px',
-          }}
-        >
-          <Avatar
-            src={user?.photoURL}
-            alt={`${user?.name} avatar`}
-            sx={{ width: '60px', height: '60px' }}
-          />
-          <div>
-            <Typography
-              sx={{
-                display: 'block',
-                color: ' #293A3D',
-                fontWeight: 500,
-                fontSize: '16px',
-                lineHeight: '140%',
-              }}
-            >
-              {user?.name || '名稱'}
-            </Typography>
-            <Typography
-              sx={{
-                display: 'block',
-                color: ' #536166',
-                fontWeight: 400,
-                fontSize: '14px',
-                lineHeight: '140%',
-              }}
-            >
-              {role}
-            </Typography>
-          </div>
-        </Box>
-
-        <div>
-          <StyledTitle id={descriptionId} htmlFor={messageId}>
-            {description}
-          </StyledTitle>
-          <StyledTextArea
-            id={messageId}
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            placeholder={descriptionPlaceholder}
-          />
-        </div>
-
-        <div>
-          <StyledTitle htmlFor={contactId}>聯絡資訊</StyledTitle>
-          <StyledTextArea
-            id={contactId}
-            value={contact}
-            onChange={(e) => setContact(e.target.value)}
-            placeholder="寫下您的聯絡資訊，初次聯繫建議提供「想公開的社群媒體帳號、email」即可。"
-          />
-        </div>
-
-        <div>
-          <FormControlLabel
-            control={checkbox}
-            label={desc}
-            checked={isChecked}
-          />
-        </div>
-
-        <Box
-          sx={{
-            display: 'flex',
-            gap: '16px',
-          }}
-        >
-          <Button
-            color="inherit"
-            sx={{
-              flex: 1,
-              borderRadius: '20px',
-              borderColor: 'transparent',
-              boxShadow: '0 4px 10px #C4C2C166',
-            }}
-            variant="outlined"
-            disabled={isLoading}
-            onClick={handleClose}
-          >
-            取消
-          </Button>
-          <Button
-            sx={{
-              flex: 1,
-              borderRadius: '20px',
-              color: '#ffff',
-              bgcolor: '#16B9B3',
-              boxShadow: '0 4px 10px #C4C2C166',
-            }}
-            variant="contained"
-            disabled={isLoading || !message || !contact || !isChecked}
-            onClick={handleSubmit}
-          >
-            送出
-          </Button>
-        </Box>
-      </Box>
-    </Dialog>
-  );
-}
-
-export default ContactPopup;
diff --git a/components/Group/detail/Contact/FeedbackPopup.jsx b/components/Group/detail/Contact/FeedbackPopup.jsx
deleted file mode 100644
index c8282c33..00000000
--- a/components/Group/detail/Contact/FeedbackPopup.jsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useId } from 'react';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogTitle,
-  Typography,
-  useMediaQuery,
-} from '@mui/material';
-import contractDoneImg from '@/public/assets/contactdone.png';
-import contractErrorImg from '@/public/assets/contacterror.png';
-import TransitionSlide from './TransitionSlide';
-
-function FeedbackPopup({ type, onClose }) {
-  const id = useId();
-  const isMobileScreen = useMediaQuery('(max-width: 560px)');
-  const titleId = `modal-title-${id}`;
-  const descriptionId = `modal-description-${id}`;
-  const contentMap = {
-    success: {
-      imgSrc: contractDoneImg.src,
-      imgAlt: 'success cover',
-      title: '已送出邀請',
-      description: '請耐心等候夥伴的回應',
-      buttonText: '關閉',
-    },
-    error: {
-      imgSrc: contractErrorImg.src,
-      imgAlt: 'error cover',
-      title: '哎呀！有不明錯誤',
-      buttonText: '再試一次',
-    },
-  };
-  const content = contentMap[type] || {};
-
-  return (
-    <Dialog
-      keepMounted
-      scroll="body"
-      fullScreen={isMobileScreen}
-      open={!!type}
-      onClose={onClose}
-      aria-labelledby={titleId}
-      aria-describedby={descriptionId}
-      TransitionComponent={TransitionSlide}
-      sx={{
-        '.MuiPaper-root': {
-          marginTop: isMobileScreen ? '84px' : undefined,
-        },
-      }}
-      PaperProps={{
-        sx: {
-          p: '112px 44px 44px',
-          maxWidth: '480px',
-          width: '100%',
-          borderRadius: '16px',
-        },
-      }}
-    >
-      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-        <img src={content.imgSrc} alt={content.imgAlt} height="184px" />
-      </Box>
-      <DialogTitle
-        id={titleId}
-        sx={{
-          pb: '8px',
-          color: '#536166',
-          fontWeight: 700,
-          fontSize: '18px',
-          textAlign: 'center',
-          lineHeight: 1,
-        }}
-      >
-        {content.title}
-      </DialogTitle>
-      <Typography
-        id={descriptionId}
-        sx={{
-          display: 'block',
-          textAlign: 'center',
-          color: '#536166',
-          fontWeight: 400,
-          fontSize: '14px',
-        }}
-      >
-        {content.description}
-      </Typography>
-      <Box sx={{ mt: '145px' }}>
-        <Button
-          sx={{
-            borderRadius: '20px',
-            color: '#ffff',
-            bgcolor: '#16B9B3',
-            boxShadow: '0 4px 10px #C4C2C166',
-          }}
-          variant="contained"
-          onClick={onClose}
-          fullWidth
-        >
-          {content.buttonText}
-        </Button>
-      </Box>
-    </Dialog>
-  );
-}
-
-export default FeedbackPopup;
diff --git a/components/Group/detail/Contact/LoginPopup.jsx b/components/Group/detail/Contact/LoginPopup.jsx
deleted file mode 100644
index 919a50ed..00000000
--- a/components/Group/detail/Contact/LoginPopup.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { useId } from 'react';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogTitle,
-  Typography,
-  useMediaQuery,
-} from '@mui/material';
-import partnerPopupImg from '@/public/assets/partner-popup.png';
-import openLoginWindow from '@/utils/openLoginWindow';
-import TransitionSlide from './TransitionSlide';
-
-function LoginPopup({ open, onClose }) {
-  const id = useId();
-  const isMobileScreen = useMediaQuery('(max-width: 560px)');
-  const titleId = `modal-title-${id}`;
-  const descriptionId = `modal-description-${id}`;
-
-  return (
-    <Dialog
-      keepMounted
-      scroll="body"
-      fullScreen={isMobileScreen}
-      open={open}
-      onClose={onClose}
-      aria-labelledby={titleId}
-      aria-describedby={descriptionId}
-      TransitionComponent={TransitionSlide}
-      sx={{
-        '.MuiPaper-root': {
-          marginTop: isMobileScreen ? 'calc(100vh - 430px)' : undefined,
-        },
-      }}
-      PaperProps={{
-        sx: {
-          p: '32px 24px',
-          maxWidth: '400px',
-          width: '100%',
-          borderRadius: '16px',
-        },
-      }}
-    >
-      <DialogTitle
-        id={titleId}
-        sx={{
-          p: 0,
-          mb: '8px',
-          color: '#536166',
-          fontWeight: 700,
-          fontSize: '22px',
-          textAlign: 'center',
-        }}
-      >
-        請先登入或註冊
-      </DialogTitle>
-      <Typography
-        variant="subtitle1"
-        id={descriptionId}
-        sx={{
-          mb: '16px',
-          color: '#536166',
-          fontWeight: 400,
-          fontSize: '14px',
-          textAlign: 'center',
-        }}
-      >
-        登入後才可以使用聯繫夥伴功能唷！
-      </Typography>
-      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-        <img src={partnerPopupImg.src} alt="登入" height="224px" />
-      </Box>
-      <Box
-        sx={{
-          mt: '16px',
-          display: 'flex',
-          flexDirection: 'row-reverse',
-          gap: '8px',
-        }}
-      >
-        <Button
-          sx={{
-            borderRadius: '20px',
-            color: '#ffff',
-            bgcolor: '#16B9B3',
-            boxShadow: '0 4px 10px #C4C2C166',
-          }}
-          size="large"
-          variant="contained"
-          onClick={() => openLoginWindow()}
-          fullWidth
-        >
-          登入/註冊
-        </Button>
-        <Button
-          sx={{
-            borderRadius: '20px',
-            bgcolor: '#ffffff',
-            color: '#1f4645',
-            boxShadow: '0 4px 10px #C4C2C166',
-            '&:hover': {
-              bgcolor: '#dddddd',
-            },
-          }}
-          variant="contained"
-          size="large"
-          onClick={onClose}
-          fullWidth
-        >
-          取消
-        </Button>
-      </Box>
-    </Dialog>
-  );
-}
-
-export default LoginPopup;
diff --git a/components/Group/detail/Contact/TransitionSlide.jsx b/components/Group/detail/Contact/TransitionSlide.jsx
deleted file mode 100644
index c596c872..00000000
--- a/components/Group/detail/Contact/TransitionSlide.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { forwardRef } from 'react';
-import { Slide } from '@mui/material';
-
-const TransitionSlide = forwardRef((props, ref) => {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
-
-export default TransitionSlide;
diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx
deleted file mode 100644
index 487a0e8f..00000000
--- a/components/Group/detail/Contact/index.jsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useState } from 'react';
-import { useSelector } from 'react-redux';
-import styled from '@emotion/styled';
-import { Button } from '@mui/material';
-import { ROLE } from '@/constants/member';
-import chatSvg from '@/public/assets/icons/chat.svg';
-import useMutation from '@/hooks/useMutation';
-import { mapToTable } from '@/utils/helper';
-import InfoCompletionGuard from '@/shared/components/InfoCompletionGuard';
-import ContactPopup from './ContactPopup';
-import FeedbackPopup from './FeedbackPopup';
-import LoginPopup from './LoginPopup';
-
-const ROLE_LIST = mapToTable(ROLE);
-
-const StyledButton = styled(Button)`
-  padding: 8px 36px;
-  line-height: 1.5;
-  border-radius: 20px;
-  color: #ffff;
-  background-color: #16b9b3;
-  font-size: 16px;
-
-  &:disabled img {
-    mix-blend-mode: difference;
-    opacity: 0.3;
-  }
-`;
-
-function ContactButton({
-  user,
-  label,
-  activityTitle,
-  description,
-  descriptionPlaceholder,
-  isLoading,
-}) {
-  const me = useSelector((state) => state.user);
-  const [open, setOpen] = useState(false);
-  const [feedback, setFeedback] = useState('');
-  const isLogin = !!me?._id;
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-  const { mutate } = useMutation(`/email`, {
-    method: 'POST',
-    onSuccess: () => {
-      handleClose();
-      setFeedback('success');
-    },
-    onError: () => {
-      handleClose();
-      setFeedback('error');
-    },
-  });
-
-  const handleSubmit = ({ message, contact }) => {
-    mutate({
-      userId: me._id,
-      url: window.location.origin,
-      name: me.name,
-      roleList:
-        me.roleList.length > 0
-          ? me.roleList.map((roleKey) => ROLE_LIST[roleKey])
-          : [''],
-      photoUrl: me.photoURL,
-      from: me.email,
-      to: user.email,
-      subject: '【島島阿學】點開 Email，揪團有新消息',
-      activityTitle,
-      title: '你發起的揪團有人來信！',
-      text: message,
-      information: [me.email, contact],
-    });
-  };
-
-  return (
-    <div>
-      <InfoCompletionGuard>
-        <StyledButton variant="contained" onClick={() => setOpen(true)}>
-          <img
-            src={chatSvg.src}
-            alt="contact icon"
-            style={{ marginRight: '8px' }}
-          />
-          {label}
-        </StyledButton>
-      </InfoCompletionGuard>
-      {isLogin ? (
-        <ContactPopup
-          open={open}
-          user={user}
-          label={label}
-          description={description}
-          descriptionPlaceholder={descriptionPlaceholder}
-          isLoading={isLoading}
-          onClose={handleClose}
-          onSubmit={handleSubmit}
-        />
-      ) : (
-        <LoginPopup open={open} onClose={() => setOpen(false)} />
-      )}
-      <FeedbackPopup type={feedback} onClose={() => setFeedback('')} />
-    </div>
-  );
-}
-
-export default ContactButton;
diff --git a/components/Profile/Contact/ContactDone/index.jsx b/components/Profile/Contact/ContactDone/index.jsx
deleted file mode 100644
index 921df664..00000000
--- a/components/Profile/Contact/ContactDone/index.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Modal, Box, Typography, Button } from '@mui/material';
-
-function ContactDoneModal() {
-  return (
-    <Modal
-      keepMounted
-      open
-      aria-labelledby="keep-mounted-modal-title"
-      aria-describedby="keep-mounted-modal-description"
-    >
-      <Box
-        sx={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: '480px',
-          height: '602px',
-          bgcolor: 'background.paper',
-          boxShadow: 24,
-          borderRadius: '16px',
-          p: '45px',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Box sx={{ mt: '77px', mb: '16px' }}>
-          <img
-            src="/assets/contactdone.png"
-            alt="nobody-land"
-            width="312px"
-            height="184px"
-          />
-        </Box>
-        <Typography
-          id="keep-mounted-modal-title"
-          variant="h3"
-          component="h2"
-          textAlign="center"
-          sx={{
-            color: ' #536166',
-            fontWeight: 700,
-            fontWize: '18px',
-            lineHeight: '120%',
-          }}
-        >
-          已送出邀請
-        </Typography>
-        <Typography
-          id="keep-mounted-modal-subtitle"
-          variant="h6"
-          component="h4"
-          textAlign="center"
-          sx={{
-            color: ' #536166',
-            fontWeight: 400,
-            fontWize: '14px',
-            lineHeight: '140%',
-            mt: '8px',
-          }}
-        >
-          請耐心等候夥伴的回應
-        </Typography>
-        <Button
-          sx={{
-            color: 'white',
-            width: '100%',
-            borderRadius: '20px',
-            mt: '145px',
-          }}
-          variant="contained"
-        >
-          關閉
-        </Button>
-      </Box>
-    </Modal>
-  );
-}
-
-export default ContactDoneModal;
diff --git a/components/Profile/Contact/ContactError/index.jsx b/components/Profile/Contact/ContactError/index.jsx
deleted file mode 100644
index 2f344132..00000000
--- a/components/Profile/Contact/ContactError/index.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Modal, Box, Typography, Button } from '@mui/material';
-
-function ContactErrorModal() {
-  return (
-    <Modal
-      keepMounted
-      open
-      aria-labelledby="keep-mounted-modal-title"
-      aria-describedby="keep-mounted-modal-description"
-    >
-      <Box
-        sx={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: '480px',
-          height: '602px',
-          bgcolor: 'background.paper',
-          boxShadow: 24,
-          borderRadius: '16px',
-          p: '45px',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Box sx={{ mt: '68px', mb: '21px' }}>
-          <img
-            src="/assets/contacterror.png"
-            alt="nobody-land"
-            width="212px"
-            height="184px"
-          />
-        </Box>
-        <Typography
-          id="keep-mounted-modal-title"
-          variant="h3"
-          component="h2"
-          textAlign="center"
-          sx={{
-            color: ' #536166',
-            fontWeight: 700,
-            fontWize: '18px',
-            lineHeight: '120%',
-          }}
-        >
-          哎呀！有不明錯誤
-        </Typography>
-        <Button
-          sx={{
-            color: 'white',
-            width: '100%',
-            borderRadius: '20px',
-            mt: '173px ',
-          }}
-          variant="contained"
-        >
-          再試一次
-        </Button>
-      </Box>
-    </Modal>
-  );
-}
-
-export default ContactErrorModal;
diff --git a/components/Profile/Contact/index.jsx b/components/Profile/Contact/index.jsx
deleted file mode 100644
index 279df13b..00000000
--- a/components/Profile/Contact/index.jsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Modal,
-  Box,
-  Typography,
-  Button,
-  TextareaAutosize,
-  Avatar,
-} from '@mui/material';
-import styled from '@emotion/styled';
-
-const StyledGroup = styled(Box)`
-  margin-bottom: 16px;
-`;
-
-const StyledTitle = styled(Typography)`
-  color: var(--black-white-gray-dark, #293a3d);
-  /* desktop/body-M-Medium */
-  font-family: Noto Sans TC;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 140%; /* 22.4px */
-  margin-bottom: 11px;
-`;
-const StyledTextArea = styled(TextareaAutosize)`
-  border-radius: 8px;
-  border: 1px solid var(--black-white-gray-very-light, #dbdbdb);
-  background: var(--black-white-white, #fff);
-  padding: 12px 16px;
-  width: 100%;
-  min-height: 128px;
-`;
-
-function ContactModal({
-  title,
-  descipt,
-  avatar,
-  onClose,
-  onOk,
-  isLoadingSubmit,
-  open,
-}) {
-  const [message, setMessage] = useState('');
-  const [contact, setContact] = useState('');
-
-  const handleSubmit = () => {
-    onOk({ message, contact });
-    setMessage('');
-    setContact('');
-  };
-
-  return (
-    <Modal
-      keepMounted
-      open={open}
-      onClose={onClose}
-      aria-labelledby="keep-mounted-modal-title"
-      aria-describedby="keep-mounted-modal-description"
-    >
-      <Box
-        sx={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: '480px',
-          bgcolor: 'background.paper',
-          boxShadow: 24,
-          borderRadius: '16px',
-          p: 5,
-        }}
-      >
-        <Typography
-          id="keep-mounted-modal-title"
-          variant="h3"
-          component="h2"
-          textAlign="center"
-          sx={{
-            color: ' #536166',
-            fontWeight: 700,
-            fontWize: '18px',
-            lineHeight: '120%',
-          }}
-        >
-          聯繫夥伴
-        </Typography>
-        <Box
-          sx={{
-            width: '400px',
-            display: 'flex',
-            flexDirection: 'column',
-            padding: '22px 0px 0px 0px ',
-          }}
-        >
-          <Box
-            sx={{
-              width: '100%',
-              backgroundColor: '#DEF5F5',
-              display: 'flex',
-              justifyContent: 'flex-start',
-              borderRadius: '16px',
-              p: 2,
-              mb: '16px',
-            }}
-          >
-            <Avatar alt={title} src={avatar} />
-            <Box
-              sx={{
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                ml: '12px',
-              }}
-            >
-              <Typography
-                id="keep-mounted-modal-subtitle"
-                sx={{
-                  color: ' #293A3D',
-                  fontWeight: 400,
-                  fontSize: '16px',
-                  lineHeight: '140%',
-                }}
-              >
-                {title}
-              </Typography>
-              <Typography
-                sx={{
-                  color: ' #536166',
-                  fontWeight: 400,
-                  fontSize: '10px',
-                  lineHeight: '140%',
-                }}
-              >
-                {descipt}
-              </Typography>
-            </Box>
-          </Box>
-
-          <StyledGroup>
-            <StyledTitle id="keep-mounted-modal-subtitle">邀請訊息</StyledTitle>
-            <StyledTextArea
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              placeholder="想要和新夥伴交流什麼呢？可以簡單的自我介紹，寫下想認識夥伴的原因。"
-            />
-          </StyledGroup>
-          <StyledGroup>
-            <StyledTitle id="keep-mounted-modal-description">
-              聯絡資訊
-            </StyledTitle>
-            <StyledTextArea
-              value={contact}
-              onChange={(e) => setContact(e.target.value)}
-              placeholder="寫下您的聯絡資訊，初次聯繫建議提供「想公開的社群媒體帳號、email」即可。"
-            />
-          </StyledGroup>
-
-          <Box
-            sx={{
-              mt: '40px',
-              width: '100%',
-              display: 'flex',
-            }}
-          >
-            <Button
-              sx={{ width: '100%', borderRadius: '20px', mr: '4px' }}
-              variant="outlined"
-              disabled={isLoadingSubmit}
-              onClick={onClose}
-            >
-              取消
-            </Button>
-            <Button
-              sx={{
-                width: '100%',
-                borderRadius: '20px',
-                ml: '4px',
-                color: '#ffff',
-                bgcolor: '#16B9B3',
-              }}
-              variant="contained"
-              disabled={isLoadingSubmit}
-              onClick={() => handleSubmit({ message, contact })}
-            >
-              送出
-            </Button>
-          </Box>
-        </Box>
-      </Box>
-    </Modal>
-  );
-}
-
-export default ContactModal;