Feature: Toast prompt for user feedback form (#2192)

* completed toast

* changed toast to be more simple as discussed

client/package.json

@@ -20,7 +20,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mapbox/geo-viewport": "^0.4.1",
-    "@mui/icons-material": "^5.16.4",
+    "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.113",
     "@mui/material": "^5.11.1",
     "@mui/x-data-grid": "^5.17.20",

client/src/App.js

@@ -1,8 +1,9 @@
-import { CssBaseline } from "@mui/material";
+import { CssBaseline, Snackbar } from "@mui/material";
+import SurveySnackbar from "./components/UI/SurveySnackbar";
 import { SiteProvider } from "contexts/siteContext";
 import { ToasterProvider } from "contexts/toasterContext";
 import { UserProvider } from "contexts/userContext";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { BrowserRouter as Router } from "react-router-dom";
 import { ThemeProvider } from "theme";
@@ -17,6 +18,18 @@ function App() {
     analytics.postEvent("visitAppComponent");
   }, []);
 
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+
+  const handleOpenSnackbar = (message) => {
+    setSnackbarMessage(message);
+    setSnackbarOpen(true);
+  };
+
+  const handleCloseSnackbar = () => {
+    setSnackbarOpen(false);
+  };
+
   return (
     <HelmetProvider>
       <CssBaseline />
@@ -33,6 +46,12 @@ function App() {
                 <MapProvider>
                   <Router>
                     <AppRoutes />
+                    <SurveySnackbar
+                      open={snackbarOpen}
+                      autoHideDuration={6000}
+                      onClose={handleCloseSnackbar}
+                      message={snackbarMessage}
+                    />
                   </Router>
                 </MapProvider>
               </ThemeProvider>

client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.js

@@ -1,4 +1,12 @@
-import { Box, Button, Chip, Divider, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Chip,
+  Divider,
+  Snackbar,
+  Stack,
+  Typography,
+} from "@mui/material";
 import Grid2 from "@mui/material/Unstable_Grid2";
 import {
   FOOD_PANTRY_CATEGORY_ID,
@@ -191,6 +199,10 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
               component="h2"
               align="left"
               fontWeight="bold"
+              sx={{
+                color: { xs: "black", md: "inherit" },
+                textDecoration: { xs: "underline", md: "none" },
+              }}
               onClick={() => handleSelectOrganization(stakeholder)}
             >
               {stakeholder.name}
@@ -199,7 +211,9 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
               direction="row"
               flexWrap="wrap"
               marginTop="8px"
-              sx={{ gap: "16px" }}
+              sx={{
+                gap: "16px",
+              }}
               onClick={() => handleSelectOrganization(stakeholder)}
             >
               {stakeholder.categories

client/src/components/UI/SurveySnackbar.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "@mui/material";
+
+import Stack from "@mui/material/Stack";
+import Snackbar from "@mui/material/Snackbar";
+import Box from "@mui/material/Box";
+
+const SurveySnackbar = () => {
+  const [open, setOpen] = useState(() => {
+    const isClosed = localStorage.getItem("surveySnackbarClosed");
+    return isClosed !== "true";
+  });
+
+  const handleClose = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setOpen(false);
+    localStorage.setItem("surveySnackbarClosed", "true");
+  };
+
+  const openForm = () => {
+    window.open(
+      "https://docs.google.com/forms/d/e/1FAIpQLSdAhi_nMKQfWVHjfpl1ZkmymBTt8BW7YNqVIOJ4JKYgSL4O3g/viewform",
+      "_blank"
+    );
+  };
+
+  const action = (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "520px",
+        cursor: "pointer",
+      }}
+    >
+      <span> Participate in a quick survey</span>
+      <Button onClick={openForm}> Complete Survey </Button>
+      <Button onClick={handleClose}> OPT OUT </Button>
+    </Box>
+  );
+
+  return (
+    <Stack spacing={2} sx={{ maxWidth: 700 }}>
+      <Snackbar
+        open={open}
+        onClose={handleClose}
+        action={action}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        sx={{
+          "& .MuiSnackbar-root": {
+            width: "100%",
+          },
+        }}
+      >
+        <Box
+          sx={{
+            backgroundColor: "#323232",
+            color: "white",
+            padding: 2,
+            borderRadius: 1,
+          }}
+        >
+          <Box>{action}</Box>
+        </Box>
+      </Snackbar>
+    </Stack>
+  );
+};
+
+export default SurveySnackbar;