feat(dashboard,core-flows,js-sdk,types,link-modules,payment): ability…

… to copy payment link (#8630)

what: 

- enables a button to create a payment link when a payment delta is present
- api to delete order payment collection
- adds a pending amount to payment collections

Note: Not the happiest with the decision on when to create a payment collection and when not to. The code should programatically create or delete payment collections currently to generate the right collection for the payment delta. Adding a more specific flow to create and manage a payment collection will help reduce this burden from the code path and onto CX/merchant.

Another issue I found is that the payment collection status doesn't get updated when payment is complete as it still gets stuck to "authorized" state

https://github.com/user-attachments/assets/037a10f9-3621-43c2-94ba-1ada4b0a041b

integration-tests/http/__tests__/claims/claims.spec.ts

@@ -721,7 +721,7 @@ medusaIntegrationTestRunner({
         })
 
         it("should create a payment collection successfully and throw on multiple", async () => {
-          const paymentDelta = 110.5
+          const paymentDelta = 171.5
 
           const paymentCollection = (
             await api.post(
@@ -752,6 +752,19 @@ medusaIntegrationTestRunner({
             message:
               "Active payment collections were found. Complete existing ones or delete them before proceeding.",
           })
+
+          const deleted = (
+            await api.delete(
+              `/admin/payment-collections/${paymentCollection.id}`,
+              adminHeaders
+            )
+          ).data
+
+          expect(deleted).toEqual({
+            id: expect.any(String),
+            object: "payment-collection",
+            deleted: true,
+          })
         })
       })
 

packages/admin-next/dashboard/src/hooks/api/index.ts

@@ -13,6 +13,7 @@ export * from "./inventory"
 export * from "./invites"
 export * from "./notification"
 export * from "./orders"
+export * from "./payment-collections"
 export * from "./payments"
 export * from "./price-lists"
 export * from "./product-types"

packages/admin-next/dashboard/src/hooks/api/orders.tsx

@@ -89,6 +89,11 @@ export const useCreateOrderFulfillment = (
       queryClient.invalidateQueries({
         queryKey: ordersQueryKeys.details(),
       })
+
+      queryClient.invalidateQueries({
+        queryKey: ordersQueryKeys.preview(orderId),
+      })
+
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
@@ -107,6 +112,11 @@ export const useCancelOrderFulfillment = (
       queryClient.invalidateQueries({
         queryKey: ordersQueryKeys.details(),
       })
+
+      queryClient.invalidateQueries({
+        queryKey: ordersQueryKeys.preview(orderId),
+      })
+
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
@@ -129,25 +139,27 @@ export const useCreateOrderShipment = (
       queryClient.invalidateQueries({
         queryKey: ordersQueryKeys.details(),
       })
+
+      queryClient.invalidateQueries({
+        queryKey: ordersQueryKeys.preview(orderId),
+      })
+
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
   })
 }
 
 export const useCancelOrder = (
-  orderId: string,
   options?: UseMutationOptions<any, Error, any>
 ) => {
   return useMutation({
-    mutationFn: () => sdk.admin.order.cancel(orderId),
+    mutationFn: (id) => sdk.admin.order.cancel(id),
     onSuccess: (data: any, variables: any, context: any) => {
       queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.details(),
-      })
-      queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.lists(),
+        queryKey: ordersQueryKeys.all,
       })
+
       options?.onSuccess?.(data, variables, context)
     },
     ...options,

packages/admin-next/dashboard/src/hooks/api/payment-collections.tsx

@@ -0,0 +1,63 @@
+import { FetchError } from "@medusajs/js-sdk"
+import { HttpTypes } from "@medusajs/types"
+import { useMutation, UseMutationOptions } from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+import { queryClient } from "../../lib/query-client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import { ordersQueryKeys } from "./orders"
+
+const PAYMENT_COLLECTION_QUERY_KEY = "payment-collection" as const
+export const paymentCollectionQueryKeys = queryKeysFactory(
+  PAYMENT_COLLECTION_QUERY_KEY
+)
+
+export const useCreatePaymentCollection = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminPaymentCollectionResponse,
+    Error,
+    HttpTypes.AdminCreatePaymentCollection
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.paymentCollection.create(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: ordersQueryKeys.all,
+      })
+
+      queryClient.invalidateQueries({
+        queryKey: paymentCollectionQueryKeys.all,
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeletePaymentCollection = (
+  options?: Omit<
+    UseMutationOptions<
+      HttpTypes.AdminDeletePaymentCollectionResponse,
+      FetchError,
+      string
+    >,
+    "mutationFn"
+  >
+) => {
+  return useMutation({
+    mutationFn: (id: string) => sdk.admin.paymentCollection.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: ordersQueryKeys.all,
+      })
+
+      queryClient.invalidateQueries({
+        queryKey: paymentCollectionQueryKeys.all,
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

packages/admin-next/dashboard/src/hooks/api/payments.tsx

@@ -70,11 +70,7 @@ export const useCapturePayment = (
     mutationFn: (payload) => sdk.admin.payment.capture(paymentId, payload),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.details(),
-      })
-
-      queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.lists(),
+        queryKey: ordersQueryKeys.all,
       })
 
       options?.onSuccess?.(data, variables, context)
@@ -95,11 +91,7 @@ export const useRefundPayment = (
     mutationFn: (payload) => sdk.admin.payment.refund(paymentId, payload),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.details(),
-      })
-
-      queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.lists(),
+        queryKey: ordersQueryKeys.all,
       })
 
       options?.onSuccess?.(data, variables, context)

