feat(core-flows): create or update payment collections in RMA flows (#8676)

* feat(core-flows): create or update payment collections in RMA flows

* chore: change ui to pick payment link from unpaid payment collection

* Apply suggestions from code review

Co-authored-by: Carlos R. L. Rodrigues <37986729+carlos-r-l-rodrigues@users.noreply.github.com>

* chore: fix mathbn

---------

Co-authored-by: Carlos R. L. Rodrigues <37986729+carlos-r-l-rodrigues@users.noreply.github.com>

packages/admin-next/dashboard/src/routes/orders/order-detail/components/copy-payment-link/copy-payment-link.tsx

@@ -1,18 +1,15 @@
 import { CheckCircleSolid, SquareTwoStack } from "@medusajs/icons"
-import { AdminOrder } from "@medusajs/types"
-import { Button, toast, Tooltip } from "@medusajs/ui"
+import { AdminOrder, AdminPaymentCollection } from "@medusajs/types"
+import { Button, Tooltip } from "@medusajs/ui"
 import copy from "copy-to-clipboard"
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
-import {
-  useCreatePaymentCollection,
-  useDeletePaymentCollection,
-} from "../../../../../hooks/api"
 import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
 
 export const MEDUSA_BACKEND_URL = __STOREFRONT_URL__ ?? "http://localhost:8000"
 
 type CopyPaymentLinkProps = {
+  paymentCollection: AdminPaymentCollection
   order: AdminOrder
 }
 
@@ -20,18 +17,11 @@ type CopyPaymentLinkProps = {
  * This component is based on the `button` element and supports all of its props
  */
 const CopyPaymentLink = React.forwardRef<any, CopyPaymentLinkProps>(
-  ({ order }: CopyPaymentLinkProps, ref) => {
-    const [isCreating, setIsCreating] = useState(false)
-    const [url, setUrl] = useState("")
+  ({ paymentCollection, order }: CopyPaymentLinkProps, ref) => {
     const [done, setDone] = useState(false)
     const [open, setOpen] = useState(false)
     const [text, setText] = useState("CopyPaymentLink")
     const { t } = useTranslation()
-    const { mutateAsync: createPaymentCollection } =
-      useCreatePaymentCollection()
-
-    const { mutateAsync: deletePaymentCollection } =
-      useDeletePaymentCollection()
 
     const copyToClipboard = async (
       e:
@@ -40,53 +30,11 @@ const CopyPaymentLink = React.forwardRef<any, CopyPaymentLinkProps>(
     ) => {
       e.stopPropagation()
 
-      if (!url?.length) {
-        const activePaymentCollection = order.payment_collections.find(
-          (pc) =>
-            pc.status === "not_paid" &&
-            pc.amount === order.summary?.pending_difference
-        )
-
-        if (!activePaymentCollection) {
-          setIsCreating(true)
-
-          const paymentCollectionsToDelete = order.payment_collections.filter(
-            (pc) => pc.status === "not_paid"
-          )
-
-          const promises = paymentCollectionsToDelete.map((paymentCollection) =>
-            deletePaymentCollection(paymentCollection.id)
-          )
-
-          await Promise.all(promises)
-
-          await createPaymentCollection(
-            { order_id: order.id },
-            {
-              onSuccess: (data) => {
-                setUrl(
-                  `${MEDUSA_BACKEND_URL}/payment-collection/${data.payment_collection.id}`
-                )
-              },
-              onError: (err) => {
-                toast.error(err.message)
-              },
-              onSettled: () => setIsCreating(false),
-            }
-          )
-        } else {
-          setUrl(
-            `${MEDUSA_BACKEND_URL}/payment-collection/${activePaymentCollection.id}`
-          )
-        }
-      }
-
       setDone(true)
-      copy(url)
+      copy(`${MEDUSA_BACKEND_URL}/payment-collection/${paymentCollection.id}`)
 
       setTimeout(() => {
         setDone(false)
-        setUrl("")
       }, 2000)
     }
 
@@ -109,7 +57,6 @@ const CopyPaymentLink = React.forwardRef<any, CopyPaymentLinkProps>(
           size="small"
           aria-label="CopyPaymentLink code snippet"
           onClick={copyToClipboard}
-          isLoading={isCreating}
         >
           {done ? (
             <CheckCircleSolid className="inline" />
@@ -118,7 +65,7 @@ const CopyPaymentLink = React.forwardRef<any, CopyPaymentLinkProps>(
           )}
           {t("orders.payment.paymentLink", {
             amount: getStylizedAmount(
-              order?.summary?.pending_difference,
+              paymentCollection.amount as number,
               order?.currency_code
             ),
           })}

packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx

@@ -100,18 +100,12 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
     return false
   }, [reservations])
 
-  // TODO: We need a way to link payment collections to a change order to
-  // accurately differentiate order payments and order change payments
-  // This fix should be temporary.
-  const authorizedPaymentCollection = order.payment_collections.find(
-    (pc) =>
-      pc.status === "authorized" &&
-      pc.amount === order.summary?.pending_difference
+  const unpaidPaymentCollection = order.payment_collections.find(
+    (pc) => pc.status === "not_paid"
   )
 
   const showPayment =
-    typeof authorizedPaymentCollection === "undefined" &&
-    (order?.summary?.pending_difference || 0) > 0
+    unpaidPaymentCollection && (order?.summary?.pending_difference || 0) > 0
   const showRefund = (order?.summary?.pending_difference || 0) < 0
 
   return (
@@ -152,7 +146,12 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
             </Button>
           )}
 
-          {showPayment && <CopyPaymentLink order={order} />}
+          {showPayment && (
+            <CopyPaymentLink
+              paymentCollection={unpaidPaymentCollection}
+              order={order}
+            />
+          )}
         </div>
       )}
     </Container>