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);
+    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,15 @@ 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/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,7 @@ 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 +87,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 +100,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/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

@@ -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",