feat: transfer pages

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@headlessui/react": "^1.6.1",
     "@hookform/error-message": "^2.0.0",
-    "@medusajs/js-sdk": "2.0.0",
+    "@medusajs/js-sdk": "2.0.5-snapshot-20241124153140",
     "@medusajs/ui": "2.0.0",
     "@meilisearch/instant-meilisearch": "^0.7.1",
     "@paypal/paypal-js": "^5.0.6",

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

@@ -0,0 +1,41 @@
+import { acceptTransferRequest } from "@lib/data/orders"
+import { Heading, Text } from "@medusajs/ui"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  const { success, error } = await acceptTransferRequest(id, token)
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-3/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        {success && (
+          <>
+            <Heading level="h1" className="text-xl text-zinc-900">
+              Order transfered!
+            </Heading>
+            <Text className="text-zinc-600">
+              Order {id} has been successfully transfered to the new owner.
+            </Text>
+          </>
+        )}
+        {!success && (
+          <>
+            <Text className="text-zinc-600">
+              There was an error accepting the transfer. Please try again.
+            </Text>
+            {error && (
+              <Text className="text-red-500">Error message: {error}</Text>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,41 @@
+import { declineTransferRequest } from "@lib/data/orders"
+import { Heading, Text } from "@medusajs/ui"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  const { success, error } = await declineTransferRequest(id, token)
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-3/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        {success && (
+          <>
+            <Heading level="h1" className="text-xl text-zinc-900">
+              Order transfer declined!
+            </Heading>
+            <Text className="text-zinc-600">
+              Transfer of order {id} has been successfully declined.
+            </Text>
+          </>
+        )}
+        {!success && (
+          <>
+            <Text className="text-zinc-600">
+              There was an error declining the transfer. Please try again.
+            </Text>
+            {error && (
+              <Text className="text-red-500">Error message: {error}</Text>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { Button, Heading, Text } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-3/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        <Heading level="h1" className="text-xl text-zinc-900">
+          Transfer request for order {id}
+        </Heading>
+        <Text className="text-zinc-600">
+          You've received a request to transfer ownership of your order ({id}).
+          If you agree to this request, you can approve the transfer by clicking
+          the button below.
+        </Text>
+        <div className="w-full h-px bg-zinc-200" />
+        <Text className="text-zinc-600">
+          If you accept, the new owner will take over all responsibilities and
+          permissions associated with this order.
+        </Text>
+        <Text className="text-zinc-600">
+          If you do not recognize this request or wish to retain ownership, no
+          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>
+      </div>
+    </div>
+  )
+}

src/lib/data/cart.ts

@@ -371,7 +371,7 @@ export async function placeOrder() {
     const countryCode =
       cartRes.order.shipping_address?.country_code?.toLowerCase()
     removeCartId()
-    redirect(`/${countryCode}/order/confirmed/${cartRes?.order.id}`)
+    redirect(`/${countryCode}/order/${cartRes?.order.id}/confirmed`)
   }
 
   return cartRes.cart

src/lib/data/orders.ts

@@ -39,30 +39,41 @@ export const createTransferRequest = async (
   error: string | null
   order: HttpTypes.StoreOrder | null
 }> => {
-  const id = formData.get("order_id")
+  const id = formData.get("order_id") as string
+
+  if (!id) {
+    return { success: false, error: "Order ID is required", order: null }
+  }
 
   const headers = getAuthHeaders()
 
-  return await sdk.client
-    .fetch<HttpTypes.StoreOrderResponse>(
-      `/store/orders/${id}/transfer/request`,
+  return await sdk.store.order
+    .requestTransfer(
+      id,
+      {},
       {
-        method: "POST",
-        headers,
-        body: {},
-        query: {
-          fields: "id, email",
-        },
-      }
+        fields: "id, email",
+      },
+      headers
     )
     .then(({ order }) => ({ success: true, error: null, order }))
     .catch((err) => ({ success: false, error: err.message, order: null }))
 }
 
-export const acceptTransferRequest = async (formData: FormData) => {
-  console.log(formData)
+export const acceptTransferRequest = async (id: string, token: string) => {
+  const headers = getAuthHeaders()
+
+  return await sdk.store.order
+    .acceptTransfer(id, { token }, {}, headers)
+    .then(({ order }) => ({ success: true, error: null, order }))
+    .catch((err) => ({ success: false, error: err.message, order: null }))
 }
 
-export const rejectTransferRequest = async (formData: FormData) => {
-  console.log(formData)
+export const declineTransferRequest = async (id: string, token: string) => {
+  const headers = getAuthHeaders()
+
+  return await sdk.store.order
+    .declineTransfer(id, { token }, {}, headers)
+    .then(({ order }) => ({ success: true, error: null, order }))
+    .catch((err) => ({ success: false, error: err.message, order: null }))
 }

src/modules/account/components/transfer-request-form/index.tsx

@@ -2,7 +2,7 @@
 
 import { useFormState } from "react-dom"
 import { createTransferRequest } from "@lib/data/orders"
-import { Text, Heading, Input, Button, IconButton } from "@medusajs/ui"
+import { Text, Heading, Input, Button, IconButton, Toaster } from "@medusajs/ui"
 import { SubmitButton } from "@modules/checkout/components/submit-button"
 import { CheckCircleMiniSolid, XCircleSolid } from "@medusajs/icons"
 import { useEffect, useState } from "react"
@@ -47,13 +47,13 @@ export default function TransferRequestForm() {
               Request transfer
             </SubmitButton>
           </div>
-          {!state.success && state.error && (
-            <Text className="text-base-regular text-rose-500">
-              {state.error}
-            </Text>
-          )}
         </form>
       </div>
+      {!state.success && state.error && (
+        <Text className="text-base-regular text-rose-500 text-right">
+          {state.error}
+        </Text>
+      )}
       {showSuccess && (
         <div className="flex justify-between p-4 bg-neutral-50 shadow-borders-base w-full self-stretch items-center">
           <div className="flex gap-x-2 items-center">