feat: add CountrySelect component and integrate react-international-phone for country selection

Author: AbhishekA1509

package-lock.json

@@ -124,6 +124,7 @@
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
         "react-draggable": "^4.4.5",
+        "react-international-phone": "^4.5.0",
         "react-monaco-editor": "^0.54.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",

package.json

@@ -0,0 +1,32 @@
+import { SelectPicker } from '../SelectPicker'
+import { COUNTRY_OPTIONS } from './constants'
+import { CountrySelectProps } from './types'
+
+const CountrySelect = ({ selectedCountry, label, required, error, handleChange, placeholder }: CountrySelectProps) => {
+    const onChange = (option: (typeof COUNTRY_OPTIONS)[number]) => {
+        handleChange(option.value)
+    }
+
+    const selectedValue: (typeof COUNTRY_OPTIONS)[number] = selectedCountry
+        ? COUNTRY_OPTIONS.find((option) => option.value === selectedCountry) || {
+              value: 'XX',
+              label: 'Unknown',
+              startIcon: null,
+          }
+        : null
+
+    return (
+        <SelectPicker
+            inputId="select-picker__country-select"
+            value={selectedValue}
+            onChange={onChange}
+            error={error}
+            required={required}
+            label={label}
+            options={COUNTRY_OPTIONS}
+            placeholder={placeholder}
+        />
+    )
+}
+
+export default CountrySelect

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

@@ -0,0 +1,13 @@
+import { defaultCountries, FlagImage, parseCountry } from 'react-international-phone'
+import { SelectPickerOptionType } from '../SelectPicker'
+import { CountryISO2Type } from './types'
+
+export const COUNTRY_OPTIONS: SelectPickerOptionType<CountryISO2Type>[] = defaultCountries.map((countryData) => {
+    const parsedCountry = parseCountry(countryData)
+
+    return {
+        value: parsedCountry.iso2,
+        label: parsedCountry.name,
+        startIcon: <FlagImage iso2={parsedCountry.iso2} protocol={window.isSecureContext ? 'https' : 'http'} />,
+    }
+})

src/Shared/Components/CountrySelect/constants.tsx

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

src/Shared/Components/CountrySelect/index.ts

@@ -0,0 +1,9 @@
+import { ParsedCountry } from 'react-international-phone'
+import { SelectPickerProps } from '../SelectPicker'
+
+export type CountryISO2Type = ParsedCountry['iso2']
+
+export interface CountrySelectProps extends Pick<SelectPickerProps, 'required' | 'label' | 'error' | 'placeholder'> {
+    selectedCountry: CountryISO2Type
+    handleChange: (iso2: CountryISO2Type) => void
+}

src/Shared/Components/CountrySelect/types.ts

@@ -85,3 +85,4 @@ export * from './CodeEditorWrapper'
 export * from './SSOProviderIcon'
 export * from './Backdrop'
 export * from './LicenseInfoDialog'
+export * from './CountrySelect'