Replacement plan creation UI changes

src/api/plan.js

@@ -4,12 +4,12 @@ import {
   getAuthHeaderConfig,
   findStatusWithCode,
   isUserAgrologist,
-  canUserAddAttachments
-} from '../utils'
-import * as API from '../constants/api'
-import RUPSchema from '../components/rangeUsePlanPage/schema'
-import { getNetworkStatus } from '../utils/helper/network'
-import { deleteFromQueue } from './delete'
+  canUserAddAttachments,
+} from '../utils';
+import * as API from '../constants/api';
+import RUPSchema from '../components/rangeUsePlanPage/schema';
+import { getNetworkStatus } from '../utils/helper/network';
+import { deleteFromQueue } from './delete';
 import {
   saveGrazingSchedules,
   saveInvasivePlantChecklist,
@@ -109,13 +109,13 @@ export const savePlan = async (plan, user = {}) => {
     }),
   );
 
-  await saveGrazingSchedules(planId, grazingSchedules, newPastures)
-  await saveInvasivePlantChecklist(planId, invasivePlantChecklist)
-  await saveManagementConsiderations(planId, managementConsiderations)
-  await saveMinisterIssues(planId, ministerIssues, newPastures)
-  await saveAdditionalRequirements(planId, additionalRequirements)
+  await saveGrazingSchedules(planId, grazingSchedules, newPastures);
+  await saveInvasivePlantChecklist(planId, invasivePlantChecklist);
+  await saveManagementConsiderations(planId, managementConsiderations);
+  await saveMinisterIssues(planId, ministerIssues, newPastures);
+  await saveAdditionalRequirements(planId, additionalRequirements);
   if (isUserAgrologist(user) && canUserAddAttachments(plan, user)) {
-    await saveAttachments(planId, files)
+    await saveAttachments(planId, files);
   }
 
   return planId;
@@ -247,6 +247,11 @@ export const updateStatus = async ({ planId, note, statusId }) => {
   );
 };
 
