♻️ refactor contact dialog feedback

daodaoedu · Feb 10, 2024 · fdc6ab1 · fdc6ab1
1 parent ce8164e
commit fdc6ab1
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 155 deletions.
diff --git a/components/Group/GroupList/index.jsx b/components/Group/GroupList/index.jsx
@@ -48,7 +48,7 @@ function GroupList() {
     const filterOptions = {
       area: AREAS,
       category: CATEGORIES,
-      edu: EDUCATION_STEP,
+      partnerEducationStep: EDUCATION_STEP,
       grouping: true,
       q: true,
     };

diff --git a/components/Group/SearchField/SelectedEducationStep.jsx b/components/Group/SearchField/SelectedEducationStep.jsx
@@ -3,7 +3,7 @@ import { EDUCATION_STEP } from '@/constants/member';
 import useSearchParamsManager from '@/hooks/useSearchParamsManager';
 
 export default function SelectedEducationStep() {
-  const QUERY_KEY = 'edu';
+  const QUERY_KEY = 'partnerEducationStep';
   const [getSearchParams, pushState] = useSearchParamsManager();
 
   const handleChange = ({ target: { value } }) => {

diff --git a/components/Group/detail/Contact/ContactDone/index.jsx b/components/Group/detail/Contact/ContactDone/index.jsx
diff --git a/components/Group/detail/Contact/ContactError/index.jsx b/components/Group/detail/Contact/ContactError/index.jsx
diff --git a/components/Group/detail/Contact/Feedback.jsx b/components/Group/detail/Contact/Feedback.jsx
@@ -0,0 +1,110 @@
+import { useId, forwardRef } from 'react';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogTitle,
+  Slide,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
+import contractDoneImg from '@/public/assets/contactdone.png';
+import contractErrorImg from '@/public/assets/contacterror.png';
+
+const Transition = forwardRef((props, ref) => {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+function Feedback({ 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={Transition}
+      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
+        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 Feedback;
diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx
@@ -16,8 +16,7 @@ import {
 import CloseIcon from '@mui/icons-material/Close';
 import { ROLE } from '@/constants/member';
 import chatSvg from '@/public/assets/icons/chat.svg';
-import ContactDoneModal from './ContactDone';
-import ContactErrorModal from './ContactError';
+import Feedback from './Feedback';
 
 const StyledTitle = styled.label`
   display: block;
@@ -38,7 +37,7 @@ const StyledTextArea = styled(TextareaAutosize)`
   min-height: 128px;
 `;
 
-const Transition = forwardRef(function InternalTransition(props, ref) {
+const Transition = forwardRef((props, ref) => {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
@@ -57,6 +56,7 @@ function ContactButton({
   const [open, setOpen] = useState(false);
   const [message, setMessage] = useState('');
   const [contact, setContact] = useState('');
+  const [feedback, setFeedback] = useState('');
   const isMobileScreen = useMediaQuery('(max-width: 560px)');
   const titleId = `modal-title-${id}`;
   const descriptionId = `modal-description-${id}`;
@@ -75,6 +75,7 @@ function ContactButton({
   const handleSubmit = () => {
     if (onSubmit) onSubmit({ message, contact });
     handleClose();
+    setFeedback('success');
   };
 
   return (
@@ -243,16 +244,15 @@ function ContactButton({
                 boxShadow: '0 4px 10px #C4C2C166',
               }}
               variant="contained"
-              disabled={isLoading}
+              disabled={isLoading || !message || !contact}
               onClick={handleSubmit}
             >
               送出
             </Button>
           </Box>
         </Box>
       </Dialog>
-      {/* <ContactDoneModal /> */}
-      {/* <ContactErrorModal /> */}
+      <Feedback type={feedback} onClose={() => setFeedback('')} />
     </>
   );
 }