medusajs · kodiakhq · Feb 12, 2024 · Feb 8, 2024 · Feb 8, 2024 · Feb 8, 2024
@@ -0,0 +1,7 @@
+---
+"@medusajs/client-types": patch
+"@medusajs/ui": patch
+"@medusajs/medusa": patch
+---
+
+fix(medusa,ui): Fixes list query params for the following endpoints: "/admin/customers", "/admin/customer-groups", "/admin/gift-cards", and "/admin/collections".
@@ -3,16 +3,7 @@
   "general": {
     "ascending": "Ascending",
     "descending": "Descending",
-    "cancel": "Cancel",
-    "close": "Close",
-    "save": "Save",
-    "create": "Create",
-    "delete": "Delete",
-    "invite": "Invite",
-    "edit": "Edit",
-    "confirm": "Confirm",
     "add": "Add",
-    "continue": "Continue",
     "start": "Start",
     "end": "End",
     "apply": "Apply",
@@ -30,10 +21,9 @@
     "details": "Details",
     "enabled": "Enabled",
     "disabled": "Disabled",
+    "expired": "Expired",
     "active": "Active",
-    "revoke": "Revoke",
     "revoked": "Revoked",
-    "remove": "Remove",
     "admin": "Admin",
     "store": "Store",
     "items_one": "{{count}} item",
@@ -50,6 +40,16 @@
     "unsavedChangesTitle": "Are you sure you want to leave this page?",
     "unsavedChangesDescription": "You have unsaved changes that will be lost if you leave this page."
   },
+  "actions": {
+    "create": "Create",
+    "delete": "Delete",
+    "remove": "Remove",
+    "revoke": "Revoke",
+    "cancel": "Cancel",
+    "save": "Save",
+    "continue": "Continue",
+    "edit": "Edit"
+  },
   "products": {
     "domain": "Products",
     "variants": "Variants",
@@ -69,8 +69,7 @@
     "createCollectionHint": "Create a new collection to organize your products.",
     "editCollection": "Edit Collection",
     "handleTooltip": "The handle is used to reference the collection in your storefront. If not specified, the handle will be generated from the collection title.",
-    "deleteWarning_one": "You are about to delete {{count}} collection. This action cannot be undone.",
-    "deleteWarning_other": "You are about to delete {{count}} collections. This action cannot be undone.",
+    "deleteWarning": "You are about to delete the collection {{title}}. This action cannot be undone.",
     "removeSingleProductWarning": "You are about to remove the product {{title}} from the collection. This action cannot be undone.",
     "removeProductsWarning_one": "You are about to remove {{count}} product from the collection. This action cannot be undone.",
     "removeProductsWarning_other": "You are about to remove {{count}} products from the collection. This action cannot be undone."
@@ -82,7 +81,22 @@
     "domain": "Inventory"
   },
   "giftCards": {
-    "domain": "Gift Cards"
+    "domain": "Gift Cards",
+    "editGiftCard": "Edit Gift Card",
+    "createGiftCard": "Create Gift Card",
+    "createGiftCardHint": "Manually create a gift card that can be used as a payment method in your store.",
+    "selectRegionFirst": "Select a region first",
+    "deleteGiftCardWarning": "You are about to delete the gift card {{code}}. This action cannot be undone.",
+    "balanceHigherThanValue": "The balance cannot be higher than the original amount.",
+    "balanceLowerThanZero": "The balance cannot be negative.",
+    "expiryDateHint": "Countries have different laws regarding gift card expiry dates. Make sure to check local regulations before setting an expiry date.",
+    "regionHint": "Changing the region of the gift card will also change its currency, potentially affecting its monetary value.",
+    "enabledHint": "Specify if the gift card is enabled or disabled.",
+    "balance": "Balance",
+    "currentBalance": "Current balance",
+    "initialBalance": "Initial balance",
+    "personalMessage": "Personal message",
+    "recipient": "Recipient"
   },
   "customers": {
     "domain": "Customers",
@@ -96,7 +110,8 @@
     "guest": "Guest",
     "registered": "Registered",
     "firstSeen": "First seen",
-    "viewOrder": "View order"
+    "viewOrder": "View order",
+    "groups": "Groups"
   },
   "customerGroups": {
     "domain": "Customer Groups",
@@ -174,7 +189,9 @@
       "admin": "Admin",
       "developer": "Developer",
       "member": "Member"
-    }
+    },
+    "deleteUserWarning": "You are about to delete the user {{name}}. This action cannot be undone.",
+    "invite": "Invite"
   },
   "store": {
     "domain": "Store",
@@ -337,6 +354,17 @@
     "salesChannel": "Sales Channel",
     "region": "Region",
     "role": "Role",
-    "sent": "Sent"
+    "sent": "Sent",
+    "salesChannels": "Sales Channels",
+    "product": "Product",
+    "createdAt": "Created at",
+    "updatedAt": "Updated at",
+    "true": "True",
+    "false": "False",
+    "giftCard": "Gift Card",
+    "tag": "Tag",
+    "dateIssued": "Date issued",
+    "issuedDate": "Issued date",
+    "expiryDate": "Expiry date"
   }
 }
