Camilla: user phone numbers in app

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

@@ -1,21 +1,30 @@
 'use client';
 
-import { useForm, useWatch, SubmitHandler } from 'react-hook-form';
+import { useForm, useWatch, SubmitHandler, Controller } from 'react-hook-form';
 import { createClient } from '@/app/lib/supabase/browser-client';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { Form } from 'react-bootstrap';
+import type { FormControlProps } from 'react-bootstrap';
+import { PatternFormat } from 'react-number-format';
+
 type Inputs = {
   firstName: string;
   lastName: string;
   email: string;
+  phone: string;
   password: string;
   passwordConfirmation: string;
 };
 import pathLogo from '@/public/path.png';
 
+const BootstrapInput = forwardRef<HTMLInputElement, FormControlProps>(
+  (props, ref) => <Form.Control {...props} ref={ref} />,
+);
+BootstrapInput.displayName = 'BootstrapInput';
+
 export default function SignUpPage() {
   const {
     register,
@@ -40,6 +49,7 @@ export default function SignUpPage() {
         data: {
           first_name: formData.firstName,
           last_name: formData.lastName,
+          phone: formData.phone,
         },
       },
     });
@@ -119,6 +129,40 @@ export default function SignUpPage() {
                 {errors.email?.message}
               </Form.Control.Feedback>
             </Form.Group>
+            <Form.Group controlId="phone">
+              <Controller
+                name="phone"
+                control={control}
+                rules={{
+                  validate: (value) => {
+                    const digits = value?.replace(/\D/g, '');
+                    return (
+                      !digits ||
+                      digits.length === 10 ||
+                      'Phone number must be 10 digits'
+                    );
+                  },
+                }}
+                render={({ field }) => (
+                  <PatternFormat
+                    {...field}
+                    format="(###) ###-####"
+                    mask="_"
+                    placeholder="Phone Number (Optional)"
+                    allowEmptyFormatting
+                    onValueChange={(values) => {
+                      field.onChange(values.value);
+                    }}
+                    customInput={BootstrapInput}
+                    isInvalid={!!errors.phone}
+                    className="auth-field"
+                  />
+                )}
+              />
+              <Form.Control.Feedback type="invalid">
+                {errors.phone?.message}
+              </Form.Control.Feedback>
+            </Form.Group>
             <Form.Group controlId="password">
               <Form.Control
                 type="password"

app/(main)/team/people/components/UsersList.tsx

@@ -18,6 +18,7 @@ export default function UsersList({
     last_name: string;
     role: string;
     email: string;
+    phone: string;
     profile_photo_url: string | null;
   }[];
 }) {

app/(main)/team/people/page.tsx

@@ -29,6 +29,7 @@ export default async function UsersPage({
         last_name,
         full_name,
         email,
+        phone,
         profile_photo_url,
         user_roles!inner(
           roles!inner (
@@ -69,6 +70,7 @@ export default async function UsersPage({
       last_name: u.last_name,
       role: user_roles.roles.name,
       email: u.email,
+      phone: u.phone,
       profile_photo_url: u.profile_photo_url,
     };
   });

app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx

@@ -29,7 +29,9 @@ export default function AddAdminSearch({
 
       const { data, error } = await supabase
         .from('users')
-        .select('user_id, first_name, last_name, email, profile_photo_url')
+        .select(
+          'user_id, first_name, last_name, email, profile_photo_url, phone',
+        )
         .ilike('full_name', `%${d}%`);
       if (error) {
         console.error('Error searching for admins:', error);

app/(main)/team/store-admins/[storeId]/page.tsx

@@ -65,6 +65,7 @@ export default async function StoreAdminPage({
           first_name: string;
           last_name: string;
           email: string;
+          phone: string;
           profile_photo_url: string | null;
         };
       }[],

app/types/user.ts

@@ -9,6 +9,7 @@ export type User = {
   first_name: string;
   last_name: string;
   email: string;
+  phone: string;
   profile_photo_url: string | null;
 };