From 5941bb7468a354dbab1a480c9a03133145c66d66 Mon Sep 17 00:00:00 2001
From: Colin Toft <47548563+ColinToft@users.noreply.github.com>
Date: Wed, 4 Sep 2024 13:30:25 -0700
Subject: [PATCH] Fix signup page prompt text and adding new onsite contacts on
 small screens (#174)

* Fix maximum row count and add contact not working

* Specify address AND CITY of organization
---
 frontend/src/components/auth/Join.tsx         |  2 +-
 .../common/OnsiteContactSection.tsx           | 45 +++++++++++--------
 frontend/src/pages/MealRequestForm.tsx        |  2 +-
 frontend/src/pages/Settings.tsx               |  4 +-
 4 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/auth/Join.tsx b/frontend/src/components/auth/Join.tsx
index a2f101c9..63b2fa74 100644
--- a/frontend/src/components/auth/Join.tsx
+++ b/frontend/src/components/auth/Join.tsx
@@ -55,7 +55,7 @@ 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 PLACEHOLDER_MOBILE_EXAMPLE_ORG_NAME = "Name of organization";
-const PLACEHOLDER_MOBILE_EXAMPLE_ADDRESS = "Address of organization";
+const PLACEHOLDER_MOBILE_EXAMPLE_ADDRESS = "Address and city of organization";
 const PLACEHOLDER_MOBILE_EXAMPLE_NUM_KIDS = "Number of kids";
 const PLACEHOLDER_MOBILE_EXAMPLE_DESCRIPTION = "Description of organization";
 
diff --git a/frontend/src/components/common/OnsiteContactSection.tsx b/frontend/src/components/common/OnsiteContactSection.tsx
index b57406e9..26006989 100644
--- a/frontend/src/components/common/OnsiteContactSection.tsx
+++ b/frontend/src/components/common/OnsiteContactSection.tsx
@@ -37,6 +37,10 @@ type OnsiteTextInputRowProps = {
   minimumRowCount?: number;
 };
 
+type OnsiteTextInputRowPropsWithMax = OnsiteTextInputRowProps & {
+  maximumRowCount?: number;
+};
+
 const OnsiteTextInputRow = ({
   onsiteInfo,
   setOnsiteInfo,
@@ -121,7 +125,8 @@ const MobileOnsiteTextInputRow = ({
   index,
   attemptedSubmit,
   minimumRowCount = 1,
-}: OnsiteTextInputRowProps): React.ReactElement => (
+  maximumRowCount = 10,
+}: OnsiteTextInputRowPropsWithMax): React.ReactElement => (
   <Flex flexDir="column" gap="8px" key={index}>
     <Flex flexDir="row" justifyContent="space-between">
       <FormControl isRequired={index < minimumRowCount}>
@@ -145,7 +150,8 @@ const MobileOnsiteTextInputRow = ({
     </Flex>
     {index === 0 && (
       <Text color="text.subtitle" variant="desktop-xs" mt="-16px">
-        *Must add at least 1 onsite staff. Maximum is 10.
+        *Must add at least {minimumRowCount} onsite staff. Maximum is{" "}
+        {maximumRowCount}.
       </Text>
     )}
     <FormControl
@@ -198,7 +204,7 @@ const MobileOnsiteTextInputRow = ({
   </Flex>
 );
 
-type onsiteContactDropdownProps = {
+type OnsiteContactDropdownProps = {
   onsiteInfo: Array<Contact>;
   setOnsiteInfo: React.Dispatch<React.SetStateAction<Contact[]>>;
   availableStaff: Array<Contact>;
@@ -207,6 +213,10 @@ type onsiteContactDropdownProps = {
   minimumRowCount?: number;
 };
 
+type OnsiteContactDropdownPropsWithMax = OnsiteContactDropdownProps & {
+  maximumRowCount?: number;
+};
+
 const OnsiteDropdownInputRow = ({
   onsiteInfo,
   setOnsiteInfo,
@@ -214,7 +224,7 @@ const OnsiteDropdownInputRow = ({
   index,
   attemptedSubmit,
   minimumRowCount = 1,
-}: onsiteContactDropdownProps): React.ReactElement => (
+}: OnsiteContactDropdownProps): React.ReactElement => (
   // Choose the name from a dropdown of available staff, and then fill in the rest of the info based on that
 
   <Tr h="58px">
@@ -289,7 +299,8 @@ const MobileOnsiteDropdownInputRow = ({
   index,
   attemptedSubmit,
   minimumRowCount = 1,
-}: onsiteContactDropdownProps): React.ReactElement => (
+  maximumRowCount = 10,
+}: OnsiteContactDropdownPropsWithMax): React.ReactElement => (
   <Flex flexDir="column" gap="8px" key={index}>
     <Flex flexDir="row" justifyContent="space-between">
       <FormControl isRequired={index < minimumRowCount}>
@@ -313,7 +324,8 @@ const MobileOnsiteDropdownInputRow = ({
     </Flex>
     {index === 0 && (
       <Text color="text.subtitle" variant="desktop-xs" mt="-16px">
-        *Must add at least 1 onsite staff. Maximum is 10.
+        *Must add at least {minimumRowCount} onsite staff. Maximum is{" "}
+        {maximumRowCount}.
       </Text>
     )}
     <FormControl
@@ -379,7 +391,6 @@ const OnsiteContactSection = ({
 }: OnsiteContactSectionProps): React.ReactElement => {
   const isWebView = useIsWebView();
 
-
   if (isWebView) {
     return (
       <Flex flexDir="column" gap="24px">
@@ -537,23 +548,21 @@ const OnsiteContactSection = ({
           />
         ),
       )}
-      {onsiteInfo.length < 10 && (
+      {onsiteInfo.length < maximumRowCount && (
         <Text
           variant="mobile-body-bold"
           color="primary.blue"
           cursor="pointer"
           w="fit-content"
           onClick={() => {
-            if (dropdown) {
-              setOnsiteInfo([
-                ...onsiteInfo,
-                {
-                  name: "",
-                  phone: "",
-                  email: "",
-                },
-              ]);
-            }
+            setOnsiteInfo([
+              ...onsiteInfo,
+              {
+                name: "",
+                phone: "",
+                email: "",
+              },
+            ]);
           }}
         >
           + Add another contact
diff --git a/frontend/src/pages/MealRequestForm.tsx b/frontend/src/pages/MealRequestForm.tsx
index d9ffdbfe..104954fa 100644
--- a/frontend/src/pages/MealRequestForm.tsx
+++ b/frontend/src/pages/MealRequestForm.tsx
@@ -46,7 +46,7 @@ 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 PLACEHOLDER_MOBILE_EXAMPLE_ORG_NAME = "Name of organization";
-const PLACEHOLDER_MOBILE_EXAMPLE_ADDRESS = "Address of organization";
+const PLACEHOLDER_MOBILE_EXAMPLE_ADDRESS = "Address and city of organization";
 
 const MealRequestForm = () => {
   const [role, setRole] = useState<Role>("ASP");
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 6b797bc6..ffe7563d 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -59,7 +59,7 @@ const PLACEHOLDER_MOBILE_EXAMPLE_EMAIL = "Email (example@domain.com)";
 const PLACEHOLDER_MOBILE_EXAMPLE_PHONE_NUMBER = "Phone Number (111-222-3333)";
 const PLACEHOLDER_MOBILE_EXAMPLE_ORG_NAME = "Name of organization";
 const PLACEHOLDER_MOBILE_EXAMPLE_NUMBER_OF_KIDS = "Number of kids";
-const PLACEHOLDER_MOBILE_EXAMPLE_ADDRESS = "Address of organization";
+const PLACEHOLDER_MOBILE_EXAMPLE_ADDRESS = "Address and city of organization";
 const PLACEHOLDER_MOBILE_EXAMPLE_ORG_DESCRIPTION =
   "Description of organization";
 
@@ -548,7 +548,7 @@ const Settings = (): React.ReactElement => {
             isInvalid={attemptedSubmit && organizationAddress === ""}
           >
             <FormLabel variant="form-label-bold">
-              Address of organization
+              Address and city of organization
             </FormLabel>
             <Input
               value={organizationAddress}