Merge branch 'release-1.0.52' into main

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "foodoasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,

client/src/components/Account/SecurityAdminDashboard/SecurityAdminDashboard.js

@@ -72,6 +72,10 @@ const SecurityAdminDashboard = () => {
         account["isSecurityAdmin"] = value;
       } else if (permission === "is_data_entry") {
         account["isDataEntry"] = value;
+      } else if (permission === "is_global_admin") {
+        account["isGlobalAdmin"] = value;
+      } else if (permission === "is_global_reporting") {
+        account["isGlobalReporting"] = value;
       }
     }
     let filtered = [...filteredAccounts, { ...account }];

client/src/components/Account/SecurityAdminDashboard/SecurityTable.js

@@ -10,6 +10,7 @@ import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import Checkbox from "@material-ui/core/Checkbox";
 import * as accountService from "../../../services/account-service";
+import { UserContext } from "../../../contexts/user-context";
 
 const useStyles = makeStyles({
   table: {
@@ -72,6 +73,40 @@ export default function SecurityTable(props) {
     }
   };
 
+  // arg `roleType` is expected to be one of:
+  //   'globalAdmin' or 'globalReporting'
+  const handleGlobalToggle = (userId, e, roleType) => {
+    if (roleType === "globalAdmin") {
+      props.accounts.map(async (each) => {
+        if (userId === each.id) {
+          let check = e.target.checked;
+          await accountService.setGlobalPermissions(
+            each.id,
+            "is_global_admin",
+            check
+          );
+          await props.handlePermissionChange(each.id, "is_global_admin", check);
+        }
+      });
+    } else if (roleType === "globalReporting") {
+      props.accounts.map(async (each) => {
+        if (userId === each.id) {
+          let check = e.target.checked;
+          await accountService.setPermissions(
+            each.id,
+            "is_global_reporting",
+            check
+          );
+          await props.handlePermissionChange(
+            each.id,
+            "is_global_reporting",
+            check
+          );
+        }
+      });
+    }
+  };
+
   return (
     <TableContainer component={Paper}>
       <Table className={classes.table} aria-label="simple table">
@@ -81,6 +116,20 @@ export default function SecurityTable(props) {
             <TableCell align="right" className={classes.text}>
               Name
             </TableCell>
+            <UserContext.Consumer>
+              {(user) =>
+                user && user.isGlobalAdmin ? (
+                  <>
+                    <TableCell align="right" className={classes.text}>
+                      Root
+                    </TableCell>
+                    <TableCell align="right" className={classes.text}>
+                      Reports
+                    </TableCell>
+                  </>
+                ) : null
+              }
+            </UserContext.Consumer>
             <TableCell align="right" className={classes.text}>
               Admin
             </TableCell>
@@ -105,6 +154,30 @@ export default function SecurityTable(props) {
                 <TableCell align="right">
                   {row.lastName}, {row.firstName}
                 </TableCell>
+                <UserContext.Consumer>
+                  {(user) =>
+                    user && user.isGlobalAdmin ? (
+                      <>
+                        <TableCell align="right">
+                          <Checkbox
+                            checked={row.isGlobalAdmin}
+                            onChange={(e) =>
+                              handleGlobalToggle(row.id, e, "globalAdmin")
+                            }
+                          />
+                        </TableCell>
+                        <TableCell align="right">
+                          <Checkbox
+                            checked={row.isGlobalReporting}
+                            onChange={(e) =>
+                              handleGlobalToggle(row.id, e, "globalReporting")
+                            }
+                          />
+                        </TableCell>
+                      </>
+                    ) : null
+                  }
+                </UserContext.Consumer>
                 <TableCell align="right">
                   <Checkbox
                     checked={row.isAdmin}

client/src/components/FoodSeeker/Home.js

@@ -12,6 +12,7 @@ import logo from "images/foodoasis.svg";
 import logoCA from "images/foodoasis.svg";
 import logoHI from "images/foodoasis.svg";
 import { tenantId } from "helpers/Configuration";
+import * as analytics from "../../services/analytics";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -120,7 +121,7 @@ const Home = (props) => {
   const { origin, setOrigin, userCoordinates, browserLocation } = props;
 
   useEffect(() => {
-    window.stormly("event", "visitLandingPage");
+    analytics.postEvent("visitLandingPage");
   }, []);
 
   React.useEffect(() => {

client/src/components/FoodSeeker/ResultsContainer.js

@@ -12,6 +12,7 @@ import { DEFAULT_CATEGORIES } from "constants/stakeholder";
 import Filters from "./ResultsFilters";
 import List from "./ResultsList";
 import Map from "./ResultsMap";
+import * as analytics from "../../services/analytics";
 
 const useStyles = makeStyles((theme) => ({
   listMapContainer: {
@@ -65,6 +66,11 @@ export default function ResultsContainer({
   const doSelectStakeholder = useCallback(
     (stakeholder) => {
       if (stakeholder) {
+        analytics.postEvent("selectOrganization", {
+          id: stakeholder.id,
+          name: stakeholder.name,
+        });
+
         //Update url history
         const name = stakeholder.name.toLowerCase().replaceAll(" ", "_");
         history.push(`/organizations?org=${name}`);

client/src/components/FoodSeeker/ResultsList.js

@@ -5,6 +5,7 @@ import { Button, CircularProgress, Grid } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import StakeholderPreview from "components/FoodSeeker/StakeholderPreview";
 import { isMobile } from "helpers";
+import * as analytics from "../../services/analytics";
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -58,6 +59,10 @@ const ResultsList = ({
     itemsRef.current = itemsRef.current.slice(0, stakeholders.length);
   }, [stakeholders]);
 
+  useEffect(() => {
+    analytics.postEvent("showList");
+  }, []);
+
   const mobileView = isMobile();
 
   const selectStakeholder = (stakeholder) => {

client/src/components/FoodSeeker/ResultsMap.js

@@ -1,6 +1,10 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
-import ReactMapGL, { NavigationControl } from "react-map-gl";
+import ReactMapGL, {
+  NavigationControl,
+  ScaleControl,
+  AttributionControl,
+} from "react-map-gl";
 import { Grid, Button } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 
@@ -12,16 +16,27 @@ import StakeholderPreview from "components/FoodSeeker/StakeholderPreview";
 import StakeholderDetails from "components/FoodSeeker/StakeholderDetails";
 import * as analytics from "../../services/analytics";
 
-
 const styles = {
   navigationControl: {
     position: "absolute",
     top: 0,
-    right: 0,
-    margin: "10px",
+    right: 30,
+    margin: "8px",
     marginRight: "40px",
     zIndex: 5,
   },
+  scaleControl: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    margin: "8px",
+
+    zIndex: 5,
+  },
+  attributionStyle: {
+    right: 10,
+    bottom: 0,
+  },
 };
 
 const useStyles = makeStyles((theme) => ({
@@ -80,6 +95,10 @@ function Map({
     ? categoryIds
     : DEFAULT_CATEGORIES;
 
+  useEffect(() => {
+    analytics.postEvent("showMap");
+  }, []);
+
   const onInteractionStateChange = (s) => {
     // don't do anything if the mapview is moving
     if (
@@ -150,9 +169,21 @@ function Map({
           onClick={unselectStakeholder}
           onInteractionStateChange={onInteractionStateChange}
         >
+          <AttributionControl
+            compact={mobileView}
+            style={styles.attributionStyle}
+          />
           <div style={styles.navigationControl}>
             <NavigationControl showCompass={false} />
           </div>
+          <div style={styles.scaleControl}>
+            <ScaleControl
+              maxWidth={100}
+              unit="imperial"
+              className={classes.scaleControl}
+            />
+          </div>
+
           {showSearchArea && (
             <Button
               onClick={searchArea}

client/src/components/FoodSeeker/Suggestion.js

@@ -54,6 +54,7 @@ function Suggestion(props) {
     tipsterName: "",
     tipsterPhone: "",
     tipsterEmail: "",
+    category: "",
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -109,6 +110,20 @@ function Suggestion(props) {
             onChange={handleChange}
           />
         </Grid>
+        <Grid item xs={12}>
+          <TextField
+            type="text"
+            size="small"
+            label="Category (Food Pantry, Meal Program, etc.)"
+            name="category"
+            variant="outlined"
+            margin="normal"
+            fullWidth
+            autoFocus
+            value={stakeholder.category}
+            onChange={handleChange}
+          />
+        </Grid>
         <Grid item xs={12}>
           <TextField
             type="text"

client/src/components/FoodSeeker/SuggestionDialog.js

@@ -31,6 +31,7 @@ function SuggestionDialog(props) {
           tipsterName: "",
           tipsterPhone: "",
           tipsterEmail: "",
+          category: "",
         }
       : {
           id: 0,
@@ -47,6 +48,7 @@ function SuggestionDialog(props) {
           tipsterName: "",
           tipsterPhone: "",
           tipsterEmail: "",
+          category: "",
         }
   );
 

client/src/components/Layout/Menu.js

@@ -150,7 +150,7 @@ export default function Menu(props) {
                   <Divider />
                 </>
               ) : null}
-              {user && user.isSecurityAdmin ? (
+              {user && (user.isSecurityAdmin || user.isGlobalAdmin) ? (
                 <>
                   <MenuItemLink
                     key="securityadmindashboard"

client/src/components/StaticPages/About.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import aboutbg from "./assets/about-bg.png";
 import iconSpacer from "./assets/icon-spacer.svg";
@@ -9,6 +9,7 @@ import farmPeople from "./assets/farm-people.png";
 import foodBank from "./assets/food-bank.png";
 import { makeStyles } from "@material-ui/core";
 import Footer from "../Layout/Footer";
+import * as analytics from "../../services/analytics";
 
 const useStyles = makeStyles(() => ({
   outer: {
@@ -138,6 +139,11 @@ const useStyles = makeStyles(() => ({
 }));
 const About = () => {
   const classes = useStyles();
+
+  useEffect(() => {
+    analytics.postEvent("visitAboutPage");
+  }, []);
+
   // const { t } = useTranslation("about");
   return (
     <div className={classes.outer}>

client/src/components/StaticPages/Donate.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import donatebg from "./assets/donate-bg.png";
 import iconSpacer from "./assets/icon-spacer.svg";
@@ -23,6 +23,7 @@ import donationStep6 from "images/donationStep6.png";
 import donationStep7 from "images/donationStep7.png";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
+import * as analytics from "../../services/analytics";
 
 const useStyles = makeStyles((theme) => ({
   outer: {
@@ -209,6 +210,10 @@ const Donate = () => {
   const classes = useStyles();
   const [showDonationDialog, setShowDonationDialog] = React.useState(false);
 
+  useEffect(() => {
+    analytics.postEvent("visitDonatePage");
+  }, []);
+
   const handleShowDonationDialog = () => {
     setShowDonationDialog(showDonationDialog ? false : true);
   };

client/src/components/StaticPages/Faq.js

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import faqbg from "./assets/faq-bg.png";
 import iconSpacer from "./assets/icon-spacer.svg";
 import iconSpacerBlue from "./assets/icon-spacer-blue.svg";
 import { makeStyles } from "@material-ui/core";
 import Footer from "../Layout/Footer";
+import * as analytics from "../../services/analytics";
 
 const useStyles = makeStyles(() => ({
   outer: {
@@ -114,6 +115,11 @@ const useStyles = makeStyles(() => ({
 }));
 const About = () => {
   const classes = useStyles();
+
+  useEffect(() => {
+    analytics.postEvent("visitFaqPage");
+  }, []);
+
   // const { t } = useTranslation("about");
   return (
     <div className={classes.outer}>