address comments

colorstackorg · Sep 6, 2024 · 60f6a5c · 60f6a5c
1 parent b0018eb
commit 60f6a5c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 9 deletions.
diff --git a/apps/member-profile/app/routes/_profile.profile.general.tsx b/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';
@@ -176,13 +177,10 @@ export default function UpdateGeneralInformationSection() {
           longitudeName={keys.currentLocationLongitude}
         />
 
-        <InputField
+        <PhoneNumberField
           defaultValue={student.phoneNumber || undefined}
-          description="Enter your 10-digit phone number below (no formatting characters e.g. '-' or '(')."
           error={errors.phoneNumber}
-          label="Phone Number"
           name={keys.phoneNumber}
-          placeholder="5551234567"
         />
 
         <Button.Group>

diff --git a/apps/member-profile/app/shared/components/profile.general.tsx b/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"
+    />
+  );
+};
diff --git a/packages/types/src/domain/student.ts b/packages/types/src/domain/student.ts
@@ -137,8 +137,10 @@ export const Student = Entity.merge(StudentSocialLinks)
     phoneNumber: z
       .string()
       .trim()
-      .length(10, 'Phone Number must be a 10-digit number')
-      .regex(/^\d+$/, 'Phone Number must contain only digits')
+      .regex(
+        /^\(\d{3}\)-\d{3}-\d{4}$/,
+        'Phone Number must be in the format (555)-123-4567'
+      )
       .optional(),
 
     /**

diff --git a/packages/ui/src/components/form.tsx b/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>
   );

diff --git a/packages/ui/src/components/input.tsx b/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(