Add two buttons to details in stakeholder preview (#1767)

hackforla · Aug 18, 2023 · f54909d · f54909d
1 parent 8e086a2
commit f54909d
Showing 1 changed file with 76 additions and 66 deletions.
diff --git a/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.js b/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.js
@@ -172,7 +172,11 @@ const StakeholderPreview = ({ stakeholder }) => {
         padding: "0.5rem",
       }}
     >
-      <Grid2 xs={2}>
+      <Grid2
+        xs={2}
+        sx={{ cursor: "pointer" }}
+        onClick={() => handleSelectOrganization(stakeholder)}
+      >
         <Stack
           xs={2}
           direction="column"
@@ -198,80 +202,86 @@ const StakeholderPreview = ({ stakeholder }) => {
 
       <Grid2 xs={10}>
         <Stack direction="column" xs={10}>
-          <Typography variant="h6" component="h2" align="left">
-            {stakeholder.name}
-          </Typography>
-          <Box textAlign="left">
-            {stakeholder.categories.map((category) => (
+          <Stack
+            sx={{ cursor: "pointer" }}
+            onClick={() => handleSelectOrganization(stakeholder)}
+          >
+            <Typography variant="h6" component="h2" align="left">
+              {stakeholder.name}
+            </Typography>
+            <Box textAlign="left">
+              {stakeholder.categories.map((category) => (
+                <Typography
+                  variant="body2"
+                  fontStyle="italic"
+                  key={stakeholder.id + category.id}
+                  sx={{
+                    margin: "0.25em 0",
+                    marginRight: "0.25em",
+                    color:
+                      stakeholder.inactiveTemporary || stakeholder.inactive
+                        ? CLOSED_COLOR
+                        : category.id === FOOD_PANTRY_CATEGORY_ID
+                        ? ORGANIZATION_COLORS[FOOD_PANTRY_CATEGORY_ID]
+                        : category.id === MEAL_PROGRAM_CATEGORY_ID
+                        ? ORGANIZATION_COLORS[MEAL_PROGRAM_CATEGORY_ID]
+                        : "#000",
+                  }}
+                >
+                  {category.name}
+                </Typography>
+              ))}
+            </Box>
+            <Box textAlign="left">
               <Typography
                 variant="body2"
+                component="p"
                 fontStyle="italic"
-                key={stakeholder.id + category.id}
+                key={stakeholder.id}
                 sx={{
-                  margin: "0.25em 0",
-                  marginRight: "0.25em",
-                  color:
-                    stakeholder.inactiveTemporary || stakeholder.inactive
-                      ? CLOSED_COLOR
-                      : category.id === FOOD_PANTRY_CATEGORY_ID
-                      ? ORGANIZATION_COLORS[FOOD_PANTRY_CATEGORY_ID]
-                      : category.id === MEAL_PROGRAM_CATEGORY_ID
-                      ? ORGANIZATION_COLORS[MEAL_PROGRAM_CATEGORY_ID]
-                      : "#000",
+                  alignSelf: "flex-start",
+                  margin: "0 0.25em 0.5em 0",
                 }}
               >
-                {category.name}
+                {stakeholder.foodTypes}
               </Typography>
-            ))}
-          </Box>
-          <Box textAlign="left">
-            <Typography
-              variant="body2"
-              component="p"
-              fontStyle="italic"
-              key={stakeholder.id}
-              sx={{
-                alignSelf: "flex-start",
-                margin: "0 0.25em 0.5em 0",
-              }}
-            >
-              {stakeholder.foodTypes}
-            </Typography>
-          </Box>
+            </Box>
+
+            <Box textAlign="left">
+              {stakeholder.inactiveTemporary || stakeholder.inactive ? (
+                <Chip
+                  color="inactiveButton"
+                  label={
+                    stakeholder.inactiveTemporary
+                      ? "Temporarily Closed"
+                      : "Permanently Closed"
+                  }
+                />
+              ) : null}
 
-          <Box textAlign="left">
-            {stakeholder.inactiveTemporary || stakeholder.inactive ? (
-              <Chip
-                color="inactiveButton"
-                label={
-                  stakeholder.inactiveTemporary
-                    ? "Temporarily Closed"
-                    : "Permanently Closed"
-                }
-              />
-            ) : null}
+              {showAllowWalkinsFlag &&
+                !(stakeholder.inactiveTemporary || stakeholder.inactive) && (
+                  <>
+                    {isOpenFlag && (
+                      <Chip
+                        // sx={{ backgroundColor: "#008000" }}
+                        color="success"
+                        label="OPEN NOW"
+                      />
+                    )}
+                    {isAlmostClosedFlag && (
+                      <Chip
+                        // sx={{ backgroundColor: "#CC3333" }}
+                        color="mealProgram"
+                        label={`Closing in ${minutesToClosing} minutes`}
+                      />
+                    )}
+                    <Chip label="Walk-Ins Allowed" color="primary" />
+                  </>
+                )}
+            </Box>
+          </Stack>
 
-            {showAllowWalkinsFlag &&
-              !(stakeholder.inactiveTemporary || stakeholder.inactive) && (
-                <>
-                  {isOpenFlag && (
-                    <Chip
-                      // sx={{ backgroundColor: "#008000" }}
-                      color="success"
-                      label="OPEN NOW"
-                    />
-                  )}
-                  {isAlmostClosedFlag && (
-                    <Chip
-                      // sx={{ backgroundColor: "#CC3333" }}
-                      color="mealProgram"
-                      label={`Closing in ${minutesToClosing} minutes`}
-                    />
-                  )}
-                  <Chip label="Walk-Ins Allowed" color="primary" />
-                </>
-              )}
-          </Box>
           <Stack direction="row" sx={{ justifyContent: "space-between" }}>
             <Button
               variant="outlined"