WIP/ Feature :Register wizard coding style

client/src/containers/Authentication/AuthInsider.js

@@ -7,23 +7,17 @@ export default function AuthInsider({
   copyright = true,
   children,
 }) {
-  
   return (
     <div class="authentication-insider">
       <div className={'authentication-insider__logo-section'}>
-        <Icon
-          icon='bigcapital'
-          height={37}
-          width={214} />
-      </div>
-      
-      <div class="authentication-insider__content">
-        { children }
+        {/* <Icon icon="bigcapital" height={37} width={214} /> */}
       </div>
 
+      <div class="authentication-insider__content">{children}</div>
+
       <div class="authentication-insider__footer">
         <AuthCopyright />
       </div>
     </div>
-  )
-}
+  );
+}

client/src/containers/Authentication/RegisterLeftSidebar.js

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import Icon from 'components/Icon';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import RegisterWizardSteps from './RegisterWizardSteps';
+import RegisterOrganizationForm from './RegisterOrganizationForm';
+import Register from './Register';
+import Login from './Login';
+import RegisterSubscriptionForm from './RegisterSubscriptionForm';
+
+function RegisterLeftSidebar() {
+  const { formatMessage } = useIntl();
+  const [org] = useState('LibyanSpider');
+
+  console.log(org, 'EE');
+  return (
+    <div>
+      <section>
+        <div className={'wizard-left-side'}>
+          <div className={'content'}>
+            <div className={'content-logo'}>
+              <Icon
+                icon={'bigcapital'}
+                width={165}
+                height={28}
+                className="bigcapital--alt"
+              />
+            </div>
+            <h1 className={'content-title'}>
+              <T id={'register_a_new_organization_now'} />
+            </h1>
+
+            <p className={'content-text'}>
+              <T id={'you_have_a_bigcapital_account'} />
+            </p>
+            <div className={'content-org'}>
+              <span>
+                <T id={'welcome'} />
+                {org},
+              </span>
+              <span>
+                <a href={'#!'}>
+                  <T id={'sign_out'} />
+                </a>
+              </span>
+            </div>
+
+            <div className={'content-contact'}>
+              <a href={'#!'}>
+                <p>
+                  <T id={'we_re_here_to_help'} /> {'+21892-791-8381'}
+                </p>
+              </a>
+              <a href={'#!'}>
+                <p>
+                  <T id={'contact_us_technical_support'} />
+                </p>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section>
+        <div className={'wizard-right-side'}>
+          <RegisterWizardSteps />
+          {/* <RegisterOrganizationForm /> */}
+          {/* <Register /> */}
+          {/* <Login/> */}
+          <RegisterSubscriptionForm />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default RegisterLeftSidebar;

client/src/containers/Authentication/RegisterOrganizationForm.js

@@ -0,0 +1,368 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { Row, Col } from 'react-grid-system';
+import {
+  Button,
+  Intent,
+  FormGroup,
+  MenuItem,
+  Classes,
+  Position,
+} from '@blueprintjs/core';
+import moment from 'moment';
+import classNames from 'classnames';
+import { TimezonePicker } from '@blueprintjs/timezone';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { DateInput } from '@blueprintjs/datetime';
+import { momentFormatter, tansformDateValue } from 'utils';
+import AppToaster from 'components/AppToaster';
+
+import { ListSelect, ErrorMessage, FieldRequiredHint } from 'components';
+
+function RegisterOrganizationForm() {
+  const { formatMessage } = useIntl();
+  const [selected, setSelected] = useState();
+
+  const baseCurrency = [
+    { id: 0, name: 'LYD - Libyan Dinar', value: 'LYD' },
+    { id: 1, name: 'USD - American Dollar', value: 'USD' },
+  ];
+
+  const languages = [
+    { id: 0, name: 'English', value: 'en' },
+    { id: 1, name: 'Arabic', value: 'ar' },
+  ];
+
+  const fiscalYear = [
+    {
+      id: 0,
+      name: `${formatMessage({ id: 'january' })} - ${formatMessage({
+        id: 'december',
+      })}`,
+      value: 'january',
+    },
+    {
+      id: 1,
+      name: `${formatMessage({ id: 'february' })} - ${formatMessage({
+        id: 'january',
+      })}`,
+      value: 'february',
+    },
+    {
+      id: 2,
+      name: `${formatMessage({ id: 'march' })} - ${formatMessage({
+        id: 'february',
+      })}`,
+      value: 'March',
+    },
+    {
+      id: 3,
+      name: `${formatMessage({ id: 'april' })} - ${formatMessage({
+        id: 'march',
+      })}`,
+      value: 'april',
+    },
+    {
+      id: 4,
+      name: `${formatMessage({ id: 'may' })} - ${formatMessage({
+        id: 'april',
+      })}`,
+      value: 'may',
+    },
+    {
+      id: 5,
+      name: `${formatMessage({ id: 'june' })} - ${formatMessage({
+        id: 'may',
+      })}`,
+      value: 'june',
+    },
+    {
+      id: 6,
+      name: `${formatMessage({ id: 'july' })} - ${formatMessage({
+        id: 'june',
+      })}`,
+      value: 'july',
+    },
+    {
+      id: 7,
+      name: `${formatMessage({ id: 'august' })} - ${formatMessage({
+        id: 'july',
+      })}`,
+      value: 'August',
+    },
+    {
+      id: 8,
+      name: `${formatMessage({ id: 'september' })} - ${formatMessage({
+        id: 'august',
+      })}`,
+      value: 'september',
+    },
+    {
+      id: 9,
+      name: `${formatMessage({ id: 'october' })} - ${formatMessage({
+        id: 'november',
+      })}`,
+      value: 'october',
+    },
+    {
+      id: 10,
+      name: `${formatMessage({ id: 'november' })} - ${formatMessage({
+        id: 'october',
+      })}`,
+      value: 'november',
+    },
+    {
+      id: 11,
+      name: `${formatMessage({ id: 'december' })} - ${formatMessage({
+        id: 'november',
+      })}`,
+      value: 'december',
+    },
+  ];
+
+  const ValidationSchema = Yup.object().shape({
+    date_start: Yup.date().required(),
+    // .label(formatMessage({id:''}))
+    base_currency: Yup.string().required(
+      formatMessage({ id: 'base_currency_' }),
+    ),
+    language: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'language' })),
+    fiscal_year: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'fiscal_year_' })),
+    time_zone: Yup.string(),
+  });
+
+  const initialValues = useMemo(() => ({}), []);
+
+  const {
+    values,
+    errors,
+    touched,
+    handleSubmit,
+    setFieldValue,
+    getFieldProps,
+    isSubmitting,
+  } = useFormik({
+    enableReinitialize: true,
+    validationSchema: ValidationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: (values, { setSubmitting, setErrors }) => {},
+  });
+
+  const onItemsSelect = (filedName) => {
+    return (filed) => {
+      setSelected({
+        ...selected,
+        [filedName]: filed,
+      });
+      setFieldValue(filedName, filed.value);
+    };
+  };
+
+  const filterItems = (query, item, _index, exactMatch) => {
+    const normalizedTitle = item.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  const onItemRenderer = (item, { handleClick }) => (
+    <MenuItem key={item.id} text={item.name} onClick={handleClick} />
+  );
+
+  const handleTimeZoneChange = useCallback(
+    (time_zone) => {
+      setFieldValue('time_zone', time_zone);
+    },
+    [setFieldValue],
+  );
+
+  const handleDateChange = useCallback(
+    (date_filed) => (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue(date_filed, formatted);
+    },
+    [setFieldValue],
+  );
+
+  return (
+    <div className={'register-organizaton-form'}>
+      <div className={'register-org-title'}>
+        <h2>
+          <T id={'let_s_get_started'} />
+        </h2>
+        <p>
+          <T id={'tell_the_system_a_little_bit_about_your_organization'} />
+        </p>
+      </div>
+
+      <form onClick={handleSubmit}>
+        <h3>
+          <T id={'organization_details'} />
+        </h3>
+
+        {/* financial starting date */}
+        <FormGroup
+          label={<T id={'financial_starting_date'} />}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.date_start && touched.date_start && Intent.DANGER}
+          helperText={
+            <ErrorMessage {...{ errors, touched }} name={'date_start'} />
+          }
+        >
+          <DateInput
+            fill={true}
+            {...momentFormatter('MMMM Do YYYY')}
+            value={tansformDateValue(values.date_start)}
+            onChange={handleDateChange('date_start')}
+            popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          />
+        </FormGroup>
+        <Row>
+          {/* base currency */}
+          <Col width={300}>
+            <FormGroup
+              label={<T id={'base_currency'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames(
+                'form-group--base-currency',
+                'form-group--select-list',
+                Classes.FILL,
+              )}
+              intent={
+                errors.base_currency && touched.base_currency && Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage name={'base_currency'} {...{ errors, touched }} />
+              }
+            >
+              <ListSelect
+                items={baseCurrency}
+                noResults={<MenuItem disabled={true} text="No results." />}
+                itemRenderer={onItemRenderer}
+                popoverProps={{ minimal: true }}
+                onItemSelect={onItemsSelect('base_currency')}
+                itemPredicate={filterItems}
+                selectedItem={values.base_currency}
+                selectedItemProp={'value'}
+                // defaultText={<T id={'select_base_currency'} />}
+                defaultText={'LYD - Libyan Dinar'}
+                labelProp={'name'}
+              />
+            </FormGroup>
+          </Col>
+
+          {/* language */}
+          <Col width={300}>
+            <FormGroup
+              label={<T id={'language'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames(
+                'form-group--language',
+                'form-group--select-list',
+                Classes.FILL,
+              )}
+              intent={errors.language && touched.language && Intent.DANGER}
+              helperText={
+                <ErrorMessage name={'language'} {...{ errors, touched }} />
+              }
+            >
+              <ListSelect
+                items={languages}
+                noResults={<MenuItem disabled={true} text="No results." />}
+                itemRenderer={onItemRenderer}
+                popoverProps={{ minimal: true }}
+                onItemSelect={onItemsSelect('language')}
+                itemPredicate={filterItems}
+                selectedItem={values.language}
+                selectedItemProp={'value'}
+                defaultText={'English'}
+                // defaultText={<T id={'select_language'} />}
+                labelProp={'name'}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        {/* fiscal Year */}
+        <FormGroup
+          label={<T id={'fiscal_year'} />}
+          labelInfo={<FieldRequiredHint />}
+          className={classNames(
+            'form-group--fiscal_year',
+            'form-group--select-list',
+            Classes.FILL,
+          )}
+          intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER}
+          helperText={
+            <ErrorMessage {...{ errors, touched }} name={'fiscal_year'} />
+          }
+        >
+          <ListSelect
+            items={fiscalYear}
+            noResults={<MenuItem disabled={true} text="No results." />}
+            itemRenderer={onItemRenderer}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onItemsSelect('fiscal_year')}
+            itemPredicate={filterItems}
+            selectedItem={values.fiscal_year}
+            selectedItemProp={'value'}
+            defaultText={'January - December'}
+            // defaultText={<T id={'select_fiscal_year'} />}
+            labelProp={'name'}
+          />
+        </FormGroup>
+
+        {/* Time zone */}
+        <FormGroup
+          label={<T id={'time_zone'} />}
+          className={classNames(
+            'form-group--time-zone',
+            'form-group--select-list',
+            Classes.FILL,
+          )}
+          intent={errors.time_zone && touched.time_zone && Intent.DANGER}
+          helperText={
+            <ErrorMessage {...{ errors, touched }} name={'time_zone'} />
+          }
+        >
+          <TimezonePicker
+            value={values.time_zone}
+            onChange={handleTimeZoneChange}
+            valueDisplayFormat="composite"
+            showLocalTimezone={true}
+            placeholder={<T id={'select_time_zone'} />}
+          />
+        </FormGroup>
+
+        <p className={'register-org-note'}>
+          <T
+            id={
+              'note_you_can_change_your_preferences_later_in_dashboard_if_needed'
+            }
+          />
+        </p>
+        <div className={'register-org-button'}>
+          <Button
+            intent={Intent.PRIMARY}
+            type="submit"
+            //  loading={isSubmitting}
+          >
+            <T id={'save_continue'} />
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default RegisterOrganizationForm;

client/src/containers/Authentication/RegisterSubscriptionForm.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Button, Intent } from '@blueprintjs/core';
+import BillingTab from 'containers/Subscriptions/BillingTab';
+
+function RegisterSubscriptionForm({}) {
+  const ValidationSchema = Yup.object().shape({});
+
+  const initialValues = useMemo(() => ({}), []);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema: ValidationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: (values, { setSubmitting, setErrors }) => {},
+  });
+  return (
+    <div className={'register-subscription-form'}>
+      <form className={'billing-form'}>
+        <BillingTab formik={formik} />
+
+        <div className={'subscribe-button'}>
+          <Button
+            intent={Intent.PRIMARY}
+            type="submit"
+            loading={formik.isSubmitting}
+          >
+            <T id={'subscribe'} />
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default RegisterSubscriptionForm;

client/src/containers/Authentication/RegisterWizardPage.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Redirect, Route, Switch, Link } from 'react-router-dom';
+import RegisterLeftSidebar from './RegisterLeftSidebar';
+
+function RegisterWizardPage() {
+  return (
+    <>
+      <Switch>
+        <div>
+          <RegisterLeftSidebar />
+        </div>
+      </Switch>
+    </>
+  );
+}
+
+export default RegisterWizardPage;

