fix(dashboard): Fix CountrySelect (#8301)

Resolves CC-214

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

@@ -12,56 +12,67 @@ import { countries } from "../../../lib/data/countries"
 
 export const CountrySelect = forwardRef<
   HTMLSelectElement,
-  ComponentPropsWithoutRef<"select"> & { placeholder?: string }
+  ComponentPropsWithoutRef<"select"> & {
->(({ className, disabled, placeholder, ...props }, ref) => {
+    placeholder?: string
-  const { t } = useTranslation()
+    value?: string
-  const innerRef = useRef<HTMLSelectElement>(null)
+    defaultValue?: string
+  }
+>(
+  (
+    { className, disabled, placeholder, value, defaultValue, ...props },
+    ref
+  ) => {
+    const { t } = useTranslation()
+    const innerRef = useRef<HTMLSelectElement>(null)
 
-  useImperativeHandle(ref, () => innerRef.current as HTMLSelectElement)
+    useImperativeHandle(ref, () => innerRef.current as HTMLSelectElement)
 
-  const isPlaceholder = innerRef.current?.value === ""
+    const isPlaceholder = innerRef.current?.value === ""
 
-  return (
+    return (
-    <div className="relative">
+      <div className="relative">
-      <TrianglesMini
+        <TrianglesMini
-        className={clx(
+          className={clx(
-          "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
+            "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
-          {
+            {
-            "text-ui-fg-disabled": disabled,
+              "text-ui-fg-disabled": disabled,
-          }
+            }
-        )}
+          )}
-      />
+        />
-      <select
+        <select
-        disabled={disabled}
+          value={value ? value.toLowerCase() : undefined}
-        className={clx(
+          defaultValue={defaultValue ? defaultValue.toLowerCase() : undefined}
-          "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",
+          disabled={disabled}
-          "placeholder:text-ui-fg-muted text-ui-fg-base",
+          className={clx(
-          "hover:bg-ui-bg-field-hover",
+            "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",
-          "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+            "placeholder:text-ui-fg-muted text-ui-fg-base",
-          "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+            "hover:bg-ui-bg-field-hover",
-          "invalid::border-ui-border-error invalid:shadow-borders-error",
+            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
-          "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
-          {
+            "invalid::border-ui-border-error invalid:shadow-borders-error",
-            "text-ui-fg-muted": isPlaceholder,
+            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
-          },
+            {
-          className
+              "text-ui-fg-muted": isPlaceholder,
-        )}
+            },
-        {...props}
+            className
-        ref={innerRef}
+          )}
-      >
+          {...props}
-        {/* Add an empty option so the first option is preselected */}
+          ref={innerRef}
-        <option value="" disabled className="text-ui-fg-muted">
+        >
-          {placeholder || t("fields.selectCountry")}
+          {/* Add an empty option so the first option is preselected */}
-        </option>
+          <option value="" disabled className="text-ui-fg-muted">
-        {countries.map((country) => {
+            {placeholder || t("fields.selectCountry")}
-          return (
+          </option>
-            <option key={country.iso_2} value={country.iso_2}>
+          {countries.map((country) => {
-              {country.display_name}
+            return (
-            </option>
+              <option key={country.iso_2} value={country.iso_2.toLowerCase()}>
-          )
+                {country.display_name}
-        })}
+              </option>
-      </select>
+            )
-    </div>
+          })}
-  )
+        </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,7 +72,13 @@ export const getFormattedAddress = ({
   if (country) {
     formattedAddress.push(country.display_name)
   } else if (country_code) {
-    formattedAddress.push(country_code.toUpperCase())
+    const country = getCountryByIso2(country_code)
+
+    if (country) {
+      formattedAddress.push(country.display_name)
+    } else {
+      formattedAddress.push(country_code.toUpperCase())
+    }
   }
 
   return formattedAddress