feat: optimize register setup page.

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);

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}

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>
 

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} />

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}>

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}>