Merge pull request #270 from bigcapitalhq/big-44-auto-re-calculate-th…

…e-items-rate-once-changing-the-invoice

feat: Auto re-calculate the items rate once changing the invoice exchange rate.

packages/webapp/src/components/Customers/CustomersSelect.tsx

@@ -34,7 +34,7 @@ function CustomerSelectRoot({
     <FSelect
       items={items}
       textAccessor={'display_name'}
-      labelAccessor={'code'}
+      labelAccessor={'currency_code'}
       valueAccessor={'id'}
       popoverProps={{ minimal: true, usePortal: true, inline: false }}
       createNewItemRenderer={maybeCreateNewItemRenderer}

packages/webapp/src/components/DialogsContainer.tsx

@@ -3,8 +3,6 @@ import InviteUserDialog from '@/containers/Dialogs/InviteUserDialog';
 import UserFormDialog from '@/containers/Dialogs/UserFormDialog';
 import ItemCategoryDialog from '@/containers/Dialogs/ItemCategoryDialog';
 import CurrencyFormDialog from '@/containers/Dialogs/CurrencyFormDialog';
-import ExchangeRateFormDialog from '@/containers/Dialogs/ExchangeRateFormDialog';
-
 import InventoryAdjustmentDialog from '@/containers/Dialogs/InventoryAdjustmentFormDialog';
 import PaymentViaVoucherDialog from '@/containers/Dialogs/PaymentViaVoucherDialog';
 import KeyboardShortcutsDialog from '@/containers/Dialogs/keyboardShortcutsDialog';
@@ -47,6 +45,7 @@ import ProjectInvoicingFormDialog from '@/containers/Projects/containers/Project
 import ProjectBillableEntriesFormDialog from '@/containers/Projects/containers/ProjectBillableEntriesFormDialog';
 import TaxRateFormDialog from '@/containers/TaxRates/dialogs/TaxRateFormDialog/TaxRateFormDialog';
 import { DialogsName } from '@/constants/dialogs';
+import InvoiceExchangeRateChangeDialog from '@/containers/Sales/Invoices/InvoiceForm/Dialogs/InvoiceExchangeRateChangeDialog';
 import InvoiceMailDialog from '@/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog';
 import EstimateMailDialog from '@/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog';
 import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog';
@@ -62,7 +61,6 @@ export default function DialogsContainer() {
       <CurrencyFormDialog dialogName={DialogsName.CurrencyForm} />
       <InviteUserDialog dialogName={DialogsName.InviteForm} />
       <UserFormDialog dialogName={DialogsName.UserForm} />
-      <ExchangeRateFormDialog dialogName={DialogsName.ExchangeRateForm} />
       <ItemCategoryDialog dialogName={DialogsName.ItemCategoryForm} />
       <InventoryAdjustmentDialog
         dialogName={DialogsName.InventoryAdjustmentForm}
@@ -141,6 +139,9 @@ export default function DialogsContainer() {
         dialogName={DialogsName.ProjectBillableEntriesForm}
       />
       <TaxRateFormDialog dialogName={DialogsName.TaxRateForm} />
+      <InvoiceExchangeRateChangeDialog
+        dialogName={DialogsName.InvoiceExchangeRateChangeNotice}
+      />
       <InvoiceMailDialog dialogName={DialogsName.InvoiceMail} />
       <EstimateMailDialog dialogName={DialogsName.EstimateMail} />
       <ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />

packages/webapp/src/components/ExchangeRate/ExchangeRateInput.tsx

@@ -1,30 +1,159 @@
 // @ts-nocheck
-import React from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
-import { ControlGroup } from '@blueprintjs/core';
-
+import { useFormikContext } from 'formik';
+import {
+  Button,
+  Classes,
+  ControlGroup,
+  Intent,
+  Popover,
+  Position,
+  Spinner,
+} from '@blueprintjs/core';
 import { FlagIcon } from '../Tags';
 import { FMoneyInputGroup, FFormGroup } from '../Forms';
+import { useUncontrolled } from '@/hooks/useUncontrolled';
+
+interface ExchangeRateValuesBag {
+  oldExchangeRate: string;
+  exchangeRate: string;
+}
+
+interface ExchangeRateInputGroupProps {
+  name: string;
+  fromCurrency: string;
+  toCurrency: string;
+  isLoading?: boolean;
+
+  inputGroupProps?: any;
+  formGroupProps?: any;
+
+  withPopoverRecalcConfirm?: boolean;
+
+  onRecalcConfirm: (bag: ExchangeRateValuesBag) => void;
+  onCancel: (bag: ExchangeRateValuesBag) => void;
+
+  isConfirmPopoverOpen?: boolean;
+  initialConfirmPopoverOpen?: boolean;
+  onConfirmPopoverOpen?: (isOpen: boolean) => void;
+}
 
 export function ExchangeRateInputGroup({
+  name,
   fromCurrency,
   toCurrency,
+  isLoading,
+
   inputGroupProps,
   formGroupProps,
-  name,
-}) {
+
+  withPopoverRecalcConfirm = false,
+
+  onRecalcConfirm,
+  onCancel,
+
+  isConfirmPopoverOpen,
+  initialConfirmPopoverOpen,
+  onConfirmPopoverOpen,
+}: ExchangeRateInputGroupProps) {
+  const [isOpen, handlePopoverOpen] = useUncontrolled<boolean>({
+    value: isConfirmPopoverOpen,
+    initialValue: initialConfirmPopoverOpen,
+    finalValue: false,
+    onChange: onConfirmPopoverOpen,
+  });
+  const { values, setFieldValue } = useFormikContext();
+  const [oldExchangeRate, setOldExchangeRate] = useState<string>('');
+
+  const exchangeRate = values[name];
+  const exchangeRateValuesBag: ExchangeRateValuesBag = {
+    exchangeRate,
+    oldExchangeRate,
+  };
+  // Handle re-calc confirm button click.
+  const handleRecalcConfirmBtn = () => {
+    handlePopoverOpen(false);
+    onRecalcConfirm && onRecalcConfirm(exchangeRateValuesBag);
+  };
+  // Handle cancel button click.
+  const handleCancelBtn = () => {
+    handlePopoverOpen(false);
+    onCancel && onCancel(exchangeRateValuesBag);
+  };
+  // Handle exchange rate field blur.
+  const handleExchangeRateFieldBlur = (value: string) => {
+    if (value !== values[name]) {
+      handlePopoverOpen(true);
+      setFieldValue(name, value);
+      setOldExchangeRate(values[name]);
+    }
+  };
+
+  const exchangeRateField = (
+    <ExchangeRateField
+      allowDecimals={true}
+      allowNegativeValue={true}
+      asyncControl={true}
+      onChange={() => null}
+      onBlur={handleExchangeRateFieldBlur}
+      rightElement={isLoading && <Spinner size={16} />}
+      decimalsLimit={5}
+      {...inputGroupProps}
+      name={name}
+    />
+  );
+
+  const popoverConfirmContent = (
+    <PopoverContent>
+      <p>
+        Are you want to re-calculate item prices based on this exchange rate.
+      </p>
+      <div
+        style={{
+          display: 'flex',
+          marginTop: 15,
+        }}
+      >
+        <Button
+          intent={Intent.WARNING}
+          className={Classes.POPOVER_DISMISS}
+          onClick={handleRecalcConfirmBtn}
+          small
+        >
+          Calculate
+        </Button>
+        <Button
+          className={Classes.POPOVER_DISMISS}
+          style={{ marginRight: 10 }}
+          onClick={handleCancelBtn}
+          small
+          minimal
+        >
+          Cancel
+        </Button>
+      </div>
+    </PopoverContent>
+  );
+
   return (
     <FFormGroup inline={true} {...formGroupProps} name={name}>
       <ControlGroup>
         <ExchangeRatePrepend>
           <ExchangeFlagIcon currencyCode={fromCurrency} /> 1 {fromCurrency} =
         </ExchangeRatePrepend>
-        <ExchangeRateField
-          allowDecimals={true}
-          allowNegativeValue={true}
-          {...inputGroupProps}
-          name={name}
-        />
+
+        {withPopoverRecalcConfirm ? (
+          <Popover
+            isOpen={isOpen}
+            content={popoverConfirmContent}
+            position={Position.RIGHT}
+          >
+            {exchangeRateField}
+          </Popover>
+        ) : (
+          exchangeRateField
+        )}
         <ExchangeRateAppend>
           <ExchangeFlagIcon currencyCode={toCurrency} /> {toCurrency}
         </ExchangeRateAppend>
@@ -34,7 +163,7 @@ export function ExchangeRateInputGroup({
 }
 
 const ExchangeRateField = styled(FMoneyInputGroup)`
-  max-width: 75px;
+  max-width: 85px;
 `;
 
 const ExchangeRateSideIcon = styled.div`
@@ -57,3 +186,8 @@ const ExchangeFlagIcon = styled(FlagIcon)`
   margin-left: 5px;
   display: inline-block;
 `;
+
+const PopoverContent = styled('div')`
+  padding: 20px;
+  width: 300px;
+`;

packages/webapp/src/constants/dialogs.ts

@@ -48,6 +48,7 @@ export enum DialogsName {
   ProjectBillableEntriesForm = 'project-billable-entries',
   InvoiceNumberSettings = 'InvoiceNumberSettings',
   TaxRateForm = 'tax-rate-form',
+  InvoiceExchangeRateChangeNotice = 'InvoiceExchangeRateChangeNotice',
   InvoiceMail = 'invoice-mail',
   EstimateMail = 'estimate-mail',
   ReceiptMail = 'receipt-mail',

packages/webapp/src/containers/AlertsContainer/registered.tsx

@@ -12,7 +12,6 @@ import PaymentMadesAlerts from '@/containers/Purchases/PaymentMades/PaymentMades
 import CustomersAlerts from '@/containers/Customers/CustomersAlerts';
 import VendorsAlerts from '@/containers/Vendors/VendorsAlerts';
 import ManualJournalsAlerts from '@/containers/Accounting/JournalsLanding/ManualJournalsAlerts';
-import ExchangeRatesAlerts from '@/containers/ExchangeRates/ExchangeRatesAlerts';
 import ExpensesAlerts from '@/containers/Expenses/ExpensesAlerts';
 import AccountTransactionsAlerts from '@/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts';
 import UsersAlerts from '@/containers/Preferences/Users/UsersAlerts';
@@ -41,7 +40,6 @@ export default [
   ...CustomersAlerts,
   ...VendorsAlerts,
   ...ManualJournalsAlerts,
-  ...ExchangeRatesAlerts,
   ...ExpensesAlerts,
   ...AccountTransactionsAlerts,
   ...UsersAlerts,
@@ -54,5 +52,5 @@ export default [
   ...WarehousesTransfersAlerts,
   ...BranchesAlerts,
   ...ProjectAlerts,
-  ...TaxRatesAlerts
+  ...TaxRatesAlerts,
 ];