feat: Make region, collections, categories, products and cart v2 compatible

package.json

@@ -22,11 +22,7 @@
   "dependencies": {
     "@headlessui/react": "^1.6.1",
     "@hookform/error-message": "^2.0.0",
-    "@medusajs/link-modules": "^0.2.3",
     "@medusajs/medusa-js": "^6.1.7",
-    "@medusajs/modules-sdk": "^1.12.3",
-    "@medusajs/pricing": "^0.1.4",
-    "@medusajs/product": "^0.3.4",
     "@medusajs/ui": "^2.2.0",
     "@meilisearch/instant-meilisearch": "^0.7.1",
     "@paypal/paypal-js": "^5.0.6",
@@ -36,9 +32,9 @@
     "algoliasearch": "^4.20.0",
     "axios": "^1.6.7",
     "lodash": "^4.17.21",
-    "medusa-react": "^9.0.0",
     "next": "^14.0.0",
     "pg": "^8.11.3",
+    "qs": "^6.12.1",
     "react": "^18.2.0",
     "react-country-flag": "^3.0.2",
     "react-dom": "^18.2.0",

src/app/[countryCode]/(checkout)/checkout/page.tsx

@@ -1,27 +1,22 @@
 import { Metadata } from "next"
-import { cookies } from "next/headers"
 import { notFound } from "next/navigation"
 import { LineItem } from "@medusajs/medusa"
 
-import { enrichLineItems } from "@modules/cart/actions"
 import Wrapper from "@modules/checkout/components/payment-wrapper"
 import CheckoutForm from "@modules/checkout/templates/checkout-form"
 import CheckoutSummary from "@modules/checkout/templates/checkout-summary"
-import { getCart } from "@lib/data"
+import { enrichLineItems, retrieveCart } from "@lib/data/cart"
 
 export const metadata: Metadata = {
   title: "Checkout",
 }
 
 const fetchCart = async () => {
-  const cartId = cookies().get("_medusa_cart_id")?.value
-
-  if (!cartId) {
+  const cart = await retrieveCart()
+  if (!cart) {
     return notFound()
   }
 
-  const cart = await getCart(cartId).then((cart) => cart)
-
   if (cart?.items.length) {
     const enrichedItems = await enrichLineItems(cart?.items, cart?.region_id)
     cart.items = enrichedItems as LineItem[]
@@ -42,7 +37,7 @@ export default async function Checkout() {
       <Wrapper cart={cart}>
         <CheckoutForm />
       </Wrapper>
-      <CheckoutSummary />
+      <CheckoutSummary cart={cart} />
     </div>
   )
 }

src/app/[countryCode]/(main)/account/@dashboard/addresses/page.tsx

@@ -3,9 +3,10 @@ import { notFound } from "next/navigation"
 
 import AddressBook from "@modules/account/components/address-book"
 
-import { getCustomer, getRegion } from "@lib/data"
+import { getCustomer } from "@lib/data"
 
 import { headers } from "next/headers"
+import { getRegion } from "@lib/data/regions"
 
 export const metadata: Metadata = {
   title: "Addresses",

src/app/[countryCode]/(main)/account/@dashboard/profile/page.tsx

@@ -6,8 +6,9 @@ import ProfileEmail from "@modules/account/components/profile-email"
 import ProfileName from "@modules/account/components/profile-name"
 import ProfilePassword from "@modules/account/components/profile-password"
 
-import { getCustomer, listRegions } from "@lib/data"
+import { getCustomer } from "@lib/data"
 import { notFound } from "next/navigation"
+import { listRegions } from "@lib/data/regions"
 
 export const metadata: Metadata = {
   title: "Profile",

src/app/[countryCode]/(main)/cart/page.tsx

@@ -1,29 +1,17 @@
 import { LineItem } from "@medusajs/medusa"
 import { Metadata } from "next"
-import { cookies } from "next/headers"
-
 import CartTemplate from "@modules/cart/templates"
 
-import { enrichLineItems } from "@modules/cart/actions"
-import { getCheckoutStep } from "@lib/util/get-checkout-step"
-import { CartWithCheckoutStep } from "types/global"
-import { getCart, getCustomer } from "@lib/data"
+import { enrichLineItems, retrieveCart } from "@lib/data/cart"
+import { getCustomer } from "@lib/data"
 
 export const metadata: Metadata = {
   title: "Cart",
   description: "View your cart",
 }
 
 const fetchCart = async () => {
-  const cartId = cookies().get("_medusa_cart_id")?.value
-
-  if (!cartId) {
-    return null
-  }
-
-  const cart = await getCart(cartId).then(
-    (cart) => cart as CartWithCheckoutStep
-  )
+  const cart = await retrieveCart()
 
   if (!cart) {
     return null
@@ -34,8 +22,6 @@ const fetchCart = async () => {
     cart.items = enrichedItems as LineItem[]
   }
 
-  cart.checkout_step = cart && getCheckoutStep(cart)
-
   return cart
 }
 

src/app/[countryCode]/(main)/categories/[...category]/page.tsx

@@ -1,9 +1,10 @@
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
-import { getCategoryByHandle, listCategories, listRegions } from "@lib/data"
 import CategoryTemplate from "@modules/categories/templates"
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+import { listRegions } from "@lib/data/regions"
+import { getCategoryByHandle, listCategories } from "@lib/data/categories"
 
 type Props = {
   params: { category: string[]; countryCode: string }
@@ -24,11 +25,13 @@ export async function generateStaticParams() {
     regions?.map((r) => r.countries.map((c) => c.iso_2)).flat()
   )
 
-  const categoryHandles = product_categories.map((category) => category.handle)
+  const categoryHandles = product_categories.map(
+    (category: any) => category.handle
+  )
 
   const staticParams = countryCodes
     ?.map((countryCode) =>
-      categoryHandles.map((handle) => ({
+      categoryHandles.map((handle: any) => ({
         countryCode,
         category: [handle],
       }))

src/app/[countryCode]/(main)/collections/[handle]/page.tsx

@@ -1,13 +1,13 @@
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
+import CollectionTemplate from "@modules/collections/templates"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
 import {
   getCollectionByHandle,
   getCollectionsList,
-  listRegions,
-} from "@lib/data"
-import CollectionTemplate from "@modules/collections/templates"
-import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+} from "@lib/data/collections"
+import { listRegions } from "@lib/data/regions"
 
 type Props = {
   params: { handle: string; countryCode: string }

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

@@ -2,11 +2,10 @@ import { Metadata } from "next"
 
 import Footer from "@modules/layout/templates/footer"
 import Nav from "@modules/layout/templates/nav"
-
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://localhost:8000"
+import { getBaseURL } from "@lib/util/env"
 
 export const metadata: Metadata = {
-  metadataBase: new URL(BASE_URL),
+  metadataBase: new URL(getBaseURL()),
 }
 
 export default async function PageLayout(props: { children: React.ReactNode }) {

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

@@ -2,9 +2,9 @@ import { Metadata } from "next"
 
 import { retrieveOrder } from "@lib/data"
 import { LineItem, Order } from "@medusajs/medusa"
-import { enrichLineItems } from "@modules/cart/actions"
 import OrderCompletedTemplate from "@modules/order/templates/order-completed-template"
 import { notFound } from "next/navigation"
+import { enrichLineItems } from "@lib/data/cart"
 
 type Props = {
   params: { id: string }

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

@@ -1,59 +1,16 @@
-import { Product } from "@medusajs/medusa"
 import { Metadata } from "next"
 
-import { getCollectionsList, getProductsList, getRegion } from "@lib/data"
 import FeaturedProducts from "@modules/home/components/featured-products"
 import Hero from "@modules/home/components/hero"
-import { ProductCollectionWithPreviews } from "types/global"
-import { cache } from "react"
+import { getCollectionsWithProducts } from "@lib/data/collections"
+import { getRegion } from "@lib/data/regions"
 
 export const metadata: Metadata = {
   title: "Medusa Next.js Starter Template",
   description:
     "A performant frontend ecommerce starter template with Next.js 14 and Medusa.",
 }
 
-const getCollectionsWithProducts = cache(
-  async (
-    countryCode: string
-  ): Promise<ProductCollectionWithPreviews[] | null> => {
-    const { collections } = await getCollectionsList(0, 3)
-
-    if (!collections) {
-      return null
-    }
-
-    const collectionIds = collections.map((collection) => collection.id)
-
-    await Promise.all(
-      collectionIds.map((id) =>
-        getProductsList({
-          queryParams: { collection_id: [id] },
-          countryCode,
-        })
-      )
-    ).then((responses) =>
-      responses.forEach(({ response, queryParams }) => {
-        let collection
-
-        if (collections) {
-          collection = collections.find(
-            (collection) => collection.id === queryParams?.collection_id?.[0]
-          )
-        }
-
-        if (!collection) {
-          return
-        }
-
-        collection.products = response.products as unknown as Product[]
-      })
-    )
-
-    return collections as unknown as ProductCollectionWithPreviews[]
-  }
-)
-
 export default async function Home({
   params: { countryCode },
 }: {

src/app/[countryCode]/(main)/products/[handle]/page.tsx

@@ -1,15 +1,9 @@
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
-import {
-  getProductByHandle,
-  getProductsList,
-  getRegion,
-  listRegions,
-  retrievePricedProductById,
-} from "@lib/data"
-import { Region } from "@medusajs/medusa"
 import ProductTemplate from "@modules/products/templates"
+import { getRegion, listRegions } from "@lib/data/regions"
+import { getProductByHandle, getProductsList } from "@lib/data/products"
 
 type Props = {
   params: { countryCode: string; handle: string }
@@ -46,10 +40,13 @@ export async function generateStaticParams() {
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { handle } = params
+  const region = await getRegion(params.countryCode)
 
-  const { product } = await getProductByHandle(handle).then(
-    (product) => product
-  )
+  if (!region) {
+    notFound()
+  }
+
+  const product = await getProductByHandle(handle, region.id)
 
   if (!product) {
     notFound()
@@ -66,32 +63,14 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   }
 }
 
-const getPricedProductByHandle = async (handle: string, region: Region) => {
-  const { product } = await getProductByHandle(handle).then(
-    (product) => product
-  )
-
-  if (!product || !product.id) {
-    return null
-  }
-
-  const pricedProduct = await retrievePricedProductById({
-    id: product.id,
-    regionId: region.id,
-  })
-
-  return pricedProduct
-}
-
 export default async function ProductPage({ params }: Props) {
   const region = await getRegion(params.countryCode)
 
   if (!region) {
     notFound()
   }
 
-  const pricedProduct = await getPricedProductByHandle(params.handle, region)
-
+  const pricedProduct = await getProductByHandle(params.handle, region.id)
   if (!pricedProduct) {
     notFound()
   }

src/app/layout.tsx

@@ -1,10 +1,9 @@
+import { getBaseURL } from "@lib/util/env"
 import { Metadata } from "next"
 import "styles/globals.css"
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "https://localhost:8000"
-
 export const metadata: Metadata = {
-  metadataBase: new URL(BASE_URL),
+  metadataBase: new URL(getBaseURL()),
 }
 
 export default function RootLayout(props: { children: React.ReactNode }) {