packages/admin-next/dashboard/src/hooks/api/refund-reasons.tsx

@@ -4,7 +4,7 @@ import { sdk } from "../../lib/client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 
 const REFUND_REASON_QUERY_KEY = "refund-reason" as const
-export const paymentQueryKeys = queryKeysFactory(REFUND_REASON_QUERY_KEY)
+export const refundReasonQueryKeys = queryKeysFactory(REFUND_REASON_QUERY_KEY)
 
 export const useRefundReasons = (
   query?: HttpTypes.RefundReasonFilters,

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -830,7 +830,9 @@
       "capturePaymentSuccess": "Payment of {{amount}} successfully captured",
       "createRefund": "Create Refund",
       "refundPaymentSuccess": "Refund of amount {{amount}} successful",
-      "createRefundWrongQuantity": "Quantity should be a number between 1 and {{number}}"
+      "createRefundWrongQuantity": "Quantity should be a number between 1 and {{number}}",
+      "refundAmount": "Refund {{ amount }}",
+      "paymentLink": "Copy payment link for {{ amount }}"
     },
 
     "edits": {

packages/admin-next/dashboard/src/lib/payment.ts

@@ -10,3 +10,12 @@ export const getTotalCaptured = (
         (paymentCollection.refunded_amount as number))
     return acc
   }, 0)
+
+export const getTotalPending = (paymentCollections: AdminPaymentCollection[]) =>
+  paymentCollections.reduce((acc, paymentCollection) => {
+    acc +=
+      (paymentCollection.amount as number) -
+      (paymentCollection.captured_amount as number)
+
+    return acc
+  }, 0)

packages/admin-next/dashboard/src/routes/orders/order-create-fulfillment/components/order-create-fulfillment-form/order-create-fulfillment-form.tsx

@@ -7,6 +7,7 @@ import { AdminOrder } from "@medusajs/types"
 import { Alert, Button, Select, Switch, toast } from "@medusajs/ui"
 import { useForm, useWatch } from "react-hook-form"
 
+import { OrderLineItemDTO } from "@medusajs/types"
 import { Form } from "../../../../../components/common/form"
 import {
   RouteFocusModal,
@@ -118,8 +119,18 @@ export function OrderCreateFulfillmentForm({
 
     if (itemsToFulfill?.length) {
       setFulfillableItems(itemsToFulfill)
+
+      const quantityMap = fulfillableItems.reduce(
+        (acc, item) => {
+          acc[item.id] = getFulfillableQuantity(item as OrderLineItemDTO)
+          return acc
+        },
+        {} as Record<string, number>
+      )
+
+      form.setValue("quantity", quantityMap)
     }
-  }, [order.items])
+  }, [order.items?.length])
 
   return (
     <RouteFocusModal.Form form={form}>

packages/admin-next/dashboard/src/routes/orders/order-create-shipment/components/order-create-shipment-form/order-create-shipment-form.tsx

@@ -11,8 +11,8 @@ import {
   RouteFocusModal,
   useRouteModal,
 } from "../../../../../components/modals"
-import { CreateShipmentSchema } from "./constants"
 import { useCreateOrderShipment } from "../../../../../hooks/api"
+import { CreateShipmentSchema } from "./constants"
 
 type OrderCreateFulfillmentFormProps = {
   order: AdminOrder
@@ -27,7 +27,7 @@ export function OrderCreateShipmentForm({
   const { handleSuccess } = useRouteModal()
 
   const { mutateAsync: createShipment, isPending: isMutating } =
-    useCreateOrderShipment(order.id, fulfillment.id)
+    useCreateOrderShipment(order.id, fulfillment?.id)
 
   const form = useForm<zod.infer<typeof CreateShipmentSchema>>({
     defaultValues: {
@@ -44,7 +44,7 @@ export function OrderCreateShipmentForm({
   const handleSubmit = form.handleSubmit(async (data) => {
     await createShipment(
       {
-        items: fulfillment.items.map((i) => ({
+        items: fulfillment?.items?.map((i) => ({
           id: i.line_item_id,
           quantity: i.quantity,
         })),