Merge pull request #1195 from sharetribe/time-to-bookingbreakdown

Show also time in booking breakdown if needed
sharetribe · Sep 13, 2019 · 7ac10dc · 7ac10dc
2 parents a707c4b + 54b97cb
commit 7ac10dc
Show file tree

Hide file tree

Showing 18 changed files with 525 additions and 270 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [change] Change the design of `BookingBreakdown` and add options to show only dates or booking
+  date and time there. [#1195](https://github.com/sharetribe/flex-template-web/pull/1195)
 - [change] Move `BookingTimeInfo` to separate component from `InboxPage`. Add options to show only
   booking dates or booking dates and times.
   [#1194](https://github.com/sharetribe/flex-template-web/pull/1194)

diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css
@@ -11,108 +11,126 @@
 
 .lineItem {
   @apply --marketplaceH4FontStyles;
-
-  /* Since the line items have different font sizes in the label and the
-   value columns, we have to balance the line to align to the
-   baseline. */
-  margin: -1px 0 0 0;
+  margin: 0;
 
   @media (--viewportMedium) {
-    margin: -1px 0 8px 0;
-
-    &:last-of-type {
-      /* Last item should not have bottom margin that goes to the bottom of
-         the component */
-      margin-bottom: 0;
-    }
+    padding-top: 6px;
+    padding-bottom: 2px;
   }
 
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
+.bookingPeriod {
+  flex: 1 1;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding-bottom: 6px;
+
+  @media (--viewportMedium) {
+    padding-bottom: 8px;
+  }
+}
+
+.bookingPeriodSectionRigth {
+  text-align: right;
+}
+
+.dayLabel {
+  @apply --marketplaceH5FontStyles;
+  margin: 0;
+  color: var(--matterColorAnti);
+  line-height: 24px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+
+  @media (--viewportMedium) {
+    padding-top: 1px;
+    padding-bottom: 7px;
+  }
+}
+
+.dayInfo {
+  @apply --marketplaceButtonFontStyles;
+}
+
 .subTotalLineItem {
   @apply --marketplaceH4FontStyles;
   font-weight: var(--fontWeightBold);
-
-  margin: 4px 0 1px 0;
+  margin: 0;
+  padding: 5px 0 1px 0;
 
   @media (--viewportMedium) {
-    margin: 6px 0 9px 0;
+    padding: 6px 0 2px 0;
   }
 
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
+.lineItemTotal {
+  @apply --marketplaceH4FontStyles;
+  margin: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  @media (--viewportMedium) {
+    padding-bottom: 2px;
+  }
+}
 .itemLabel {
+  @apply --marketplaceSmallFontStyles;
   flex: 1;
-  margin-top: 1px; /* align with baseline */
 }
 
 .itemValue {
-  @apply --marketplaceH4FontStyles;
-  font-weight: 600;
+  @apply --marketplaceSmallFontStyles;
   margin: 0 0 0 10px;
-
-  @media (--viewportMedium) {
-    font-weight: 700;
-    margin: 0 0 0 10px;
-  }
 }
 
 .totalDivider {
   /* dimensions */
   width: 100%;
   height: 1px;
-  margin: 13px 0 4px 0;
+  margin: 12px 0 5px 0;
 
   border: none;
   background-color: var(--matterColorNegative);
 
   @media (--viewportMedium) {
-    margin: 2px 0 14px 0;
+    margin: 7px 0 0px 0;
   }
 }
 
 .totalLabel {
-  font-weight: var(--fontWeightSemiBold);
-
-  /* Move so that baseline aligns with the total price */
-  padding-top: 6px;
-
-  @media (--viewportMedium) {
-    padding-top: 8px;
-  }
+  font-weight: var(--fontWeightNormal);
 }
 
 .totalPrice {
-  @apply --marketplaceBodyFontStyles;
-  font-weight: var(--fontWeightSemiBold);
+  @apply --marketplaceButtonFontStyles;
   margin: 0 0 0 10px;
-  padding-top: 4px;
-
-  @media (--viewportMedium) {
-    margin: 2px 0 0 10px;
-    padding-top: 0;
-  }
+  padding-top: 0px;
 }
 
 .feeInfo {
   @apply --marketplaceTinyFontStyles;
-  color: var(--matterColorAnti);
-  margin: 0 0 20px 0;
   flex-shrink: 0;
+  margin: 0;
+  color: var(--matterColorAnti);
+  padding-top: 4px;
+  padding-bottom: 14px;
 
   @media (--viewportMedium) {
-    margin-top: auto;
-    margin-bottom: 20px;
-  }
-
-  @media (--viewportLarge) {
-    margin-top: 4px;
-    margin-bottom: 22px;
+    padding-top: 11px;
+    padding-bottom: 21px;
   }
 }
diff --git a/src/components/BookingBreakdown/BookingBreakdown.example.js b/src/components/BookingBreakdown/BookingBreakdown.example.js
@@ -10,7 +10,13 @@ import {
   TRANSITION_CONFIRM_PAYMENT,
   TX_TRANSITION_ACTOR_CUSTOMER,
 } from '../../util/transaction';
-import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, LINE_ITEM_UNITS } from '../../util/types';
+import {
+  LINE_ITEM_DAY,
+  LINE_ITEM_NIGHT,
+  LINE_ITEM_UNITS,
+  DATE_TYPE_DATE,
+  DATE_TYPE_DATETIME,
+} from '../../util/types';
 import config from '../../config';
 import BookingBreakdown from './BookingBreakdown';
 
@@ -60,6 +66,7 @@ export const Checkout = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -86,6 +93,7 @@ export const CustomerOrder = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -112,6 +120,7 @@ export const ProviderSale = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(7000, CURRENCY),
@@ -145,6 +154,7 @@ export const ProviderSaleZeroCommission = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -178,6 +188,7 @@ export const ProviderSaleSingleNight = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATE,
     transaction: exampleTransaction({
       payinTotal: new Money(4500, CURRENCY),
       payoutTotal: new Money(2500, CURRENCY),
@@ -211,6 +222,7 @@ export const ProviderSalePreauthorized = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_CONFIRM_PAYMENT,
       payinTotal: new Money(4500, CURRENCY),
@@ -245,6 +257,7 @@ export const ProviderSaleAccepted = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_ACCEPT,
       payinTotal: new Money(4500, CURRENCY),
@@ -279,6 +292,7 @@ export const ProviderSaleDeclined = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_DECLINE,
       payinTotal: new Money(4500, CURRENCY),
@@ -313,6 +327,7 @@ export const ProviderSaleAutoDeclined = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_EXPIRE,
       payinTotal: new Money(4500, CURRENCY),
@@ -347,6 +362,7 @@ export const ProviderSaleDelivered = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_COMPLETE,
       payinTotal: new Money(4500, CURRENCY),
@@ -381,6 +397,7 @@ export const ProviderSaleCanceled = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_CANCEL,
       payinTotal: new Money(0, CURRENCY),
@@ -432,6 +449,7 @@ export const SingleDay = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_DAY,
+    dateType: DATE_TYPE_DATE,
     transaction: exampleTransaction({
       payinTotal: new Money(4500, CURRENCY),
       payoutTotal: new Money(4500, CURRENCY),
@@ -458,6 +476,7 @@ export const MultipleDays = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_DAY,
+    dateType: DATE_TYPE_DATE,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -484,6 +503,7 @@ export const UnitsType = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_UNITS,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -510,6 +530,7 @@ export const CustomPricing = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(12800, CURRENCY),
       payoutTotal: new Money(12600, CURRENCY),
@@ -560,6 +581,7 @@ export const CustomPricingWithRefund = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(0, CURRENCY),
       payoutTotal: new Money(0, CURRENCY),