refactor: Sync country data and phone auth changes

Author: Ehesp

packages/core/src/country-data.ts

@@ -267,17 +267,22 @@ export const countryData = [
 
 export type CountryData = (typeof countryData)[number];
 
-export type CountryCodes = CountryData["code"];
+export type CountryCode = CountryData["code"];
 
-export function getCountryByDialCode(dialCode: string): (typeof countryData)[number] | undefined {
+export function getCountryByDialCode(dialCode: string): CountryData | undefined {
   return countryData.find((country) => country.dialCode === dialCode);
 }
 
-export function getCountryByCode(code: string): (typeof countryData)[number] | undefined {
+export function getCountryByCode(code: CountryCode): CountryData | undefined {
   return countryData.find((country) => country.code === code.toUpperCase());
 }
 
-export function formatPhoneNumberWithCountry(phoneNumber: string, countryDialCode: string): string {
+export function formatPhoneNumberWithCountry(phoneNumber: string, countryCode: CountryCode): string {
+  const countryData = getCountryByCode(countryCode);
+  if (!countryData) {
+    return phoneNumber;
+  }
+  const countryDialCode = countryData.dialCode;
   // Remove any existing dial code if present
   const cleanNumber = phoneNumber.replace(/^\+\d+/, "").trim();
   return `${countryDialCode}${cleanNumber}`;

packages/react/src/auth/forms/phone-auth-form.tsx

@@ -18,7 +18,7 @@
 
 import {
   confirmPhoneNumber,
-  CountryData,
+  CountryCode,
   countryData,
   createPhoneFormSchema,
   FirebaseUIError,
@@ -47,7 +47,8 @@ function PhoneNumberForm({ onSubmit, formError, recaptchaVerifier, recaptchaCont
   const ui = useUI();
 
   // TODO(ehesp): How does this support allowed countries?
-  const [selectedCountry, setSelectedCountry] = useState<CountryData>(countryData[0]);
+  // TODO(ehesp): How does this support default country?
+  const [selectedCountry, setSelectedCountry] = useState<CountryCode>(countryData[0].code);
   const [firstValidationOccured, setFirstValidationOccured] = useState(false);
 
   const phoneFormSchema = useMemo(
@@ -67,7 +68,7 @@ function PhoneNumberForm({ onSubmit, formError, recaptchaVerifier, recaptchaCont
       onSubmit: phoneFormSchema,
     },
     onSubmit: async ({ value }) => {
-      const formattedNumber = formatPhoneNumberWithCountry(value.phoneNumber, selectedCountry.dialCode);
+      const formattedNumber = formatPhoneNumberWithCountry(value.phoneNumber, selectedCountry);
       await onSubmit(formattedNumber);
     },
   });
@@ -94,7 +95,7 @@ function PhoneNumberForm({ onSubmit, formError, recaptchaVerifier, recaptchaCont
                 <div className="fui-phone-input">
                   <CountrySelector
                     value={selectedCountry}
-                    onChange={(country) => setSelectedCountry(country as CountryData)}
+                    onChange={(code) => setSelectedCountry(code as CountryCode)}
                     className="fui-phone-input__country-selector"
                   />
                   <input

packages/react/src/components/country-selector.test.tsx

@@ -29,7 +29,7 @@ describe("CountrySelector Component", () => {
   });
 
   it("renders with the selected country", () => {
-    render(<CountrySelector value={defaultCountry} onChange={mockOnChange} />);
+    render(<CountrySelector value={defaultCountry.code} onChange={mockOnChange} />);
 
     // Check if the country flag emoji is displayed
     expect(screen.getByText(defaultCountry.emoji)).toBeInTheDocument();
@@ -43,15 +43,15 @@ describe("CountrySelector Component", () => {
   });
 
   it("applies custom className", () => {
-    render(<CountrySelector value={defaultCountry} onChange={mockOnChange} className="custom-class" />);
+    render(<CountrySelector value={defaultCountry.code} onChange={mockOnChange} className="custom-class" />);
 
     const selector = screen.getByRole("combobox").closest(".fui-country-selector");
     expect(selector).toHaveClass("fui-country-selector");
     expect(selector).toHaveClass("custom-class");
   });
 
   it("calls onChange when a different country is selected", () => {
-    render(<CountrySelector value={defaultCountry} onChange={mockOnChange} />);
+    render(<CountrySelector value={defaultCountry.code} onChange={mockOnChange} />);
 
     const select = screen.getByRole("combobox");
 
@@ -72,7 +72,7 @@ describe("CountrySelector Component", () => {
   });
 
   it("renders all countries in the dropdown", () => {
-    render(<CountrySelector value={defaultCountry} onChange={mockOnChange} />);
+    render(<CountrySelector value={defaultCountry.code} onChange={mockOnChange} />);
 
     const select = screen.getByRole("combobox");
     const options = select.querySelectorAll("option");

packages/react/src/components/country-selector.tsx

@@ -16,33 +16,38 @@
 
 "use client";
 
-import { CountryCodes, CountryData, countryData } from "@firebase-ui/core";
+import { CountryCode, countryData, getCountryByCode } from "@firebase-ui/core";
 import { ComponentProps } from "react";
 import { cn } from "~/utils/cn";
 
 export type CountrySelectorProps = ComponentProps<"div"> & {
-  value: CountryData;
-  onChange: (country: CountryData) => void;
-  allowedCountries?: CountryCodes[];
+  value: CountryCode;
+  onChange: (code: CountryCode) => void;
+  allowedCountries?: CountryCode[];
 };
 
 export function CountrySelector({ value, onChange, allowedCountries, className, ...props }: CountrySelectorProps) {
 
+  const country = getCountryByCode(value);
   const countries = allowedCountries ? countryData.filter((c) => allowedCountries.includes(c.code)) : countryData;
 
+  if (!country) {
+    return null;
+  }
+
   return (
     <div className={cn("fui-country-selector", className)} {...props}>
       <div className="fui-country-selector__wrapper">
-        <span className="fui-country-selector__flag">{value.emoji}</span>
+        <span className="fui-country-selector__flag">{country.emoji}</span>
         <div className="fui-country-selector__select-wrapper">
-          <span className="fui-country-selector__dial-code">{value.dialCode}</span>
+          <span className="fui-country-selector__dial-code">{country.dialCode}</span>
           <select
             className="fui-country-selector__select"
-            value={value.code}
+            value={country.code}
             onChange={(e) => {
-              const country = countries.find((c) => c.code === e.target.value);
+              const country = getCountryByCode(e.target.value as CountryCode);
               if (country) {
-                onChange(country);
+                onChange(country.code);
               }
             }}
           >