Use BookingTimeForm in BookingPanel

src/components/BookingBreakdown/BookingBreakdown.js

@@ -14,7 +14,7 @@ import {
 
 import LineItemBookingPeriod from './LineItemBookingPeriod';
 import LineItemBasePriceMaybe from './LineItemBasePriceMaybe';
-import LineItemUnitsMaybe from './LineItemUnitsMaybe';
+import LineItemUnitPriceMaybe from './LineItemUnitPriceMaybe';
 import LineItemSubTotalMaybe from './LineItemSubTotalMaybe';
 import LineItemCustomerCommissionMaybe from './LineItemCustomerCommissionMaybe';
 import LineItemCustomerCommissionRefundMaybe from './LineItemCustomerCommissionRefundMaybe';
@@ -36,6 +36,7 @@ export const BookingBreakdownComponent = props => {
     booking,
     intl,
     dateType,
+    timeZone,
   } = props;
 
   const isCustomer = userRole === 'customer';
@@ -57,12 +58,13 @@ export const BookingBreakdownComponent = props => {
    *
    * LineItemUnitsMaybe: if he unitType is line-item/unit print the name and
    * quantity of the unit
+   * This line item is not used by default in the BookingBreakdown.
+   *
+   * LineItemUnitPriceMaybe: prints just the unit price, e.g. "Price per night $32.00".
    *
    * LineItemBasePriceMaybe: prints the base price calculation for the listing, e.g.
    * "$150.00 * 2 nights $300"
    *
-   * LineItemUnitPriceMaybe: prints just the unit price, e.g. "Price per night $32.00".
-   * This line item is not used by default in the BookingBreakdown.
    *
    * LineItemUnknownItemsMaybe: prints the line items that are unknown. In ideal case there
    * should not be unknown line items. If you are using custom pricing, you should create
@@ -88,8 +90,13 @@ export const BookingBreakdownComponent = props => {
 
   return (
     <div className={classes}>
-      <LineItemBookingPeriod booking={booking} unitType={unitType} dateType={dateType} />
-      <LineItemUnitsMaybe transaction={transaction} unitType={unitType} />
+      <LineItemBookingPeriod
+        booking={booking}
+        unitType={unitType}
+        dateType={dateType}
+        timeZone={timeZone}
+      />
+      <LineItemUnitPriceMaybe transaction={transaction} unitType={unitType} intl={intl} />
 
       <LineItemBasePriceMaybe transaction={transaction} unitType={unitType} intl={intl} />
       <LineItemUnknownItemsMaybe transaction={transaction} intl={intl} />

src/components/BookingBreakdown/LineItemBookingPeriod.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { FormattedMessage, FormattedDate } from '../../util/reactIntl';
 import moment from 'moment';
-import { LINE_ITEM_NIGHT, DATE_TYPE_DATE, propTypes } from '../../util/types';
+import { LINE_ITEM_NIGHT, LINE_ITEM_UNITS, DATE_TYPE_DATE, propTypes } from '../../util/types';
 
 import css from './BookingBreakdown.css';
 
 const BookingPeriod = props => {
-  const { startDate, endDate, dateType } = props;
+  const { startDate, endDate, dateType, timeZone } = props;
 
   const timeFormatOptions =
     dateType === DATE_TYPE_DATE
@@ -24,6 +24,8 @@ const BookingPeriod = props => {
     day: 'numeric',
   };
 
+  const timeZoneMaybe = timeZone ? { timeZone } : null;
+
   return (
     <>
       <div className={css.bookingPeriod}>
@@ -32,10 +34,10 @@ const BookingPeriod = props => {
             <FormattedMessage id="BookingBreakdown.bookingStart" />
           </div>
           <div className={css.dayInfo}>
-            <FormattedDate value={startDate} {...timeFormatOptions} />
+            <FormattedDate value={startDate} {...timeFormatOptions} {...timeZoneMaybe} />
           </div>
           <div className={css.itemLabel}>
-            <FormattedDate value={startDate} {...dateFormatOptions} />
+            <FormattedDate value={startDate} {...dateFormatOptions} {...timeZoneMaybe} />
           </div>
         </div>
 
@@ -44,10 +46,10 @@ const BookingPeriod = props => {
             <FormattedMessage id="BookingBreakdown.bookingEnd" />
           </div>
           <div className={css.dayInfo}>
-            <FormattedDate value={endDate} {...timeFormatOptions} />
+            <FormattedDate value={endDate} {...timeFormatOptions} {...timeZoneMaybe} />
           </div>
           <div className={css.itemLabel}>
-            <FormattedDate value={endDate} {...dateFormatOptions} />
+            <FormattedDate value={endDate} {...dateFormatOptions} {...timeZoneMaybe} />
           </div>
         </div>
       </div>
@@ -56,7 +58,7 @@ const BookingPeriod = props => {
 };
 
 const LineItemBookingPeriod = props => {
-  const { booking, unitType, dateType } = props;
+  const { booking, unitType, dateType, timeZone } = props;
 
   // Attributes: displayStart and displayEnd can be used to differentiate shown time range
   // from actual start and end times used for availability reservation. It can help in situations
@@ -67,12 +69,19 @@ const LineItemBookingPeriod = props => {
   const localEndDateRaw = displayEnd || end;
 
   const isNightly = unitType === LINE_ITEM_NIGHT;
-  const endDay = isNightly ? localEndDateRaw : moment(localEndDateRaw).subtract(1, 'days');
+  const isUnit = unitType === LINE_ITEM_UNITS;
+  const endDay =
+    isUnit || isNightly ? localEndDateRaw : moment(localEndDateRaw).subtract(1, 'days');
 
   return (
     <>
       <div className={css.lineItem}>
-        <BookingPeriod startDate={localStartDate} endDate={endDay} dateType={dateType} />
+        <BookingPeriod
+          startDate={localStartDate}
+          endDate={endDay}
+          dateType={dateType}
+          timeZone={timeZone}
+        />
       </div>
       <hr className={css.totalDivider} />
     </>

src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap

@@ -45,6 +45,16 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
     </div>,
     <hr />,
   ]
+  <div>
+    <span>
+      <span>
+        BookingBreakdown.pricePerNight
+      </span>
+    </span>
+    <span>
+      10
+    </span>
+  </div>
   <div>
     <span>
       <span>
@@ -116,6 +126,16 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
     </div>,
     <hr />,
   ]
+  <div>
+    <span>
+      <span>
+        BookingBreakdown.pricePerNight
+      </span>
+    </span>
+    <span>
+      10
+    </span>
+  </div>
   <div>
     <span>
       <span>
@@ -187,6 +207,16 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
     </div>,
     <hr />,
   ]
+  <div>
+    <span>
+      <span>
+        BookingBreakdown.pricePerNight
+      </span>
+    </span>
+    <span>
+      10
+    </span>
+  </div>
   <div>
     <span>
       <span>
@@ -306,6 +336,16 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
     </div>,
     <hr />,
   ]
+  <div>
+    <span>
+      <span>
+        BookingBreakdown.pricePerNight
+      </span>
+    </span>
+    <span>
+      10
+    </span>
+  </div>
   <div>
     <span>
       <span>

src/components/BookingPanel/BookingPanel.js

@@ -10,7 +10,7 @@ import { formatMoney } from '../../util/currency';
 import { parse, stringify } from '../../util/urlHelpers';
 import config from '../../config';
 import { ModalInMobile, Button } from '../../components';
-import { BookingDatesForm } from '../../forms';
+import { BookingTimeForm } from '../../forms';
 
 import css from './BookingPanel.css';
 
@@ -68,9 +68,11 @@ const BookingPanel = props => {
   } = props;
 
   const price = listing.attributes.price;
+  const timeZone =
+    listing.attributes.availabilityPlan && listing.attributes.availabilityPlan.timezone;
   const hasListingState = !!listing.attributes.state;
   const isClosed = hasListingState && listing.attributes.state === LISTING_STATE_CLOSED;
-  const showBookingDatesForm = hasListingState && !isClosed;
+  const showBookingTimeForm = hasListingState && !isClosed && timeSlots;
   const showClosedListingHelpText = listing.id && isClosed;
   const { formattedPrice, priceTitle } = priceData(price, intl);
   const isBook = !!parse(location.search).book;
@@ -97,7 +99,7 @@ const BookingPanel = props => {
     <div className={classes}>
       <ModalInMobile
         containerClassName={css.modalContainer}
-        id="BookingDatesFormInModal"
+        id="BookingTimeFormInModal"
         isModalOpenOnMobile={isBook}
         onClose={() => closeBookModal(history, location)}
         showAsModalMaxWidth={MODAL_BREAKPOINT}
@@ -114,17 +116,21 @@ const BookingPanel = props => {
           <h2 className={titleClasses}>{title}</h2>
           {subTitleText ? <div className={css.bookingHelp}>{subTitleText}</div> : null}
         </div>
-        {showBookingDatesForm ? (
-          <BookingDatesForm
+        {showBookingTimeForm ? (
+          <BookingTimeForm
             className={css.bookingForm}
             formId="BookingPanel"
-            submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
+            submitButtonWrapperClassName={css.bookingTimeSubmitButtonWrapper}
             unitType={unitType}
             onSubmit={onSubmit}
             price={price}
             isOwnListing={isOwnListing}
             timeSlots={timeSlots}
             fetchTimeSlotsError={fetchTimeSlotsError}
+            initialValues={{ bookingStartDate: { date: new Date() } }}
+            startDatePlaceholder={new Date().toString()}
+            endDatePlaceholder={new Date().toString()}
+            timeZone={timeZone}
           />
         ) : null}
       </ModalInMobile>
@@ -138,7 +144,7 @@ const BookingPanel = props => {
           </div>
         </div>
 
-        {showBookingDatesForm ? (
+        {showBookingTimeForm ? (
           <Button
             rootClassName={css.bookButton}
             onClick={() => openBookModal(isOwnListing, isClosed, history, location)}

src/containers/CheckoutPage/CheckoutPage.js

@@ -177,11 +177,13 @@ export class CheckoutPageComponent extends Component {
       pageData.bookingDates &&
       pageData.bookingDates.bookingStart &&
       pageData.bookingDates.bookingEnd &&
+      pageData.bookingData.quantity &&
       !isBookingCreated;
 
     if (shouldFetchSpeculatedTransaction) {
       const listingId = pageData.listing.id;
       const { bookingStart, bookingEnd } = pageData.bookingDates;
+      const { quantity } = pageData.bookingData;
 
       // Fetch speculated transaction for showing price in booking breakdown
       // NOTE: if unit type is line-item/units, quantity needs to be added.
@@ -190,6 +192,7 @@ export class CheckoutPageComponent extends Component {
         listingId,
         bookingStart,
         bookingEnd,
+        quantity,
       });
     }
 
@@ -369,6 +372,7 @@ export class CheckoutPageComponent extends Component {
       listingId: pageData.listing.id,
       bookingStart: tx.booking.attributes.start,
       bookingEnd: tx.booking.attributes.end,
+      quantity: pageData.bookingData ? pageData.bookingData.quantity : null,
       ...optionalPaymentParams,
     };
 

src/containers/ListingPage/ListingPage.duck.js

@@ -206,12 +206,10 @@ export const fetchTimeSlots = listingId => (dispatch, getState, sdk) => {
   const bookingRange = config.dayCountAvailableForBooking - 1;
   const timeSlotsRange = Math.min(bookingRange, maxTimeSlots);
 
-  const start = moment
-    .utc()
+  const start = moment()
     .startOf('day')
     .toDate();
   const end = moment()
-    .utc()
     .startOf('day')
     .add(timeSlotsRange, 'days')
     .toDate();

src/containers/ListingPage/ListingPage.js

@@ -24,6 +24,7 @@ import {
   ensureUser,
   userDisplayNameAsString,
 } from '../../util/data';
+import { timestampToDate, calculateQuantityFromHours } from '../../util/dates';
 import { richText } from '../../util/richText';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
@@ -101,14 +102,21 @@ export class ListingPageComponent extends Component {
     const listingId = new UUID(params.id);
     const listing = getListing(listingId);
 
-    const { bookingDates, ...bookingData } = values;
+    const { bookingStartTime, bookingEndTime, ...restOfValues } = values;
+    const bookingStart = timestampToDate(bookingStartTime);
+    const bookingEnd = timestampToDate(bookingEndTime);
+
+    const bookingData = {
+      quantity: calculateQuantityFromHours(bookingStart, bookingEnd),
+      ...restOfValues,
+    };
 
     const initialValues = {
       listing,
       bookingData,
       bookingDates: {
-        bookingStart: bookingDates.startDate,
-        bookingEnd: bookingDates.endDate,
+        bookingStart,
+        bookingEnd,
       },
       confirmPaymentError: null,
     };

src/translations/en.json

@@ -39,7 +39,7 @@
   "Avatar.deletedUserDisplayName": "Deleted user",
   "BookingBreakdown.baseUnitDay": "{unitPrice} * {quantity, number} {quantity, plural, one {day} other {days}}",
   "BookingBreakdown.baseUnitNight": "{unitPrice} * {quantity, number} {quantity, plural, one {night} other {nights}}",
-  "BookingBreakdown.baseUnitQuantity": "{unitPrice} * {quantity, number} {quantity, plural, one {person} other {persons}}",
+  "BookingBreakdown.baseUnitQuantity": "{unitPrice} * {quantity, number} {quantity, plural, one {hour} other {hours}}",
   "BookingBreakdown.bookingEnd": "Booking end",
   "BookingBreakdown.bookingStart": "Booking start",
   "BookingBreakdown.commission": "Saunatime fee *",
@@ -48,13 +48,13 @@
   "BookingBreakdown.nightCount": "{count, number} {count, plural, one {night} other {nights}}",
   "BookingBreakdown.pricePerDay": "Price per day",
   "BookingBreakdown.pricePerNight": "Price per night",
-  "BookingBreakdown.pricePerQuantity": "Price per person",
+  "BookingBreakdown.pricePerQuantity": "Price per hour",
   "BookingBreakdown.providerTotalCanceled": "Total price",
   "BookingBreakdown.providerTotalDeclined": "Final sum",
   "BookingBreakdown.providerTotalDefault": "You'll make",
   "BookingBreakdown.providerTotalDelivered": "You made",
-  "BookingBreakdown.quantity": "{quantity, number} {quantity, plural, one {person} other {persons}}",
-  "BookingBreakdown.quantityUnit": "Number of persons",
+  "BookingBreakdown.quantity": "{quantity, number} {quantity, plural, one {hour} other {hours}}",
+  "BookingBreakdown.quantityUnit": "Number of hours",
   "BookingBreakdown.refund": "Refund",
   "BookingBreakdown.refundCustomerFee": "Refund Saunatime fee",
   "BookingBreakdown.refundProviderFee": "Refund Saunatime fee",