feat: application booting.

client/src/containers/Setup/SetupCongratsPage.js

@@ -1,6 +1,5 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
-import { useHistory } from 'react-router-dom';
 
 import WorkflowIcon from './WorkflowIcon';
 import { FormattedMessage as T } from 'components';
@@ -10,17 +9,16 @@ import { compose } from 'utils';
 
 import 'style/pages/Setup/Congrats.scss';
 
-
 /**
  * Setup congrats page.
  */
 function SetupCongratsPage({ setOrganizationSetupCompleted }) {
-  const history = useHistory();
+  const [isReloading, setIsReloading] = React.useState(false);
 
-  const handleBtnClick = useCallback(() => {
-    setOrganizationSetupCompleted(false);
-    history.push('/homepage');
-  }, [setOrganizationSetupCompleted, history]);
+  const handleBtnClick = () => {
+    setIsReloading(true);
+    window.location.reload();
+  };
 
   return (
     <div class="setup-congrats">
@@ -37,7 +35,12 @@ function SetupCongratsPage({ setOrganizationSetupCompleted }) {
           <T id={'setup.congrats.description'} />
         </p>
 
-        <Button intent={Intent.PRIMARY} type="submit" onClick={handleBtnClick}>
+        <Button
+          intent={Intent.PRIMARY}
+          type="submit"
+          loading={isReloading}
+          onClick={handleBtnClick}
+        >
           <T id={'setup.congrats.go_to_dashboard'} />
         </Button>
       </div>

client/src/containers/Setup/SetupInitializingForm.js

@@ -20,10 +20,12 @@ function SetupInitializingForm({
 }) {
   const { refetch, isSuccess } = useCurrentOrganization({ enabled: false });
 
+  // Job done state.
   const [isJobDone, setIsJobDone] = React.useState(false);
 
   const {
     data: { running, queued, failed, completed },
+    isFetching: isJobFetching,
   } = useJob(organization?.build_job_id, {
     refetchInterval: 2000,
     enabled: !!organization?.build_job_id,
@@ -45,17 +47,15 @@ function SetupInitializingForm({
 
   return (
     <div class="setup-initializing-form">
-      <ProgressBar intent={Intent.PRIMARY} value={null} />
-
-      <div className={'setup-initializing-form__title'}>
-        {failed ? (
-          <SetupInitializingFailed />
-        ) : running || queued ? (
-          <SetupInitializingRunning />
-        ) : completed ? (
-          <SetupInitializingCompleted />
-        ) : null}
-      </div>
+      {failed ? (
+        <SetupInitializingFailed />
+      ) : running || queued || isJobFetching ? (
+        <SetupInitializingRunning />
+      ) : completed ? (
+        <SetupInitializingCompleted />
+      ) : (
+        <SetupInitializingFailed />
+      )}
     </div>
   );
 }
@@ -68,41 +68,60 @@ export default R.compose(
   withOrganization(({ organization }) => ({ organization })),
 )(SetupInitializingForm);
 
+/**
+ * State initializing failed state.
+ */
 function SetupInitializingFailed() {
   return (
-    <div class="failed">
-      <h1>
-        <T id={'setup.initializing.something_went_wrong'} />
-      </h1>
-      <p class="paragraph">
-        <T id={'setup.initializing.please_refresh_the_page'} />
-      </p>
+    <div class="setup-initializing__content">
+      <div className={'setup-initializing-form__title'}>
+        <h1>
+          <T id={'setup.initializing.something_went_wrong'} />
+        </h1>
+        <p class="paragraph">
+          <T id={'setup.initializing.please_refresh_the_page'} />
+        </p>
+      </div>
     </div>
   );
 }
 
+/**
+ * Setup initializing running state.
+ */
 function SetupInitializingRunning() {
   return (
-    <div class="running">
-      <h1>
-        <T id={'setup.initializing.title'} />
-      </h1>
-      <p className={'paragraph'}>
-        <T id={'setup.initializing.description'} />
-      </p>
+    <div class="setup-initializing__content">
+      <ProgressBar intent={Intent.PRIMARY} value={null} />
+
+      <div className={'setup-initializing-form__title'}>
+        <h1>
+          <T id={'setup.initializing.title'} />
+        </h1>
+        <p className={'paragraph'}>
+          <T id={'setup.initializing.description'} />
+        </p>
+      </div>
     </div>
   );
 }
 
+/**
+ * Setup initializing completed state.
+ */
 function SetupInitializingCompleted() {
   return (
-    <div class="completed">
-      <h1>
-        <T id={'setup.initializing.waiting_to_redirect'} />
-      </h1>
-      <p class="paragraph">
-        <T id={'setup.initializing.refresh_the_page_if_redirect_not_worked'} />
-      </p>
+    <div class="setup-initializing__content">
+      <div className={'setup-initializing-form__title'}>
+        <h1>
+          <T id={'setup.initializing.waiting_to_redirect'} />
+        </h1>
+        <p class="paragraph">
+          <T
+            id={'setup.initializing.refresh_the_page_if_redirect_not_worked'}
+          />
+        </p>
+      </div>
     </div>
   );
 }

client/src/containers/Setup/SetupOrganizationForm.js

@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
+import useAutofocus from 'hooks/useAutofocus'
 import { FormattedMessage as T } from 'components';
 import { getCountries } from 'common/countries';
 
@@ -29,6 +30,8 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
   const currencies = getAllCurrenciesOptions();
   const countries = getCountries();
 
+  const accountRef = useAutofocus();
+
   return (
     <Form>
       <h3>
@@ -44,7 +47,11 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'name'} />}
           >
-            <InputGroup {...field} intent={inputIntent({ error, touched })} />
+            <InputGroup
+              {...field}
+              intent={inputIntent({ error, touched })}
+              inputRef={accountRef}
+            />
           </FormGroup>
         )}
       </FastField>

client/src/containers/Setup/SetupOrganizationPage.js

@@ -9,7 +9,7 @@ import SetupOrganizationForm from './SetupOrganizationForm';
 import { useOrganizationSetup } from 'hooks/query';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 
-import { compose, transfromToSnakeCase } from 'utils';
+import { setCookie, compose, transfromToSnakeCase } from 'utils';
 import { getSetupOrganizationValidation } from './SetupOrganization.schema';
 
 // Initial values.
@@ -41,6 +41,9 @@ function SetupOrganizationPage({ wizard }) {
     organizationSetupMutate({ ...transfromToSnakeCase(values) })
       .then((response) => {
         setSubmitting(false);
+
+        // Sets locale cookie to next boot cycle.
+        setCookie('locale', values.language);
         wizard.next();
       })
       .catch((erros) => {

client/src/containers/Setup/SetupSubscription.js

@@ -21,12 +21,12 @@ function SetupSubscription({
 
   // Initial values.
   const initialValues = {
-    plan_slug: 'starter',
+    plan_slug: 'essentials',
     period: 'month',
     license_code: '',
   };
   // Handle form submit.
-  const handleSubmit = () => {};
+  const handleSubmit = (values) => {};
 
   // Retrieve momerized subscription form schema.
   const SubscriptionFormSchema = React.useMemo(

client/src/containers/Setup/SetupSubscription/SubscriptionPeriodsSection.js

@@ -9,6 +9,10 @@ import withPlan from '../../Subscriptions/withPlan';
 const SubscriptionPeriodsEnhanced = R.compose(
   withPlan(({ plan }) => ({ plan })),
 )(({ plan, ...restProps }) => {
+  // Can't continue if the current plan of the form not selected.
+  if (!plan) {
+    return null;
+  }
   return <SubscriptionPeriods periods={plan.periods} {...restProps} />;
 });