feat(Sales & Purchases ): add currency tag.

src/components/Currencies/BaseCurrency.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CurrencyTag } from 'components';
+
+/**
+ * base currecncy.
+ * @returns
+ */
+export function BaseCurrency({ currency }) {
+  return <CurrencyTag>{currency}</CurrencyTag>;
+}

src/components/Currencies/index.js

@@ -1 +1,2 @@
-export * from './CurrencySelect'
+export * from './CurrencySelect';
+export * from './BaseCurrency';

src/components/Tags/CurrencyTag.js

@@ -9,3 +9,13 @@ export const CurrencyTag = styled.span`
   line-height: 1;
   margin-left: 4px;
 `;
+
+export const BaseCurrencyRoot = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  margin-left: 4px;
+  > span {
+    background: #5c7080;
+  }
+`;

src/components/index.js

@@ -55,7 +55,6 @@ import AvaterCell from './AvaterCell';
 import { ItemsMultiSelect } from './Items';
 import MoreMenuItems from './MoreMenutItems';
 import CustomSelectList from './CustomSelectList';
-import BaseCurrency from './BaseCurrency';
 
 export * from './Dialog';
 export * from './Menu';
@@ -168,7 +167,6 @@ export {
   MoneyFieldCell,
   ItemsMultiSelect,
   AvaterCell,
-  BaseCurrency,
   MoreMenuItems,
   CustomSelectList,
 };

src/containers/Purchases/Bills/BillForm/BillFormCurrencyTag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from 'components';
+import { useBillFormContext } from './BillFormProvider';
+
+/**
+ * Bill form currnecy tag.
+ * @returns
+ */
+export default function BillFormCurrencyTag() {
+  const { isForeignVendor, selectVendor } = useBillFormContext();
+
+  if (!isForeignVendor) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectVendor?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js

@@ -1,9 +1,15 @@
 import React from 'react';
-import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'components';
 import { FastField, ErrorMessage } from 'formik';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
 import { CLASSES } from 'common/classes';
 import {
@@ -16,6 +22,7 @@ import {
 import { vendorsFieldShouldUpdate } from './utils';
 
 import { useBillFormContext } from './BillFormProvider';
+import BillFormCurrencyTag from './BillFormCurrencyTag';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import {
   momentFormatter,
@@ -49,17 +56,20 @@ function BillFormHeader() {
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'vendor_id'} />}
           >
-            <VendorSelectField
+            <ControlVendorGroup>
-              contacts={vendors}
+              <VendorSelectField
-              selectedContactId={value}
+                contacts={vendors}
-              defaultSelectText={<T id={'select_vender_account'} />}
+                selectedContactId={value}
-              onContactSelected={(contact) => {
+                defaultSelectText={<T id={'select_vender_account'} />}
-                form.setFieldValue('vendor_id', contact.id);
+                onContactSelected={(contact) => {
-                setSelectVendor(contact);
+                  form.setFieldValue('vendor_id', contact.id);
-              }}
+                  setSelectVendor(contact);
-              popoverFill={true}
+                }}
-              allowCreate={true}
+                popoverFill={true}
-            />
+                allowCreate={true}
+              />
+              <BillFormCurrencyTag />
+            </ControlVendorGroup>
           </FormGroup>
         )}
       </FastField>
@@ -161,3 +171,9 @@ function BillFormHeader() {
 }
 
 export default compose(withDialogActions)(BillFormHeader);
+
+const ControlVendorGroup = styled(ControlGroup)`
+  display: flex;
+  align-items: center;
+  transform: none;
+`;

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormCurrencyTag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from 'components';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+
+/**
+ * Vendor credit note currency tag.
+ * @returns
+ */
+export default function VendorCreditNoteFormCurrencyTag() {
+  const { isForeignVendor, selectVendor } = useVendorCreditNoteFormContext();
+
+  if (!isForeignVendor) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectVendor?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js

@@ -9,6 +9,8 @@ import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
 import {
   VendorSelectField,
   FieldRequiredHint,
@@ -24,7 +26,7 @@ import {
 } from './utils';
 
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
-
+import VendorCreditNoteFormCurrencyTag from './VendorCreditNoteFormCurrencyTag';
 import {
   momentFormatter,
   compose,
@@ -93,17 +95,20 @@ function VendorCreditNoteFormHeaderFields({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'vendor_id'} />}
           >
-            <VendorSelectField
+            <ControlVendorGroup>
-              contacts={vendors}
+              <VendorSelectField
-              selectedContactId={value}
+                contacts={vendors}
-              defaultSelectText={<T id={'select_vender_account'} />}
+                selectedContactId={value}
-              onContactSelected={(contact) => {
+                defaultSelectText={<T id={'select_vender_account'} />}
-                form.setFieldValue('vendor_id', contact.id);
+                onContactSelected={(contact) => {
-                setSelectVendor(contact);
+                  form.setFieldValue('vendor_id', contact.id);
-              }}
+                  setSelectVendor(contact);
-              popoverFill={true}
+                }}
-              allowCreate={true}
+                popoverFill={true}
-            />
+                allowCreate={true}
+              />
+              <VendorCreditNoteFormCurrencyTag />
+            </ControlVendorGroup>
           </FormGroup>
         )}
       </FastField>
@@ -210,3 +215,9 @@ export default compose(
     vendorcreditNumberPrefix: vendorsCreditNoteSetting?.numberPrefix,
   })),
 )(VendorCreditNoteFormHeaderFields);
+
+const ControlVendorGroup = styled(ControlGroup)`
+  display: flex;
+  align-items: center;
+  transform: none;
+`;

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormCurrencyTag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from 'components';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+
+/**
+ * Payment made form currency tag.
+ * @returns
+ */
+export default function PaymentMadeFormCurrencyTag() {
+  const { isForeignVendor, selectVendor } = usePaymentMadeFormContext();
+
+  if (!isForeignVendor) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectVendor?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js

@@ -13,6 +13,8 @@ import { FormattedMessage as T } from 'components';
 import { toSafeInteger } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import styled from 'styled-components';
+
 import {
   AccountsSelectList,
   VendorSelectField,
@@ -28,6 +30,7 @@ import {
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
+import PaymentMadeFormCurrencyTag from './PaymentMadeFormCurrencyTag';
 import {
   momentFormatter,
   tansformDateValue,
@@ -98,19 +101,22 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'vendor_id'} />}
           >
-            <VendorSelectField
+            <ControlVendorGroup>
-              contacts={vendors}
+              <VendorSelectField
-              selectedContactId={value}
+                contacts={vendors}
-              defaultSelectText={<T id={'select_vender_account'} />}
+                selectedContactId={value}
-              onContactSelected={(contact) => {
+                defaultSelectText={<T id={'select_vender_account'} />}
-                form.setFieldValue('vendor_id', contact.id);
+                onContactSelected={(contact) => {
-                setPaymentVendorId(contact.id);
+                  form.setFieldValue('vendor_id', contact.id);
-                setSelectVendor(contact);
+                  setPaymentVendorId(contact.id);
-              }}
+                  setSelectVendor(contact);
-              disabled={!isNewMode}
+                }}
-              popoverFill={true}
+                disabled={!isNewMode}
-              allowCreate={true}
+                popoverFill={true}
-            />
+                allowCreate={true}
+              />
+              <PaymentMadeFormCurrencyTag />
+            </ControlVendorGroup>
           </FormGroup>
         )}
       </FastField>
@@ -265,3 +271,9 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
 }
 
 export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);
+
+const ControlVendorGroup = styled(ControlGroup)`
+  display: flex;
+  align-items: center;
+  transform: none;
+`;

src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js

@@ -9,6 +9,7 @@ import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
+import styled from 'styled-components';
 import {
   CustomerSelectField,
   FieldRequiredHint,
@@ -26,7 +27,7 @@ import {
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-
+import CreditNotetFormCurrencyTag from './CreditNotetFormCurrencyTag';
 import {
   momentFormatter,
   compose,
@@ -94,17 +95,20 @@ function CreditNoteFormHeaderFields({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <CustomerSelectField
+            <ControlCustomerGroup>
-              contacts={customers}
+              <CustomerSelectField
-              selectedContactId={value}
+                contacts={customers}
-              defaultSelectText={<T id={'select_customer_account'} />}
+                selectedContactId={value}
-              onContactSelected={(customer) => {
+                defaultSelectText={<T id={'select_customer_account'} />}
-                form.setFieldValue('customer_id', customer.id);
+                onContactSelected={(customer) => {
-                setSelectCustomer(customer);
+                  form.setFieldValue('customer_id', customer.id);
-              }}
+                  setSelectCustomer(customer);
-              popoverFill={true}
+                }}
-              allowCreate={true}
+                popoverFill={true}
-            />
+                allowCreate={true}
+              />
+              <CreditNotetFormCurrencyTag />
+            </ControlCustomerGroup>
           </FormGroup>
         )}
       </FastField>
@@ -207,3 +211,9 @@ export default compose(
     creditNumberPrefix: creditNoteSettings?.numberPrefix,
   })),
 )(CreditNoteFormHeaderFields);
+
+const ControlCustomerGroup = styled(ControlGroup)`
+  display: flex;
+  align-items: center;
+  transform: none;
+`;

src/containers/Sales/CreditNotes/CreditNoteForm/CreditNotetFormCurrencyTag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from 'components';
+import { useCreditNoteFormContext } from './CreditNoteFormProvider';
+
+/**
+ * Credit note from currency tag.
+ * @returns
+ */
+export default function CreditNotetFormCurrencyTag() {
+  const { isForeignCustomer, selectCustomer } = useCreditNoteFormContext();
+
+  if (!isForeignCustomer) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectCustomer?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

src/containers/Sales/Estimates/EstimateForm/EstimateFormCurrencyTag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from 'components';
+import { useEstimateFormContext } from './EstimateFormProvider';
+
+/**
+ * Estimate form currency tag.
+ * @returns
+ */
+export default function EstimateFromCurrencyTag() {
+  const { isForeignCustomer, selectCustomer } = useEstimateFormContext();
+
+  if (!isForeignCustomer) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectCustomer?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js

@@ -8,6 +8,8 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'components';
 import { FastField, Field, ErrorMessage } from 'formik';
+import styled from 'styled-components';
+
 import {
   momentFormatter,
   compose,
@@ -29,7 +31,7 @@ import {
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
-
+import EstimateFormCurrencyTag from './EstimateFormCurrencyTag';
 import { useObserveEstimateNoSettings } from './utils';
 import { useEstimateFormContext } from './EstimateFormProvider';
 
@@ -85,18 +87,21 @@ function EstimateFormHeader({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <CustomerSelectField
+            <ControlCustomerGroup>
-              contacts={customers}
+              <CustomerSelectField
-              selectedContactId={value}
+                contacts={customers}
-              defaultSelectText={<T id={'select_customer_account'} />}
+                selectedContactId={value}
-              onContactSelected={(customer) => {
+                defaultSelectText={<T id={'select_customer_account'} />}
-                form.setFieldValue('customer_id', customer.id);
+                onContactSelected={(customer) => {
-                setSelectCustomer(customer);
+                  form.setFieldValue('customer_id', customer.id);
-              }}
+                  setSelectCustomer(customer);
-              popoverFill={true}
+                }}
-              intent={inputIntent({ error, touched })}
+                popoverFill={true}
-              allowCreate={true}
+                intent={inputIntent({ error, touched })}
-            />
+                allowCreate={true}
+              />
+              <EstimateFormCurrencyTag />
+            </ControlCustomerGroup>
           </FormGroup>
         )}
       </FastField>
@@ -229,3 +234,9 @@ export default compose(
     estimateAutoIncrement: estimatesSettings?.autoIncrement,
   })),
 )(EstimateFormHeader);
+
+const ControlCustomerGroup = styled(ControlGroup)`
+  display: flex;
+  align-items: center;
+  transform: none;
+`;

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormCurrencyTag.js

@@ -1,32 +1,20 @@
 import React from 'react';
-import styled from 'styled-components';
+import { BaseCurrency, BaseCurrencyRoot } from 'components';
-
-import { BaseCurrency } from 'components';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 
 /**
  * Invoice form currency tag.
  */
 export default function InvoiceFormCurrencyTag() {
-  const { isForeignCustomer } = useInvoiceFormContext();
+  const { isForeignCustomer, selectCustomer } = useInvoiceFormContext();
 
   if (!isForeignCustomer) {
     return null;
   }
 
   return (
-    <BaseCurrencyTag>
+    <BaseCurrencyRoot>
-      <BaseCurrency />
+      <BaseCurrency currency={selectCustomer?.currency_code} />
-    </BaseCurrencyTag>
+    </BaseCurrencyRoot>
   );
 }
-
-const BaseCurrencyTag = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 10px;
-  margin-left: 4px;
-  span {
-    background: #5c7080;
-  }
-`;

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js

