Merge pull request #552 from PolymathNetwork/fix/step2-confirm-navigation

fix(new-issuer): confirm unposted transactions

Author: RafaelVidaurre

packages/new-polymath-issuer/src/pages/DividendsWizard/Presenter.tsx

@@ -19,6 +19,7 @@ import { CreateDividendDistributionParams } from './Container';
 import * as sc from './styles';
 import { Step1 } from './Step-1';
 import { Step2 } from './Step-2';
+import { ConfirmModal } from './Step-2/ConfirmModal';
 import { Step3 } from './Step-3';
 import { types, formatters } from '@polymathnetwork/new-shared';
 import BigNumber from 'bignumber.js';
@@ -27,6 +28,7 @@ import {
   GetErc20BalanceByAddressAndWalletArgs,
   GetIsValidErc20ByAddressArgs,
 } from '~/types';
+import { block, unblock } from 'redux-little-router';
 
 export interface ExclusionEntry {
   ['Investor ETH Address']: string;
@@ -64,6 +66,8 @@ export interface State {
   dividendAmount: BigNumber;
   tokenSymbol: string;
   positiveWithholdingAmount: number;
+  isDirty: boolean;
+  confirmModalOpen: boolean;
 }
 
 export class Presenter extends Component<Props, State> {
@@ -74,6 +78,8 @@ export class Presenter extends Component<Props, State> {
     positiveWithholdingAmount: this.props.taxWithholdings.filter(
       ({ percentage }) => percentage > 0
     ).length,
+    isDirty: false,
+    confirmModalOpen: false,
   };
 
   public setExcludedWallets = (excludedWallets: null | ExclusionEntry[]) => {
@@ -92,6 +98,41 @@ export class Presenter extends Component<Props, State> {
     this.setState({ positiveWithholdingAmount });
   };
 
+  public setIsDirty = (isDirty: boolean) => {
+    if (isDirty !== this.state.isDirty) {
+      this.setState({ isDirty });
+      if (isDirty) {
+        // Block reload
+        window.onbeforeunload = e => {
+          e.preventDefault();
+          return true;
+        };
+        block(() => {
+          return (
+            'To apply your new/modified tax withholding entries, simply hit "CANCEL" and click on "UPDATE" above the Tax Withholdings table.\n' +
+            'To ignore the new/modified tax withholding entries, simply hit "PROCEED"'
+          );
+        });
+      } else {
+        window.onbeforeunload = null;
+        unblock();
+      }
+    }
+  };
+
+  public closeConfirmModal = () => {
+    this.setState({ confirmModalOpen: false });
+  };
+
+  public openConfirmModal = () => {
+    this.setState({ confirmModalOpen: true });
+  };
+
+  public onConfirmBack = () => {
+    this.closeConfirmModal();
+    this.props.onPreviousStep();
+  };
+
   public getExcludedAddresses = () => {
     const { excludedWallets } = this.state;
 
@@ -145,6 +186,7 @@ export class Presenter extends Component<Props, State> {
             nonExcludedInvestors={nonExcludedInvestors}
             exclusionList={exclusionList}
             isLoadingData={isLoadingData}
+            setIsDirty={this.setIsDirty}
           />
         );
       }
@@ -187,6 +229,7 @@ export class Presenter extends Component<Props, State> {
       dividendAmount,
       tokenSymbol,
       positiveWithholdingAmount,
+      confirmModalOpen,
     } = this.state;
     const { investorBalances } = checkpoint;
     const exclusionList = this.getExcludedAddresses();
@@ -208,9 +251,13 @@ export class Presenter extends Component<Props, State> {
             ) => {
               // TODO @RafaelVidaurre: Fix this by using the right component
               if (stepIndex > 0) {
-                onPreviousStep();
                 event.preventDefault();
                 event.stopPropagation();
+                if (this.state.isDirty) {
+                  this.openConfirmModal();
+                } else {
+                  onPreviousStep();
+                }
               }
             }}
           >
@@ -300,6 +347,11 @@ export class Presenter extends Component<Props, State> {
             </CardPrimary>
           </GridRow.Col>
         </GridRow>
+        <ConfirmModal
+          isOpen={confirmModalOpen}
+          onConfirm={this.onConfirmBack}
+          onClose={this.closeConfirmModal}
+        />
       </div>
     );
   }

packages/new-polymath-issuer/src/pages/DividendsWizard/Step-2/index.tsx

@@ -4,7 +4,7 @@ import {
   validateYupSchema,
   yupToFormErrors,
 } from 'formik';
-import React, { Fragment, useState, useMemo, FC } from 'react';
+import React, { Fragment, useState, useMemo, FC, useEffect } from 'react';
 import { has, merge } from 'lodash';
 import { types } from '@polymathnetwork/new-shared';
 import {
@@ -37,6 +37,7 @@ import {
   FormValues,
   TaxWithholdingStatuses,
 } from './shared';
+import { unblock } from 'redux-little-router';
 
 interface Props {
   onNextStep: () => void;
@@ -54,6 +55,7 @@ interface Props {
   exclusionList: string[];
   onTaxWithholdingListChange: (amountOfInvestors: number) => void;
   isLoadingData: boolean;
+  setIsDirty: (isDirty: boolean) => void;
 }
 
 const schema = validator.object().shape({
@@ -86,6 +88,7 @@ export const Step2: FC<Props> = ({
   exclusionList,
   onTaxWithholdingListChange,
   isLoadingData,
+  setIsDirty,
 }) => {
   const [csvModalOpen, setCsvModalOpen] = useState(false);
 
@@ -312,6 +315,7 @@ export const Step2: FC<Props> = ({
             csvModalOpen={csvModalOpen}
             closeCsvModal={closeCsvModal}
             isLoadingData={isLoadingData}
+            setIsDirty={setIsDirty}
             exclusionList={exclusionList}
           />
         )}
@@ -329,6 +333,7 @@ interface FormProps {
   csvModalOpen: boolean;
   closeCsvModal: () => void;
   isLoadingData: boolean;
+  setIsDirty: (isDirty: boolean) => void;
   exclusionList: string[];
 }
 
@@ -341,13 +346,25 @@ const Form: FC<FormProps> = ({
   csvModalOpen,
   closeCsvModal,
   isLoadingData,
+  setIsDirty,
   exclusionList,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
   const [taxWithholdingModalOpen, setTaxWithholdingModalOpen] = useState(false);
   const [confirmDeleteModalOpen, setConfirmDeleteModalOpen] = useState(false);
   const [addressesToDelete, setAddressesToDelete] = useState<string[]>([]);
+  useEffect(() => {
+    setIsDirty(isDraft);
+  });
+
+  useEffect(() => {
+    return () => {
+      window.onbeforeunload = null;
+      unblock();
+    };
+  }, []);
+
   const openTaxWithhholdingModal = () => {
     setTaxWithholdingModalOpen(true);
   };