feat(Sales & Purchases ): add exchange rate input.

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

@@ -6,7 +6,13 @@ import { FastField, ErrorMessage } from 'formik';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
-import { VendorSelectField, FieldRequiredHint, Icon } from 'components';
+import {
+  VendorSelectField,
+  FieldRequiredHint,
+  Icon,
+  ExchangeRateInputGroup,
+  If,
+} from 'components';
 import { vendorsFieldShouldUpdate } from './utils';
 
 import { useBillFormContext } from './BillFormProvider';
@@ -24,7 +30,7 @@ import {
  */
 function BillFormHeader() {
   // Bill form context.
-  const { vendors } = useBillFormContext();
+  const { vendors, isForeignVendor, setSelectVendor } = useBillFormContext();
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -49,6 +55,7 @@ function BillFormHeader() {
               defaultSelectText={<T id={'select_vender_account'} />}
               onContactSelected={(contact) => {
                 form.setFieldValue('vendor_id', contact.id);
+                setSelectVendor(contact);
               }}
               popoverFill={true}
               allowCreate={true}
@@ -57,6 +64,16 @@ function BillFormHeader() {
         )}
       </FastField>
 
+      {/* ----------- Exchange rate ----------- */}
+      <If condition={isForeignVendor}>
+        <ExchangeRateInputGroup
+          fromCurrency={'USD'}
+          toCurrency={'LYD'}
+          name={'exchange_rate'}
+          formGroupProps={{ label: ' ', inline: true }}
+        />
+      </If>
+
       {/* ------- Bill date ------- */}
       <FastField name={'bill_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (

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

@@ -4,15 +4,22 @@ import { useParams } from 'react-router-dom';
 import BillForm from './BillForm';
 import { BillFormProvider } from './BillFormProvider';
 
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
+
 import 'style/pages/Bills/PageForm.scss';
 
-export default function BillFormPage() {
+function BillFormPage({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
   const { id } = useParams();
   const billId = parseInt(id, 10);
 
   return (
-    <BillFormProvider billId={billId}>
+    <BillFormProvider billId={billId} baseCurrency={base_currency}>
       <BillForm />
     </BillFormProvider>
   );
-}
+}
+export default compose(withCurrentOrganization())(BillFormPage);

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

@@ -1,4 +1,6 @@
 import React, { createContext, useState } from 'react';
+import {isEqual, isUndefined } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useAccounts,
@@ -35,7 +37,7 @@ const stringifiedFilterRoles = JSON.stringify([
 /**
  * Bill form provider.
  */
-function BillFormProvider({ billId, ...props }) {
+function BillFormProvider({ billId, baseCurrency, ...props }) {
   // Handle fetch accounts.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
@@ -78,6 +80,7 @@ function BillFormProvider({ billId, ...props }) {
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = useState({});
+  const [selectVendor, setSelectVendor] = React.useState(null);
 
   // Create and edit bills mutations.
   const { mutateAsync: createBillMutate } = useCreateBill();
@@ -88,6 +91,11 @@ function BillFormProvider({ billId, ...props }) {
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
+  // Determines whether the foreign vendor.
+  const isForeignVendor =
+    !isEqual(selectVendor?.currency_code, baseCurrency) &&
+    !isUndefined(selectVendor?.currency_code);
+
   const provider = {
     accounts,
     vendors,
@@ -95,6 +103,9 @@ function BillFormProvider({ billId, ...props }) {
     bill,
     warehouses,
     branches,
+    baseCurrency,
+    selectVendor,
+    setSelectVendor,
     submitPayload,
     isNewMode,
 
@@ -106,6 +117,7 @@ function BillFormProvider({ billId, ...props }) {
     isFeatureLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
+    isForeignVendor,
 
     createBillMutate,
     editBillMutate,

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

@@ -13,7 +13,9 @@ import {
   VendorSelectField,
   FieldRequiredHint,
   InputPrependButton,
+  ExchangeRateInputGroup,
   Icon,
+  If,
   FormattedMessage as T,
 } from 'components';
 import {
@@ -47,7 +49,8 @@ function VendorCreditNoteFormHeaderFields({
   vendorcreditNextNumber,
 }) {
   // Vendor Credit form context.
-  const { vendors } = useVendorCreditNoteFormContext();
+  const { vendors, isForeignVendor, setSelectVendor } =
+    useVendorCreditNoteFormContext();
 
   // Handle vendor credit number changing.
   const handleVendorCreditNumberChange = () => {
@@ -96,6 +99,7 @@ function VendorCreditNoteFormHeaderFields({
               defaultSelectText={<T id={'select_vender_account'} />}
               onContactSelected={(contact) => {
                 form.setFieldValue('vendor_id', contact.id);
+                setSelectVendor(contact);
               }}
               popoverFill={true}
               allowCreate={true}
@@ -104,6 +108,16 @@ function VendorCreditNoteFormHeaderFields({
         )}
       </FastField>
 
+      {/* ----------- Exchange rate ----------- */}
+      <If condition={isForeignVendor}>
+        <ExchangeRateInputGroup
+          fromCurrency={'USD'}
+          toCurrency={'LYD'}
+          name={'exchange_rate'}
+          formGroupProps={{ label: ' ', inline: true }}
+        />
+      </If>
+
       {/* ------- Vendor Credit date ------- */}
       <FastField name={'vendor_credit_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (

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

@@ -6,16 +6,26 @@ import '../../../../style/pages/VendorsCreditNote/PageForm.scss';
 import VendorCreditNoteForm from './VendorCreditNoteForm';
 import { VendorCreditNoteFormProvider } from './VendorCreditNoteFormProvider';
 
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
+
 /**
  * Vendor Credit note form pages.
  */
-export default function VendorCreditNoteFormPage() {
+function VendorCreditNoteFormPage({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
   const { id } = useParams();
   const idAsInteger = parseInt(id, 10);
 
   return (
-    <VendorCreditNoteFormProvider vendorCreditId={idAsInteger}>
+    <VendorCreditNoteFormProvider
+      vendorCreditId={idAsInteger}
+      baseCurrency={base_currency}
+    >
       <VendorCreditNoteForm />
     </VendorCreditNoteFormProvider>
   );
 }
+export default compose(withCurrentOrganization())(VendorCreditNoteFormPage);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { isEmpty, pick } from 'lodash';
+import { isEmpty, pick, isEqual, isUndefined } from 'lodash';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { transformToEditForm } from './utils';
 import {
@@ -20,7 +20,11 @@ const VendorCreditNoteFormContext = React.createContext();
 /**
  * Vendor Credit note data provider.
  */
-function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
+function VendorCreditNoteFormProvider({
+  vendorCreditId,
+  baseCurrency,
+  ...props
+}) {
   const { state } = useLocation();
 
   const billId = state?.billId;
@@ -69,6 +73,7 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState();
+  const [selectVendor, setSelectVendor] = React.useState(null);
 
   // Create and edit vendor credit mutations.
   const { mutateAsync: createVendorCreditMutate } = useCreateVendorCredit();
@@ -80,6 +85,11 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
+  // Determines whether the foreign vendor.
+  const isForeignVendor =
+    !isEqual(selectVendor?.currency_code, baseCurrency) &&
+    !isUndefined(selectVendor?.currency_code);
+
   const newVendorCredit = !isEmpty(bill)
     ? transformToEditForm({
         ...pick(bill, ['vendor_id', 'entries']),
@@ -93,6 +103,9 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
     vendorCredit,
     warehouses,
     branches,
+    baseCurrency,
+    selectVendor,
+    setSelectVendor,
     submitPayload,
     isNewMode,
     newVendorCredit,
@@ -101,7 +114,8 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
     isFeatureLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
-    
+    isForeignVendor,
+
     createVendorCreditMutate,
     editVendorCreditMutate,
     setSubmitPayload,

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

@@ -20,8 +20,10 @@ import {
   InputPrependText,
   Money,
   Hint,
+  If,
   Icon,
   MoneyInputGroup,
+  ExchangeRateInputGroup,
 } from 'components';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
@@ -49,8 +51,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
   } = useFormikContext();
 
   // Payment made form context.
-  const { vendors, accounts, isNewMode, setPaymentVendorId } =
+  const {
-    usePaymentMadeFormContext();
+    vendors,
+    accounts,
+    isNewMode,
+    setPaymentVendorId,
+    isForeignVendor,
+    setSelectVendor,
+  } = usePaymentMadeFormContext();
 
   // Sumation of payable full-amount.
   const payableFullAmount = useMemo(
@@ -97,6 +105,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
               onContactSelected={(contact) => {
                 form.setFieldValue('vendor_id', contact.id);
                 setPaymentVendorId(contact.id);
+                setSelectVendor(contact);
               }}
               disabled={!isNewMode}
               popoverFill={true}
@@ -106,6 +115,16 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
         )}
       </FastField>
 
+      {/* ----------- Exchange rate ----------- */}
+      <If condition={isForeignVendor}>
+        <ExchangeRateInputGroup
+          fromCurrency={'USD'}
+          toCurrency={'LYD'}
+          name={'exchange_rate'}
+          formGroupProps={{ label: ' ', inline: true }}
+        />
+      </If>
+
       {/* ------------ Payment date ------------ */}
       <FastField name={'payment_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (

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

@@ -4,17 +4,27 @@ import { useParams } from 'react-router-dom';
 import PaymentMadeForm from './PaymentMadeForm';
 import { PaymentMadeFormProvider } from './PaymentMadeFormProvider';
 
-import 'style/pages/PaymentMade/PageForm.scss'
+import 'style/pages/PaymentMade/PageForm.scss';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
 
 /**
  * Payment made - Page form.
  */
-export default function PaymentMadeFormPage() {
+function PaymentMadeFormPage({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
   const { id: paymentMadeId } = useParams();
- 
+
   return (
-    <PaymentMadeFormProvider paymentMadeId={paymentMadeId}>
+    <PaymentMadeFormProvider
-      <PaymentMadeForm /> 
+      paymentMadeId={paymentMadeId}
+      baseCurrency={base_currency}
+    >
+      <PaymentMadeForm />
     </PaymentMadeFormProvider>
   );
-}
+}
+export default compose(withCurrentOrganization())(PaymentMadeFormPage);

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

@@ -1,4 +1,5 @@
 import React, { createContext, useContext } from 'react';
+import { isEqual, isUndefined } from 'lodash';
 import {
   useAccounts,
   useVendors,
@@ -17,9 +18,10 @@ const PaymentMadeFormContext = createContext();
 /**
  * Payment made form provider.
  */
-function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
+function PaymentMadeFormProvider({ paymentMadeId, baseCurrency, ...props }) {
   const [submitPayload, setSubmitPayload] = React.useState({});
   const [paymentVendorId, setPaymentVendorId] = React.useState(null);
+  const [selectVendor, setSelectVendor] = React.useState(null);
 
   // Handle fetch accounts data.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
@@ -64,6 +66,11 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
 
   const isFeatureLoading = isBranchesLoading;
 
+  // Determines whether the foreign vendor.
+  const isForeignVendor =
+    !isEqual(selectVendor?.currency_code, baseCurrency) &&
+    !isUndefined(selectVendor?.currency_code);
+
   // Provider payload.
   const provider = {
     paymentMadeId,
@@ -74,6 +81,9 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
     items,
     branches,
     submitPayload,
+    baseCurrency,
+    selectVendor,
+    setSelectVendor,
     paymentVendorId,
 
     isNewMode,
@@ -85,6 +95,7 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
     isPaymentLoading,
     isFeatureLoading,
     isBranchesSuccess,
+    isForeignVendor,
 
     createPaymentMadeMutate,
     editPaymentMadeMutate,

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

@@ -14,7 +14,9 @@ import {
   FieldRequiredHint,
   InputPrependButton,
   Icon,
+  If,
   FormattedMessage as T,
+  ExchangeRateInputGroup,
 } from 'components';
 import {
   customerNameFieldShouldUpdate,
@@ -46,7 +48,8 @@ function CreditNoteFormHeaderFields({
   creditNextNumber,
 }) {
   // Credit note form context.
-  const { customers } = useCreditNoteFormContext();
+  const { customers, isForeignCustomer, baseCurrency, setSelectCustomer } =
+    useCreditNoteFormContext();
 
   // Handle credit number changing.
   const handleCreditNumberChange = () => {
@@ -97,6 +100,7 @@ function CreditNoteFormHeaderFields({
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(customer) => {
                 form.setFieldValue('customer_id', customer.id);
+                setSelectCustomer(customer);
               }}
               popoverFill={true}
               allowCreate={true}
@@ -104,6 +108,17 @@ function CreditNoteFormHeaderFields({
           </FormGroup>
         )}
       </FastField>
+
+      {/* ----------- Exchange rate ----------- */}
+      <If condition={isForeignCustomer}>
+        <ExchangeRateInputGroup
+          fromCurrency={'USD'}
+          toCurrency={'LYD'}
+          name={'exchange_rate'}
+          formGroupProps={{ label: ' ', inline: true }}
+        />
+      </If>
+
       {/* ----------- Credit note date ----------- */}
       <FastField name={'credit_note_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (

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

@@ -5,17 +5,27 @@ import '../../../../style/pages/CreditNote/PageForm.scss';
 
 import CreditNoteForm from './CreditNoteForm';
 import { CreditNoteFormProvider } from './CreditNoteFormProvider';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
 
 /**
  * Credit note form page.
  */
-export default function CreditNoteFormPage() {
+function CreditNoteFormPage({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
   const { id } = useParams();
   const idAsInteger = parseInt(id, 10);
 
   return (
-    <CreditNoteFormProvider creditNoteId={idAsInteger}>
+    <CreditNoteFormProvider
+      creditNoteId={idAsInteger}
+      baseCurrency={base_currency}
+    >
       <CreditNoteForm />
     </CreditNoteFormProvider>
   );
 }
+
+export default compose(withCurrentOrganization())(CreditNoteFormPage);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { isEmpty, pick } from 'lodash';
+import { isEmpty, pick, isEqual, isUndefined } from 'lodash';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { transformToEditForm } from './utils';
 
@@ -21,7 +21,7 @@ const CreditNoteFormContext = React.createContext();
 /**
  * Credit note data provider.
  */
-function CreditNoteFormProvider({ creditNoteId, ...props }) {
+function CreditNoteFormProvider({ creditNoteId, baseCurrency, ...props }) {
   const { state } = useLocation();
   const invoiceId = state?.invoiceId;
 
@@ -75,6 +75,8 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState();
 
+  const [selectCustomer, setSelectCustomer] = React.useState(null);
+
   // Determines whether the form in new mode.
   const isNewMode = !creditNoteId;
 
@@ -87,6 +89,11 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
       })
     : [];
 
+  // Determines whether the foreign customer.
+  const isForeignCustomer =
+    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
+    !isUndefined(selectCustomer?.currency_code);
+
   // Provider payload.
   const provider = {
     items,
@@ -95,15 +102,19 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     branches,
     warehouses,
     submitPayload,
+    baseCurrency,
+    selectCustomer,
+    setSelectCustomer,
     isNewMode,
     newCreditNote,
+    isForeignCustomer,
 
     isItemsLoading,
     isCustomersLoading,
     isFeatureLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
-    
+
     createCreditNoteMutate,
     editCreditNoteMutate,
     setSubmitPayload,

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

@@ -21,8 +21,10 @@ import { CLASSES } from 'common/classes';
 import {
   CustomerSelectField,
   FieldRequiredHint,
+  If,
   Icon,
   InputPrependButton,
+  ExchangeRateInputGroup,
 } from 'components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -43,7 +45,8 @@ function EstimateFormHeader({
   estimateNumberPrefix,
   estimateNextNumber,
 }) {
-  const { customers } = useEstimateFormContext();
+  const { customers, isForeignCustomer, baseCurrency, setSelectCustomer } =
+    useEstimateFormContext();
 
   const handleEstimateNumberBtnClick = () => {
     openDialog('estimate-number-form', {});
@@ -88,6 +91,7 @@ function EstimateFormHeader({
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(customer) => {
                 form.setFieldValue('customer_id', customer.id);
+                setSelectCustomer(customer);
               }}
               popoverFill={true}
               intent={inputIntent({ error, touched })}
@@ -97,6 +101,16 @@ function EstimateFormHeader({
         )}
       </FastField>
 
+      {/* ----------- Exchange rate ----------- */}
+      <If condition={isForeignCustomer}>
+        <ExchangeRateInputGroup
+          fromCurrency={'USD'}
+          toCurrency={'LYD'}
+          name={'exchange_rate'}
+          formGroupProps={{ label: ' ', inline: true }}
+        />
+      </If>
+
       {/* ----------- Estimate date ----------- */}
       <FastField name={'estimate_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (

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

@@ -1,21 +1,27 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
- 
+
 import 'style/pages/SaleEstimate/PageForm.scss';
 
 import EstimateForm from './EstimateForm';
 import { EstimateFormProvider } from './EstimateFormProvider';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
 
 /**
  * Estimate form page.
  */
-export default function EstimateFormPage() {
+function EstimateFormPage({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
   const { id } = useParams();
   const idInteger = parseInt(id, 10);
 
   return (
-    <EstimateFormProvider estimateId={idInteger}>
+    <EstimateFormProvider estimateId={idInteger} baseCurrency={base_currency}>
       <EstimateForm />
     </EstimateFormProvider>
   );
-}
+}
+export default compose(withCurrentOrganization())(EstimateFormPage);

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

@@ -1,4 +1,6 @@
 import React, { createContext, useContext } from 'react';
+import { isEqual, isUndefined } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useEstimate,
@@ -17,7 +19,7 @@ const EstimateFormContext = createContext();
 /**
  * Estimate form provider.
  */
-function EstimateFormProvider({ estimateId, ...props }) {
+function EstimateFormProvider({ estimateId, baseCurrency, ...props }) {
   const {
     data: estimate,
     isFetching: isEstimateFetching,
@@ -60,6 +62,7 @@ function EstimateFormProvider({ estimateId, ...props }) {
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState({});
+  const [selectCustomer, setSelectCustomer] = React.useState(null);
 
   // Create and edit estimate form.
   const { mutateAsync: createEstimateMutate } = useCreateEstimate();
@@ -70,6 +73,11 @@ function EstimateFormProvider({ estimateId, ...props }) {
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
+  // Determines whether the foreign customer.
+  const isForeignCustomer =
+    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
+    !isUndefined(selectCustomer?.currency_code);
+
   // Provider payload.
   const provider = {
     estimateId,
@@ -89,9 +97,13 @@ function EstimateFormProvider({ estimateId, ...props }) {
     isFeatureLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
+    isForeignCustomer,
     submitPayload,
     setSubmitPayload,
-
+    selectCustomer,
+    setSelectCustomer,
+    baseCurrency,
+    
     createEstimateMutate,
     editEstimateMutate,
   };

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

@@ -3,17 +3,25 @@ import { useParams } from 'react-router-dom';
 
 import { PaymentReceiveFormProvider } from './PaymentReceiveFormProvider';
 import PaymentReceiveForm from './PaymentReceiveForm';
-
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
 /**
  * Payment receive form page.
  */
-export default function PaymentReceiveFormPage() {
+function PaymentReceiveFormPage({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
   const { id: paymentReceiveId } = useParams();
   const paymentReceiveIdInt = parseInt(paymentReceiveId, 10);
 
   return (
-    <PaymentReceiveFormProvider paymentReceiveId={paymentReceiveIdInt}>
+    <PaymentReceiveFormProvider
+      paymentReceiveId={paymentReceiveIdInt}
+      baseCurrency={base_currency}
+    >
       <PaymentReceiveForm paymentReceiveId={paymentReceiveIdInt} />
     </PaymentReceiveFormProvider>
   );
 }
+export default compose(withCurrentOrganization())(PaymentReceiveFormPage);

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

@@ -1,4 +1,6 @@
 import React, { createContext, useContext } from 'react';
+import { isEmpty, pick, isEqual, isUndefined } from 'lodash';
+
 import { DashboardInsider } from 'components';
 import {
   useSettingsPaymentReceives,
@@ -16,10 +18,16 @@ const PaymentReceiveFormContext = createContext();
 /**
  * Payment receive form provider.
  */
-function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
+function PaymentReceiveFormProvider({
+  paymentReceiveId,
+  baseCurrency,
+  ...props
+}) {
   // Form state.
   const [submitPayload, setSubmitPayload] = React.useState({});
 
+  const [selectCustomer, setSelectCustomer] = React.useState(null);
+
   // Fetches payment recevie details.
   const {
     data: {
@@ -59,6 +67,11 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
   const { mutateAsync: editPaymentReceiveMutate } = useEditPaymentReceive();
   const { mutateAsync: createPaymentReceiveMutate } = useCreatePaymentReceive();
 
+  // Determines whether the foreign customer.
+  const isForeignCustomer =
+    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
+    !isUndefined(selectCustomer?.currency_code);
+
   // Provider payload.
   const provider = {
     paymentReceiveId,
@@ -67,6 +80,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     accounts,
     customers,
     branches,
+    baseCurrency,
 
     isPaymentLoading,
     isAccountsLoading,
@@ -74,10 +88,13 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     isCustomersLoading,
     isFeatureLoading,
     isBranchesSuccess,
+    isForeignCustomer,
     isNewMode,
 
     submitPayload,
     setSubmitPayload,
+    selectCustomer,
+    setSelectCustomer,
 
     editPaymentReceiveMutate,
     createPaymentReceiveMutate,

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

@@ -7,7 +7,7 @@ import {
   Button,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T, If } from 'components';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
 
 import { useAutofocus } from 'hooks';
@@ -29,6 +29,7 @@ import {
   InputPrependButton,
   MoneyInputGroup,
   InputPrependText,
+  ExchangeRateInputGroup,
   Hint,
   Money,
 } from 'components';
@@ -64,7 +65,14 @@ function PaymentReceiveHeaderFields({
   paymentReceiveNextNumber,
 }) {
   // Payment receive form context.
-  const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
+  const {
+    customers,
+    accounts,
+    isNewMode,
+    isForeignCustomer,
+    baseCurrency,
+    setSelectCustomer,
+  } = usePaymentReceiveFormContext();
 
   // Formik form context.
   const {
@@ -141,6 +149,7 @@ function PaymentReceiveHeaderFields({
               onContactSelected={(customer) => {
                 form.setFieldValue('customer_id', customer.id);
                 form.setFieldValue('full_amount', '');
+                setSelectCustomer(customer);
               }}
               popoverFill={true}
               disabled={!isNewMode}
@@ -153,6 +162,16 @@ function PaymentReceiveHeaderFields({
         )}
       </FastField>
 
+      {/* ----------- Exchange rate ----------- */}
+      <If condition={isForeignCustomer}>
+        <ExchangeRateInputGroup
+          fromCurrency={'USD'}
+          toCurrency={'LYD'}
+          name={'exchange_rate'}
+          formGroupProps={{ label: ' ', inline: true }}
+        />
+      </If>
+
       {/* ------------- Payment date ------------- */}
       <FastField name={'payment_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (

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

@@ -15,7 +15,9 @@ import {
   CustomerSelectField,
   FieldRequiredHint,
   Icon,
+  If,
   InputPrependButton,
+  ExchangeRateInputGroup,
 } from 'components';
 import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -49,7 +51,8 @@ function ReceiptFormHeader({
   receiptNextNumber,
   receiptNumberPrefix,
 }) {
-  const { accounts, customers } = useReceiptFormContext();
+  const { accounts, customers, isForeignCustomer, setSelectCustomer } =
+    useReceiptFormContext();
 
   const handleReceiptNumberChange = useCallback(() => {
     openDialog('receipt-number-form', {});
@@ -92,8 +95,9 @@ function ReceiptFormHeader({
               contacts={customers}
               selectedContactId={value}
               defaultSelectText={<T id={'select_customer_account'} />}
-              onContactSelected={(contact) => {
+              onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', contact.id);
+                form.setFieldValue('customer_id', customer.id);
+                setSelectCustomer(customer);
               }}
               popoverFill={true}
               allowCreate={true}
@@ -102,6 +106,16 @@ function ReceiptFormHeader({
         )}
       </FastField>
 
+      {/* ----------- Exchange rate ----------- */}
+      <If condition={isForeignCustomer}>
+        <ExchangeRateInputGroup
+          fromCurrency={'USD'}
+          toCurrency={'LYD'}
+          name={'exchange_rate'}
+          formGroupProps={{ label: ' ', inline: true }}
+        />
+      </If>
+
       {/* ----------- Deposit account ----------- */}
       <FastField
         name={'deposit_account_id'}

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

@@ -4,18 +4,25 @@ import { useParams } from 'react-router-dom';
 import 'style/pages/SaleReceipt/PageForm.scss';
 
 import ReceiptFrom from './ReceiptForm';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 import { ReceiptFormProvider } from './ReceiptFormProvider';
 
+import { compose } from 'utils';
+
 /**
  * Receipt form page.
  */
-export default function ReceiptFormPage() {
+function ReceiptFormPage({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
   const { id } = useParams();
   const idInt = parseInt(id, 10);
 
   return (
-    <ReceiptFormProvider receiptId={idInt}>
+    <ReceiptFormProvider receiptId={idInt} baseCurrency={base_currency}>
       <ReceiptFrom />
     </ReceiptFormProvider>
   );
 }
+export default compose(withCurrentOrganization())(ReceiptFormPage);

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

@@ -1,4 +1,6 @@
 import React, { createContext, useState } from 'react';
+import { isEmpty, pick, isEqual, isUndefined } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useReceipt,
@@ -17,7 +19,7 @@ const ReceiptFormContext = createContext();
 /**
  * Receipt form provider.
  */
-function ReceiptFormProvider({ receiptId, ...props }) {
+function ReceiptFormProvider({ receiptId, baseCurrency, ...props }) {
   // Fetch sale receipt details.
   const { data: receipt, isLoading: isReceiptLoading } = useReceipt(receiptId, {
     enabled: !!receiptId,
@@ -84,10 +86,17 @@ function ReceiptFormProvider({ receiptId, ...props }) {
 
   const [submitPayload, setSubmitPayload] = useState({});
 
+  const [selectCustomer, setSelectCustomer] = React.useState(null);
+
   const isNewMode = !receiptId;
 
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
+  // Determines whether the foreign customer.
+  const isForeignCustomer =
+    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
+    !isUndefined(selectCustomer?.currency_code);
+
   const provider = {
     receiptId,
     receipt,
@@ -97,6 +106,9 @@ function ReceiptFormProvider({ receiptId, ...props }) {
     branches,
     warehouses,
     submitPayload,
+    baseCurrency,
+    selectCustomer,
+    setSelectCustomer,
 
     isNewMode,
     isReceiptLoading,
@@ -109,6 +121,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
     isSettingLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
+    isForeignCustomer,
 
     createReceiptMutate,
     editReceiptMutate,

src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.js

@@ -98,7 +98,6 @@ export default function VendorFinanicalPanelTab() {
                   onCurrencySelected={(currency) => {
                     form.setFieldValue('currency_code', currency.currency_code);
                   }}
-                  disabled={true}
                 />
               </FormGroup>
             )}