From 7e9f4319b9c01fa70d2b9e0c9e26a88fd17a437c Mon Sep 17 00:00:00 2001
From: Colin Toft <47548563+ColinToft@users.noreply.github.com>
Date: Sat, 22 Jul 2023 08:33:40 -0400
Subject: [PATCH 1/3] Update food_request_group and food_request model (#82)

* updated schema for food request models and corresponding GraphQL mutation

---------

Co-authored-by: HeetShah <heetshah7642@gmail.com>
Co-authored-by: Colin Toft <ColinToft@users.noreply.github.com>
Co-authored-by: Shahan Neda <shahan.neda@gmail.com>
---
 backend/app/graphql/food_request.py           |  51 ++++-
 backend/app/models/food_request.py            |  13 +-
 backend/app/models/food_request_group.py      |  21 +-
 .../implementations/food_request_service.py   |  44 ++--
 backend/tests/graphql/test_food_request.py    | 197 +++++++++++-------
 backend/tests/unit/test_food_request_model.py |  38 ----
 6 files changed, 207 insertions(+), 157 deletions(-)
 delete mode 100644 backend/tests/unit/test_food_request_model.py

diff --git a/backend/app/graphql/food_request.py b/backend/app/graphql/food_request.py
index a8a0c1a2..63c7d3b3 100644
--- a/backend/app/graphql/food_request.py
+++ b/backend/app/graphql/food_request.py
@@ -1,6 +1,7 @@
 import graphene
 
 from .types import (
+    ContactInput,
     Mutation,
     MutationList,
 )
@@ -14,21 +15,16 @@ class MealRequestTypeInput(graphene.InputObjectType):
     portions = graphene.Int(required=True)
 
 
-class CreateFoodRequestDatesInput(graphene.InputObjectType):
-    date = graphene.DateTime(required=True)
-    meal_types = graphene.List(MealRequestTypeInput, required=True)
-
-
 # Response Types
 class MealRequestTypeResponse(graphene.ObjectType):
-    tags = graphene.List(graphene.String, required=True)
     portions = graphene.Int(required=True)
+    dietary_restrictions = graphene.String(required=True)
+    meal_suggestions = graphene.String(required=True)
 
 
 class CreateFoodRequestResponse(graphene.ObjectType):
     id = graphene.ID()
-    target_fulfillment_date = graphene.DateTime()
-    meal_types = graphene.List(MealRequestTypeResponse)
+    donation_date = graphene.Date()
     status = graphene.String()
 
 
@@ -36,23 +32,56 @@ class CreateFoodRequestGroupResponse(graphene.ObjectType):
     id = graphene.ID()
     description = graphene.String()
     requests = graphene.List(CreateFoodRequestResponse)
+    meal_info = graphene.Field(MealRequestTypeResponse)
     status = graphene.String()
 
 
+class MealTypeInput(graphene.InputObjectType):
+    portions = graphene.Int(required=True)
+    dietary_restrictions = graphene.String(required=True)
+    meal_suggestions = graphene.String(required=True)
+
+
 # Mutations
 class CreateFoodRequestGroup(Mutation):
     class Arguments:
         description = graphene.String(required=True)
         requestor = graphene.ID(required=True)
-        commitments = graphene.List(CreateFoodRequestDatesInput, required=True)
+        # request_dates is a list of dates
+        request_dates = graphene.List(graphene.Date, required=True)
+
+        meal_info = MealTypeInput(required=True)
+        drop_off_time = graphene.Time(required=True)
+        drop_off_location = graphene.String(required=True)
+        delivery_instructions = graphene.String()
+        onsite_staff = graphene.List(ContactInput, required=True)
 
     # return values
     food_request_group = graphene.Field(CreateFoodRequestGroupResponse)
 
-    def mutate(self, info, description, requestor, commitments):
+    def mutate(
+        self,
+        info,
+        description,
+        requestor,
+        request_dates,
+        meal_info,
+        drop_off_time,
+        drop_off_location,
+        delivery_instructions,
+        onsite_staff,
+    ):
         result = services["food_request_service"].create_food_request_group(
-            description=description, requestor=requestor, commitments=commitments
+            description=description,
+            requestor=requestor,
+            request_dates=request_dates,
+            meal_info=meal_info,
+            drop_off_time=drop_off_time,
+            drop_off_location=drop_off_location,
+            delivery_instructions=delivery_instructions,
+            onsite_staff=onsite_staff,
         )
+
         return CreateFoodRequestGroup(food_request_group=result)
 
 
diff --git a/backend/app/models/food_request.py b/backend/app/models/food_request.py
index c92c9068..5a2718bb 100644
--- a/backend/app/models/food_request.py
+++ b/backend/app/models/food_request.py
@@ -3,18 +3,15 @@
 
 
 class MealType(mg.EmbeddedDocument):
-    tags = mg.ListField(mg.StringField(required=True))
     portions = mg.IntField(required=True)
-    portions_fulfilled = mg.IntField(required=True, default=0)
+    dietary_restrictions = mg.StringField(required=True, default="No restrictions")
+    meal_suggestions = mg.StringField(required=True)
 
 
 class FoodRequest(mg.EmbeddedDocument):
     _id = mg.ObjectIdField(required=True, default=ObjectId)
-    donor = mg.ObjectIdField()
-    target_fulfillment_date = mg.DateTimeField(required=True)
-    actual_fulfillment_date = mg.DateTimeField()
-    meal_types = mg.EmbeddedDocumentListField(MealType, default=list)
-
+    # The date that the food is being
+    donation_date = mg.DateField(required=True)
     """
     Open: Request has not been completely fulfilled
     Fulfilled: All meal types have been fulfilled
@@ -23,6 +20,8 @@ class FoodRequest(mg.EmbeddedDocument):
     status = mg.StringField(
         choices=["Open", "Fulfilled", "Cancelled"], required=True, default="Open"
     )
+    donor_id = mg.ObjectIdField(required=False)
+    commitment_date = mg.DateTimeField(required=False)
 
     def to_serializable_dict(self):
         """
diff --git a/backend/app/models/food_request_group.py b/backend/app/models/food_request_group.py
index dc718810..a0f3f476 100644
--- a/backend/app/models/food_request_group.py
+++ b/backend/app/models/food_request_group.py
@@ -1,18 +1,18 @@
 import mongoengine as mg
-from .food_request import FoodRequest
+from .food_request import FoodRequest, MealType
 from datetime import datetime
+from .user_info import Contact
+from bson.objectid import ObjectId
 
 
 class FoodRequestGroup(mg.Document):
+    _id = mg.ObjectIdField(required=True, default=ObjectId)
     description = mg.StringField(required=True)
+    requestor = mg.ObjectIdField()  # The ASP making the request
 
     # TODO: make this required=True when we have users populated
-    requestor = mg.ObjectIdField()
     requests = mg.EmbeddedDocumentListField(FoodRequest, default=list)
 
-    date_created = mg.DateTimeField(required=True, default=datetime.utcnow)
-    date_updated = mg.DateTimeField(required=True, default=datetime.utcnow)
-
     """
     Open: At least one FoodRequest is open
     Fulfilled: All FoodRequests are fulfilled
@@ -22,6 +22,17 @@ class FoodRequestGroup(mg.Document):
         choices=["Open", "Fulfilled", "Cancelled"], required=True, default="Open"
     )
 
+    # Donation Details
+    meal_info = mg.EmbeddedDocumentField(MealType, required=True)
+    drop_off_time = mg.DateTimeField(required=True)
+    drop_off_location = mg.StringField(required=True)
+    delivery_instructions = mg.StringField(required=True)
+    onsite_staff = mg.EmbeddedDocumentListField(Contact, required=True)
+
+    # Timestamps
+    date_created = mg.DateTimeField(required=True, default=datetime.utcnow)
+    date_updated = mg.DateTimeField(required=True, default=datetime.utcnow)
+
     def to_serializable_dict(self):
         """
         Returns a dict representation of the document that is JSON serializable
diff --git a/backend/app/services/implementations/food_request_service.py b/backend/app/services/implementations/food_request_service.py
index 01eefee7..e8f298b7 100644
--- a/backend/app/services/implementations/food_request_service.py
+++ b/backend/app/services/implementations/food_request_service.py
@@ -1,36 +1,42 @@
 from ...models.food_request_group import FoodRequestGroup
-from ...models.food_request import FoodRequest, MealType
+from ...models.food_request import FoodRequest
 from ..interfaces.food_request_service import IFoodRequestService
+from datetime import datetime
 
 
 class FoodRequestService(IFoodRequestService):
     def __init__(self, logger):
         self.logger = logger
 
-    def create_food_request_group(self, description, requestor, commitments):
+    def create_food_request_group(
+        self,
+        description,
+        requestor,
+        request_dates,
+        meal_info,
+        drop_off_time,
+        drop_off_location,
+        delivery_instructions,
+        onsite_staff,
+    ):
         try:
             # Create FoodRequestGroup
             new_food_request_group = FoodRequestGroup(
                 description=description,
-                # TODO: uncomment when we have users populated
-                # requestor=requestor,
-                status="Open",
+                requestor=requestor,
+                requests=[
+                    FoodRequest(donation_date=request_date)
+                    for request_date in request_dates
+                ],
+                meal_info=meal_info,
+                # Convert the time into a datetime object (date does not matter here)
+                drop_off_time=datetime.combine(datetime.today().date(), drop_off_time),
+                drop_off_location=drop_off_location,
+                delivery_instructions=delivery_instructions,
+                onsite_staff=onsite_staff,
             )
-
-            # Create FoodRequests
-            for commitment in commitments:
-                meal_types = [
-                    MealType(tags=meal_type.tags, portions=meal_type.portions)
-                    for meal_type in commitment.meal_types
-                ]
-                new_food_request = FoodRequest(
-                    target_fulfillment_date=commitment.date,
-                    status="Open",
-                    meal_types=meal_types,
-                )
-                new_food_request_group.requests.append(new_food_request)
-
             new_food_request_group.save()
+            print(new_food_request_group.to_serializable_dict())
         except Exception as error:
             self.logger.error(str(error))
             raise error
diff --git a/backend/tests/graphql/test_food_request.py b/backend/tests/graphql/test_food_request.py
index 4b640520..315a68e5 100644
--- a/backend/tests/graphql/test_food_request.py
+++ b/backend/tests/graphql/test_food_request.py
@@ -6,91 +6,134 @@
 
 def test_create_food_request_group(graphql_schema):
     mutation = """
-    mutation TestCreateFoodRequestGroup {
-    createFoodRequestGroup(
-        description: "sample food request",
-        requestor: "0",
-        commitments: [
-        {
-            date: "2022-10-17T16:00:00",
-            mealTypes: [
-            {
-                tags: ["Beef", "Chicken"],
-                portions: 50
-            }
-            {
-                tags: ["Vegetarian"],
-                portions: 20
-            }
-            ]
-        },
-        {
-            date: "2022-10-17T16:00:00",
-            mealTypes: [
-            {
-                tags: ["Halal"],
-                portions: 100
-            }
-            {
-                tags: ["Vegetarian"],
-                portions: 30
-            }
-            ]
-        }
-        ]
-    ) {
+    mutation testCreateFoodRequestGroup {
+      createFoodRequestGroup(
+        deliveryInstructions: "Leave at front door",
+        description: "Food request group for office employees",
+        dropOffLocation: "123 Main Street",
+        dropOffTime: "12:00:00Z",
+        mealInfo: {portions: 40,
+          dietaryRestrictions: "7 gluten free, 7 no beef",
+          mealSuggestions: "Burritos"},
+        onsiteStaff: [
+          {name: "John Doe", email: "john.doe@example.com", phone: "+1234567890"},
+          {name: "Jane Smith", email: "jane.smith@example.com", phone: "+9876543210"}],
+        requestor: "507f1f77bcf86cd799439011",
+        requestDates: [
+            "2023-06-01",
+            "2023-06-02",
+        ],
+      )
+      {
         foodRequestGroup {
-        id
-        description
-        requests {
+          status
+          description
+          id
+          mealInfo {
+            portions
+            dietaryRestrictions
+            mealSuggestions
+          }
+          requests {
             id
-            targetFulfillmentDate
+            donationDate
             status
-            mealTypes {
-                tags
-                portions
-            }
-        }
+          }
         }
-    }
+      }
     }
   """
-    expected_requests = [
-        {
-            "targetFulfillmentDate": "2022-10-17T16:00:00",
-            "status": "Open",
-            "mealTypes": [
-                {"tags": ["Beef", "Chicken"], "portions": 50},
-                {"tags": ["Vegetarian"], "portions": 20},
-            ],
-        },
-        {
-            "targetFulfillmentDate": "2022-10-17T16:00:00",
-            "status": "Open",
-            "mealTypes": [
-                {"tags": ["Halal"], "portions": 100},
-                {"tags": ["Vegetarian"], "portions": 30},
-            ],
-        },
-    ]
 
     result = graphql_schema.execute(mutation)
-    assert result.errors is None
-
-    food_request_group = result.data["createFoodRequestGroup"]["foodRequestGroup"]
 
-    # assert food_request_group values
-    assert food_request_group["id"]
-    assert food_request_group["description"] == "sample food request"
+    assert result.errors is None
+    assert result.data["createFoodRequestGroup"]["foodRequestGroup"]["status"] == "Open"
+    assert (
+        result.data["createFoodRequestGroup"]["foodRequestGroup"]["description"]
+        == "Food request group for office employees"
+    )
+    assert (
+        result.data["createFoodRequestGroup"]["foodRequestGroup"]["mealInfo"][
+            "portions"
+        ]
+        == 40
+    )
+    assert (
+        result.data["createFoodRequestGroup"]["foodRequestGroup"]["mealInfo"][
+            "dietaryRestrictions"
+        ]
+        == "7 gluten free, 7 no beef"
+    )
+    assert (
+        result.data["createFoodRequestGroup"]["foodRequestGroup"]["mealInfo"][
+            "mealSuggestions"
+        ]
+        == "Burritos"
+    )
+    assert (
+        result.data["createFoodRequestGroup"]["foodRequestGroup"]["requests"][0][
+            "donationDate"
+        ]
+        == "2023-06-01"
+    )
+    assert (
+        result.data["createFoodRequestGroup"]["foodRequestGroup"]["requests"][0][
+            "status"
+        ]
+        == "Open"
+    )
+    assert (
+        result.data["createFoodRequestGroup"]["foodRequestGroup"]["requests"][1][
+            "donationDate"
+        ]
+        == "2023-06-02"
+    )
+    assert (
+        result.data["createFoodRequestGroup"]["foodRequestGroup"]["requests"][1][
+            "status"
+        ]
+        == "Open"
+    )
 
-    # assert food_request values
-    food_requests = food_request_group["requests"]
-    assert len(food_requests) == len(expected_requests)
 
-    for i in range(len(food_requests)):
-        assert food_requests[i]["id"]
-        assert (
-            food_requests[i]["targetFulfillmentDate"]
-            == expected_requests[i]["targetFulfillmentDate"]
-        )
-        assert food_requests[i]["mealTypes"] == expected_requests[i]["mealTypes"]
+def test_get_food_request_group_failure(graphql_schema):
+    mutation = """
+    mutation testCreateFoodRequestGroup {
+      createFoodRequestGroup(
+        deliveryInstructions: "Leave at front door",
+        description: "Food request group for office employees",
+        dropOffLocation: "123 Main Street",
+        dropOffTime: "12:00:00Z",
+        mealInfo: {portions: 40,
+          dietaryRestrictions: "7 gluten free, 7 no beef",
+          mealSuggestions: "Burritos"},
+        onsiteStaff: [
+          {name: "John Doe", email: "john.doe@example.com", phone: "+1234567890"},
+          {name: "Jane Smith", email: "jane.smith@example.com", phone: "+9876543210"}],
+        requestor: "507f1f77bcf86cd799439011",
+        requestDates: [
+            "2023-06-01",
+            "2023-06-02",
+        ],
+      )
+      {
+        foodRequestGroup {
+          status
+          description
+          id
+          mealInfo {
+            portions
+            dietaryRestrictions
+            mealSuggestions
+          }
+          requests {
+            id
+            donationDate
+            status
+          }
+        }
+      }
+    }
+    """
+    result = graphql_schema.execute(mutation)
+    result.errors is not None
diff --git a/backend/tests/unit/test_food_request_model.py b/backend/tests/unit/test_food_request_model.py
deleted file mode 100644
index 01e724e7..00000000
--- a/backend/tests/unit/test_food_request_model.py
+++ /dev/null
@@ -1,38 +0,0 @@
-from app.models.food_request import MealType, FoodRequest
-from app.models.food_request_group import FoodRequestGroup
-
-"""
-Unit tests for FoodRequestGroup and FoodRequest mongo models
-"""
-
-
-def test_create_food_request_group():
-    MealTypeExample = {"tags": ["Beef", "Chicken"], "portions": 50}
-
-    test_date = "2022-10-17T16:00:00"
-
-    FoodRequestExample = {
-        "target_fulfillment_date": test_date,
-        "meal_types": MealType(**MealTypeExample),
-    }
-
-    FoodRequestGroupExample = {
-        "description": "sample_food_request",
-        "requests": [FoodRequest(**FoodRequestExample)],
-    }
-
-    food_request_group = FoodRequestGroup(**FoodRequestGroupExample)
-
-    assert food_request_group.description == "sample_food_request"
-    assert food_request_group.status == "Open"
-
-    food_requests = food_request_group.requests
-
-    assert food_requests[0].status == "Open"
-    assert food_requests[0].target_fulfillment_date == test_date
-
-    meal_types = food_requests[0].meal_types
-
-    assert meal_types.portions == 50
-    assert meal_types.portions_fulfilled == 0
-    assert meal_types.tags == ["Beef", "Chicken"]

From 06505c31539cea39f8b19ab15eeb221e3568c560 Mon Sep 17 00:00:00 2001
From: Anson He <60114875+ansonjwhe@users.noreply.github.com>
Date: Tue, 25 Jul 2023 18:42:39 -0400
Subject: [PATCH 2/3] User Settings Functionality (#85)

* hide user settings behind auth wall
* Implement User Info Additions - Frontend and Backend (#84)
---
 frontend/src/APIClients/AuthAPIClient.ts   |   8 +-
 frontend/src/Routes.tsx                    |   6 +-
 frontend/src/components/auth/Join.tsx      |  56 ++--
 frontend/src/components/auth/Login.tsx     |   4 +-
 frontend/src/components/pages/Settings.tsx | 309 ++++++++++++++++-----
 frontend/src/types/UserTypes.ts            |  19 +-
 6 files changed, 294 insertions(+), 108 deletions(-)

diff --git a/frontend/src/APIClients/AuthAPIClient.ts b/frontend/src/APIClients/AuthAPIClient.ts
index 0e04532b..be3edb55 100644
--- a/frontend/src/APIClients/AuthAPIClient.ts
+++ b/frontend/src/APIClients/AuthAPIClient.ts
@@ -6,16 +6,16 @@ import {
 import { googleLogout } from "@react-oauth/google";
 
 import AUTHENTICATED_USER_KEY from "../constants/AuthConstants";
-import { AuthenticatedUser } from "../types/UserTypes";
+import { AuthenticatedUser, LoginData } from "../types/UserTypes";
 import { setLocalStorageObjProperty } from "../utils/LocalStorageUtils";
 
 type LoginFunction = (
   options?:
-    | MutationFunctionOptions<{ login: AuthenticatedUser }, OperationVariables>
+    | MutationFunctionOptions<{ login: LoginData }, OperationVariables>
     | undefined,
 ) => Promise<
   FetchResult<
-    { login: AuthenticatedUser },
+    { login: LoginData },
     Record<string, unknown>,
     Record<string, unknown>
   >
@@ -31,7 +31,7 @@ const login = async (
   const result = await loginFunction({
     variables: { email, password, idToken },
   });
-  user = result.data?.login ?? null;
+  user = result.data?.login?.registeredUser ?? null;
   if (user) {
     localStorage.setItem(AUTHENTICATED_USER_KEY, JSON.stringify(user));
   }
diff --git a/frontend/src/Routes.tsx b/frontend/src/Routes.tsx
index 2a0adfc1..66ef5682 100644
--- a/frontend/src/Routes.tsx
+++ b/frontend/src/Routes.tsx
@@ -34,9 +34,8 @@ const Routes = (): React.ReactElement => (
     <Route path={Paths.FORGOT_PASSWORD_PAGE} element={<ForgotPassword />} />
     <Route path={Paths.RESET_PASSWORD_PAGE} element={<ResetPassword />} />
     <Route path={Paths.SET_PASSWORD_PAGE} element={<SetPassword />} />
-    <Route path={Paths.SETTINGS_PAGE} element={<Settings />} />
-    <Route path={Paths.DASHBOARD_PAGE} element={<AuthWall />}>
-      <Route path="" element={<Dashboard />} />
+    <Route path="" element={<AuthWall />}>
+      <Route path={Paths.DASHBOARD_PAGE} element={<Dashboard />} />
       <Route path={Paths.CREATE_ENTITY_PAGE} element={<CreatePage />} />
       <Route path={Paths.UPDATE_ENTITY_PAGE} element={<UpdatePage />} />
       <Route path={Paths.DISPLAY_ENTITY_PAGE} element={<DisplayPage />} />
@@ -54,6 +53,7 @@ const Routes = (): React.ReactElement => (
       />
       <Route path={Paths.EDIT_TEAM_PAGE} element={<EditTeamInfoPage />} />
       <Route path={Paths.HOOKS_PAGE} element={<HooksDemo />} />
+      <Route path={Paths.SETTINGS_PAGE} element={<Settings />} />
     </Route>
     <Route path="*" element={<NotFound />} />
   </RouteContainer>
diff --git a/frontend/src/components/auth/Join.tsx b/frontend/src/components/auth/Join.tsx
index 71f05f3d..3c97ed6f 100644
--- a/frontend/src/components/auth/Join.tsx
+++ b/frontend/src/components/auth/Join.tsx
@@ -31,7 +31,11 @@ import {
   Role,
   UserInfo,
 } from "../../types/UserTypes";
-import { isValidEmail, trimWhiteSpace } from "../../utils/ValidationUtils";
+import {
+  isNonNegativeInt,
+  isValidEmail,
+  trimWhiteSpace,
+} from "../../utils/ValidationUtils";
 import useIsWebView from "../../utils/useIsWebView";
 import OnsiteStaffSection from "../common/OnsiteStaffSection";
 
@@ -237,12 +241,13 @@ const Join = (): React.ReactElement => {
             <Flex flexDir="column" w="-webkit-fit-content">
               <FormControl
                 isRequired
-                isInvalid={attemptedSubmit && numKids === ""}
+                isInvalid={attemptedSubmit && !isNonNegativeInt(numKids)}
               >
                 <FormLabel variant="desktop-button-bold">
-                  Number of Kids
+                  Number of kids
                 </FormLabel>
                 <Input
+                  type="number"
                   value={numKids}
                   placeholder={PLACEHOLDER_WEB_EXAMPLE_NUM_KIDS}
                   onChange={(e) => setNumKids(e.target.value)}
@@ -269,22 +274,20 @@ const Join = (): React.ReactElement => {
             </FormControl>
           </Flex>
         </Flex>
-        <Flex flexDir="row">
-          <Flex flexDir="column" w="480px">
-            <FormControl
-              isRequired
-              isInvalid={attemptedSubmit && organizationDesc === ""}
-            >
-              <FormLabel variant="desktop-button-bold">
-                Description of organization
-              </FormLabel>
-              <Textarea
-                value={organizationDesc}
-                placeholder={PLACEHOLDER_WEB_EXAMPLE_DESCRIPTION}
-                onChange={(e) => setOrganizationDesc(e.target.value)}
-              />
-            </FormControl>
-          </Flex>
+        <Flex flexDir="column" w="480px">
+          <FormControl
+            isRequired
+            isInvalid={attemptedSubmit && organizationDesc === ""}
+          >
+            <FormLabel variant="desktop-button-bold">
+              Description of organization
+            </FormLabel>
+            <Textarea
+              value={organizationDesc}
+              placeholder={PLACEHOLDER_WEB_EXAMPLE_DESCRIPTION}
+              onChange={(e) => setOrganizationDesc(e.target.value)}
+            />
+          </FormControl>
         </Flex>
       </>
     );
@@ -324,17 +327,21 @@ const Join = (): React.ReactElement => {
             {role === "ASP" && (
               <FormControl
                 isRequired
-                isInvalid={attemptedSubmit && numKids === ""}
+                isInvalid={attemptedSubmit && !isNonNegativeInt(numKids)}
               >
                 <Input
                   variant="mobile-outline"
+                  type="number"
                   value={numKids}
                   onChange={(e) => setNumKids(e.target.value)}
                   placeholder={PLACEHOLDER_MOBILE_EXAMPLE_NUM_KIDS}
                 />
               </FormControl>
             )}
-            <FormControl>
+            <FormControl
+              isRequired
+              isInvalid={attemptedSubmit && organizationDesc === ""}
+            >
               <Textarea
                 variant="mobile-outline"
                 value={organizationDesc}
@@ -528,8 +535,7 @@ const Join = (): React.ReactElement => {
       if (!isValidEmail(emailsToValidate[i])) return false;
     }
 
-    const numKidsToValidate = parseInt(numKids, 10);
-    if (Number.isNaN(numKidsToValidate) || numKidsToValidate < 0) return false;
+    if (role === "ASP" && !isNonNegativeInt(numKids)) return false;
 
     return true;
   };
@@ -541,13 +547,13 @@ const Join = (): React.ReactElement => {
       email: trimWhiteSpace(email),
       organizationAddress: trimWhiteSpace(organizationAddress),
       organizationName: trimWhiteSpace(organizationName),
-      organizationDesc: trimWhiteSpace(organizationDesc),
+      organizationDesc,
       role,
       roleInfo: {
         aspInfo:
           role === "ASP"
             ? {
-                numKids: parseInt(numKids, 10),
+                numKids: parseInt(trimWhiteSpace(numKids), 10),
               }
             : null,
         donorInfo: null,
diff --git a/frontend/src/components/auth/Login.tsx b/frontend/src/components/auth/Login.tsx
index bbee4704..e9e383ca 100644
--- a/frontend/src/components/auth/Login.tsx
+++ b/frontend/src/components/auth/Login.tsx
@@ -17,7 +17,7 @@ import authAPIClient from "../../APIClients/AuthAPIClient";
 import BackgroundImage from "../../assets/background.png";
 import { DASHBOARD_PAGE, JOIN_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
-import { AuthenticatedUser } from "../../types/UserTypes";
+import { AuthenticatedUser, LoginData } from "../../types/UserTypes";
 
 const LOGIN = gql`
   mutation Login($email: String!, $password: String!, $idToken: String!) {
@@ -62,7 +62,7 @@ const Login = (): React.ReactElement => {
   const [password, setPassword] = useState("");
   const [error, setError] = useState(false);
 
-  const [login] = useMutation<{ login: AuthenticatedUser }>(LOGIN);
+  const [login] = useMutation<{ login: LoginData }>(LOGIN);
 
   const onLogInClick = async () => {
     let user: AuthenticatedUser | null = null;
diff --git a/frontend/src/components/pages/Settings.tsx b/frontend/src/components/pages/Settings.tsx
index e6f90ded..fdb87d57 100644
--- a/frontend/src/components/pages/Settings.tsx
+++ b/frontend/src/components/pages/Settings.tsx
@@ -1,3 +1,4 @@
+import { gql, useMutation } from "@apollo/client";
 import {
   Button,
   Center,
@@ -8,10 +9,17 @@ import {
   Input,
   Text,
   Textarea,
+  useToast,
 } from "@chakra-ui/react";
-import React, { useState } from "react";
+import { GraphQLError } from "graphql";
+import React, { useContext, useState } from "react";
+import { Navigate, useNavigate } from "react-router-dom";
 
-import { Contact, UserSettings } from "../../types/UserTypes";
+import AUTHENTICATED_USER_KEY from "../../constants/AuthConstants";
+import { LOGIN_PAGE } from "../../constants/Routes";
+import AuthContext from "../../contexts/AuthContext";
+import { Contact, UserInfo } from "../../types/UserTypes";
+import { setLocalStorageObjProperty } from "../../utils/LocalStorageUtils";
 import {
   isNonNegativeInt,
   isValidEmail,
@@ -38,26 +46,147 @@ const PLACEHOLDER_MOBILE_EXAMPLE_ADDRESS = "Address of organization";
 const PLACEHOLDER_MOBILE_EXAMPLE_ORG_DESCRIPTION =
   "Description of organization";
 
+const UPDATEUSERBYID = gql`
+  mutation UpdateUserById(
+    $requestorId: String!
+    $id: String!
+    $userInfo: UserInfoInput!
+  ) {
+    updateUserByID(requestorId: $requestorId, id: $id, userInfo: $userInfo) {
+      user {
+        id
+        info {
+          email
+          organizationAddress
+          organizationName
+          organizationDesc
+          role
+          roleInfo {
+            aspInfo {
+              numKids
+            }
+            donorInfo {
+              type
+              tags
+            }
+          }
+          primaryContact {
+            name
+            phone
+            email
+          }
+          onsiteContacts {
+            name
+            phone
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+
 const Settings = (): React.ReactElement => {
-  const [primaryContact, setPrimaryContact] = useState<Contact>({
-    name: "",
-    phone: "",
-    email: "",
-  });
-  const [organizationName, setOrganizationName] = useState("");
-  const [numberOfKids, setNumberOfKids] = useState("");
-  const [organizationAddress, setOrganizationAddress] = useState("");
-  const [organizationDescription, setOrganizationDescription] = useState("");
-  const [onsiteInfo, setOnsiteInfo] = useState<Array<Contact>>([
-    {
+  // Assumption: user has the roleInfo: ASPInfo
+  const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
+  const [userInfo, setUserInfo] = useState<UserInfo>(
+    authenticatedUser?.info || null,
+  );
+
+  const [primaryContact, setPrimaryContact] = useState<Contact>(
+    userInfo?.primaryContact || {
       name: "",
       phone: "",
       email: "",
     },
-  ]);
+  );
+  const [organizationName, setOrganizationName] = useState(
+    userInfo?.organizationName || "",
+  );
+  const [numKids, setNumKids] = useState(
+    userInfo?.roleInfo?.aspInfo?.numKids?.toString() || "",
+  );
+  const [organizationAddress, setOrganizationAddress] = useState(
+    userInfo?.organizationAddress || "",
+  );
+  const [organizationDesc, setOrganizationDesc] = useState(
+    userInfo?.organizationDesc || "",
+  );
+  // json parse/stringify creates a deep copy of the array of contacts
+  // this prevents setOnsiteInfo from mutating the original state of userInfo.onsiteContacts
+  const [onsiteInfo, setOnsiteInfo] = useState<Array<Contact>>(
+    userInfo
+      ? JSON.parse(JSON.stringify(userInfo.onsiteContacts))
+      : [
+          {
+            name: "",
+            phone: "",
+            email: "",
+          },
+        ],
+  );
 
   const [attemptedSubmit, setAttemptedSave] = useState(false);
   const isWebView = useIsWebView();
+  const navigate = useNavigate();
+  const toast = useToast();
+
+  const [updateUserByID] = useMutation(UPDATEUSERBYID);
+
+  if (!authenticatedUser) {
+    return <Navigate replace to={LOGIN_PAGE} />;
+  }
+
+  const haveSettingsChanged = (): boolean => {
+    if (!userInfo) return false;
+
+    const defaultValues: Array<string | number> = [
+      userInfo.organizationAddress,
+      userInfo.organizationName,
+      userInfo.organizationDesc,
+      userInfo.roleInfo?.aspInfo?.numKids?.toString() || "",
+    ];
+    const currentValues: Array<string | number> = [
+      trimWhiteSpace(organizationAddress),
+      trimWhiteSpace(organizationName),
+      organizationDesc,
+      trimWhiteSpace(numKids),
+    ];
+
+    for (let i = 0; i < defaultValues.length; i += 1) {
+      if (defaultValues[i] !== currentValues[i]) {
+        return true;
+      }
+    }
+
+    const defaultContactValues: Array<Contact> = [
+      userInfo.primaryContact,
+      ...userInfo.onsiteContacts,
+    ];
+    const currentContactValues: Array<Contact> = [
+      primaryContact,
+      ...onsiteInfo,
+    ];
+
+    if (defaultContactValues.length !== currentContactValues.length)
+      return true;
+
+    for (let i = 0; i < defaultContactValues.length; i += 1) {
+      if (
+        defaultContactValues[i].name !== currentContactValues[i].name ||
+        defaultContactValues[i].email !== currentContactValues[i].email ||
+        defaultContactValues[i].phone !== currentContactValues[i].phone
+      ) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  const onClickResetPassword = () => {
+    navigate(`/${authenticatedUser?.id}/reset-password`);
+  };
 
   const getTitleSection = (): React.ReactElement => {
     return (
@@ -78,7 +207,7 @@ const Settings = (): React.ReactElement => {
         <Flex flexDir="column" gap="24px">
           <Flex flexDir="column">
             <Text variant="desktop-body-bold">Email Address</Text>
-            <Text variant="desktop-body">example.login@gmail.com</Text>
+            <Text variant="desktop-body">{userInfo?.email}</Text>
           </Flex>
           <Button
             width="190px"
@@ -90,6 +219,7 @@ const Settings = (): React.ReactElement => {
             borderColor="primary.green"
             borderRadius="6px"
             _hover={{ color: "text.white", bgColor: "primary.green" }}
+            onClick={onClickResetPassword}
           >
             Reset Password
           </Button>
@@ -102,7 +232,7 @@ const Settings = (): React.ReactElement => {
     return (
       <Flex flexDir="column" gap="8px">
         <Text variant="mobile-body-bold">Email Address</Text>
-        <Text variant="desktop-xs">example.login@gmail.com</Text>
+        <Text variant="desktop-xs">{userInfo?.email}</Text>
         <Button
           w="100%"
           variant="mobile-button-bold"
@@ -112,6 +242,7 @@ const Settings = (): React.ReactElement => {
           borderColor="primary.green"
           borderRadius="6px"
           _hover={{ color: "text.white", bgColor: "primary.green" }}
+          onClick={onClickResetPassword}
         >
           Reset Password
         </Button>
@@ -122,6 +253,12 @@ const Settings = (): React.ReactElement => {
   const getWebContactSection = (): React.ReactElement => {
     return (
       <Flex flexDir="column" gap="24px">
+        {haveSettingsChanged() && (
+          <Text color="secondary.critical" variant="desktop-xs">
+            You have unsaved changes. Make sure to click save at the bottom
+            before leaving!
+          </Text>
+        )}
         <Text variant="desktop-heading">Contact Information</Text>
         <Flex flexDir="row" gap="24px">
           <Flex flexDir="column" w="300px">
@@ -267,18 +404,15 @@ const Settings = (): React.ReactElement => {
           </Flex>
           <Flex flexDir="column" w="200px">
             <FormControl
-              isInvalid={
-                attemptedSubmit &&
-                numberOfKids !== "" &&
-                !isNonNegativeInt(numberOfKids)
-              }
+              isRequired
+              isInvalid={attemptedSubmit && !isNonNegativeInt(numKids)}
             >
               <FormLabel variant="form-label-bold">Number of kids</FormLabel>
               <Input
                 type="number"
-                value={numberOfKids}
+                value={numKids}
                 placeholder={PLACEHOLDER_WEB_EXAMPLE_NUMBER_OF_KIDS}
-                onChange={(e) => setNumberOfKids(e.target.value)}
+                onChange={(e) => setNumKids(e.target.value)}
               />
             </FormControl>
           </Flex>
@@ -291,7 +425,6 @@ const Settings = (): React.ReactElement => {
                 Address of organization
               </FormLabel>
               <Input
-                type="email"
                 value={organizationAddress}
                 placeholder={PLACEHOLDER_WEB_EXAMPLE_ADDRESS}
                 onChange={(e) => setOrganizationAddress(e.target.value)}
@@ -299,17 +432,20 @@ const Settings = (): React.ReactElement => {
             </FormControl>
           </Flex>
         </Flex>
-        <Flex flexDir="column" w="60%" gap="8px">
-          <Text variant="desktop-body-bold">Description of organization</Text>
-          <Textarea
-            size="desktop-body"
-            p="12px"
-            borderWidth="2px"
-            borderRadius="4px"
-            placeholder={PLACEHOLDER_WEB_EXAMPLE_ORG_DESCRIPTION}
-            value={organizationDescription}
-            onChange={(e) => setOrganizationDescription(e.target.value)}
-          />
+        <Flex flexDir="column" w="480px">
+          <FormControl
+            isRequired
+            isInvalid={attemptedSubmit && organizationDesc === ""}
+          >
+            <FormLabel variant="desktop-button-bold">
+              Description of organization
+            </FormLabel>
+            <Textarea
+              placeholder={PLACEHOLDER_WEB_EXAMPLE_ORG_DESCRIPTION}
+              value={organizationDesc}
+              onChange={(e) => setOrganizationDesc(e.target.value)}
+            />
+          </FormControl>
         </Flex>
       </Flex>
     );
@@ -336,18 +472,15 @@ const Settings = (): React.ReactElement => {
               />
             </FormControl>
             <FormControl
-              isInvalid={
-                attemptedSubmit &&
-                numberOfKids !== "" &&
-                !isNonNegativeInt(numberOfKids)
-              }
+              isRequired
+              isInvalid={attemptedSubmit && !isNonNegativeInt(numKids)}
             >
               <Input
                 variant="mobile-outline"
                 type="number"
-                value={numberOfKids}
+                value={numKids}
                 placeholder={PLACEHOLDER_MOBILE_EXAMPLE_NUMBER_OF_KIDS}
-                onChange={(e) => setNumberOfKids(e.target.value)}
+                onChange={(e) => setNumKids(e.target.value)}
               />
             </FormControl>
             <FormControl
@@ -361,17 +494,17 @@ const Settings = (): React.ReactElement => {
                 placeholder={PLACEHOLDER_MOBILE_EXAMPLE_ADDRESS}
               />
             </FormControl>
-            <Textarea
-              size="xs"
-              p="12px"
-              borderWidth="2px"
-              focusBorderColor="gray.200"
-              boxShadow="none !important"
-              borderRadius="4px"
-              placeholder={PLACEHOLDER_MOBILE_EXAMPLE_ORG_DESCRIPTION}
-              value={organizationDescription}
-              onChange={(e) => setOrganizationDescription(e.target.value)}
-            />
+            <FormControl
+              isRequired
+              isInvalid={attemptedSubmit && organizationDesc === ""}
+            >
+              <Textarea
+                variant="mobile-outline"
+                value={organizationDesc}
+                placeholder={PLACEHOLDER_MOBILE_EXAMPLE_ORG_DESCRIPTION}
+                onChange={(e) => setOrganizationDesc(e.target.value)}
+              />
+            </FormControl>
           </Flex>
         </FormControl>
       </Flex>
@@ -383,6 +516,7 @@ const Settings = (): React.ReactElement => {
       primaryContact.name,
       organizationName,
       organizationAddress,
+      organizationDesc,
     ];
     const phoneNumsToValidate = [primaryContact.phone];
     const emailsToValidate = [primaryContact.email];
@@ -405,25 +539,72 @@ const Settings = (): React.ReactElement => {
       if (!isValidEmail(emailsToValidate[i])) return false;
     }
 
-    if (numberOfKids !== "" && !isNonNegativeInt(numberOfKids)) return false;
+    if (!isNonNegativeInt(numKids)) return false;
 
     return true;
   };
 
+  const handleSaveSettings = async (
+    requestorId: string,
+    requestUserInfo: UserInfo,
+  ) => {
+    try {
+      const response = await updateUserByID({
+        variables: {
+          requestorId,
+          id: requestorId,
+          userInfo: requestUserInfo,
+        },
+      });
+
+      const newInfo = response.data.updateUserByID?.user?.info;
+      if (newInfo) {
+        setAuthenticatedUser({ ...authenticatedUser, info: newInfo });
+        setUserInfo(newInfo);
+        // Need to override local storage to persist new changes on page refresh/navigation
+        // without this change, the initial state of userinfo will not include new changes
+        // because local storage only updates after the user logs in
+        setLocalStorageObjProperty(AUTHENTICATED_USER_KEY, "info", newInfo);
+        toast({
+          title: "Saved settings successfully",
+          status: "success",
+          isClosable: true,
+        });
+      } else {
+        throw new GraphQLError("Failed to save settings");
+      }
+    } catch (e: unknown) {
+      // eslint-disable-next-line no-console
+      console.log(e);
+      toast({
+        title: "Failed to save settings",
+        status: "error",
+        isClosable: true,
+      });
+    }
+  };
+
   const handleSubmit = () => {
     setAttemptedSave(true);
     if (!isRequestValid()) return;
 
-    const request: UserSettings = {
+    const requestUserInfo: UserInfo = {
+      email: userInfo?.email || "",
+      organizationAddress: trimWhiteSpace(organizationAddress),
+      organizationName: trimWhiteSpace(organizationName),
+      organizationDesc,
+      role: userInfo?.role || "ASP",
+      roleInfo: {
+        aspInfo: {
+          numKids: parseInt(trimWhiteSpace(numKids), 10),
+        },
+        donorInfo: null,
+      },
       primaryContact: {
         name: trimWhiteSpace(primaryContact.name),
         email: trimWhiteSpace(primaryContact.email),
         phone: trimWhiteSpace(primaryContact.phone),
       },
-      organizationName: trimWhiteSpace(organizationName),
-      numberOfKids: parseInt(trimWhiteSpace(numberOfKids), 10),
-      organizationAddress: trimWhiteSpace(organizationAddress),
-      organizationDescription: trimWhiteSpace(organizationDescription),
       onsiteContacts: onsiteInfo.map((obj) => ({
         name: trimWhiteSpace(obj.name),
         phone: trimWhiteSpace(obj.phone),
@@ -431,10 +612,8 @@ const Settings = (): React.ReactElement => {
       })),
     };
 
-    // eslint-disable-next-line no-console
-    console.log(request);
-
-    // TODO: handleSaveSettings(request);
+    const requestorId = authenticatedUser?.id;
+    handleSaveSettings(requestorId, requestUserInfo);
   };
 
   const getSaveSection = (): React.ReactElement => {
@@ -453,7 +632,9 @@ const Settings = (): React.ReactElement => {
           color: "primary.green",
           bgColor: "background.white",
         }}
-        disabled={attemptedSubmit && !isRequestValid()}
+        disabled={
+          !haveSettingsChanged() || (attemptedSubmit && !isRequestValid())
+        }
         _disabled={{
           borderColor: "#CCCCCC !important",
           bgColor: "#CCCCCC !important",
diff --git a/frontend/src/types/UserTypes.ts b/frontend/src/types/UserTypes.ts
index 01bc4731..5731b880 100644
--- a/frontend/src/types/UserTypes.ts
+++ b/frontend/src/types/UserTypes.ts
@@ -1,3 +1,11 @@
+export type LoginData = {
+  registeredUser: {
+    accessToken: string;
+    id: string;
+    info: UserInfo;
+  };
+} | null;
+
 export type AuthenticatedUser = {
   accessToken: string;
   id: string;
@@ -37,7 +45,7 @@ export type UserInfo = {
   roleInfo: RoleInfo;
   primaryContact: Contact;
   onsiteContacts: Array<Contact>;
-};
+} | null;
 
 export type OnboardingRequest = {
   id: string;
@@ -45,12 +53,3 @@ export type OnboardingRequest = {
   dateSubmitted: string;
   status: string;
 } | null;
-
-export type UserSettings = {
-  primaryContact: Contact;
-  organizationName: string;
-  numberOfKids: number;
-  organizationAddress: string;
-  organizationDescription: string;
-  onsiteContacts: Array<Contact>;
-};

From a9a48f436d369aee7fa1cb6f0281e2cca6d5cf20 Mon Sep 17 00:00:00 2001
From: Sophie Yang <84421650+sophie-wjyang@users.noreply.github.com>
Date: Sat, 5 Aug 2023 20:01:05 -0400
Subject: [PATCH 3/3] Edit meal request form (#83)

---
 frontend/.eslintrc.js                         |   1 +
 frontend/src/components/pages/Dashboard.tsx   |   3 +
 .../components/pages/EditMealRequestForm.tsx  | 315 ++++++++++++++++++
 frontend/src/setupTests.ts                    |  18 +
 4 files changed, 337 insertions(+)
 create mode 100644 frontend/src/components/pages/EditMealRequestForm.tsx

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index afd6dda3..2492c4b8 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -32,6 +32,7 @@ module.exports = {
     "react/no-array-index-key": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
     "react/function-component-definition": [
       "warn",
       {
diff --git a/frontend/src/components/pages/Dashboard.tsx b/frontend/src/components/pages/Dashboard.tsx
index 9f81c173..1cb1285f 100644
--- a/frontend/src/components/pages/Dashboard.tsx
+++ b/frontend/src/components/pages/Dashboard.tsx
@@ -2,6 +2,8 @@ import { Button as ChakraButton, Wrap } from "@chakra-ui/react";
 import React, { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 
+import EditMealRequestForm from "./EditMealRequestForm";
+
 import BackgroundImage from "../../assets/background.png";
 import * as Routes from "../../constants/Routes";
 import SampleContext from "../../contexts/SampleContext";
@@ -67,6 +69,7 @@ const Default = (): React.ReactElement => {
         />
         <Button text="Edit Team" path={Routes.EDIT_TEAM_PAGE} />
         <Button text="Hooks Demo" path={Routes.HOOKS_PAGE} />
+        <EditMealRequestForm />
       </Wrap>
       <div style={{ height: "2rem" }} />
 
diff --git a/frontend/src/components/pages/EditMealRequestForm.tsx b/frontend/src/components/pages/EditMealRequestForm.tsx
new file mode 100644
index 00000000..518f7a81
--- /dev/null
+++ b/frontend/src/components/pages/EditMealRequestForm.tsx
@@ -0,0 +1,315 @@
+import {
+  Button,
+  Divider,
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+
+import { Contact } from "../../types/UserTypes";
+import { isValidEmail } from "../../utils/ValidationUtils";
+import useIsWebView from "../../utils/useIsWebView";
+import OnsiteStaffSection from "../common/OnsiteStaffSection";
+
+const PLACEHOLDER_WEB_EXAMPLE_FULL_NAME = "Jane Doe";
+const PLACEHOLDER_WEB_EXAMPLE_PHONE_NUMBER = "111-222-3333";
+const PLACEHOLDER_WEB_EXAMPLE_EMAIL = "example@domain.com";
+
+const PLACEHOLDER_MOBILE_EXAMPLE_FULL_NAME = "Full Name (Jane Doe)";
+const PLACEHOLDER_MOBILE_EXAMPLE_EMAIL = "Email (example@domain.com)";
+const PLACEHOLDER_MOBILE_EXAMPLE_PHONE_NUMBER = "Phone Number (111-222-3333)";
+
+const EditMealRequestForm = () => {
+  const [primaryContact, setPrimaryContact] = useState<Contact>({
+    name: "",
+    phone: "",
+    email: "",
+  });
+  const [onsiteInfo, setOnsiteInfo] = useState<Array<Contact>>([
+    {
+      name: "",
+      phone: "",
+      email: "",
+    },
+  ]);
+
+  const [attemptedSubmit, setAttemptedSubmit] = useState(false);
+  const isWebView = useIsWebView();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const initialFocusRef = React.useRef(null);
+
+  const getMobileContactSection = (): React.ReactElement => {
+    return (
+      <Flex flexDir="column" gap="8px">
+        <FormControl isRequired mb={6}>
+          <FormLabel variant="mobile-form-label-bold">
+            Primary Contact
+          </FormLabel>
+          <Flex flexDir="column" gap="8px">
+            <FormControl
+              isRequired
+              isInvalid={attemptedSubmit && primaryContact.name === ""}
+            >
+              <Input
+                variant="mobile-outline"
+                value={primaryContact.name}
+                onChange={(e) =>
+                  setPrimaryContact({ ...primaryContact, name: e.target.value })
+                }
+                placeholder={PLACEHOLDER_MOBILE_EXAMPLE_FULL_NAME}
+              />
+            </FormControl>
+            <FormControl
+              isRequired
+              isInvalid={attemptedSubmit && primaryContact.phone === ""}
+            >
+              <Input
+                variant="mobile-outline"
+                type="tel"
+                value={primaryContact.phone}
+                onChange={(e) =>
+                  setPrimaryContact({
+                    ...primaryContact,
+                    phone: e.target.value,
+                  })
+                }
+                placeholder={PLACEHOLDER_MOBILE_EXAMPLE_PHONE_NUMBER}
+              />
+            </FormControl>
+            <FormControl
+              isRequired
+              isInvalid={attemptedSubmit && !isValidEmail(primaryContact.email)}
+            >
+              <Input
+                variant="mobile-outline"
+                type="email"
+                value={primaryContact.email}
+                onChange={(e) =>
+                  setPrimaryContact({
+                    ...primaryContact,
+                    email: e.target.value,
+                  })
+                }
+                placeholder={PLACEHOLDER_MOBILE_EXAMPLE_EMAIL}
+              />
+            </FormControl>
+          </Flex>
+        </FormControl>
+      </Flex>
+    );
+  };
+
+  const getWebContactSection = (): React.ReactElement => {
+    return (
+      <>
+        <Text variant="desktop-heading" pt={4} pb={3}>
+          Contact Information
+        </Text>
+
+        <Flex flexDir="column" gap="24px">
+          <Flex flexDir="column">
+            <FormControl
+              isRequired
+              isInvalid={attemptedSubmit && primaryContact.name === ""}
+            >
+              <FormLabel
+                variant={{
+                  base: "mobile-form-label-bold",
+                  md: "form-label-bold",
+                }}
+              >
+                Primary contact name
+              </FormLabel>
+              <Input
+                value={primaryContact.name}
+                placeholder={PLACEHOLDER_WEB_EXAMPLE_FULL_NAME}
+                onChange={(e) =>
+                  setPrimaryContact({ ...primaryContact, name: e.target.value })
+                }
+              />
+            </FormControl>
+          </Flex>
+
+          <Flex flexDir="row" gap="24px">
+            <Flex flexDir="column" w="240px">
+              <FormControl
+                isRequired
+                isInvalid={attemptedSubmit && primaryContact.phone === ""}
+                mb={6}
+              >
+                <FormLabel
+                  variant={{
+                    base: "mobile-form-label-bold",
+                    md: "form-label-bold",
+                  }}
+                >
+                  Phone number
+                </FormLabel>
+                <Input
+                  type="tel"
+                  value={primaryContact.phone}
+                  placeholder={PLACEHOLDER_WEB_EXAMPLE_PHONE_NUMBER}
+                  onChange={(e) =>
+                    setPrimaryContact({
+                      ...primaryContact,
+                      phone: e.target.value,
+                    })
+                  }
+                />
+              </FormControl>
+            </Flex>
+
+            <Flex flexDir="column" w="519px">
+              <FormControl
+                isRequired
+                isInvalid={
+                  attemptedSubmit && !isValidEmail(primaryContact.email)
+                }
+              >
+                <FormLabel
+                  variant={{
+                    base: "mobile-form-label-bold",
+                    md: "form-label-bold",
+                  }}
+                >
+                  Email address
+                </FormLabel>
+                <Input
+                  type="email"
+                  value={primaryContact.email}
+                  placeholder={PLACEHOLDER_WEB_EXAMPLE_EMAIL}
+                  onChange={(e) =>
+                    setPrimaryContact({
+                      ...primaryContact,
+                      email: e.target.value,
+                    })
+                  }
+                />
+              </FormControl>
+            </Flex>
+          </Flex>
+        </Flex>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Button onClick={onOpen}>Edit Meal Request</Button>
+      <Modal
+        initialFocusRef={initialFocusRef}
+        isOpen={isOpen}
+        onClose={onClose}
+      >
+        <ModalOverlay />
+        <ModalContent
+          maxWidth={{ base: "100%", md: "900px" }}
+          padding={{ base: "10px", md: "40px" }}
+        >
+          <Text
+            pb={{ base: 1, md: 5 }}
+            pl={{ base: 6, md: 6 }}
+            pt={{ base: 5, md: 8 }}
+            variant={{ base: "mobile-display-xl", md: "desktop-display-xl" }}
+          >
+            Edit Meal Request
+          </Text>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <Text
+              variant={{
+                base: "mobile-heading",
+                md: "desktop-heading",
+              }}
+            >
+              Meal Information
+            </Text>
+
+            <FormControl mt={3} mb={6} isRequired>
+              <FormLabel
+                variant={{
+                  base: "mobile-form-label-bold",
+                  md: "form-label-bold",
+                }}
+
+                // TODO: Hook this up to a state variable
+                // TODO: Setup correct validation for this
+                // isInvalid={attemptedSubmit && }
+              >
+                Number of meals
+              </FormLabel>
+              <Input ref={initialFocusRef} w="200px" placeholder="Ex. 100" />
+            </FormControl>
+
+            <FormControl mt={3} mb={6} isRequired>
+              <FormLabel
+                variant={{
+                  base: "mobile-form-label-bold",
+                  md: "form-label-bold",
+                }}
+
+                // TODO: Hook this up to a state variable
+                // TODO: Setup correct validation for this
+                // isInvalid={attemptedSubmit && }
+              >
+                Dietary restrictions
+              </FormLabel>
+              <Input placeholder="Ex. Nut allergy, gluten free" />
+            </FormControl>
+
+            <FormControl mt={3} mb={6} isRequired>
+              <FormLabel
+                variant={{
+                  base: "mobile-form-label-bold",
+                  md: "form-label-bold",
+                }}
+                // TODO: Hook this up to a state variable
+                // TODO: Setup correct validation for this
+                // isInvalid={attemptedSubmit && }
+              >
+                Delivery Notes
+              </FormLabel>
+              <Input placeholder="Ex. Nut allergy, gluten free" />
+              <br />
+            </FormControl>
+            {isWebView && <Divider />}
+            {isWebView ? getWebContactSection() : getMobileContactSection()}
+
+            <OnsiteStaffSection
+              onsiteInfo={onsiteInfo}
+              setOnsiteInfo={setOnsiteInfo}
+              attemptedSubmit={attemptedSubmit}
+            />
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onClick={onClose} mr={3} variant="outline">
+              Cancel
+            </Button>
+            <Button
+              colorScheme="blue"
+              onClick={() => {
+                setAttemptedSubmit(true);
+              }}
+            >
+              Save
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default EditMealRequestForm;
diff --git a/frontend/src/setupTests.ts b/frontend/src/setupTests.ts
index 80365138..4ef8a432 100644
--- a/frontend/src/setupTests.ts
+++ b/frontend/src/setupTests.ts
@@ -7,3 +7,21 @@
 // "normal .ts file."
 // eslint-disable-next-line import/no-extraneous-dependencies
 import "@testing-library/jest-dom";
+
+// To fix issue in some tests with not finding "matchMedia"
+// https://stackoverflow.com/questions/39830580/jest-test-fails-typeerror-window-matchmedia-is-not-a-function
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+// https://github.com/facebook/create-react-app/issues/10126
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: any) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }),
+});