fix: made transfer page standalone

src/app/[countryCode]/(main)/order/[id]/transfer/[token]/page.tsx

@@ -1,5 +1,5 @@
-import { Button, Heading, Text } from "@medusajs/ui"
-import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { Heading, Text } from "@medusajs/ui"
+import TransferActions from "@modules/order/components/transfer-actions"
 import TransferImage from "@modules/order/components/transfer-image"
 
 export default async function TransferPage({
@@ -31,20 +31,7 @@ export default async function TransferPage({
           further action is required.
         </Text>
         <div className="w-full h-px bg-zinc-200" />
-        <div className="flex gap-x-4">
-          <Button size="large" asChild>
-            <LocalizedClientLink href={`/order/${id}/transfer/${token}/accept`}>
-              Approve transfer
-            </LocalizedClientLink>
-          </Button>
-          <Button size="large" variant="secondary" asChild>
-            <LocalizedClientLink
-              href={`/order/${id}/transfer/${token}/decline`}
-            >
-              Decline transfer
-            </LocalizedClientLink>
-          </Button>
-        </div>
+        <TransferActions id={id} token={token} />
       </div>
     </div>
   )

src/modules/order/components/transfer-actions/index.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import { acceptTransferRequest, declineTransferRequest } from "@lib/data/orders"
+import { Button, Text } from "@medusajs/ui"
+import { useState } from "react"
+
+type TransferStatus = "pending" | "success" | "error"
+
+const TransferActions = ({ id, token }: { id: string; token: string }) => {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [status, setStatus] = useState<{
+    accept: TransferStatus | null
+    decline: TransferStatus | null
+  } | null>({
+    accept: null,
+    decline: null,
+  })
+
+  const acceptTransfer = async () => {
+    setStatus({ accept: "pending", decline: null })
+    setErrorMessage(null)
+
+    const { success, error } = await acceptTransferRequest(id, token)
+
+    if (error) setErrorMessage(error)
+    setStatus({ accept: success ? "success" : "error", decline: null })
+  }
+
+  const declineTransfer = async () => {
+    setStatus({ accept: null, decline: "pending" })
+    setErrorMessage(null)
+
+    const { success, error } = await declineTransferRequest(id, token)
+
+    if (error) setErrorMessage(error)
+    setStatus({ accept: null, decline: success ? "success" : "error" })
+  }
+
+  return (
+    <div className="flex flex-col gap-y-4">
+      {status?.accept === "success" && (
+        <Text className="text-emerald-500">
+          Order transferred successfully!
+        </Text>
+      )}
+      {status?.decline === "success" && (
+        <Text className="text-emerald-500">
+          Order transfer declined successfully!
+        </Text>
+      )}
+      {status?.accept !== "success" && status?.decline !== "success" && (
+        <div className="flex gap-x-4">
+          <Button
+            size="large"
+            onClick={acceptTransfer}
+            isLoading={status?.accept === "pending"}
+            disabled={
+              status?.accept === "pending" || status?.decline === "pending"
+            }
+          >
+            Accept transfer
+          </Button>
+          <Button
+            size="large"
+            variant="secondary"
+            onClick={declineTransfer}
+            isLoading={status?.decline === "pending"}
+            disabled={
+              status?.accept === "pending" || status?.decline === "pending"
+            }
+          >
+            Decline transfer
+          </Button>
+        </div>
+      )}
+      {errorMessage && <Text className="text-red-500">{errorMessage}</Text>}
+    </div>
+  )
+}
+
+export default TransferActions