BIG-359:

src/common/journalTypes.js

@@ -0,0 +1,8 @@
+import intl from 'react-intl-universal';
+
+export const journalTypes = [
+  {
+    name: intl.get('journal'),
+    value: 'Journal',
+  },
+];

src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js

@@ -4,6 +4,7 @@ import {
   FormGroup,
   Position,
   ControlGroup,
+  Classes,
 } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
@@ -11,6 +12,8 @@ import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
+import { journalTypes } from '../../../common/journalTypes';
+import { FFormGroup } from '../../../components';
 import {
   momentFormatter,
   compose,
@@ -28,12 +31,13 @@ import {
 } from 'components';
 import withSettings from 'containers/Settings/withSettings';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
-import { JournalExchangeRateInputField } from './components';
+import { JournalExchangeRateInputField, JournalTypeSelect } from './components';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import {
   currenciesFieldShouldUpdate,
   useObserveJournalNoSettings,
 } from './utils';
+
 /**
  * Make journal entries header.
  */
@@ -169,21 +173,18 @@ function MakeJournalEntriesHeader({
       </FastField>
 
       {/*------------ Journal type  -----------*/}
-      <FastField name={'journal_type'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'journal_type'} />}
-            className={classNames('form-group--account-type', CLASSES.FILL)}
-            inline={true}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              fill={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'journal_type'}
+        label={<T id={'journal_type'} />}
+        inline={true}
+        className={classNames('form-group--select-list', Classes.FILL)}
+      >
+        <JournalTypeSelect
+          items={journalTypes}
+          name={'journal_type'}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
 
       {/*------------ Currency  -----------*/}
       <FastField

src/containers/Accounting/MakeJournal/components.js

@@ -9,6 +9,7 @@ import {
   Icon,
   Hint,
   FormattedMessage as T,
+  FSelect,
 } from 'components';
 import {
   AccountsListFieldCell,
@@ -183,3 +184,71 @@ export function JournalExchangeRateInputField({ ...props }) {
     />
   );
 }
+
+/**
+ *
+ * @param {*} query
+ * @param {*} journal
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const itemPredicate = (query, journal, _index, exactMatch) => {
+  const normalizedTitle = journal.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return normalizedTitle.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} item
+ * @param {*} param1
+ * @returns
+ */
+const itemRenderer = (item, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      text={item.name}
+      label={item.label}
+      key={item.id}
+      onClick={handleClick}
+    />
+  );
+};
+
+const itemSelectProps = {
+  itemPredicate: itemPredicate,
+  itemRenderer: itemRenderer,
+  valueAccessor: 'name',
+  labelAccessor: 'name',
+};
+
+export function JournalTypeSelect({ items, ...rest }) {
+  return (
+    <FSelect
+      {...itemSelectProps}
+      {...rest}
+      items={items}
+      input={itemSelectButton}
+    />
+  );
+}
+
+/**
+ * @param {*} label
+ * @returns
+ */
+function itemSelectButton({ label }) {
+  return (
+    <Button
+      text={label ? label : intl.get('make_journal.label.select_journal_type')}
+    />
+  );
+}

src/containers/Items/ItemFormFormik.js

@@ -50,7 +50,7 @@ export default function ItemFormFormik({
   // Handles the form submit.
   const handleFormSubmit = (values, form) => {
     const { setSubmitting, resetForm, setErrors } = form;
-    const formValues = { ...values };
+    const formValues = { ...values, type: values.type.toString() };
 
     setSubmitting(true);
 
@@ -96,7 +96,7 @@ export default function ItemFormFormik({
         validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
-      > 
+      >
         <Form>
           <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
             <ItemFormPrimarySection />

src/containers/Items/ItemFormPrimarySection.js

@@ -7,7 +7,12 @@ import {
   Radio,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  FCheckbox,
+  FFormGroup,
+} from 'components';
 import { ErrorMessage, FastField } from 'formik';
 import {
   CategoriesSelectList,
@@ -29,7 +34,7 @@ import { categoriesFieldShouldUpdate } from './utils';
 export default function ItemFormPrimarySection() {
   // Item form context.
   const { isNewMode, item, itemsCategories } = useItemFormContext();
-
+  console.log(item.type, 'XXX');
   const nameFieldRef = useRef(null);
 
   useEffect(() => {
@@ -53,7 +58,34 @@ export default function ItemFormPrimarySection() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
       {/*----------- Item type ----------*/}
-      <FastField name={'type'}>
+      <FFormGroup
+        name={'type'}
+        label={<T id={'item_type'} />}
+        labelInfo={
+          <span>
+            <FieldRequiredHint />
+            <Hint
+              content={itemTypeHintContent}
+              position={Position.BOTTOM_LEFT}
+            />
+          </span>
+        }
+        inline={true}
+      >
+        <FCheckbox
+          inline={true}
+          name="type"
+          label={<T id={'service'} />}
+          value="service"
+        />
+        <FCheckbox
+          inline={true}
+          name="type"
+          label={<T id={'inventory'} />}
+          value="inventory"
+        />
+      </FFormGroup>
+      {/* <FastField name={'type'}>
         {({ form, field: { value }, meta: { touched, error } }) => (
           <FormGroup
             medium={true}
@@ -85,7 +117,7 @@ export default function ItemFormPrimarySection() {
             </RadioGroup>
           </FormGroup>
         )}
-      </FastField>
+      </FastField> */}
 
       <Row>
         <Col xs={7}>

src/lang/ar/index.json

@@ -1989,6 +1989,7 @@
   "payment_made_form.label.total": "إجمالي",
   "make_journal.label.subtotal": "المجموع",
   "make_journal.label.total": "إجمالي",
+  "make_journal.label.select_journal_type":"حدد نوع القيد",
   "expense.label.subtotal": "المجموع",
   "expense.label.total": "إجمالي",
   "expense.branch_button.label": "الفرع: {label}",

src/lang/en/index.json

@@ -1989,6 +1989,7 @@
   "payment_made.form.internal_note.placeholder": "Internal note (Not visible to the vendor).",
   "make_journal.label.subtotal": "Subtotal",
   "make_journal.label.total": "TOTAL",
+  "make_journal.label.select_journal_type":"Select Journal Type",
   "expense.label.subtotal": "Subtotal",
   "expense.label.total": "TOTAL",
   "expense.branch_button.label": "Branch: {label}",