diff --git a/front/package.json b/front/package.json index efb7958ff0..d5638cece7 100644 --- a/front/package.json +++ b/front/package.json @@ -47,9 +47,6 @@ "react-refresh": "0.14.0" }, "jest": { - "coveragePathIgnorePatterns": [ - "src/stories" - ] }, "browserslist": { "production": [ diff --git a/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx b/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx index f5be950b59..cc01d77485 100644 --- a/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx +++ b/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx @@ -1,12 +1,100 @@ import styled from '@emotion/styled'; +import Composer from './composer/Composer'; +import Booking, { BookingEvent } from './events/Booking'; +import Message, { MessageEvent } from './events/Message'; +import Note, { NoteEvent } from './events/Note'; + +export type Event = BookingEvent | MessageEvent | NoteEvent; const StyledPanel = styled.div` display: flex; flex-grow: 1; + flex-direction: column; +`; + +const EventsContainer = styled.div` + display: flex; + flex-grow: 1; + flex-direction: column; + padding: 32px; +`; + +const StyledToday = styled.div` + font-size: 12px; + color: #2e3138; + border-bottom: 1px solid #eaecee; + margin-top: 32px; + padding-bottom: 8px; + margin-bottom: 8px; +`; + +const ComposerContainer = styled.div` + display: flex; + padding: 32px; + flex-direction: column; + flex-grow: 1; `; function DiscussionPanel() { - return ; + return ( + + + + Today + + + + + + + + + + ); } export default DiscussionPanel; diff --git a/front/src/pages/inbox/discussion-panel/__stories__/DiscussionPanel.stories.tsx b/front/src/pages/inbox/discussion-panel/__stories__/DiscussionPanel.stories.tsx new file mode 100644 index 0000000000..0a4b2bc9b4 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/__stories__/DiscussionPanel.stories.tsx @@ -0,0 +1,8 @@ +import DiscussionPanel from '../DiscussionPanel'; + +export default { + title: 'DiscussionPanel', + component: DiscussionPanel, +}; + +export const DiscussionPanelDefault = () => ; diff --git a/front/src/pages/inbox/discussion-panel/__tests__/DiscussionPanel.test.tsx b/front/src/pages/inbox/discussion-panel/__tests__/DiscussionPanel.test.tsx new file mode 100644 index 0000000000..3ca23ce290 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/__tests__/DiscussionPanel.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { DiscussionPanelDefault } from '../__stories__/DiscussionPanel.stories'; + +it('Checks the discussion panel render', () => { + const { getAllByText } = render(); + + const text = getAllByText('Rochefort Montagne'); + expect(text).toBeDefined(); +}); diff --git a/front/src/pages/inbox/discussion-panel/composer/Composer.tsx b/front/src/pages/inbox/discussion-panel/composer/Composer.tsx index 410aedb894..21580df381 100644 --- a/front/src/pages/inbox/discussion-panel/composer/Composer.tsx +++ b/front/src/pages/inbox/discussion-panel/composer/Composer.tsx @@ -1,7 +1,57 @@ import styled from '@emotion/styled'; +import ComposerSwitch from './ComposerSwitch'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; + border: 2px solid #000000; + border-radius: 12px; +`; + +const StyledInputContainer = styled.div` + display: flex; + padding: 8px; + justify-content: center; + & > textarea { + width: 95%; + border: none; + outline: none; + font-family: 'Source Sans Pro'; + + &::placeholder { + font-family: 'Source Sans Pro'; + } + } +`; + +const ActionContainer = styled.div` + display: flex; + padding: 16px; + justify-content: flex-end; +`; + +const PrimaryButton = styled.button` + background: black; + font-weight: bold; + color: white; + padding: 16px 24px; + border: 0; + border-radius: 12px; + cursor: pointer; +`; function Composer() { - return; + return ( + + + + + + + Reply by SMS + + + ); } export default Composer; diff --git a/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx b/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx index 401704285c..f6ecf4bd0d 100644 --- a/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx +++ b/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx @@ -1,7 +1,49 @@ import styled from '@emotion/styled'; +const StyledContainer = styled.div` + display: flex; + flex-direction: row; + border-bottom: 2px solid #eaecee; + padding: 0px 12px; +`; + +const SwitchTab = styled.button` + display: flex; + border-bottom: 2px solid #eaecee; + margin-bottom: -2px; + padding: 12px; + cursor: pointer; + color: #2e3138; + background: inherit; + border: 0; + + &:hover { + border-bottom: 2px solid #2e3138; + } +`; + +const SwitchTabActive = styled.button` + display: flex; + border: 0; + border-bottom: 2px solid black; + margin-bottom: -2px; + padding: 12px; + cursor: pointer; + color: black; + font-weight: bold; + background: inherit; +`; + function ComposerSwitch() { - return; + return ( + + Reply + Call + Note + Transfer + Help + + ); } export default ComposerSwitch; diff --git a/front/src/pages/inbox/discussion-panel/composer/__stories__/Composer.stories.tsx b/front/src/pages/inbox/discussion-panel/composer/__stories__/Composer.stories.tsx new file mode 100644 index 0000000000..e2c3f18c7f --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/composer/__stories__/Composer.stories.tsx @@ -0,0 +1,8 @@ +import Composer from '../Composer'; + +export default { + title: 'Composer', + component: Composer, +}; + +export const ComposerDefault = () => ; diff --git a/front/src/pages/inbox/discussion-panel/composer/__stories__/ComposerSwitch.stories.tsx b/front/src/pages/inbox/discussion-panel/composer/__stories__/ComposerSwitch.stories.tsx new file mode 100644 index 0000000000..e1cdb42c7e --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/composer/__stories__/ComposerSwitch.stories.tsx @@ -0,0 +1,8 @@ +import ComposerSwitch from '../ComposerSwitch'; + +export default { + title: 'Composer', + component: ComposerSwitch, +}; + +export const ComposerSwithDefault = () => ; diff --git a/front/src/pages/inbox/discussion-panel/composer/__tests__/Composer.test.tsx b/front/src/pages/inbox/discussion-panel/composer/__tests__/Composer.test.tsx new file mode 100644 index 0000000000..1952c572bd --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/composer/__tests__/Composer.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { ComposerDefault } from '../__stories__/Composer.stories'; + +it('Checks the composer render', () => { + const { getAllByRole } = render(); + + const button = getAllByRole('button'); + expect(button[0]).toHaveTextContent('Reply'); +}); diff --git a/front/src/pages/inbox/discussion-panel/composer/__tests__/ComposerSwitch.test.tsx b/front/src/pages/inbox/discussion-panel/composer/__tests__/ComposerSwitch.test.tsx new file mode 100644 index 0000000000..1d24c87ef7 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/composer/__tests__/ComposerSwitch.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { ComposerSwithDefault } from '../__stories__/ComposerSwitch.stories'; + +it('Checks the composer switch render', () => { + const { getAllByRole } = render(); + + const button = getAllByRole('button'); + expect(button[0]).toHaveTextContent('Reply'); +}); diff --git a/front/src/pages/inbox/discussion-panel/events/Booking.tsx b/front/src/pages/inbox/discussion-panel/events/Booking.tsx index 43db278ef1..8e8ac67e43 100644 --- a/front/src/pages/inbox/discussion-panel/events/Booking.tsx +++ b/front/src/pages/inbox/discussion-panel/events/Booking.tsx @@ -1,7 +1,80 @@ import styled from '@emotion/styled'; -function Booking() { - return; +export type BookingEvent = { + id: number; + user: string; + time: string; + listing: string; + nights: number; + guests: number; + price: string; + dateRange: string; +}; + +type OwnProps = { + booking: BookingEvent; +}; + +const StyledBooking = styled.div` + display: flex; + flex-direction: column; +`; + +const StyledLabel = styled.div` + font-size: 12px; + color: #2e3138; + margin-bottom: 8px; +`; + +const StyledContainer = styled.div` + display: flex; + padding: 16px; + flex-direction: row; + border: 1px solid #000000; + border-radius: 12px; +`; + +const StyledPicture = styled.div` + background: #2e3138; + width: 50px; + height: 42px; + margin-right: 16px; +`; + +const StyledContent = styled.div` + display: flex; + flex-direction: column; + justify-content: center; +`; + +const StyledListing = styled.div` + font-size: 16px; + font-weight: bold; +`; + +const StyledDetails = styled.div` + font-size: 12px; + color: #2e3138; +`; + +function Booking({ booking }: OwnProps) { + return ( + + + {booking.time} · {booking.user} booked a trip + + + + + {booking.listing} + + {booking.dateRange} · {booking.nights} nights · {booking.guests}{' '} + guests · {booking.price} + + + + + ); } export default Booking; diff --git a/front/src/pages/inbox/discussion-panel/events/Message.tsx b/front/src/pages/inbox/discussion-panel/events/Message.tsx index 6a131a5a6a..29e2c9ff3e 100644 --- a/front/src/pages/inbox/discussion-panel/events/Message.tsx +++ b/front/src/pages/inbox/discussion-panel/events/Message.tsx @@ -1,7 +1,90 @@ import styled from '@emotion/styled'; -function Message() { - return; +export type MessageEvent = { + id: number; + user: string; + time: string; + channel: string; + message: string; + agent?: string; +}; + +type OwnProps = { + message: MessageEvent; +}; + +const StyledMessage = styled.div` + display: flex; + margin-top: 12px; + margin-bottom: 20px; +`; + +const StyledAvatar = styled.div` + display: flex; + width: 40px; + height: 40px; + border-radius: 40px; + background: black; + font-size: 20px; + color: white; + align-items: center; + justify-content: center; + font-weight: bold; + margin-right: 16px; + flex-shrink: 0; +`; + +const StyledContent = styled.div``; + +const StyledTitle = styled.div` + display: flex; + align-items: center; +`; + +const StyledUser = styled.div` + font-size: 16px; + color: black; + font-weight: bold; +`; + +const StyledTime = styled.div` + margin-left: 8px; + font-size: 12px; + color: #2e3138; +`; + +const StyledAgent = styled.div` + text-decoration: underline; + margin-left: 4px; + font-size: 12px; + color: #2e3138; +`; + +const StyledDetails = styled.div` + margin-top: 8px; +`; + +function Message({ message }: OwnProps) { + return ( + + + {message.user + .split(' ') + .map((n) => n[0]) + .join('')} + + + + {message.user} + + {message.time} ({message.channel}) + + {message.agent && by {message.agent}} + + {message.message} + + + ); } export default Message; diff --git a/front/src/pages/inbox/discussion-panel/events/Note.tsx b/front/src/pages/inbox/discussion-panel/events/Note.tsx index bd696ff778..be16cb7ef4 100644 --- a/front/src/pages/inbox/discussion-panel/events/Note.tsx +++ b/front/src/pages/inbox/discussion-panel/events/Note.tsx @@ -1,7 +1,52 @@ import styled from '@emotion/styled'; -function Note() { - return; +export type NoteEvent = { + id: number; + time: string; + message: string; + agent: string; +}; + +type OwnProps = { + note: NoteEvent; +}; + +const StyledNote = styled.div` + display: flex; + background: #f8f9fa; + border-left: 4px solid black; + padding: 8px 20px; + flex-direction: column; + margin-top: 12px; + margin-bottom: 20px; +`; + +const StyledLabel = styled.div` + font-size: 12px; + color: #2e3138; + margin-bottom: 8px; + display: flex; + flex-direction: row; +`; + +const StyledAgent = styled.div` + text-decoration: underline; + margin-left: 4px; + font-size: 12px; + color: #2e3138; +`; + +const StyledMessage = styled.div``; + +function Note({ note }: OwnProps) { + return ( + + + Internal Note {note.time} by {note.agent} + + {note.message} + + ); } export default Note; diff --git a/front/src/pages/inbox/discussion-panel/events/__stories__/Booking.stories.tsx b/front/src/pages/inbox/discussion-panel/events/__stories__/Booking.stories.tsx new file mode 100644 index 0000000000..79c85f74cc --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/__stories__/Booking.stories.tsx @@ -0,0 +1,21 @@ +import Booking from '../Booking'; + +export default { + title: 'DiscussionPanel', + component: Booking, +}; + +export const BookingDefault = () => ( + +); diff --git a/front/src/pages/inbox/discussion-panel/events/__stories__/Message.stories.tsx b/front/src/pages/inbox/discussion-panel/events/__stories__/Message.stories.tsx new file mode 100644 index 0000000000..37aa5b4878 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/__stories__/Message.stories.tsx @@ -0,0 +1,19 @@ +import Message from '../Message'; + +export default { + title: 'DiscussionPanel', + component: Message, +}; + +export const MessageDefault = () => ( + +); diff --git a/front/src/pages/inbox/discussion-panel/events/__stories__/Note.stories.tsx b/front/src/pages/inbox/discussion-panel/events/__stories__/Note.stories.tsx new file mode 100644 index 0000000000..341e024c1a --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/__stories__/Note.stories.tsx @@ -0,0 +1,17 @@ +import Note from '../Note'; + +export default { + title: 'DiscussionPanel', + component: Note, +}; + +export const NoteDefault = () => ( + +); diff --git a/front/src/pages/inbox/discussion-panel/events/__tests__/Booking.test.tsx b/front/src/pages/inbox/discussion-panel/events/__tests__/Booking.test.tsx new file mode 100644 index 0000000000..ef0d439944 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/__tests__/Booking.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { BookingDefault } from '../__stories__/Booking.stories'; + +it('Checks the booking event render', () => { + const { getAllByText } = render(); + + const text = getAllByText('Rochefort Montagne'); + expect(text).toBeDefined(); +}); diff --git a/front/src/pages/inbox/discussion-panel/events/__tests__/Message.test.tsx b/front/src/pages/inbox/discussion-panel/events/__tests__/Message.test.tsx new file mode 100644 index 0000000000..34bbe2b5d3 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/__tests__/Message.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { MessageDefault } from '../__stories__/Message.stories'; + +it('Checks the booking event render', () => { + const { getAllByText } = render(); + + const text = getAllByText('Georges Alain'); + expect(text).toBeDefined(); +}); diff --git a/front/src/pages/inbox/discussion-panel/events/__tests__/Note.test.tsx b/front/src/pages/inbox/discussion-panel/events/__tests__/Note.test.tsx new file mode 100644 index 0000000000..509226033f --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/__tests__/Note.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { NoteDefault } from '../__stories__/Note.stories'; + +it('Checks the booking event render', () => { + const { getAllByText } = render(); + + const text = getAllByText('Hello I’m here bla bla bla'); + expect(text).toBeDefined(); +}); diff --git a/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx index 5ff9c50e3b..bda65c4343 100644 --- a/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx +++ b/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx @@ -1,7 +1,7 @@ import ListPanel from '../ListPanel'; export default { - title: 'Inbox', + title: 'ListPanel', component: ListPanel, }; diff --git a/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx index 8564816bb9..7d62efeddc 100644 --- a/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx +++ b/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx @@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom'; import ListPanelHeader from '../ListPanelHeader'; export default { - title: 'Inbox', + title: 'ListPanel', component: ListPanelHeader, }; diff --git a/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx index d089994dbd..642ae4e079 100644 --- a/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx +++ b/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx @@ -1,8 +1,7 @@ -import { MemoryRouter } from 'react-router-dom'; import ListPanelItem from '../ListPanelItem'; export default { - title: 'Inbox', + title: 'ListPanel', component: ListPanelItem, };