fix(dashboard): Fix CountrySelect (#8301)

Resolves CC-214

Author: kasperkristensen

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 }
->(({ className, disabled, placeholder, ...props }, ref) => {
-  const { t } = useTranslation()
-  const innerRef = useRef<HTMLSelectElement>(null)
+  ComponentPropsWithoutRef<"select"> & {
+    placeholder?: string
+    value?: string
+    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 (
-    <div className="relative">
-      <TrianglesMini
-        className={clx(
-          "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
-          {
-            "text-ui-fg-disabled": disabled,
-          }
-        )}
-      />
-      <select
-        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",
-          "placeholder:text-ui-fg-muted text-ui-fg-base",
-          "hover:bg-ui-bg-field-hover",
-          "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
-          "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
-          "invalid::border-ui-border-error invalid:shadow-borders-error",
-          "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
-          {
-            "text-ui-fg-muted": isPlaceholder,
-          },
-          className
-        )}
-        {...props}
-        ref={innerRef}
-      >
-        {/* Add an empty option so the first option is preselected */}
-        <option value="" disabled className="text-ui-fg-muted">
-          {placeholder || t("fields.selectCountry")}
-        </option>
-        {countries.map((country) => {
-          return (
-            <option key={country.iso_2} value={country.iso_2}>
-              {country.display_name}
-            </option>
-          )
-        })}
-      </select>
-    </div>
-  )
-})
+    return (
+      <div className="relative">
+        <TrianglesMini
+          className={clx(
+            "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
+            {
+              "text-ui-fg-disabled": disabled,
+            }
+          )}
+        />
+        <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",
+            "placeholder:text-ui-fg-muted text-ui-fg-base",
+            "hover:bg-ui-bg-field-hover",
+            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+            "invalid::border-ui-border-error invalid:shadow-borders-error",
+            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+            {
+              "text-ui-fg-muted": isPlaceholder,
+            },
+            className
+          )}
+          {...props}
+          ref={innerRef}
+        >
+          {/* Add an empty option so the first option is preselected */}
+          <option value="" disabled className="text-ui-fg-muted">
+            {placeholder || t("fields.selectCountry")}
+          </option>
+          {countries.map((country) => {
+            return (
+              <option key={country.iso_2} value={country.iso_2.toLowerCase()}>
+                {country.display_name}
+              </option>
+            )
+          })}
+        </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