Add Travel Scholarship section to registration form and enhance group creation functionality

Author: DerCed

src/components/Registration/GroupManager/GroupManager.jsx

@@ -8,7 +8,7 @@ import {
   Typography,
 } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
-import {useEffect, useMemo, useState} from "react";
+import { useEffect, useMemo, useState } from "react";
 import { GroupRest } from "../../../rest/GroupRest";
 
 export function GroupManager(props) {
@@ -17,21 +17,27 @@ export function GroupManager(props) {
   const [group, setGroup] = useState(false);
   const [groupInput, setGroupInput] = useState("");
   const [groupInputError, setGroupInputError] = useState(false);
+  const [groupName, setGroupName] = useState("");
   const groupRest = useMemo(() => new GroupRest(), []);
 
-
   function createNewGroup() {
     setLoadingNewTeam(true);
-    setGroupInputError(false)
-    groupRest.createGroup(props.eventId).then((response) => {
-      setLoadingNewTeam(false);
-      setGroup(response.data);
-    });
+    setGroupInputError(false);
+    groupRest
+      .createGroup(props.eventId)
+      .then((response) => {
+        setLoadingNewTeam(false);
+        setGroup(response.data);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoadingNewTeam(false);
+      });
   }
 
   function getGroup() {
     setFetchingExistingTeam(true);
-      setGroupInputError(false)
+    setGroupInputError(false);
     groupRest
       .getGroup(props.eventId, groupInput)
       .then((response) => {
@@ -45,17 +51,17 @@ export function GroupManager(props) {
       });
   }
 
-    useEffect(() => {
-        props.onGroupChange(group)
-    }, [group]);
+  useEffect(() => {
+    props.onGroupChange(group);
+  }, [group]);
 
   function renderGroupSelection() {
     return (
       <Box sx={{ pt: 5, pb: 5 }}>
         <Stack direction="row" spacing={2}>
           <TextField
             fullWidth
-            label={"Enter team name (e.g. chalk-increase-vague)"}
+            label={"Enter team identification (e.g. chalk-increase-vague)"}
             value={groupInput}
             onChange={(event) => setGroupInput(event.target.value)}
             error={groupInputError}
@@ -72,26 +78,47 @@ export function GroupManager(props) {
             Join
           </LoadingButton>
         </Stack>
+        <Typography variant={"body2"} color={"text.disabled"} pt={1}>
+          Identifier given by the group creator
+        </Typography>
         <Divider sx={{ pt: 2, pb: 2 }}> or </Divider>
-        <Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>
+        <Stack direction="row" spacing={2}>
+          <TextField
+            fullWidth
+            label={"Enter team name (e.g. Carbon Coders)"}
+            value={groupName}
+            onChange={(event) => setGroupName(event.target.value)}
+            disabled={fetchingExistingTeam}
+          />
           <LoadingButton
+            sx={{ flexWrap: "nowrap" }}
+            width={"100px"}
             variant={"outlined"}
             color={"primary"}
             onClick={createNewGroup}
             loading={loadingNewTeam}
-            disabled={fetchingExistingTeam}
+            disabled={
+              fetchingExistingTeam ||
+              groupName.length < 3 ||
+              groupName.length > 30
+            }
           >
-            Create new Team
+            Create
           </LoadingButton>
-        </Box>
+        </Stack>
+        <Typography variant={"body2"} color={"text.disabled"} pt={1}>
+          This will be your team name at the event
+        </Typography>
       </Box>
     );
   }
 
   function renderGroup() {
     return (
       <Box sx={{ pt: 5, pb: 5 }}>
-        <Typography gutterBottom>You are assigned to the group</Typography>
+        <Typography gutterBottom>
+          You are assigned to the group with identifier
+        </Typography>
         <Typography sx={{ fontWeight: 800, pb: 3 }} variant={"h5"}>
           {group.phrase}
         </Typography>
@@ -100,7 +127,7 @@ export function GroupManager(props) {
         </Button>
 
         <Typography sx={{ pt: 4 }}>
-          share this name to your team members
+          share this identifier to your team members
         </Typography>
         <Typography color={"text.secondary"}>
           This is not your actual team name at the event

src/components/Registration/Registration.jsx

@@ -199,6 +199,25 @@ const skills = [
   },
 ];
 
+const travelSponsorship = [
+  {
+    fullWidth: true,
+    input:
+      "Quantco, our partner, is offering travel scholarships to participants worldwide. To apply, simply submit your CV using the checkbox below.",
+    type: INPUT_TYPES.TYPOGRAPHY,
+  },
+  {
+    formLabel: "",
+    input: [
+      "I consent to sharing my contact information and CV with our partner, Quantco, and authorize them to contact me.",
+    ],
+    name: "travelStipend",
+    type: INPUT_TYPES.CHECKBOX,
+    required: false,
+    fullWidth: true,
+  },
+];
+
 const legal = [
   {
     formLabel: "Privacy Policy",
@@ -218,16 +237,6 @@ const legal = [
     required: false,
     fullWidth: true,
   },
-  {
-    formLabel: "Apply for Travel Stipend",
-    input: [
-      "I agree that my contact and job-related data will be passed to our partner Quantco. Quantco will reach out to you, if you will be selected. Stipend applies worldwide.",
-    ],
-    name: "travelStipend",
-    type: 5,
-    required: false,
-    fullWidth: true,
-  },
   {
     input: [
       "Film and sound recordings as well as photos will be made at the event, and you agree to their subsequent use by attending the event.",
@@ -262,11 +271,15 @@ function Registration() {
       label: "Team members",
       children: (
         <GroupManager
-          eventId={"02fc811b-1e67-402e-ac62-3f376cf33b6b"}
+          eventId={"c11a427e-f679-49b6-8574-b0d3211ad123"}
           onGroupChange={(change) => handleChange("group", change)}
         />
       ),
     },
+    {
+      label: "Travel Scholarship",
+      content: travelSponsorship,
+    },
     {
       label: "Confirmation",
       content: legal,
@@ -439,7 +452,7 @@ function Registration() {
           />
         );
       case INPUT_TYPES.TYPOGRAPHY:
-        return <Typography>{input}</Typography>;
+        return <Typography fullWidth>{input}</Typography>;
 
       default:
         return null;

src/rest/GroupRest.js

@@ -2,8 +2,8 @@ import axios from "axios";
 import { AbstractRest } from "./AbstractRest";
 
 export class GroupRest extends AbstractRest {
-  createGroup(signUpFormId) {
-    return axios.post(this.baseUrl + "/group", { event: { id: signUpFormId } });
+  createGroup(signUpFormId, name) {
+    return axios.post(this.baseUrl + "/group", { event: { id: signUpFormId }, name });
   }
 
   getGroup(eventId, groupName) {