Merge pull request #227 from thebeetoken/jeremy/ENG-997c-past-cancelled

Jeremy/eng 997c past cancelled
thebeetoken · Mar 5, 2019 · 710234a · 710234a
2 parents 0b6022b + d5ecadc
commit 710234a
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 77 deletions.
diff --git 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/Header/Header.tsx b/src/components/work/Header/Header.tsx
@@ -32,6 +32,10 @@ const authNavItems = [
     header: 'Account',
     link: '/work/account',
   },
+  {
+    header: 'Trips',
+    link: '/work/trips',
+  },
   {
     header: 'Logout',
     link: '/work/logout',

diff --git a/src/components/work/TripCard/TripCard.tsx b/src/components/work/TripCard/TripCard.tsx
@@ -1,35 +1,43 @@
 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';
 
 interface Props {
   booking: Booking;
+  category: GUEST_SORTED_BOOKINGS;
   handleOpenCancelBookingModal: () => void;
   handleOpenContactHostModal: () => void;
 }
 
-const TripCard = ({ booking, handleOpenCancelBookingModal, handleOpenContactHostModal }: Props) => {
+const TripCard = ({ booking, category, handleOpenCancelBookingModal, handleOpenContactHostModal }: Props) => {
   const { checkInDate, checkOutDate, id, listing, status } = booking;
   const { addressLine1, addressLine2, city, country, lat, lng, postalCode, state } = listing;
+  const titleLink = `/listings/${listing.idSlug}`;
+
+  const cancelledStatus = cancelledDisplayMap[status] || '';
   const displayStatus = getUserBookingDisplayStatus(status);
+  const isCancelButtonShown = category !== GUEST_SORTED_BOOKINGS.PAST && category !== GUEST_SORTED_BOOKINGS.CANCELLED;
   return (
-    <Card className="mb-5 flex-fill" key={booking.id}>
+    <Card className="mb-5 shadow flex-fill border-0" key={booking.id}>
       <div className="embed-responsive embed-responsive-4by3">
         <div className="embed-responsive-item">
-          <CardImg className="h-100" top src={booking.listing.listingPicUrl} alt="Listing Cover Photo" />
+          <CardImg src={booking.listing.listingPicUrl} alt="Listing Cover Photo" />
         </div>
       </div>
-      <CardBody>
-        <CardTitle className="h5 font-weight-normal mb-3">{booking.listing.title}</CardTitle>
+      <CardBody className="d-flex flex-column">
+        <a href={titleLink} className="text-dark">
+          <CardTitle className="h5 font-weight-normal mb-3">{booking.listing.title}</CardTitle>
+        </a>
+        <div className="bee-flex-div" />
         <CardSubtitle className="small mb-3">
           {addressLine1
             ? formatAddress(addressLine1, addressLine2, city, state, country, postalCode)
             : formatGeolocationAddress({ lat, lng, city, country })}
         </CardSubtitle>
-        <Row>
+        <Row className="mb-1">
           <Col xs="6">
             <small>Check-in:</small>
             <h6>{formatSingleDate(checkInDate)}</h6>
@@ -39,39 +47,48 @@ const TripCard = ({ booking, handleOpenCancelBookingModal, handleOpenContactHost
             <h6>{formatSingleDate(checkOutDate)}</h6>
           </Col>
         </Row>
-        <CardText>Status: {displayStatus}</CardText>
+        {category === GUEST_SORTED_BOOKINGS.CANCELLED
+          ? <CardText className="text-danger">{cancelledStatus}</CardText>
+          : <CardText>Status: {displayStatus}</CardText>}
         <CardText className="small">
           Booking: <span>{id}</span>
         </CardText>
       </CardBody>
       <CardFooter className="text-center">
         <Row className="align-items-center">
-          <Col
-            xs="4"
-            className="u-ver-divider">
-            <a href="#" onClick={(event: React.MouseEvent<HTMLElement>) => {
-              event.preventDefault();
-              handleOpenContactHostModal();
-            }}>
-              <h5 className="small font-weight-normal text-secondary mb-0">Contact Host</h5>
-            </a>
-          </Col>
-          <Col
-            xs="4"
-            className="u-ver-divider">
-            <a href={`/trips/${booking.id}/receipt`}>
-              <h5 className="small font-weight-normal text-secondary mb-0">Receipt</h5>
-            </a>
-          </Col>
-          <Col
-            xs="4">
-            <a href="#" onClick={(event: React.MouseEvent<HTMLElement>) => {
-              event.preventDefault();
-              handleOpenCancelBookingModal();
-            }}>
-              <h5 className="small font-weight-normal text-secondary mb-0">Cancel Trip</h5>
-            </a>
-          </Col>
+          {[
+            {
+              label: 'Contact Host',
+              onClick: (event: React.MouseEvent<HTMLElement>) => {
+                event.preventDefault();
+                handleOpenContactHostModal();
+              },
+              show: true,
+            },
+            {
+              label: 'Receipt',
+              href: `/trips/${booking.id}/receipt`,
+              show: true,
+            },
+            {
+              label: 'Cancel Trip',
+              onClick: (event: React.MouseEvent<HTMLElement>) => {
+                event.preventDefault();
+                handleOpenCancelBookingModal();
+              },
+              show: isCancelButtonShown,
+            },
+          ]
+            .filter(({ show }) => show)
+            .map(({ label, href, onClick }, i, arr) => {
+              return (
+                <Col key={i} className={i !== arr.length - 1 ? 'u-ver-divider' : ''}>
+                  <a href={href || '#'} onClick={onClick}>
+                    <h5 className="small font-weight-normal text-secondary mb-0">{label}</h5>
+                  </a>
+                </Col>
+              );
+            })}
         </Row>
       </CardFooter>
     </Card>

diff --git 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
@@ -3,7 +3,7 @@ import { Nav, NavItem, NavLink, Container, Col, Row, Alert, Fade } from 'reactst
 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() {
               </a>
             </Row>
           </>;
-        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() {
                   <Col key={booking.id} className="d-flex" md="6" lg="4">
                     <TripCard
                       key={booking.id}
+                      category={category}
                       booking={booking}
                       handleOpenContactHostModal={() => handleModalAction(ModalType.CONTACT_HOST, booking)}
                       handleOpenCancelBookingModal={() => handleModalAction(ModalType.CANCEL_BOOKING, booking)} />
@@ -80,10 +81,10 @@ function Trips() {
               </Row>
           };
         }, {});
-        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 (
           <Container className="pt-8 pb-6" tag={Fade}>

diff --git 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;
@@ -61,6 +42,10 @@ $HEADER-HEIGHT: 4.125rem;
   z-index: 0;
 }
 
+
+
+// START UTILITY CLASSES
+
 // add not-allowed cursor and no transform on disabled items
 * {
   &:disabled {
@@ -71,6 +56,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 {

diff --git 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':