Ready for demo

package.json

 {
   "name": "web",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.5.0",

src/components/Cards/OfferCard/CheckButton/CheckButton.styled.js

   bottom: 9px;
   right: 9px;
   &:hover button {
-    background-color: ${selectedTheme.colors.primaryPurple} !important;
-    color: white !important;
+    background-color: ${props => !props.disabled && `${selectedTheme.colors.primaryPurple} !important`};
+    color: ${props => !props.disabled && `white !important`};
   }
   @media (max-width: 1150px) {
     display: none;

src/components/Cards/OfferCard/OfferCard.js

     return true;
   }, [userId, props.offer]);
 
+  console.log("props", props);
+
   return (
     <React.Fragment>
       <OfferCardContainer
                 </LikeIconContainer>
               ) : (
                 <AcceptIconContainer // MENJATI
-                  customDisabled={
-                    props.exchangeState === exchangeStatus.I_OFFERED
+                  // customDisabled={
+                  //   props.exchangeState === exchangeStatus.I_OFFERED ||
+                  //   props.disabledReviews
+                  // }
+                  disabled={
+                    props.exchangeState === exchangeStatus.I_OFFERED ||
+                    props.disabledReviews
                   }
-                  disabled={props.exchangeState === exchangeStatus.I_OFFERED}
                   onClick={acceptExchange}
                 >
                   <AcceptIcon
-                    disabled={props.exchangeState === exchangeStatus.I_OFFERED}
+                    disabled={
+                      props.disabledReviews ||
+                      props.exchangeState === exchangeStatus.I_OFFERED
+                    }
                   />
                 </AcceptIconContainer>
               )

src/components/Cards/OfferCard/OfferCard.styled.js

   & path {
     stroke: ${(props) =>
       props.disabled
-        ? selectedTheme.colors.primaryPurpleDisabled
+        ? selectedTheme.colors.primaryPurple
         : selectedTheme.colors.primaryPurple};
   }
   @media (max-width: 600px) {
   & path {
     fill: ${(props) =>
       props.disabled
-        ? selectedTheme.colors.primaryPurpleDisabled
+        ? selectedTheme.colors.primaryPurple
         : selectedTheme.colors.primaryPurple};
   }
   @media (max-width: 600px) {

src/components/DirectChat/DirectChatContent/DirectChatContent.styled.js

   max-height: 425px;
   height: ${(props) =>
     props.exchangeState === exchangeStatus.ACCEPTED ||
-    props.exchangeState === exchangeStatus.I_OFFERED
+    props.exchangeState === exchangeStatus.I_OFFERED ||
+    props.exchangeState === exchangeStatus.REVIEWED
       ? "385px"
       : "425px"};
   overflow-y: auto;

src/components/DirectChat/MiniChatColumn/MiniChatColumn.js

 import MiniChatCard from "../../Cards/MiniChatCard/MiniChatCard";
 import { useDispatch, useSelector } from "react-redux";
 import {
+  selectChatsTotal,
   selectLatestChats,
   selectSelectedChat,
 } from "../../../store/selectors/chatSelectors";
 
 const MiniChatColumn = () => {
   const chats = useSelector(selectLatestChats);
+  const total = useSelector(selectChatsTotal);
   const selectedChat = useSelector(selectSelectedChat);
   const offer = useSelector(selectOffer);
   const location = useLocation();
             elementsPerPage={6}
             customPaging
             current={paging.currentPage}
-            pages={
-              chats.length === 6 ? paging.currentPage + 1 : paging.currentPage
-            }
+            totalElements={total}
             changePage={handleChangePage}
           >
             <ChatPagingText>

src/components/DirectChat/MiniChatColumn/MiniChatColumn.styled.js

 export const MiniChatColumnContainer = styled(Box)`
   position: relative;
   padding-bottom: 50px;
-  @media (max-width: 600px) {
+  @media (max-width: 900px) {
     display: none;
   }
 `;

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

         ) : (
           <Tooltip title={t("messages.tooltip")}>
             <TooltipInnerContainer>
-              <MessageIcon disabled onClick={() => messageUser(offer)}>
+              <MessageIcon onClick={() => messageUser(offer)}>
                 <MessageColor />
               </MessageIcon>
             </TooltipInnerContainer>

src/components/MarketPlace/MarketPlace.js

 import { MarketPlaceContainer } from "./MarketPlace.styled";
 import Header from "./Header/Header";
 import Offers from "./Offers/Offers";
+import { useDispatch } from "react-redux";
+import { useEffect } from "react";
+import { fetchChats } from "../../store/actions/chat/chatActions";
 
 const MarketPlace = (props) => {
   const [isGrid, setIsGrid] = useState(false);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(fetchChats({
+      currentPage: 1,
+    }));
+  }, [])
   const offers = props.offers;
   return (
     <MarketPlaceContainer>

src/store/actions/chat/chatActionConstants.js

 export const CHAT_NEW_FETCH_ERROR = createErrorType(CHAT_NEW_SCOPE);
 
 export const CHAT_SET = createSetType("CHAT_SET");
+export const CHAT_TOTAL_SET = createSetType("CHAT_TOTAL_SET");
 export const CHAT_ONE_SET = createSetType("CHAT_ONE_SET");
 export const CHAT_CLEAR = createSetType("CHAT_CLEAR");
 export const CHAT_ADD_MESSAGE = createSetType("CHAT_ADD_MESSAGE");

src/store/actions/chat/chatActions.js

   CHAT_SEND_FETCH,
   CHAT_SEND_SUCCESS,
   CHAT_SET,
+  CHAT_TOTAL_SET,
 } from "./chatActionConstants";
 
 export const fetchChats = (payload) => ({
   type: CHAT_SET,
   payload,
 });
+export const setChatsTotal = (payload) => ({
+  type: CHAT_TOTAL_SET,
+  payload,
+});
 export const fetchOneChat = (payload) => ({
   type: CHAT_ONE_FETCH,
   payload,

src/store/reducers/chat/chatReducer.js

   CHAT_CLEAR,
   CHAT_ONE_SET,
   CHAT_SET,
+  CHAT_TOTAL_SET,
 } from "../../actions/chat/chatActionConstants";
 import createReducer from "../../utils/createReducer";
 
 const initialState = {
   latestChats: [],
   selectedChat: {},
+  total: 0,
 };
 
 export default createReducer(
   {
     [CHAT_SET]: setChats,
+    [CHAT_TOTAL_SET]: setChatsTotal,
     [CHAT_ONE_SET]: setOneChat,
     [CHAT_CLEAR]: clearChats,
     [CHAT_ADD_MESSAGE]: addNewMessage,
     latestChats: [...action.payload],
   };
 }
+function setChatsTotal(state, action) {
+  return {
+    ...state,
+    total: action.payload
+  };
+}
 function setOneChat(state, action) {
   return {
     ...state,

src/store/saga/chatSaga.js

   sendMessageError,
   sendMessageSuccess,
   setChats,
+  setChatsTotal,
   setOneChat,
   startNewChatError,
   startNewChatSuccess,
     });
     yield call(console.dir, data);
     yield put(setChats([...data.data.chatsWithData]));
+    yield put(setChatsTotal(data.data.total))
     yield put(fetchChatsSuccess());
   } catch (e) {
     yield put(fetchChatsError());
     });
     const queryString = yield select(selectQueryString);
     const data = yield call(attemptFetchChats, { userId, queryString });
-    yield put(setChats([...data.data]));
+    yield put(setChats([...data.data.chatsWithData]));
+    yield put(setChatsTotal(data.data.total))
+    console.log(data);
     const newChatId = newChatData.data.chatId;
     yield put(startNewChatSuccess());
     yield call(

src/store/selectors/chatSelectors.js

     chatSelector,
     (state) => state.latestChats
 )
+export const selectChatsTotal = createSelector(
+    chatSelector,
+    (state) => state.total
+)
 export const selectSelectedChat = createSelector(
     chatSelector,
     (state) => state.selectedChat