refactor: replace shopify imports

app/api/cart/route.ts

@@ -1,7 +1,7 @@
 import { cookies } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
 
-import { addToCart, removeFromCart, updateCart } from 'lib/shopify';
+import { addToCart, removeFromCart, updateCart } from 'lib/medusa';
 import { isShopifyError } from 'lib/type-guards';
 
 function formatErrorMessage(err: Error): string {
@@ -10,13 +10,13 @@ function formatErrorMessage(err: Error): string {
 
 export async function POST(req: NextRequest): Promise<Response> {
   const cartId = cookies().get('cartId')?.value;
-  const { merchandiseId } = await req.json();
+  const { variantId } = await req.json();
 
-  if (!cartId?.length || !merchandiseId?.length) {
+  if (!cartId?.length || !variantId?.length) {
     return NextResponse.json({ error: 'Missing cartId or variantId' }, { status: 400 });
   }
   try {
-    await addToCart(cartId, [{ merchandiseId, quantity: 1 }]);
+    await addToCart(cartId, [{ variantId, quantity: 1 }]);
     return NextResponse.json({ status: 204 });
   } catch (e) {
     if (isShopifyError(e)) {

app/product/[handle]/page.tsx

@@ -10,8 +10,8 @@ import { Gallery } from 'components/product/gallery';
 import { VariantSelector } from 'components/product/variant-selector';
 import Prose from 'components/prose';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
-import { getProduct } from 'lib/shopify';
-import { Image } from 'lib/shopify/types';
+import { getProduct } from 'lib/medusa';
+import { Image } from 'lib/medusa/types';
 
 export const runtime = 'edge';
 

app/search/[collection]/page.tsx

@@ -1,4 +1,4 @@
-import { getCollection, getCollectionProducts } from 'lib/shopify';
+import { getCollection, getCollectionProducts } from 'lib/medusa';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 

app/search/page.tsx

@@ -1,7 +1,7 @@
 import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
-import { getProducts } from 'lib/shopify';
+import { getProducts } from 'lib/medusa';
 
 export const runtime = 'edge';
 

app/sitemap.ts

@@ -1,4 +1,4 @@
-import { getCollections, getProducts } from 'lib/shopify';
+import { getCollections, getProducts } from 'lib/medusa';
 import { MetadataRoute } from 'next';
 
 const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL

components/carousel.tsx

@@ -1,4 +1,4 @@
-import { getCollectionProducts } from 'lib/shopify';
+import { getCollectionProducts } from 'lib/medusa';
 import Image from 'next/image';
 import Link from 'next/link';
 

components/cart/button.tsx

@@ -6,7 +6,7 @@ import { useCookies } from 'react-cookie';
 import CartIcon from 'components/icons/cart';
 import CartModal from './modal';
 
-import type { Cart } from 'lib/shopify/types';
+import type { Cart } from 'lib/medusa/types';
 
 export default function CartButton({
   cart,

components/cart/delete-item-button.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 import { startTransition, useState } from 'react';
 
 import clsx from 'clsx';
-import type { CartItem } from 'lib/shopify/types';
+import type { CartItem } from 'lib/medusa/types';
 
 export default function DeleteItemButton({ item }: { item: CartItem }) {
   const router = useRouter();

components/cart/edit-item-quantity-button.tsx

@@ -4,7 +4,7 @@ import { startTransition, useState } from 'react';
 import clsx from 'clsx';
 import MinusIcon from 'components/icons/minus';
 import PlusIcon from 'components/icons/plus';
-import type { CartItem } from 'lib/shopify/types';
+import type { CartItem } from 'lib/medusa/types';
 import LoadingDots from '../loading-dots';
 
 export default function EditItemQuantityButton({

components/cart/index.tsx

@@ -1,4 +1,4 @@
-import { createCart, getCart } from 'lib/shopify';
+import { createCart, getCart } from 'lib/medusa';
 import { cookies } from 'next/headers';
 import CartButton from './button';
 

components/cart/modal.tsx

@@ -7,7 +7,7 @@ import CloseIcon from 'components/icons/close';
 import ShoppingBagIcon from 'components/icons/shopping-bag';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
-import type { Cart } from 'lib/shopify/types';
+import type { Cart } from 'lib/medusa/types';
 import { createUrl } from 'lib/utils';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';
@@ -70,13 +70,13 @@ export default function CartModal({
                 </button>
               </div>
 
-              {cart.lines.length === 0 ? (
+              {cart.lines?.length === 0 ? (
                 <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
                   <ShoppingBagIcon className="h-16" />
                   <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
                 </div>
               ) : null}
-              {cart.lines.length !== 0 ? (
+              {cart.lines?.length !== 0 ? (
                 <div className="flex h-full flex-col justify-between overflow-hidden">
                   <ul className="flex-grow overflow-auto p-6">
                     {cart.lines.map((item, i) => {

components/grid/three-items.tsx

@@ -1,6 +1,6 @@
 import { GridTileImage } from 'components/grid/tile';
-import { getCollectionProducts } from 'lib/shopify';
-import type { Product } from 'lib/shopify/types';
+import { getCollectionProducts } from 'lib/medusa';
+import type { Product } from 'lib/medusa/types';
 import Link from 'next/link';
 
 function ThreeItemGridItem({
@@ -41,13 +41,13 @@ export async function ThreeItemGrid() {
 
   if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
 
-  // const [firstProduct, secondProduct, thirdProduct] = homepageItems;
+  const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
     <section className="lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
-      {/* <ThreeItemGridItem size="full" item={firstProduct} background="purple" />
+      <ThreeItemGridItem size="full" item={firstProduct} background="purple" />
       <ThreeItemGridItem size="half" item={secondProduct} background="black" />
-      <ThreeItemGridItem size="half" item={thirdProduct} background="pink" /> */}
+      <ThreeItemGridItem size="half" item={thirdProduct} background="pink" />
     </section>
   );
 }

components/layout/footer.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import GitHubIcon from 'components/icons/github';
 import LogoIcon from 'components/icons/logo';
 import VercelIcon from 'components/icons/vercel';
-import { Menu } from 'lib/shopify/types';
+import { Menu } from 'lib/medusa/types';
 
 const { SITE_NAME } = process.env;
 

components/layout/navbar/index.tsx

@@ -1,10 +1,7 @@
 import Link from 'next/link';
-import { Suspense } from 'react';
 
-import Cart from 'components/cart';
-import CartIcon from 'components/icons/cart';
 import LogoIcon from 'components/icons/logo';
-import { Menu } from 'lib/shopify/types';
+import { Menu } from 'lib/medusa/types';
 import MobileMenu from './mobile-menu';
 import Search from './search';
 
@@ -43,10 +40,10 @@ export default async function Navbar() {
       </div>
 
       <div className="flex w-1/3 justify-end">
-        <Suspense fallback={<CartIcon className="h-6" />}>
-          {/* @ts-expect-error Server Component */}
-          <Cart />
-        </Suspense>
+        {/* <Suspense fallback={<CartIcon className="h-6" />}> */}
+        {/* @ts-expect-error Server Component */}
+        {/*  <Cart /> */}
+        {/* </Suspense> */}
       </div>
     </nav>
   );

components/layout/navbar/mobile-menu.tsx

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 
 import CloseIcon from 'components/icons/close';
 import MenuIcon from 'components/icons/menu';
-import { Menu } from 'lib/shopify/types';
+import { Menu } from 'lib/medusa/types';
 import Search from './search';
 
 export default function MobileMenu({ menu }: { menu: Menu[] }) {

components/layout/product-grid-items.tsx

@@ -1,6 +1,6 @@
 import Grid from 'components/grid';
 import { GridTileImage } from 'components/grid/tile';
-import { Product } from 'lib/shopify/types';
+import { Product } from 'lib/medusa/types';
 import Link from 'next/link';
 
 export default function ProductGridItems({ products }: { products: Product[] }) {

components/layout/search/collections.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Suspense } from 'react';
 
-import { getCollections } from 'lib/shopify';
+import { getCollections } from 'lib/medusa';
 import FilterList from './filter';
 
 async function CollectionList() {

components/product/add-to-cart.tsx

@@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState, useTransition } from 'react';
 
 import LoadingDots from 'components/loading-dots';
-import { ProductVariant } from 'lib/shopify/types';
+import { ProductVariant } from 'lib/medusa/types';
 
 export function AddToCart({
   variants,

components/product/variant-selector.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { ProductOption, ProductVariant } from 'lib/shopify/types';
+import { ProductOption, ProductVariant } from 'lib/medusa/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';

lib/shopify/index.ts

@@ -1,5 +1,6 @@
 import { isShopifyError } from 'lib/type-guards';
-import { Cart, Collection, Product } from './types';
+import { ProductCollection } from '../medusa/types';
+import { Cart, Product } from './types';
 
 // const endpoint = `${process.env.MEDUSA_BACKEND_API!}`;
 const endpoint = `http://localhost:9000/store`;
@@ -49,18 +50,19 @@ export default async function medusaRequest(
 
 export async function createCart(): Promise<Cart> {
   const res = await medusaRequest('POST', '/carts', {});
+  console.log('Cart created!');
+  console.log(res);
   return res.body.cart;
 }
 
 export async function addToCart(
   cartId: string,
-  lines: { merchandiseId: string; quantity: number }[]
+  lineItems: { variantId: string; quantity: number }[]
 ): Promise<Cart> {
-  console.log(lines);
+  console.log(lineItems);
   // TODO: transform lines into Medusa line items
   const res = await medusaRequest('POST', `/carts/${cartId}/line-items`, {
-    variant_id: 'something',
-    quantity: 1
+    lineItems
   });
 
   return res.body.data.cart;
@@ -93,8 +95,9 @@ export async function getCart(cartId: string): Promise<Cart | null> {
   return res.body.cart;
 }
 
-export async function getCollection(handle: string): Promise<Collection | undefined> {
+export async function getCollection(handle: string): Promise<ProductCollection | undefined> {
   const res = await medusaRequest('get', `/collections?handle[]=${handle}&limit=1`);
+  console.log({ collection: res.body.collection });
   return res.body.collection;
 }
 
@@ -103,11 +106,11 @@ export async function getCollectionProducts(handle: string): Promise<Product[]>
   if (!res.body?.collection?.products) {
     return [];
   }
-
+  console.log({ 'collection products': res.body.collection.products });
   return res.body.collection.products;
 }
 
-export async function getCollections(): Promise<Collection[]> {
+export async function getCollections(): Promise<ProductCollection[]> {
   const collections = [
     {
       handle: '',
@@ -122,7 +125,7 @@ export async function getCollections(): Promise<Collection[]> {
     }
   ];
 
-  return collections;
+  return [];
 }
 
 export async function getProduct(handle: string): Promise<Product | undefined> {