@@ -28,7 +28,7 @@ export const JsonViewSection = ({ data, root }: JsonViewProps) => {
     <Container className="flex items-center justify-between px-6 py-4">
       <div className="flex items-center gap-x-4">
         <Heading level="h2">JSON</Heading>
-        <Badge>{numberOfKeys} keys</Badge>
+        <Badge size="2xsmall">{numberOfKeys} keys</Badge>
       </div>
       <Drawer>
         <Drawer.Trigger asChild>
@@ -44,7 +44,7 @@ export const JsonViewSection = ({ data, root }: JsonViewProps) => {
           <div className="bg-ui-code-bg-header border-ui-code-border flex items-center justify-between border-b px-6 py-4">
             <div className="flex items-center gap-x-4">
               <Heading>JSON</Heading>
-              <Badge>{numberOfKeys} keys</Badge>
+              <Badge size="2xsmall">{numberOfKeys} keys</Badge>
             </div>
             <div className="flex items-center gap-x-2">
               <Kbd>esc</Kbd>

@@ -18,7 +18,7 @@ export const LocalizedDatePicker = ({
     ?.date_locale
 
   const translations = {
-    cancel: t("general.cancel"),
+    cancel: t("actions.cancel"),
     apply: t("general.apply"),
     end: t("general.end"),
     start: t("general.start"),

@@ -13,18 +13,18 @@ import { NoResults } from "../../../common/empty-table-content"
 type BulkCommand = {
   label: string
   shortcut: string
-  action: (selection: Record<string, boolean>) => void
+  action: (selection: Record<string, boolean>) => Promise<void>
 }
 
-export interface DataTableRootProps<TData, TValue> {
+export interface DataTableRootProps<TData> {
   /**
    * The table instance to render
    */
   table: ReactTable<TData>
   /**
    * The columns to render
    */
-  columns: ColumnDef<TData, TValue>[]
+  columns: ColumnDef<TData, any>[]
   /**
    * Function to generate a link to navigate to when clicking on a row
    */
@@ -61,15 +61,15 @@ export interface DataTableRootProps<TData, TValue> {
 /**
  * Table component for rendering a table with pagination, filtering and ordering.
  */
-export const DataTableRoot = <TData, TValue>({
+export const DataTableRoot = <TData,>({
   table,
   columns,
   pagination,
   navigateTo,
   commands,
   count = 0,
   noResults = false,
-}: DataTableRootProps<TData, TValue>) => {
+}: DataTableRootProps<TData>) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [showStickyBorder, setShowStickyBorder] = useState(false)
@@ -94,6 +94,12 @@ export const DataTableRoot = <TData, TValue>({
     }
   }
 
+  const handleAction = async (action: BulkCommand["action"]) => {
+    await action(rowSelection).then(() => {
+      table.resetRowSelection()
+    })
+  }
+
   return (
     <div className="w-full">
       <div onScroll={handleHorizontalScroll} className="w-full overflow-x-auto">
@@ -159,6 +165,7 @@ export const DataTableRoot = <TData, TValue>({
                 return (
                   <Table.Row
                     key={row.id}
+                    data-selected={row.getIsSelected()}
                     className={clx(
                       "transition-fg group/row [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
                       "[&:has(td_a:focus-visible)_td]:bg-ui-bg-base-pressed",
@@ -188,7 +195,7 @@ export const DataTableRoot = <TData, TValue>({
                         <Table.Cell
                           key={cell.id}
                           className={clx("has-[a]:cursor-pointer", {
-                            "bg-ui-bg-base group-[:has(td_a:focus)]/row:bg-ui-bg-base-pressed group-hover/row:bg-ui-bg-base-hover transition-fg sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
+                            "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-[:has(td_a:focus)]/row:bg-ui-bg-base-pressed group-hover/row:bg-ui-bg-base-hover transition-fg sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyCell,
                             "after:bg-ui-border-base":
                               showStickyBorder && isStickyCell,
@@ -239,7 +246,7 @@ export const DataTableRoot = <TData, TValue>({
                   <CommandBar.Command
                     label={command.label}
                     shortcut={command.shortcut}
-                    action={() => command.action(rowSelection)}
+                    action={() => handleAction(command.action)}
                   />
                   {index < commands.length - 1 && <CommandBar.Seperator />}
                 </Fragment>

@@ -4,8 +4,8 @@ import { DataTableQuery, DataTableQueryProps } from "./data-table-query"
 import { DataTableRoot, DataTableRootProps } from "./data-table-root"
 import { DataTableSkeleton } from "./data-table-skeleton"
 
-interface DataTableProps<TData, TValue>
-  extends DataTableRootProps<TData, TValue>,
+interface DataTableProps<TData>
+  extends DataTableRootProps<TData>,
     DataTableQueryProps {
   isLoading?: boolean
   rowCount: number
@@ -15,7 +15,7 @@ interface DataTableProps<TData, TValue>
 const MemoizedDataTableRoot = memo(DataTableRoot) as typeof DataTableRoot
 const MemoizedDataTableQuery = memo(DataTableQuery)
 
-export const DataTable = <TData, TValue>({
+export const DataTable = <TData,>({
   table,
   columns,
   pagination,
@@ -29,7 +29,7 @@ export const DataTable = <TData, TValue>({
   queryObject = {},
   rowCount,
   isLoading = false,
-}: DataTableProps<TData, TValue>) => {
+}: DataTableProps<TData>) => {
   if (isLoading) {
     return (
       <DataTableSkeleton

@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next"
+import { PlaceholderCell } from "../placeholder-cell"
+
+type EmailCellProps = {
+  email?: string | null
+}
+
+export const EmailCell = ({ email }: EmailCellProps) => {
+  if (!email) {
+    return <PlaceholderCell />
+  }
+
+  return (
+    <div className="flex h-full w-full items-center overflow-hidden">
+      <span className="truncate">{email}</span>
+    </div>
+  )
+}
+
+export const EmailHeader = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex h-full w-full items-center">
+      <span className="truncate">{t("fields.email")}</span>
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from "./email-cell"
@@ -0,0 +1 @@
+export * from "./money-amount-cell"
@@ -0,0 +1,45 @@
+import { clx } from "@medusajs/ui"
+import { getPresentationalAmount } from "../../../../../lib/money-amount-helpers"
+import { PlaceholderCell } from "../placeholder-cell"
+
+type MoneyAmountCellProps = {
+  currencyCode: string
+  amount?: number | null
+  align?: "left" | "right"
+}
+
+export const MoneyAmountCell = ({
+  currencyCode,
+  amount,
+  align = "left",
+}: MoneyAmountCellProps) => {
+  if (!amount) {
+    return <PlaceholderCell />
+  }
+
+  const formatted = new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: currencyCode,
+    currencyDisplay: "narrowSymbol",
+  }).format(0)
+
+  const symbol = formatted.replace(/\d/g, "").replace(/[.,]/g, "").trim()
+
+  const presentationAmount = getPresentationalAmount(amount, currencyCode)
+  const formattedTotal = new Intl.NumberFormat(undefined, {
+    style: "decimal",
+  }).format(presentationAmount)
+
+  return (
+    <div
+      className={clx("flex h-full w-full items-center overflow-hidden", {
+        "justify-start text-left": align === "left",
+        "justify-end text-right": align === "right",
+      })}
+    >
+      <span className="truncate">
+        {symbol} {formattedTotal} {currencyCode.toUpperCase()}
+      </span>
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from "./name-cell"
@@ -0,0 +1,31 @@
+import { useTranslation } from "react-i18next"
+import { PlaceholderCell } from "../placeholder-cell"
+
+type NameCellProps = {
+  firstName?: string | null
+  lastName?: string | null
+}
+
+export const NameCell = ({ firstName, lastName }: NameCellProps) => {
+  if (!firstName && !lastName) {
+    return <PlaceholderCell />
+  }
+
+  const name = [firstName, lastName].filter(Boolean).join(" ")
+
+  return (
+    <div className="flex h-full w-full items-center overflow-hidden">
+      <span className="truncate">{name}</span>
+    </div>
+  )
+}
+
+export const NameHeader = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex h-full w-full items-center">
+      <span className="truncate">{t("fields.name")}</span>
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from "./placeholder-cell"
@@ -0,0 +1,7 @@
+export const PlaceholderCell = () => {
+  return (
+    <div className="flex h-full w-full items-center">
+      <span className="text-ui-fg-muted">-</span>
+    </div>
+  )
+}