Merge pull request #287 from sharetribe/revert-286-revert-285-review-changes-milestone

Revert "Revert "Review changes""

src/components/BookingBreakdown/BookingBreakdown.js

@@ -73,13 +73,26 @@ export const BookingBreakdownComponent = props => {
   const formattedUnitPrice = intl.formatNumber(unitPriceAsNumber, currencyConfig);
 
   // If commission is passed it will be shown as a fee already reduces from the total price
+  let subTotalInfo = null;
   let commissionInfo = null;
 
   if (userRole === 'provider') {
+    const subTotal = new Decimal(nightCount).times(unitPriceAsNumber).toNumber();
+    const formattedSubTotal = intl.formatNumber(subTotal, currencyConfig);
+
+    subTotalInfo = (
+      <div className={css.lineItem}>
+        <span className={css.itemLabel}>
+          <FormattedMessage id="BookingBreakdown.subTotal" />
+        </span>
+        <span className={css.itemValue}>{formattedSubTotal}</span>
+      </div>
+    );
+
     const commission = providerCommission.lineTotal;
     const commissionAsNumber = commission ? convertMoneyToNumber(commission, subUnitDivisor) : 0;
     const formattedCommission = commission
-      ? intl.formatNumber(new Decimal(commissionAsNumber).negated().toNumber(), currencyConfig)
+      ? intl.formatNumber(new Decimal(commissionAsNumber).toNumber(), currencyConfig)
       : null;
 
     commissionInfo = (
@@ -114,11 +127,14 @@ export const BookingBreakdownComponent = props => {
         </span>
         <span className={css.itemValue}>{nightCountMessage}</span>
       </div>
+      {subTotalInfo}
       {commissionInfo}
       <hr className={css.totalDivider} />
       <div className={css.lineItem}>
         <div className={css.totalLabel}>
-          <FormattedMessage id="BookingBreakdown.total" />
+          {userRole === 'customer'
+            ? <FormattedMessage id="BookingBreakdown.total" />
+            : <FormattedMessage id="BookingBreakdown.providerTotal" />}
         </div>
         <div className={css.totalPrice}>
           {formattedTotalPrice}

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

@@ -160,6 +160,19 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
         } />
     </span>
   </div>
+  <div
+    className={undefined}>
+    <span
+      className={undefined}>
+      <span>
+        Subtotal:
+      </span>
+    </span>
+    <span
+      className={undefined}>
+      20
+    </span>
+  </div>
   <div
     className={undefined}>
     <span
@@ -170,7 +183,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
     </span>
     <span
       className={undefined}>
-      2
+      -2
     </span>
   </div>
   <hr
@@ -180,7 +193,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
     <div
       className={undefined}>
       <span>
-        Total price
+        Happy days! You just made…
       </span>
     </div>
     <div

src/containers/AuthenticationPage/AuthenticationPage.css

@@ -4,7 +4,16 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  padding: 35px 24px 98px 24px;
+  padding: 30px 24px 98px 24px;
+}
+
+.tabs {
+  width: 198px;
+}
+
+.tab {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .form {

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -79,9 +79,9 @@ export const AuthenticationPageComponent = props => {
 
   const tabs = [
     {
-      text: intl.formatMessage({
-        id: 'AuthenticationPage.signupLinkText',
-      }),
+      text: (
+        <h1 className={css.tab}><FormattedMessage id="AuthenticationPage.signupLinkText" /></h1>
+      ),
       selected: !isLogin,
       linkProps: {
         name: 'SignupPage',
@@ -89,9 +89,7 @@ export const AuthenticationPageComponent = props => {
       },
     },
     {
-      text: intl.formatMessage({
-        id: 'AuthenticationPage.loginLinkText',
-      }),
+      text: <h1 className={css.tab}><FormattedMessage id="AuthenticationPage.loginLinkText" /></h1>,
       selected: isLogin,
       linkProps: {
         name: 'LoginPage',
@@ -104,7 +102,7 @@ export const AuthenticationPageComponent = props => {
     <PageLayout title={title} scrollingDisabled={scrollingDisabled}>
       <Topbar history={history} location={location} />
       <div className={css.root}>
-        <TabNav tabs={tabs} />
+        <TabNav className={css.tabs} tabs={tabs} />
         {loginError ? loginErrorMessage : null}
         {signupError ? signupErrorMessage : null}
         {isLogin

src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap

@@ -31,7 +31,11 @@ exports[`AuthenticationPageComponent matches snapshot 1`] = `
               },
             },
             "selected": false,
-            "text": "AuthenticationPage.signupLinkText",
+            "text": <h1>
+              <FormattedMessage
+                    id="AuthenticationPage.signupLinkText"
+                    values={Object {}} />
+        </h1>,
           },
           Object {
             "linkProps": Object {
@@ -43,7 +47,11 @@ exports[`AuthenticationPageComponent matches snapshot 1`] = `
               },
             },
             "selected": true,
-            "text": "AuthenticationPage.loginLinkText",
+            "text": <h1>
+              <FormattedMessage
+                    id="AuthenticationPage.loginLinkText"
+                    values={Object {}} />
+        </h1>,
           },
         ]
       } />

src/containers/PayoutDetailsForm/PayoutDetailsForm.js

@@ -217,7 +217,7 @@ const PayoutDetailsFormComponent = props => {
           <option value="">{countryPlaceholder}</option>
           {supportedCountries.map(c => (
             <option key={c} value={c}>
-              {intl.formatMessage({ id: `PayoutDetailsForm.countryNames.${c}` })} /&gt;
+              {intl.formatMessage({ id: `PayoutDetailsForm.countryNames.${c}` })}
             </option>
           ))}
         </SelectField>

src/containers/StripePaymentForm/StripePaymentForm.js

@@ -49,7 +49,7 @@ const stripeElementsOptions = {
       weight: 500,
       src: 'local("sofiapro"), local("SofiaPro"), local("Sofia Pro"), url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff2") format("woff2")',
     },
-  ]
+  ],
 };
 
 const cardStyles = {
@@ -60,6 +60,9 @@ const cardStyles = {
     lineHeight: '24px',
     letterSpacing: '-0.1px',
     color: '#4A4A4A',
+    '::placeholder': {
+      color: '#B2B2B2',
+    },
   },
 };
 

src/translations/en.json

@@ -13,6 +13,8 @@
   "BookingBreakdown.commission": "Saunatime fee:",
   "BookingBreakdown.nightCount": "× {count, number} {count, plural, one {night} other {nights}}",
   "BookingBreakdown.pricePerNight": "Price per night",
+  "BookingBreakdown.providerTotal":"Happy days! You just made…",
+  "BookingBreakdown.subTotal": "Subtotal:",
   "BookingBreakdown.total": "Total price",
   "BookingDatesForm.bookingEndTitle": "End date",
   "BookingDatesForm.bookingStartTitle": "Start date",