fix(dashboard): Fix CountrySelect (#8301)

Resolves CC-214

packages/admin-next/dashboard/src/components/inputs/country-select/country-select.tsx

@@ -12,8 +12,16 @@ import { countries } from "../../../lib/data/countries"
 
 export const CountrySelect = forwardRef<
   HTMLSelectElement,
-  ComponentPropsWithoutRef<"select"> & { placeholder?: string }
+  ComponentPropsWithoutRef<"select"> & {
->(({ className, disabled, placeholder, ...props }, ref) => {
+    placeholder?: string
+    value?: string
+    defaultValue?: string
+  }
+>(
+  (
+    { className, disabled, placeholder, value, defaultValue, ...props },
+    ref
+  ) => {
     const { t } = useTranslation()
     const innerRef = useRef<HTMLSelectElement>(null)
 
@@ -32,6 +40,8 @@ export const CountrySelect = forwardRef<
           )}
         />
         <select
+          value={value ? value.toLowerCase() : undefined}
+          defaultValue={defaultValue ? defaultValue.toLowerCase() : undefined}
           disabled={disabled}
           className={clx(
             "bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 outline-none",
@@ -55,7 +65,7 @@ export const CountrySelect = forwardRef<
           </option>
           {countries.map((country) => {
             return (
-            <option key={country.iso_2} value={country.iso_2}>
+              <option key={country.iso_2} value={country.iso_2.toLowerCase()}>
                 {country.display_name}
               </option>
             )
@@ -63,5 +73,6 @@ export const CountrySelect = forwardRef<
         </select>
       </div>
     )
-})
+  }
+)
 CountrySelect.displayName = "CountrySelect"

packages/admin-next/dashboard/src/lib/addresses.ts

@@ -1,6 +1,6 @@
 import { AddressDTO } from "@medusajs/types"
 
-import { countries } from "./data/countries"
+import { countries, getCountryByIso2 } from "./data/countries"
 
 export const isSameAddress = (a: AddressDTO | null, b: AddressDTO | null) => {
   if (!a || !b) {
@@ -72,8 +72,14 @@ export const getFormattedAddress = ({
   if (country) {
     formattedAddress.push(country.display_name)
   } else if (country_code) {
+    const country = getCountryByIso2(country_code)
+
+    if (country) {
+      formattedAddress.push(country.display_name)
+    } else {
       formattedAddress.push(country_code.toUpperCase())
     }
+  }
 
   return formattedAddress
 }