Shift suggest date button to bottom of chat

src/components/buttons/ChatSuggestDatesButton.js

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { colors } from '../../../utils/constants/colors';
 
 const ChatSuggestDatesButton = styled.button`
+  border-radius: 20px;
+  border: 2px solid ${colors.chatSuggestDateButtonHoverActive};
   background: ${colors.chatSuggestDateButtonBackground};
 
   :active {

src/components/chat/modules/ChatDialog.js

@@ -112,6 +112,7 @@ const ChatDialogContent = ({ post, chat }) => {
         )}
         <ChatDialogMessages
           postType={chatPostType}
+          postId={chatPostId}
           inputRowHeight={inputRowHeight}
           isShowPostDetails={isShowPostDetails}
         />

src/components/chat/modules/ChatDialogFloatingButtons.js

@@ -0,0 +1,70 @@
+import React, { useState, useContext } from 'react';
+import { Button, Stack } from '@kiwicom/orbit-components/lib';
+import CalendarModal from '../../calendar/modules/CalendarModal';
+import SuggestDateButton from '../../../components/buttons/ChatSuggestDatesButton';
+import api from '../../../../utils/api';
+import styled from 'styled-components';
+import { getFormattedDateRange } from '../../../../utils/api/time';
+import { donations } from '../../../../utils/constants/postType';
+import { useRouter } from 'next/router';
+import ChatContext from '../context';
+import { setSelectedChatId, setIsNewChat } from '../actions';
+import { getSelectedChatId, getIsNewChat } from '../selectors';
+
+const ButtonsContainer = styled.div`
+  overflow-x: scroll;
+`;
+const ChatDialogFloatingButtons = ({ postType, postId }) => {
+  const { state, dispatch } = useContext(ChatContext);
+  const isNewChat = getIsNewChat(state);
+  const selectedChatId = getSelectedChatId(state);
+  const [showSuggestDateModal, setShowSuggestDateModal] = useState(false);
+
+  const handleShowSuggestDateModal = () => setShowSuggestDateModal(true);
+  const handleCloseSuggestDateModal = () => setShowSuggestDateModal(false);
+
+  const router = useRouter();
+
+  const sendFirstCalendarMessage = async (calendarRawString) => {
+    const method =
+      postType === donations ? 'sendInitialCalendarMessageForDonation' : 'sendInitialCalendarMessageForWish';
+    const [rawChat, rawFirstMessage] = await api.chats[method](postId, calendarRawString);
+    const chatId = rawChat.data().chatId;
+    dispatch(setIsNewChat(false));
+    dispatch(setSelectedChatId(chatId));
+    router.push(`/chat`, `/chat?chatId=${chatId}`, { shallow: true });
+  };
+
+  const handleSendCalendarMessage = (selectedDates) => {
+    if (selectedDates.length > 0) {
+      const message = selectedDates
+        .map((selectedDate) => getFormattedDateRange(selectedDate.startDate, selectedDate.endDate))
+        .join(','); // dates are separated by comma
+      if (isNewChat) {
+        sendFirstCalendarMessage(message)
+          .then(() => {})
+          .catch((err) => console.error(err));
+      } else {
+        api.chats.sendCalendarMessage(selectedChatId, message).catch((err) => console.error(err));
+      }
+    }
+    handleCloseSuggestDateModal();
+  };
+
+  return (
+    <ButtonsContainer>
+      <Stack direction="row" spacing="tight">
+        <Button size="small" onClick={handleShowSuggestDateModal} asComponent={SuggestDateButton}>
+          Suggest Dates
+        </Button>
+        <CalendarModal
+          onShow={showSuggestDateModal}
+          onHide={handleCloseSuggestDateModal}
+          sendCalendarMessage={handleSendCalendarMessage}
+        />
+      </Stack>
+    </ButtonsContainer>
+  );
+};
+
+export default ChatDialogFloatingButtons;

src/components/chat/modules/ChatDialogMessages.js

@@ -12,6 +12,7 @@ import { CHAT_MESSAGES_BATCH_SIZE } from '../../../../utils/api/constants';
 import { LeftMessageSection, RightMessageSection } from './ChatMessageSection';
 import ScrollToBottomButton from '../../buttons/ScrollToBottomButton';
 import useWindowDimensions from '../../../../utils/hooks/useWindowDimensions';
+import ChatDialogFloatingButtons from './ChatDialogFloatingButtons';
 import { isSafari } from 'react-device-detect';
 import ChatContext from '../context';
 import { getSelectedChatId, getIsNewChat, getUser } from '../selectors';
@@ -29,7 +30,7 @@ const desktopHeights = {
 
 const mobileHeights = {
   chatDialogBackButton: 44,
-  chatDialogUserRow: 108 + 1,
+  chatDialogUserRow: 72 + 1,
   chatDialogSeePostRow: 74 + 1,
   chatDialogMessagesPadding: 32 + 2,
 };
@@ -69,7 +70,7 @@ const NotificationBadgeWrapper = styled.div`
  *
  * @param {number} navBarHeight is the height of the navbar
  */
