Add application question for prior bootcamps or programs (#645)

* Add application question for prior bootcamps or programs

* Add question for concurrent courses or programs

* Update placeholder text

Author: jonulak

src/components/forms/apply-form.tsx

@@ -3,10 +3,13 @@ import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import axios from "axios";
 import Input from "@ui/form-elements/input";
+import Checkbox from "@ui/form-elements/checkbox";
+import TextArea from "@ui/form-elements/textarea";
 import Button from "@ui/button";
 import { hasKey } from "@utils/methods";
 import Feedback from "@ui/form-elements/feedback";
 import { linkedinRegex, githubRegex } from "@utils/formValidations";
+import { motion } from "framer-motion";
 
 interface IFormValues {
     firstName: string;
@@ -19,6 +22,10 @@ interface IFormValues {
     branchOfService: string;
     yearJoined: string;
     yearSeparated: string;
+    hasAttendedPreviousCourse: boolean;
+    previousCourses: string;
+    willAttendAnotherCourse: boolean;
+    otherCourses: string;
     linkedInAccountName: string;
     githubAccountName: string;
     preworkLink: string;
@@ -34,8 +41,12 @@ const ApplyForm = () => {
         handleSubmit,
         formState: { errors },
         reset,
+        watch,
     } = useForm<IFormValues>();
 
+    const watchHasAttendedPreviousCourses = watch("hasAttendedPreviousCourse", false);
+    const watchWillAttendAnotherCourse = watch("willAttendAnotherCourse", false);
+
     const onSubmit: SubmitHandler<IFormValues> = async (data) => {
         try {
             await axios.post("/api/apply", data);
@@ -219,7 +230,67 @@ const ApplyForm = () => {
                         })}
                     />
                 </div>
-                <div className="tw-mb-7.5">
+                <Checkbox
+                    label="Have you previously attended any coding bootcamps or tech education programs?"
+                    id="hasAttendedPreviousCourse"
+                    {...register("hasAttendedPreviousCourse")}
+                />
+                <br />
+                {watchHasAttendedPreviousCourses && (
+                    <motion.div
+                        layout
+                        className="tw-mb-7.5"
+                        initial={{ opacity: 0, scale: 0.4 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                    >
+                        <label htmlFor="previousCourses" className="tw-text-heading tw-text-md">
+                            List previous courses *
+                        </label>
+                        <TextArea
+                            id="previousCourses"
+                            placeholder="Javascript 101"
+                            bg="light"
+                            feedbackText={errors?.previousCourses?.message}
+                            state={hasKey(errors, "previousCourses") ? "error" : "success"}
+                            showState={!!hasKey(errors, "previousCourses")}
+                            {...register("previousCourses", {
+                                required: "List previous coursework or uncheck the box",
+                            })}
+                        />
+                    </motion.div>
+                )}
+                <motion.div layout>
+                    <Checkbox
+                        label="Will you be attending any other courses or programs concurrently with Vets Who Code?"
+                        id="willAttendAnotherCourse"
+                        {...register("willAttendAnotherCourse")}
+                    />
+                    <br />
+                </motion.div>
+                {watchWillAttendAnotherCourse && (
+                    <motion.div
+                        layout
+                        className="tw-mb-7.5"
+                        initial={{ opacity: 0, scale: 0.4 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                    >
+                        <label htmlFor="otherCourses" className="tw-text-heading tw-text-md">
+                            List concurrent courses/programs *
+                        </label>
+                        <TextArea
+                            id="otherCourses"
+                            placeholder="Civvies Who Code"
+                            bg="light"
+                            feedbackText={errors?.otherCourses?.message}
+                            state={hasKey(errors, "otherCourses") ? "error" : "success"}
+                            showState={!!hasKey(errors, "otherCourses")}
+                            {...register("otherCourses", {
+                                required: "List concurrent coursework or uncheck the box",
+                            })}
+                        />
+                    </motion.div>
+                )}
+                <motion.div layout className="tw-mb-7.5">
                     <label htmlFor="linkedInAccountName" className="tw-text-heading tw-text-md">
                         LinkedIn Account Name *
                     </label>
@@ -239,8 +310,8 @@ const ApplyForm = () => {
                             },
                         })}
                     />
-                </div>
-                <div className="tw-mb-7.5">
+                </motion.div>
+                <motion.div layout className="tw-mb-7.5">
                     <label htmlFor="githubAccountName" className="tw-text-heading tw-text-md">
                         GitHub Account Name *
                     </label>
@@ -260,8 +331,8 @@ const ApplyForm = () => {
                             },
                         })}
                     />
-                </div>
-                <div className="tw-mb-7.5">
+                </motion.div>
+                <motion.div layout className="tw-mb-7.5">
                     <label htmlFor="preworkLink" className="tw-text-heading tw-text-md">
                         Prework Link *
                     </label>
@@ -276,8 +347,8 @@ const ApplyForm = () => {
                             required: "Prework Link is required",
                         })}
                     />
