fix(tel-field) - fix tel field props (#980)

* fix(tel-field) - props

* fix prop

* fix types

Author: gabrielseco

src/components/form/fields/TelField.tsx

@@ -1,13 +1,13 @@
 import { FormField } from '@/src/components/ui/form';
 import { useFormFields } from '@/src/context';
-import { Components, JSFField } from '@/src/types/remoteFlows';
+import { Components } from '@/src/types/remoteFlows';
 import {
   useFormContext,
   ControllerFieldState,
   ControllerRenderProps,
   FieldValues,
 } from 'react-hook-form';
-import { TelFieldComponentProps } from '@/src/types/fields';
+import { TelFieldComponentProps, TelFieldDataProps } from '@/src/types/fields';
 import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 
 export type Country = {
@@ -271,20 +271,9 @@ export function TelFieldRenderer({
   );
 }
 
-export type TelFieldDataProps = Omit<JSFField, 'options'> & {
-  onChangeCountryCode?: (newCountry: Country) => void;
-  onChangePhoneNumber?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+export type TelFieldProps = TelFieldDataProps & {
+  name: string;
   component?: Components['tel'];
-  options: {
-    value: string;
-    label: string;
-    meta: {
-      countryCode: string;
-    };
-    pattern: string;
-  }[];
-  currentCountry?: Country;
-  nationalPhoneNumber?: string;
 };
 
 export function TelField({
@@ -295,7 +284,7 @@ export function TelField({
   onChangePhoneNumber,
   component,
   ...rest
-}: TelFieldDataProps) {
+}: TelFieldProps) {
   const { components } = useFormFields();
   const { control } = useFormContext();
 

src/components/form/fields/tests/TelField.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FormProvider, useForm } from 'react-hook-form';
 import { object, string } from 'yup';
-import { TelField, TelFieldDataProps } from '../TelField';
+import { TelField, TelFieldProps } from '../TelField';
 import { TelFieldDefault } from '../default/TelFieldDefault';
 import { $TSFixMe } from '@/src/types/remoteFlows';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -39,7 +39,7 @@ async function fillPhoneInput(phoneNumber: string) {
   await user.type(phoneInput, phoneNumber);
 }
 
-const mockOptions: TelFieldDataProps['options'] = [
+const mockOptions: TelFieldProps['options'] = [
   {
     value: 'US',
     label: 'United States',
@@ -66,7 +66,7 @@ const mockOptions: TelFieldDataProps['options'] = [
   },
 ];
 
-const createTelSchema = (options: TelFieldDataProps['options']) => {
+const createTelSchema = (options: TelFieldProps['options']) => {
   return string()
     .required('Phone number is required')
     .max(30, 'Must be at most 30 characters')
@@ -96,7 +96,7 @@ const createTelSchema = (options: TelFieldDataProps['options']) => {
 };
 
 describe('TelField Component - Split UI', () => {
-  const defaultProps: TelFieldDataProps = {
+  const defaultProps: TelFieldProps = {
     name: 'phoneNumber',
     label: 'Phone Number',
     description: 'Enter your phone number',
@@ -113,18 +113,20 @@ describe('TelField Component - Split UI', () => {
   };
 
   const renderWithFormContext = (
-    props: TelFieldDataProps,
+    props: TelFieldProps,
     defaultValues?: $TSFixMe,
   ) => {
     const TestComponent = () => {
       const methods = useForm({
         mode: 'onBlur',
         defaultValues: defaultValues || {},
-        resolver: yupResolver(
-          object().shape({
-            phoneNumber: props.schema,
-          }),
-        ),
+        resolver: props.schema
+          ? yupResolver(
+              object().shape({
+                phoneNumber: props.schema,
+              }),
+            )
+          : undefined,
       });
       return (
         <FormProvider {...methods}>

src/types/fields.ts

@@ -1,5 +1,4 @@
 import { FieldFileDataProps } from '@/src/components/form/fields/FileUploadField';
-import { TelFieldDataProps } from '@/src/components/form/fields/TelField';
 import { DailySchedule } from '@/src/components/form/fields/workScheduleUtils';
 import { JSFField } from '@/src/types/remoteFlows';
 import {
@@ -144,6 +143,31 @@ export type PricingPlanComponentProps = Omit<
   fieldData: PricingPlanDataProps;
 };
 
+export type TelFieldDataProps = Omit<FieldDataProps, 'options'> & {
+  options: {
+    value: string;
+    label: string;
+    meta: {
+      countryCode: string;
+    };
+    pattern: string;
+  }[];
+  currentCountry?: {
+    name: string;
+    dialCode: string;
+    pattern: string;
+    areaCodes?: string[];
+  };
+  nationalPhoneNumber?: string;
+  onChangeCountryCode?: (newCountry: {
+    name: string;
+    dialCode: string;
+    pattern: string;
+    areaCodes?: string[];
+  }) => void;
+  onChangePhoneNumber?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
 export type TelFieldComponentProps = Omit<FieldComponentProps, 'fieldData'> & {
   fieldData: TelFieldDataProps;
 };