client/src/containers/Authentication/RegisterWizardSteps.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+function RegisterWizardSteps() {
+  return (
+    <div>
+      <div className={'wizard-container'}>
+        <ul className={'wizard-wrapper'}>
+          <li>
+            <p className={'wizard-info'}>
+              <T id={'organization_register'} />
+            </p>
+          </li>
+          <li>
+            <p className={'wizard-info'}>
+              <T id={'payment_or_trial'} />
+            </p>
+          </li>
+          <li className="complete">
+            <p className={'wizard-info'}>
+              <T id={'getting_started'} />
+            </p>
+          </li>
+
+          <li>
+            <p className={'wizard-info'}>
+              <T id={'initializing'} />
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default RegisterWizardSteps;

client/src/containers/Subscriptions/BillingTab.js

@@ -121,7 +121,8 @@ function BillingTab({ formik }) {
         </p>
         <div className={'payment-method-continer'} ref={billingRef}>
           <a
-            href={'#'}
+            href={'#!'}
+            formik={formik}
             id={'monthly'}
             className={'period-container billing-selected'}
           >
@@ -135,7 +136,7 @@ function BillingTab({ formik }) {
               </span>
             </div>
           </a>
-          <a href={'#'} id={'yearly'} className={'period-container'}>
+          <a href={'#!'} id={'yearly'} className={'period-container'}>
             <span className={'bg-period'}>
               <T id={'yearly'} />
             </span>