feat(webapp): add all countries to the setup organization page

packages/webapp/src/constants/languagesOptions.tsx

@@ -3,5 +3,4 @@ import intl from 'react-intl-universal';
 
 export const getLanguages = () => [
   { name: intl.get('english'), value: 'en' },
-  { name: intl.get('arabic'), value: 'ar' },
 ];

packages/webapp/src/containers/Authentication/_components.tsx

@@ -63,7 +63,14 @@ export const AuthFooterLink = styled.p`
 `;
 
 export const AuthSubmitButton = styled(Button)`
-  background-color: #0052cc;
-  min-height: 45px;
   margin-top: 20px;
+
+  &.bp3-intent-primary {
+    background-color: #0052cc;
+
+    &:disabled,
+    &.bp3-disabled {
+      background-color: rgba(0, 82, 204, 0.4);
+    }
+  }
 `;

packages/webapp/src/containers/Setup/SetupOrganizationForm.tsx

@@ -5,15 +5,12 @@ import {
   Button,
   Intent,
   FormGroup,
-  InputGroup,
   MenuItem,
   Classes,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
-import useAutofocus from '@/hooks/useAutofocus'
+import { FFormGroup, FInputGroup, FormattedMessage as T } from '@/components';
-import { FormattedMessage as T } from '@/components';
-import { getCountries } from '@/constants/countries';
 
 import { Col, Row, ListSelect } from '@/components';
 import { inputIntent } from '@/utils';
@@ -21,6 +18,9 @@ import { inputIntent } from '@/utils';
 import { getFiscalYear } from '@/constants/fiscalYearOptions';
 import { getLanguages } from '@/constants/languagesOptions';
 import { getAllCurrenciesOptions } from '@/constants/currencies';
+import { getAllCountries } from '@/utils/countries';
+
+const countries = getAllCountries();
 
 /**
  * Setup organization form.
@@ -29,9 +29,6 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
   const FiscalYear = getFiscalYear();
   const Languages = getLanguages();
   const currencies = getAllCurrenciesOptions();
-  const countries = getCountries();
-
-  const accountRef = useAutofocus();
 
   return (
     <Form>
@@ -40,22 +37,9 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
       </h3>
 
       {/* ---------- Organization name ----------  */}
-      <FastField name={'name'}>
+      <FFormGroup name={'name'} label={<T id={'legal_organization_name'} />}>
-        {({ form, field, meta: { error, touched } }) => (
+        <FInputGroup name={'name'} />
-          <FormGroup
+      </FFormGroup>
-            label={<T id={'legal_organization_name'} />}
-            className={'form-group--name'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'name'} />}
-          >
-            <InputGroup
-              {...field}
-              intent={inputIntent({ error, touched })}
-              inputRef={accountRef}
-            />
-          </FormGroup>
-        )}
-      </FastField>
 
       {/* ---------- Location ---------- */}
       <FastField name={'location'}>
@@ -71,11 +55,11 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
           >
             <ListSelect
               items={countries}
-              onItemSelect={({ value }) => {
+              onItemSelect={({ countryCode }) => {
-                form.setFieldValue('location', value);
+                form.setFieldValue('location', countryCode);
               }}
               selectedItem={value}
-              selectedItemProp={'value'}
+              selectedItemProp={'countryCode'}
               defaultText={<T id={'select_business_location'} />}
               textProp={'name'}
               popoverProps={{ minimal: true }}

packages/webapp/src/containers/Setup/SetupOrganizationPage.tsx

@@ -16,7 +16,7 @@ import { getSetupOrganizationValidation } from './SetupOrganization.schema';
 // Initial values.
 const defaultValues = {
   name: '',
-  location: 'libya',
+  location: '',
   baseCurrency: '',
   language: 'en',
   fiscalYear: '',

packages/webapp/src/style/pages/Setup/Organization.scss

@@ -55,6 +55,11 @@
       height: 40px;
       font-size: 15px;
       width: 100%;
+
+      &:disabled,
+      &.bp3-loading{
+        background-color: rgba(28, 36, 72, 0.5);
+      }
     }
   }
 }

packages/webapp/src/utils/countries.tsx

@@ -0,0 +1,10 @@
+import { Countries } from '@/constants/countries';
+
+export const getAllCountries = () => {
+  return Object.keys(Countries).map((countryCode) => {
+    return {
+      ...Countries[countryCode],
+      countryCode,
+    }
+  });
+};