@@ -57,7 +57,7 @@ function InvoiceFormHeaderFields({
   invoiceNextNumber,
 }) {
   // Invoice form context.
-  const { customers, isForeignCustomer, setSelectCustomer } =
+  const { customers, isForeignCustomer,selectCustomer ,setSelectCustomer } =
     useInvoiceFormContext();
 
   // Handle invoice number changing.
@@ -115,7 +115,7 @@ function InvoiceFormHeaderFields({
                 popoverFill={true}
                 allowCreate={true}
               />
-              <InvoiceCurrencyTag isForeignCustomer={isForeignCustomer} />
+              <InvoiceCurrencyTag />
             </ControlCustomerGroup>
           </FormGroup>
         )}

src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormCurrencyTag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from 'components';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+
+/**
+ * Payment reecevie form currnecy tag.
+ * @returns
+ */
+export default function PaymentReceiveFormCurrencyTag() {
+  const { isForeignCustomer, selectCustomer } = usePaymentReceiveFormContext();
+
+  if (!isForeignCustomer) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectCustomer?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js

@@ -13,6 +13,7 @@ import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
 import { useAutofocus } from 'hooks';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
+import styled from 'styled-components';
 import {
   compose,
   safeSumBy,
@@ -35,6 +36,7 @@ import {
 } from 'components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
+import PaymentReceiveFormCurrencyTag from './PaymentReceiveFormCurrencyTag';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -142,22 +144,25 @@ function PaymentReceiveHeaderFields({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <CustomerSelectField
+            <ControlCustomerGroup>
-              contacts={customers}
+              <CustomerSelectField
-              selectedContactId={value}
+                contacts={customers}
-              defaultSelectText={<T id={'select_customer_account'} />}
+                selectedContactId={value}
-              onContactSelected={(customer) => {
+                defaultSelectText={<T id={'select_customer_account'} />}
-                form.setFieldValue('customer_id', customer.id);
+                onContactSelected={(customer) => {
-                form.setFieldValue('full_amount', '');
+                  form.setFieldValue('customer_id', customer.id);
-                setSelectCustomer(customer);
+                  form.setFieldValue('full_amount', '');
-              }}
+                  setSelectCustomer(customer);
-              popoverFill={true}
+                }}
-              disabled={!isNewMode}
+                popoverFill={true}
-              buttonProps={{
+                disabled={!isNewMode}
-                elementRef: (ref) => (customerFieldRef.current = ref),
+                buttonProps={{
-              }}
+                  elementRef: (ref) => (customerFieldRef.current = ref),
-              allowCreate={true}
+                }}
-            />
+                allowCreate={true}
+              />
+              <PaymentReceiveFormCurrencyTag />
+            </ControlCustomerGroup>
           </FormGroup>
         )}
       </FastField>
@@ -344,3 +349,9 @@ export default compose(
   withDialogActions,
   withCurrentOrganization(),
 )(PaymentReceiveHeaderFields);
+
+const ControlCustomerGroup = styled(ControlGroup)`
+  display: flex;
+  align-items: center;
+  transform: none;
+`;

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormCurrencyTag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from 'components';
+import { useReceiptFormContext } from './ReceiptFormProvider';
+
+/**
+ * Receipt form currency tag.
+ * @returns
+ */
+export default function ReceiptFormCurrencyTag() {
+  const { isForeignCustomer, selectCustomer } = useReceiptFormContext();
+
+  if (!isForeignCustomer) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectCustomer?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js

@@ -10,6 +10,8 @@ import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { FastField, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
+import styled from 'styled-components';
+
 import {
   AccountsSelectList,
   CustomerSelectField,
@@ -29,6 +31,7 @@ import {
   handleDateChange,
   inputIntent,
 } from 'utils';
+import ReceiptFormCurrencyTag from './ReceiptFormCurrencyTag';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import {
   accountsFieldShouldUpdate,
@@ -91,17 +94,20 @@ function ReceiptFormHeader({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <CustomerSelectField
+            <ControlCustomerGroup>
-              contacts={customers}
+              <CustomerSelectField
-              selectedContactId={value}
+                contacts={customers}
-              defaultSelectText={<T id={'select_customer_account'} />}
+                selectedContactId={value}
-              onContactSelected={(customer) => {
+                defaultSelectText={<T id={'select_customer_account'} />}
-                form.setFieldValue('customer_id', customer.id);
+                onContactSelected={(customer) => {
-                setSelectCustomer(customer);
+                  form.setFieldValue('customer_id', customer.id);
-              }}
+                  setSelectCustomer(customer);
-              popoverFill={true}
+                }}
-              allowCreate={true}
+                popoverFill={true}
-            />
+                allowCreate={true}
+              />
+              <ReceiptFormCurrencyTag />
+            </ControlCustomerGroup>
           </FormGroup>
         )}
       </FastField>
@@ -242,3 +248,9 @@ export default compose(
     receiptNumberPrefix: receiptSettings?.numberPrefix,
   })),
 )(ReceiptFormHeader);
+
+const ControlCustomerGroup = styled(ControlGroup)`
+  display: flex;
+  align-items: center;
+  transform: none;
+`;