diff --git a/src/components/buttons/ChatSuggestDatesButton.js b/src/components/buttons/ChatSuggestDatesButton.js
index 6c555524..adbf82a0 100644
--- a/src/components/buttons/ChatSuggestDatesButton.js
+++ b/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 {
diff --git a/src/components/chat/modules/ChatDialog.js b/src/components/chat/modules/ChatDialog.js
index b7c47b52..f0229fe2 100644
--- a/src/components/chat/modules/ChatDialog.js
+++ b/src/components/chat/modules/ChatDialog.js
@@ -112,6 +112,7 @@ const ChatDialogContent = ({ post, chat }) => {
)}
diff --git a/src/components/chat/modules/ChatDialogFloatingButtons.js b/src/components/chat/modules/ChatDialogFloatingButtons.js
new file mode 100644
index 00000000..ae80f088
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+};
+
+export default ChatDialogFloatingButtons;
diff --git a/src/components/chat/modules/ChatDialogMessages.js b/src/components/chat/modules/ChatDialogMessages.js
index ea266799..d21a12b7 100644
--- a/src/components/chat/modules/ChatDialogMessages.js
+++ b/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 }) =>
/>
);
})}
+
diff --git a/src/components/chat/modules/ChatDialogUserRow.js b/src/components/chat/modules/ChatDialogUserRow.js
index 6e1fecfa..07e5060d 100644
--- a/src/components/chat/modules/ChatDialogUserRow.js
+++ b/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
-
-
{status === PENDING ? (