From 892ace55661ce706181259ed498082cb7e016e1e Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Tue, 13 Oct 2020 14:45:59 +0200
Subject: [PATCH] feat: optimize register setup page.

---
 .../src/containers/Setup/SetupLeftSection.js  | 11 ++++--
 .../containers/Setup/SetupSubscriptionForm.js |  1 +
 .../containers/Subscriptions/LicenseTab.js    |  2 +-
 .../Subscriptions/billingPaymentmethod.js     |  4 +-
 .../Subscriptions/billingPeriods.js           |  5 ++-
 .../containers/Subscriptions/billingPlans.js  |  4 +-
 client/src/lang/en/index.js                   |  2 +-
 client/src/style/objects/typography.scss      |  5 +++
 client/src/style/pages/billing.scss           | 39 +++++++++----------
 .../src/style/pages/register-wizard-page.scss |  2 +-
 10 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/client/src/containers/Setup/SetupLeftSection.js b/client/src/containers/Setup/SetupLeftSection.js
index 6359d8525..480a1947f 100644
--- a/client/src/containers/Setup/SetupLeftSection.js
+++ b/client/src/containers/Setup/SetupLeftSection.js
@@ -1,9 +1,8 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Icon, For } from 'components';
 import { FormattedMessage as T } from 'react-intl';
-
 import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
-
+import withAuthentication from 'containers/Authentication/withAuthentication';
 import footerLinks from 'config/footerLinks';
 import { compose } from 'utils';
 
