Merge branch 'release-1.0.85'

.github/ISSUE_TEMPLATE/a---blank-issue.md

@@ -2,7 +2,7 @@
 name: A - Blank Issue
 about: Consistent formatting make Issues concise and easy to navigate
 title: ''
-labels: ''
+labels: 'Missing: Feature, Missing: Milestone, Missing: Role, Missing: Size'
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/a---bug-report.md

@@ -2,7 +2,7 @@
 name: A - Bug report
 about: Create a report to help us improve
 title: 'Bug: '
-labels: ''
+labels: 'Release Note: Bug'
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/a---feature-request.md

@@ -6,6 +6,7 @@ labels: ''
 assignees: ''
 
 ---
+
 (This form helps the reporter give enough information so that product managers, designers/researchers, and programmers can evaluate the issue, prioritize it, and resolve it.)
 
 

.github/ISSUE_TEMPLATE/recruit-volunteers-for-specific-open-roles-template.md

@@ -0,0 +1,27 @@
+---
+name: Recruit volunteers for specific open roles template
+about: Use this when you want to post an open role see issue 2161
+title: "[Replace with PROJECT INITIALS]: Open Role for: [Replace with NAME OF ROLE]"
+labels: 'Missing: Milestone, Missing: Role'
+assignees: ''
+
+---
+
+<img src="https://tinyurl.com/picfoodoasis" width=400px>
+
+#### Body
+**Project Name**: Food Oasis
+
+**Name of Role**: [Replace with NAME OF ROLE]
+
+**Volunteer Opportunity**: [Replace with CUSTOM RECRUITMENT MESSAGE]
+
+**Duration**: [Replace with On-going, or SPECIFY DURATION]
+
+**Meeting Times**: [Replace with the MEETING TIMES THAT THIS ROLE MUST ATTEND AND ANY OPTIONAL MEETINGS, MARKING THEM AS OPTIONAL)
+
+**Who to communicate your interest to**
+- Slack channel link: [#[Replace with NAME OF SLACK CHANNEL]]([Replace with LINK TO YOUR SLACK CHANNEL])
+- Slack name of person to contact in the channel: see who this issue is assigned to and @ message them in the channel above
+
+[Read more about the project](https://www.hackforla.org/projects/food-oasis

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "foodoasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.84",
+  "version": "1.0.85",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,
@@ -20,13 +20,12 @@
     "@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",
     "@mui/x-date-pickers": "^6.8.0",
-    "@types/mapbox-gl": "^3.1.0",
-    "axios": "^1.6.7",
+    "axios": "^1.7.4",
     "dayjs": "^1.11.7",
     "debounce-fn": "^5.0.0",
     "formik": "^2.2.9",

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/Admin/OrganizationEdit.js

@@ -51,12 +51,34 @@ const validationSchema = Yup.object().shape({
   longitude: Yup.number().required("Longitude is required").min(-180).max(180),
   email: Yup.string().email("Invalid email address format"),
   hours: Yup.array().of(HourSchema),
+  instagram: Yup.string()
+    .transform((value, originalValue) => (originalValue === "" ? null : value))
+    .matches(
+      /^(?:@?[a-zA-Z0-9_.]{1,30})$/,
+      "Valid Instagram username required."
+    )
+    .nullable(),
   twitter: Yup.string()
+    .transform((value, originalValue) => (originalValue === "" ? null : value))
+    .matches(/^(?:@?[a-zA-Z0-9_]{1,15})$/, "Valid Twitter username required.")
+    .nullable(),
+
+  pinterest: Yup.string()
+    .transform((value, originalValue) =>
+      originalValue.trim() === "" ? null : value
+    )
     .matches(
-      /^https?:\/\/(www\.)?(twitter\.com|x\.com)\/.*/,
-      "Invalid URL, e.g. 'https://twitter.com/ or https://x.com/'"
+      /^@?(?=.*[a-zA-Z])[a-zA-Z0-9_]{3,30}$/,
+      "Valid Pinterest username is required."
     )
-    .required("Full Twitter/X URL is required."),
+    .nullable(),
+  facebook: Yup.string()
+    .matches(
+      /^[a-zA-Z][a-zA-Z0-9.]{4,49}$/,
+      "Valid Facebook username required."
+    )
+    .nullable(),
+
   selectedCategoryIds: Yup.array().min(
     1,
     "You must select at least one category"

client/src/components/Admin/OrganizationEdit/ContactDetails.js

@@ -1,7 +1,58 @@
-import { Grid, TextField } from "@mui/material";
+import { Grid } from "@mui/material";
 import { TabPanel } from "components/Admin/ui/TabPanel";
+import { InputAdornment, TextField } from "@mui/material";
 import Label from "../ui/Label";
 
+const CustomTextFieldComponent = ({
+  id,
+  name,
+  placeholder,
+  value,
+  onChange,
+  onBlur,
+  touched,
+  errors,
+  startAdornment,
+}) => (
+  <TextField
+    id={id}
+    sx={{
+      "& .MuiOutlinedInput-root": {
+        borderRadius: "4px",
+        backgroundColor: "white",
+        paddingLeft: "0",
+        "& fieldset": {
+          borderColor: "grey",
+        },
+        "& input::placeholder": {
+          color: "#B0BEC5",
+          opacity: 1,
+        },
+      },
+      "& .MuiInputAdornment-root": {
+        backgroundColor: "#F4F6F8",
+        padding: "22px 8px 22px 8px",
+        borderRight: "1px solid grey",
+        borderRadius: "4px 0 0 4px",
+        color: "#B0BEC5",
+        margin: "-20px 0",
+      },
+    }}
+    name={name}
+    placeholder={placeholder}
+    value={value}
+    onChange={onChange}
+    onBlur={onBlur}
+    helperText={touched ? errors : ""}
+    error={Boolean(touched && errors)}
+    InputProps={{
+      startAdornment: startAdornment && (
+        <InputAdornment position="start">{startAdornment}</InputAdornment>
+      ),
+    }}
+  />
+);
+
 export default function ContactDetails({
   tabPage,
   values,
@@ -34,67 +85,89 @@ export default function ContactDetails({
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
-            <Label id="instagram" label="Instagram" />
-            <TextField
+            <Label
+              id="instagram"
+              label="Instagram"
+              tooltipTitle="Enter your Instagram username"
+              href="https://instagram.com/"
+              handle={values.instagram}
+            />
+            <CustomTextFieldComponent
               id="instagram"
               name="instagram"
-              placeholder="Instagram"
+              placeholder="Instagram username"
               value={values.instagram}
               onChange={handleChange}
               onBlur={handleBlur}
-              helperText={touched.instagram ? errors.instagram : ""}
-              error={touched.instagram && Boolean(errors.instagram)}
+              touched={touched.instagram}
+              errors={errors.instagram}
+              startAdornment="https://instagram.com/"
             />
           </div>
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
-            <Label id="facebook" label="Facebook" />
-            <TextField
+            <Label
+              id="facebook"
+              label="Facebook"
+              tooltipTitle="Enter your Facebook username"
+              href="https://facebook.com/"
+              handle={values.facebook}
+            />
+            <CustomTextFieldComponent
               id="facebook"
               name="facebook"
-              placeholder="Facebook"
+              placeholder="Facebook username"
               value={values.facebook}
               onChange={handleChange}
               onBlur={handleBlur}
-              helperText={touched.facebook ? errors.facebook : ""}
-              error={touched.facebook && Boolean(errors.facebook)}
+              touched={touched.facebook}
+              errors={errors.facebook}
+              startAdornment="https://facebook.com/"
             />
           </div>
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
             <Label
-              id="twitter"
+              id="twitter-label"
               label="Twitter"
-              tooltipTitle="URL must start with 'https://twitter.com/ or https://x.com/'"
-              href={values.twitter}
+              tooltipTitle="Enter your Twitter username"
+              href="https://twitter.com/"
+              handle={values.twitter}
             />
-
-            <TextField
+            <CustomTextFieldComponent
               id="twitter"
               name="twitter"
-              placeholder="Twitter"
+              placeholder="Twitter username"
               value={values.twitter}
               onChange={handleChange}
               onBlur={handleBlur}
-              helperText={touched.twitter ? errors.twitter : ""}
-              error={touched.twitter && Boolean(errors.twitter)}
+              touched={touched.twitter}
+              errors={errors.twitter}
+              startAdornment="https://twitter.com/"
             />
           </div>
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
-            <Label id="pinterest" label="Pinterest" />
-            <TextField
+            <Label
+              id="pinterest"
+              label="Pinterest"
+              href="https://pinterest.com/"
+              handle={values.pinterest}
+              tooltipTitle="Enter your Pinterest username"
+            />
+            <CustomTextFieldComponent
               id="pinterest"
               name="pinterest"
-              placeholder="Pinterest"
+              placeholder="Pinterest username"
               value={values.pinterest}
               onChange={handleChange}
               onBlur={handleBlur}
-              helperText={touched.pinterest ? errors.pinterest : ""}
-              error={touched.pinterest && Boolean(errors.pinterest)}
+              touched={touched.pinterest}
+              errors={errors.pinterest}
+              startAdornment="https://pinterest.com/"
             />
           </div>
         </Grid>

client/src/components/Admin/ui/Label.js

@@ -13,13 +13,15 @@ import {
 import { useState } from "react";
 import { tooltipHover } from "theme/palette";
 
-const Label = ({ id, label, tooltipTitle, href }) => {
+const Label = ({ id, label, tooltipTitle, href, handle }) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
   const handleToolTipToggle = () => {
     setTooltipOpen((prevOpen) => !prevOpen);
   };
 
+  const combinedLink = `${href}${handle}`;
+
   return (
     <InputLabel htmlFor={id}>
       <Stack
@@ -50,14 +52,14 @@ const Label = ({ id, label, tooltipTitle, href }) => {
           )}
         </Stack>
 
-        {href && (
+        {handle && (
           <Button
             variant="text"
             size="small"
             sx={{ textTransform: "none" }}
             rel="noopener"
             component={Link}
-            href={href}
+            href={combinedLink}
             startIcon={<LaunchIcon />}
           >
             Go To Link