From d25d8b02ed6000d74a98309d030f45866a582443 Mon Sep 17 00:00:00 2001
From: hsuifang <whalekiller03@gmail.com>
Date: Thu, 25 Jan 2024 22:01:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=99=BC=E9=80=81=20Email=20=E5=85=A7?=
 =?UTF-8?q?=E5=AE=B9-=20=E8=A7=92=E8=89=B2=E5=8F=8A=E5=88=87=E6=8F=9B?=
 =?UTF-8?q?=E8=A8=82=E9=96=B1=E9=9B=BB=E5=AD=90=E5=A0=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PartnerCard/PartnerCardTag.jsx            |  2 +-
 components/Profile/Accountsetting/index.jsx   | 78 ++++++++++---------
 pages/partner/detail/index.jsx                |  3 +-
 3 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/components/Partner/PartnerList/PartnerCard/PartnerCardTag.jsx b/components/Partner/PartnerList/PartnerCard/PartnerCardTag.jsx
index b4631e51..5a625a5e 100644
--- a/components/Partner/PartnerList/PartnerCard/PartnerCardTag.jsx
+++ b/components/Partner/PartnerList/PartnerCard/PartnerCardTag.jsx
@@ -7,7 +7,7 @@ const PartnerCardTag = ({ tagList = [] }) => {
     tagList.length > 0 && (
       <StyledTagContainer container gap="8px" mb="12px">
         {showItems
-          .filter((t) => typeof t === 'string' && t !== '')
+          .filter((t) => typeof t === 'string' && t.trim() !== '')
           .map((tag) => (
             <StyledTagText item key={tag} fontWeight="400">
               {tag}
diff --git a/components/Profile/Accountsetting/index.jsx b/components/Profile/Accountsetting/index.jsx
index 103d9c56..22755863 100644
--- a/components/Profile/Accountsetting/index.jsx
+++ b/components/Profile/Accountsetting/index.jsx
@@ -10,15 +10,25 @@ import {
 import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateUser, userLogout } from '@/redux/actions/user';
+import styled from '@emotion/styled';
 
-const TypographyStyle = {
-  fontFamily: 'Noto Sans TC',
-  fontStyle: 'normal',
-  fontWeight: '500',
-  fontSize: '16px',
-  lineHeight: '140%',
-  color: '#293A3D',
-};
+const StyledTypographyStyle = styled(Typography)`
+  font-family: Noto Sans TC;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.4;
+  color: #293a3d;
+`;
+
+const StyledLogoutBtn = styled(Button)`
+  border-radius: 20px;
+  background: #fff;
+  color: #1f4645;
+  padding: 5px 0;
+  /* shadow-light-gray */
+  box-shadow: 0px 4px 10px 0px rgba(196, 194, 193, 0.4);
+`;
 
 const AccountSetting = () => {
   const dispatch = useDispatch();
@@ -27,10 +37,11 @@ const AccountSetting = () => {
   const [isSubscribeEmail, setIsSubscribeEmail] = useState(false);
   const user = useSelector((state) => state.user);
 
-  const onUpdateUser = () => {
+  const onUpdateUser = (status) => {
     const payload = {
+      id: user._id,
       email: user.email,
-      isSubscribeEmail,
+      isSubscribeEmail: status,
     };
     dispatch(updateUser(payload));
   };
@@ -42,7 +53,7 @@ const AccountSetting = () => {
 
   useEffect(() => {
     setIsSubscribeEmail(user?.isSubscribeEmail || false);
-  }, [user]);
+  }, [user.isSubscribeEmail]);
 
   return (
     <Box
@@ -69,14 +80,20 @@ const AccountSetting = () => {
         }}
       >
         <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
-          <Typography sx={TypographyStyle}>電子信箱</Typography>
-          <Button
-            variant="contained"
-            disabled
-            sx={{ width: '100%', margin: '8px 0 30px 0' }}
+          <StyledTypographyStyle>電子信箱</StyledTypographyStyle>
+          <Box
+            sx={{
+              width: '100%',
+              margin: '8px 0 30px 0',
+              borderRadius: '8px',
+              border: '1px solid #DBDBDB',
+              background: '#F3F3F3',
+              padding: '12px 16px',
+              color: '#92989A',
+            }}
           >
             {user.email}
-          </Button>
+          </Box>
         </Box>
         {/* <Box sx={{ display: 'flex', flexDirection: 'column' }}>
           <Typography sx={TypographyStyle}>電話驗證</Typography>
@@ -93,38 +110,29 @@ const AccountSetting = () => {
           </Button>
         </Box> */}
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-          <Typography sx={TypographyStyle}>電子報</Typography>
+          <StyledTypographyStyle>電子報</StyledTypographyStyle>
           <FormControlLabel
-            sx={{
-              marginTop: '20px',
-            }}
             control={
               // eslint-disable-next-line react/jsx-wrap-multilines
               <Checkbox
                 checked={isSubscribeEmail}
                 onChange={(event) => {
                   setIsSubscribeEmail(event.target.checked);
-                  // onUpdateUser();//待處理取消訂閱
+                  onUpdateUser(event.target.checked);
                 }}
               />
             }
             label="訂閱電子報與島島阿學的新資訊"
           />
         </Box>
-        <Divider sx={{ color: '#F3F3F3', margin: '6px 0' }} />
+        <Divider
+          sx={{ width: '100%', color: '#000', margin: '30px 0', height: '2px' }}
+        />
         <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
-          <Typography sx={TypographyStyle}>登出帳號</Typography>
-          <Button
-            variant="contained"
-            sx={{
-              width: '100%',
-              margin: '24px 0 30px 0',
-              backgroundColor: 'white',
-            }}
-            onClick={logout}
-          >
-            登出
-          </Button>
+          <StyledTypographyStyle sx={{ mb: '24px' }}>
+            登出帳號
+          </StyledTypographyStyle>
+          <StyledLogoutBtn onClick={logout}>登出</StyledLogoutBtn>
         </Box>
       </Box>
     </Box>
diff --git a/pages/partner/detail/index.jsx b/pages/partner/detail/index.jsx
index 5e99f3df..9a24a125 100644
--- a/pages/partner/detail/index.jsx
+++ b/pages/partner/detail/index.jsx
@@ -45,7 +45,8 @@ const Detail = () => {
       sendEmailToPartner({
         to: partner.email,
         name,
-        roleList: roleList.length > 0 ? roleList : [''],
+        roleList:
+          roleList.length > 0 ? roleList.map((role) => ROLELIST[role]) : [''],
         photoURL,
         text: message,
         information: [loginUserEmail, contact],