feat: organization setup form validation.

client/src/containers/Setup/SetupOrganization.schema.js

@@ -4,10 +4,12 @@ import intl from 'react-intl-universal';
 // Retrieve the setup organization form validation.
 export const getSetupOrganizationValidation = () =>
   Yup.object().shape({
-    organization_name: Yup.string()
+    organizationName: Yup.string()
       .required()
       .label(intl.get('organization_name_')),
-    financialDateStart: Yup.date().required().label(intl.get('date_start_')),
+    location: Yup.string()
+      .required()
+      .label(intl.get('setup.organization.location')),
     baseCurrency: Yup.string().required().label(intl.get('base_currency_')),
     language: Yup.string().required().label(intl.get('language')),
     fiscalYear: Yup.string().required().label(intl.get('fiscal_year_')),

client/src/containers/Setup/SetupOrganizationForm.js

@@ -7,24 +7,18 @@ import {
   InputGroup,
   MenuItem,
   Classes,
-  Position,
 } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { FormattedMessage as T } from 'components';
+import { getCountries } from 'common/countries';
 
 import { Col, Row, ListSelect } from 'components';
-import {
-  momentFormatter,
-  tansformDateValue,
-  inputIntent,
-  handleDateChange,
-} from 'utils';
+import { inputIntent } from 'utils';
 
 import { getFiscalYear } from 'common/fiscalYearOptions';
 import { getLanguages } from 'common/languagesOptions';
-import { getCurrencies } from 'common/currencies';
+import { getAllCurrenciesOptions } from 'common/currencies';
 
 /**
  * Setup organization form.
@@ -32,7 +26,8 @@ import { getCurrencies } from 'common/currencies';
 export default function SetupOrganizationForm({ isSubmitting, values }) {
   const FiscalYear = getFiscalYear();
   const Languages = getLanguages();
-  const Currencies = getCurrencies();
+  const currencies = getAllCurrenciesOptions();
+  const countries = getCountries();
 
   return (
     <Form>
@@ -41,40 +36,41 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
       </h3>
 
       {/* ---------- Organization name ----------  */}
-      <FastField name={'organization_name'}>
+      <FastField name={'organizationName'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'legal_organization_name'} />}
             className={'form-group--name'}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'organization_name'} />}
+            helperText={<ErrorMessage name={'organizationName'} />}
           >
             <InputGroup {...field} intent={inputIntent({ error, touched })} />
           </FormGroup>
         )}
       </FastField>
 
-      {/* ---------- Financial starting date ----------  */}
-      <FastField name={'financialDateStart'}>
-        {({
-          form: { setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
+      {/* ---------- Location ---------- */}
+      <FastField name={'location'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'financial_starting_date'} />}
+            label={<T id={'business_location'} />}
+            className={classNames(
+              'form-group--business-location',
+              Classes.FILL,
+            )}
+            helperText={<ErrorMessage name="location" />}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="financialDateStart" />}
-            className={classNames('form-group--select-list', Classes.FILL)}
           >
-            <DateInput
-              {...momentFormatter('YYYY MMMM DD')}
-              value={tansformDateValue(value)}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              onChange={handleDateChange((formattedDate) => {
-                setFieldValue('financialDateStart', formattedDate);
-              })}
-              intent={inputIntent({ error, touched })}
+            <ListSelect
+              items={countries}
+              onItemSelect={({ value }) => {
+                form.setFieldValue('location', value);
+              }}
+              selectedItem={value}
+              selectedItemProp={'value'}
+              defaultText={<T id={'select_business_location'} />}
+              textProp={'name'}
+              popoverProps={{ minimal: true }}
             />
           </FormGroup>
         )}
@@ -100,15 +96,15 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
                 helperText={<ErrorMessage name={'baseCurrency'} />}
               >
                 <ListSelect
-                  items={Currencies}
+                  items={currencies}
                   noResults={
                     <MenuItem disabled={true} text={<T id={'no_results'} />} />
                   }
                   popoverProps={{ minimal: true }}
                   onItemSelect={(item) => {
-                    setFieldValue('baseCurrency', item.code);
+                    setFieldValue('baseCurrency', item.key);
                   }}
-                  selectedItemProp={'code'}
+                  selectedItemProp={'key'}
                   textProp={'name'}
                   defaultText={<T id={'select_base_currency'} />}
                   selectedItem={value}
@@ -181,12 +177,12 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
                 <MenuItem disabled={true} text={<T id={'no_results'} />} />
               }
               selectedItem={value}
-              selectedItemProp={'value'}
+              selectedItemProp={'key'}
               textProp={'name'}
               defaultText={<T id={'select_fiscal_year'} />}
               popoverProps={{ minimal: true }}
               onItemSelect={(item) => {
-                setFieldValue('fiscalYear', item.value);
+                setFieldValue('fiscalYear', item.key);
               }}
               filterable={false}
             />

client/src/containers/Setup/SetupOrganizationPage.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Formik } from 'formik';
-import moment from 'moment';
 import { FormattedMessage as T } from 'components';
 
 import 'style/pages/Setup/Organization.scss';
@@ -9,15 +8,14 @@ import SetupOrganizationForm from './SetupOrganizationForm';
 
 import { useOrganizationSetup } from 'hooks/query';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
-import withOrganizationActions from 'containers/Organization/withOrganizationActions';
 
 import { compose, transfromToSnakeCase } from 'utils';
 import { getSetupOrganizationValidation } from './SetupOrganization.schema';
 
 // Initial values.
 const defaultValues = {
-  organization_name: '',
-  financialDateStart: moment(new Date()).format('YYYY-MM-DD'),
+  organizationName: '',
+  location: 'libya',
   baseCurrency: '',
   language: 'en',
   fiscalYear: '',
@@ -27,7 +25,7 @@ const defaultValues = {
 /**
  * Setup organization form.
  */
-function SetupOrganizationPage({ wizard, setOrganizationSetupCompleted }) {
+function SetupOrganizationPage({ wizard }) {
   const { mutateAsync: organizationSetupMutate } = useOrganizationSetup();
 
   // Validation schema.
@@ -73,5 +71,4 @@ function SetupOrganizationPage({ wizard, setOrganizationSetupCompleted }) {
 
 export default compose(
   withSettingsActions,
-  withOrganizationActions,
 )(SetupOrganizationPage);