feat(backend,storefront): add transfer cart on register and login

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": "latest",
     "@medusajs/ui": "2.0.0",
     "@meilisearch/instant-meilisearch": "^0.7.1",
     "@paypal/paypal-js": "^5.0.6",

src/app/[countryCode]/(main)/layout.tsx

@@ -1,17 +1,26 @@
 import { Metadata } from "next"
 
+import { retrieveCart } from "@lib/data/cart"
+import { getCustomer } from "@lib/data/customer"
+import { getBaseURL } from "@lib/util/env"
+import CartMismatchBanner from "@modules/layout/components/cart-mismatch-banner"
 import Footer from "@modules/layout/templates/footer"
 import Nav from "@modules/layout/templates/nav"
-import { getBaseURL } from "@lib/util/env"
 
 export const metadata: Metadata = {
   metadataBase: new URL(getBaseURL()),
 }
 
 export default async function PageLayout(props: { children: React.ReactNode }) {
+  const customer = await getCustomer()
+  const cart = await retrieveCart()
+
   return (
     <>
       <Nav />
+      {customer && cart && (
+        <CartMismatchBanner customer={customer} cart={cart} />
+      )}
       {props.children}
       <Footer />
     </>

src/lib/data/cart.ts

@@ -34,7 +34,11 @@ export async function getOrSetCart(countryCode: string) {
   }
 
   if (!cart) {
-    const cartResp = await sdk.store.cart.create({ region_id: region.id })
+    const cartResp = await sdk.store.cart.create(
+      { region_id: region.id },
+      {},
+      getAuthHeaders()
+    )
     cart = cartResp.cart
     setCartId(cart.id)
     revalidateTag("cart")

src/lib/data/customer.ts

@@ -6,7 +6,12 @@ import { HttpTypes } from "@medusajs/types"
 import { revalidateTag } from "next/cache"
 import { redirect } from "next/navigation"
 import { cache } from "react"
-import { getAuthHeaders, removeAuthToken, setAuthToken } from "./cookies"
+import {
+  getAuthHeaders,
+  getCartId,
+  removeAuthToken,
+  setAuthToken,
+} from "./cookies"
 
 export const getCustomer = cache(async function () {
   return await sdk.store.customer
@@ -58,6 +63,9 @@ export async function signup(_currentState: unknown, formData: FormData) {
     setAuthToken(loginToken as string)
 
     revalidateTag("customer")
+
+    await transferCart()
+
     return createdCustomer
   } catch (error: any) {
     return error.toString()
@@ -78,6 +86,12 @@ export async function login(_currentState: unknown, formData: FormData) {
   } catch (error: any) {
     return error.toString()
   }
+
+  try {
+    await transferCart()
+  } catch (error: any) {
+    return error.toString()
+  }
 }
 
 export async function signout(countryCode: string) {
@@ -88,6 +102,22 @@ export async function signout(countryCode: string) {
   redirect(`/${countryCode}/account`)
 }
 
+export async function transferCart() {
+  const cartId = getCartId()
+
+  if (!cartId) {
+    return
+  }
+
+  const headers = {
+    ...getAuthHeaders(),
+  }
+
+  await sdk.store.cart.transferCart(cartId, {}, headers)
+
+  revalidateTag("cart")
+}
+
 export const addCustomerAddress = async (
   _currentState: unknown,
   formData: FormData

src/modules/layout/components/cart-mismatch-banner/index.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { transferCart } from "@lib/data/customer"
+import { ExclamationCircleSolid } from "@medusajs/icons"
+import { StoreCart, StoreCustomer } from "@medusajs/types"
+import { Button } from "@medusajs/ui"
+import { useState } from "react"
+
+function CartMismatchBanner(props: {
+  customer: StoreCustomer
+  cart: StoreCart
+}) {
+  const { customer, cart } = props
+  const [isPending, setIsPending] = useState(false)
+  const [actionText, setActionText] = useState("Run transfer again")
+
+  if (!customer || !!cart.customer_id) {
+    return
+  }
+
+  const handleSubmit = async () => {
+    try {
+      setIsPending(true)
+      setActionText("Transferring..")
+
+      await transferCart()
+    } catch {
+      setActionText("Run transfer again")
+      setIsPending(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-center small:p-4 p-2 text-center bg-orange-300 small:gap-2 gap-1 text-sm mt-2 text-orange-800">
+      <div className="flex flex-col small:flex-row small:gap-2 gap-1 items-center">
+        <span className="flex items-center gap-1">
+          <ExclamationCircleSolid className="inline" />
+          Something went wrong when we tried to transfer your cart
+        </span>
+
+        <span>·</span>
+
+        <Button
+          variant="transparent"
+          className="hover:bg-transparent active:bg-transparent focus:bg-transparent disabled:text-orange-500 text-orange-950 p-0 bg-transparent"
+          size="base"
+          disabled={isPending}
+          onClick={handleSubmit}
+        >
+          {actionText}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default CartMismatchBanner