Add summary step to the wizard

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.4.1",
         "@emotion/styled": "^11.3.0",
+        "@mui/icons-material": "^5.0.4",
         "@mui/material": "^5.0.2",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
@@ -2834,6 +2835,38 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.0.4.tgz",
+      "integrity": "sha512-pW/2bjRGnBZujoLdtH/C+ghT0Tmlk9HmZHF6HuALuVOnRiHF9VwrcNrx0FLHYT0aMARZR4dBA15nU/53R1YNeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/icons-material/node_modules/@babel/runtime": {
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.2.tgz",
@@ -25645,6 +25678,24 @@
         }
       }
     },
+    "@mui/icons-material": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.0.4.tgz",
+      "integrity": "sha512-pW/2bjRGnBZujoLdtH/C+ghT0Tmlk9HmZHF6HuALuVOnRiHF9VwrcNrx0FLHYT0aMARZR4dBA15nU/53R1YNeQ==",
+      "requires": {
+        "@babel/runtime": "^7.15.4"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "@mui/material": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.2.tgz",

frontend/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.4",
     "@mui/material": "^5.0.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",

frontend/src/components/steps/summary/SummaryContent.js

@@ -1,12 +1,99 @@
-import { useEffect } from 'react';
+import * as React from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import SummaryTable from './SummaryTable'
+import LocationRepository from '../../../repository/LocationRepository'
+
 
 export default function SummaryContent(props) {
-    
+    const [expanded, setExpanded] = React.useState(null);
-    useEffect(() => {
+    const [locationDetails, setLocationDetails] = React.useState({})
+
+    const getLocationDetails = () => {
+        LocationRepository.getLocationData(props.filters).then(result => {
+            setLocationDetails(result);
+        })
+    }
+
+    const handleChange = (panel) => (event, isExpanded) => {
+        setExpanded(isExpanded ? panel : false);
+      };
+
+    React.useEffect(() => {
         props.setNextDisabled(false);
+        !Object.keys(locationDetails).length && getLocationDetails()
     });
 
+    function createData(name, value) {
+        return { name, value };
+    }
+
+    const locationData = [
+        createData('Geographical Coordinates (latitude, longitude)', `(${props.filters.coordinates.lat}, ${props.filters.coordinates.lng})`),
+        createData('Ecological Region', locationDetails.ecological_region || ''),
+        createData('Ecological District', locationDetails.ecological_district || ''),
+        createData('Property Name', locationDetails.full_address || ''),
+    ];
+
+    const soilData = [
+        createData('Soil Order', `${locationDetails.soil_name} (${locationDetails.soil_code})` || ''),
+        createData('Soil Variant', props.filters.soilVariant)
+    ];
+
+    const siteData = [
+        createData('Habitat', ''),
+        createData('Zone', '')
+    ];
+
+    const projectSpecificsData = [
+        createData('Requrements', '')
+    ];
+
     return (
-        <h2>Summary Content</h2>
+        <div className='summary-content'>
+            <Typography mb={2} mt={2} >Please review your choices presented below: </Typography>
+            <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} >
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                >
+                    <Typography>1. Location Data</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <SummaryTable rows={locationData} />
+                </AccordionDetails>
+            </Accordion>
+            <Accordion  expanded={expanded === 'panel2'} onChange={handleChange('panel2')} >
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                >
+                    <Typography>2. Soil Properties</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <SummaryTable rows={soilData} />
+                </AccordionDetails>
+            </Accordion>
+            <Accordion  expanded={expanded === 'panel3'} onChange={handleChange('panel3')} >
+                <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                >
+                    <Typography>3. Project Site Details</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <SummaryTable rows={siteData} />
+                </AccordionDetails>
+            </Accordion>
+            <Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')} >
+                <AccordionSummary expandIcon={<ExpandMoreIcon />} >
+                    <Typography>4. Project Specifics</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <SummaryTable rows={projectSpecificsData} />
+                </AccordionDetails>
+            </Accordion>
+        </div>
     )
 }

frontend/src/components/steps/summary/SummaryTable.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
+
+export default function BasicTable(props) {
+  return (
+    <TableContainer >
+      <Table sx={{ minWidth: 650 }} size="small" aria-label="simple table">
+        <TableBody>
+          {props.rows.map((row) => (
+            <TableRow
+              key={row.name}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.value}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}