Merge branch 'release-1.0.92'

Author: entrotech

client/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "foodoasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.91",
+  "version": "1.0.92",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,
@@ -68,7 +68,7 @@
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.3.1",
     "@types/react-gtm-module": "^2.0.4",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "babel-jest": "^29.7.0",
     "babel-preset-vite": "^1.1.3",
     "jest": "^29.7.0",
@@ -77,7 +77,7 @@
     "prettier": "^2.4.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.0.0",
-    "vite": "^5.4.9",
+    "vite": "^6.2.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.0.1"
   },

client/package.json

@@ -20,6 +20,7 @@ export default function ContactDetails({
               id="website"
               label="Website"
               tooltipTitle="Enter the Full URL for the organization's web site, e.g., https://www.hackforla.org"
+              href={values.website}
             />
             <TextField
               id="website"

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

@@ -36,7 +36,9 @@ const CustomButton = styled(Button, {
       ? theme.palette.filterButtons.backgroundColor
       : theme.palette.common.white,
     "&:hover": {
-      backgroundColor: theme.palette.filterButtons.backgroundColor,
+      backgroundColor: isSelected
+        ? theme.palette.filterButtons.hoverSelectedColor
+        : theme.palette.filterButtons.hoverColor,
     },
   },
 }));

client/src/components/FoodSeeker/SearchResults/AdvancedFilters/AdvancedFilterButton.jsx

@@ -45,7 +45,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const selectedOrganization = useSelectedOrganization();
   const navigate = useNavigate();
   const location = useLocation();
-  const { isMobile, isTablet } = useBreakpoints();
+  const { isMobile } = useBreakpoints();
   const isListPanelOpen = useListPanel();
   const isFilterPanelOpen = useFilterPanel();
   const { mapRef, flyTo } = useMapbox();
@@ -147,7 +147,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
     const handleZoomIn = () => {
       const longOffset = 0.0399 * Math.pow(2, 11 - zoom);
       const newCenter = {
-        lng: !isTablet && isListPanelOpen ? currentCenter.lng + longOffset : currentCenter.lng,
+        lng: isListPanelOpen ? currentCenter.lng + longOffset : currentCenter.lng,
         lat: selectedOrganization ? selectedOrganization.latitude : currentCenter.lat
       };
 

client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.jsx

@@ -15,12 +15,12 @@ import {
 import Filters from "./ResultsFilters/ResultsFilters";
 import List from "./ResultsList/ResultsList";
 import Map from "./ResultsMap/ResultsMap";
-import { Desktop, Mobile, Tablet } from "./layouts";
+import { Desktop, Mobile } from "./layouts";
 import SEO from "../../SEO";
 
 const SearchResults = () => {
   const isListPanelVisible = useIsListPanelVisible();
-  const { isDesktop, isTablet } = useBreakpoints();
+  const { isDesktop } = useBreakpoints();
   const { selectAll, loading } = useOrganizationBests();
   const { categoryIds, toggleCategory } = useCategoryIds([]);
   const { getGeoJSONById } = useNeighborhoodsGeoJSON();
@@ -167,8 +167,6 @@ const SearchResults = () => {
       />
       {isDesktop ? (
         <Desktop filters={filters} map={map} list={list} />
-      ) : isTablet ? (
-        <Tablet filters={filters} map={map} list={list} />
       ) : (
         <Mobile showList={showList} filters={filters} map={map} list={list} />
       )}

client/src/components/FoodSeeker/SearchResults/SearchResults.jsx

@@ -333,9 +333,14 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
               direction="column"
               justifyContent="flex-start"
               alignItems="center"
+              gap={2}
               sx={{ marginTop: ".2rem", marginRight: "1rem" }}
             >
               <StakeholderIcon stakeholder={selectedOrganization} />
+              <Typography variant="body2" align="center">
+                {Boolean(selectedOrganization?.distance) &&
+                  `${selectedOrganization.distance?.toFixed(1)} mi`}
+              </Typography>
             </Stack>
           </Grid2>
           <Grid2 xs={10}>
@@ -766,7 +771,7 @@ function normalizeSocialLink({ value, socialMedia }) {
     value === "N/A" ||
     value === "n/a" ||
     value === "n / a" ||
-    value === "N / A" || 
+    value === "N / A" ||
     !value
   ) {
     return null;

client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.jsx

@@ -3,8 +3,9 @@ import {
   Button,
   Chip,
   Divider,
+  Link,
   Stack,
-  Typography
+  Typography,
 } from "@mui/material";
 import Grid2 from "@mui/material/Unstable_Grid2";
 import {
@@ -47,7 +48,7 @@ import {
   useSearchCoordinates,
   useUserCoordinates,
 } from "../../../../appReducer";
-import { success } from "../../../../theme/palette";
+import { linkText, success } from "../../../../theme/palette";
 
 const isLastOccurrenceInMonth = (tenantTimeZone) => {
   const currentDate = new Date();
@@ -184,9 +185,14 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
           direction="column"
           justifyContent="flex-start"
           alignItems="center"
+          gap={2}
           sx={{ marginTop: ".2rem", marginRight: "1rem", height: "100%" }}
         >
           <StakeholderIcon stakeholder={stakeholder} />
+          <Typography variant="body2" align="center">
+            {Boolean(stakeholder?.distance) &&
+              `${stakeholder.distance?.toFixed(1)} mi`}
+          </Typography>
         </Stack>
       </Grid2>
 
@@ -198,12 +204,13 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
               component="h2"
               align="left"
               fontWeight="bold"
-              sx={{
-                textDecoration: "underline",
-              }}
-              onClick={() => handleSelectOrganization(stakeholder)}
             >
-              {stakeholder.name}
+              <Link
+                sx={{ color: "inherit" }}
+                onClick={() => handleSelectOrganization(stakeholder)}
+              >
+                {stakeholder.name}
+              </Link>
             </Typography>
             <Stack
               direction="row"
@@ -345,7 +352,7 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
                   </Typography>
 
                   <Typography
-                    color="#4A80F5"
+                    color={linkText}
                     align="right"
                     sx={{
                       "&:hover": { textDecoration: "underline" },
@@ -463,7 +470,18 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
               ""
             )}
           </Stack>
-
+          <Stack alignItems="flex-end">
+            <Link
+              onClick={() => handleSelectOrganization(stakeholder)}
+              sx={{
+                color: linkText,
+                cursor: "pointer",
+                border: "none",
+              }}
+            >
+              more info...
+            </Link>
+          </Stack>
           <Stack
             direction="row"
             justifyContent="start"

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

@@ -1,3 +1,2 @@
 export { default as Mobile } from "./Mobile";
-export { default as Tablet } from "./Tablet";
 export { default as Desktop } from "./Desktop";