Merge pull request #75 from daodaoedu/dev

merge dev into prod
daodaoedu · Aug 8, 2024 · 16ea19d · 16ea19d
2 parents b908ef9 + bb96532
commit 16ea19d
Show file tree

Hide file tree

Showing 21 changed files with 545 additions and 384 deletions.
diff --git a/components/Group/SearchField/SelectedEducationStep.jsx b/components/Group/SearchField/SelectedEducationStep.jsx
@@ -1,9 +1,7 @@
 import Select from '@/shared/components/Select';
-import { EDUCATION_STEP } from '@/constants/member';
+import { EDUCATION_STAGE } from '@/constants/member';
 import useSearchParamsManager from '@/hooks/useSearchParamsManager';
 
-const EduStep = EDUCATION_STEP.slice(0, 7);
-
 export default function SelectedEducationStep() {
   const QUERY_KEY = 'partnerEducationStep';
   const [getSearchParams, pushState] = useSearchParamsManager();
@@ -17,7 +15,7 @@ export default function SelectedEducationStep() {
       multiple
       value={getSearchParams(QUERY_KEY)}
       onChange={handleChange}
-      items={EduStep}
+      items={EDUCATION_STAGE}
       itemLabel="label"
       itemValue="label"
       renderValue={(selected) =>

diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx
@@ -1,6 +1,7 @@
 import { useId, useState, forwardRef, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
+import Link from 'next/link';
 import styled from '@emotion/styled';
 import {
   Avatar,
@@ -23,6 +24,19 @@ import Feedback from './Feedback';
 
 const ROLELIST = 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;
+  }
+`;
 const StyledTitle = styled.label`
   display: block;
   color: var(--black-white-gray-dark, #293a3d);
@@ -41,15 +55,27 @@ const StyledTextArea = styled(TextareaAutosize)`
   width: 100%;
   min-height: 128px;
 `;
+const StyledLink = styled(Link)`
+  margin-top: 6px;
+  margin-left: 6px;
+  display: block;
+  color: black;
+  font-size: 12px;
+`;
+const StyledSpan = styled.span`
+  padding: 0 2px;
+  color: #16b9b3;
+  text-decoration: underline;
+`;
 
 const Transition = forwardRef((props, ref) => {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
 function ContactButton({
   user,
-  children,
-  title,
+  label,
+  activityTitle,
   description,
   descriptionPlaceholder,
   isLoading,
@@ -66,6 +92,7 @@ function ContactButton({
   const descriptionId = `modal-description-${id}`;
   const messageId = `message-${id}`;
   const contactId = `contact-${id}`;
+  const isLogin = !!me?._id;
   const role =
     ROLE.find(({ key }) => user?.roleList?.includes(key))?.label || '暫無資料';
 
@@ -98,7 +125,8 @@ function ContactButton({
       photoUrl: me.photoURL,
       from: me.email,
       to: user.email,
-      subject: '【島島阿學】點開 Email，認識新夥伴',
+      subject: '【島島阿學】點開 Email，揪團有新消息',
+      activityTitle,
       title: '你發起的揪團有人來信！',
       text: message,
       information: [me.email, contact],
@@ -107,30 +135,28 @@ function ContactButton({
 
   useEffect(() => {
     if (!me?._id && open) router.push('/login');
-  }, [me, open, router]);
+  }, [me?._id, open, router]);
 
   return (
-    <>
-      <Button
+    <div>
+      <StyledButton
         variant="contained"
-        sx={{
-          p: '8px 36px',
-          lineHeight: 1.5,
-          borderRadius: '20px',
-          color: '#ffff',
-          bgcolor: '#16B9B3',
-          fontSize: '16px',
-        }}
-        disabled={isLoading}
+        disabled={!isLogin || isLoading}
         onClick={() => setOpen(true)}
       >
         <img
           src={chatSvg.src}
           alt="contact icon"
           style={{ marginRight: '8px' }}
         />
-        {children || title}
-      </Button>
+        {label}
+      </StyledButton>
+      {!isLogin && (
+        <StyledLink href="/login">
+          <StyledSpan>註冊</StyledSpan>或<StyledSpan>登入</StyledSpan>
+          即可聯繫主揪！
+        </StyledLink>
+      )}
       <Dialog
         keepMounted
         scroll="body"
@@ -161,7 +187,7 @@ function ContactButton({
             textAlign: 'center',
           }}
         >
-          {title}
+          {label}
         </DialogTitle>
         <IconButton
           aria-label="close"
@@ -284,7 +310,7 @@ function ContactButton({
         </Box>
       </Dialog>
       <Feedback type={feedback} onClose={() => setFeedback('')} />
-    </>
+    </div>
   );
 }
 

diff --git a/components/Group/detail/More.jsx b/components/Group/detail/More.jsx
@@ -41,7 +41,7 @@ export default function More() {
       >
         <MenuItem
           component="a"
-          href="https://docs.google.com/forms/d/e/1FAIpQLSfgpHNzm9OAk44Jbgamkq7--odZfC3h4vgw96DPLYvZ07wC_g/viewform"
+          href="https://forms.gle/NkVbDWC3eXk4P4gv7"
           target="_blank"
           sx={{ minWidth: '146px' }}
           onClick={handleClose}

diff --git a/components/Group/detail/index.jsx b/components/Group/detail/index.jsx
@@ -87,7 +87,8 @@ function GroupDetail({ id, source, isLoading }) {
           ) : (
             <ContactButton
               user={source?.user || {}}
-              title="聯繫主揪"
+              activityTitle={source?.title}
+              label="聯繫主揪"
               description="想跟主揪說的話"
               descriptionPlaceholder="想參加主揪的團體嗎？可以簡單的自我介紹，寫下想加入的原因。"
             />

diff --git a/components/Profile/InputTags/index.jsx b/components/Profile/InputTags/index.jsx
@@ -13,6 +13,7 @@ const Tag = ({ label, onCancel }) => {
         borderRadius: '4px',
         padding: '4px 8px',
         mr: '8px',
+        mb: '8px',
       }}
     >
       <Typography
@@ -36,9 +37,20 @@ const Tag = ({ label, onCancel }) => {
   );
 };
 
-const StyledTagsField = styled(TextField)`
+const StyledTagsWrapper = styled(Box)`
+  width: 100%;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+  align-items: center;
+  padding: 8px 16px;
+  min-height: 50px;
+  div {
+    &::before {
+      border-color: transparent;
+    }
+  }
   input {
-    padding-left: ${({ hasData }) => (hasData ? '0' : '16px')};
+    padding: 0;
   }
 `;
 
@@ -51,33 +63,38 @@ function InputTags({ value = [], change }) {
       }
     }
   };
+
   return (
-    <StyledTagsField
-      hasData={value.length > 0}
-      fullWidth="true"
-      placeholder="搜尋或新增標籤"
-      onKeyDown={keyDownHandle}
-      className="input-tags"
-      InputProps={
-        value.length && {
-          startAdornment: (
-            <Box sx={{ marginTop: '5px', display: 'flex' }}>
-              {Array.isArray(value) &&
-                value.map(
-                  (item) =>
-                    typeof item === 'string' && (
-                      <Tag
-                        key={item}
-                        label={item}
-                        onCancel={() => change(item)}
-                      />
-                    ),
-                )}
-            </Box>
-          ),
-        }
-      }
-    />
+    <StyledTagsWrapper>
+      <Box
+        sx={{
+          marginTop: '5px',
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+        }}
+      >
+        {Array.isArray(value) &&
+          value.map(
+            (item) =>
+              typeof item === 'string' && (
+                <Tag key={item} label={item} onCancel={() => change(item)} />
+              ),
+          )}
+        <TextField
+          fullWidth="true"
+          placeholder={value.length ? '' : '搜尋或新增標籤'}
+          onKeyDown={keyDownHandle}
+          variant="standard"
+          className="text-field"
+          sx={{
+            padding: '0',
+            minWidth: '50px',
+            width: 'auto',
+          }}
+        />
+      </Box>
+    </StyledTagsWrapper>
   );
 }
 

diff --git a/components/Profile/UserCard/Avator.jsx b/components/Profile/UserCard/Avator.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Skeleton } from '@mui/material';
+
+const Avator = ({ photoURL }) => {
+  return (
+    <LazyLoadImage
+      alt="login"
+      src={photoURL || ''}
+      height={80}
+      width={80}
+      effect="opacity"
+      style={{
+        borderRadius: '100%',
+        background: 'rgba(240, 240, 240, .8)',
+        objectFit: 'cover',
+        objectPosition: 'center',
+        minHeight: '80px',
+        minWidth: '80px',
+      }}
+      placeholder={
+        // eslint-disable-next-line react/jsx-wrap-multilines
+        <Skeleton
+          sx={{
+            height: '80px',
+            width: '80px',
+            background: 'rgba(240, 240, 240, .8)',
+            marginTop: '4px',
+          }}
+          variant="circular"
+          animation="wave"
+        />
+      }
+    />
+  );
+};
+
+export default Avator;
diff --git a/components/Profile/UserCard/Dropdown.jsx b/components/Profile/UserCard/Dropdown.jsx
@@ -61,7 +61,7 @@ export default function Dropdown({ sx }) {
       <StyledMenu anchorEl={anchorEl} open={open} onClose={handleClose}>
         <MenuItem
           component="a"
-          href="https://docs.google.com/forms/d/e/1FAIpQLSfgpHNzm9OAk44Jbgamkq7--odZfC3h4vgw96DPLYvZ07wC_g/viewform"
+          href="https://forms.gle/NkVbDWC3eXk4P4gv7"
           target="_blank"
           sx={{ minWidth: '146px' }}
           onClick={handleClose}

diff --git a/components/Profile/UserCard/SocialMediaItem.jsx b/components/Profile/UserCard/SocialMediaItem.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Box } from '@mui/material';
+
+const SocialMediaItem = ({ link, text, tag, iconComponent }) => {
+  return (
+    <Box as={tag || 'div'}>
+      {iconComponent}
+      <a target="_blank" rel="noreferrer" href={link}>
+        {text}
+      </a>
+    </Box>
+  );
+};
+
+export default SocialMediaItem;
diff --git a/components/Profile/UserCard/Tag.jsx b/components/Profile/UserCard/Tag.jsx
@@ -0,0 +1,19 @@
+import { Chip } from '@mui/material';
+
+const Tag = ({ label }) => {
+  return (
+    <Chip
+      label={label}
+      value={label}
+      sx={{
+        margin: '5px',
+        whiteSpace: 'nowrap',
+        fontWeight: 400,
+        fontSize: '14px',
+        bgcolor: '#DEF5F5',
+      }}
+    />
+  );
+};
+
+export default Tag;