@@ -22,6 +21,9 @@ function FooterLinkItem({ title, link }) {
 function SetupLeftSection({
   // #withAuthenticationActions
   requestLogout,
+
+  // #withAuthentication
+  currentOrganizationId
 }) {
   const onClickLogout = useCallback(() => {
     requestLogout();
@@ -43,7 +45,7 @@ function SetupLeftSection({
         </p>
 
         <div className={'content__organization'}>
-          <span class="organization-id">Your oragnization ID: <span class="id">12342313</span>,</span><br />
+          <span class="organization-id">Your oragnization ID: <span class="id">{ currentOrganizationId }</span>,</span><br />
           <span class="signout"><a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a></span>
         </div>
 
@@ -65,4 +67,5 @@ function SetupLeftSection({
 
 export default compose(
   withAuthenticationActions,
+  withAuthentication(({ currentOrganizationId }) => ({ currentOrganizationId })),
 )(SetupLeftSection);
diff --git a/client/src/containers/Setup/SetupSubscriptionForm.js b/client/src/containers/Setup/SetupSubscriptionForm.js
index 9f29d5f01..5590bd213 100644
--- a/client/src/containers/Setup/SetupSubscriptionForm.js
+++ b/client/src/containers/Setup/SetupSubscriptionForm.js
@@ -56,6 +56,7 @@ function SetupSubscriptionForm({
         <BillingPlans title={'a_select_a_plan'} formik={formik} />
         <BillingPeriods title={'b_choose_your_billing'} formik={formik} />
         <BillingPaymentmethod title={'c_payment_methods'} formik={formik} />
+
         <div className={'subscribe-button'}>
           <Button
             intent={Intent.PRIMARY}
diff --git a/client/src/containers/Subscriptions/LicenseTab.js b/client/src/containers/Subscriptions/LicenseTab.js
index e485db707..6df07c5ec 100644
--- a/client/src/containers/Subscriptions/LicenseTab.js
+++ b/client/src/containers/Subscriptions/LicenseTab.js
@@ -11,7 +11,7 @@ function LicenseTab({
       <h4>
         <T id={'license_code'} />
       </h4>
-      <p className={'bg-message'}>
+      <p className="paragraph">
         <T id={'cards_will_be_charged'} />
       </p>
 
diff --git a/client/src/containers/Subscriptions/billingPaymentmethod.js b/client/src/containers/Subscriptions/billingPaymentmethod.js
index 0539a3858..031aaf9ea 100644
--- a/client/src/containers/Subscriptions/billingPaymentmethod.js
+++ b/client/src/containers/Subscriptions/billingPaymentmethod.js
@@ -4,11 +4,11 @@ import { PaymentMethodTabs } from './SubscriptionTabs';
 
 export const BillingPaymentmethod = ({ formik, title }) => {
   return (
-    <section>
+    <section class="billing-section">
       <h1 className={'bg-title'}>
         <T id={title} />
       </h1>
-      <p className={'bg-message'}>
+      <p className='paragraph'>
         <T id={'please_enter_your_preferred_payment_method'} />
       </p>
       <PaymentMethodTabs formik={formik} />
diff --git a/client/src/containers/Subscriptions/billingPeriods.js b/client/src/containers/Subscriptions/billingPeriods.js
index 944a66566..ad2d03ad1 100644
--- a/client/src/containers/Subscriptions/billingPeriods.js
+++ b/client/src/containers/Subscriptions/billingPeriods.js
@@ -15,6 +15,7 @@ function BillingPeriod({ price, period, currency, onSelected, selected }) {
       <span className={'bg-period'}>
         <T id={period} />
       </span>
+
       <div className={'plan-price'}>
         <span className={'amount'}>
           {price} {currency}
@@ -43,11 +44,11 @@ function BillingPeriods({ formik, title, selected = 1 }) {
   });
 
   return (
-    <section>
+    <section class="billing-section">
       <h1 className={'bg-title'}>
         <T id={title} />
       </h1>
-      <p className={'bg-message'}>
+      <p className='paragraph'>
         <T id={'please_enter_your_preferred_payment_method'} />
       </p>
       <div className={'payment-method-continer'} ref={billingRef}>
diff --git a/client/src/containers/Subscriptions/billingPlans.js b/client/src/containers/Subscriptions/billingPlans.js
index d6577bf70..41aa17070 100644
--- a/client/src/containers/Subscriptions/billingPlans.js
+++ b/client/src/containers/Subscriptions/billingPlans.js
@@ -61,11 +61,11 @@ function BillingPlans({ formik, title, selected = 1 }) {
   });
 
   return (
-    <section>
+    <section class="billing-section">
       <h1 className={'bg-title'}>
         <T id={title} />
       </h1>
-      <p className={'bg-message '}>
+      <p className='paragraph'>
         <T id={'please_enter_your_preferred_payment_method'} />
       </p>
       <div className={'billing-form__plan-container'} ref={planRef}>
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index d9ab0fe28..0fa93e786 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -709,7 +709,7 @@ export default {
   please_enter_your_preferred_payment_method:
     'Please enter your preferred payment method below. You can use a credit / debit card or prepay through PayPal. ',
   cards_will_be_charged:
-    'Cards will be charged either at the end of the month or whenever your balance exceeds the usage threshold.All major credit / debit cards accepted.',
+    'Cards will be charged either at the end of the month or whenever your balance exceeds the usage threshold. All major credit / debit cards accepted.',
   license_number: 'License number',
   subscribe: 'Subscribe',
   year_per: 'year',
diff --git a/client/src/style/objects/typography.scss b/client/src/style/objects/typography.scss
index 5662bec67..ecf59becd 100644
--- a/client/src/style/objects/typography.scss
+++ b/client/src/style/objects/typography.scss
@@ -11,4 +11,9 @@ body{
 .divider{
   border-top: 1px solid #e8e8e8;
   height: 1px;
+}
+
+.paragraph{
+  line-height: 1.5;
+  font-size: 14px;
 }
\ No newline at end of file
diff --git a/client/src/style/pages/billing.scss b/client/src/style/pages/billing.scss
index 28ec01b0e..5783dd714 100644
--- a/client/src/style/pages/billing.scss
+++ b/client/src/style/pages/billing.scss
@@ -1,18 +1,19 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 .billing-form {
   padding: 25px 45px;
   width: 800px;
   margin: 0 auto;
 
+  .billing-section{
+    margin-bottom: 30px;
+  }
+
+  .paragraph + .billing-form__plan-container{
+    margin-top: 20px;
+  }
+
   &__plan-container {
     display: flex;
     flex-flow: row wrap;
-    margin-bottom: 30px;
 
     .plan-wrapper {
       display: flex;
@@ -76,8 +77,14 @@
       background-color: #fcfdff;
     }
   }
+
+  .paragraph + .payment-method-continer{
+    margin-top: 20px;
+  }
+
   .payment-method-continer {
     margin-bottom: 30px;
+
     .period-container {
       display: inline-flex;
       background-color: #fcfdff;
@@ -110,22 +117,12 @@
     }
   }
 
-  // .bg-title {
-  //   font-size: 22px;
-  //   font-weight: 400;
-  //   color: #666666;
-  // }
-  // .bg-message {
-  //   margin-bottom: 23px;
-  //   font-size: 14px;
-  // }
   .license-container {
-    .bp3-form-group {
-      margin-bottom: 20px;
-      .bp3-label {
-        margin-bottom: 15px;
-      }
+
+    .form-group-license_code{
+      margin-top: 20px;
     }
+
     .bp3-form-content {
       .bp3-input-group {
         display: block;
diff --git a/client/src/style/pages/register-wizard-page.scss b/client/src/style/pages/register-wizard-page.scss
index bb89bd906..26844cd32 100644
--- a/client/src/style/pages/register-wizard-page.scss
+++ b/client/src/style/pages/register-wizard-page.scss
@@ -20,7 +20,7 @@
 
     h1{
       font-size: 22px;
-      font-weight: 600;
+      font-weight: 500;
       color: #6d6d6d;
     }
   }