feat: add PhoneInput and FlagImage components with associated types and utility functions

Author: AbhishekA1509

src/Shared/Components/CountrySelect/CountrySelect.component.tsx

@@ -1,30 +1,62 @@
-import { SelectPicker } from '../SelectPicker'
-import { COUNTRY_OPTIONS } from './constants'
+import { useMemo } from 'react'
+import { SelectPicker, SelectPickerProps } from '../SelectPicker'
 import { CountrySelectProps } from './types'
+import { getCountryOptions } from './utils'
+import { FlagImage } from '../FlagImage'
 
-const CountrySelect = ({ selectedCountry, label, required, error, handleChange, placeholder }: CountrySelectProps) => {
-    const onChange = (option: (typeof COUNTRY_OPTIONS)[number]) => {
-        handleChange(option.value)
+const CountrySelect = ({
+    selectedCountry,
+    label,
+    required,
+    error,
+    handleChange,
+    placeholder,
+    name,
+    variant = 'default',
+    size,
+}: CountrySelectProps) => {
+    const countryOptions = useMemo(() => getCountryOptions(variant), [variant])
+
+    const onChange = (option: (typeof countryOptions)[number]) => {
+        handleChange(option.value.iso2)
     }
 
-    const selectedValue: (typeof COUNTRY_OPTIONS)[number] = selectedCountry
-        ? COUNTRY_OPTIONS.find((option) => option.value === selectedCountry) || {
-              value: 'XX',
-              label: 'Unknown',
-              startIcon: null,
-          }
+    const selectedOption: (typeof countryOptions)[number] = selectedCountry
+        ? countryOptions.find((option) => option.value.iso2 === selectedCountry) || null
         : null
 
+    const filterOption: SelectPickerProps<(typeof countryOptions)[number]['value']>['filterOption'] = (
+        option,
+        searchText,
+    ) => {
+        const searchValue = searchText.toLowerCase()
+        const searchCriterion = [option.data.value.name.toLowerCase(), `+${option.data.value.dialCode.toLowerCase()}`]
+
+        return searchCriterion.some((criterion) => criterion.includes(searchValue))
+    }
+
+    const getOptionValue: SelectPickerProps<(typeof countryOptions)[number]['value']>['getOptionValue'] = (option) =>
+        option.value.iso2
+
     return (
-        <SelectPicker
-            inputId="select-picker__country-select"
-            value={selectedValue}
+        <SelectPicker<(typeof countryOptions)[number]['value'], false>
+            inputId={`select-picker__country-select--${name}`}
+            value={selectedOption}
             onChange={onChange}
             error={error}
             required={required}
             label={label}
-            options={COUNTRY_OPTIONS}
+            options={countryOptions}
             placeholder={placeholder}
+            size={size}
+            filterOption={filterOption}
+            getOptionValue={getOptionValue}
+            icon={
+                variant === 'selectPhoneCode' && selectedOption?.value?.iso2 ? (
+                    <FlagImage country={selectedOption?.value?.iso2} />
+                ) : null
+            }
+            controlShouldRenderValue={variant !== 'selectPhoneCode'}
         />
     )
 }

src/Shared/Components/CountrySelect/constants.tsx

@@ -1,2 +1 @@
 export { default as CountrySelect } from './CountrySelect.component'
-export { type CountryISO2Type } from './types'

src/Shared/Components/CountrySelect/index.ts

@@ -1,9 +1,10 @@
-import { ParsedCountry } from 'react-international-phone'
+import { CountryISO2Type } from '@Shared/index'
 import { SelectPickerProps } from '../SelectPicker'
 
-export type CountryISO2Type = ParsedCountry['iso2']
-
-export interface CountrySelectProps extends Pick<SelectPickerProps, 'required' | 'label' | 'error' | 'placeholder'> {
+export interface CountrySelectProps
+    extends Pick<SelectPickerProps, 'required' | 'label' | 'error' | 'placeholder' | 'size'>,
+        Required<Pick<SelectPickerProps, 'name'>> {
     selectedCountry: CountryISO2Type
     handleChange: (iso2: CountryISO2Type) => void
+    variant?: 'default' | 'selectPhoneCode'
 }

src/Shared/Components/CountrySelect/types.ts

@@ -0,0 +1,25 @@
+import { defaultCountries, parseCountry, ParsedCountry } from 'react-international-phone'
+import { CountrySelectProps } from './types'
+import { SelectPickerOptionType } from '../SelectPicker'
+import { FlagImage } from '../FlagImage'
+
+export const getCountryOptions = (variant: CountrySelectProps['variant']): SelectPickerOptionType<ParsedCountry>[] =>
+    defaultCountries.map((countryData) => {
+        const parsedCountry = parseCountry(countryData)
+
+        const countryWithDialCode = `${parsedCountry.name} (+${parsedCountry.dialCode})`
+
+        return {
+            value: parsedCountry,
+            label:
+                variant === 'selectPhoneCode' ? (
+                    <div className="flexbox dc__gap-8 dc__align-items-center">
+                        <FlagImage country={parsedCountry.iso2} size={16} />
+                        <span className="fs-13 fw-4 lh-20">{countryWithDialCode}</span>
+                    </div>
+                ) : (
+                    parsedCountry.name
+                ),
+            startIcon: variant === 'default' ? <FlagImage country={parsedCountry.iso2} /> : null,
+        }
+    })

src/Shared/Components/CountrySelect/utils.tsx

@@ -47,9 +47,11 @@ const CustomInput = ({
     endIconButtonConfig,
     labelTippyCustomizedConfig,
     labelTooltipConfig,
+    inputRef: inputRefProp,
     ...props
 }: CustomInputProps) => {
-    const inputRef = useRef<HTMLInputElement>(null)
+    const localInputRef = useRef<HTMLInputElement>(null)
+    const inputRef = inputRefProp || localInputRef
 
     useEffect(() => {
         setTimeout(() => {

src/Shared/Components/CustomInput/CustomInput.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { InputHTMLAttributes } from 'react'
+import { InputHTMLAttributes, MutableRefObject } from 'react'
 import { ComponentSizeType } from '@Shared/constants'
 import { FormFieldWrapperProps } from '../FormFieldWrapper'
 import { ButtonComponentType, ButtonProps } from '../Button'
@@ -48,6 +48,10 @@ export interface CustomInputProps
      */
     endIconButtonConfig?: Required<Pick<ButtonProps<ButtonComponentType.button>, 'icon' | 'onClick' | 'ariaLabel'>> &
         Pick<ButtonProps<ButtonComponentType.button>, 'disabled' | 'showAriaLabelInTippy' | 'style'>
+    /**
+     * Ref for the input element
+     */
+    inputRef?: MutableRefObject<HTMLInputElement>
 }
 
 export interface PasswordFieldProps extends Omit<CustomInputProps, 'endIconButtonConfig' | 'type'> {

src/Shared/Components/CustomInput/types.ts

@@ -0,0 +1,12 @@
+import { FlagImage as FlagImageHelper } from 'react-international-phone'
+import { FlagImageProps } from './types'
+
+const FlagImage = ({ country, size }: FlagImageProps) => (
+    <FlagImageHelper
+        iso2={country}
+        protocol={window.isSecureContext ? 'https' : 'http'}
+        {...(size ? { size: `${size}px` } : {})}
+    />
+)
+
+export default FlagImage

src/Shared/Components/FlagImage/FlagImage.component.tsx

@@ -0,0 +1 @@
+export { default as FlagImage } from './FlagImage.component'

src/Shared/Components/FlagImage/index.ts

@@ -0,0 +1,6 @@
+import { CountryISO2Type } from '@Shared/index'
+
+export interface FlagImageProps {
+    country: CountryISO2Type
+    size?: number
+}