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 ? (