+export const createReplacementPlan = async (planId) => {
+  return (await axios.put(API.REPLACEMENT_PLAN(planId), getAuthHeaderConfig()))
+    .data.replacementPlan;
+};
+
 export const updateConfirmation = async ({
   user,
   planId,

src/components/common/Banner.js

@@ -14,15 +14,26 @@ const defaultProps = {
   noDefaultHeight: false,
 };
 
-const Banner = ({ header, content, style, noDefaultHeight, contentLine2 }) => (
+const Banner = ({
+  header,
+  content,
+  style,
+  noDefaultHeight,
+  contentLine2,
+  isReplacementPlan,
+}) => (
   <div className="banner" style={style}>
     <div
       className={classnames('banner__container', {
         'banner__container--no-default-height': noDefaultHeight,
+        banner__container__highlighted: isReplacementPlan,
       })}
     >
       <div>
-        <h1 className="banner__header">{header}</h1>
+        <h1 className="banner__header">
+          {header}
+          {isReplacementPlan ? ' (Replacement Plan)' : ''}
+        </h1>
         <div className="banner__content">{content}</div>
         {contentLine2 && (
           <>

src/components/emailTemplatePage/index.js

@@ -110,7 +110,6 @@ const EmailTemplatePage = () => {
               <TextField
                 label="From Email"
                 variant="outlined"
-                fullWidth
                 value={selectedTemplate.fromEmail}
                 onChange={(event) =>
                   setSelectedTemplate({
@@ -124,7 +123,6 @@ const EmailTemplatePage = () => {
               <TextField
                 label="Subject"
                 variant="outlined"
-                fullWidth
                 value={selectedTemplate.subject}
                 onChange={(event) => {
                   setSelectedTemplate({

src/components/rangeUsePlanPage/ActionBtns.js

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

src/components/rangeUsePlanPage/PlanForm.js

@@ -15,7 +15,12 @@ import { Attachments, AttachmentsHeader } from './attachments';
 import EditableProvider from '../../providers/EditableProvider';
 import { isUUID } from 'uuid-v4';
 import { useUser } from '../../providers/UserProvider';
-import { canUserAttachMaps, canUserAddAttachments, canUserConsiderManagement, canUserAddAdditionalReqs } from '../../utils';
+import {
+  canUserAttachMaps,
+  canUserAddAttachments,
+  canUserConsiderManagement,
+  canUserAddAdditionalReqs,
+} from '../../utils';
 
 const PlanForm = ({
   plan,
@@ -98,26 +103,26 @@ const PlanForm = ({
         <EditableProvider editable={canUserAddAttachments(plan, user)}>
           <Element name={ELEMENT_ID.ATTACHMENTS} id={ELEMENT_ID.ATTACHMENTS}>
             <AttachmentsHeader />
+            <Attachments
+              planId={plan.id}
+              attachments={plan.files}
+              propertyName="decisionAttachments"
+              label="Decision Material"
+            />
             <EditableProvider editable={canUserAttachMaps(plan, user)}>
-              <Attachments
-                planId={plan.id}
-                attachments={plan.files}
-                propertyName="decisionAttachments"
-                label="Decision Material"
-              />
               <Attachments
                 planId={plan.id}
                 attachments={plan.files}
                 propertyName="mapAttachments"
                 label="Map"
               />
-              <Attachments
-                planId={plan.id}
-                attachments={plan.files}
-                propertyName="otherAttachments"
-                label="Other"
-              />
             </EditableProvider>
+            <Attachments
+              planId={plan.id}
+              attachments={plan.files}
+              propertyName="otherAttachments"
+              label="Other"
+            />
           </Element>
         </EditableProvider>
       )}

src/components/rangeUsePlanPage/manageAgentsPage/index.js

@@ -150,7 +150,6 @@ const ManageAgentsPage = ({ match }) => {
                       {...params}
                       label="Select user"
                       variant="outlined"
-                      fullWidth
                       className={classes.autocomplete}
                     />
                   )}

src/components/rangeUsePlanPage/pageForAH/index.js

@@ -20,6 +20,7 @@ import PlanForm from '../PlanForm';
 import { createAmendment, savePlan } from '../../../api';
 import { canUserEditThisPlan, isPlanAmendment } from '../../../utils';
 import NetworkStatus from '../../common/NetworkStatus';
+import permissions from '../../../constants/permissions';
 
 // Agreement Holder page
 class PageForAH extends Component {
@@ -172,7 +173,7 @@ class PageForAH extends Component {
     const { isSavingAsDraft, isSubmitting, isCreatingAmendment } = this.state;
     const { openConfirmationModal, plan, user, clientAgreements } = this.props;
     const { confirmations, status } = plan;
-
+    console.log(permissions + '****************************');
     return (
       <ActionBtns
         permissions={{
@@ -265,7 +266,12 @@ class PageForAH extends Component {
           fetchPlan={fetchPlan}
         />
 
-        <Banner noDefaultHeight header={bannerHeader} content={bannerContent} />
+        <Banner
+          noDefaultHeight
+          header={bannerHeader}
+          content={bannerContent}
+          isReplacementPlan={plan.replacementOf != null}
+        />
 
         <StickyHeader>
           <div className="rup__actions__background">

src/components/rangeUsePlanPage/pageForStaff/index.js

@@ -254,7 +254,12 @@ class PageForStaff extends Component {
           content={strings.SUBMIT_PLAN_CONFIRM_CONTENT}
         />
 
-        <Banner header={bannerHeader} content={bannerContent} noDefaultHeight />
+        <Banner
+          header={bannerHeader}
+          content={bannerContent}
+          noDefaultHeight
+          isReplacementPlan={plan.replacementOf != null}
+        />
 
         <StickyHeader>
           <div className="rup__actions__background">

src/components/selectRangeUsePlanPage/CreateReplacementPlan.js

@@ -0,0 +1,23 @@
+import { useHistory } from 'react-router-dom';
+import React from 'react';
+import { MenuItem } from '@material-ui/core';
+import { createReplacementPlan } from '../../api';
+import { RANGE_USE_PLAN } from '../../constants/routes';
+
+const CreateReplacementPlan = ({ planId }) => {
+  const history = useHistory();
+  return (
+    <MenuItem
+      onClick={async (e) => {
+        e.stopPropagation();
+        const replacementPlan = await createReplacementPlan(planId);
+        console.log(replacementPlan);
+        history.push(`${RANGE_USE_PLAN}/${replacementPlan.id}`);
+      }}
+    >
+      Create Replacement Plan
+    </MenuItem>
+  );
+};
+
+export default CreateReplacementPlan;

src/components/selectRangeUsePlanPage/ExtensionColumn.js

@@ -147,6 +147,10 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           return <div>Staff Rejected</div>;
         case PLAN_EXTENSION_STATUS.DISTRICT_MANAGER_REJECTED:
           return <div>District Manager Rejected</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_CREATED:
+          return <div>Replacement Plan Created</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_ACTIVE:
+          return <div>Active Replacement Plan</div>;
         case PLAN_EXTENSION_STATUS.AWAITING_EXTENSION:
           if (
             agreement.plan?.extensionReceivedVotes ===
@@ -205,6 +209,7 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
 
   const renderExtensionForStaff = (user, agreement) => {
     if (isUserStaff(user)) {
+      console.log(agreement.plan?.extensionStatus);
       switch (agreement.plan?.extensionStatus) {
         case PLAN_EXTENSION_STATUS.AWAITING_VOTES:
           if (
@@ -253,6 +258,10 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           return <div>District Manager Rejected</div>;
         case PLAN_EXTENSION_STATUS.AWAITING_EXTENSION:
           return <div>Awaiting Extension</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_CREATED:
+          return <div>Replacement Plan Created</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_ACTIVE:
+          return <div>Active Replacement Plan</div>;
         case PLAN_EXTENSION_STATUS.EXTENDED:
           return (
             <div>
@@ -302,11 +311,14 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           } else {
             if (
               agreement.plan?.planExtensionRequests.filter((request) => {
-                return request.userId === user.id && request.requestedExtension;
-              }).length === 0
+                return (
+                  request.userId === user.id &&
+                  request.requestedExtension === true
+                );
+              }).length !== 0
             )
-              return <>Rejected</>;
-            return <>Requested</>;
+              return <>Requested</>;
+            return <>-</>;
           }
         case PLAN_EXTENSION_STATUS.AGREEMENT_HOLDER_REJECTED:
           return <div>Agreement Holder Rejected</div>;
@@ -316,6 +328,10 @@ export default function ExtensionColumn({ user, currentPage, agreement }) {
           return <div>District Manager Rejected</div>;
         case PLAN_EXTENSION_STATUS.AWAITING_EXTENSION:
           return <div>Awaiting Extension</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_CREATED:
+          return <div>Replacement Plan Created</div>;
+        case PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_ACTIVE:
+          return <div>Active Replacement Plan</div>;
         case PLAN_EXTENSION_STATUS.EXTENDED:
           return (
             <div>

src/components/selectRangeUsePlanPage/NewPlanButton.js

@@ -25,7 +25,6 @@ const NewPlanButton = ({ agreement }) => {
 
   return (
     <Button
-      fullWidth
       variant="contained"
       disableElevation
       color="primary"

src/components/selectRangeUsePlanPage/PlanActions.js

@@ -1,18 +1,16 @@
-import React from 'react';
+import { Button } from '@material-ui/core';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Grow from '@material-ui/core/Grow';
+import MenuList from '@material-ui/core/MenuList';
 import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import { Button } from '@material-ui/core';
-import { RANGE_USE_PLAN } from '../../constants/routes';
+import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
+import React from 'react';
 import * as strings from '../../constants/strings';
-import EditIcon from '@material-ui/icons/Edit';
-import ViewIcon from '@material-ui/icons/Visibility';
-import { Link } from 'react-router-dom';
+import { PLAN_EXTENSION_STATUS } from '../../constants/variables';
+import CreateReplacementPlan from './CreateReplacementPlan';
 import NewPlanMenuItem from './NewPlanMenuItem';
-import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
+import ViewPlanMenuItem from './ViewPlanMenuItem';
 
 export default function PlanActions({
   agreement,
@@ -35,7 +33,6 @@ export default function PlanActions({
 
     setOpen(false);
   };
-
   return (
     <div>
       <Button
@@ -69,34 +66,31 @@ export default function PlanActions({
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList autoFocusItem={open} id="menu-list-grow">
                   {planId && (
-                    <MenuItem
-                      fullWidth
-                      variant="outlined"
-                      component={Link}
-                      to={{
-                        pathname: `${RANGE_USE_PLAN}/${planId}`,
-                        state: {
-                          page: currentPage,
-                          prevSearch: location.search,
-                        },
-                      }}
-                    >
-                      {canEdit ? (
-                        <>
-                          <EditIcon fontSize="small" />
-                          {strings.EDIT}
-                        </>
-                      ) : (
-                        <>
-                          <ViewIcon fontSize="small" />
-                          {strings.VIEW}
-                        </>
-                      )}
-                    </MenuItem>
+                    <ViewPlanMenuItem
+                      planId={planId}
+                      currentPage={currentPage}
+                      menuText={canEdit ? strings.EDIT : strings.VIEW}
+                    />
                   )}
                   {canCreatePlan && !planId && (
                     <NewPlanMenuItem agreement={agreement} />
                   )}
+                  {[
+                    PLAN_EXTENSION_STATUS.AGREEMENT_HOLDER_REJECTED,
+                    PLAN_EXTENSION_STATUS.STAFF_REJECTED,
+                    PLAN_EXTENSION_STATUS.DISTRICT_MANAGER_REJECTED,
+                  ].includes(agreement.plan?.extensionStatus) && (
+                    <CreateReplacementPlan planId={planId} />
+                  )}
+                  {[PLAN_EXTENSION_STATUS.REPLACEMENT_PLAN_CREATED].includes(
+                    agreement.plan?.extensionStatus,
+                  ) && (
+                    <ViewPlanMenuItem
+                      planId={agreement.plan?.replacementPlanId}
+                      currentPage={currentPage}
+                      menuText={'View Replacement Plan'}
+                    />
+                  )}
                 </MenuList>
               </ClickAwayListener>
             </Paper>