feat: add input group prepend component.

client/src/components/Forms/InputPrependText.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function InputPrependText({ text, children }) {
+  return (
+    <div class="input-group-prepend">
+      <span class="input-group-text">{text}</span>
+    </div>
+  );
+}

client/src/components/index.js

@@ -39,6 +39,7 @@ import MoneyInputGroup from './MoneyInputGroup';
 import Dragzone from './Dragzone';
 import EmptyStatus from './EmptyStatus';
 import DashboardCard from './Dashboard/DashboardCard';
+import InputPrependText from './Forms/InputPrependText';
 
 const Hint = FieldHint;
 
@@ -84,4 +85,5 @@ export {
   Dragzone,
   EmptyStatus,
   DashboardCard,
+  InputPrependText,
 };

client/src/containers/Customers/CustomerFinancialPanel.js

@@ -75,9 +75,7 @@ function CustomerFinancialPanel({
                 <MoneyInputGroup
                   value={value}
                   prefix={'$'}
-                  inputGroupProps={{
+                  inputGroupProps={{ fill: true }}
-                    fill: true,
-                  }}
                   disabled={customerId}
                   {...field}
                 />

client/src/containers/Items/ItemForm.js

@@ -37,7 +37,7 @@ const defaultInitialValues = {
   inventory_account_id: '',
   category_id: '',
   note: '',
-  sellable: true,
+  sellable: 1,
   purchasable: true,
 };
 

client/src/containers/Items/ItemFormBody.js

@@ -1,34 +1,33 @@
 import React from 'react';
 import { FastField, Field, ErrorMessage } from 'formik';
-import {
+import { FormGroup, Classes, Checkbox, ControlGroup } from '@blueprintjs/core';
-  FormGroup,
-  Classes,
-  Checkbox,
-} from '@blueprintjs/core';
 import {
   AccountsSelectList,
   MoneyInputGroup,
   Col,
   Row,
   Hint,
+  InputPrependText,
 } from 'components';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
+
 import withAccounts from 'containers/Accounts/withAccounts';
+import withSettings from 'containers/Settings/withSettings';
 
 import { compose, inputIntent } from 'utils';
 
 /**
  * Item form body.
  */
-function ItemFormBody({ accountsList }) {
+function ItemFormBody({ accountsList, baseCurrency }) {
   return (
     <div class="page-form__section page-form__section--selling-cost">
       <Row>
         <Col xs={6}>
           {/*------------- Purchasable checbox ------------- */}
           <FastField name={'sellable'} type="checkbox">
-            {({ field: { onChange, onBlur, name, checked } }) => (
+            {({ field }) => (
               <FormGroup inline={true} className={'form-group--sellable'}>
                 <Checkbox
                   inline={true}
@@ -38,17 +37,15 @@ function ItemFormBody({ accountsList }) {
                     </h3>
                   }
                   name={'sellable'}
-                  checked={!!checked}
+                  {...field}
-                  onChange={onChange}
-                  onBlur={onBlur}
                 />
               </FormGroup>
             )}
           </FastField>
 
           {/*------------- Selling price ------------- */}
-          <FastField name={'sell_price'}>
+          <Field name={'sell_price'}>
-            {({ form, field, field: { value }, meta: { error, touched } }) => (
+            {({ form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'selling_price'} />}
                 className={'form-group--sell_price'}
@@ -56,19 +53,21 @@ function ItemFormBody({ accountsList }) {
                 helperText={<ErrorMessage name={'sell_price'} />}
                 inline={true}
               >
+                <ControlGroup>
+                  <InputPrependText text={baseCurrency} />
                   <MoneyInputGroup
                     value={value}
                     prefix={'$'}
-                  inputGroupProps={{
+                    inputGroupProps={{ fill: true }}
-                    medium: true,
-                    ...field,
-                  }}
                     disabled={!form.values.sellable}
-                  onChange={field.onChange}
+                    onChange={(evt, value) => {
+                      form.setFieldValue('sell_price', value);
+                    }}
                   />
+                </ControlGroup>
               </FormGroup>
             )}
-          </FastField>
+          </Field>
 
           {/*------------- Selling account ------------- */}
           <FastField name={'sell_account_id'}>
@@ -102,8 +101,8 @@ function ItemFormBody({ accountsList }) {
 
         <Col xs={6}>
           {/*------------- Sellable checkbox ------------- */}
-          <FastField name={'purchasable'}>
+          <FastField name={'purchasable'} type={'checkbox'}>
-            {({ form, field: { value, onChange }, meta: { error, touched } }) => (
+            {({ field }) => (
               <FormGroup inline={true} className={'form-group--purchasable'}>
                 <Checkbox
                   inline={true}
@@ -112,15 +111,14 @@ function ItemFormBody({ accountsList }) {
                       <T id={'i_purchase_this_item'} />
                     </h3>
                   }
-                  checked={value}
+                  {...field}
-                  onChange={onChange}
                 />
               </FormGroup>
             )}
           </FastField>
 
           {/*------------- Cost price ------------- */}
-          <FastField name={'cost_price'}>
+          <Field name={'cost_price'}>
             {({ field, form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'cost_price'} />}
@@ -129,18 +127,21 @@ function ItemFormBody({ accountsList }) {
                 helperText={<ErrorMessage name="cost_price" />}
                 inline={true}
               >
+                <ControlGroup>
+                  <InputPrependText text={baseCurrency} />
                   <MoneyInputGroup
                     value={value}
                     prefix={'$'}
-                  inputGroupProps={{
+                    inputGroupProps={{ medium: true }}
-                    medium: true,
-                    ...field,
-                  }}
                     disabled={!form.values.purchasable}
+                    onChange={(evt, unformattedValue) => {
+                      form.setFieldValue('cost_price', unformattedValue);
+                    }}
                   />
+                </ControlGroup>
               </FormGroup>
             )}
-          </FastField>
+          </Field>
 
           {/*------------- Cost account ------------- */}
           <FastField name={'cost_account_id'}>
@@ -180,4 +181,7 @@ export default compose(
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
+  withSettings(({ organization }) => ({
+    baseCurrency: 'USD',
+  })),
 )(ItemFormBody);

client/src/containers/Sales/Invoice/InvoiceFormHeader.js

@@ -8,7 +8,6 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
-import moment from 'moment';
 import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';

client/src/style/objects/form.scss

@@ -98,6 +98,45 @@ label.bp3-label{
   }
 }
 
+.input-group-prepend{
+
+  .input-group-text{
+    display: flex;
+    align-items: center;
+    padding: .375rem .75rem;
+    margin-bottom: 0;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    text-align: center;
+    white-space: nowrap;
+    background-color: #e9ecef;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    height: 100%;
+
+    .bp3-form-group &{
+      padding: .25rem .5rem;
+      font-size: .875rem;
+      line-height: 1.5;
+      border-radius: .2rem;
+    }
+  }
+}
+
+.bp3-form-group{
+
+  .bp3-input-group{
+    flex: 1 1 auto;
+  }
+  .bp3-control-group{
+    > .input-group-prepend:first-child .input-group-text{
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  } 
+}
 
 .#{$ns}-html-select{
   .bp3-icon-double-caret-vertical{