Fix signup page prompt text and adding new onsite contacts on small s…

…creens (#174) * Fix maximum row count and add contact not working * Specify address AND CITY of organization
uwblueprint · Sep 4, 2024 · 5941bb7 · 5941bb7
1 parent 6e03c91
commit 5941bb7
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git 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 ([email protected])";
 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
@@ -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,14 +213,18 @@ type onsiteContactDropdownProps = {
   minimumRowCount?: number;
 };
 
+type OnsiteContactDropdownPropsWithMax = OnsiteContactDropdownProps & {
+  maximumRowCount?: number;
+};
+
 const OnsiteDropdownInputRow = ({
   onsiteInfo,
   setOnsiteInfo,
   availableStaff,
   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
@@ -46,7 +46,7 @@ const PLACEHOLDER_MOBILE_EXAMPLE_FULL_NAME = "Full Name (Jane Doe)";
 const PLACEHOLDER_MOBILE_EXAMPLE_EMAIL = "Email ([email protected])";
 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
@@ -59,7 +59,7 @@ const PLACEHOLDER_MOBILE_EXAMPLE_EMAIL = "Email ([email protected])";
 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}