diff --git a/client/package-lock.json b/client/package-lock.json index f7b758aa..4e3a3c31 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1,12 +1,12 @@ { "name": "tdm-calculator-client", - "version": "0.2.40", + "version": "0.2.42", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tdm-calculator-client", - "version": "0.2.40", + "version": "0.2.42", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", diff --git a/client/package.json b/client/package.json index 2de55f38..e0f09a3d 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "tdm-calculator-client", - "version": "0.2.43", + "version": "0.2.44", "private": true, "proxy": "http://localhost:5001", "scripts": { diff --git a/client/src/components/InapplicableStrategiesModal.js b/client/src/components/InapplicableStrategiesModal.js new file mode 100644 index 00000000..dbfedff6 --- /dev/null +++ b/client/src/components/InapplicableStrategiesModal.js @@ -0,0 +1,89 @@ +import React from "react"; +import PropTypes from "prop-types"; +import Modal from "react-modal"; +import Button from "./Button/Button"; +import { createUseStyles } from "react-jss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; + +const useStyles = createUseStyles({ + overlay: { + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: "rgba(255, 255, 255, 0.5)", + + zIndex: "100", + position: "fixed", + top: "0px", + left: "0px", + right: "0px", + bottom: "0px" + }, + content: { + padding: "50px", + backgroundColor: "#ffffff", + boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.2)", + width: "47%", + borderRadius: "5px" + }, + title: { + textAlign: "center" + }, + deselectedWrapper: { + textAlign: "center" + }, + deselectedAlign: { + lineHeight: "40px" + }, + modalActions: { + display: "flex", + justifyContent: "center" + } +}); +const InapplicableStrategiesModal = props => { + const { inapplicableStrategiesModal, closeStrategiesModal } = props; + + const classes = useStyles(); + + return ( + +
+ +

+ Due to changes made to the project specifications, one or more TDM + strategies are no longer applicable and have been automatically + de-selected +

+
+
+ +
+
+ ); +}; + +InapplicableStrategiesModal.propTypes = { + inapplicableStrategiesModal: PropTypes.bool.isRequired, + closeStrategiesModal: PropTypes.func +}; + +export default InapplicableStrategiesModal; diff --git a/client/src/components/ProjectWizard/TdmCalculationWizard.js b/client/src/components/ProjectWizard/TdmCalculationWizard.js index 17f6110f..292b194e 100644 --- a/client/src/components/ProjectWizard/TdmCalculationWizard.js +++ b/client/src/components/ProjectWizard/TdmCalculationWizard.js @@ -8,6 +8,7 @@ import CalculationWizardRoutes from "./CalculationWizardRoutes"; import WizardFooter from "./WizardFooter"; import WizardSidebar from "./WizardSidebar/WizardSidebar"; import ContentContainer from "../Layout/ContentContainer"; +import InapplicableStrategiesModal from "../InapplicableStrategiesModal"; const TdmCalculationWizard = props => { const { @@ -37,7 +38,9 @@ const TdmCalculationWizard = props => { dateModified, contentContainerRef, checklistModalOpen, - toggleChecklistModal + toggleChecklistModal, + inapplicableStrategiesModal, + closeStrategiesModal } = props; const context = useContext(ToastContext); const page = Number(match.params.page || 1); @@ -170,6 +173,10 @@ const TdmCalculationWizard = props => { return ( + { + setInapplicableStrategiesModal(!inapplicableStrategiesModal); + }; + const recalculate = updatedFormInputs => { const strategiesDeselected = engine.run(updatedFormInputs, resultRuleCodes); //TODO cannot read property 'run' on null when switching from calculation to public form to create project const rules = engine.showRulesArray(); @@ -151,11 +157,7 @@ export function TdmCalculationContainer({ setRules(rules); setFormHasSaved(false); if (strategiesDeselected) { - toast.add( - `Due to changes you made to the project specifications, some of - the selected strategies are no longer applicable and have - been automatically de-selected` - ); + closeStrategiesModal(); } }; @@ -571,6 +573,8 @@ export function TdmCalculationContainer({ contentContainerRef={contentContainerRef} checklistModalOpen={checklistModalOpen} toggleChecklistModal={toggleChecklistModal} + inapplicableStrategiesModal={inapplicableStrategiesModal} + closeStrategiesModal={closeStrategiesModal} /> ) : (