-const ChatDialogMessages = ({ postType, inputRowHeight, isShowPostDetails }) => {
+const ChatDialogMessages = ({ postType, postId, inputRowHeight, isShowPostDetails }) => {
   const { state } = useContext(ChatContext);
   const loggedInUser = getUser(state);
   const isNewChat = getIsNewChat(state);
@@ -283,6 +284,7 @@ const ChatDialogMessages = ({ postType, inputRowHeight, isShowPostDetails }) =>
                   />
                 );
               })}
+            <ChatDialogFloatingButtons postType={postType} postId={postId} />
           </Stack>
           <div ref={bottomOfScrollerRef} />
         </InfiniteScroll>

src/components/chat/modules/ChatDialogUserRow.js

@@ -1,14 +1,11 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Button, Stack } from '@kiwicom/orbit-components/lib';
-import CalendarModal from '../../calendar/modules/CalendarModal';
 import AppreciationMessageModal from '../../modal/AppreciationMessageModal';
 import ConfirmCompletionModal from '../../modal/ConfirmCompletionModal';
 import ProfileAvatar from '../../imageContainers/ProfileAvatar';
 import BlackText from '../../text/BlackText';
-import SuggestDateButton from '../../../components/buttons/ChatSuggestDatesButton';
 import CompleteButton from '../../../components/buttons/ChatCompleteButton';
 import styled from 'styled-components';
-import { colors } from '../../../../utils/constants/colors';
 import { CardSection } from '@kiwicom/orbit-components/lib/Card';
 import { PENDING, COMPLETED } from '../../../../utils/constants/postStatus';
 import StatusTag from '../../../components/tags/StatusTag';
@@ -49,7 +46,6 @@ const ChatDialogUserRow = ({ postId, postType, postStatus, oppositeUser, postOwn
   const [showAppreciationMessageModal, setShowAppreciationMessageModal] = useState(false);
   const [showConfirmCompletionModal, setShowConfirmCompletionModal] = useState(false);
   const [status, setStatus] = useState(postStatus);
-  const router = useRouter();
 
   const { state, dispatch } = useContext(ChatContext);
   const loggedInUser = getUser(state);
@@ -60,8 +56,6 @@ const ChatDialogUserRow = ({ postId, postType, postStatus, oppositeUser, postOwn
   const handleShowAppreciationMessageModal = () => setShowAppreciationMessageModal(true);
   const handleCloseConfirmCompletionModal = () => setShowConfirmCompletionModal(false);
   const handleSetStatusToComplete = () => setStatus(COMPLETED);
-  const handleShowSuggestDateModal = () => setShowSuggestDateModal(true);
-  const handleCloseSuggestDateModal = () => setShowSuggestDateModal(false);
 
   const handleCompletePost = () => {
     setShowConfirmCompletionModal(true);
@@ -72,32 +66,6 @@ const ChatDialogUserRow = ({ postId, postType, postStatus, oppositeUser, postOwn
     setStatus(postStatus);
   }, [postStatus]);
 
-  const handleSendCalendarMessage = (selectedDates) => {
-    if (selectedDates.length > 0) {
-      const message = selectedDates
-        .map((selectedDate) => getFormattedDateRange(selectedDate.startDate, selectedDate.endDate))
-        .join(','); // dates are separated by comma
-      if (isNewChat) {
-        sendFirstCalendarMessage(message)
-          .then(() => {})
-          .catch((err) => console.error(err));
-      } else {
-        api.chats.sendCalendarMessage(selectedChatId, message).catch((err) => console.error(err));
-      }
-    }
-    handleCloseSuggestDateModal();
-  };
-
-  const sendFirstCalendarMessage = async (calendarRawString) => {
-    const method =
-      postType === donations ? 'sendInitialCalendarMessageForDonation' : 'sendInitialCalendarMessageForWish';
-    const [rawChat, rawFirstMessage] = await api.chats[method](postId, calendarRawString);
-    const chatId = rawChat.data().chatId;
-    dispatch(setIsNewChat(false));
-    dispatch(setSelectedChatId(chatId));
-    router.push(`/chat`, `/chat?chatId=${chatId}`, { shallow: true });
-  };
-
   const profileHref = `/profile/${oppositeUser.id || oppositeUser.userId}`;
 
   return (
@@ -112,14 +80,6 @@ const ChatDialogUserRow = ({ postId, postType, postStatus, oppositeUser, postOwn
         </AvatarContainer>
         <ButtonsContainer>
           <Stack tablet={{ direction: 'row', spacing: 'condensed' }} direction="column" spacing="tight" align="end">
-            <Button size="small" onClick={handleShowSuggestDateModal} asComponent={SuggestDateButton}>
-              Suggest Dates
-            </Button>
-            <CalendarModal
-              onShow={showSuggestDateModal}
-              onHide={handleCloseSuggestDateModal}
-              sendCalendarMessage={handleSendCalendarMessage}
-            />
             {status === PENDING ? (
               <Button
                 size="small"