feat(purchases): add purchases.

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

@@ -7,18 +7,20 @@ import {
   TotalLineBorderStyle,
   TotalLineTextStyle,
 } from 'components';
+import { usePaymentMadeTotals } from './utils';
 
 export function PaymentMadeFormFooterRight() {
+  const { formattedSubtotal, formattedTotal } = usePaymentMadeTotals();
   return (
     <PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
         title={<T id={'estimate.details.subtotal'} />}
-        value={'$5000.00'}
+        value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
         title={<T id={'estimate.details.total'} />}
-        value={'$5000.00'}
+        value={formattedTotal}
         // borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />

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

@@ -16,21 +16,21 @@ import { CLASSES } from 'common/classes';
 import styled from 'styled-components';
 
 import {
+  FFormGroup,
   AccountsSelectList,
   VendorSelectField,
   FieldRequiredHint,
   InputPrependText,
   Money,
   Hint,
-  If,
   Icon,
+  VendorDrawerLink,
   MoneyInputGroup,
-  ExchangeRateInputGroup,
 } from 'components';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
-import PaymentMadeFormCurrencyTag from './PaymentMadeFormCurrencyTag';
+import { PaymentMadeExchangeRateInputField } from './components';
 import {
   momentFormatter,
   tansformDateValue,
@@ -62,7 +62,6 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
     isForeignVendor,
     baseCurrency,
     selectVendor,
-    setSelectVendor,
   } = usePaymentMadeFormContext();
 
   // Sumation of payable full-amount.
@@ -95,13 +94,12 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
         shouldUpdate={vendorsFieldShouldUpdate}
       >
         {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
+          <FFormGroup
+            name={'vendor_id'}
             label={<T id={'vendor_name'} />}
             inline={true}
             className={classNames('form-group--select-list', Classes.FILL)}
             labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'vendor_id'} />}
           >
             <ControlVendorGroup>
               <VendorSelectField
@@ -112,26 +110,26 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
                   form.setFieldValue('vendor_id', contact.id);
                   form.setFieldValue('currency_code', contact?.currency_code);
                   setPaymentVendorId(contact.id);
-                  setSelectVendor(contact);
                 }}
                 disabled={!isNewMode}
                 popoverFill={true}
                 allowCreate={true}
               />
             </ControlVendorGroup>
-          </FormGroup>
+            {value && (
+              <VendorButtonLink vendorId={value}>
+                <T id={'view_vendor_details'} />
+              </VendorButtonLink>
+            )}
+          </FFormGroup>
         )}
       </FastField>
 
       {/* ----------- Exchange rate ----------- */}
-      <If condition={isForeignVendor}>
-        <ExchangeRateInputGroup
-          fromCurrency={baseCurrency}
-          toCurrency={selectVendor?.currency_code}
-          name={'exchange_rate'}
-          formGroupProps={{ label: ' ', inline: true }}
-        />
-      </If>
+      <PaymentMadeExchangeRateInputField
+        name={'exchange_rate'}
+        formGroupProps={{ label: ' ', inline: true }}
+      />
 
       {/* ------------ Payment date ------------ */}
       <FastField name={'payment_date'}>
@@ -285,3 +283,8 @@ const ControlVendorGroup = styled(ControlGroup)`
   align-items: center;
   transform: none;
 `;
+
+const VendorButtonLink = styled(VendorDrawerLink)`
+  font-size: 11px;
+  margin-top: 6px;
+`;

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
-import { Money } from 'components';
+import { Money, ExchangeRateInputGroup } from 'components';
 import { safeSumBy, formattedAmount } from 'utils';
 import { MoneyFieldCell } from 'components/DataTableCells';
+import { useFormikContext } from 'formik';
+import { useCurrentOrganization } from 'hooks/state';
+import { usePaymentMadeIsForeignCustomer } from './utils';
 
 function BillNumberAccessor(row) {
   return row?.bill_no ? row?.bill_no : '-';
@@ -51,8 +54,6 @@ function MoneyTableCell({ row: { original }, value }) {
  * Payment made entries table columns
  */
 export function usePaymentMadeEntriesTableColumns() {
-  
-
   return React.useMemo(
     () => [
       {
@@ -107,3 +108,26 @@ export function usePaymentMadeEntriesTableColumns() {
     [],
   );
 }
+
+/**
+ * payment made exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function PaymentMadeExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignCustomer = usePaymentMadeIsForeignCustomer();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignCustomer) {
+    return null;
+  }
+  return (
+    <ExchangeRateInputGroup
+      fromCurrency={values.currency_code}
+      toCurrency={currentOrganization.base_currency}
+      {...props}
+    />
+  );
+}

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

@@ -11,7 +11,10 @@ import {
   safeSumBy,
   transformToForm,
   orderingLinesIndexes,
+  formattedAmount,
 } from 'utils';
+import { getEntriesTotal } from '../../../Entries/utils';
+import { useCurrentOrganization } from 'hooks/state';
 
 export const ERRORS = {
   PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
@@ -126,8 +129,51 @@ export const transformErrors = (errors, { setFieldError }) => {
   }
   if (getError('WITHDRAWAL_ACCOUNT_CURRENCY_INVALID')) {
     AppToaster.show({
-      message: intl.get('payment_made.error.withdrawal_account_currency_invalid'),
+      message: intl.get(
+        'payment_made.error.withdrawal_account_currency_invalid',
+      ),
       intent: Intent.DANGER,
     });
   }
 };
+
+export const usePaymentMadeTotals = () => {
+  const {
+    values: { entries, currency_code: currencyCode },
+  } = useFormikContext();
+
+  // Retrieves the invoice entries total.
+  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
+
+  // Retrieves the formatted total money.
+  const formattedTotal = React.useMemo(
+    () => formattedAmount(total, currencyCode),
+    [total, currencyCode],
+  );
+  // Retrieves the formatted subtotal.
+  const formattedSubtotal = React.useMemo(
+    () => formattedAmount(total, currencyCode, { money: false }),
+    [total, currencyCode],
+  );
+
+  return {
+    total,
+    formattedTotal,
+    formattedSubtotal,
+  };
+};
+
+/**
+ * Detarmines whether the bill has foreign customer.
+ * @returns {boolean}
+ */
+export const usePaymentMadeIsForeignCustomer = () => {
+  const { values } = useFormikContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignCustomer = React.useMemo(
+    () => values.currency_code !== currentOrganization.base_currency,
+    [values.currency_code, currentOrganization.base_currency],
+  );
+  return isForeignCustomer;
+};