Merge branch 'feature/multi-dimensions' of https://github.com/bigcapitalhq/client into feature/multi-dimensions

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

@@ -6,7 +6,7 @@ export function PaymentReceiveFormFootetLeft() {
   return (
     <React.Fragment>
       {/* --------- Statement--------- */}
-      <StatementFormGroup
+      <TermsConditsFormGroup
         name={'statement'}
         label={<T id={'statement'} />}
         hintText={'Will be displayed on the Payment'}
@@ -15,15 +15,13 @@ export function PaymentReceiveFormFootetLeft() {
           name={'statement'}
           placeholder={'Thanks for your business and have a great day!'}
         />
-      </StatementFormGroup>
+      </TermsConditsFormGroup>
     </React.Fragment>
   );
 }
 
-const StatementFormGroup = styled(FFormGroup)`
+const TermsConditsFormGroup = styled(FFormGroup)`
   &.bp3-form-group {
-    margin-bottom: 40px;
-
     .bp3-label {
       font-size: 12px;
       margin-bottom: 12px;
@@ -33,3 +31,4 @@ const StatementFormGroup = styled(FFormGroup)`
     }
   }
 `;
+

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

@@ -7,18 +7,21 @@ import {
   TotalLineBorderStyle,
   TotalLineTextStyle,
 } from 'components';
+import { usePaymentReceiveTotals } from './utils';
 
 export function PaymentReceiveFormFootetRight() {
+  const { formattedSubtotal, formattedTotal } = usePaymentReceiveTotals();
+
   return (
     <PaymentReceiveTotalLines 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/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js

@@ -30,13 +30,13 @@ import {
   InputPrependButton,
   MoneyInputGroup,
   InputPrependText,
-  ExchangeRateInputGroup,
+  CustomerDrawerLink,
   Hint,
   Money,
 } from 'components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
-import PaymentReceiveFormCurrencyTag from './PaymentReceiveFormCurrencyTag';
+import { PaymentReceiveExchangeRateInputField } from './components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -49,6 +49,7 @@ import {
   customersFieldShouldUpdate,
   accountsFieldShouldUpdate,
 } from './utils';
+
 import { toSafeInteger } from 'lodash';
 
 /**
@@ -67,15 +68,7 @@ function PaymentReceiveHeaderFields({
   paymentReceiveNextNumber,
 }) {
   // Payment receive form context.
-  const {
-    customers,
-    accounts,
-    isNewMode,
-    isForeignCustomer,
-    baseCurrency,
-    selectCustomer,
-    setSelectCustomer,
-  } = usePaymentReceiveFormContext();
+  const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
 
   // Formik form context.
   const {
@@ -154,7 +147,6 @@ function PaymentReceiveHeaderFields({
                   form.setFieldValue('customer_id', customer.id);
                   form.setFieldValue('full_amount', '');
                   form.setFieldValue('currency_code', customer?.currency_code);
-                  setSelectCustomer(customer);
                 }}
                 popoverFill={true}
                 disabled={!isNewMode}
@@ -164,20 +156,20 @@ function PaymentReceiveHeaderFields({
                 allowCreate={true}
               />
             </ControlCustomerGroup>
+            {value && (
+              <CustomerButtonLink customerId={value}>
+                View Customer Details
+              </CustomerButtonLink>
+            )}
           </FormGroup>
         )}
       </FastField>
 
       {/* ----------- Exchange rate ----------- */}
-      <If condition={isForeignCustomer}>
-        <ExchangeRateInputGroup
-          fromCurrency={baseCurrency}
-          toCurrency={selectCustomer?.currency_code}
-          name={'exchange_rate'}
-          formGroupProps={{ label: ' ', inline: true }}
-        />
-      </If>
-
+      <PaymentReceiveExchangeRateInputField
+        name={'exchange_rate'}
+        formGroupProps={{ label: ' ', inline: true }}
+      />
       {/* ------------- Payment date ------------- */}
       <FastField name={'payment_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
@@ -359,3 +351,8 @@ const ControlCustomerGroup = styled(ControlGroup)`
   align-items: center;
   transform: none;
 `;
+
+const CustomerButtonLink = styled(CustomerDrawerLink)`
+  font-size: 11px;
+  margin-top: 6px;
+`;

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

@@ -1,10 +1,14 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
+import { useFormikContext } from 'formik';
 
-import { Money } from 'components';
+import { Money, ExchangeRateInputGroup } from 'components';
 import { MoneyFieldCell } from 'components/DataTableCells';
 
+import { useCurrentOrganization } from 'hooks/state';
+import { useEstimateIsForeignCustomer } from './utils';
+
 /**
  * Invoice date cell.
  */
@@ -76,3 +80,26 @@ export const usePaymentReceiveEntriesColumns = () => {
     [],
   );
 };
+
+/**
+ * payment receive exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function PaymentReceiveExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignCustomer = useEstimateIsForeignCustomer();
+
+  // 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/Sales/PaymentReceives/PaymentReceiveForm/utils.js

@@ -12,7 +12,10 @@ import {
   transformToForm,
   safeSumBy,
   orderingLinesIndexes,
+  formattedAmount,
 } from 'utils';
+import { useCurrentOrganization } from 'hooks/state';
+import { getEntriesTotal } from 'containers/Entries/utils';
 
 // Default payment receive entry.
 export const defaultPaymentReceiveEntry = {
@@ -213,3 +216,47 @@ export const transformErrors = (errors, { setFieldError }) => {
     });
   }
 };
+
+/**
+ * Retreives the payment receive totals.
+ */
+export const usePaymentReceiveTotals = () => {
+  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 payment has foreign customer.
+ * @returns {boolean}
+ */
+export const useEstimateIsForeignCustomer = () => {
+  const { values } = useFormikContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignCustomer = React.useMemo(
+    () => values.currency_code !== currentOrganization.base_currency,
+    [values.currency_code, currentOrganization.base_currency],
+  );
+  return isForeignCustomer;
+};