From 43807a75370231b192797465ef9413f2fd734d4a Mon Sep 17 00:00:00 2001
From: Anirban Singha <anirbansingha20@gmail.com>
Date: Sun, 1 Dec 2024 12:01:37 +0530
Subject: [PATCH] Restrict pin icon visibility

---
 packages/react/src/hooks/useRCAuth.js              | 6 ++++--
 packages/react/src/store/userStore.js              | 8 ++++----
 packages/react/src/views/Message/Message.js        | 6 +++---
 packages/react/src/views/Message/MessageToolbox.js | 4 +++-
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/hooks/useRCAuth.js b/packages/react/src/hooks/useRCAuth.js
index 1f324d420..6a997cb56 100644
--- a/packages/react/src/hooks/useRCAuth.js
+++ b/packages/react/src/hooks/useRCAuth.js
@@ -20,7 +20,9 @@ export const useRCAuth = () => {
   );
   const setPassword = useUserStore((state) => state.setPassword);
   const setEmailorUser = useUserStore((state) => state.setEmailorUser);
-  const setUserPermissions = useUserStore((state) => state.setUserPermissions);
+  const setUserPinPermissions = useUserStore(
+    (state) => state.setUserPinPermissions
+  );
   const dispatchToastMessage = useToastBarDispatch();
 
   const handleLogin = async (userOrEmail, password, code) => {
@@ -58,7 +60,7 @@ export const useRCAuth = () => {
           setIsTotpModalOpen(false);
           setEmailorUser(null);
           setPassword(null);
-          setUserPermissions(permissions);
+          setUserPinPermissions(permissions.update[150]);
           dispatchToastMessage({
             type: 'success',
             message: 'Successfully logged in',
diff --git a/packages/react/src/store/userStore.js b/packages/react/src/store/userStore.js
index 6cdbd56b9..d3c3aa24c 100644
--- a/packages/react/src/store/userStore.js
+++ b/packages/react/src/store/userStore.js
@@ -27,11 +27,11 @@ const useUserStore = create((set) => ({
   setPassword: (password) => set(() => ({ password })),
   emailoruser: null,
   setEmailorUser: (emailoruser) => set(() => ({ emailoruser })),
-  roles: {},
+  roles: [],
   setRoles: (roles) => set((state) => ({ ...state, roles })),
-  userPermissions: {},
-  setUserPermissions: (userPermissions) =>
-    set((state) => ({ ...state, userPermissions })),
+  userPinPermissions: {},
+  setUserPinPermissions: (userPinPermissions) =>
+    set((state) => ({ ...state, userPinPermissions })),
   showCurrentUserInfo: false,
   setShowCurrentUserInfo: (showCurrentUserInfo) =>
     set(() => ({ showCurrentUserInfo })),
diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index ba1b5f84e..64d2050f0 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -53,7 +53,7 @@ const Message = ({
   const authenticatedUserUsername = useUserStore((state) => state.username);
   const userRoles = useUserStore((state) => state.roles);
   const pinPermissions = useUserStore(
-    (state) => state.userPermissions.update[150].roles
+    (state) => state.userPinPermissions.roles
   );
   const [setMessageToReport, toggleShowReportMessage] = useMessageStore(
     (state) => [state.setMessageToReport, state.toggleShowReportMessage]
@@ -72,7 +72,6 @@ const Message = ({
   const styles = getMessageStyles(theme);
   const bubbleStyles = useBubbleStyles(isMe);
   const pinRoles = new Set(pinPermissions);
-  const isAllowedToPin = userRoles.some((role) => pinRoles.has(role));
 
   const variantStyles =
     !isInSidebar && variantOverrides === 'bubble' ? bubbleStyles : {};
@@ -206,7 +205,8 @@ const Message = ({
                     message={message}
                     isEditing={editMessage._id === message._id}
                     authenticatedUserId={authenticatedUserId}
-                    isAllowedToPin={isAllowedToPin}
+                    userRoles={userRoles}
+                    pinRoles={pinRoles}
                     handleOpenThread={handleOpenThread}
                     handleDeleteMessage={handleDeleteMessage}
                     handleStarMessage={handleStarMessage}
diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js
index d6a23fa65..55af7f64d 100644
--- a/packages/react/src/views/Message/MessageToolbox.js
+++ b/packages/react/src/views/Message/MessageToolbox.js
@@ -21,7 +21,8 @@ export const MessageToolbox = ({
   style = {},
   isThreadMessage = false,
   authenticatedUserId,
-  isAllowedToPin,
+  userRoles,
+  pinRoles,
   handleOpenThread,
   handleEmojiClick,
   handlePinMessage,
@@ -68,6 +69,7 @@ export const MessageToolbox = ({
     setShowDeleteModal(false);
   };
 
+  const isAllowedToPin = userRoles.some((role) => pinRoles.has(role));
   const options = useMemo(
     () => ({
       reply: {