-                </div>
-                <div className="tw-mb-7.5">
+                </motion.div>
+                <motion.div layout className="tw-mb-7.5">
                     <label htmlFor="preworkRepo" className="tw-text-heading tw-text-md">
                         Prework Repository *
                     </label>
@@ -292,17 +363,19 @@ const ApplyForm = () => {
                             required: "Prework Repository is required",
                         })}
                     />
-                </div>
+                </motion.div>
 
-                <Button
-                    type="submit"
-                    fullwidth
-                    className="tw-mx-auto tw-w-full sm:tw-w-[200px] tw-mt-7.5"
-                >
-                    Apply
-                </Button>
-                {message && <Feedback state="success">{message}</Feedback>}
-                {showEmojiRain && <EmojiRain />}
+                <motion.div layout>
+                    <Button
+                        type="submit"
+                        fullwidth
+                        className="tw-mx-auto tw-w-full sm:tw-w-[200px] tw-mt-7.5"
+                    >
+                        Apply
+                    </Button>
+                    {message && <Feedback state="success">{message}</Feedback>}
+                    {showEmojiRain && <EmojiRain />}
+                </motion.div>
             </form>
         </div>
     );

src/pages/api/apply.ts

@@ -14,6 +14,10 @@ interface ParsedBody {
     branchOfService?: string;
     yearJoined?: string;
     yearSeparated?: string;
+    hasAttendedPreviousCourse?: boolean;
+    previousCourses?: string;
+    willAttendAnotherCourse?: boolean;
+    otherCourses?: string;
     linkedInAccountName?: string;
     githubAccountName?: string;
     preworkLink?: string;
@@ -34,6 +38,8 @@ export default async function handler(req: Request, res: Response) {
             "branchOfService",
             "yearJoined",
             "yearSeparated",
+            "hasAttendedPreviousCourse",
+            "willAttendAnotherCourse",
             "linkedInAccountName",
             "githubAccountName",
             "preworkLink",
@@ -48,7 +54,7 @@ export default async function handler(req: Request, res: Response) {
         }
 
         // Construct the text message to be sent
-        const text = [
+        const items = [
             `First Name: \`${parsedBody.firstName ?? ""}\``,
             `Last Name: \`${parsedBody.lastName ?? ""}\``,
             `Email: \`${parsedBody.email ?? ""}\``,
@@ -59,11 +65,27 @@ export default async function handler(req: Request, res: Response) {
             `Branch of Service: \`${parsedBody.branchOfService ?? ""}\``,
             `Year Joined: \`${parsedBody.yearJoined ?? ""}\``,
             `Year Separated: \`${parsedBody.yearSeparated ?? ""}\``,
+            `Has attended previous bootcamp/programs: \`${
+                parsedBody.hasAttendedPreviousCourse ? "Yes" : "No"
+            }\``,
+            `Will do other courses/programs concurrently: \`${
+                parsedBody.willAttendAnotherCourse ? "Yes" : "No"
+            }\``,
             `LinkedIn Account Name: \`${parsedBody.linkedInAccountName ?? ""}\``,
             `GitHub Account Name: \`${parsedBody.githubAccountName ?? ""}\``,
             `Prework Link: \`${parsedBody.preworkLink ?? ""}\``,
             `Prework Repository: \`${parsedBody.preworkRepo ?? ""}\``,
-        ].join("\n");
+        ];
+
+        if (parsedBody.willAttendAnotherCourse && parsedBody.otherCourses !== "") {
+            items.splice(12, 0, `\`\`\`${parsedBody.otherCourses}\`\`\``);
+        }
+
+        if (parsedBody.hasAttendedPreviousCourse && parsedBody.previousCourses !== "") {
+            items.splice(11, 0, `\`\`\`${parsedBody.previousCourses}\`\`\``);
+        }
+
+        const text = items.join("\n");
 
         // Send the payload to the configured Slack webhook URL
         await axios.post(