diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx index 4b419f1a..c757ea0e 100644 --- a/apps/frontend/src/app.tsx +++ b/apps/frontend/src/app.tsx @@ -4,6 +4,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import apiClient from '@api/apiClient'; import Root from '@containers/root'; import NotFound from '@containers/404'; +import { submitFoodRequestForm } from '@components/forms/foodRequestForm'; +import RequestFood from '@containers/foodRequest'; import LandingPage from '@containers/landingPage'; import PantryOverview from '@containers/pantryOverview'; import PantryPastOrders from '@containers/pantryPastOrders'; @@ -38,6 +40,11 @@ const router = createBrowserRouter([ }, ], }, + { + path: '/food-request', + element: , + action: submitFoodRequestForm, + }, ]); export const App: React.FC = () => { diff --git a/apps/frontend/src/components/forms/foodRequestForm.tsx b/apps/frontend/src/components/forms/foodRequestForm.tsx new file mode 100644 index 00000000..adf4e514 --- /dev/null +++ b/apps/frontend/src/components/forms/foodRequestForm.tsx @@ -0,0 +1,218 @@ +import { + Flex, + Box, + Heading, + FormControl, + FormLabel, + Input, + Button, + FormHelperText, + Checkbox, + Stack, + Textarea, + SimpleGrid, + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + CheckboxGroup, +} from '@chakra-ui/react'; +import { + Form, + redirect, + ActionFunction, + ActionFunctionArgs, +} from 'react-router-dom'; + +// should be an API call, dummy data for now +const getMenu = () => { + return { + Dairy: [ + 'Whole Milk', + 'Lactose-Free Milk', + 'Salted Butter', + 'Eggs', + 'Yogurt', + 'American Cheese', + 'Mozzarella Cheese', + ], + Meat: [ + 'Chicken Breast', + 'Ground Beef', + 'Ground Pork', + 'Ground Turkey', + 'Chicken Strips', + 'Turkey Bacon', + ], + Fruit: [ + 'Pear', + 'Orange', + 'Banana', + 'Lychee', + 'Tangerine', + 'Tomato', + 'Pineapple', + ], + Vegetables: ['Cauliflower', '小白菜', 'Spinach', 'Broccolini', 'Seaweed'], + Snacks: [ + 'Oreos (20ct)', + 'Potato Chips', + 'Chocolate Bars (4 ct)', + 'Nimbu Masala', + ], + Alcohol: [ + 'Red Wine', + 'Fireball', + 'Tequila', + 'Sake', + 'Malt Liquor', + 'Vodka', + 'Rum', + ], + }; +}; + +// might be an API call, dummy data for now +const getAllergens = () => { + return [ + 'Milk', + 'Eggs', + 'Fish', + 'Shellfish', + 'Tree Nuts', + 'Peanuts', + 'Wheat', + 'Soybeans', + 'Sesame', + 'Other (specify in notes)', + ]; +}; + +const FoodRequestForm: React.FC = () => { + const renderAllergens = () => { + return getAllergens().map((a) => ( + + {a} + + )); + }; + + const renderMenuSection = (sectionItems: Array) => { + return ( + + {sectionItems.map((x) => ( + + + + + + + + +

{x}

+
+ ))} +
+ ); + }; + + const renderMenu = () => { + const menu: Map> = new Map(Object.entries(getMenu())); + const menuSections: JSX.Element[] = []; + menu.forEach((v, k) => { + menuSections.push( +
+ + {k} + + {renderMenuSection(v)} +
, + ); + }); + return menuSections; + }; + + return ( + +
+ + SSF Food Request Form + + + + Requested Delivery Date + + + + We'll reach out to confirm a date and time + + + + + Dietary Restrictions + + + + {renderAllergens()} + + + + + + Requested Items + + {renderMenu()} + + + + Additional Comments + +