copy plan implementation

src/components/App.js

@@ -29,6 +29,7 @@ import EditableProvider from '../providers/EditableProvider';
 import PlanProvider from '../providers/PlanProvider';
 import theme from './theme';
 import { SWRConfig } from 'swr';
+import { ConfirmationModalProvider } from '../providers/ConfrimationModalProvider';
 
 const store = configureStore();
 
@@ -50,7 +51,9 @@ class App extends Component {
                 <EditableProvider editable={true}>
                   <ReferencesProvider>
                     <ToastProvider>
-                      <Router />
+                      <ConfirmationModalProvider>
+                        <Router />
+                      </ConfirmationModalProvider>
                     </ToastProvider>
                   </ReferencesProvider>
                 </EditableProvider>

src/components/rangeUsePlanPage/ActionBtns.js

@@ -123,7 +123,6 @@ const ActionBtns = ({
     ...permissionsOptions,
   };
 
-  console.log(permissions);
   return (
     <>
       <div className="rup__actions__btns__buttons">

src/components/selectRangeUsePlanPage/CopyPlanMenuItem.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MenuItem } from '@material-ui/core';
+import { saveDataInLocalStorage } from '../../utils';
+
+const CopyPlanMenuItem = ({ planId, agreementId, menuText }) => {
+  return (
+    <MenuItem
+      onClick={async (e) => {
+        saveDataInLocalStorage('copyPlanInfo', { planId, agreementId });
+        e.stopPropagation();
+      }}
+    >
+      {menuText}
+    </MenuItem>
+  );
+};
+
+export default CopyPlanMenuItem;

src/components/selectRangeUsePlanPage/CreateReplacementPlan.js

@@ -11,7 +11,6 @@ const CreateReplacementPlan = ({ planId }) => {
       onClick={async (e) => {
         e.stopPropagation();
         const replacementPlan = await createReplacementPlan(planId);
-        console.log(replacementPlan);
         history.push(`${RANGE_USE_PLAN}/${replacementPlan.id}`);
       }}
     >

src/components/selectRangeUsePlanPage/ExtensionColumn.js

@@ -17,16 +17,16 @@ import * as API from '../../constants/api';
 import DatePickerDialog from './DatePickerDialog';
 import { PLAN_EXTENSION_STATUS } from '../../constants/variables';
 import { Button } from 'formik-semantic-ui';
-import PlanExtensionConfirmationModal from './PlanExtensionConfirmationModal';
 import { PLAN_EXTENSION_CONFIRMATION_QUESTION } from '../../constants/strings';
+import useConfirm from '../../providers/ConfrimationModalProvider';
 
 export default function ExtensionColumn({ user, currentPage, agreement }) {
   const history = useHistory();
   const [loading, setLoading] = useState(false);
   const [voting, setVoting] = useState(false);
   const [futureDate, setFutureDate] = useState(null);
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [confirmationModal, setConfirmationModal] = useState({ open: false });
+  const confirm = useConfirm();
 
   const getPlanFutureDate = (planEndDate) => {
     if (isNaN(Date.parse(planEndDate))) planEndDate = new Date();
@@ -49,15 +49,12 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
   };
 
   const handleRecommend = async (planId) => {
-    setConfirmationModal({
-      open: true,
-      header: 'Confirm',
-      content: PLAN_EXTENSION_CONFIRMATION_QUESTION('recommend'),
-      onConfirm: () => {
-        recommendExtension(planId);
-        setConfirmationModal({ open: false });
-      },
+    const choice = await confirm({
+      contentText: PLAN_EXTENSION_CONFIRMATION_QUESTION('recommend'),
     });
+    if (choice) {
+      recommendExtension(planId);
+    }
   };
 
   const extendPlan = async (planId) => {
@@ -93,15 +90,12 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
   };
 
   const handleApprove = async (planId) => {
-    setConfirmationModal({
-      open: true,
-      header: 'Confirm',
-      content: PLAN_EXTENSION_CONFIRMATION_QUESTION('approve'),
-      onConfirm: () => {
-        approveExtension(planId);
-        setConfirmationModal({ open: false });
-      },
+    const choice = await confirm({
+      contentText: PLAN_EXTENSION_CONFIRMATION_QUESTION('approve'),
     });
+    if (choice) {
+      approveExtension(planId);
+    }
   };
   const rejectExtension = async (planId) => {
     setVoting(true);
@@ -120,15 +114,12 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
   };
 
   const handleReject = async (planId) => {
-    setConfirmationModal({
-      open: true,
-      header: 'Confirm',
-      content: PLAN_EXTENSION_CONFIRMATION_QUESTION('reject'),
-      onConfirm: () => {
-        rejectExtension(planId);
-        setConfirmationModal({ open: false });
-      },
+    const choice = await confirm({
+      contentText: PLAN_EXTENSION_CONFIRMATION_QUESTION('reject'),
     });
+    if (choice) {
+      rejectExtension(planId);
+    }
   };
 
   const renderExtensionForDecisionMaker = (user, agreement) => {
@@ -376,15 +367,6 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           extendPlan(agreement.plan.id, futureDate);
         }}
       />
-      <PlanExtensionConfirmationModal
-        header={confirmationModal.header}
-        content={confirmationModal.content}
-        open={confirmationModal.open}
-        onConfirm={confirmationModal.onConfirm}
-        onClose={() => {
-          setConfirmationModal({ open: false });
-        }}
-      />
     </>
   );
 }

src/components/selectRangeUsePlanPage/PastePlanMenuItem.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { MenuItem } from '@material-ui/core';
+import {
+  axios,
+  getAuthHeaderConfig,
+  getDataFromLocalStorage,
+} from '../../utils';
+import useConfirm from '../../providers/ConfrimationModalProvider';
+import { PLAN_PASTE_CONFIRMATION_QUESTION } from '../../constants/strings';
+import * as API from '../../constants/api';
+import { useToast } from '../../providers/ToastProvider';
+import { useHistory } from 'react-router-dom';
+
+const PastePlanMenuItem = ({ agreementId, menuText, currentPage }) => {
+  const history = useHistory();
+  const { errorToast } = useToast();
+  const confirm = useConfirm();
+  const sourcePlan = getDataFromLocalStorage('copyPlanInfo');
+  if (!sourcePlan?.agreementId) {
+    return null;
+  }
+  return (
+    <MenuItem
+      onClick={async () => {
+        if (!sourcePlan?.agreementId) {
+          errorToast('You need to copy a plan.');
+          return;
+        }
+        const choice = await confirm({
+          contentText: PLAN_PASTE_CONFIRMATION_QUESTION(
+            sourcePlan.agreementId,
+            agreementId,
+          ),
+        });
+        if (choice) {
+          try {
+            const response = await axios.put(
+              API.COPY_PLAN(sourcePlan.planId, agreementId),
+              {},
+              getAuthHeaderConfig(),
+            );
+            history.push({
+              pathname: `/range-use-plan/${response.data.planId}`,
+              state: {
+                page: currentPage,
+                prevSearch: location.search,
+              },
+            });
+          } catch (e) {
+            errorToast('Error creating plan');
+            return;
+          }
+        }
+      }}
+    >
+      {menuText}
+    </MenuItem>
+  );
+};
+
+export default PastePlanMenuItem;

src/components/selectRangeUsePlanPage/PlanActions.js

@@ -8,9 +8,11 @@ import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import React from 'react';
 import * as strings from '../../constants/strings';
 import { PLAN_EXTENSION_STATUS } from '../../constants/variables';
+import CopyPlanMenuItem from './CopyPlanMenuItem';
 import CreateReplacementPlan from './CreateReplacementPlan';
 import NewPlanMenuItem from './NewPlanMenuItem';
 import ViewPlanMenuItem from './ViewPlanMenuItem';
+import PastePlanMenuItem from './PastePlanMenuItem';
 
 export default function PlanActions({
   agreement,
@@ -72,9 +74,23 @@ export default function PlanActions({
                       menuText={canEdit ? strings.EDIT : strings.VIEW}
                     />
                   )}
+                  {planId && (
+                    <CopyPlanMenuItem
+                      planId={planId}
+                      agreementId={agreement.id}
+                      menuText={'Copy'}
+                    />
+                  )}
                   {canCreatePlan && !planId && (
                     <NewPlanMenuItem agreement={agreement} />
                   )}
+                  {canCreatePlan && !planId && (
+                    <PastePlanMenuItem
+                      agreementId={agreement.id}
+                      menuText={'Paste'}
+                      currentPage={currentPage}
+                    />
+                  )}
                   {[
                     PLAN_EXTENSION_STATUS.AGREEMENT_HOLDER_REJECTED,
                     PLAN_EXTENSION_STATUS.STAFF_REJECTED,

src/constants/api.js

@@ -111,6 +111,8 @@ export const REPLACEMENT_PLAN = (planId) =>
 export const REJECT_VOTE = (planId) => `/v1/plan/${planId}/extension/reject`;
 export const UPDATE_CONFIRMATION = (planId, confirmationId) =>
   `/v1/plan/${planId}/confirmation/${confirmationId}`;
+export const COPY_PLAN = (planId, agreementId) =>
+  `/v1/plan/${planId}/copy/${agreementId}`;
 export const DISCARD_AMENDMENT = (planId) =>
   `v1/plan/${planId}/discard-amendment`;
 

src/constants/strings.js

@@ -345,3 +345,9 @@ export const MANUAL_SIGNING_FAILUTE =
 
 export const PLAN_EXTENSION_CONFIRMATION_QUESTION = (action) =>
   `Are you sure you want to ${action} extension?`;
+
+export const PLAN_PASTE_CONFIRMATION_QUESTION = (
+  sourceAgreement,
+  destinationAgreement,
+) =>
+  `Are you sure you want to paste content of ${sourceAgreement} and create a new plan ${destinationAgreement}?`;

src/providers/ConfrimationModalProvider.js

@@ -0,0 +1,67 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@material-ui/core';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from 'react';
+import { PrimaryButton } from '../components/common';
+const ConfirmationModal = createContext();
+
+export function ConfirmationModalProvider({ children }) {
+  const [state, setState] = useState({ isOpen: false });
+  const fn = useRef();
+
+  const confirm = useCallback(
+    (data) => {
+      return new Promise((resolve) => {
+        setState({ ...data, isOpen: true });
+        fn.current = (choice) => {
+          resolve(choice);
+          setState({ isOpen: false });
+        };
+      });
+    },
+    [setState],
+  );
+
+  return (
+    <ConfirmationModal.Provider value={confirm}>
+      {children}
+      <Dialog
+        open={state.isOpen}
+        onClose={() => fn.current(false)}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">
+          {state.titleText || 'Confirm'}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {state.contentText}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <PrimaryButton inverted onClick={() => fn.current(false)}>
+            {state.cancelText || 'Cancel'}
+          </PrimaryButton>
+          <PrimaryButton onClick={() => fn.current(true)} autoFocus>
+            {state.confirmText || 'Confirm'}
+          </PrimaryButton>
+        </DialogActions>
+      </Dialog>
+    </ConfirmationModal.Provider>
+  );
+}
+
+export default function useConfirm() {
+  return useContext(ConfirmationModal);
+}