From c72b4847b9ae93643b929dc7334d5aa49ae473b0 Mon Sep 17 00:00:00 2001
From: Riqwan Thamir <rmthamir@gmail.com>
Date: Wed, 28 Aug 2024 10:59:36 +0200
Subject: [PATCH 1/5] fix(dashboard,js-sdk): fixes from rma flows testing
 (#8826)

---
 .../dashboard/src/i18n/translations/en.json   |  19 ++-
 .../claim-create-form/claim-create-form.tsx   |  21 ++-
 .../order-edit-create-form.tsx                |  26 +++-
 .../exchange-create-form.tsx                  |  21 ++-
 .../return-create-form/return-create-form.tsx |  20 ++-
 .../active-order-claim-section.tsx            |   2 +-
 .../active-order-exchange-section.tsx         |   2 +-
 .../active-order-return-section.tsx           |   2 +-
 .../copy-payment-link/copy-payment-link.tsx   |   2 +-
 .../order-activity-section/activity-items.tsx | 136 ++++++++++++++++++
 .../order-activity-section/order-timeline.tsx |  64 ++++++++-
 .../order-summary-section.tsx                 |  31 +++-
 .../orders/order-detail/order-detail.tsx      |  16 +++
 packages/core/js-sdk/src/admin/order.ts       |   1 +
 .../types/src/http/order/admin/entities.ts    |   2 +
 15 files changed, 335 insertions(+), 30 deletions(-)
 create mode 100644 packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx

diff --git a/packages/admin-next/dashboard/src/i18n/translations/en.json b/packages/admin-next/dashboard/src/i18n/translations/en.json
index 6c0b7498c168e..88da1771cb55f 100644
--- a/packages/admin-next/dashboard/src/i18n/translations/en.json
+++ b/packages/admin-next/dashboard/src/i18n/translations/en.json
@@ -848,6 +848,9 @@
     },
     "edits": {
       "title": "Edit order",
+      "confirm": "Confirm Edit",
+      "confirmText": "You are about to confirm an Order Edit. This action cannot be undone.",
+      "cancel": "Cancel Edit",
       "currentItems": "Current items",
       "currentItemsDescription": "Adjust item quantity or remove.",
       "addItemsDescription": "You can add new items to the order.",
@@ -874,6 +877,8 @@
     },
     "returns": {
       "create": "Create Return",
+      "confirm": "Confirm Return",
+      "confirmText": "You are about to confirm a Return. This action cannot be undone.",
       "inbound": "Inbound",
       "outbound": "Outbound",
       "sendNotification": "Send notification",
@@ -903,7 +908,7 @@
       },
       "receive": {
         "action": "Receive items",
-        "receive": "Return {{label}}",
+        "receiveItems": "{{ returnType }} {{ id }}",
         "restockAll": "Restock all items",
         "itemsLabel": "Items received",
         "title": "Receive items for #{{returnId}}",
@@ -928,6 +933,9 @@
     },
     "claims": {
       "create": "Create Claim",
+      "confirm": "Confirm Claim",
+      "confirmText": "You are about to confirm a Claim. This action cannot be undone.",
+      "cancel": "Cancel Claim",
       "manage": "Manage Claim",
       "outbound": "Outbound",
       "outboundItemAdded": "{{itemsCount}}x added through claim",
@@ -956,6 +964,9 @@
     "exchanges": {
       "create": "Create Exchange",
       "manage": "Manage Exchange",
+      "confirm": "Confirm Exchange",
+      "confirmText": "You are about to confirm an Exchange. This action cannot be undone.",
+      "cancel": "Cancel Exchange",
       "outbound": "Outbound",
       "outboundItemAdded": "{{itemsCount}}x added through exchange",
       "outboundTotal": "Outbound total",
@@ -1003,7 +1014,7 @@
     "shipment": {
       "title": "Mark fulfillment shipped",
       "trackingNumber": "Tracking number",
-      "addTracking": "Add additional tracking number",
+      "addTracking": "Add tracking number",
       "sendNotification": "Send notification",
       "sendNotificationHint": "Notify the customer about this shipment.",
       "toastCreated": "Shipment created successfully."
@@ -1078,6 +1089,10 @@
         "deleteButtonText": "Delete comment"
       },
       "events": {
+        "common": {
+          "toReturn": "To return",
+          "toSend": "To send"
+        },
         "placed": {
           "title": "Order placed",
           "fromSalesChannel": "from {{salesChannel}}"
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx
index 50d5fe5afbc93..c297896da431d 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx
@@ -15,6 +15,7 @@ import {
   Switch,
   Text,
   toast,
+  usePrompt,
 } from "@medusajs/ui"
 import { useEffect, useMemo, useState } from "react"
 import { useFieldArray, useForm } from "react-hook-form"
@@ -305,8 +306,21 @@ export const ClaimCreateForm = ({
 
   const showInboundItemsPlaceholder = !inboundItems.length
   const shippingOptionId = form.watch("inbound_option_id")
+  const prompt = usePrompt()
 
   const handleSubmit = form.handleSubmit(async (data) => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("orders.claims.confirmText"),
+      confirmText: t("actions.continue"),
+      cancelText: t("actions.cancel"),
+      variant: "confirmation",
+    })
+
+    if (!res) {
+      return
+    }
+
     await confirmClaimRequest(
       { no_notification: !data.send_notification },
       {
@@ -518,6 +532,7 @@ export const ClaimCreateForm = ({
                             {t("actions.cancel")}
                           </Button>
                         </RouteFocusModal.Close>
+
                         <Button
                           key="submit-button"
                           type="submit"
@@ -859,6 +874,8 @@ export const ClaimCreateForm = ({
                 }}
               />
             </div>
+
+            <div className="p-8" />
           </div>
         </RouteFocusModal.Body>
         <RouteFocusModal.Footer>
@@ -871,7 +888,7 @@ export const ClaimCreateForm = ({
                   variant="secondary"
                   size="small"
                 >
-                  {t("actions.cancel")}
+                  {t("orders.claims.cancel")}
                 </Button>
               </RouteFocusModal.Close>
               <Button
@@ -881,7 +898,7 @@ export const ClaimCreateForm = ({
                 size="small"
                 isLoading={isRequestLoading}
               >
-                {t("actions.save")}
+                {t("orders.claims.confirm")}
               </Button>
             </div>
           </div>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-edit/components/order-edit-create-form/order-edit-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-edit/components/order-edit-create-form/order-edit-create-form.tsx
index 1f60214681983..d7f0641d24a27 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-create-edit/components/order-edit-create-form/order-edit-create-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-create-edit/components/order-edit-create-form/order-edit-create-form.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { AdminOrder, AdminOrderPreview } from "@medusajs/types"
-import { Button, Heading, Input, Switch, toast } from "@medusajs/ui"
+import { Button, Heading, Input, Switch, toast, usePrompt } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
@@ -10,13 +10,13 @@ import {
 } from "../../../../../components/modals"
 
 import { Form } from "../../../../../components/common/form"
-import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
-import { CreateOrderEditSchemaType, OrderEditCreateSchema } from "./schema"
 import {
   useCancelOrderEdit,
   useRequestOrderEdit,
 } from "../../../../../hooks/api/order-edits"
+import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
 import { OrderEditItemsSection } from "./order-edit-items-section"
+import { CreateOrderEditSchemaType, OrderEditCreateSchema } from "./schema"
 
 type ReturnCreateFormProps = {
   order: AdminOrder
@@ -55,8 +55,22 @@ export const OrderEditCreateForm = ({
     resolver: zodResolver(OrderEditCreateSchema),
   })
 
+  const prompt = usePrompt()
+
   const handleSubmit = form.handleSubmit(async (data) => {
     try {
+      const res = await prompt({
+        title: t("general.areYouSure"),
+        description: t("orders.edits.confirmText"),
+        confirmText: t("actions.continue"),
+        cancelText: t("actions.cancel"),
+        variant: "confirmation",
+      })
+
+      if (!res) {
+        return
+      }
+
       await requestOrderEdit()
 
       toast.success(t("orders.edits.createSuccessToast"))
@@ -185,6 +199,8 @@ export const OrderEditCreateForm = ({
                 }}
               />
             </div>
+
+            <div className="p-8" />
           </div>
         </RouteFocusModal.Body>
         <RouteFocusModal.Footer>
@@ -192,7 +208,7 @@ export const OrderEditCreateForm = ({
             <div className="flex items-center justify-end gap-x-2">
               <RouteFocusModal.Close asChild>
                 <Button type="button" variant="secondary" size="small">
-                  {t("actions.cancel")}
+                  {t("orders.edits.cancel")}
                 </Button>
               </RouteFocusModal.Close>
               <Button
@@ -202,7 +218,7 @@ export const OrderEditCreateForm = ({
                 size="small"
                 isLoading={isRequestRunning}
               >
-                {t("actions.save")}
+                {t("orders.edits.confirm")}
               </Button>
             </div>
           </div>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx
index 2b39ad9588940..337f2030f608c 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx
@@ -8,6 +8,7 @@ import {
   IconButton,
   Switch,
   toast,
+  usePrompt,
 } from "@medusajs/ui"
 import { useEffect, useMemo, useState } from "react"
 import { useForm } from "react-hook-form"
@@ -148,9 +149,22 @@ export const ExchangeCreateForm = ({
   })
 
   const shippingOptionId = form.watch("inbound_option_id")
+  const prompt = usePrompt()
 
   const handleSubmit = form.handleSubmit(async (data) => {
     try {
+      const res = await prompt({
+        title: t("general.areYouSure"),
+        description: t("orders.exchanges.confirmText"),
+        confirmText: t("actions.continue"),
+        cancelText: t("actions.cancel"),
+        variant: "confirmation",
+      })
+
+      if (!res) {
+        return
+      }
+
       await confirmExchangeRequest({ no_notification: !data.send_notification })
 
       handleSuccess()
@@ -390,6 +404,8 @@ export const ExchangeCreateForm = ({
                 }}
               />
             </div>
+
+            <div className="p-8" />
           </div>
         </RouteFocusModal.Body>
         <RouteFocusModal.Footer>
@@ -402,9 +418,10 @@ export const ExchangeCreateForm = ({
                   variant="secondary"
                   size="small"
                 >
-                  {t("actions.cancel")}
+                  {t("orders.exchanges.cancel")}
                 </Button>
               </RouteFocusModal.Close>
+
               <Button
                 key="submit-button"
                 type="submit"
@@ -412,7 +429,7 @@ export const ExchangeCreateForm = ({
                 size="small"
                 isLoading={isRequestLoading}
               >
-                {t("actions.save")}
+                {t("orders.exchanges.confirm")}
               </Button>
             </div>
           </div>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-return/components/return-create-form/return-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-return/components/return-create-form/return-create-form.tsx
index daf84ae273d3c..ac22d643e38fc 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-create-return/components/return-create-form/return-create-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-create-return/components/return-create-form/return-create-form.tsx
@@ -10,6 +10,7 @@ import {
   Switch,
   Text,
   toast,
+  usePrompt,
 } from "@medusajs/ui"
 import { useEffect, useMemo, useState } from "react"
 import { useFieldArray, useForm } from "react-hook-form"
@@ -240,9 +241,22 @@ export const ReturnCreateForm = ({
   const showPlaceholder = !items.length
   const locationId = form.watch("location_id")
   const shippingOptionId = form.watch("option_id")
+  const prompt = usePrompt()
 
   const handleSubmit = form.handleSubmit(async (data) => {
     try {
+      const res = await prompt({
+        title: t("general.areYouSure"),
+        description: t("orders.returns.confirmText"),
+        confirmText: t("actions.continue"),
+        cancelText: t("actions.cancel"),
+        variant: "confirmation",
+      })
+
+      if (!res) {
+        return
+      }
+
       await confirmReturnRequest({ no_notification: !data.send_notification })
 
       handleSuccess()
@@ -702,6 +716,8 @@ export const ReturnCreateForm = ({
                 }}
               />
             </div>
+
+            <div className="p-8" />
           </div>
         </RouteFocusModal.Body>
         <RouteFocusModal.Footer>
@@ -709,7 +725,7 @@ export const ReturnCreateForm = ({
             <div className="flex items-center justify-end gap-x-2">
               <RouteFocusModal.Close asChild>
                 <Button type="button" variant="secondary" size="small">
-                  {t("actions.cancel")}
+                  {t("orders.returns.cancel.title")}
                 </Button>
               </RouteFocusModal.Close>
               <Button
@@ -719,7 +735,7 @@ export const ReturnCreateForm = ({
                 size="small"
                 isLoading={isRequestLoading}
               >
-                {t("actions.save")}
+                {t("orders.returns.confirm")}
               </Button>
             </div>
           </div>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-claim-section/active-order-claim-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-claim-section/active-order-claim-section.tsx
index 0d7bb8b4bd2ba..b9b78f07b0ecd 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-claim-section/active-order-claim-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-claim-section/active-order-claim-section.tsx
@@ -65,7 +65,7 @@ export const ActiveOrderClaimSection = ({
 
           <div className="flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4">
             <Button size="small" variant="secondary" onClick={onCancelClaim}>
-              {t("actions.cancel")}
+              {t("orders.claims.cancel")}
             </Button>
 
             <Button size="small" variant="secondary" onClick={onContinueClaim}>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-exchange-section/active-order-exchange-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-exchange-section/active-order-exchange-section.tsx
index 26645a5291ec3..a0dd80fc0fd74 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-exchange-section/active-order-exchange-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-exchange-section/active-order-exchange-section.tsx
@@ -65,7 +65,7 @@ export const ActiveOrderExchangeSection = ({
 
           <div className="flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4">
             <Button size="small" variant="secondary" onClick={onCancelExchange}>
-              {t("actions.cancel")}
+              {t("orders.exchanges.cancel")}
             </Button>
 
             <Button
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-return-section/active-order-return-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-return-section/active-order-return-section.tsx
index d8d6c67d78203..44738b61ac4f4 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-return-section/active-order-return-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-return-section/active-order-return-section.tsx
@@ -68,7 +68,7 @@ export const ActiveOrderReturnSection = ({
 
           <div className="flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4">
             <Button size="small" variant="secondary" onClick={onCancelReturn}>
-              {t("actions.cancel")}
+              {t("orders.returns.cancel.title")}
             </Button>
 
             <Button size="small" variant="secondary" onClick={onContinueReturn}>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/copy-payment-link/copy-payment-link.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/copy-payment-link/copy-payment-link.tsx
index 11663113b844d..91726c5be76d4 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/copy-payment-link/copy-payment-link.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/copy-payment-link/copy-payment-link.tsx
@@ -46,7 +46,7 @@ const CopyPaymentLink = React.forwardRef<any, CopyPaymentLinkProps>(
       }
 
       setTimeout(() => {
-        setText("CopyPaymentLink")
+        setText("Copy")
       }, 500)
     }, [done])
 
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx
new file mode 100644
index 0000000000000..82b570c7ba273
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx
@@ -0,0 +1,136 @@
+import {
+  AdminClaim,
+  AdminExchange,
+  AdminOrderLineItem,
+  AdminReturn,
+} from "@medusajs/types"
+import { Popover, Text } from "@medusajs/ui"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Thumbnail } from "../../../../../components/common/thumbnail"
+
+type ActivityItemsProps = {
+  itemsToSend?:
+    | AdminClaim["additional_items"]
+    | AdminExchange["additional_items"]
+  itemsToReturn?: AdminReturn["items"]
+  itemsMap?: Map<string, AdminOrderLineItem>
+  title: string
+}
+
+function ActivityItems(props: ActivityItemsProps) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const itemsToSend = props.itemsToSend
+  const itemsToReturn = props.itemsToReturn
+  const itemsMap = props.itemsMap
+  const title = props.title
+
+  const handleMouseEnter = () => {
+    setOpen(true)
+  }
+
+  const handleMouseLeave = () => {
+    setOpen(false)
+  }
+
+  if (!itemsToSend?.length && !itemsToReturn?.length) {
+    return
+  }
+
+  return (
+    <Popover open={open}>
+      <Popover.Trigger
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        autoFocus={false}
+      >
+        <Text size="small" leading="compact" weight="plus">
+          {title}
+        </Text>
+      </Popover.Trigger>
+
+      <Popover.Content
+        align="center"
+        side="top"
+        className="bg-ui-bg-component p-0"
+      >
+        <div className="flex flex-col">
+          {!!itemsToSend?.length && (
+            <div className="p-3">
+              <div className="txt-compact-small-plus">
+                {t("orders.activity.events.common.toSend")}
+              </div>
+
+              <div className="flex flex-col items-center">
+                {itemsToSend?.map((item) => {
+                  const originalItem = itemsMap?.get(item.item_id)!
+
+                  return (
+                    <div
+                      className="flex flex-1 items-center gap-x-3"
+                      key={item.id}
+                    >
+                      <Text size="small" className="text-ui-fg-subtle">
+                        {item.quantity}x
+                      </Text>
+
+                      <Thumbnail
+                        src={originalItem?.variant?.product?.thumbnail}
+                      />
+                      <div className="">
+                        <Text className="txt-compact-small text-ui-fg-subtle">
+                          {`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
+                        </Text>
+                      </div>
+                    </div>
+                  )
+                })}
+
+                <div className="flex flex-1 flex-row items-center gap-2"></div>
+              </div>
+            </div>
+          )}
+
+          {!!itemsToReturn?.length && (
+            <div className="border-t-2 border-dotted p-3">
+              <div className="txt-compact-small-plus">
+                {t("orders.activity.events.common.toReturn")}
+              </div>
+
+              <div className="flex flex-col items-center">
+                {itemsToReturn?.map((item) => {
+                  const originalItem = itemsMap?.get(item.item_id)!
+
+                  return (
+                    <div
+                      className="flex flex-1 items-center gap-x-3"
+                      key={item.id}
+                    >
+                      <Text size="small" className="text-ui-fg-subtle">
+                        {item.quantity}x
+                      </Text>
+
+                      <Thumbnail
+                        src={originalItem?.variant?.product?.thumbnail}
+                      />
+                      <div className="">
+                        <Text className="txt-compact-small text-ui-fg-subtle">
+                          {`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
+                        </Text>
+                      </div>
+                    </div>
+                  )
+                })}
+
+                <div className="flex flex-1 flex-row items-center gap-2"></div>
+              </div>
+            </div>
+          )}
+        </div>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+export default ActivityItems
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/order-timeline.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/order-timeline.tsx
index 4414be791dd8b..71ced05a324b4 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/order-timeline.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/order-timeline.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Text, Tooltip, clx, usePrompt, Button } from "@medusajs/ui"
+import { Button, IconButton, Text, Tooltip, clx, usePrompt } from "@medusajs/ui"
 import * as Collapsible from "@radix-ui/react-collapsible"
 
 import { PropsWithChildren, ReactNode, useMemo, useState } from "react"
@@ -14,12 +14,14 @@ import {
 } from "@medusajs/types"
 import { useTranslation } from "react-i18next"
 
+import { AdminOrderLineItem } from "@medusajs/types"
 import { useClaims } from "../../../../../hooks/api/claims"
 import { useExchanges } from "../../../../../hooks/api/exchanges"
 import { useCancelReturn, useReturns } from "../../../../../hooks/api/returns"
+import { useDate } from "../../../../../hooks/use-date"
 import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
 import { getPaymentsFromOrder } from "../order-payment-section"
-import { useDate } from "../../../../../hooks/use-date"
+import ActivityItems from "./activity-items"
 
 type OrderTimelineProps = {
   order: AdminOrder
@@ -43,6 +45,9 @@ export const OrderTimeline = ({ order }: OrderTimelineProps) => {
               title={item.title}
               timestamp={item.timestamp}
               isFirst={index === items.length - 1}
+              itemsToSend={item.itemsToSend}
+              itemsToReturn={item.itemsToReturn}
+              itemsMap={item.itemsMap}
             >
               {item.children}
             </OrderActivityItem>
@@ -64,6 +69,9 @@ export const OrderTimeline = ({ order }: OrderTimelineProps) => {
             key={index}
             title={item.title}
             timestamp={item.timestamp}
+            itemsToSend={item.itemsToSend}
+            itemsToReturn={item.itemsToReturn}
+            itemsMap={item.itemsMap}
           >
             {item.children}
           </OrderActivityItem>
@@ -74,6 +82,9 @@ export const OrderTimeline = ({ order }: OrderTimelineProps) => {
         title={firstItem.title}
         timestamp={firstItem.timestamp}
         isFirst
+        itemsToSend={firstItem.itemsToSend}
+        itemsToReturn={firstItem.itemsToReturn}
+        itemsMap={firstItem.itemsMap}
       >
         {firstItem.children}
       </OrderActivityItem>
@@ -85,10 +96,20 @@ type Activity = {
   title: string
   timestamp: string | Date
   children?: ReactNode
+  itemsToSend?: (
+    | AdminClaim["additional_items"]
+    | AdminExchange["additional_items"]
+  )[]
+  itemsToReturn?: AdminReturn["items"]
+  itemsMap?: Map<string, AdminOrderLineItem>
 }
 
-const useActivityItems = (order: AdminOrder) => {
+const useActivityItems = (order: AdminOrder): Activity[] => {
   const { t } = useTranslation()
+  const itemsMap = useMemo(
+    () => new Map(order?.items?.map((i) => [i.id, i])),
+    [order.items]
+  )
 
   const { returns = [] } = useReturns({
     order_id: order.id,
@@ -224,6 +245,8 @@ const useActivityItems = (order: AdminOrder) => {
           returnId: ret.id.slice(-7),
         }),
         timestamp: ret.created_at,
+        itemsToReturn: ret?.items,
+        itemsMap,
         children: <ReturnBody orderReturn={ret} isCreated={!ret.canceled_at} />,
       })
 
@@ -242,6 +265,8 @@ const useActivityItems = (order: AdminOrder) => {
             returnId: ret.id.slice(-7),
           }),
           timestamp: ret.received_at,
+          itemsToReturn: ret?.items,
+          itemsMap,
           children: <ReturnBody orderReturn={ret} isReceived />,
         })
       }
@@ -255,6 +280,9 @@ const useActivityItems = (order: AdminOrder) => {
           claimId: claim.id.slice(-7),
         }),
         timestamp: claim.created_at,
+        itemsToSend: claim.additional_items,
+        itemsToReturn: claimReturn?.items,
+        itemsMap,
         children: <ClaimBody claim={claim} claimReturn={claimReturn} />,
       })
     }
@@ -267,6 +295,9 @@ const useActivityItems = (order: AdminOrder) => {
           exchangeId: exchange.id.slice(-7),
         }),
         timestamp: exchange.created_at,
+        itemsToSend: exchange.additional_items,
+        itemsToReturn: exchangeReturn?.items,
+        itemsMap,
         children: (
           <ExchangeBody exchange={exchange} exchangeReturn={exchangeReturn} />
         ),
@@ -310,6 +341,11 @@ type OrderActivityItemProps = PropsWithChildren<{
   title: string
   timestamp: string | Date
   isFirst?: boolean
+  itemsToSend?:
+    | AdminClaim["additional_items"]
+    | AdminExchange["additional_items"]
+  itemsToReturn?: AdminReturn["items"]
+  itemsMap?: Map<string, AdminOrderLineItem>
 }>
 
 const OrderActivityItem = ({
@@ -317,6 +353,9 @@ const OrderActivityItem = ({
   timestamp,
   isFirst = false,
   children,
+  itemsToSend,
+  itemsToReturn,
+  itemsMap,
 }: OrderActivityItemProps) => {
   const { getFullDate, getRelativeDate } = useDate()
 
@@ -336,9 +375,19 @@ const OrderActivityItem = ({
         })}
       >
         <div className="flex items-center justify-between">
-          <Text size="small" leading="compact" weight="plus">
-            {title}
-          </Text>
+          {itemsToSend?.length || itemsToReturn?.length ? (
+            <ActivityItems
+              key={title}
+              title={title}
+              itemsToSend={itemsToSend}
+              itemsToReturn={itemsToReturn}
+              itemsMap={itemsMap}
+            />
+          ) : (
+            <Text size="small" leading="compact" weight="plus">
+              {title}
+            </Text>
+          )}
           {timestamp && (
             <Tooltip
               content={getFullDate({ date: timestamp, includeTime: true })}
@@ -403,6 +452,9 @@ const OrderActivityCollapsible = ({
                 key={index}
                 title={item.title}
                 timestamp={item.timestamp}
+                itemsToSend={item.itemsToSend}
+                itemsToReturn={item.itemsToReturn}
+                itemsMap={item.itemsMap}
               >
                 {item.children}
               </OrderActivityItem>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
index d2d55ca3f999b..61f6e1b907a30 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
@@ -191,13 +191,29 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
               <ButtonMenu
                 groups={[
                   {
-                    actions: receivableReturns.map((r) => ({
-                      label: t("orders.returns.receive.receive", {
-                        label: `#${r.id.slice(-7)}`,
-                      }),
-                      icon: <ArrowLongRight />,
-                      to: `/orders/${order.id}/returns/${r.id}/receive`,
-                    })),
+                    actions: receivableReturns.map((r) => {
+                      let id = r.id
+                      let returnType = "Return"
+
+                      if (r.exchange_id) {
+                        id = r.exchange_id
+                        returnType = "Exchange"
+                      }
+
+                      if (r.claim_id) {
+                        id = r.claim_id
+                        returnType = "Claim"
+                      }
+
+                      return {
+                        label: t("orders.returns.receive.receiveItems", {
+                          id: `#${id.slice(-7)}`,
+                          returnType,
+                        }),
+                        icon: <ArrowLongRight />,
+                        to: `/orders/${order.id}/returns/${r.id}/receive`,
+                      }
+                    }),
                   },
                 ]}
               >
@@ -640,6 +656,7 @@ const ClaimBreakdown = ({
       >
         <div className="flex items-center gap-2">
           <ArrowDownRightMini className="text-ui-fg-muted" />
+
           <Text>
             {t(`orders.claims.outboundItemAdded`, {
               itemsCount: items.reduce(
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx
index 4ab1be45db12b..0b6c2ae6a2e43 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx
@@ -34,6 +34,22 @@ export const OrderDetail = () => {
       initialData,
     }
   )
+
+  // TODO: Retrieve endpoints don't have an order ability, so a JS sort until this is available
+  if (order) {
+    order.items = order.items.sort((itemA, itemB) => {
+      if (itemA.created_at > itemB.created_at) {
+        return 1
+      }
+
+      if (itemA.created_at < itemB.created_at) {
+        return -1
+      }
+
+      return 0
+    })
+  }
+
   const { order: orderPreview, isLoading: isPreviewLoading } = useOrderPreview(
     id!
   )
diff --git a/packages/core/js-sdk/src/admin/order.ts b/packages/core/js-sdk/src/admin/order.ts
index b15f2479a5c9c..49ddfe07a272b 100644
--- a/packages/core/js-sdk/src/admin/order.ts
+++ b/packages/core/js-sdk/src/admin/order.ts
@@ -31,6 +31,7 @@ export class Order {
     return await this.client.fetch<HttpTypes.AdminOrderPreviewResponse>(
       `/admin/orders/${id}/preview`,
       {
+        query,
         headers,
       }
     )
diff --git a/packages/core/types/src/http/order/admin/entities.ts b/packages/core/types/src/http/order/admin/entities.ts
index f55555844b27b..8af116a4359eb 100644
--- a/packages/core/types/src/http/order/admin/entities.ts
+++ b/packages/core/types/src/http/order/admin/entities.ts
@@ -14,6 +14,8 @@ export interface AdminOrder extends BaseOrder {
   fulfillments?: BaseOrderFulfillment[]
 }
 
+export interface AdminOrderLineItem extends BaseOrderLineItem {}
+
 export interface AdminOrderFulfillment extends BaseOrderFulfillment {}
 
 export interface AdminOrderLineItem extends BaseOrderLineItem {}

From afd6fdcdf6cf5d597aacdf31fa6272da10b7c419 Mon Sep 17 00:00:00 2001
From: Alexander Nortung <alexander.nortung@oakdigital.dk>
Date: Wed, 28 Aug 2024 11:13:03 +0200
Subject: [PATCH 2/5] fix: product category types (#8833)

---
 packages/core/types/src/http/product-category/common.ts | 3 ++-
 packages/modules/product/src/models/product-category.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/core/types/src/http/product-category/common.ts b/packages/core/types/src/http/product-category/common.ts
index cd747d8af3111..86d0f67f6a8e5 100644
--- a/packages/core/types/src/http/product-category/common.ts
+++ b/packages/core/types/src/http/product-category/common.ts
@@ -14,6 +14,7 @@ export interface BaseProductCategory {
   parent_category: BaseProductCategory | null
   category_children: BaseProductCategory[]
   products?: BaseProduct[]
+  metadata?: Record<string, unknown> | null
   created_at: string
   updated_at: string
   deleted_at: string | null
@@ -21,7 +22,7 @@ export interface BaseProductCategory {
 
 export interface BaseProductCategoryListParams
   extends FindParams,
-    BaseFilterable<BaseProductCategoryListParams> {
+  BaseFilterable<BaseProductCategoryListParams> {
   q?: string
   id?: string | string[]
   name?: string | string[]
diff --git a/packages/modules/product/src/models/product-category.ts b/packages/modules/product/src/models/product-category.ts
index a7a993dba8c55..3736c3dd1f43f 100644
--- a/packages/modules/product/src/models/product-category.ts
+++ b/packages/modules/product/src/models/product-category.ts
@@ -113,7 +113,7 @@ class ProductCategory {
   deleted_at?: Date
 
   @Property({ columnType: "jsonb", nullable: true })
-  metadata?: Record<string, unknown> | null
+  metadata: Record<string, unknown> | null = null
 
   @ManyToMany(() => Product, (product) => product.categories)
   products = new Collection<Product>(this)

From 8f8e2f5a65c2ddb55b8f368b51990d1aec990b32 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 28 Aug 2024 12:16:30 +0300
Subject: [PATCH 3/5] fix(medusa): use correct request type for create cart API
 route (#8820)

---
 packages/medusa/src/api/store/carts/route.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/medusa/src/api/store/carts/route.ts b/packages/medusa/src/api/store/carts/route.ts
index 7dfbafec3385a..c50229f42c279 100644
--- a/packages/medusa/src/api/store/carts/route.ts
+++ b/packages/medusa/src/api/store/carts/route.ts
@@ -11,7 +11,7 @@ import {
 import { refetchCart } from "./helpers"
 
 export const POST = async (
-  req: AuthenticatedMedusaRequest<CreateCartWorkflowInputDTO & AdditionalData>,
+  req: AuthenticatedMedusaRequest<HttpTypes.StoreCreateCart & AdditionalData>,
   res: MedusaResponse<HttpTypes.StoreCartResponse>
 ) => {
   const workflowInput = {
@@ -20,7 +20,7 @@ export const POST = async (
   }
 
   const { result } = await createCartWorkflow(req.scope).run({
-    input: workflowInput,
+    input: workflowInput as CreateCartWorkflowInputDTO,
   })
 
   const cart = await refetchCart(

From af6d43f0f051eb278c042f005bc8c56bf442a119 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 28 Aug 2024 12:54:35 +0300
Subject: [PATCH 4/5] docs-util: fix for product type schemas (#8837)

---
 .../packages/docs-generator/src/classes/helpers/oas-schema.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/utils/packages/docs-generator/src/classes/helpers/oas-schema.ts b/www/utils/packages/docs-generator/src/classes/helpers/oas-schema.ts
index bab0ab2ef6a46..b79ef75eb3da0 100644
--- a/www/utils/packages/docs-generator/src/classes/helpers/oas-schema.ts
+++ b/www/utils/packages/docs-generator/src/classes/helpers/oas-schema.ts
@@ -272,7 +272,7 @@ class OasSchemaHelper {
     return name
       .replace("DTO", "")
       .replace(this.schemaRefPrefix, "")
-      .replace(/(?<!Type)Type$/, "")
+      .replace(/(?<!AdminProduct)Type$/, "")
   }
 
   /**

From dbe931ab00a262a53988be9fe7b61fb9e70f60b2 Mon Sep 17 00:00:00 2001
From: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
Date: Wed, 28 Aug 2024 13:07:06 +0200
Subject: [PATCH 5/5] feat(js-sdk): Add API key (#8838)

* feat(js-sdk): Add API key

* address PR comments

* Allow params to create + update
---
 .../dashboard/src/hooks/api/api-keys.tsx      | 72 ++++++++------
 .../dashboard/src/lib/client/api-keys.ts      | 63 ------------
 .../dashboard/src/lib/client/client.ts        |  2 -
 .../api-key-sales-channel-section.tsx         | 56 +++++------
 .../api-key-management-detail/loader.ts       |  4 +-
 .../use-api-key-management-table-query.tsx    |  4 +-
 .../api-key-sales-channels-form.tsx           | 31 +++---
 packages/core/js-sdk/src/admin/api-key.ts     | 99 +++++++++++++++++++
 packages/core/js-sdk/src/admin/index.ts       |  5 +-
 .../types/src/http/api-key/admin/index.ts     |  2 +
 .../types/src/http/api-key/admin/payloads.ts  | 14 +++
 .../types/src/http/api-key/admin/queries.ts   | 19 ++++
 .../src/api/admin/api-keys/validators.ts      |  1 +
 13 files changed, 223 insertions(+), 149 deletions(-)
 delete mode 100644 packages/admin-next/dashboard/src/lib/client/api-keys.ts
 create mode 100644 packages/core/js-sdk/src/admin/api-key.ts
 create mode 100644 packages/core/types/src/http/api-key/admin/payloads.ts
 create mode 100644 packages/core/types/src/http/api-key/admin/queries.ts

diff --git a/packages/admin-next/dashboard/src/hooks/api/api-keys.tsx b/packages/admin-next/dashboard/src/hooks/api/api-keys.tsx
index 0cdacb0725ffe..c9fdf8d2bc369 100644
--- a/packages/admin-next/dashboard/src/hooks/api/api-keys.tsx
+++ b/packages/admin-next/dashboard/src/hooks/api/api-keys.tsx
@@ -1,4 +1,5 @@
-import { AdminApiKeyListResponse, AdminApiKeyResponse } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
+import { FetchError } from "@medusajs/js-sdk"
 import {
   MutationOptions,
   QueryKey,
@@ -7,11 +8,9 @@ import {
   useMutation,
   useQuery,
 } from "@tanstack/react-query"
-import { client } from "../../lib/client"
+import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
-import { CreateApiKeyReq, UpdateApiKeyReq } from "../../types/api-payloads"
-import { ApiKeyDeleteRes } from "../../types/api-responses"
 import { salesChannelsQueryKeys } from "./sales-channels"
 
 const API_KEYS_QUERY_KEY = "api_keys" as const
@@ -19,14 +18,18 @@ export const apiKeysQueryKeys = queryKeysFactory(API_KEYS_QUERY_KEY)
 
 export const useApiKey = (
   id: string,
-  query?: Record<string, any>,
   options?: Omit<
-    UseQueryOptions<AdminApiKeyResponse, Error, AdminApiKeyResponse, QueryKey>,
+    UseQueryOptions<
+      HttpTypes.AdminApiKeyResponse,
+      FetchError,
+      HttpTypes.AdminApiKeyResponse,
+      QueryKey
+    >,
     "queryKey" | "queryFn"
   >
 ) => {
   const { data, ...rest } = useQuery({
-    queryFn: () => client.apiKeys.retrieve(id, query),
+    queryFn: () => sdk.admin.apiKey.retrieve(id),
     queryKey: apiKeysQueryKeys.detail(id),
     ...options,
   })
@@ -35,19 +38,19 @@ export const useApiKey = (
 }
 
 export const useApiKeys = (
-  query?: Record<string, any>,
+  query?: HttpTypes.AdminGetApiKeysParams,
   options?: Omit<
     UseQueryOptions<
-      AdminApiKeyListResponse,
-      Error,
-      AdminApiKeyListResponse,
+      HttpTypes.AdminGetApiKeysParams,
+      FetchError,
+      HttpTypes.AdminApiKeyListResponse,
       QueryKey
     >,
     "queryKey" | "queryFn"
   >
 ) => {
   const { data, ...rest } = useQuery({
-    queryFn: () => client.apiKeys.list(query),
+    queryFn: () => sdk.admin.apiKey.list(query),
     queryKey: apiKeysQueryKeys.list(query),
     ...options,
   })
@@ -56,10 +59,14 @@ export const useApiKeys = (
 }
 
 export const useCreateApiKey = (
-  options?: UseMutationOptions<AdminApiKeyResponse, Error, CreateApiKeyReq>
+  options?: UseMutationOptions<
+    HttpTypes.AdminApiKeyResponse,
+    FetchError,
+    HttpTypes.AdminCreateApiKey
+  >
 ) => {
   return useMutation({
-    mutationFn: (payload) => client.apiKeys.create(payload),
+    mutationFn: (payload) => sdk.admin.apiKey.create(payload),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.lists() })
 
@@ -71,10 +78,14 @@ export const useCreateApiKey = (
 
 export const useUpdateApiKey = (
   id: string,
-  options?: UseMutationOptions<AdminApiKeyResponse, Error, UpdateApiKeyReq>
+  options?: UseMutationOptions<
+    HttpTypes.AdminApiKeyResponse,
+    FetchError,
+    HttpTypes.AdminUpdateApiKey
+  >
 ) => {
   return useMutation({
-    mutationFn: (payload) => client.apiKeys.update(id, payload),
+    mutationFn: (payload) => sdk.admin.apiKey.update(id, payload),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.lists() })
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.detail(id) })
@@ -87,10 +98,10 @@ export const useUpdateApiKey = (
 
 export const useRevokeApiKey = (
   id: string,
-  options?: UseMutationOptions<AdminApiKeyResponse, Error, void>
+  options?: UseMutationOptions<HttpTypes.AdminApiKeyResponse, FetchError, void>
 ) => {
   return useMutation({
-    mutationFn: () => client.apiKeys.revoke(id),
+    mutationFn: () => sdk.admin.apiKey.revoke(id),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.lists() })
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.detail(id) })
@@ -102,10 +113,14 @@ export const useRevokeApiKey = (
 
 export const useDeleteApiKey = (
   id: string,
-  options?: MutationOptions<ApiKeyDeleteRes, Error, void>
+  options?: MutationOptions<
+    HttpTypes.DeleteResponse<"api_key">,
+    FetchError,
+    void
+  >
 ) => {
   return useMutation({
-    mutationFn: () => client.apiKeys.delete(id),
+    mutationFn: () => sdk.admin.apiKey.delete(id),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.lists() })
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.detail(id) })
@@ -118,14 +133,14 @@ export const useDeleteApiKey = (
 export const useBatchRemoveSalesChannelsFromApiKey = (
   id: string,
   options?: UseMutationOptions<
-    AdminApiKeyResponse,
-    Error,
-    { sales_channel_ids: string[] }
+    HttpTypes.AdminApiKeyResponse,
+    FetchError,
+    HttpTypes.AdminBatchLink["remove"]
   >
 ) => {
   return useMutation({
     mutationFn: (payload) =>
-      client.apiKeys.batchRemoveSalesChannels(id, payload),
+      sdk.admin.apiKey.batchSalesChannels(id, { remove: payload }),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.lists() })
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.detail(id) })
@@ -142,13 +157,14 @@ export const useBatchRemoveSalesChannelsFromApiKey = (
 export const useBatchAddSalesChannelsToApiKey = (
   id: string,
   options?: UseMutationOptions<
-    AdminApiKeyResponse,
-    Error,
-    { sales_channel_ids: string[] }
+    HttpTypes.AdminApiKeyResponse,
+    FetchError,
+    HttpTypes.AdminBatchLink["add"]
   >
 ) => {
   return useMutation({
-    mutationFn: (payload) => client.apiKeys.batchAddSalesChannels(id, payload),
+    mutationFn: (payload) =>
+      sdk.admin.apiKey.batchSalesChannels(id, { add: payload }),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.lists() })
       queryClient.invalidateQueries({ queryKey: apiKeysQueryKeys.detail(id) })
diff --git a/packages/admin-next/dashboard/src/lib/client/api-keys.ts b/packages/admin-next/dashboard/src/lib/client/api-keys.ts
deleted file mode 100644
index 0dc25a2e505d9..0000000000000
--- a/packages/admin-next/dashboard/src/lib/client/api-keys.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { AdminApiKeyListResponse, AdminApiKeyResponse } from "@medusajs/types"
-import { CreateApiKeyReq, UpdateApiKeyReq } from "../../types/api-payloads"
-import { ApiKeyDeleteRes } from "../../types/api-responses"
-import { deleteRequest, getRequest, postRequest } from "./common"
-
-const retrieveApiKey = async (id: string, query?: Record<string, any>) => {
-  return getRequest<AdminApiKeyResponse>(`/admin/api-keys/${id}`, query)
-}
-
-const listApiKeys = async (query?: Record<string, any>) => {
-  return getRequest<AdminApiKeyListResponse>(`/admin/api-keys`, query)
-}
-
-const deleteApiKey = async (id: string) => {
-  return deleteRequest<ApiKeyDeleteRes>(`/admin/api-keys/${id}`)
-}
-
-const revokeApiKey = async (id: string) => {
-  return postRequest<AdminApiKeyResponse>(`/admin/api-keys/${id}/revoke`)
-}
-
-const createApiKey = async (payload: CreateApiKeyReq) => {
-  return postRequest<AdminApiKeyResponse>(`/admin/api-keys`, payload)
-}
-
-const updateApiKey = async (id: string, payload: UpdateApiKeyReq) => {
-  return postRequest<AdminApiKeyResponse>(`/admin/api-keys/${id}`, payload)
-}
-
-const batchRemoveSalesChannelsFromApiKey = async (
-  id: string,
-  payload: { sales_channel_ids: string[] }
-) => {
-  return postRequest<AdminApiKeyResponse>(
-    `/admin/api-keys/${id}/sales-channels`,
-    {
-      remove: payload.sales_channel_ids,
-    }
-  )
-}
-
-const batchAddSalesChannelsFromApiKey = async (
-  id: string,
-  payload: { sales_channel_ids: string[] }
-) => {
-  return postRequest<AdminApiKeyResponse>(
-    `/admin/api-keys/${id}/sales-channels`,
-    {
-      add: payload.sales_channel_ids,
-    }
-  )
-}
-
-export const apiKeys = {
-  retrieve: retrieveApiKey,
-  list: listApiKeys,
-  delete: deleteApiKey,
-  create: createApiKey,
-  update: updateApiKey,
-  revoke: revokeApiKey,
-  batchRemoveSalesChannels: batchRemoveSalesChannelsFromApiKey,
-  batchAddSalesChannels: batchAddSalesChannelsFromApiKey,
-}
diff --git a/packages/admin-next/dashboard/src/lib/client/client.ts b/packages/admin-next/dashboard/src/lib/client/client.ts
index a95c1619e5f44..4fce5e6232378 100644
--- a/packages/admin-next/dashboard/src/lib/client/client.ts
+++ b/packages/admin-next/dashboard/src/lib/client/client.ts
@@ -1,5 +1,4 @@
 import Medusa from "@medusajs/js-sdk"
-import { apiKeys } from "./api-keys"
 import { campaigns } from "./campaigns"
 import { categories } from "./categories"
 import { currencies } from "./currencies"
@@ -24,7 +23,6 @@ import { workflowExecutions } from "./workflow-executions"
 export const backendUrl = __BACKEND_URL__ ?? "http://localhost:9000"
 
 export const client = {
-  apiKeys: apiKeys,
   campaigns: campaigns,
   categories: categories,
   customerGroups: customerGroups,
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx
index 8a900831eab42..a42a294df7a8d 100644
--- a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx
@@ -76,24 +76,19 @@ export const ApiKeySalesChannelSection = ({
       return
     }
 
-    await mutateAsync(
-      {
-        sales_channel_ids: keys,
+    await mutateAsync(keys, {
+      onSuccess: () => {
+        toast.success(
+          t("apiKeyManagement.removeSalesChannel.successToastBatch", {
+            count: keys.length,
+          })
+        )
+        setRowSelection({})
       },
-      {
-        onSuccess: () => {
-          toast.success(
-            t("apiKeyManagement.removeSalesChannel.successToastBatch", {
-              count: keys.length,
-            })
-          )
-          setRowSelection({})
-        },
-        onError: (err) => {
-          toast.error(err.message)
-        },
-      }
-    )
+      onError: (err) => {
+        toast.error(err.message)
+      },
+    })
   }
 
   return (
@@ -167,23 +162,18 @@ const SalesChannelActions = ({
       return
     }
 
-    await mutateAsync(
-      {
-        sales_channel_ids: [salesChannel.id],
+    await mutateAsync([salesChannel.id], {
+      onSuccess: () => {
+        toast.success(
+          t("apiKeyManagement.removeSalesChannel.successToast", {
+            count: 1,
+          })
+        )
       },
-      {
-        onSuccess: () => {
-          toast.success(
-            t("apiKeyManagement.removeSalesChannel.successToast", {
-              count: 1,
-            })
-          )
-        },
-        onError: (err) => {
-          toast.error(err.message)
-        },
-      }
-    )
+      onError: (err) => {
+        toast.error(err.message)
+      },
+    })
   }
 
   return (
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/loader.ts b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/loader.ts
index 408764e5226ba..c71e023a8645c 100644
--- a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/loader.ts
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/loader.ts
@@ -2,12 +2,12 @@ import { LoaderFunctionArgs } from "react-router-dom"
 
 import { AdminApiKeyResponse } from "@medusajs/types"
 import { apiKeysQueryKeys } from "../../../hooks/api/api-keys"
-import { client } from "../../../lib/client"
+import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
 
 const apiKeyDetailQuery = (id: string) => ({
   queryKey: apiKeysQueryKeys.detail(id),
-  queryFn: async () => client.apiKeys.retrieve(id),
+  queryFn: async () => sdk.admin.apiKey.retrieve(id),
 })
 
 export const apiKeyLoader = async ({ params }: LoaderFunctionArgs) => {
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/use-api-key-management-table-query.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/use-api-key-management-table-query.tsx
index c1fc542f4365d..d741deca7339e 100644
--- a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/use-api-key-management-table-query.tsx
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/use-api-key-management-table-query.tsx
@@ -1,4 +1,4 @@
-import { GetPublishableApiKeysParams } from "@medusajs/medusa"
+import { HttpTypes } from "@medusajs/types"
 import { useQueryParams } from "../../../../../hooks/use-query-params"
 
 type UseApiKeyManagementTableQueryProps = {
@@ -17,7 +17,7 @@ export const useApiKeyManagementTableQuery = ({
 
   const { offset, created_at, updated_at, revoked_at, q, order } = queryObject
 
-  const searchParams: GetPublishableApiKeysParams = {
+  const searchParams: HttpTypes.AdminGetApiKeysParams = {
     limit: pageSize,
     offset: offset ? Number(offset) : 0,
     created_at: created_at ? JSON.parse(created_at) : undefined,
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-sales-channels/components/api-key-sales-channels-form/api-key-sales-channels-form.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-sales-channels/components/api-key-sales-channels-form/api-key-sales-channels-form.tsx
index 4b8f23f0a609f..a519cb821ae7d 100644
--- a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-sales-channels/components/api-key-sales-channels-form/api-key-sales-channels-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-sales-channels/components/api-key-sales-channels-form/api-key-sales-channels-form.tsx
@@ -96,25 +96,20 @@ export const ApiKeySalesChannelsForm = ({
   })
 
   const handleSubmit = form.handleSubmit(async (values) => {
-    await mutateAsync(
-      {
-        sales_channel_ids: values.sales_channel_ids,
+    await mutateAsync(values.sales_channel_ids, {
+      onSuccess: () => {
+        toast.success(
+          t("apiKeyManagement.salesChannels.successToast", {
+            count: values.sales_channel_ids.length,
+          })
+        )
+
+        handleSuccess()
       },
-      {
-        onSuccess: () => {
-          toast.success(
-            t("apiKeyManagement.salesChannels.successToast", {
-              count: values.sales_channel_ids.length,
-            })
-          )
-
-          handleSuccess()
-        },
-        onError: (err) => {
-          toast.error(err.message)
-        },
-      }
-    )
+      onError: (err) => {
+        toast.error(err.message)
+      },
+    })
   })
 
   return (
diff --git a/packages/core/js-sdk/src/admin/api-key.ts b/packages/core/js-sdk/src/admin/api-key.ts
new file mode 100644
index 0000000000000..8f481fa42b06a
--- /dev/null
+++ b/packages/core/js-sdk/src/admin/api-key.ts
@@ -0,0 +1,99 @@
+import { HttpTypes, PaginatedResponse } from "@medusajs/types"
+import { Client } from "../client"
+import { ClientHeaders } from "../types"
+
+export class ApiKey {
+  private client: Client
+  constructor(client: Client) {
+    this.client = client
+  }
+
+  async list(
+    queryParams?: HttpTypes.AdminGetApiKeysParams,
+    headers?: ClientHeaders
+  ) {
+    return await this.client.fetch<
+      PaginatedResponse<HttpTypes.AdminApiKeyListResponse>
+    >(`/admin/api-keys`, {
+      query: queryParams,
+      headers,
+    })
+  }
+
+  async create(
+    body: HttpTypes.AdminCreateApiKey,
+    query?: HttpTypes.AdminGetApiKeysParams,
+    headers?: ClientHeaders
+  ) {
+    return await this.client.fetch<HttpTypes.AdminApiKeyResponse>(
+      `/admin/api-keys`,
+      {
+        method: "POST",
+        headers,
+        body,
+        query,
+      }
+    )
+  }
+
+  async revoke(id: string, headers?: ClientHeaders) {
+    return await this.client.fetch<HttpTypes.AdminApiKeyResponse>(
+      `/admin/api-keys/${id}`,
+      {
+        method: "DELETE",
+        headers,
+      }
+    )
+  }
+
+  async retrieve(id: string, headers?: ClientHeaders) {
+    return await this.client.fetch<HttpTypes.AdminApiKeyResponse>(
+      `/admin/api-keys/${id}`,
+      {
+        headers,
+      }
+    )
+  }
+
+  async update(
+    id: string,
+    body: HttpTypes.AdminUpdateApiKey,
+    query?: HttpTypes.AdminGetApiKeysParams,
+    headers?: ClientHeaders
+  ) {
+    return await this.client.fetch<HttpTypes.AdminApiKeyResponse>(
+      `/admin/api-keys/${id}`,
+      {
+        method: "POST",
+        headers,
+        body,
+        query,
+      }
+    )
+  }
+
+  async delete(id: string, headers?: ClientHeaders) {
+    return await this.client.fetch<HttpTypes.DeleteResponse<"api_key">>(
+      `/admin/api-keys/${id}`,
+      {
+        method: "DELETE",
+        headers,
+      }
+    )
+  }
+
+  async batchSalesChannels(
+    id: string,
+    body: HttpTypes.AdminBatchLink,
+    headers?: ClientHeaders
+  ) {
+    return await this.client.fetch<HttpTypes.AdminApiKeyResponse>(
+      `/admin/api-keys/${id}/sales-channels`,
+      {
+        method: "POST",
+        headers,
+        body,
+      }
+    )
+  }
+}
diff --git a/packages/core/js-sdk/src/admin/index.ts b/packages/core/js-sdk/src/admin/index.ts
index 25323f6252c4b..1600ab2b82d2e 100644
--- a/packages/core/js-sdk/src/admin/index.ts
+++ b/packages/core/js-sdk/src/admin/index.ts
@@ -1,4 +1,5 @@
 import { Client } from "../client"
+import { ApiKey } from "./api-key"
 import { Claim } from "./claim"
 import { Currency } from "./currency"
 import { Customer } from "./customer"
@@ -10,6 +11,7 @@ import { InventoryItem } from "./inventory-item"
 import { Invite } from "./invite"
 import { Notification } from "./notification"
 import { Order } from "./order"
+import { OrderEdit } from "./order-edit"
 import { Payment } from "./payment"
 import { PaymentCollection } from "./payment-collection"
 import { PriceList } from "./price-list"
@@ -33,7 +35,6 @@ import { TaxRate } from "./tax-rate"
 import { TaxRegion } from "./tax-region"
 import { Upload } from "./upload"
 import { User } from "./user"
-import { OrderEdit } from "./order-edit"
 
 export class Admin {
   public invite: Invite
@@ -71,6 +72,7 @@ export class Admin {
   public productVariant: ProductVariant
   public refundReason: RefundReason
   public paymentCollection: PaymentCollection
+  public apiKey: ApiKey
 
   constructor(client: Client) {
     this.invite = new Invite(client)
@@ -108,5 +110,6 @@ export class Admin {
     this.refundReason = new RefundReason(client)
     this.exchange = new Exchange(client)
     this.paymentCollection = new PaymentCollection(client)
+    this.apiKey = new ApiKey(client)
   }
 }
diff --git a/packages/core/types/src/http/api-key/admin/index.ts b/packages/core/types/src/http/api-key/admin/index.ts
index 277e32269126b..cfa3aa8953454 100644
--- a/packages/core/types/src/http/api-key/admin/index.ts
+++ b/packages/core/types/src/http/api-key/admin/index.ts
@@ -1 +1,3 @@
 export * from "./api-key"
+export * from "./payloads"
+export * from "./queries"
diff --git a/packages/core/types/src/http/api-key/admin/payloads.ts b/packages/core/types/src/http/api-key/admin/payloads.ts
new file mode 100644
index 0000000000000..cd2f8e7a30533
--- /dev/null
+++ b/packages/core/types/src/http/api-key/admin/payloads.ts
@@ -0,0 +1,14 @@
+import { ApiKeyType } from "../../../api-key"
+
+export interface AdminCreateApiKey {
+  title: string
+  type: ApiKeyType
+}
+
+export interface AdminUpdateApiKey {
+  title: string
+}
+
+export interface AdminRevokeApiKey {
+  revoke_in?: number
+}
diff --git a/packages/core/types/src/http/api-key/admin/queries.ts b/packages/core/types/src/http/api-key/admin/queries.ts
new file mode 100644
index 0000000000000..dea17f93a05d5
--- /dev/null
+++ b/packages/core/types/src/http/api-key/admin/queries.ts
@@ -0,0 +1,19 @@
+import { ApiKeyType } from "../../../api-key"
+import { BaseFilterable, OperatorMap } from "../../../dal"
+import { FindParams } from "../../common"
+
+export interface AdminGetApiKeysParams
+  extends FindParams,
+    BaseFilterable<AdminGetApiKeysParams> {
+  q?: string
+  id?: string | string[]
+  title?: string | string[]
+  token?: string | string[]
+  type?: ApiKeyType
+  created_at?: OperatorMap<string>
+  updated_at?: OperatorMap<string>
+  deleted_at?: OperatorMap<string>
+  revoked_at?: OperatorMap<string>
+  $and?: AdminGetApiKeysParams[]
+  $or?: AdminGetApiKeysParams[]
+}
diff --git a/packages/medusa/src/api/admin/api-keys/validators.ts b/packages/medusa/src/api/admin/api-keys/validators.ts
index 7b437a5e19230..89234513310d9 100644
--- a/packages/medusa/src/api/admin/api-keys/validators.ts
+++ b/packages/medusa/src/api/admin/api-keys/validators.ts
@@ -22,6 +22,7 @@ export const AdminGetApiKeysParams = createFindParams({
     created_at: createOperatorMap().optional(),
     updated_at: createOperatorMap().optional(),
     deleted_at: createOperatorMap().optional(),
+    revoked_at: createOperatorMap().optional(),
     $and: z.lazy(() => AdminGetApiKeysParams.array()).optional(),
     $or: z.lazy(() => AdminGetApiKeysParams.array()).optional(),
   })