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

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 } =
-    usePaymentMadeFormContext();
+  const {
+    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}>
-      <PaymentMadeForm /> 
+    <PaymentMadeFormProvider
+      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,