Add phone fields

app/(auth)/sign-up/page.tsx

@@ -137,9 +137,7 @@ export default function SignUpPage() {
                   validate: (value) => {
                     const digits = value?.replace(/\D/g, '');
                     return (
-                      !digits ||
-                      digits.length === 10 ||
-                      'Phone number must be 10 digits'
+                      digits.length === 10 || 'Phone number must be 10 digits.'
                     );
                   },
                 }}

app/(main)/administration/members/[userId]/page.tsx

@@ -69,11 +69,16 @@ export default async function TeamProfilePage({
             </div>
           </div>
 
-          <div>
-            <p className={styles.textLabel}>Email</p>
-            <p>{user.email}</p>
+          <div className="two-col-row">
+            <div>
+              <p className={styles.textLabel}>Email</p>
+              <p>{user.email}</p>
+            </div>
+            <div>
+              <p className={styles.textLabel}>Phone</p>
+              <p>{user.phone}</p>
+            </div>
           </div>
-
           <Dropdown userId={userId} roleId={role?.role_id} />
         </div>
       </div>

app/(main)/home/donate/components/LightweightDonationForm.tsx

@@ -22,7 +22,7 @@ type Props = {
 };
 
 type FormData = {
-  donor_type?: 'individual' | 'business';
+  donor_type?: 'individual' | 'business' | null;
 
   individual_name?: string;
   business_name?: string;
@@ -44,6 +44,7 @@ type FormData = {
 export default function LightweightDonationForm({ stores, user }: Props) {
   const [showSuccess, setShowSuccess] = useState(false);
   const [resetKey, setResetKey] = useState(0);
+  const [rawPhone, setRawPhone] = useState('');
 
   const {
     register,
@@ -55,7 +56,7 @@ export default function LightweightDonationForm({ stores, user }: Props) {
   } = useForm<FormData>({
     defaultValues: {
       donor_type: undefined,
-      phone: '',
+      phone: undefined,
       estimated_value: '',
       receiving_site: 'None',
 
@@ -103,7 +104,7 @@ export default function LightweightDonationForm({ stores, user }: Props) {
           : null,
 
       donor_email: data.email ?? null,
-      donor_phone: data.phone ?? null,
+      donor_phone: rawPhone || null,
       donor_street_address: data.address ?? null,
 
       donor_receive_emails: data.receive_emails,
@@ -129,12 +130,12 @@ export default function LightweightDonationForm({ stores, user }: Props) {
       setResetKey((k) => k + 1);
 
       reset({
-        donor_type: undefined,
+        donor_type: null,
         individual_name: '',
         business_name: '',
         business_contact_name: '',
         email: '',
-        phone: '',
+        phone: undefined,
         address: '',
         receiving_site: 'None',
         receive_emails: false,
@@ -332,10 +333,9 @@ export default function LightweightDonationForm({ stores, user }: Props) {
                             {...field}
                             format="(###) ###-####"
                             mask="_"
-                            placeholder="(415) 555-1234"
                             allowEmptyFormatting
                             onValueChange={(values) => {
-                              field.onChange(values.value);
+                              setRawPhone(values.value);
                             }}
                             customInput={BootstrapInput}
                             isInvalid={!!errors.phone}

app/(main)/manage/[storeId]/add/components/DonationForm.tsx

@@ -15,10 +15,12 @@ BootstrapInput.displayName = 'BootstrapInput';
 
 export default function DonationForm({
   setItemsDonated,
+  setRawPhone,
   donorType,
   showSubmitButton,
 }: {
   setItemsDonated: (value: string) => void;
+  setRawPhone: (value: string) => void;
   donorType: 'individual' | 'business' | undefined;
   showSubmitButton: boolean;
 }) {
@@ -190,10 +192,9 @@ export default function DonationForm({
                           {...field}
                           format="(###) ###-####"
                           mask="_"
-                          placeholder="(415) 555-1234"
                           allowEmptyFormatting
                           onValueChange={(values) => {
-                            field.onChange(values.value);
+                            setRawPhone(values.value);
                           }}
                           customInput={BootstrapInput}
                           isInvalid={!!errors.phone}

app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx

@@ -54,7 +54,7 @@ export default function StoreItemsDonationForm({
     defaultValues: {
       itemSettings: [],
       donor_type: undefined,
-      phone: '',
+      phone: undefined,
       estimated_value: '',
       items: [],
     },
@@ -68,6 +68,10 @@ export default function StoreItemsDonationForm({
   const donorType = useWatch({ control: methods.control, name: 'donor_type' });
   const [selectedItems, setSelectedItems] = useState<ItemWithNames[]>([]);
   const [autoFillItems, setAutoFillItems] = useState<ItemWithNames[]>([]);
+  const [rawPhone, setRawPhone] = useState('');
+  const handleRawPhone = (value: string) => {
+    setRawPhone(value);
+  };
   const setItemsDonated = (value: string) => {
     methods.setValue('items_donated', value, { shouldValidate: true });
   };
@@ -128,7 +132,7 @@ export default function StoreItemsDonationForm({
               : null,
 
           donor_email: data.email ?? null,
-          donor_phone: data.phone ?? null,
+          donor_phone: rawPhone || null,
           donor_street_address: data.address ?? null,
 
           donor_receive_emails: data.receive_emails,
@@ -164,7 +168,7 @@ export default function StoreItemsDonationForm({
           business_name: '',
           business_contact_name: '',
           email: '',
-          phone: '',
+          phone: undefined,
           address: '',
           receiving_site: '',
           receive_emails: false,
@@ -210,6 +214,7 @@ export default function StoreItemsDonationForm({
             <>
               <h2>Record Gift-in-Kind</h2>
               <DonationForm
+                setRawPhone={handleRawPhone}
                 donorType={donorType}
                 setItemsDonated={setItemsDonated}
                 showSubmitButton={

app/(main)/profile/components/ProfileForm.tsx

@@ -1,22 +1,31 @@
 'use client';
 
 import type { User, UserUpdate } from '@/app/types/user';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
+import { PatternFormat } from 'react-number-format';
 import { updateUser } from '@/app/actions/user';
-import { useState, useRef } from 'react';
+import { useState, useRef, forwardRef } from 'react';
 import { createClient } from '@/app/lib/supabase/browser-client';
 import PhotoUpload from '@/app/(main)/components/PhotoUpload';
 import styles from '@/app/(main)/profile/components/ProfileForm.module.css';
 import Image from 'next/image';
 import defaultProfilePhoto from '@/public/image-placeholder.svg';
 import { Button, Form } from 'react-bootstrap';
+import type { FormControlProps } from 'react-bootstrap';
 
 type ProfileFormValues = {
   email: string;
   firstName: string;
   lastName: string;
+  phone: string;
 };
 
+const BootstrapInput = forwardRef<HTMLInputElement, FormControlProps>(
+  (props, ref) => <Form.Control {...props} ref={ref} />,
+);
+
+BootstrapInput.displayName = 'BootstrapInput';
+
 export default function ProfileForm({ user }: { user: User }) {
   const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
@@ -34,13 +43,15 @@ export default function ProfileForm({ user }: { user: User }) {
     register,
     handleSubmit,
     reset,
+    control,
     watch,
     formState: { errors },
   } = useForm<ProfileFormValues>({
     defaultValues: {
       firstName: user.first_name,
       lastName: user.last_name,
       email: user.email,
+      phone: user.phone,
     },
   });
 
@@ -116,6 +127,7 @@ export default function ProfileForm({ user }: { user: User }) {
       if (data.email !== user.email) changes.email = data.email;
       if (selectedFile || isPendingDelete)
         changes.profile_photo_url = finalPhotoUrl;
+      if (data.phone !== user.phone) changes.phone = data.phone;
 
       const result = await updateUser(user.user_id, changes);
 
@@ -130,6 +142,7 @@ export default function ProfileForm({ user }: { user: User }) {
           firstName: data.firstName,
           lastName: data.lastName,
           email: user.email,
+          phone: data.phone,
         });
         setIsEditing(false);
         if (data.email !== user.email) {
@@ -223,27 +236,74 @@ export default function ProfileForm({ user }: { user: User }) {
             </div>
           </div>
 
-          <div>
-            {isEditing ? (
-              <>
-                <label className="form-label field-label">Email</label>
-                <Form.Control
-                  className="form-control"
-                  {...register('email', {
-                    required: 'Email is required.',
-                  })}
-                  isInvalid={!!errors.email}
-                />
-                <Form.Control.Feedback type="invalid">
-                  {errors.email?.message}
-                </Form.Control.Feedback>
-              </>
-            ) : (
-              <>
-                <p className={styles.textLabel}>Email</p>
-                <p>{watchedValues.email}</p>
-              </>
-            )}
+          <div className="two-col-row">
+            <div>
+              {isEditing ? (
+                <>
+                  <label className="form-label field-label">Email</label>
+                  <Form.Control
+                    className="form-control"
+                    {...register('email', {
+                      required: 'Email is required.',
+                    })}
+                    isInvalid={!!errors.email}
+                  />
+                  <Form.Control.Feedback type="invalid">
+                    {errors.email?.message}
+                  </Form.Control.Feedback>
+                </>
+              ) : (
+                <>
+                  <p className={styles.textLabel}>Email</p>
+                  <p>{watchedValues.email}</p>
+                </>
+              )}
+            </div>
+
+            <div>
+              {isEditing ? (
+                <>
+                  <label className="form-label field-label">Phone Number</label>
+                  <Controller
+                    name="phone"
+                    control={control}
+                    rules={{
+                      validate: (value) => {
+                        const digits = value?.replace(/\D/g, '');
+
+                        return (
+                          digits.length === 10 ||
+                          'Phone number must be 10 digits.'
+                        );
+                      },
+                    }}
+                    render={({ field }) => (
+                      <PatternFormat
+                        {...field}
+                        format="(###) ###-####"
+                        mask="_"
+                        allowEmptyFormatting
+                        onValueChange={(values) => {
+                          field.onChange(values.value);
+                        }}
+                        customInput={BootstrapInput}
+                        isInvalid={!!errors.phone}
+                      />
+                    )}
+                  />
+                  {errors.phone && (
+                    <Form.Control.Feedback type="invalid">
+                      {errors.phone.message}
+                    </Form.Control.Feedback>
+                  )}
+                </>
+              ) : (
+                <>
+                  <p className={styles.textLabel}>Phone Number</p>
+                  <p>{watchedValues.phone}</p>
+                </>
+              )}
+            </div>
           </div>
 
           {isEditing && (

app/actions/user.ts

@@ -28,16 +28,18 @@ export const updateUser = async (userId: string, data: UserUpdate) => {
   const updateData: UserUpdate = {};
   if (data.first_name !== undefined) updateData.first_name = data.first_name;
   if (data.last_name !== undefined) updateData.last_name = data.last_name;
+  if (data.phone !== undefined) updateData.phone = data.phone;
   if (data.profile_photo_url !== undefined) {
     updateData.profile_photo_url = data.profile_photo_url;
   }
 
-  if (data.email || data.first_name || data.last_name) {
+  if (data.email || data.first_name || data.last_name || data.phone) {
     const { error: authError } = await supabase.auth.updateUser({
       ...(data.email && { email: data.email }),
       data: {
         ...(data.first_name && { first_name: data.first_name }),
         ...(data.last_name && { last_name: data.last_name }),
+        ...(data.phone && { phone: data.phone }),
       },
     });