feat: ability to add phone number in profile 📲

apps/member-profile/app/routes/_profile.profile.general.tsx

@@ -28,6 +28,7 @@ import {
 } from '@/shared/components/profile';
 import {
   CurrentLocationField,
+  PhoneNumberField,
   PreferredNameField,
 } from '@/shared/components/profile.general';
 import { getMember } from '@/shared/queries/index';
@@ -53,6 +54,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
       'headline',
       'lastName',
       'preferredName',
+      'phoneNumber',
     ])
     .executeTakeFirstOrThrow();
 
@@ -73,6 +75,7 @@ const UpdateGeneralInformation = Student.pick({
   headline: true,
   lastName: true,
   preferredName: true,
+  phoneNumber: true,
 }).extend({
   currentLocation: Student.shape.currentLocation.unwrap(),
   currentLocationLatitude: Student.shape.currentLocationLatitude.unwrap(),
@@ -174,6 +177,12 @@ export default function UpdateGeneralInformationSection() {
           longitudeName={keys.currentLocationLongitude}
         />
 
+        <PhoneNumberField
+          defaultValue={student.phoneNumber || undefined}
+          error={errors.phoneNumber}
+          name={keys.phoneNumber}
+        />
+
         <Button.Group>
           <Button.Submit>Save</Button.Submit>
         </Button.Group>

apps/member-profile/app/shared/components/profile.general.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { CityCombobox, type CityComboboxProps } from '@oyster/core/location/ui';
-import { type FieldProps, Form, Input, Text } from '@oyster/ui';
+import { type FieldProps, Form, Input, InputField, Text } from '@oyster/ui';
 
 export function CurrentLocationField({
   defaultValue,
@@ -62,3 +62,44 @@ export function PreferredNameField({
     </Form.Field>
   );
 }
+
+const formatPhoneNumber = (input: string) => {
+  const cleaned = input.replace(/\D/g, '');
+
+  if (cleaned.length == 0) {
+    return '';
+  } else if (cleaned.length <= 3) {
+    return `(${cleaned}`;
+  } else if (cleaned.length <= 6) {
+    return `(${cleaned.slice(0, 3)})-${cleaned.slice(3)}`;
+  } else {
+    return `(${cleaned.slice(0, 3)})-${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
+  }
+};
+
+export const PhoneNumberField = ({
+  defaultValue,
+  error,
+  name,
+}: FieldProps<string>) => {
+  const [phoneNumber, setPhoneNumber] = useState(defaultValue || '');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatPhoneNumber(e.target.value);
+
+    setPhoneNumber(formatted);
+  };
+
+  return (
+    <InputField
+      value={phoneNumber}
+      onChange={handleChange}
+      error={error}
+      label="Phone Number"
+      name={name}
+      description="Enter your 10-digit phone number."
+      placeholder="(555)-123-4567"
+      type="tel"
+    />
+  );
+};

packages/db/src/migrations/20240824172428_add_phone_number_field.ts

@@ -0,0 +1,12 @@
+import { type Kysely } from 'kysely';
+
+export async function up(db: Kysely<any>) {
+  await db.schema
+    .alterTable('students')
+    .addColumn('phone_number', 'text')
+    .execute();
+}
+
+export async function down(db: Kysely<any>) {
+  await db.schema.alterTable('students').dropColumn('phone_number').execute();
+}

packages/types/src/domain/student.ts

@@ -134,6 +134,14 @@ export const Student = Entity.merge(StudentSocialLinks)
     joinedMemberDirectoryAt: z.coerce.date().nullable(),
     joinedSlackAt: z.coerce.date().optional(),
     lastName: z.string().trim().min(1),
+    phoneNumber: z
+      .string()
+      .trim()
+      .regex(
+        /^\(\d{3}\)-\d{3}-\d{4}$/,
+        'Phone Number must be in the format (555)-123-4567'
+      )
+      .optional(),
 
     /**
      * Enum that represents all of the accepted majors from the ColorStack

packages/ui/src/components/form.tsx

@@ -71,7 +71,10 @@ Form.Field = function FormField({
 
 type InputFieldProps = FieldProps<string> &
   Pick<FormFieldProps, 'description' | 'label' | 'required'> &
-  Pick<InputProps, 'disabled' | 'placeholder'>;
+  Pick<
+    InputProps,
+    'disabled' | 'placeholder' | 'type' | 'pattern' | 'onChange' | 'value'
+  >;
 
 export function InputField({
   defaultValue,
@@ -82,6 +85,10 @@ export function InputField({
   name,
   placeholder,
   required,
+  pattern,
+  type = 'text',
+  onChange,
+  value,
 }: InputFieldProps) {
   return (
     <Form.Field
@@ -98,6 +105,10 @@ export function InputField({
         name={name}
         placeholder={placeholder}
         required={required}
+        type={type}
+        pattern={pattern}
+        onChange={onChange}
+        value={value}
       />
     </Form.Field>
   );

packages/ui/src/components/input.tsx

@@ -22,8 +22,9 @@ export type InputProps = Pick<
   | 'required'
   | 'type'
   | 'value'
+  | 'pattern'
 > & {
-  type?: Extract<HTMLInputTypeAttribute, 'email' | 'number' | 'text'>;
+  type?: Extract<HTMLInputTypeAttribute, 'email' | 'number' | 'text' | 'tel'>;
 };
 
 export const Input = React.forwardRef(