From e8b44ee10ed7674a2cee82b8718d02d1b75e31dc Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Sun, 15 Oct 2023 23:40:25 +0100
Subject: [PATCH] Updated the CountrySelect

---
 src/components/Low/CountrySelect.tsx | 11 +++++++++--
 src/pages/(admin)/Lists/UserList.tsx |  2 +-
 src/pages/profile.tsx                |  2 --
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/Low/CountrySelect.tsx b/src/components/Low/CountrySelect.tsx
index 6dace578..01453d0b 100644
--- a/src/components/Low/CountrySelect.tsx
+++ b/src/components/Low/CountrySelect.tsx
@@ -2,6 +2,7 @@ import {countries, TCountries} from "countries-list";
 import {Fragment, useState} from "react";
 import {Combobox, Transition} from "@headlessui/react";
 import {BsChevronExpand} from "react-icons/bs";
+import countryCodes from "country-codes-list";
 
 interface Props {
 	value?: string;
@@ -10,7 +11,9 @@ interface Props {
 
 const mapCountries = (codes: string[]) => {
 	return codes.map((code) => ({
-		label: countries[code as unknown as keyof TCountries].name,
+		label: `${countryCodes.findOne("countryCode" as any, code).flag} ${countries[code as unknown as keyof TCountries].name} (+${
+			countries[code as unknown as keyof TCountries].phone
+		})`,
 		code,
 	}));
 };
@@ -35,7 +38,11 @@ export default function CountrySelect({value, onChange}: Props) {
 						<Combobox.Input
 							className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
 							onChange={(e) => setQuery(e.target.value)}
-							displayValue={(code: string) => countries[code as unknown as keyof TCountries].name}
+							displayValue={(code: string) => {
+								const country = countries[code as unknown as keyof TCountries];
+
+								return `${countryCodes.findOne("countryCode" as any, code).flag} ${country.name} (+${country.phone})`;
+							}}
 						/>
 						<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-8">
 							<BsChevronExpand />
diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx
index 97a18538..23d9c31b 100644
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -10,7 +10,7 @@ import clsx from "clsx";
 import {capitalize} from "lodash";
 import moment from "moment";
 import {Fragment, useState} from "react";
-import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsStop, BsTrash} from "react-icons/bs";
+import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
 import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 61451bc8..25b600b4 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -14,8 +14,6 @@ import {ErrorMessage} from "@/constants/errors";
 import {RadioGroup} from "@headlessui/react";
 import clsx from "clsx";
 import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/user";
-import countryCodes from "country-codes-list";
-import {countries, TCountries} from "countries-list";
 import CountrySelect from "@/components/Low/CountrySelect";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import moment from "moment";