feat(dashboard): Admin UI regions v2 (#6943)

packages/admin-next/dashboard/src/components/table/table-cells/region/countries-cell/countries-cell.tsx

@@ -1,9 +1,12 @@
-import { Country } from "@medusajs/medusa"
 import { useTranslation } from "react-i18next"
+import { RegionCountryDTO } from "@medusajs/types"
+
 import { PlaceholderCell } from "../../common/placeholder-cell"
+import { ListSummary } from "../../../../common/list-summary"
+import { countries as COUNTRIES } from "../../../../../lib/countries"
 
 type CountriesCellProps = {
-  countries?: Country[] | null
+  countries?: RegionCountryDTO[] | null
 }
 
 export const CountriesCell = ({ countries }: CountriesCellProps) => {
@@ -13,26 +16,14 @@ export const CountriesCell = ({ countries }: CountriesCellProps) => {
     return <PlaceholderCell />
   }
 
-  const displayValue = countries
-    .slice(0, 2)
-    .map((c) => c.display_name)
-    .join(", ")
-
-  const additionalCountries = countries
-    .slice(2)
-    .map((c) => c.display_name).length
-
-  const text = `${displayValue}${
-    additionalCountries > 0
-      ? ` ${t("general.plusCountMore", {
-          count: additionalCountries,
-        })}`
-      : ""
-  }`
-
   return (
     <div className="flex size-full items-center overflow-hidden">
-      <span className="truncate">{text}</span>
+      <ListSummary
+        list={countries.map(
+          (country) =>
+            COUNTRIES.find((c) => c.iso_2 === country.iso_2)!.display_name
+        )}
+      />
     </div>
   )
 }

packages/admin-next/dashboard/src/components/table/table-cells/region/payment-providers-cell/payment-providers-cell.tsx

@@ -1,39 +1,26 @@
-import { PaymentProvider } from "@medusajs/medusa"
 import { useTranslation } from "react-i18next"
+import { PaymentProviderDTO } from "@medusajs/types"
+
 import { formatProvider } from "../../../../../lib/format-provider"
 import { PlaceholderCell } from "../../common/placeholder-cell"
+import { ListSummary } from "../../../../common/list-summary"
 
 type PaymentProvidersCellProps = {
-  paymentProviders?: PaymentProvider[] | null
+  paymentProviders?: PaymentProviderDTO[] | null
 }
 
 export const PaymentProvidersCell = ({
   paymentProviders,
 }: PaymentProvidersCellProps) => {
-  const { t } = useTranslation()
-
   if (!paymentProviders || paymentProviders.length === 0) {
     return <PlaceholderCell />
   }
 
-  const displayValue = paymentProviders
-    .slice(0, 2)
-    .map((p) => formatProvider(p.id))
-    .join(", ")
-
-  const additionalProviders = paymentProviders.slice(2).length
-
-  const text = `${displayValue}${
-    additionalProviders > 0
-      ? ` ${t("general.plusCountMore", {
-          count: additionalProviders,
-        })}`
-      : ""
-  }`
+  const displayValues = paymentProviders.map((p) => formatProvider(p.id))
 
   return (
     <div className="flex size-full items-center overflow-hidden">
-      <span className="truncate">{text}</span>
+      <ListSummary list={displayValues} />
     </div>
   )
 }