From beab43012e8377cf4be48b79df6696ca70fc6016 Mon Sep 17 00:00:00 2001 From: Jeremy Kwa Date: Fri, 1 Mar 2019 11:40:23 -0800 Subject: [PATCH 1/5] conditionally render cancel button and add red text for cancelled status --- .../routes/Trips/ExpiredTripCard.tsx | 18 +---- src/components/work/TripCard/TripCard.tsx | 69 ++++++++++++------- src/networking/bookings.ts | 7 ++ src/pages/trips/Trips.tsx | 13 ++-- src/utils/bookingsDisplayStatus.ts | 12 ++++ 5 files changed, 71 insertions(+), 48 deletions(-) diff --git a/src/components/routes/Trips/ExpiredTripCard.tsx b/src/components/routes/Trips/ExpiredTripCard.tsx index 13581aa5..3dae3e93 100644 --- a/src/components/routes/Trips/ExpiredTripCard.tsx +++ b/src/components/routes/Trips/ExpiredTripCard.tsx @@ -11,28 +11,12 @@ import { formatDateRange } from 'utils/formatDate'; import { ToggleProvider, ToggleProviderRef } from 'shared/ToggleProvider'; import Portal from 'shared/Portal'; import ContactHostForm from 'shared/ContactHostForm'; -import { getUserBookingDisplayStatus } from 'utils/bookingsDisplayStatus'; +import { getUserBookingDisplayStatus, cancelledDisplayMap } from 'utils/bookingsDisplayStatus'; interface Props { trip: Booking; } -interface DisplayMap { - [key: string]: string; -} - -const cancelledDisplayMap: DisplayMap = { - host_cancelled: 'Trip cancelled by host', - host_rejected: 'Trip rejected by host', - guest_cancelled: 'Trip cancelled by you', - guest_cancel_initiated: 'Cancel initiated by you', - guest_rejected: 'Trip rejected by you', - guest_rejected_payment: 'Payment rejected by you', - expired_before_host_approved: 'Expired before host approved', - payment_failed: 'Payment failed', - refunded: 'Refunded', -}; - const ExpiredTripCard = ({ trip }: Props) => { const { checkInDate, checkOutDate, id, listing, status } = trip; const cancelledStatus = cancelledDisplayMap[status] || ''; diff --git a/src/components/work/TripCard/TripCard.tsx b/src/components/work/TripCard/TripCard.tsx index d860bfcd..1fd20512 100644 --- a/src/components/work/TripCard/TripCard.tsx +++ b/src/components/work/TripCard/TripCard.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Card, CardImg, CardBody, CardTitle, CardSubtitle, Row, Col, CardText, CardFooter } from 'reactstrap'; -import { Booking } from 'networking/bookings'; -import { getUserBookingDisplayStatus } from 'utils/bookingsDisplayStatus'; +import { Booking, GUEST_SORTED_BOOKINGS } from 'networking/bookings'; +import { getUserBookingDisplayStatus, cancelledDisplayMap } from 'utils/bookingsDisplayStatus'; import { formatAddress, formatGeolocationAddress } from 'utils/formatter'; import { formatSingleDate } from 'utils/formatDate'; @@ -12,27 +12,31 @@ enum ModalType { interface Props { booking: Booking; + category: GUEST_SORTED_BOOKINGS; handleModalAction: (modal: ModalType) => void; } -const TripCard = ({ booking, handleModalAction }: Props) => { +const TripCard = ({ booking, category, handleModalAction }: Props) => { const { checkInDate, checkOutDate, id, listing, status } = booking; const { addressLine1, addressLine2, city, country, lat, lng, postalCode, state } = listing; + const cancelledStatus = cancelledDisplayMap[status] || ''; const displayStatus = getUserBookingDisplayStatus(status); + const isCancelButtonShown = category !== GUEST_SORTED_BOOKINGS.PAST && category !== GUEST_SORTED_BOOKINGS.CANCELLED; return ( - +
- + {booking.listing.title} +
{addressLine1 && formatAddress(addressLine1, addressLine2, city, state, country, postalCode)} {!addressLine1 && formatGeolocationAddress({ lat, lng, city, country })} - + Check-in:
{formatSingleDate(checkInDate)}
@@ -42,31 +46,46 @@ const TripCard = ({ booking, handleModalAction }: Props) => {
{formatSingleDate(checkOutDate)}
 - Status: {displayStatus} + {category === GUEST_SORTED_BOOKINGS.CANCELLED + ? {cancelledStatus} + : Status: {displayStatus}} Booking: {id} - handleModalAction(ModalType.CONTACT_HOST)} - className="u-ver-divider"> -
Contact Host
- - - -
Receipt
- - - handleModalAction(ModalType.CANCEL_BOOKING)}> -
Cancel Trip
- + {[ + { + label: 'Contact Host', + onClick: () => handleModalAction(ModalType.CONTACT_HOST), + show: true, + }, + { + label: 'Receipt', + href: `/trips/${booking.id}/receipt`, + show: true, + }, + { + label: 'Cancel Trip', + onClick: () => handleModalAction(ModalType.CANCEL_BOOKING), + show: isCancelButtonShown, + }, + ] + .filter(({ show }) => show) + .map(({ label, href, onClick }, i, arr) => { + return ( + + {href ? ( + +
{label}
+ + ) : ( +
{label}
+ )} + + ); + })} diff --git a/src/networking/bookings.ts b/src/networking/bookings.ts index 4be02fd5..09f93fdd 100644 --- a/src/networking/bookings.ts +++ b/src/networking/bookings.ts @@ -410,3 +410,10 @@ export const PAYOUT_BOOKING = gql` } } `; + +export enum GUEST_SORTED_BOOKINGS { + CURRENT = 'current', + UPCOMING = 'upcoming', + PAST = 'past', + CANCELLED = 'cancelled', +} diff --git a/src/pages/trips/Trips.tsx b/src/pages/trips/Trips.tsx index c32ef592..e5113e7a 100644 --- a/src/pages/trips/Trips.tsx +++ b/src/pages/trips/Trips.tsx @@ -3,7 +3,7 @@ import { Nav, NavItem, NavLink, Container, Col, Row, Alert, Button, Fade } from import { Query } from 'react-apollo'; import { Route, Redirect, Switch } from 'react-router'; import { NavLink as RRNavLink } from 'react-router-dom'; -import { GET_GUEST_SORTED_BOOKINGS, Booking } from 'networking/bookings'; +import { GET_GUEST_SORTED_BOOKINGS, GUEST_SORTED_BOOKINGS, Booking } from 'networking/bookings'; import { VIEWPORT_CENTER_LAYOUT } from 'styled/sharedClasses/layout'; import NotFound from 'components/routes/NotFound'; @@ -63,7 +63,7 @@ function Trips() { ; - const renderCards = Object.keys(data).reduce((result: any, category) => { + const renderCards = Object.keys(data).reduce((result: any, category: GUEST_SORTED_BOOKINGS) => { return { ...result, [category]: @@ -72,6 +72,7 @@ function Trips() { handleModalAction(modal, booking)} /> @@ -79,10 +80,10 @@ function Trips() { }; }, {}); - const renderCancelledCards = renderCards.cancelled; - const renderCurrentCards = renderCards.current; - const renderPastCards = renderCards.past; - const renderUpcomingCards = renderCards.upcoming; + const renderCancelledCards = renderCards[GUEST_SORTED_BOOKINGS.CANCELLED]; + const renderCurrentCards = renderCards[GUEST_SORTED_BOOKINGS.CURRENT]; + const renderPastCards = renderCards[GUEST_SORTED_BOOKINGS.PAST]; + const renderUpcomingCards = renderCards[GUEST_SORTED_BOOKINGS.UPCOMING]; return ( diff --git a/src/utils/bookingsDisplayStatus.ts b/src/utils/bookingsDisplayStatus.ts index 76be0e77..32996d37 100644 --- a/src/utils/bookingsDisplayStatus.ts +++ b/src/utils/bookingsDisplayStatus.ts @@ -111,6 +111,18 @@ const bookingStatus: BookingDisplayStatus = { 'completed': UserBookingDisplayStatus.COMPLETED, } +export const cancelledDisplayMap: { [key: string]: string } = { + host_cancelled: 'Trip cancelled by host', + host_rejected: 'Trip rejected by host', + guest_cancelled: 'Trip cancelled by you', + guest_cancel_initiated: 'Cancel initiated by you', + guest_rejected: 'Trip rejected by you', + guest_rejected_payment: 'Payment rejected by you', + expired_before_host_approved: 'Expired before host approved', + payment_failed: 'Payment failed', + refunded: 'Refunded', +}; + export function getHostBookingDisplayStatusEnum(status: string): BookingStatus { switch (status) { case 'guest_confirmed': From af9e084e0a30d8cdd3351c39f2729d6d09eb1d5f Mon Sep 17 00:00:00 2001 From: Jeremy Kwa Date: Fri, 1 Mar 2019 15:27:51 -0800 Subject: [PATCH 2/5] add object-fit for photos --- src/components/work/TripCard/TripCard.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/work/TripCard/TripCard.tsx b/src/components/work/TripCard/TripCard.tsx index 1fd20512..126dcd28 100644 --- a/src/components/work/TripCard/TripCard.tsx +++ b/src/components/work/TripCard/TripCard.tsx @@ -26,7 +26,16 @@ const TripCard = ({ booking, category, handleModalAction }: Props) => {
- +
From 3e7f4bfa1635b7d639d721f33e6e1d38547cca72 Mon Sep 17 00:00:00 2001 From: Jeremy Kwa Date: Fri, 1 Mar 2019 15:50:40 -0800 Subject: [PATCH 3/5] make custom mixing for images --- src/components/work/TripCard/TripCard.tsx | 11 +---- src/styled/customStyles.scss | 51 ++++++++++++++--------- 2 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/components/work/TripCard/TripCard.tsx b/src/components/work/TripCard/TripCard.tsx index 126dcd28..c4aaf717 100644 --- a/src/components/work/TripCard/TripCard.tsx +++ b/src/components/work/TripCard/TripCard.tsx @@ -26,16 +26,7 @@ const TripCard = ({ booking, category, handleModalAction }: Props) => {
- +
diff --git a/src/styled/customStyles.scss b/src/styled/customStyles.scss index 5bf65bf6..407e43a7 100644 --- a/src/styled/customStyles.scss +++ b/src/styled/customStyles.scss @@ -24,25 +24,6 @@ $HEADER-HEIGHT: 4.125rem; min-height: calc(100vh - #{$HEADER-HEIGHT}); } -// carousel custom styles -.carousel-item { - >img { - height: 100%; - object-fit: cover; - object-position: center; - width: 100%; - } - - &.bee-center-carousel-text { - div { - bottom: auto; - left: auto; - right: auto; - top: auto; - } - } -} - // custom fixed header height to ensure we know the exact header height .custom-header-height { min-height: $HEADER-HEIGHT; @@ -62,6 +43,10 @@ $HEADER-HEIGHT: 4.125rem; z-index: 999; } + + +// START UTILITY CLASSES + // add not-allowed cursor and no transform on disabled items * { &:disabled { @@ -73,6 +58,34 @@ $HEADER-HEIGHT: 4.125rem; } } +// fit image to div +%img-fit { + height: 100%; + object-fit: cover; + object-position: center; + width: 100%; +} + +.card-img { + @extend %img-fit; +} + +// carousel custom styles +.carousel-item { + > img { + @extend %img-fit; + } + + &.bee-center-carousel-text { + div { + bottom: auto; + left: auto; + right: auto; + top: auto; + } + } +} + // flex div .bee-flex-div { flex-grow: 1; From 7931ced14947e575092e7cdbfe3b22b71e60e5a2 Mon Sep 17 00:00:00 2001 From: Jeremy Kwa Date: Mon, 4 Mar 2019 13:11:35 -0800 Subject: [PATCH 4/5] move onClick to tag --- src/components/work/TripCard/TripCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/work/TripCard/TripCard.tsx b/src/components/work/TripCard/TripCard.tsx index 46bc86df..d544d328 100644 --- a/src/components/work/TripCard/TripCard.tsx +++ b/src/components/work/TripCard/TripCard.tsx @@ -82,8 +82,8 @@ const TripCard = ({ booking, category, handleOpenCancelBookingModal, handleOpenC .filter(({ show }) => show) .map(({ label, href, onClick }, i, arr) => { return ( - - + +
{label}
 From d5ecadc5e25af2cae433feae8f1da16a13f07a8f Mon Sep 17 00:00:00 2001 From: Jeremy Kwa Date: Mon, 4 Mar 2019 15:31:30 -0800 Subject: [PATCH 5/5] add trips button in header --- src/components/work/Header/Header.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/work/Header/Header.tsx b/src/components/work/Header/Header.tsx index 3d9eb8a5..dfbcc929 100644 --- a/src/components/work/Header/Header.tsx +++ b/src/components/work/Header/Header.tsx @@ -30,6 +30,10 @@ const authNavItems = [ header: 'Account', link: '/work/account', }, + { + header: 'Trips', + link: '/work/trips', + }, { header: 'Logout', link: '/work/logout',