fix: card profile more items

src/common/component/Profile/index.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useSelector } from "react-redux";
-import { NavLink } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
@@ -12,8 +12,14 @@ import StyledWrapper from "./styled";
 import StyledMenu from "../styled/Menu";
 import useCopy from "../../hook/useCopy";
 import { useRemoveMembersMutation } from "../../../app/services/channel";
+import { useLazyDeleteContactQuery } from "../../../app/services/contact";
 
 export default function Profile({ uid = null, type = "embed", cid = null }) {
+  const navigateTo = useNavigate();
+  const [
+    removeUser,
+    { isSuccess: removeUserSuccess },
+  ] = useLazyDeleteContactQuery();
   const [
     removeFromChannel,
     { isSuccess: removeSuccess },
@@ -28,10 +34,13 @@ export default function Profile({ uid = null, type = "embed", cid = null }) {
     };
   });
   useEffect(() => {
-    if (removeSuccess) {
+    if (removeSuccess || removeUserSuccess) {
       toast.success("Remove Successfully");
+      if (removeUserSuccess) {
+        navigateTo(`/contacts`);
+      }
     }
-  }, [removeSuccess]);
+  }, [removeSuccess, removeUserSuccess]);
 
   if (!data) return null;
   // console.log("profile", data);
@@ -48,17 +57,20 @@ export default function Profile({ uid = null, type = "embed", cid = null }) {
     copy(email);
     hideAll();
   };
-  const handleRemove = (uid) => {
-    removeFromChannel({ id: +cid, members: [+uid] });
+  const handleRemove = ({ from = "channel", uid }) => {
+    const remove = from == "channel" ? removeFromChannel : removeUser;
+    remove(from == "channel" ? { id: +cid, members: [+uid] } : uid);
     hideAll();
   };
-  const canCall = type !== "card" && loginUid != uid;
+  const canCall = type == "card" && loginUid != uid;
+  const canRemoveFromServer = type == "embed" && isAdmin;
   const canRemoveFromChannel =
     cid &&
     !channel?.is_public &&
     (isAdmin || channel?.owner == loginUid) &&
     channel?.owner != uid;
-  const hasMore = canCall || email || canRemoveFromChannel;
+  const hasMore =
+    canCall || email || canRemoveFromChannel || canRemoveFromServer;
   return (
     <StyledWrapper className={type}>
       <Avatar className="avatar" url={avatar} name={name} />
@@ -73,7 +85,7 @@ export default function Profile({ uid = null, type = "embed", cid = null }) {
           </li>
         </NavLink>
         {/* <NavLink to={`#`}> */}
-        {canCall && (
+        {type == "embed" && (
           <li className="icon call" onClick={handleClick}>
             <IconCall />
             <span className="txt">Call</span>
@@ -83,12 +95,18 @@ export default function Profile({ uid = null, type = "embed", cid = null }) {
         <Tippy
           disabled={!hasMore}
           interactive
+          popperOptions={{ strategy: "fixed" }}
           placement="bottom-start"
           trigger="click"
           hideOnClick={true}
           content={
             <StyledMenu>
-              {canCall && <li className="item">Call</li>}
+              {canCall && (
+                <li className="item">
+                  {/* <IconCall className="icon" /> */}
+                  Call
+                </li>
+              )}
               {email && (
                 <li className="item" onClick={handlCopyEmail}>
                   Copy Email
@@ -97,11 +115,19 @@ export default function Profile({ uid = null, type = "embed", cid = null }) {
               {canRemoveFromChannel && (
                 <li
                   className="item danger"
-                  onClick={handleRemove.bind(null, uid)}
+                  onClick={handleRemove.bind(null, { uid })}
                 >
                   Remove from Channel
                 </li>
               )}
+              {canRemoveFromServer && (
+                <li
+                  className="item danger"
+                  onClick={handleRemove.bind(null, { from: "server", uid })}
+                >
+                  Remove from Server
+                </li>
+              )}
             </StyledMenu>
           }
         >

src/common/component/Profile/styled.js

@@ -64,9 +64,9 @@ const StyledWrapper = styled.div`
         }
       }
       &.disabled {
-        color: #ccc;
+        color: #667085;
         svg path {
-          fill: #ccc;
+          fill: #667085;
         }
       }
       .txt {