feat: add phone number and country to application (#211)

* feat: auto proceed on uploads (#207)

* fix: disable resume link autofill (#209)

* feat: add phone, country, and consent fields to application for MLH  (#210)

* feat: add phone and country fields

* feat: add country and phone to application form

* fix: update deps for iso-3166

* feat: comply with MLH checkbox requirements

* feat: show phone and country for reviewers

---------

Co-authored-by: Krish <krish120003@gmail.com>

package.json

@@ -53,6 +53,7 @@
     "fork-react-qr-reader": "^3.0.1-beta-1",
     "ical-js-parser": "^0.6.12",
     "ical.js": "^1.5.0",
+    "iso-3166": "^4.3.0",
     "lucide-react": "^0.294.0",
     "next": "^13.4.8",
     "next-auth": "^4.15.1",

prisma/migrations/20241102003612_add_residence_and_phone_dh11/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "DH11Application" ADD COLUMN     "country" STRING;
+ALTER TABLE "DH11Application" ADD COLUMN     "phone" STRING;

prisma/schema.prisma

@@ -170,8 +170,9 @@ model DH11Application {
 
   firstName String
   lastName  String
-
-  birthday DateTime
+  phone     String?
+  country   String?
+  birthday  DateTime
 
   // School
   studyEnrolledPostSecondary Boolean

src/components/Applicant.tsx

@@ -125,6 +125,14 @@ const ApplicationContent = ({
         placeholder="https://example.com/resume.pdf"
         optional
       />
+      {/* add phone number and country */}
+      <FormInput
+        label="Phone Number"
+        text={data?.phone}
+        placeholder="000-000-0000"
+      />
+      <FormInput label="Country" text={data?.country} placeholder="N/A" />
+
       <FormDivider label="Education" />
       <FormCheckbox
         label="Are you currently enrolled in post-secondary education?"

src/pages/apply.tsx

@@ -38,6 +38,8 @@ import {
   orientations,
   representation,
 } from "../data/applicationSelectData";
+import { iso31661 } from "iso-3166";
+
 import React, { useEffect, useId, useState } from "react";
 import SocialLinksFormInput from "../components/SocialLinkFormInput";
 import Uppy from "@uppy/core";
@@ -345,6 +347,43 @@ const ApplyForm = ({
           register={register}
         />
       </div>
+
+      <FormInput
+        id="phone"
+        label="Phone Number"
+        errors={errors.phone}
+        placeholder="000-000-0000"
+        register={register}
+      />
+
+      <div className="flex flex-col gap-2 pb-4">
+        <label className="text-black dark:text-white" htmlFor="tshirtSizeInput">
+          Country of Residence
+        </label>
+        <Controller
+          name="country"
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <CustomSelect
+              options={[
+                { value: "Canada", label: "Canada" },
+                ...iso31661
+                  .filter((e) => e.name !== "Canada")
+                  .map((e) => ({ value: e.name, label: e.name }))
+                  .sort((a, b) => a.value.localeCompare(b.value)),
+              ]}
+              onChange={(val: SelectChoice | null) => onChange(val?.value)}
+              // value={iso3115.find((val) => val.value === value)}
+              isMulti={false}
+              defaultInputValue={autofillData.tshirtSize ?? undefined}
+            />
+          )}
+        />
+        {errors.tshirtSize && (
+          <span className="text-error">{errors.tshirtSize.message}</span>
+        )}
+      </div>
+
       {/* Birthday Input */}
       <div className="flex flex-col gap-2 pb-4">
         <label className="text-black dark:text-white" htmlFor="birthdayInput">
@@ -717,6 +756,7 @@ const ApplyForm = ({
         register={register}
       />
       <FormDivider label="MLH Survey and Consent" />
+
       <div className="flex flex-col gap-2 pb-4">
         <label
           className="text-black dark:text-white"
@@ -823,22 +863,27 @@ const ApplyForm = ({
           <span className="text-error">{errors.race.message}</span>
         )}
       </div>
+      <p className="opacity-50 py-8">
+        We are currently in the process of partnering with MLH. The following 3
+        checkboxes are for this partnership. If we do not end up partnering with
+        MLH, your information will not be shared
+      </p>
       <FormCheckbox
-        label="Agree to MLH Code of Conduct"
+        label="I have read and agree to the MLH Code of Conduct. (https://github.com/MLH/mlh-policies/blob/main/code-of-conduct.md)"
         id="agreeToMLHCodeOfConduct"
         errors={errors.agreeToMLHCodeOfConduct}
         register={register}
         link="https://static.mlh.io/docs/mlh-code-of-conduct.pdf"
       />
       <FormCheckbox
-        label="Agree to MLH Privacy Policy"
+        label="I authorize you to share my application/registration information with Major League Hacking for event administration, ranking, and MLH administration in-line with the MLH Privacy Policy (https://github.com/MLH/mlh-policies/blob/main/privacy-policy.md). I further agree to the terms of both the MLH Contest Terms and Conditions (https://github.com/MLH/mlh-policies/blob/main/contest-terms.md) and the MLH Privacy Policy (https://github.com/MLH/mlh-policies/blob/main/privacy-policy.md)"
         id="agreeToMLHPrivacyPolicy"
         errors={errors.agreeToMLHPrivacyPolicy}
         register={register}
         link="https://mlh.io/privacy"
       />
       <FormCheckbox
-        label="Agree to MLH Communications"
+        label="I authorize MLH to send me occasional emails about relevant events, career opportunities, and community announcements."
         id="agreeToMLHCommunications"
         errors={errors.agreeToMLHCommunications}
         register={register}

src/schemas/application.ts

@@ -135,6 +135,8 @@ const dh11schema = z.object({
       message: "You must be at least 13 years old",
     }
   ),
+  phone: z.string().refine(isMobilePhone, "Invalid phone number").nullish(),
+  country: z.string().nullish(),
   studyEnrolledPostSecondary: z.boolean(),
   studyLocation: z.string().min(1).max(255).nullish(),
   studyDegree: z.string().min(1).max(255).nullish(),