├── .env.example
├── .eslintrc.js
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── test.yml
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .vscode
    ├── launch.json
    └── settings.json
├── README.md
├── app
    ├── [page]
    │   ├── layout.tsx
    │   ├── opengraph-image.tsx
    │   └── page.tsx
    ├── api
    │   └── revalidate
    │   │   └── route.ts
    ├── error.tsx
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── opengraph-image.tsx
    ├── page.tsx
    ├── product
    │   └── [handle]
    │   │   └── page.tsx
    ├── robots.ts
    ├── search
    │   ├── [collection]
    │   │   ├── opengraph-image.tsx
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── loading.tsx
    │   └── page.tsx
    └── sitemap.ts
├── components
    ├── carousel.tsx
    ├── cart
    │   ├── actions.ts
    │   ├── add-to-cart.tsx
    │   ├── close-cart.tsx
    │   ├── delete-item-button.tsx
    │   ├── edit-item-quantity-button.tsx
    │   ├── index.tsx
    │   ├── modal.tsx
    │   └── open-cart.tsx
    ├── grid
    │   ├── index.tsx
    │   ├── three-items.tsx
    │   └── tile.tsx
    ├── icons
    │   ├── arrow-left.tsx
    │   ├── close.tsx
    │   ├── logo.tsx
    │   └── medusa.tsx
    ├── label.tsx
    ├── layout
    │   ├── footer-menu.tsx
    │   ├── footer.tsx
    │   ├── navbar
    │   │   ├── index.tsx
    │   │   ├── mobile-menu.tsx
    │   │   └── search.tsx
    │   ├── product-grid-items.tsx
    │   └── search
    │   │   ├── collections.tsx
    │   │   └── filter
    │   │       ├── dropdown.tsx
    │   │       ├── index.tsx
    │   │       └── item.tsx
    ├── loading-dots.tsx
    ├── logo-square.tsx
    ├── opengraph-image.tsx
    ├── price.tsx
    ├── product
    │   ├── gallery.tsx
    │   ├── product-description.tsx
    │   └── variant-selector.tsx
    └── prose.tsx
├── fonts
    └── Inter-Bold.ttf
├── lib
    ├── constants.ts
    ├── medusa
    │   ├── helpers.ts
    │   ├── index.ts
    │   └── types.ts
    ├── type-guards.ts
    └── utils.ts
├── license.md
├── next.config.js
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── prettier.config.js
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock


/.env.example:
--------------------------------------------------------------------------------
1 | TWITTER_CREATOR="@medusajs"
2 | TWITTER_SITE="https://medusajs.com/"
3 | SITE_NAME="Medusa Store"
4 | NEXT_PUBLIC_MEDUSA_BACKEND_API="http://localhost:9000"
5 | NEXT_PUBLIC_VERCEL_URL="http://localhost:3000"
6 | MEDUSA_API_KEY=""
7 | MEDUSA_REVALIDATION_SECRET="supersecret123"


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ['next', 'prettier'],
 3 |   plugins: ['unicorn'],
 4 |   rules: {
 5 |     'no-unused-vars': [
 6 |       'error',
 7 |       {
 8 |         args: 'after-used',
 9 |         caughtErrors: 'none',
10 |         ignoreRestSiblings: true,
11 |         vars: 'all'
12 |       }
13 |     ],
14 |     'prefer-const': 'error',
15 |     'react-hooks/exhaustive-deps': 'error',
16 |     'unicorn/filename-case': [
17 |       'error',
18 |       {
19 |         case: 'kebabCase'
20 |       }
21 |     ]
22 |   }
23 | };
24 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 |   - package-ecosystem: 'github-actions'
4 |     directory: '/'
5 |     schedule:
6 |       interval: 'weekly'
7 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: test
 2 | on: pull_request
 3 | jobs:
 4 |   test:
 5 |     runs-on: ubuntu-latest
 6 |     steps:
 7 |       - name: Cancel running workflows
 8 |         uses: styfle/cancel-workflow-action@0.11.0
 9 |         with:
10 |           access_token: ${{ github.token }}
11 |       - name: Checkout repo
12 |         uses: actions/checkout@v3
13 |       - name: Set node version
14 |         uses: actions/setup-node@v3
15 |         with:
16 |           node-version-file: '.nvmrc'
17 |       - name: Set pnpm version
18 |         uses: pnpm/action-setup@v2
19 |         with:
20 |           run_install: false
21 |           version: 7
22 |       - name: Cache node_modules
23 |         id: node-modules-cache
24 |         uses: actions/cache@v3
25 |         with:
26 |           path: '**/node_modules'
27 |           key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
28 |       - name: Install dependencies
29 |         if: steps.node-modules-cache.outputs.cache-hit != 'true'
30 |         run: pnpm install
31 |       - name: Run tests
32 |         run: pnpm test
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | .playwright
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | .pnpm-debug.log*
28 | 
29 | # local env files
30 | .env*
31 | !.env.example
32 | 
33 | # vercel
34 | .vercel
35 | 
36 | # typescript
37 | *.tsbuildinfo
38 | next-env.d.ts
39 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .vercel
2 | .next
3 | pnpm-lock.yaml
4 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "name": "Next.js: debug server-side",
 6 |       "type": "node-terminal",
 7 |       "request": "launch",
 8 |       "command": "pnpm dev"
 9 |     },
10 |     {
11 |       "name": "Next.js: debug client-side",
12 |       "type": "chrome",
13 |       "request": "launch",
14 |       "url": "http://localhost:3000"
15 |     },
16 |     {
17 |       "name": "Next.js: debug full stack",
18 |       "type": "node-terminal",
19 |       "request": "launch",
20 |       "command": "pnpm dev",
21 |       "serverReadyAction": {
22 |         "pattern": "started server on .+, url: (https?://.+)",
23 |         "uriFormat": "%s",
24 |         "action": "debugWithChrome"
25 |       }
26 |     }
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "typescript.tsdk": "node_modules/typescript/lib",
 3 |   "typescript.enablePromptUseWorkspaceTsdk": true,
 4 |   "editor.codeActionsOnSave": {
 5 |     "source.fixAll": true,
 6 |     "source.organizeImports": true,
 7 |     "source.sortMembers": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmedusajs%2Fvercel-commerce&env=MEDUSA_API_KEY,SITE_NAME,NEXT_PUBLIC_MEDUSA_BACKEND_API,NEXT_PUBLIC_VERCEL_URL,TWITTER_SITE,TWITTER_CREATOR&project-name=medusa-nextjs-commerce&repository-name=medusa-nextjs-commerce&redirect-url=https%3A%2F%2Fdocs.medusajs.com%2F%3Futm_source%3Dvercel%26utm_medium%3Ddeploy%2Bbutton%26utm_campaign%3Dcommerce&demo-title=Next.js%20Commerce%20by%20Medusa&demo-description=A%20Next.js%2013%20and%20ecommerce%20template%2C%20built%20with%20Medusa.&demo-url=https%3A%2F%2Fmedusa-nextjs-commerce.vercel.app%2F&demo-image=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62591822%3Fs%3D200%26v%3D4)
 2 | 
 3 | # Next.js Commerce x Medusa
 4 | 
 5 | > Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1)
 6 | 
 7 | A Next.js 13 and App Router-ready ecommerce template, built with [Medusa](https://github.com/medusajs/medusa), featuring:
 8 | 
 9 | - Next.js App Router
10 | - Optimized for SEO using Next.js's Metadata
11 | - React Server Components (RSCs) and Suspense
12 | - Server Actions for mutations
13 | - Edge Runtime
14 | - New fetching and caching paradigms
15 | - Dynamic OG images
16 | - Styling with Tailwind CSS
17 | - Automatic light/dark mode based on system settings
18 | 
19 | ## What is Medusa?
20 | 
21 | [Medusa](https://medusajs.com/) is a set of commerce modules and tools that allow you to build rich, reliable, and performant commerce applications without reinventing core commerce logic. The modules can be customized and used to build advanced ecommerce stores, marketplaces, or any system that needs foundational commerce primitives. All modules are open-source and freely available on NPM.
22 | 
23 | Learn more about [Medusa’s architecture](https://docs.medusajs.com/development/fundamentals/architecture-overview) and [commerce modules](https://docs.medusajs.com/modules/overview) in Medusa's documentation.
24 | 
25 | ## Getting started
26 | 
27 | > Please refer to the [documentation](https://docs.medusajs.com/development/backend/install#prerequisites) to learn about required tools for the Medusa Backend.
28 | 
29 | 1\. Run `create-medusa-app` with the `nextjs-commerce` starter:
30 | 
31 | ```bash
32 | npx create-medusa-app@nextjs-commerce
33 | ```
34 | 
35 | This will create a new main folder with two subfolders for Medusa and Next.js Commerce respectively.
36 | 
37 | 2\. Create a Postgres database named `vercel-commerce` and make sure the Postgres server is running locally.
38 | 
39 | 3\. Inside your newly created `nextjs-commerce` project, change to the `medusa` folder and seed the database:
40 | 
41 | ```bash
42 | cd nextjs-commerce/medusa
43 | yarn seed
44 | ```
45 | 
46 | This will provide you with some demo products and the necessary product categories to fill out the homepage.
47 | 
48 | ## Running Medusa
49 | 
50 | From the `medusa` subfolder, run:
51 | 
52 | ```bash
53 | yarn start
54 | ```
55 | 
56 | Your Medusa server should now be running on [localhost:9000](http://localhost:9000/).
57 | 
58 | ## Running Next.js Commerce
59 | 
60 | 1\. You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. Copy the contents of .env.example to a .env file in the root of your Next.js Commerce project, and make sure the NEXT_PUBLIC_MEDUSA_BACKEND_API environment variable points to your Medusa backend domain (default: http://localhost:9000).
61 | 
62 | > Note: You should not commit your `.env` file or it will expose secrets.
63 | 
64 | 2\. From the `nextjs-commerce` subfolder, run:
65 | 
66 | ```bash
67 | yarn dev
68 | ```
69 | 
70 | Your app should now be running on [localhost:3000](http://localhost:3000/).
71 | 


--------------------------------------------------------------------------------
/app/[page]/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Footer from 'components/layout/footer';
 2 | import { Suspense } from 'react';
 3 | 
 4 | export default function Layout({ children }: { children: React.ReactNode }) {
 5 |   return (
 6 |     <Suspense>
 7 |       <div className="w-full">
 8 |         <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
 9 |           <Suspense>{children}</Suspense>
10 |         </div>
11 |       </div>
12 |       <Footer />
13 |     </Suspense>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/app/[page]/opengraph-image.tsx:
--------------------------------------------------------------------------------
 1 | import OpengraphImage from 'components/opengraph-image';
 2 | // import { getPage } from 'lib/medusa';
 3 | 
 4 | export const runtime = 'edge';
 5 | 
 6 | export default async function Image({ params }: { params: { page: string } }) {
 7 |   // Medusa doesn't support content pages right now
 8 |   // const page = await getPage(params.page);
 9 |   // const title = page.seo?.title || page.title;
10 |   const title = process.env.SITE_NAME || 'Medusa Store';
11 | 
12 |   return await OpengraphImage({ title });
13 | }
14 | 


--------------------------------------------------------------------------------
/app/[page]/page.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next';
 2 | 
 3 | import Prose from 'components/prose';
 4 | import { CHECKOUT_PAGE_PROPS } from 'lib/constants';
 5 | import { notFound } from 'next/navigation';
 6 | 
 7 | export const runtime = 'edge';
 8 | 
 9 | export const revalidate = 43200; // 12 hours
10 | 
11 | export async function generateMetadata({
12 |   params
13 | }: {
14 |   params: { page: string };
15 | }): Promise<Metadata> {
16 |   let page;
17 | 
18 |   params.page === 'checkout' && (page = CHECKOUT_PAGE_PROPS);
19 | 
20 |   if (!page) return notFound();
21 | 
22 |   return {
23 |     title: page.title,
24 |     description: '',
25 |     openGraph: {
26 |       publishedTime: page.createdAt,
27 |       modifiedTime: page.updatedAt,
28 |       type: 'article'
29 |     }
30 |   };
31 | }
32 | 
33 | export default async function Page({ params }: { params: { page: string } }) {
34 |   let page;
35 | 
36 |   params.page === 'checkout' && (page = CHECKOUT_PAGE_PROPS);
37 | 
38 |   if (!page) return notFound();
39 | 
40 |   return (
41 |     <>
42 |       <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
43 |       <Prose className="mb-8" html={page.body as string} />
44 |       <p className="text-sm italic">
45 |         {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
46 |           year: 'numeric',
47 |           month: 'long',
48 |           day: 'numeric'
49 |         }).format(new Date(page.updatedAt))}.`}
50 |       </p>
51 |     </>
52 |   );
53 | }
54 | 


--------------------------------------------------------------------------------
/app/api/revalidate/route.ts:
--------------------------------------------------------------------------------
1 | import { revalidate } from 'lib/medusa';
2 | import { NextRequest, NextResponse } from 'next/server';
3 | 
4 | export const runtime = 'edge';
5 | 
6 | export async function POST(req: NextRequest): Promise<NextResponse> {
7 |   return revalidate(req);
8 | }
9 | 


--------------------------------------------------------------------------------
/app/error.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | export default function Error({ reset }: { reset: () => void }) {
 4 |   return (
 5 |     <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
 6 |       <h2 className="text-xl font-bold">Oh no!</h2>
 7 |       <p className="my-2">
 8 |         There was an issue with our storefront. This could be a temporary issue, please try your
 9 |         action again.
10 |       </p>
11 |       <button
12 |         className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
13 |         onClick={() => reset()}
14 |       >
15 |         Try Again
16 |       </button>
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/medusajs/vercel-commerce/ea9afa6b602d58d33f8e9b59ca94bba8773c83a4/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @media (prefers-color-scheme: dark) {
 6 |   html {
 7 |     color-scheme: dark;
 8 |   }
 9 | }
10 | 
11 | @supports (font: -apple-system-body) and (-webkit-appearance: none) {
12 |   img[loading='lazy'] {
13 |     clip-path: inset(0.6px);
14 |   }
15 | }
16 | 
17 | a,
18 | input,
19 | button {
20 |   @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
21 | }
22 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Navbar from 'components/layout/navbar';
 2 | import { Inter } from 'next/font/google';
 3 | import { ReactNode, Suspense } from 'react';
 4 | import './globals.css';
 5 | 
 6 | const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
 7 | const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
 8 |   ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
 9 |   : 'http://localhost:3000';
10 | 
11 | export const metadata = {
12 |   metadataBase: new URL(baseUrl),
13 |   title: {
14 |     default: SITE_NAME!,
15 |     template: `%s | ${SITE_NAME}`
16 |   },
17 |   robots: {
18 |     follow: true,
19 |     index: true
20 |   },
21 |   ...(TWITTER_CREATOR &&
22 |     TWITTER_SITE && {
23 |       twitter: {
24 |         card: 'summary_large_image',
25 |         creator: TWITTER_CREATOR,
26 |         site: TWITTER_SITE
27 |       }
28 |     })
29 | };
30 | 
31 | const inter = Inter({
32 |   subsets: ['latin'],
33 |   display: 'swap',
34 |   variable: '--font-inter'
35 | });
36 | 
37 | export default async function RootLayout({ children }: { children: ReactNode }) {
38 |   return (
39 |     <html lang="en" className={inter.variable}>
40 |       <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
41 |         <Navbar />
42 |         <Suspense>
43 |           <main>{children}</main>
44 |         </Suspense>
45 |       </body>
46 |     </html>
47 |   );
48 | }
49 | 


--------------------------------------------------------------------------------
/app/opengraph-image.tsx:
--------------------------------------------------------------------------------
1 | import OpengraphImage from 'components/opengraph-image';
2 | 
3 | export const runtime = 'edge';
4 | 
5 | export default async function Image() {
6 |   return await OpengraphImage();
7 | }
8 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Carousel } from 'components/carousel';
 2 | import { ThreeItemGrid } from 'components/grid/three-items';
 3 | import Footer from 'components/layout/footer';
 4 | import { Suspense } from 'react';
 5 | 
 6 | export const runtime = 'edge';
 7 | 
 8 | export const revalidate = 43200; // 12 hours
 9 | 
10 | export const metadata = {
11 |   description: 'High-performance ecommerce store built with Next.js, Vercel, and Medusa.',
12 |   openGraph: {
13 |     type: 'website'
14 |   }
15 | };
16 | 
17 | export default async function HomePage() {
18 |   return (
19 |     <>
20 |       <ThreeItemGrid />
21 |       <Suspense>
22 |         <Carousel />
23 |         <Suspense>
24 |           <Footer />
25 |         </Suspense>
26 |       </Suspense>
27 |     </>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/app/product/[handle]/page.tsx:
--------------------------------------------------------------------------------
  1 | import type { Metadata } from 'next';
  2 | import { notFound } from 'next/navigation';
  3 | import { Suspense } from 'react';
  4 | 
  5 | import { GridTileImage } from 'components/grid/tile';
  6 | import Footer from 'components/layout/footer';
  7 | import { Gallery } from 'components/product/gallery';
  8 | import { ProductDescription } from 'components/product/product-description';
  9 | import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 10 | import { getProduct } from 'lib/medusa';
 11 | import { Image } from 'lib/medusa/types';
 12 | import Link from 'next/link';
 13 | 
 14 | export const runtime = 'edge';
 15 | 
 16 | export async function generateMetadata({
 17 |   params
 18 | }: {
 19 |   params: { handle: string };
 20 | }): Promise<Metadata> {
 21 |   const product = await getProduct(params.handle);
 22 | 
 23 |   if (!product) return notFound();
 24 | 
 25 |   const { url, width, height, altText: alt } = product.featuredImage || {};
 26 |   const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
 27 | 
 28 |   return {
 29 |     title: product.title,
 30 |     description: product.description,
 31 |     robots: {
 32 |       index: indexable,
 33 |       follow: indexable,
 34 |       googleBot: {
 35 |         index: indexable,
 36 |         follow: indexable
 37 |       }
 38 |     },
 39 |     openGraph: url
 40 |       ? {
 41 |           images: [
 42 |             {
 43 |               url,
 44 |               width,
 45 |               height,
 46 |               alt
 47 |             }
 48 |           ]
 49 |         }
 50 |       : null
 51 |   };
 52 | }
 53 | 
 54 | export default async function ProductPage({ params }: { params: { handle: string } }) {
 55 |   const product = await getProduct(params.handle);
 56 | 
 57 |   if (!product) return notFound();
 58 | 
 59 |   const productJsonLd = {
 60 |     '@context': 'https://schema.org',
 61 |     '@type': 'Product',
 62 |     name: product.title,
 63 |     description: product.description,
 64 |     image: product.featuredImage.url,
 65 |     offers: {
 66 |       '@type': 'AggregateOffer',
 67 |       availability: product.availableForSale
 68 |         ? 'https://schema.org/InStock'
 69 |         : 'https://schema.org/OutOfStock',
 70 |       priceCurrency: product.priceRange.maxVariantPrice.currencyCode,
 71 |       highPrice: product.priceRange.maxVariantPrice.amount
 72 |     }
 73 |   };
 74 | 
 75 |   return (
 76 |     <>
 77 |       <script
 78 |         type="application/ld+json"
 79 |         dangerouslySetInnerHTML={{
 80 |           __html: JSON.stringify(productJsonLd)
 81 |         }}
 82 |       />
 83 |       <div className="mx-auto max-w-screen-2xl px-4">
 84 |         <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row">
 85 |           <div className="h-full w-full basis-full lg:basis-4/6">
 86 |             <Gallery
 87 |               images={product.images!.map((image: Image) => ({
 88 |                 src: image.url,
 89 |                 altText: image.altText
 90 |               }))}
 91 |             />
 92 |           </div>
 93 | 
 94 |           <div className="basis-full lg:basis-2/6">
 95 |             <ProductDescription product={product} />
 96 |           </div>
 97 |         </div>
 98 |         <Suspense>
 99 |           <RelatedProducts id={product.id!} />
100 |         </Suspense>
101 |       </div>
102 |       <Suspense>
103 |         <Footer />
104 |       </Suspense>
105 |     </>
106 |   );
107 | }
108 | 
109 | async function RelatedProducts({ id }: { id: string }) {
110 |   // const relatedProducts = await getProductRecommendations(id);
111 |   const relatedProducts: any[] = [];
112 | 
113 |   if (!relatedProducts.length) return null;
114 | 
115 |   return (
116 |     <div className="py-8">
117 |       <h2 className="mb-4 text-2xl font-bold">Related Products</h2>
118 |       <ul className="flex w-full gap-4 overflow-x-auto pt-1">
119 |         {relatedProducts.map((product) => (
120 |           <li
121 |             key={product.handle}
122 |             className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
123 |           >
124 |             <Link className="relative h-full w-full" href={`/product/${product.handle}`}>
125 |               <GridTileImage
126 |                 alt={product.title}
127 |                 label={{
128 |                   title: product.title,
129 |                   amount: product.priceRange.maxVariantPrice.amount,
130 |                   currencyCode: product.priceRange.maxVariantPrice.currencyCode
131 |                 }}
132 |                 src={product.featuredImage?.url}
133 |                 fill
134 |                 sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
135 |               />
136 |             </Link>
137 |           </li>
138 |         ))}
139 |       </ul>
140 |     </div>
141 |   );
142 | }
143 | 


--------------------------------------------------------------------------------
/app/robots.ts:
--------------------------------------------------------------------------------
 1 | const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
 2 |   ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
 3 |   : 'http://localhost:3000';
 4 | 
 5 | export default function robots() {
 6 |   return {
 7 |     rules: [
 8 |       {
 9 |         userAgent: '*'
10 |       }
11 |     ],
12 |     sitemap: `${baseUrl}/sitemap.xml`,
13 |     host: baseUrl
14 |   };
15 | }
16 | 


--------------------------------------------------------------------------------
/app/search/[collection]/opengraph-image.tsx:
--------------------------------------------------------------------------------
 1 | import OpengraphImage from 'components/opengraph-image';
 2 | import { getCategory } from 'lib/medusa';
 3 | 
 4 | export const runtime = 'edge';
 5 | 
 6 | export default async function Image({ params }: { params: { collection: string } }) {
 7 |   const collection = await getCategory(params.collection);
 8 |   const title = collection?.seo?.title || collection?.title;
 9 | 
10 |   return await OpengraphImage({ title });
11 | }
12 | 


--------------------------------------------------------------------------------
/app/search/[collection]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { getCategory, getCategoryProducts } from 'lib/medusa';
 2 | import { Metadata } from 'next';
 3 | import { notFound } from 'next/navigation';
 4 | 
 5 | import Grid from 'components/grid';
 6 | import ProductGridItems from 'components/layout/product-grid-items';
 7 | import { defaultSort, sorting } from 'lib/constants';
 8 | 
 9 | export const runtime = 'edge';
10 | 
11 | export async function generateMetadata({
12 |   params
13 | }: {
14 |   params: { collection: string };
15 | }): Promise<Metadata> {
16 |   const collection = await getCategory(params.collection);
17 | 
18 |   if (!collection) return notFound();
19 | 
20 |   return {
21 |     title: collection.seo?.title || collection.title,
22 |     description:
23 |       collection.seo?.description || collection.description || `${collection.title} products`
24 |   };
25 | }
26 | 
27 | export default async function CategoryPage({
28 |   params,
29 |   searchParams
30 | }: {
31 |   params: { collection: string };
32 |   searchParams?: { [key: string]: string | string[] | undefined };
33 | }) {
34 |   const { sort } = searchParams as { [key: string]: string };
35 |   const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
36 |   const products = await getCategoryProducts(params.collection, reverse, sortKey);
37 | 
38 |   return (
39 |     <section>
40 |       {products.length === 0 ? (
41 |         <p className="py-3 text-lg">{`No products found in this collection`}</p>
42 |       ) : (
43 |         <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
44 |           <ProductGridItems products={products} />
45 |         </Grid>
46 |       )}
47 |     </section>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/app/search/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Footer from 'components/layout/footer';
 2 | import Collections from 'components/layout/search/collections';
 3 | import FilterList from 'components/layout/search/filter';
 4 | import { sorting } from 'lib/constants';
 5 | import { Suspense } from 'react';
 6 | 
 7 | export default function SearchLayout({ children }: { children: React.ReactNode }) {
 8 |   return (
 9 |     <Suspense>
10 |       <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
11 |         <div className="order-first w-full flex-none md:max-w-[125px]">
12 |           <Collections />
13 |         </div>
14 |         <div className="order-last min-h-screen w-full md:order-none">{children}</div>
15 |         <div className="order-none flex-none md:order-last md:w-[125px]">
16 |           <FilterList list={sorting} title="Sort by" />
17 |         </div>
18 |       </div>
19 |       <Footer />
20 |     </Suspense>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/app/search/loading.tsx:
--------------------------------------------------------------------------------
 1 | import Grid from 'components/grid';
 2 | 
 3 | export default function Loading() {
 4 |   return (
 5 |     <Grid className="grid-cols-2 lg:grid-cols-3">
 6 |       {Array(12)
 7 |         .fill(0)
 8 |         .map((_, index) => {
 9 |           return (
10 |             <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
11 |           );
12 |         })}
13 |     </Grid>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/app/search/page.tsx:
--------------------------------------------------------------------------------
 1 | import Grid from 'components/grid';
 2 | import ProductGridItems from 'components/layout/product-grid-items';
 3 | import { defaultSort, sorting } from 'lib/constants';
 4 | import { getProducts } from 'lib/medusa';
 5 | 
 6 | export const runtime = 'edge';
 7 | 
 8 | export const metadata = {
 9 |   title: 'Search',
10 |   description: 'Search for products in the store.'
11 | };
12 | 
13 | export default async function SearchPage({
14 |   searchParams
15 | }: {
16 |   searchParams?: { [key: string]: string | string[] | undefined };
17 | }) {
18 |   const { sort, q: searchValue } = searchParams as { [key: string]: string };
19 |   const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
20 | 
21 |   const products = await getProducts({ sortKey, reverse, query: searchValue });
22 |   const resultsText = products.length > 1 ? 'results' : 'result';
23 | 
24 |   return (
25 |     <>
26 |       {searchValue ? (
27 |         <p className="mb-4">
28 |           {products.length === 0
29 |             ? 'There are no products that match '
30 |             : `Showing ${products.length} ${resultsText} for `}
31 |           <span className="font-bold">&quot;{searchValue}&quot;</span>
32 |         </p>
33 |       ) : null}
34 |       {products.length > 0 ? (
35 |         <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
36 |           <ProductGridItems products={products} />
37 |         </Grid>
38 |       ) : null}
39 |     </>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/app/sitemap.ts:
--------------------------------------------------------------------------------
 1 | import { getCategories, getProducts } from 'lib/medusa';
 2 | import { MetadataRoute } from 'next';
 3 | 
 4 | type Route = {
 5 |   url: string;
 6 |   lastModified: string;
 7 | };
 8 | 
 9 | const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
10 |   ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
11 |   : 'http://localhost:3000';
12 | 
13 | export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
14 |   const routesMap = [''].map((route) => ({
15 |     url: `${baseUrl}${route}`,
16 |     lastModified: new Date().toISOString()
17 |   }));
18 | 
19 |   const collections = await getCategories();
20 |   const collectionsPromise = collections.map((collection) => ({
21 |     url: `${baseUrl}${collection.path}`,
22 |     lastModified: collection.updatedAt.toString()
23 |   }));
24 | 
25 |   const productsPromise = getProducts({}).then((products) =>
26 |     products.map((product) => ({
27 |       url: `${baseUrl}/product/${product.handle}`,
28 |       lastModified: product.updatedAt.toString()
29 |     }))
30 |   );
31 | 
32 |   let fetchedRoutes: Route[] = [];
33 | 
34 |   try {
35 |     fetchedRoutes = (await Promise.all([collectionsPromise, productsPromise])).flat();
36 |   } catch (error) {
37 |     throw JSON.stringify(error, null, 2);
38 |   }
39 | 
40 |   return [...routesMap, ...fetchedRoutes];
41 | }
42 | 


--------------------------------------------------------------------------------
/components/carousel.tsx:
--------------------------------------------------------------------------------
 1 | import { getCategoryProducts } from 'lib/medusa';
 2 | import Link from 'next/link';
 3 | import { GridTileImage } from './grid/tile';
 4 | 
 5 | export async function Carousel() {
 6 |   // Collections that start with `hidden-*` are hidden from the search page.
 7 |   const products = await getCategoryProducts('hidden-homepage-carousel');
 8 | 
 9 |   if (!products?.length) return null;
10 | 
11 |   // Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
12 |   const carouselProducts = [...products, ...products, ...products];
13 | 
14 |   return (
15 |     <div className=" w-full overflow-x-auto pb-6 pt-1">
16 |       <ul className="flex animate-carousel gap-4">
17 |         {carouselProducts.map((product, i) => (
18 |           <li
19 |             key={`${product.handle}${i}`}
20 |             className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
21 |           >
22 |             <Link href={`/product/${product.handle}`} className="relative h-full w-full">
23 |               <GridTileImage
24 |                 alt={product.featuredImage?.altText}
25 |                 label={{
26 |                   title: product.title,
27 |                   amount: product.priceRange.maxVariantPrice.amount,
28 |                   currencyCode: product.priceRange.maxVariantPrice.currencyCode
29 |                 }}
30 |                 src={product.featuredImage?.url}
31 |                 fill
32 |                 sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
33 |               />
34 |             </Link>
35 |           </li>
36 |         ))}
37 |       </ul>
38 |     </div>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/components/cart/actions.ts:
--------------------------------------------------------------------------------
 1 | 'use server';
 2 | 
 3 | import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/medusa';
 4 | import { cookies } from 'next/headers';
 5 | 
 6 | export const addItem = async (variantId: string | undefined): Promise<String | undefined> => {
 7 |   let cartId = cookies().get('cartId')?.value;
 8 |   let cart;
 9 | 
10 |   if (cartId) {
11 |     cart = await getCart(cartId);
12 |   }
13 | 
14 |   if (!cartId || !cart) {
15 |     cart = await createCart();
16 |     cartId = cart.id!;
17 |     cookies().set('cartId', cartId);
18 |   }
19 | 
20 |   if (!variantId) {
21 |     return 'Missing product variant ID';
22 |   }
23 | 
24 |   try {
25 |     await addToCart(cartId, { variantId, quantity: 1 });
26 |   } catch (e) {
27 |     return 'Error adding item to cart';
28 |   }
29 | };
30 | 
31 | export const removeItem = async (lineId: string): Promise<String | undefined> => {
32 |   const cartId = cookies().get('cartId')?.value;
33 | 
34 |   if (!cartId) {
35 |     return 'Missing cart ID';
36 |   }
37 |   try {
38 |     await removeFromCart(cartId, lineId);
39 |   } catch (e) {
40 |     return 'Error removing item from cart';
41 |   }
42 | };
43 | 
44 | export const updateItemQuantity = async ({
45 |   lineId,
46 |   variantId,
47 |   quantity
48 | }: {
49 |   lineId: string;
50 |   variantId: string;
51 |   quantity: number;
52 | }): Promise<String | undefined> => {
53 |   const cartId = cookies().get('cartId')?.value;
54 | 
55 |   if (!cartId) {
56 |     return 'Missing cart ID';
57 |   }
58 |   try {
59 |     await updateCart(cartId, {
60 |       lineItemId: lineId,
61 |       quantity
62 |     });
63 |   } catch (e) {
64 |     return 'Error updating item quantity';
65 |   }
66 | };
67 | 


--------------------------------------------------------------------------------
/components/cart/add-to-cart.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { PlusIcon } from '@heroicons/react/24/outline';
 4 | import clsx from 'clsx';
 5 | import { addItem } from 'components/cart/actions';
 6 | import LoadingDots from 'components/loading-dots';
 7 | import { ProductVariant } from 'lib/medusa/types';
 8 | import { useRouter, useSearchParams } from 'next/navigation';
 9 | import { useTransition } from 'react';
10 | 
11 | export function AddToCart({
12 |   variants,
13 |   availableForSale
14 | }: {
15 |   variants: ProductVariant[];
16 |   availableForSale: boolean;
17 | }) {
18 |   const router = useRouter();
19 |   const searchParams = useSearchParams();
20 |   const [isPending, startTransition] = useTransition();
21 |   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
22 |   const variant = variants.find((variant: ProductVariant) =>
23 |     variant.selectedOptions.every(
24 |       (option) => option.value === searchParams.get(option.name.toLowerCase())
25 |     )
26 |   );
27 |   const selectedVariantId = variant?.id || defaultVariantId;
28 |   const title = !availableForSale
29 |     ? 'Out of stock'
30 |     : !selectedVariantId
31 |     ? 'Please select options'
32 |     : undefined;
33 | 
34 |   return (
35 |     <button
36 |       aria-label="Add item to cart"
37 |       disabled={isPending || !availableForSale || !selectedVariantId}
38 |       title={title}
39 |       onClick={() => {
40 |         // Safeguard in case someone messes with `disabled` in devtools.
41 |         if (!availableForSale || !selectedVariantId) return;
42 | 
43 |         startTransition(async () => {
44 |           const error = await addItem(selectedVariantId);
45 | 
46 |           if (error) {
47 |             // Trigger the error boundary in the root error.js
48 |             throw new Error(error.toString());
49 |           }
50 | 
51 |           router.refresh();
52 |         });
53 |       }}
54 |       className={clsx(
55 |         'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
56 |         {
57 |           'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
58 |           'cursor-not-allowed': isPending
59 |         }
60 |       )}
61 |     >
62 |       <div className="absolute left-0 ml-4">
63 |         {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
64 |       </div>
65 |       <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
66 |     </button>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/components/cart/close-cart.tsx:
--------------------------------------------------------------------------------
 1 | import { XMarkIcon } from '@heroicons/react/24/outline';
 2 | import clsx from 'clsx';
 3 | 
 4 | export default function CloseCart({ className }: { className?: string }) {
 5 |   return (
 6 |     <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
 7 |       <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
 8 |     </div>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/cart/delete-item-button.tsx:
--------------------------------------------------------------------------------
 1 | import CloseIcon from 'components/icons/close';
 2 | import LoadingDots from 'components/loading-dots';
 3 | import { useRouter } from 'next/navigation';
 4 | 
 5 | import clsx from 'clsx';
 6 | import { removeItem } from 'components/cart/actions';
 7 | import type { CartItem } from 'lib/medusa/types';
 8 | import { useTransition } from 'react';
 9 | 
10 | export default function DeleteItemButton({ item }: { item: CartItem }) {
11 |   const router = useRouter();
12 |   const [isPending, startTransition] = useTransition();
13 | 
14 |   return (
15 |     <button
16 |       aria-label="Remove cart item"
17 |       onClick={() => {
18 |         startTransition(async () => {
19 |           const error = await removeItem(item.id);
20 | 
21 |           if (error) {
22 |             // Trigger the error boundary in the root error.js
23 |             throw new Error(error.toString());
24 |           }
25 | 
26 |           router.refresh();
27 |         });
28 |       }}
29 |       disabled={isPending}
30 |       className={clsx(
31 |         'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
32 |         {
33 |           'cursor-not-allowed px-0': isPending
34 |         }
35 |       )}
36 |     >
37 |       {isPending ? (
38 |         <LoadingDots className="bg-white" />
39 |       ) : (
40 |         <CloseIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
41 |       )}
42 |     </button>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/components/cart/edit-item-quantity-button.tsx:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/navigation';
 2 | import { useTransition } from 'react';
 3 | 
 4 | import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 5 | import clsx from 'clsx';
 6 | import { removeItem, updateItemQuantity } from 'components/cart/actions';
 7 | import LoadingDots from 'components/loading-dots';
 8 | import type { CartItem } from 'lib/medusa/types';
 9 | 
10 | export default function EditItemQuantityButton({
11 |   item,
12 |   type
13 | }: {
14 |   item: CartItem;
15 |   type: 'plus' | 'minus';
16 | }) {
17 |   const router = useRouter();
18 |   const [isPending, startTransition] = useTransition();
19 | 
20 |   return (
21 |     <button
22 |       aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
23 |       onClick={() => {
24 |         startTransition(async () => {
25 |           const error =
26 |             type === 'minus' && item.quantity - 1 === 0
27 |               ? await removeItem(item.id)
28 |               : await updateItemQuantity({
29 |                   lineId: item.id,
30 |                   variantId: item.merchandise.id,
31 |                   quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
32 |                 });
33 | 
34 |           if (error) {
35 |             // Trigger the error boundary in the root error.js
36 |             throw new Error(error.toString());
37 |           }
38 | 
39 |           router.refresh();
40 |         });
41 |       }}
42 |       disabled={isPending}
43 |       className={clsx(
44 |         'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
45 |         {
46 |           'cursor-not-allowed': isPending,
47 |           'ml-auto': type === 'minus'
48 |         }
49 |       )}
50 |     >
51 |       {isPending ? (
52 |         <LoadingDots className="bg-black dark:bg-white" />
53 |       ) : type === 'plus' ? (
54 |         <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
55 |       ) : (
56 |         <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
57 |       )}
58 |     </button>
59 |   );
60 | }
61 | 


--------------------------------------------------------------------------------
/components/cart/index.tsx:
--------------------------------------------------------------------------------
 1 | import { createCart, getCart } from 'lib/medusa';
 2 | import { cookies } from 'next/headers';
 3 | import CartModal from './modal';
 4 | 
 5 | export default async function Cart() {
 6 |   const cartId = cookies().get('cartId')?.value;
 7 |   let cart;
 8 | 
 9 |   if (cartId) {
10 |     cart = await getCart(cartId);
11 |   }
12 | 
13 |   // If the `cartId` from the cookie is not set or the cart is empty
14 |   // (old carts becomes `null` when you checkout), then get a new `cartId`
15 |   //  and re-fetch the cart.
16 |   if (!cartId || !cart) {
17 |     cart = await createCart();
18 |   }
19 | 
20 |   return <CartModal cart={cart} />;
21 | }
22 | 


--------------------------------------------------------------------------------
/components/cart/modal.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { Dialog, Transition } from '@headlessui/react';
  4 | import { ShoppingCartIcon } from '@heroicons/react/24/outline';
  5 | import Price from 'components/price';
  6 | import { DEFAULT_OPTION } from 'lib/constants';
  7 | import type { Cart } from 'lib/medusa/types';
  8 | import { createUrl } from 'lib/utils';
  9 | import Image from 'next/image';
 10 | import Link from 'next/link';
 11 | import { Fragment, useEffect, useRef, useState } from 'react';
 12 | import CloseCart from './close-cart';
 13 | import DeleteItemButton from './delete-item-button';
 14 | import EditItemQuantityButton from './edit-item-quantity-button';
 15 | import OpenCart from './open-cart';
 16 | 
 17 | type MerchandiseSearchParams = {
 18 |   [key: string]: string;
 19 | };
 20 | 
 21 | export default function CartModal({ cart }: { cart: Cart | undefined }) {
 22 |   const [isOpen, setIsOpen] = useState(false);
 23 |   const quantityRef = useRef(cart?.totalQuantity);
 24 |   const openCart = () => setIsOpen(true);
 25 |   const closeCart = () => setIsOpen(false);
 26 | 
 27 |   useEffect(() => {
 28 |     // Open cart modal when quantity changes.
 29 |     if (cart?.totalQuantity !== quantityRef.current) {
 30 |       // But only if it's not already open (quantity also changes when editing items in cart).
 31 |       if (!isOpen) {
 32 |         setIsOpen(true);
 33 |       }
 34 | 
 35 |       // Always update the quantity reference
 36 |       quantityRef.current = cart?.totalQuantity;
 37 |     }
 38 |   }, [isOpen, cart?.totalQuantity, quantityRef]);
 39 | 
 40 |   return (
 41 |     <>
 42 |       <button aria-label="Open cart" onClick={openCart}>
 43 |         <OpenCart quantity={cart?.totalQuantity} />
 44 |       </button>
 45 |       <Transition show={isOpen}>
 46 |         <Dialog onClose={closeCart} className="relative z-50">
 47 |           <Transition.Child
 48 |             as={Fragment}
 49 |             enter="transition-all ease-in-out duration-300"
 50 |             enterFrom="opacity-0 backdrop-blur-none"
 51 |             enterTo="opacity-100 backdrop-blur-[.5px]"
 52 |             leave="transition-all ease-in-out duration-200"
 53 |             leaveFrom="opacity-100 backdrop-blur-[.5px]"
 54 |             leaveTo="opacity-0 backdrop-blur-none"
 55 |           >
 56 |             <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
 57 |           </Transition.Child>
 58 |           <Transition.Child
 59 |             as={Fragment}
 60 |             enter="transition-all ease-in-out duration-300"
 61 |             enterFrom="translate-x-full"
 62 |             enterTo="translate-x-0"
 63 |             leave="transition-all ease-in-out duration-200"
 64 |             leaveFrom="translate-x-0"
 65 |             leaveTo="translate-x-full"
 66 |           >
 67 |             <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
 68 |               <div className="flex items-center justify-between">
 69 |                 <p className="text-lg font-semibold">My Cart</p>
 70 | 
 71 |                 <button aria-label="Close cart" onClick={closeCart}>
 72 |                   <CloseCart />
 73 |                 </button>
 74 |               </div>
 75 | 
 76 |               {!cart || cart.lines.length === 0 ? (
 77 |                 <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
 78 |                   <ShoppingCartIcon className="h-16" />
 79 |                   <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
 80 |                 </div>
 81 |               ) : (
 82 |                 <div className="flex h-full flex-col justify-between overflow-hidden p-1">
 83 |                   <ul className="flex-grow overflow-auto py-4">
 84 |                     {cart.lines.map((item, i) => {
 85 |                       const merchandiseSearchParams = {} as MerchandiseSearchParams;
 86 | 
 87 |                       item.merchandise.selectedOptions.forEach(({ name, value }) => {
 88 |                         if (value !== DEFAULT_OPTION) {
 89 |                           merchandiseSearchParams[name.toLowerCase()] = value;
 90 |                         }
 91 |                       });
 92 | 
 93 |                       const merchandiseUrl = createUrl(
 94 |                         `/product/${item.merchandise.product.handle}`,
 95 |                         new URLSearchParams(merchandiseSearchParams)
 96 |                       );
 97 | 
 98 |                       return (
 99 |                         <li
100 |                           key={i}
101 |                           className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
102 |                         >
103 |                           <div className="relative flex w-full flex-row justify-between px-1 py-4">
104 |                             <div className="absolute z-40 -mt-2 ml-[55px]">
105 |                               <DeleteItemButton item={item} />
106 |                             </div>
107 |                             <Link
108 |                               href={merchandiseUrl}
109 |                               onClick={closeCart}
110 |                               className="z-30 flex flex-row space-x-4"
111 |                             >
112 |                               <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
113 |                                 <Image
114 |                                   className="h-full w-full object-cover"
115 |                                   width={64}
116 |                                   height={64}
117 |                                   alt={
118 |                                     item.merchandise.product.featuredImage.altText ||
119 |                                     item.merchandise.product.title
120 |                                   }
121 |                                   src={item.merchandise.product.featuredImage.url}
122 |                                 />
123 |                               </div>
124 | 
125 |                               <div className="flex flex-1 flex-col text-base">
126 |                                 <span className="leading-tight">
127 |                                   {item.merchandise.product.title}
128 |                                 </span>
129 |                                 {item.merchandise.title !== DEFAULT_OPTION ? (
130 |                                   <p className="text-sm text-neutral-500 dark:text-neutral-400">
131 |                                     {item.merchandise.title}
132 |                                   </p>
133 |                                 ) : null}
134 |                               </div>
135 |                             </Link>
136 |                             <div className="flex h-16 flex-col justify-between">
137 |                               <Price
138 |                                 className="flex justify-end space-y-2 text-right text-sm"
139 |                                 amount={item.cost.totalAmount.amount}
140 |                                 currencyCode={item.cost.totalAmount.currencyCode}
141 |                               />
142 |                               <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
143 |                                 <EditItemQuantityButton item={item} type="minus" />
144 |                                 <p className="w-6 text-center">
145 |                                   <span className="w-full text-sm">{item.quantity}</span>
146 |                                 </p>
147 |                                 <EditItemQuantityButton item={item} type="plus" />
148 |                               </div>
149 |                             </div>
150 |                           </div>
151 |                         </li>
152 |                       );
153 |                     })}
154 |                   </ul>
155 |                   <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
156 |                     <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
157 |                       <p>Taxes</p>
158 |                       <Price
159 |                         className="text-right text-base text-black dark:text-white"
160 |                         amount={cart.cost.totalTaxAmount.amount}
161 |                         currencyCode={cart.cost.totalTaxAmount.currencyCode}
162 |                       />
163 |                     </div>
164 |                     <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
165 |                       <p>Shipping</p>
166 |                       <p className="text-right">Calculated at checkout</p>
167 |                     </div>
168 |                     <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
169 |                       <p>Total</p>
170 |                       <Price
171 |                         className="text-right text-base text-black dark:text-white"
172 |                         amount={cart.cost.totalAmount.amount}
173 |                         currencyCode={cart.cost.totalAmount.currencyCode}
174 |                       />
175 |                     </div>
176 |                   </div>
177 |                   <a
178 |                     href={cart.checkoutUrl}
179 |                     className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
180 |                   >
181 |                     Proceed to Checkout
182 |                   </a>
183 |                 </div>
184 |               )}
185 |             </Dialog.Panel>
186 |           </Transition.Child>
187 |         </Dialog>
188 |       </Transition>
189 |     </>
190 |   );
191 | }
192 | 


--------------------------------------------------------------------------------
/components/cart/open-cart.tsx:
--------------------------------------------------------------------------------
 1 | import { ShoppingCartIcon } from '@heroicons/react/24/outline';
 2 | import clsx from 'clsx';
 3 | 
 4 | export default function OpenCart({
 5 |   className,
 6 |   quantity
 7 | }: {
 8 |   className?: string;
 9 |   quantity?: number;
10 | }) {
11 |   return (
12 |     <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
13 |       <ShoppingCartIcon
14 |         className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
15 |       />
16 | 
17 |       {quantity ? (
18 |         <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-600 text-[11px] font-medium text-white">
19 |           {quantity}
20 |         </div>
21 |       ) : null}
22 |     </div>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/components/grid/index.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | 
 3 | function Grid(props: React.ComponentProps<'ul'>) {
 4 |   return (
 5 |     <ul {...props} className={clsx('grid grid-flow-row gap-4', props.className)}>
 6 |       {props.children}
 7 |     </ul>
 8 |   );
 9 | }
10 | 
11 | function GridItem(props: React.ComponentProps<'li'>) {
12 |   return (
13 |     <li {...props} className={clsx('aspect-square transition-opacity', props.className)}>
14 |       {props.children}
15 |     </li>
16 |   );
17 | }
18 | 
19 | Grid.Item = GridItem;
20 | 
21 | export default Grid;
22 | 


--------------------------------------------------------------------------------
/components/grid/three-items.tsx:
--------------------------------------------------------------------------------
 1 | import { GridTileImage } from 'components/grid/tile';
 2 | import { getCategoryProducts } from 'lib/medusa';
 3 | import type { Product } from 'lib/medusa/types';
 4 | import Link from 'next/link';
 5 | 
 6 | function ThreeItemGridItem({
 7 |   item,
 8 |   size,
 9 |   priority
10 | }: {
11 |   item: Product;
12 |   size: 'full' | 'half';
13 |   priority?: boolean;
14 | }) {
15 |   return (
16 |     <div
17 |       className={size === 'full' ? 'md:col-span-4 md:row-span-2' : 'md:col-span-2 md:row-span-1'}
18 |     >
19 |       <Link className="relative block aspect-square h-full w-full" href={`/product/${item.handle}`}>
20 |         <GridTileImage
21 |           src={item.featuredImage.url}
22 |           fill
23 |           sizes={
24 |             size === 'full' ? '(min-width: 768px) 66vw, 100vw' : '(min-width: 768px) 33vw, 100vw'
25 |           }
26 |           priority={priority}
27 |           alt={item.title}
28 |           label={{
29 |             position: size === 'full' ? 'center' : 'bottom',
30 |             title: item.title as string,
31 |             amount: item.priceRange.maxVariantPrice.amount,
32 |             currencyCode: item.priceRange.maxVariantPrice.currencyCode
33 |           }}
34 |         />
35 |       </Link>
36 |     </div>
37 |   );
38 | }
39 | 
40 | export async function ThreeItemGrid() {
41 |   // Collections that start with `hidden-*` are hidden from the search page.
42 |   const homepageItems = await getCategoryProducts('hidden-homepage-featured-items');
43 | 
44 |   if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
45 | 
46 |   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
47 | 
48 |   return (
49 |     <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2">
50 |       <ThreeItemGridItem size="full" item={firstProduct} priority={true} />
51 |       <ThreeItemGridItem size="half" item={secondProduct} priority={true} />
52 |       <ThreeItemGridItem size="half" item={thirdProduct} />
53 |     </section>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/components/grid/tile.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | import Image from 'next/image';
 3 | import Label from '../label';
 4 | 
 5 | export function GridTileImage({
 6 |   isInteractive = true,
 7 |   active,
 8 |   label,
 9 |   ...props
10 | }: {
11 |   isInteractive?: boolean;
12 |   active?: boolean;
13 |   label?: {
14 |     title: string;
15 |     amount: string;
16 |     currencyCode: string;
17 |     position?: 'bottom' | 'center';
18 |   };
19 | } & React.ComponentProps<typeof Image>) {
20 |   return (
21 |     <div
22 |       className={clsx(
23 |         'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
24 |         {
25 |           relative: label,
26 |           'border-2 border-blue-600': active,
27 |           'border-neutral-200 dark:border-neutral-800': !active
28 |         }
29 |       )}
30 |     >
31 |       {props.src ? (
32 |         // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
33 |         <Image
34 |           className={clsx('relative h-full w-full object-contain', {
35 |             'transition duration-300 ease-in-out hover:scale-105': isInteractive
36 |           })}
37 |           {...props}
38 |         />
39 |       ) : null}
40 |       {label ? (
41 |         <Label
42 |           title={label.title}
43 |           amount={label.amount}
44 |           currencyCode={label.currencyCode}
45 |           position={label.position}
46 |         />
47 |       ) : null}
48 |     </div>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/components/icons/arrow-left.tsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowLeftIcon({ className }: { className?: string }) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       viewBox="0 0 24 24"
 6 |       fill="currentColor"
 7 |       shapeRendering="geometricPrecision"
 8 |       className={className}
 9 |     >
10 |       <path d="M19 12H5" />
11 |       <path d="M12 19L5 12L12 5" />
12 |     </svg>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/icons/close.tsx:
--------------------------------------------------------------------------------
 1 | export default function CloseIcon({ className }: { className?: string }) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       viewBox="0 0 24 24"
 6 |       stroke="currentColor"
 7 |       strokeWidth="1.5"
 8 |       strokeLinecap="round"
 9 |       strokeLinejoin="round"
10 |       shapeRendering="geometricPrecision"
11 |       className={className}
12 |     >
13 |       <path d="M18 6L6 18" />
14 |       <path d="M6 6l12 12" />
15 |     </svg>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/components/icons/logo.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | 
 3 | export default function LogoIcon(props: React.ComponentProps<'svg'>) {
 4 |   return (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       aria-label={`${process.env.SITE_NAME} logo`}
 8 |       viewBox="0 0 32 28"
 9 |       {...props}
10 |       className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
11 |     >
12 |       <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
13 |       <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />
14 |     </svg>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components/icons/medusa.tsx:
--------------------------------------------------------------------------------
 1 | export default function MedusaIcon({ className }: { className?: string }) {
 2 |   return (
 3 |     <svg
 4 |       width="100"
 5 |       height="24"
 6 |       viewBox="0 0 100 24"
 7 |       fill="none"
 8 |       xmlns="http://www.w3.org/2000/svg"
 9 |       className={className}
10 |     >
11 |       <path
12 |         d="M36.1237 17.3933H33.7586V11.2205C33.7586 10.5323 33.5912 9.99157 33.2563 9.59832C32.9214 9.19101 32.461 8.98736 31.8749 8.98736C31.2052 8.98736 30.6819 9.21208 30.3052 9.66152C29.9424 10.111 29.761 10.7289 29.761 11.5154V17.3933H27.375V7.07023H29.7191V7.97612C30.361 7.20365 31.247 6.81742 32.3772 6.81742C33.647 6.81742 34.6028 7.26685 35.2446 8.16573C36.04 7.26685 37.1074 6.81742 38.4469 6.81742C39.7864 6.81742 40.798 7.21067 41.4817 7.99719C42.1794 8.76966 42.5282 9.90028 42.5282 11.389V17.3933H40.1422V11.2205C40.1422 10.5323 39.9748 9.99157 39.6399 9.59832C39.305 9.19101 38.8446 8.98736 38.2585 8.98736C37.5888 8.98736 37.0655 9.2191 36.6888 9.68258C36.3121 10.132 36.1237 10.743 36.1237 11.5154V17.3933Z"
13 |         fill="currentColor"
14 |       />
15 |       <path
16 |         d="M53.9263 12.1053L53.9054 12.948H46.8939C46.9497 13.7205 47.2218 14.3315 47.7102 14.7809C48.1985 15.2303 48.8264 15.4551 49.5939 15.4551C50.6962 15.4551 51.5752 14.9705 52.231 14.0014L53.8426 15.5183C52.7543 16.9228 51.338 17.625 49.5939 17.625C48.0451 17.625 46.8032 17.1334 45.8683 16.1503C44.9195 15.1531 44.4451 13.868 44.4451 12.2949C44.4451 10.764 44.8777 9.46489 45.7428 8.39747C46.6218 7.3441 47.7869 6.81742 49.2381 6.81742C50.7869 6.81742 51.952 7.33708 52.7333 8.3764C53.5287 9.41573 53.9263 10.6587 53.9263 12.1053ZM49.259 9.00843C48.659 9.00843 48.1637 9.19803 47.773 9.57725C47.3962 9.95646 47.1451 10.441 47.0195 11.0309H51.3938C51.3799 10.4551 51.1915 9.97753 50.8287 9.59832C50.4659 9.20506 49.9427 9.00843 49.259 9.00843Z"
17 |         fill="currentColor"
18 |       />
19 |       <path
20 |         d="M60.7454 6.81742C61.8896 6.81742 62.8454 7.15449 63.6128 7.82865V2.625H65.9988V17.3933H63.6547V16.4663C62.9291 17.2388 61.9593 17.625 60.7454 17.625C59.2943 17.625 58.0943 17.1194 57.1455 16.1081C56.2106 15.0829 55.7432 13.7907 55.7432 12.2317C55.7432 10.6728 56.2106 9.38062 57.1455 8.35534C58.0803 7.33006 59.2803 6.81742 60.7454 6.81742ZM62.9221 9.87219C62.4337 9.25421 61.764 8.94522 60.9128 8.94522C60.0617 8.94522 59.3919 9.25421 58.9036 9.87219C58.4152 10.4902 58.171 11.2767 58.171 12.2317C58.171 13.1868 58.4152 13.9733 58.9036 14.5913C59.3919 15.2093 60.0617 15.5183 60.9128 15.5183C61.764 15.5183 62.4337 15.2093 62.9221 14.5913C63.4105 13.9733 63.6547 13.1868 63.6547 12.2317C63.6547 11.2767 63.4105 10.4902 62.9221 9.87219Z"
21 |         fill="currentColor"
22 |       />
23 |       <path
24 |         d="M68.4165 7.07023H70.8025V13.243C70.8025 13.9312 70.97 14.4789 71.3048 14.8862C71.6397 15.2795 72.1141 15.4761 72.7281 15.4761C73.3839 15.4761 73.9002 15.2444 74.2769 14.7809C74.6676 14.3034 74.8629 13.6713 74.8629 12.8848V7.07023H77.2489V17.3933H74.9048V16.5506C74.249 17.2669 73.363 17.625 72.2467 17.625C71.0746 17.625 70.1398 17.2247 69.4421 16.4242C68.7584 15.6096 68.4165 14.493 68.4165 13.0744V7.07023Z"
25 |         fill="currentColor"
26 |       />
27 |       <path
28 |         d="M84.1103 13.4958L82.7499 13.1587C80.6709 12.6671 79.6313 11.5787 79.6313 9.89326C79.6313 8.96629 79.9802 8.22191 80.6778 7.66011C81.3755 7.09831 82.2755 6.81742 83.3778 6.81742C84.8568 6.81742 86.1475 7.39326 87.2498 8.54494L85.7219 10.1882C85.094 9.31742 84.2917 8.88202 83.315 8.88202C82.8964 8.88202 82.5546 8.98034 82.2894 9.17697C82.0383 9.35955 81.9127 9.58427 81.9127 9.85112C81.9127 10.3287 82.2476 10.6517 82.9173 10.8202L84.5289 11.1994C86.6219 11.677 87.6684 12.7514 87.6684 14.4228C87.6684 15.3778 87.3056 16.1503 86.5801 16.7402C85.8684 17.3301 84.8778 17.625 83.608 17.625C81.822 17.625 80.4058 16.9579 79.3593 15.6236L80.8662 14.0646C81.6197 15.0618 82.5964 15.5604 83.7964 15.5604C84.8429 15.5604 85.3661 15.2093 85.3661 14.507C85.3661 14.0576 84.9475 13.7205 84.1103 13.4958Z"
29 |         fill="currentColor"
30 |       />
31 |       <path
32 |         d="M92.6007 17.625C91.61 17.625 90.7868 17.3441 90.1309 16.7823C89.4751 16.2065 89.1472 15.441 89.1472 14.486C89.1472 13.3904 89.5379 12.5407 90.3193 11.9368C91.1007 11.3329 92.1332 11.0309 93.4169 11.0309C94.0588 11.0309 94.7495 11.1503 95.489 11.389V10.6938C95.489 10.1882 95.3006 9.7809 94.9239 9.47191C94.5472 9.14888 94.0658 8.98736 93.4797 8.98736C92.4053 8.98736 91.596 9.48596 91.0519 10.4831L89.4403 8.96629C89.817 8.27809 90.3682 7.7514 91.0937 7.38624C91.8332 7.00702 92.6356 6.81742 93.5007 6.81742C94.8541 6.81742 95.9215 7.15449 96.7029 7.82865C97.4843 8.50281 97.875 9.46489 97.875 10.7149V17.3933H95.5309V16.5927C94.7634 17.2809 93.7867 17.625 92.6007 17.625ZM91.5332 14.3174C91.5332 14.6685 91.6658 14.9565 91.9309 15.1812C92.21 15.4059 92.5937 15.5183 93.0821 15.5183C94.0867 15.5183 94.889 15.2233 95.489 14.6334V13.4537C94.7355 13.1728 94.0239 13.0323 93.3541 13.0323C92.796 13.0323 92.3495 13.1447 92.0146 13.3694C91.6937 13.5941 91.5332 13.9101 91.5332 14.3174Z"
33 |         fill="currentColor"
34 |       />
35 |       <path
36 |         d="M18.6656 4.78218L13.8255 1.99752C12.2418 1.08416 10.3013 1.08416 8.71768 1.99752L3.85524 4.78218C2.29391 5.69554 1.3125 7.38861 1.3125 9.19307V14.7847C1.3125 16.6114 2.29391 18.2822 3.85524 19.1955L8.69538 22.0025C10.279 22.9158 12.2195 22.9158 13.8032 22.0025L18.6433 19.1955C20.2269 18.2822 21.186 16.6114 21.186 14.7847V9.19307C21.2307 7.38861 20.2492 5.69554 18.6656 4.78218ZM11.2604 16.9678C8.51694 16.9678 6.28646 14.7401 6.28646 12C6.28646 9.2599 8.51694 7.03218 11.2604 7.03218C14.0039 7.03218 16.2567 9.2599 16.2567 12C16.2567 14.7401 14.0262 16.9678 11.2604 16.9678Z"
37 |         fill="currentColor"
38 |       />
39 |     </svg>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/components/label.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | import Price from './price';
 3 | 
 4 | const Label = ({
 5 |   title,
 6 |   amount,
 7 |   currencyCode,
 8 |   position = 'bottom'
 9 | }: {
10 |   title: string;
11 |   amount: string;
12 |   currencyCode: string;
13 |   position?: 'bottom' | 'center';
14 | }) => {
15 |   return (
16 |     <div
17 |       className={clsx('absolute bottom-0 left-0 flex w-full px-4 pb-4 @container/label', {
18 |         'lg:px-20 lg:pb-[35%]': position === 'center'
19 |       })}
20 |     >
21 |       <div className="flex items-center rounded-full border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-md dark:border-neutral-800 dark:bg-black/70 dark:text-white">
22 |         <h3 className="mr-4 line-clamp-2 flex-grow pl-2 leading-none tracking-tight">{title}</h3>
23 |         <Price
24 |           className="flex-none rounded-full bg-blue-600 p-2 text-white"
25 |           amount={amount}
26 |           currencyCode={currencyCode}
27 |           currencyCodeClassName="hidden @[275px]/label:inline"
28 |         />
29 |       </div>
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default Label;
35 | 


--------------------------------------------------------------------------------
/components/layout/footer-menu.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import clsx from 'clsx';
 4 | import { Menu } from 'lib/medusa/types';
 5 | import Link from 'next/link';
 6 | import { usePathname } from 'next/navigation';
 7 | import { useEffect, useState } from 'react';
 8 | 
 9 | const FooterMenuItem = ({ item }: { item: Menu }) => {
10 |   const pathname = usePathname();
11 |   const [active, setActive] = useState(pathname === item.path);
12 | 
13 |   useEffect(() => {
14 |     setActive(pathname === item.path);
15 |   }, [pathname, item.path]);
16 | 
17 |   return (
18 |     <li>
19 |       <Link
20 |         href={item.path}
21 |         className={clsx(
22 |           'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
23 |           {
24 |             'text-black dark:text-neutral-300': active
25 |           }
26 |         )}
27 |       >
28 |         {item.title}
29 |       </Link>
30 |     </li>
31 |   );
32 | };
33 | 
34 | export default function FooterMenu({ menu }: { menu: Menu[] }) {
35 |   if (!menu.length) return null;
36 | 
37 |   return (
38 |     <nav>
39 |       <ul>
40 |         {menu.map((item: Menu) => {
41 |           return <FooterMenuItem key={item.title} item={item} />;
42 |         })}
43 |       </ul>
44 |     </nav>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/components/layout/footer.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | 
 3 | import MedusaIcon from 'components/icons/medusa';
 4 | import FooterMenu from 'components/layout/footer-menu';
 5 | import LogoSquare from 'components/logo-square';
 6 | import { getMenu } from 'lib/medusa';
 7 | import { Suspense } from 'react';
 8 | 
 9 | const { COMPANY_NAME, SITE_NAME } = process.env;
10 | 
11 | export default async function Footer() {
12 |   const currentYear = new Date().getFullYear();
13 |   const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
14 |   const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700';
15 |   const menu = await getMenu('next-js-frontend-footer-menu');
16 |   const copyrightName = COMPANY_NAME || SITE_NAME || '';
17 | 
18 |   return (
19 |     <footer className="text-sm text-neutral-500 dark:text-neutral-400">
20 |       <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0">
21 |         <div>
22 |           <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
23 |             <LogoSquare size="sm" />
24 |             <span className="uppercase">{SITE_NAME}</span>
25 |           </Link>
26 |         </div>
27 |         <Suspense
28 |           fallback={
29 |             <div className="flex h-[188px] w-[200px] flex-col gap-2">
30 |               <div className={skeleton} />
31 |               <div className={skeleton} />
32 |               <div className={skeleton} />
33 |               <div className={skeleton} />
34 |               <div className={skeleton} />
35 |               <div className={skeleton} />
36 |             </div>
37 |           }
38 |         >
39 |           <FooterMenu menu={menu} />
40 |         </Suspense>
41 |         <div className="md:ml-auto">
42 |           <a
43 |             className="flex h-8 flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
44 |             aria-label="Deploy on Vercel"
45 |             href="https://vercel.com/templates/next.js/nextjs-commerce"
46 |           >
47 |             <span className="px-3">▲</span>
48 |             <hr className="h-full border-r border-neutral-200 dark:border-neutral-700" />
49 |             <span className="px-3">Deploy</span>
50 |           </a>
51 |         </div>
52 |       </div>
53 |       <div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
54 |         <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 xl:px-0">
55 |           <p>
56 |             &copy; {copyrightDate} {copyrightName}
57 |             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
58 |           </p>
59 |           <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
60 |           <p>Designed in California</p>
61 |           <p className="md:ml-auto">
62 |             Crafted by{' '}
63 |             <a
64 |               rel="noopener noreferrer"
65 |               href="https://medusajs.com"
66 |               aria-label="Vmedusajs.com Link"
67 |               target="_blank"
68 |               className="text-black dark:text-white"
69 |             >
70 |               <MedusaIcon className="ml-3 inline-block h-6" />
71 |             </a>
72 |           </p>
73 |         </div>
74 |       </div>
75 |     </footer>
76 |   );
77 | }
78 | 


--------------------------------------------------------------------------------
/components/layout/navbar/index.tsx:
--------------------------------------------------------------------------------
 1 | import Cart from 'components/cart';
 2 | import OpenCart from 'components/cart/open-cart';
 3 | import LogoSquare from 'components/logo-square';
 4 | import { getMenu } from 'lib/medusa';
 5 | import { Menu } from 'lib/medusa/types';
 6 | import Link from 'next/link';
 7 | import { Suspense } from 'react';
 8 | import MobileMenu from './mobile-menu';
 9 | import Search from './search';
10 | const { SITE_NAME } = process.env;
11 | 
12 | export default async function Navbar() {
13 |   const menu = await getMenu('next-js-frontend-header-menu');
14 | 
15 |   return (
16 |     <nav className="relative flex items-center justify-between p-4 lg:px-6">
17 |       <div className="block flex-none md:hidden">
18 |         <MobileMenu menu={menu} />
19 |       </div>
20 |       <div className="flex w-full items-center">
21 |         <div className="flex w-full md:w-1/3">
22 |           <Link
23 |             href="/"
24 |             aria-label="Go back home"
25 |             className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
26 |           >
27 |             <LogoSquare />
28 |             <div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
29 |               {SITE_NAME}
30 |             </div>
31 |           </Link>
32 |           {menu.length ? (
33 |             <ul className="hidden gap-6 text-sm md:flex md:items-center">
34 |               {menu.map((item: Menu) => (
35 |                 <li key={item.title}>
36 |                   <Link
37 |                     href={item.path}
38 |                     className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
39 |                   >
40 |                     {item.title}
41 |                   </Link>
42 |                 </li>
43 |               ))}
44 |             </ul>
45 |           ) : null}
46 |         </div>
47 |         <div className="hidden justify-center md:flex md:w-1/3">
48 |           <Search />
49 |         </div>
50 |         <div className="flex justify-end md:w-1/3">
51 |           <Suspense fallback={<OpenCart />}>
52 |             <Cart />
53 |           </Suspense>
54 |         </div>
55 |       </div>
56 |     </nav>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/components/layout/navbar/mobile-menu.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { Dialog, Transition } from '@headlessui/react';
 4 | import Link from 'next/link';
 5 | import { usePathname, useSearchParams } from 'next/navigation';
 6 | import { Fragment, useEffect, useState } from 'react';
 7 | 
 8 | import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 9 | import { Menu } from 'lib/medusa/types';
10 | import Search from './search';
11 | 
12 | export default function MobileMenu({ menu }: { menu: Menu[] }) {
13 |   const pathname = usePathname();
14 |   const searchParams = useSearchParams();
15 |   const [isOpen, setIsOpen] = useState(false);
16 |   const openMobileMenu = () => setIsOpen(true);
17 |   const closeMobileMenu = () => setIsOpen(false);
18 | 
19 |   useEffect(() => {
20 |     const handleResize = () => {
21 |       if (window.innerWidth > 768) {
22 |         setIsOpen(false);
23 |       }
24 |     };
25 |     window.addEventListener('resize', handleResize);
26 |     return () => window.removeEventListener('resize', handleResize);
27 |   }, [isOpen]);
28 | 
29 |   useEffect(() => {
30 |     setIsOpen(false);
31 |   }, [pathname, searchParams]);
32 | 
33 |   return (
34 |     <>
35 |       <button
36 |         onClick={openMobileMenu}
37 |         aria-label="Open mobile menu"
38 |         className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
39 |       >
40 |         <Bars3Icon className="h-4" />
41 |       </button>
42 |       <Transition show={isOpen}>
43 |         <Dialog onClose={closeMobileMenu} className="relative z-50">
44 |           <Transition.Child
45 |             as={Fragment}
46 |             enter="transition-all ease-in-out duration-300"
47 |             enterFrom="opacity-0 backdrop-blur-none"
48 |             enterTo="opacity-100 backdrop-blur-[.5px]"
49 |             leave="transition-all ease-in-out duration-200"
50 |             leaveFrom="opacity-100 backdrop-blur-[.5px]"
51 |             leaveTo="opacity-0 backdrop-blur-none"
52 |           >
53 |             <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
54 |           </Transition.Child>
55 |           <Transition.Child
56 |             as={Fragment}
57 |             enter="transition-all ease-in-out duration-300"
58 |             enterFrom="translate-x-[-100%]"
59 |             enterTo="translate-x-0"
60 |             leave="transition-all ease-in-out duration-200"
61 |             leaveFrom="translate-x-0"
62 |             leaveTo="translate-x-[-100%]"
63 |           >
64 |             <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
65 |               <div className="p-4">
66 |                 <button
67 |                   className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"
68 |                   onClick={closeMobileMenu}
69 |                   aria-label="Close mobile menu"
70 |                 >
71 |                   <XMarkIcon className="h-6" />
72 |                 </button>
73 | 
74 |                 <div className="mb-4 w-full">
75 |                   <Search />
76 |                 </div>
77 |                 {menu.length ? (
78 |                   <ul className="flex w-full flex-col">
79 |                     {menu.map((item: Menu) => (
80 |                       <li
81 |                         className="py-2 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
82 |                         key={item.title}
83 |                       >
84 |                         <Link href={item.path} onClick={closeMobileMenu}>
85 |                           {item.title}
86 |                         </Link>
87 |                       </li>
88 |                     ))}
89 |                   </ul>
90 |                 ) : null}
91 |               </div>
92 |             </Dialog.Panel>
93 |           </Transition.Child>
94 |         </Dialog>
95 |       </Transition>
96 |     </>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/components/layout/navbar/search.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useRouter, useSearchParams } from 'next/navigation';
 4 | import { useEffect, useState } from 'react';
 5 | 
 6 | import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 7 | import { createUrl } from 'lib/utils';
 8 | 
 9 | export default function Search() {
10 |   const router = useRouter();
11 |   const searchParams = useSearchParams();
12 |   const [searchValue, setSearchValue] = useState('');
13 | 
14 |   useEffect(() => {
15 |     setSearchValue(searchParams?.get('q') || '');
16 |   }, [searchParams, setSearchValue]);
17 | 
18 |   function onSubmit(e: React.FormEvent<HTMLFormElement>) {
19 |     e.preventDefault();
20 | 
21 |     const val = e.target as HTMLFormElement;
22 |     const search = val.search as HTMLInputElement;
23 |     const newParams = new URLSearchParams(searchParams.toString());
24 | 
25 |     if (search.value) {
26 |       newParams.set('q', search.value);
27 |     } else {
28 |       newParams.delete('q');
29 |     }
30 | 
31 |     router.push(createUrl('/search', newParams));
32 |   }
33 | 
34 |   return (
35 |     <form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
36 |       <input
37 |         type="text"
38 |         name="search"
39 |         placeholder="Search for products..."
40 |         autoComplete="off"
41 |         value={searchValue}
42 |         onChange={(e) => setSearchValue(e.target.value)}
43 |         className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
44 |       />
45 |       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
46 |         <MagnifyingGlassIcon className="h-4" />
47 |       </div>
48 |     </form>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/components/layout/product-grid-items.tsx:
--------------------------------------------------------------------------------
 1 | import Grid from 'components/grid';
 2 | import { GridTileImage } from 'components/grid/tile';
 3 | import { Product } from 'lib/medusa/types';
 4 | import Link from 'next/link';
 5 | 
 6 | export default function ProductGridItems({ products }: { products: Product[] }) {
 7 |   return (
 8 |     <>
 9 |       {products.map((product) => (
10 |         <Grid.Item key={product.handle} className="animate-fadeIn">
11 |           <Link className="relative inline-block h-full w-full" href={`/product/${product.handle}`}>
12 |             <GridTileImage
13 |               alt={product.title}
14 |               label={{
15 |                 title: product.title,
16 |                 amount: product.priceRange.maxVariantPrice.amount,
17 |                 currencyCode: product.priceRange.maxVariantPrice.currencyCode
18 |               }}
19 |               src={product.featuredImage?.url}
20 |               fill
21 |               sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
22 |             />
23 |           </Link>
24 |         </Grid.Item>
25 |       ))}
26 |     </>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/components/layout/search/collections.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | import { Suspense } from 'react';
 3 | 
 4 | import { getCategories } from 'lib/medusa';
 5 | import FilterList from './filter';
 6 | 
 7 | async function CollectionList() {
 8 |   const collections = await getCategories();
 9 |   return <FilterList list={collections} title="Collections" />;
10 | }
11 | 
12 | const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
13 | const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300';
14 | const items = 'bg-neutral-400 dark:bg-neutral-700';
15 | 
16 | export default function Collections() {
17 |   return (
18 |     <Suspense
19 |       fallback={
20 |         <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 lg:block">
21 |           <div className={clsx(skeleton, activeAndTitles)} />
22 |           <div className={clsx(skeleton, activeAndTitles)} />
23 |           <div className={clsx(skeleton, items)} />
24 |           <div className={clsx(skeleton, items)} />
25 |           <div className={clsx(skeleton, items)} />
26 |           <div className={clsx(skeleton, items)} />
27 |           <div className={clsx(skeleton, items)} />
28 |           <div className={clsx(skeleton, items)} />
29 |           <div className={clsx(skeleton, items)} />
30 |           <div className={clsx(skeleton, items)} />
31 |         </div>
32 |       }
33 |     >
34 |       <CollectionList />
35 |     </Suspense>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/components/layout/search/filter/dropdown.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { usePathname, useSearchParams } from 'next/navigation';
 4 | import { useEffect, useRef, useState } from 'react';
 5 | 
 6 | import { ChevronDownIcon } from '@heroicons/react/24/outline';
 7 | import type { ListItem } from '.';
 8 | import { FilterItem } from './item';
 9 | 
10 | export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
11 |   const pathname = usePathname();
12 |   const searchParams = useSearchParams();
13 |   const [active, setActive] = useState('');
14 |   const [openSelect, setOpenSelect] = useState(false);
15 |   const ref = useRef<HTMLDivElement>(null);
16 | 
17 |   useEffect(() => {
18 |     const handleClickOutside = (event: MouseEvent) => {
19 |       if (ref.current && !ref.current.contains(event.target as Node)) {
20 |         setOpenSelect(false);
21 |       }
22 |     };
23 | 
24 |     window.addEventListener('click', handleClickOutside);
25 |     return () => window.removeEventListener('click', handleClickOutside);
26 |   }, []);
27 | 
28 |   useEffect(() => {
29 |     list.forEach((listItem: ListItem) => {
30 |       if (
31 |         ('path' in listItem && pathname === listItem.path) ||
32 |         ('slug' in listItem && searchParams.get('sort') === listItem.slug)
33 |       ) {
34 |         setActive(listItem.title);
35 |       }
36 |     });
37 |   }, [pathname, list, searchParams]);
38 | 
39 |   return (
40 |     <div className="relative" ref={ref}>
41 |       <div
42 |         onClick={() => {
43 |           setOpenSelect(!openSelect);
44 |         }}
45 |         className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
46 |       >
47 |         <div>{active}</div>
48 |         <ChevronDownIcon className="h-4" />
49 |       </div>
50 |       {openSelect && (
51 |         <div
52 |           onClick={() => {
53 |             setOpenSelect(false);
54 |           }}
55 |           className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black"
56 |         >
57 |           {list.map((item: ListItem, i) => (
58 |             <FilterItem key={i} item={item} />
59 |           ))}
60 |         </div>
61 |       )}
62 |     </div>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/components/layout/search/filter/index.tsx:
--------------------------------------------------------------------------------
 1 | import { SortFilterItem } from 'lib/constants';
 2 | import FilterItemDropdown from './dropdown';
 3 | import { FilterItem } from './item';
 4 | 
 5 | export type ListItem = SortFilterItem | PathFilterItem;
 6 | export type PathFilterItem = { title: string; path: string };
 7 | 
 8 | function FilterItemList({ list }: { list: ListItem[] }) {
 9 |   return (
10 |     <>
11 |       {list.map((item: ListItem, i) => (
12 |         <FilterItem key={i} item={item} />
13 |       ))}
14 |     </>
15 |   );
16 | }
17 | 
18 | export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
19 |   return (
20 |     <>
21 |       <nav>
22 |         {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
23 |         <ul className="hidden md:block">
24 |           <FilterItemList list={list} />
25 |         </ul>
26 |         <ul className="md:hidden">
27 |           <FilterItemDropdown list={list} />
28 |         </ul>
29 |       </nav>
30 |     </>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/components/layout/search/filter/item.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import clsx from 'clsx';
 4 | import { SortFilterItem } from 'lib/constants';
 5 | import { createUrl } from 'lib/utils';
 6 | import Link from 'next/link';
 7 | import { usePathname, useSearchParams } from 'next/navigation';
 8 | import type { ListItem, PathFilterItem } from '.';
 9 | 
10 | function PathFilterItem({ item }: { item: PathFilterItem }) {
11 |   const pathname = usePathname();
12 |   const searchParams = useSearchParams();
13 |   const active = pathname === item.path;
14 |   const newParams = new URLSearchParams(searchParams.toString());
15 |   const DynamicTag = active ? 'p' : Link;
16 | 
17 |   newParams.delete('q');
18 | 
19 |   return (
20 |     <li className="mt-2 flex text-black dark:text-white" key={item.title}>
21 |       <DynamicTag
22 |         href={createUrl(item.path, newParams)}
23 |         className={clsx(
24 |           'w-full text-sm underline-offset-4 hover:underline dark:hover:text-neutral-100',
25 |           {
26 |             'underline underline-offset-4': active
27 |           }
28 |         )}
29 |       >
30 |         {item.title}
31 |       </DynamicTag>
32 |     </li>
33 |   );
34 | }
35 | 
36 | function SortFilterItem({ item }: { item: SortFilterItem }) {
37 |   const pathname = usePathname();
38 |   const searchParams = useSearchParams();
39 |   const active = searchParams.get('sort') === item.slug;
40 |   const q = searchParams.get('q');
41 |   const href = createUrl(
42 |     pathname,
43 |     new URLSearchParams({
44 |       ...(q && { q }),
45 |       ...(item.slug && item.slug.length && { sort: item.slug })
46 |     })
47 |   );
48 |   const DynamicTag = active ? 'p' : Link;
49 | 
50 |   return (
51 |     <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
52 |       <DynamicTag
53 |         prefetch={!active ? false : undefined}
54 |         href={href}
55 |         className={clsx('w-full hover:underline hover:underline-offset-4', {
56 |           'underline underline-offset-4': active
57 |         })}
58 |       >
59 |         {item.title}
60 |       </DynamicTag>
61 |     </li>
62 |   );
63 | }
64 | 
65 | export function FilterItem({ item }: { item: ListItem }) {
66 |   return 'path' in item ? <PathFilterItem item={item} /> : <SortFilterItem item={item} />;
67 | }
68 | 


--------------------------------------------------------------------------------
/components/loading-dots.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | 
 3 | const dots = 'mx-[1px] inline-block h-1 w-1 animate-blink rounded-md';
 4 | 
 5 | const LoadingDots = ({ className }: { className: string }) => {
 6 |   return (
 7 |     <span className="mx-2 inline-flex items-center">
 8 |       <span className={clsx(dots, className)} />
 9 |       <span className={clsx(dots, 'animation-delay-[200ms]', className)} />
10 |       <span className={clsx(dots, 'animation-delay-[400ms]', className)} />
11 |     </span>
12 |   );
13 | };
14 | 
15 | export default LoadingDots;
16 | 


--------------------------------------------------------------------------------
/components/logo-square.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | import LogoIcon from './icons/logo';
 3 | 
 4 | export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
 5 |   return (
 6 |     <div
 7 |       className={clsx(
 8 |         'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
 9 |         {
10 |           'h-[40px] w-[40px] rounded-xl': !size,
11 |           'h-[30px] w-[30px] rounded-lg': size === 'sm'
12 |         }
13 |       )}
14 |     >
15 |       <LogoIcon
16 |         className={clsx({
17 |           'h-[16px] w-[16px]': !size,
18 |           'h-[10px] w-[10px]': size === 'sm'
19 |         })}
20 |       />
21 |     </div>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/components/opengraph-image.tsx:
--------------------------------------------------------------------------------
 1 | import { ImageResponse } from 'next/server';
 2 | import LogoIcon from './icons/logo';
 3 | 
 4 | export type Props = {
 5 |   title?: string;
 6 | };
 7 | 
 8 | export default async function OpengraphImage(props?: Props): Promise<ImageResponse> {
 9 |   const { title } = {
10 |     ...{
11 |       title: process.env.SITE_NAME
12 |     },
13 |     ...props
14 |   };
15 | 
16 |   return new ImageResponse(
17 |     (
18 |       <div tw="flex h-full w-full flex-col items-center justify-center bg-black">
19 |         <div tw="flex flex-none items-center justify-center border border-neutral-700 h-[160px] w-[160px] rounded-3xl">
20 |           <LogoIcon width="64" height="58" fill="white" />
21 |         </div>
22 |         <p tw="mt-12 text-6xl font-bold text-white">{title}</p>
23 |       </div>
24 |     ),
25 |     {
26 |       width: 1200,
27 |       height: 630,
28 |       fonts: [
29 |         {
30 |           name: 'Inter',
31 |           data: await fetch(new URL('../fonts/Inter-Bold.ttf', import.meta.url)).then((res) =>
32 |             res.arrayBuffer()
33 |           ),
34 |           style: 'normal',
35 |           weight: 700
36 |         }
37 |       ]
38 |     }
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/components/price.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | 
 3 | const Price = ({
 4 |   amount,
 5 |   className,
 6 |   currencyCode = 'USD',
 7 |   currencyCodeClassName
 8 | }: {
 9 |   amount: string;
10 |   className?: string;
11 |   currencyCode: string;
12 |   currencyCodeClassName?: string;
13 | } & React.ComponentProps<'p'>) => (
14 |   <p suppressHydrationWarning={true} className={className}>
15 |     {`${new Intl.NumberFormat(undefined, {
16 |       style: 'currency',
17 |       currency: currencyCode,
18 |       currencyDisplay: 'narrowSymbol'
19 |     }).format(parseFloat(amount))}`}
20 |     <span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
21 |   </p>
22 | );
23 | 
24 | export default Price;
25 | 


--------------------------------------------------------------------------------
/components/product/gallery.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
  4 | import { GridTileImage } from 'components/grid/tile';
  5 | import { createUrl } from 'lib/utils';
  6 | import Image from 'next/image';
  7 | import Link from 'next/link';
  8 | import { usePathname, useSearchParams } from 'next/navigation';
  9 | 
 10 | export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
 11 |   const pathname = usePathname();
 12 |   const searchParams = useSearchParams();
 13 |   const imageSearchParam = searchParams.get('image');
 14 |   const imageIndex = imageSearchParam ? parseInt(imageSearchParam) : 0;
 15 | 
 16 |   const nextSearchParams = new URLSearchParams(searchParams.toString());
 17 |   const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
 18 |   nextSearchParams.set('image', nextImageIndex.toString());
 19 |   const nextUrl = createUrl(pathname, nextSearchParams);
 20 | 
 21 |   const previousSearchParams = new URLSearchParams(searchParams.toString());
 22 |   const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1;
 23 |   previousSearchParams.set('image', previousImageIndex.toString());
 24 |   const previousUrl = createUrl(pathname, previousSearchParams);
 25 | 
 26 |   const buttonClassName =
 27 |     'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
 28 | 
 29 |   return (
 30 |     <>
 31 |       <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
 32 |         {images[imageIndex] && (
 33 |           <Image
 34 |             className="h-full w-full object-contain"
 35 |             fill
 36 |             sizes="(min-width: 1024px) 66vw, 100vw"
 37 |             alt={images[imageIndex]?.altText as string}
 38 |             src={images[imageIndex]?.src as string}
 39 |             priority={true}
 40 |           />
 41 |         )}
 42 | 
 43 |         {images.length > 1 ? (
 44 |           <div className="absolute bottom-[15%] flex w-full justify-center">
 45 |             <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
 46 |               <Link
 47 |                 aria-label="Previous product image"
 48 |                 href={previousUrl}
 49 |                 className={buttonClassName}
 50 |                 scroll={false}
 51 |               >
 52 |                 <ArrowLeftIcon className="h-5" />
 53 |               </Link>
 54 |               <div className="mx-1 h-6 w-px bg-neutral-500"></div>
 55 |               <Link
 56 |                 aria-label="Next product image"
 57 |                 href={nextUrl}
 58 |                 className={buttonClassName}
 59 |                 scroll={false}
 60 |               >
 61 |                 <ArrowRightIcon className="h-5" />
 62 |               </Link>
 63 |             </div>
 64 |           </div>
 65 |         ) : null}
 66 |       </div>
 67 | 
 68 |       {images.length > 1 ? (
 69 |         <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
 70 |           {images.map((image, index) => {
 71 |             const isActive = index === imageIndex;
 72 |             const imageSearchParams = new URLSearchParams(searchParams.toString());
 73 | 
 74 |             imageSearchParams.set('image', index.toString());
 75 | 
 76 |             return (
 77 |               <li key={image.src} className="h-auto w-20">
 78 |                 <Link
 79 |                   aria-label="Enlarge product image"
 80 |                   href={createUrl(pathname, imageSearchParams)}
 81 |                   scroll={false}
 82 |                   className="h-full w-full"
 83 |                 >
 84 |                   <GridTileImage
 85 |                     alt={image.altText}
 86 |                     src={image.src}
 87 |                     width={80}
 88 |                     height={80}
 89 |                     active={isActive}
 90 |                   />
 91 |                 </Link>
 92 |               </li>
 93 |             );
 94 |           })}
 95 |         </ul>
 96 |       ) : null}
 97 |     </>
 98 |   );
 99 | }
100 | 


--------------------------------------------------------------------------------
/components/product/product-description.tsx:
--------------------------------------------------------------------------------
 1 | import { AddToCart } from 'components/cart/add-to-cart';
 2 | import Price from 'components/price';
 3 | import Prose from 'components/prose';
 4 | import { Product } from 'lib/medusa/types';
 5 | import { VariantSelector } from './variant-selector';
 6 | 
 7 | export function ProductDescription({ product }: { product: Product }) {
 8 |   return (
 9 |     <>
10 |       <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
11 |         <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
12 |         <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
13 |           <Price
14 |             amount={product.priceRange.maxVariantPrice.amount}
15 |             currencyCode={product.priceRange.maxVariantPrice.currencyCode}
16 |           />
17 |         </div>
18 |       </div>
19 |       <VariantSelector options={product.options} variants={product.variants} />
20 | 
21 |       {product.descriptionHtml ? (
22 |         <Prose
23 |           className="mb-6 text-sm leading-tight dark:text-white/[60%]"
24 |           html={product.descriptionHtml}
25 |         />
26 |       ) : null}
27 | 
28 |       <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
29 |     </>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/components/product/variant-selector.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import clsx from 'clsx';
  4 | import { ProductOption, ProductVariant } from 'lib/medusa/types';
  5 | import { createUrl } from 'lib/utils';
  6 | import Link from 'next/link';
  7 | import { usePathname, useSearchParams } from 'next/navigation';
  8 | 
  9 | type Combination = {
 10 |   id: string;
 11 |   availableForSale: boolean;
 12 |   [key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
 13 | };
 14 | 
 15 | export function VariantSelector({
 16 |   options,
 17 |   variants
 18 | }: {
 19 |   options: ProductOption[];
 20 |   variants: ProductVariant[];
 21 | }) {
 22 |   const pathname = usePathname();
 23 |   const searchParams = useSearchParams();
 24 |   const hasNoOptionsOrJustOneOption =
 25 |     !options.length || (options.length === 1 && options[0]?.values.length === 1);
 26 | 
 27 |   if (hasNoOptionsOrJustOneOption) {
 28 |     return null;
 29 |   }
 30 | 
 31 |   const combinations: Combination[] = variants.map((variant) => ({
 32 |     id: variant.id,
 33 |     availableForSale: variant.availableForSale,
 34 |     // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
 35 |     ...variant.selectedOptions.reduce(
 36 |       (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
 37 |       {}
 38 |     )
 39 |   }));
 40 | 
 41 |   return options.map((option) => (
 42 |     <dl className="mb-8" key={option.id}>
 43 |       <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
 44 |       <dd className="flex flex-wrap gap-3">
 45 |         {option.values.map((value) => {
 46 |           const optionNameLowerCase = option.name.toLowerCase();
 47 | 
 48 |           // Base option params on current params so we can preserve any other param state in the url.
 49 |           const optionSearchParams = new URLSearchParams(searchParams.toString());
 50 | 
 51 |           // Update the option params using the current option to reflect how the url *would* change,
 52 |           // if the option was clicked.
 53 |           optionSearchParams.set(optionNameLowerCase, value);
 54 |           const optionUrl = createUrl(pathname, optionSearchParams);
 55 | 
 56 |           // In order to determine if an option is available for sale, we need to:
 57 |           //
 58 |           // 1. Filter out all other param state
 59 |           // 2. Filter out invalid options
 60 |           // 3. Check if the option combination is available for sale
 61 |           //
 62 |           // This is the "magic" that will cross check possible variant combinations and preemptively
 63 |           // disable combinations that are not available. For example, if the color gray is only available in size medium,
 64 |           // then all other sizes should be disabled.
 65 |           const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
 66 |             options.find(
 67 |               (option) => option.name.toLowerCase() === key && option.values.includes(value)
 68 |             )
 69 |           );
 70 |           const isAvailableForSale = combinations.find((combination) =>
 71 |             filtered.every(
 72 |               ([key, value]) => combination[key] === value && combination.availableForSale
 73 |             )
 74 |           );
 75 | 
 76 |           // The option is active if it's in the url params.
 77 |           const isActive = searchParams.get(optionNameLowerCase) === value;
 78 | 
 79 |           // You can't disable a link, so we need to render something that isn't clickable.
 80 |           const DynamicTag = isAvailableForSale ? Link : 'p';
 81 |           const dynamicProps = {
 82 |             ...(isAvailableForSale && { scroll: false })
 83 |           };
 84 | 
 85 |           return (
 86 |             <DynamicTag
 87 |               key={value}
 88 |               aria-disabled={!isAvailableForSale}
 89 |               href={optionUrl}
 90 |               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
 91 |               className={clsx(
 92 |                 'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
 93 |                 {
 94 |                   'cursor-default ring-2 ring-blue-600': isActive,
 95 |                   'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
 96 |                     !isActive && isAvailableForSale,
 97 |                   'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
 98 |                     !isAvailableForSale
 99 |                 }
100 |               )}
101 |               {...dynamicProps}
102 |             >
103 |               {value}
104 |             </DynamicTag>
105 |           );
106 |         })}
107 |       </dd>
108 |     </dl>
109 |   ));
110 | }
111 | 


--------------------------------------------------------------------------------
/components/prose.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | import type { FunctionComponent } from 'react';
 3 | 
 4 | interface TextProps {
 5 |   html: string;
 6 |   className?: string;
 7 | }
 8 | 
 9 | const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
10 |   return (
11 |     <div
12 |       className={clsx(
13 |         'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
14 |         className
15 |       )}
16 |       dangerouslySetInnerHTML={{ __html: html as string }}
17 |     />
18 |   );
19 | };
20 | 
21 | export default Prose;
22 | 


--------------------------------------------------------------------------------
/fonts/Inter-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/medusajs/vercel-commerce/ea9afa6b602d58d33f8e9b59ca94bba8773c83a4/fonts/Inter-Bold.ttf


--------------------------------------------------------------------------------
/lib/constants.ts:
--------------------------------------------------------------------------------
 1 | export type SortFilterItem = {
 2 |   title: string;
 3 |   slug: string | null;
 4 |   sortKey: 'RELEVANCE' | 'BEST_SELLING' | 'CREATED_AT' | 'PRICE';
 5 |   reverse: boolean;
 6 | };
 7 | 
 8 | export const defaultSort: SortFilterItem = {
 9 |   title: 'Relevance',
10 |   slug: null,
11 |   sortKey: 'RELEVANCE',
12 |   reverse: false
13 | };
14 | 
15 | export const sorting: SortFilterItem[] = [
16 |   defaultSort,
17 |   { title: 'Trending', slug: 'trending-desc', sortKey: 'BEST_SELLING', reverse: false }, // asc
18 |   { title: 'Latest arrivals', slug: 'latest-desc', sortKey: 'CREATED_AT', reverse: true },
19 |   { title: 'Price: Low to high', slug: 'price-asc', sortKey: 'PRICE', reverse: false }, // asc
20 |   { title: 'Price: High to low', slug: 'price-desc', sortKey: 'PRICE', reverse: true }
21 | ];
22 | 
23 | export const TAGS = {
24 |   categories: 'categories',
25 |   products: 'products'
26 | };
27 | 
28 | export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
29 | export const DEFAULT_OPTION = 'Default Title';
30 | 
31 | export const CHECKOUT_PAGE_PROPS = {
32 |   title: 'Checkout',
33 |   body: `Checkout is not implemented yet in this template. Check out 
34 |         <a href="https://docs.medusajs.com/modules/carts-and-checkout/storefront/implement-checkout-flow">our guide on implementing a checkout flow</a> to learn more.`,
35 |   description: 'Checkout is not implemented yet in this template',
36 |   updatedAt: new Date().toISOString(),
37 |   createdAt: new Date().toISOString()
38 | };
39 | 


--------------------------------------------------------------------------------
/lib/medusa/helpers.ts:
--------------------------------------------------------------------------------
 1 | import { isEmpty } from '../utils';
 2 | import { MedusaProductVariant, Money, RegionInfo } from './types';
 3 | 
 4 | type ComputeAmountParams = {
 5 |   amount: number;
 6 |   region: RegionInfo;
 7 |   includeTaxes?: boolean;
 8 | };
 9 | 
10 | /**
11 |  * Takes an amount, a region, and returns the amount as a decimal including or excluding taxes
12 |  */
13 | export const computeAmount = ({ amount, region, includeTaxes = true }: ComputeAmountParams) => {
14 |   const toDecimal = convertToDecimal(amount, region.currency_code);
15 | 
16 |   const taxRate = includeTaxes ? getTaxRate(region) : 0;
17 | 
18 |   const amountWithTaxes = toDecimal * (1 + taxRate);
19 | 
20 |   return amountWithTaxes;
21 | };
22 | 
23 | /**
24 |  * Takes a product variant, and returns the amount as a decimal including or excluding taxes and the currency code
25 |  */
26 | export const calculateVariantAmount = (variant: MedusaProductVariant): Money => {
27 |   const currencyCode = variant.prices?.[0]?.currency_code ?? 'USD';
28 |   const amount = convertToDecimal(variant.prices?.[0]?.amount || 0, currencyCode).toString();
29 |   return {
30 |     amount,
31 |     currencyCode
32 |   };
33 | };
34 | 
35 | // we should probably add a more extensive list
36 | const noDivisionCurrencies = ['krw', 'jpy', 'vnd'];
37 | 
38 | export const convertToDecimal = (amount: number, currencyCode = 'USD') => {
39 |   const divisor = noDivisionCurrencies.includes(currencyCode.toLowerCase()) ? 1 : 100;
40 | 
41 |   return Math.floor(amount) / divisor;
42 | };
43 | 
44 | const getTaxRate = (region?: RegionInfo) => {
45 |   return region && !isEmpty(region) ? region?.tax_rate / 100 : 0;
46 | };
47 | 


--------------------------------------------------------------------------------
/lib/medusa/index.ts:
--------------------------------------------------------------------------------
  1 | import { isMedusaError } from 'lib/type-guards';
  2 | 
  3 | import { TAGS } from 'lib/constants';
  4 | import { mapOptionIds } from 'lib/utils';
  5 | import { revalidateTag } from 'next/cache';
  6 | import { headers } from 'next/headers';
  7 | import { NextRequest, NextResponse } from 'next/server';
  8 | import { calculateVariantAmount, computeAmount, convertToDecimal } from './helpers';
  9 | import {
 10 |   Cart,
 11 |   CartItem,
 12 |   Image,
 13 |   MedusaCart,
 14 |   MedusaImage,
 15 |   MedusaLineItem,
 16 |   MedusaProduct,
 17 |   MedusaProductCollection,
 18 |   MedusaProductOption,
 19 |   MedusaProductVariant,
 20 |   Product,
 21 |   ProductCategory,
 22 |   ProductCollection,
 23 |   ProductOption,
 24 |   ProductVariant,
 25 |   SelectedOption
 26 | } from './types';
 27 | 
 28 | const ENDPOINT = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_API ?? 'http://localhost:9000';
 29 | const MEDUSA_API_KEY = process.env.MEDUSA_API_KEY ?? '';
 30 | 
 31 | export default async function medusaRequest({
 32 |   cache = 'force-cache',
 33 |   method,
 34 |   path,
 35 |   payload,
 36 |   tags
 37 | }: {
 38 |   cache?: RequestCache;
 39 |   method: string;
 40 |   path: string;
 41 |   payload?: Record<string, unknown> | undefined;
 42 |   tags?: string[];
 43 | }) {
 44 |   const options: RequestInit = {
 45 |     method,
 46 |     headers: {
 47 |       'Content-Type': 'application/json',
 48 |       'x-publishable-key': MEDUSA_API_KEY
 49 |     },
 50 |     cache,
 51 |     ...(tags && { next: { tags } })
 52 |   };
 53 | 
 54 |   if (path.includes('/carts')) {
 55 |     options.cache = 'no-cache';
 56 |   }
 57 | 
 58 |   if (payload) {
 59 |     options.body = JSON.stringify(payload);
 60 |   }
 61 | 
 62 |   try {
 63 |     const result = await fetch(`${ENDPOINT}/store${path}`, options);
 64 | 
 65 |     const body = await result.json();
 66 | 
 67 |     if (body.errors) {
 68 |       throw body.errors[0];
 69 |     }
 70 | 
 71 |     return {
 72 |       status: result.status,
 73 |       body
 74 |     };
 75 |   } catch (e) {
 76 |     if (isMedusaError(e)) {
 77 |       throw {
 78 |         status: e.status || 500,
 79 |         message: e.message
 80 |       };
 81 |     }
 82 | 
 83 |     throw {
 84 |       error: e
 85 |     };
 86 |   }
 87 | }
 88 | 
 89 | const reshapeCart = (cart: MedusaCart): Cart => {
 90 |   const lines = cart?.items?.map((item) => reshapeLineItem(item)) || [];
 91 |   const totalQuantity = lines.reduce((a, b) => a + b.quantity, 0);
 92 |   const checkoutUrl = '/checkout'; // todo: implement medusa checkout flow
 93 |   const currencyCode = cart.region?.currency_code.toUpperCase() || 'USD';
 94 | 
 95 |   let subtotalAmount = '0';
 96 |   if (cart.subtotal && cart.region) {
 97 |     subtotalAmount = computeAmount({ amount: cart.subtotal, region: cart.region }).toString();
 98 |   }
 99 | 
100 |   let totalAmount = '0';
101 |   if (cart.total && cart.region) {
102 |     totalAmount = computeAmount({ amount: cart.total, region: cart.region }).toString();
103 |   }
104 | 
105 |   let totalTaxAmount = '0';
106 |   if (cart.tax_total && cart.region) {
107 |     totalTaxAmount = computeAmount({ amount: cart.tax_total, region: cart.region }).toString();
108 |   }
109 | 
110 |   const cost = {
111 |     subtotalAmount: {
112 |       amount: subtotalAmount,
113 |       currencyCode: currencyCode
114 |     },
115 |     totalAmount: {
116 |       amount: totalAmount,
117 |       currencyCode: currencyCode
118 |     },
119 |     totalTaxAmount: {
120 |       amount: totalTaxAmount,
121 |       currencyCode: currencyCode
122 |     }
123 |   };
124 | 
125 |   return {
126 |     ...cart,
127 |     totalQuantity,
128 |     checkoutUrl,
129 |     lines,
130 |     cost
131 |   };
132 | };
133 | 
134 | const reshapeLineItem = (lineItem: MedusaLineItem): CartItem => {
135 |   const product = {
136 |     title: lineItem.title,
137 |     priceRange: {
138 |       maxVariantPrice: calculateVariantAmount(lineItem.variant)
139 |     },
140 |     updatedAt: lineItem.updated_at,
141 |     createdAt: lineItem.created_at,
142 |     tags: [],
143 |     descriptionHtml: lineItem.description ?? '',
144 |     featuredImage: {
145 |       url: lineItem.thumbnail ?? '',
146 |       altText: lineItem.title ?? ''
147 |     },
148 |     availableForSale: true,
149 |     variants: [lineItem.variant && reshapeProductVariant(lineItem.variant)],
150 |     handle: lineItem.variant?.product?.handle ?? '',
151 |     options: [] as ProductOption[]
152 |   };
153 | 
154 |   const selectedOptions =
155 |     lineItem.variant?.options?.map((option) => ({
156 |       name: option.option?.title ?? '',
157 |       value: option.value
158 |     })) || [];
159 | 
160 |   const merchandise = {
161 |     id: lineItem.variant_id || lineItem.id,
162 |     selectedOptions,
163 |     product,
164 |     title: lineItem.description ?? ''
165 |   };
166 | 
167 |   const cost = {
168 |     totalAmount: {
169 |       amount: convertToDecimal(
170 |         lineItem.total,
171 |         lineItem.variant?.prices?.[0]?.currency_code
172 |       ).toString(),
173 |       currencyCode: lineItem.variant?.prices?.[0]?.currency_code.toUpperCase() || 'EUR'
174 |     }
175 |   };
176 |   const quantity = lineItem.quantity;
177 | 
178 |   return {
179 |     ...lineItem,
180 |     merchandise,
181 |     cost,
182 |     quantity
183 |   };
184 | };
185 | 
186 | const reshapeImages = (images?: MedusaImage[], productTitle?: string): Image[] => {
187 |   if (!images) return [];
188 |   return images.map((image) => {
189 |     const filename = image.url.match(/.*\/(.*)\..*/)![1];
190 |     return {
191 |       ...image,
192 |       altText: `${productTitle} - ${filename}`
193 |     };
194 |   });
195 | };
196 | 
197 | const reshapeProduct = (product: MedusaProduct): Product => {
198 |   const variant = product.variants?.[0];
199 | 
200 |   let amount = '0';
201 |   let currencyCode = 'USD';
202 |   if (variant && variant.prices?.[0]?.amount) {
203 |     currencyCode = variant.prices?.[0]?.currency_code.toUpperCase() ?? 'USD';
204 |     amount = convertToDecimal(variant.prices[0].amount, currencyCode).toString();
205 |   }
206 | 
207 |   const priceRange = {
208 |     maxVariantPrice: {
209 |       amount,
210 |       currencyCode: product.variants?.[0]?.prices?.[0]?.currency_code.toUpperCase() ?? ''
211 |     }
212 |   };
213 | 
214 |   const updatedAt = product.updated_at;
215 |   const createdAt = product.created_at;
216 |   const tags = product.tags?.map((tag) => tag.value) || [];
217 |   const descriptionHtml = product.description ?? '';
218 |   const featuredImageFilename = product.thumbnail?.match(/.*\/(.*)\..*/)![1];
219 |   const featuredImage = {
220 |     url: product.thumbnail ?? '',
221 |     altText: product.thumbnail ? `${product.title} - ${featuredImageFilename}` : ''
222 |   };
223 |   const availableForSale = product.variants?.[0]?.purchasable || true;
224 |   const images = reshapeImages(product.images, product.title);
225 | 
226 |   const variants = product.variants.map((variant) =>
227 |     reshapeProductVariant(variant, product.options)
228 |   );
229 | 
230 |   let options = [] as ProductOption[];
231 |   product.options && (options = product.options.map((option) => reshapeProductOption(option)));
232 | 
233 |   return {
234 |     ...product,
235 |     images,
236 |     featuredImage,
237 |     priceRange,
238 |     updatedAt,
239 |     createdAt,
240 |     tags,
241 |     descriptionHtml,
242 |     availableForSale,
243 |     options,
244 |     variants
245 |   };
246 | };
247 | 
248 | const reshapeProductOption = (productOption: MedusaProductOption): ProductOption => {
249 |   const availableForSale = productOption.product?.variants?.[0]?.purchasable || true;
250 |   const name = productOption.title;
251 |   let values = productOption.values?.map((option) => option.value) || [];
252 |   values = [...new Set(values)];
253 | 
254 |   return {
255 |     ...productOption,
256 |     availableForSale,
257 |     name,
258 |     values
259 |   };
260 | };
261 | 
262 | const reshapeProductVariant = (
263 |   productVariant: MedusaProductVariant,
264 |   productOptions?: MedusaProductOption[]
265 | ): ProductVariant => {
266 |   let selectedOptions: SelectedOption[] = [];
267 |   if (productOptions && productVariant.options) {
268 |     const optionIdMap = mapOptionIds(productOptions);
269 |     selectedOptions = productVariant.options.map((option) => ({
270 |       name: optionIdMap[option.option_id] ?? '',
271 |       value: option.value
272 |     }));
273 |   }
274 |   const availableForSale = productVariant.purchasable || true;
275 |   const price = calculateVariantAmount(productVariant);
276 | 
277 |   return {
278 |     ...productVariant,
279 |     availableForSale,
280 |     selectedOptions,
281 |     price
282 |   };
283 | };
284 | 
285 | const reshapeCategory = (category: ProductCategory): ProductCollection => {
286 |   const description = category.description || category.metadata?.description?.toString() || '';
287 |   const seo = {
288 |     title: category?.metadata?.seo_title?.toString() || category.name || '',
289 |     description: category?.metadata?.seo_description?.toString() || category.description || ''
290 |   };
291 |   const path = `/search/${category.handle}`;
292 |   const updatedAt = category.updated_at;
293 |   const title = category.name;
294 | 
295 |   return {
296 |     ...category,
297 |     description,
298 |     seo,
299 |     title,
300 |     path,
301 |     updatedAt
302 |   };
303 | };
304 | 
305 | export async function createCart(): Promise<Cart> {
306 |   const res = await medusaRequest({ method: 'POST', path: '/carts' });
307 |   return reshapeCart(res.body.cart);
308 | }
309 | 
310 | export async function addToCart(
311 |   cartId: string,
312 |   lineItem: { variantId: string; quantity: number }
313 | ): Promise<Cart> {
314 |   const res = await medusaRequest({
315 |     method: 'POST',
316 |     path: `/carts/${cartId}/line-items`,
317 |     payload: {
318 |       variant_id: lineItem?.variantId,
319 |       quantity: lineItem?.quantity
320 |     },
321 |     tags: ['cart']
322 |   });
323 |   return reshapeCart(res.body.cart);
324 | }
325 | 
326 | export async function removeFromCart(cartId: string, lineItemId: string): Promise<Cart> {
327 |   const res = await medusaRequest({
328 |     method: 'DELETE',
329 |     path: `/carts/${cartId}/line-items/${lineItemId}`,
330 |     tags: ['cart']
331 |   });
332 |   return reshapeCart(res.body.cart);
333 | }
334 | 
335 | export async function updateCart(
336 |   cartId: string,
337 |   { lineItemId, quantity }: { lineItemId: string; quantity: number }
338 | ): Promise<Cart> {
339 |   const res = await medusaRequest({
340 |     method: 'POST',
341 |     path: `/carts/${cartId}/line-items/${lineItemId}`,
342 |     payload: {
343 |       quantity
344 |     },
345 |     tags: ['cart']
346 |   });
347 |   return reshapeCart(res.body.cart);
348 | }
349 | 
350 | export async function getCart(cartId: string): Promise<Cart | null> {
351 |   const res = await medusaRequest({ method: 'GET', path: `/carts/${cartId}`, tags: ['cart'] });
352 |   const cart = res.body.cart;
353 | 
354 |   if (!cart) {
355 |     return null;
356 |   }
357 | 
358 |   return reshapeCart(cart);
359 | }
360 | 
361 | export async function getCategories(): Promise<ProductCollection[]> {
362 |   const res = await medusaRequest({
363 |     method: 'GET',
364 |     path: '/product-categories',
365 |     tags: ['categories']
366 |   });
367 | 
368 |   // Reshape categories and hide categories starting with 'hidden'
369 |   const categories = res.body.product_categories
370 |     .map((collection: ProductCategory) => reshapeCategory(collection))
371 |     .filter((collection: MedusaProductCollection) => !collection.handle.startsWith('hidden'));
372 | 
373 |   return categories;
374 | }
375 | 
376 | export async function getCategory(handle: string): Promise<ProductCollection | undefined> {
377 |   const res = await medusaRequest({
378 |     method: 'GET',
379 |     path: `/product-categories?handle=${handle}&expand=products`,
380 |     tags: ['categories', 'products']
381 |   });
382 |   return res.body.product_categories[0];
383 | }
384 | 
385 | export async function getCategoryProducts(
386 |   handle: string,
387 |   reverse?: boolean,
388 |   sortKey?: string
389 | ): Promise<Product[]> {
390 |   const res = await medusaRequest({
391 |     method: 'GET',
392 |     path: `/product-categories?handle=${handle}`,
393 |     tags: ['categories']
394 |   });
395 | 
396 |   if (!res) {
397 |     return [];
398 |   }
399 | 
400 |   const category = res.body.product_categories[0];
401 | 
402 |   const category_products = await getProducts({ reverse, sortKey, categoryId: category.id });
403 | 
404 |   return category_products;
405 | }
406 | 
407 | export async function getProduct(handle: string): Promise<Product> {
408 |   const res = await medusaRequest({
409 |     method: 'GET',
410 |     path: `/products?handle=${handle}&limit=1`,
411 |     tags: ['products']
412 |   });
413 |   const product = res.body.products[0];
414 |   return reshapeProduct(product);
415 | }
416 | 
417 | export async function getProducts({
418 |   query,
419 |   reverse,
420 |   sortKey,
421 |   categoryId
422 | }: {
423 |   query?: string;
424 |   reverse?: boolean;
425 |   sortKey?: string;
426 |   categoryId?: string;
427 | }): Promise<Product[]> {
428 |   let res;
429 | 
430 |   if (query) {
431 |     res = await medusaRequest({
432 |       method: 'GET',
433 |       path: `/products?q=${query}&limit=100`,
434 |       tags: ['products']
435 |     });
436 |   } else if (categoryId) {
437 |     res = await medusaRequest({
438 |       method: 'GET',
439 |       path: `/products?category_id[]=${categoryId}&limit=100`,
440 |       tags: ['products']
441 |     });
442 |   } else {
443 |     res = await medusaRequest({ method: 'GET', path: `/products?limit=100`, tags: ['products'] });
444 |   }
445 | 
446 |   if (!res) {
447 |     console.error("Couldn't fetch products");
448 |     return [];
449 |   }
450 | 
451 |   let products: Product[] = res?.body.products.map((product: MedusaProduct) =>
452 |     reshapeProduct(product)
453 |   );
454 | 
455 |   sortKey === 'PRICE' &&
456 |     products.sort(
457 |       (a, b) =>
458 |         parseFloat(a.priceRange.maxVariantPrice.amount) -
459 |         parseFloat(b.priceRange.maxVariantPrice.amount)
460 |     );
461 | 
462 |   sortKey === 'CREATED_AT' &&
463 |     products.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
464 | 
465 |   reverse && products.reverse();
466 | 
467 |   return products;
468 | }
469 | 
470 | export async function getMenu(menu: string): Promise<any[]> {
471 |   if (menu === 'next-js-frontend-header-menu') {
472 |     const categories = await getCategories();
473 |     return categories.map((cat) => ({
474 |       title: cat.title,
475 |       path: cat.path
476 |     }));
477 |   }
478 | 
479 |   if (menu === 'next-js-frontend-footer-menu') {
480 |     return [
481 |       { title: 'About Medusa', path: 'https://medusajs.com/' },
482 |       { title: 'Medusa Docs', path: 'https://docs.medusajs.com/' },
483 |       { title: 'Medusa Blog', path: 'https://medusajs.com/blog' }
484 |     ];
485 |   }
486 | 
487 |   return [];
488 | }
489 | 
490 | // This is called from `app/api/revalidate.ts` so providers can control revalidation logic.
491 | export async function revalidate(req: NextRequest): Promise<NextResponse> {
492 |   // We always need to respond with a 200 status code to Medusa,
493 |   // otherwise it will continue to retry the request.
494 |   const collectionWebhooks = ['categories/create', 'categories/delete', 'categories/update'];
495 |   const productWebhooks = ['products/create', 'products/delete', 'products/update'];
496 |   const topic = headers().get('x-medusa-topic') || 'unknown';
497 |   const secret = req.nextUrl.searchParams.get('secret');
498 |   const isCollectionUpdate = collectionWebhooks.includes(topic);
499 |   const isProductUpdate = productWebhooks.includes(topic);
500 | 
501 |   if (!secret || secret !== process.env.MEDUSA_REVALIDATION_SECRET) {
502 |     console.error('Invalid revalidation secret.');
503 |     return NextResponse.json({ status: 200 });
504 |   }
505 | 
506 |   if (!isCollectionUpdate && !isProductUpdate) {
507 |     // We don't need to revalidate anything for any other topics.
508 |     return NextResponse.json({ status: 200 });
509 |   }
510 | 
511 |   if (isCollectionUpdate) {
512 |     revalidateTag(TAGS.categories);
513 |   }
514 | 
515 |   if (isProductUpdate) {
516 |     revalidateTag(TAGS.products);
517 |   }
518 | 
519 |   return NextResponse.json({ status: 200, revalidated: true, now: Date.now() });
520 | }
521 | 


--------------------------------------------------------------------------------
/lib/medusa/types.ts:
--------------------------------------------------------------------------------
  1 | export type MedusaProductCollection = {
  2 |   name: any;
  3 |   description: string | undefined;
  4 |   id: string;
  5 |   title: string;
  6 |   handle: string;
  7 |   products?: Product[];
  8 |   created_at: string; // format: date-time
  9 |   updated_at: string; // format: date-time
 10 |   deleted_at?: string | null; // format: date-time
 11 |   metadata?: Record<string, unknown> | null;
 12 | };
 13 | 
 14 | export type ProductCollection = MedusaProductCollection & {
 15 |   seo?: {
 16 |     title?: string;
 17 |     description?: string;
 18 |   };
 19 |   path: string;
 20 |   updatedAt: string;
 21 | };
 22 | 
 23 | export type MedusaProduct = {
 24 |   id: string;
 25 |   title: string;
 26 |   subtitle?: string | null;
 27 |   description?: string | null;
 28 |   handle?: string | null;
 29 |   is_giftcard: boolean;
 30 |   status?: 'draft' | 'proposed' | 'published' | 'rejected';
 31 |   images?: Array<MedusaImage>;
 32 |   thumbnail?: string | null;
 33 |   options?: Array<MedusaProductOption>;
 34 |   variants: Array<MedusaProductVariant>;
 35 |   categories?: Array<ProductCategory>;
 36 |   profile_id?: string | null;
 37 |   profile?: ShippingProfile | null;
 38 |   weight?: number | null;
 39 |   length?: number | null;
 40 |   height?: number | null;
 41 |   width?: number | null;
 42 |   hs_code?: string | null;
 43 |   origin_country?: string | null;
 44 |   mid_code?: string | null;
 45 |   metadata?: Record<string, any>;
 46 |   discountable?: boolean;
 47 |   collection_id: string;
 48 |   created_at: Date;
 49 |   updated_at: Date;
 50 |   deleted_at: Date | null;
 51 |   type_id: string;
 52 |   material?: string | null;
 53 |   tags?: ProductTag[];
 54 | };
 55 | 
 56 | export type Product = Partial<Omit<MedusaProduct, 'tags' | 'options' | 'variants'>> & {
 57 |   title: string;
 58 |   featuredImage: FeaturedImage;
 59 |   seo?: {
 60 |     title?: string;
 61 |     description?: string;
 62 |   };
 63 |   priceRange: {
 64 |     maxVariantPrice: Money;
 65 |   };
 66 |   createdAt: Date;
 67 |   updatedAt: Date;
 68 |   descriptionHtml: string;
 69 |   tags: Array<string>;
 70 |   availableForSale: boolean;
 71 |   options: Array<ProductOption>;
 72 |   variants: Array<ProductVariant>;
 73 |   images?: Array<Image>;
 74 | };
 75 | 
 76 | export type FeaturedImage = {
 77 |   url: string;
 78 |   width?: number;
 79 |   height?: number;
 80 |   altText: string;
 81 | };
 82 | 
 83 | export type ProductTag = {
 84 |   id: string;
 85 |   value: string;
 86 |   created_at: string;
 87 |   updated_at: string;
 88 |   deleted_at: string | null;
 89 |   metadata?: Record<string, unknown> | null;
 90 | };
 91 | 
 92 | export type MedusaImage = {
 93 |   id: string;
 94 |   url: string;
 95 |   created_at: string;
 96 |   updated_at: string;
 97 |   deleted_at?: string | null;
 98 |   metadata?: { [key: string]: string } | null;
 99 | };
100 | 
101 | export type Image = MedusaImage & {
102 |   altText: string;
103 | };
104 | 
105 | export type ShippingProfile = {
106 |   id: string;
107 |   name: string;
108 |   type: 'default' | 'gift_card' | 'custom';
109 |   products?: Product[];
110 |   shipping_options?: ShippingOption[];
111 |   created_at: string;
112 |   updated_at: string;
113 |   deleted_at?: string | null;
114 |   metadata?: { [key: string]: any } | null;
115 | };
116 | 
117 | export type ProductCategory = {
118 |   id: string;
119 |   name: string;
120 |   description: string;
121 |   handle: string;
122 |   mpath: string | null;
123 |   is_internal?: boolean;
124 |   is_active?: boolean;
125 |   rank?: number;
126 |   category_children?: ProductCategory[];
127 |   parent_category_id?: string | null;
128 |   parent_category?: ProductCategory | null;
129 |   products?: Product[];
130 |   created_at: string;
131 |   updated_at: string;
132 |   metadata?: { [key: string]: string } | null;
133 | };
134 | 
135 | export type MedusaProductVariant = {
136 |   id: string;
137 |   title?: string;
138 |   product_id: string;
139 |   product?: Product;
140 |   prices?: MoneyAmount[];
141 |   sku?: string;
142 |   barcode?: string | null;
143 |   ean?: string | null;
144 |   upc?: string | null;
145 |   variant_rank?: number | null;
146 |   inventory_quantity: number;
147 |   allow_backorder: boolean;
148 |   manage_inventory: boolean;
149 |   hs_code?: string | null;
150 |   origin_country?: string | null;
151 |   mid_code?: string | null;
152 |   material?: string | null;
153 |   weight?: number | null;
154 |   length?: number | null;
155 |   height?: number | null;
156 |   width?: number | null;
157 |   options?: ProductOptionValue[];
158 |   created_at: string;
159 |   updated_at: string;
160 |   deleted_at: string | null;
161 |   purchasable?: boolean;
162 | };
163 | 
164 | export type ProductVariant = MedusaProductVariant & {
165 |   availableForSale: boolean;
166 |   selectedOptions: SelectedOption[];
167 |   price: Money;
168 | };
169 | 
170 | export type SelectedOption = {
171 |   name: string;
172 |   value: string;
173 | };
174 | 
175 | export type MedusaProductOption = {
176 |   id: string;
177 |   title: string;
178 |   values?: ProductOptionValue[];
179 |   product_id: string;
180 |   product?: Product | null;
181 |   created_at: string;
182 |   updated_at: string;
183 |   deleted_at?: string | null;
184 |   metadata?: Record<string, any> | null;
185 | };
186 | 
187 | export type ProductOption = Omit<MedusaProductOption, 'values'> & {
188 |   availableForSale: boolean;
189 |   name: string;
190 |   values: string[];
191 | };
192 | 
193 | export type ProductOptionValue = {
194 |   id: string;
195 |   value: string;
196 |   option_id: string;
197 |   option?: MedusaProductOption | null;
198 |   variant_id: string;
199 |   variant?: MedusaProductVariant | null;
200 |   created_at: string;
201 |   updated_at: string;
202 |   deleted_at?: string | null;
203 |   metadata?: Record<string, any> | null;
204 | };
205 | 
206 | export type Money = {
207 |   amount: string;
208 |   currencyCode: string;
209 | };
210 | 
211 | export type MoneyAmount = {
212 |   id: string;
213 |   currency_code: string;
214 |   currency?: Currency | null;
215 |   amount: number;
216 |   min_quantity?: number | null;
217 |   max_quantity?: number | null;
218 |   price_list_id?: string | null;
219 |   price_list?: PriceList | null;
220 |   variant_id?: string | null;
221 |   variant?: ProductVariant | null;
222 |   region_id?: string | null;
223 |   region?: Region | null;
224 |   created_at: string;
225 |   updated_at: string;
226 |   deleted_at?: string | null;
227 | };
228 | 
229 | export type Currency = {
230 |   code: string;
231 |   symbol: string;
232 |   symbol_native: string;
233 |   name: string;
234 |   includes_tax?: boolean;
235 | };
236 | 
237 | export type PriceList = {
238 |   id: string;
239 |   name: string;
240 |   description: string;
241 |   type?: 'sale' | 'override';
242 |   status?: 'active' | 'draft';
243 |   starts_at?: string | null;
244 |   ends_at?: string | null;
245 |   customer_groups?: CustomerGroup[];
246 |   prices?: MoneyAmount[];
247 |   includes_tax?: boolean;
248 |   created_at: string;
249 |   updated_at: string;
250 |   deleted_at?: string | null;
251 | };
252 | 
253 | export type CustomerGroup = {
254 |   id: string;
255 |   name: string;
256 | };
257 | 
258 | type ShippingOption = {
259 |   id: string;
260 |   name: string;
261 |   region_id: string;
262 |   region?: Region | null;
263 |   profile_id: string;
264 |   profile?: ShippingProfile | null;
265 |   provider_id: string;
266 |   provider?: FulfillmentProvider | null;
267 |   price_type: 'flat_rate' | 'calculated';
268 |   amount?: number | null;
269 |   is_return: boolean;
270 |   admin_only: boolean;
271 |   requirements?: ShippingOptionRequirement[];
272 |   data: Record<string, unknown>;
273 |   includes_tax: boolean;
274 |   created_at: string;
275 |   updated_at: string;
276 |   deleted_at?: string | null;
277 |   metadata?: Record<string, unknown> | null;
278 | };
279 | 
280 | export type Region = {
281 |   id: string;
282 |   name: string;
283 |   country_code: string;
284 |   created_at: string;
285 |   updated_at: string;
286 |   deleted_at?: string | null;
287 |   metadata?: Record<string, unknown> | null;
288 |   currency_code: string;
289 |   tax_code: string;
290 |   tax_rate: number;
291 | };
292 | 
293 | export type FulfillmentProvider = {
294 |   id: string;
295 |   name: string;
296 |   created_at: string;
297 |   updated_at: string;
298 |   deleted_at?: string | null;
299 |   metadata?: Record<string, unknown> | null;
300 | };
301 | 
302 | export type ShippingOptionRequirement = {
303 |   id: string;
304 |   requirement_id: string;
305 |   value: string;
306 |   created_at: string;
307 |   updated_at: string;
308 |   deleted_at?: string | null;
309 |   metadata?: Record<string, unknown> | null;
310 | };
311 | 
312 | export type MedusaCart = {
313 |   id: string;
314 |   email?: string;
315 |   billing_address_id: string;
316 |   // billing_address?: Address;
317 |   // shipping_address_id?: string;
318 |   // shipping_address?: Address;
319 |   items?: MedusaLineItem[];
320 |   region_id: string;
321 |   region?: Region;
322 |   // discounts?: Discount[];
323 |   // gift_cards?: GiftCard[];
324 |   customer_id?: string;
325 |   // customer?: Customer;
326 |   // payment_session?: PaymentSession;
327 |   // payment_sessions?: PaymentSession[];
328 |   payment_id?: string;
329 |   // payment?: Payment;
330 |   // shipping_methods?: ShippingMethod[];
331 |   type: 'default' | 'swap' | 'draft_order' | 'payment_link' | 'claim';
332 |   completed_at?: string;
333 |   payment_authorized_at?: string;
334 |   idempotency_key?: string;
335 |   context?: Record<string, any>;
336 |   sales_channel_id?: string;
337 |   // sales_channel?: SalesChannel;
338 |   created_at: string;
339 |   updated_at: string;
340 |   deleted_at?: string;
341 |   metadata?: Record<string, any>;
342 |   shipping_total?: number;
343 |   discount_total?: number;
344 |   raw_discount_total?: number;
345 |   item_tax_total?: number;
346 |   shipping_tax_total?: number;
347 |   tax_total?: number;
348 |   refunded_total?: number;
349 |   total?: number;
350 |   subtotal?: number;
351 | };
352 | 
353 | export type Cart = Partial<MedusaCart> & {
354 |   lines: CartItem[];
355 |   checkoutUrl: string;
356 |   totalQuantity: number;
357 |   cost: {
358 |     subtotalAmount: Money;
359 |     totalAmount: Money;
360 |     totalTaxAmount: Money;
361 |   };
362 | };
363 | 
364 | export type Menu = {
365 |   title: string;
366 |   path: string;
367 | };
368 | 
369 | export type MedusaLineItem = {
370 |   id: string;
371 |   cart_id?: string;
372 |   cart?: Cart;
373 |   order_id?: string;
374 |   // order?: Order;
375 |   swap_id?: string | null;
376 |   // swap?: Swap;
377 |   claim_order_id?: string | null;
378 |   // claim_order?: ClaimOrder;
379 |   // tax_lines?: LineItemTaxLine[];
380 |   // adjustments?: LineItemAdjustment[];
381 |   original_item_id?: string | null;
382 |   order_edit_id?: string | null;
383 |   // order_edit?: OrderEdit;
384 |   title: string;
385 |   description?: string | null;
386 |   thumbnail?: string | null;
387 |   is_return: boolean;
388 |   is_giftcard: boolean;
389 |   should_merge: boolean;
390 |   allow_discounts: boolean;
391 |   has_shipping?: boolean | null;
392 |   unit_price: number;
393 |   variant_id?: string | null;
394 |   variant: MedusaProductVariant;
395 |   quantity: number;
396 |   fulfilled_quantity?: number | null;
397 |   returned_quantity?: number | null;
398 |   shipped_quantity?: number | null;
399 |   refundable: number;
400 |   subtotal: number;
401 |   tax_total: number;
402 |   total: number;
403 |   original_total: number;
404 |   original_tax_total: number;
405 |   discount_total: number;
406 |   raw_discount_total: number;
407 |   gift_card_total: number;
408 |   includes_tax: boolean;
409 |   created_at: Date;
410 |   updated_at: Date;
411 |   metadata?: { [key: string]: string } | null;
412 | };
413 | 
414 | export type CartItem = MedusaLineItem & {
415 |   merchandise: {
416 |     id: string;
417 |     selectedOptions: SelectedOption[];
418 |     product: Product;
419 |     title: string;
420 |   };
421 |   cost: {
422 |     totalAmount: Money;
423 |   };
424 |   quantity: number;
425 | };
426 | 
427 | export type RegionInfo = Pick<Region, 'currency_code' | 'tax_code' | 'tax_rate'>;
428 | export type ProductVariantEntity = ConvertDateToString<Omit<ProductVariant, 'beforeInsert'>>;
429 | export type ProductVariantInfo = Pick<ProductVariantEntity, 'prices'>;
430 | 
431 | type ConvertDateToString<T extends {}> = {
432 |   [P in keyof T]: T[P] extends Date ? Date | string : T[P];
433 | };
434 | 


--------------------------------------------------------------------------------
/lib/type-guards.ts:
--------------------------------------------------------------------------------
 1 | export interface MedusaErrorLike {
 2 |   status: number;
 3 |   message: Error;
 4 | }
 5 | 
 6 | export const isObject = (object: unknown): object is Record<string, unknown> => {
 7 |   return typeof object === 'object' && object !== null && !Array.isArray(object);
 8 | };
 9 | 
10 | export const isMedusaError = (error: unknown): error is MedusaErrorLike => {
11 |   if (!isObject(error)) return false;
12 | 
13 |   if (error instanceof Error) return true;
14 | 
15 |   return findError(error);
16 | };
17 | 
18 | function findError<T extends object>(error: T): boolean {
19 |   if (Object.prototype.toString.call(error) === '[object Error]') {
20 |     return true;
21 |   }
22 | 
23 |   const prototype = Object.getPrototypeOf(error) as T | null;
24 | 
25 |   return prototype === null ? false : findError(prototype);
26 | }
27 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { ReadonlyURLSearchParams } from 'next/navigation';
 2 | import { MedusaProductOption } from './medusa/types';
 3 | 
 4 | export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyURLSearchParams) => {
 5 |   const paramsString = params.toString();
 6 |   const queryString = `${paramsString.length ? '?' : ''}${paramsString}`;
 7 | 
 8 |   return `${pathname}${queryString}`;
 9 | };
10 | 
11 | export const mapOptionIds = (productOptions: MedusaProductOption[]) => {
12 |   // Maps the option titles to their respective ids
13 |   const map: Record<string, string> = {};
14 |   productOptions.forEach((option) => {
15 |     map[option.id] = option.title;
16 |   });
17 |   return map;
18 | };
19 | 
20 | export const isObject = (input: any) => input instanceof Object;
21 | export const isArray = (input: any) => Array.isArray(input);
22 | 
23 | export const isEmpty = (input: any) => {
24 |   return (
25 |     input === null ||
26 |     input === undefined ||
27 |     (isObject(input) && Object.keys(input).length === 0) ||
28 |     (isArray(input) && (input as any[]).length === 0) ||
29 |     (typeof input === 'string' && input.trim().length === 0)
30 |   );
31 | };
32 | 


--------------------------------------------------------------------------------
/license.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023 Vercel, Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | module.exports = {
 3 |   eslint: {
 4 |     // Disabling on production builds because we're running checks on PRs via GitHub Actions.
 5 |     ignoreDuringBuilds: true
 6 |   },
 7 |   experimental: {
 8 |     serverActions: true
 9 |   },
10 |   images: {
11 |     formats: ['image/avif', 'image/webp'],
12 |     remotePatterns: [
13 |       {
14 |         protocol: 'https',
15 |         hostname: 'medusa-public-images.s3.eu-west-1.amazonaws.com',
16 |         pathname: '/**'
17 |       },
18 |       {
19 |         protocol: 'https',
20 |         hostname: 'medusa-server-testing.s3.amazonaws.com',
21 |         pathname: '/**'
22 |       }
23 |     ]
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "packageManager": "pnpm@8.2.0",
 4 |   "engines": {
 5 |     "node": ">=18",
 6 |     "pnpm": ">=7"
 7 |   },
 8 |   "scripts": {
 9 |     "dev": "next dev",
10 |     "build": "next build",
11 |     "start": "next start",
12 |     "lint": "next lint",
13 |     "lint-staged": "lint-staged",
14 |     "prettier": "prettier --write --ignore-unknown .",
15 |     "prettier:check": "prettier --check --ignore-unknown .",
16 |     "test": "pnpm lint && pnpm prettier:check"
17 |   },
18 |   "git": {
19 |     "pre-commit": "lint-staged"
20 |   },
21 |   "lint-staged": {
22 |     "*": "prettier --write --ignore-unknown"
23 |   },
24 |   "dependencies": {
25 |     "@headlessui/react": "^1.7.15",
26 |     "@heroicons/react": "^2.0.18",
27 |     "clsx": "^2.0.0",
28 |     "next": "13.4.13-canary.15",
29 |     "react": "18.2.0",
30 |     "react-dom": "18.2.0"
31 |   },
32 |   "devDependencies": {
33 |     "@tailwindcss/container-queries": "^0.1.1",
34 |     "@tailwindcss/typography": "^0.5.9",
35 |     "@types/node": "20.4.4",
36 |     "@types/react": "18.2.16",
37 |     "@types/react-dom": "18.2.7",
38 |     "@vercel/git-hooks": "^1.0.0",
39 |     "autoprefixer": "^10.4.14",
40 |     "eslint": "^8.45.0",
41 |     "eslint-config-next": "^13.4.12",
42 |     "eslint-config-prettier": "^8.8.0",
43 |     "eslint-plugin-unicorn": "^48.0.0",
44 |     "lint-staged": "^13.2.3",
45 |     "postcss": "^8.4.27",
46 |     "prettier": "3.0.1",
47 |     "prettier-plugin-tailwindcss": "^0.4.1",
48 |     "tailwindcss": "^3.3.3",
49 |     "typescript": "5.1.6"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {}
5 |   }
6 | };
7 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   singleQuote: true,
 3 |   arrowParens: 'always',
 4 |   trailingComma: 'none',
 5 |   printWidth: 100,
 6 |   tabWidth: 2,
 7 |   // pnpm doesn't support plugin autoloading
 8 |   // https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
 9 |   plugins: [require('prettier-plugin-tailwindcss')]
10 | };
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const plugin = require('tailwindcss/plugin');
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
 6 |   theme: {
 7 |     extend: {
 8 |       fontFamily: {
 9 |         sans: ['var(--font-inter)']
10 |       },
11 |       keyframes: {
12 |         fadeIn: {
13 |           from: { opacity: 0 },
14 |           to: { opacity: 1 }
15 |         },
16 |         marquee: {
17 |           '0%': { transform: 'translateX(0%)' },
18 |           '100%': { transform: 'translateX(-100%)' }
19 |         },
20 |         blink: {
21 |           '0%': { opacity: 0.2 },
22 |           '20%': { opacity: 1 },
23 |           '100% ': { opacity: 0.2 }
24 |         }
25 |       },
26 |       animation: {
27 |         fadeIn: 'fadeIn .3s ease-in-out',
28 |         carousel: 'marquee 60s linear infinite',
29 |         blink: 'blink 1.4s both infinite'
30 |       }
31 |     }
32 |   },
33 |   future: {
34 |     hoverOnlyWhenSupported: true
35 |   },
36 |   plugins: [
37 |     require('@tailwindcss/container-queries'),
38 |     require('@tailwindcss/typography'),
39 |     plugin(({ matchUtilities, theme }) => {
40 |       matchUtilities(
41 |         {
42 |           'animation-delay': (value) => {
43 |             return {
44 |               'animation-delay': value
45 |             };
46 |           }
47 |         },
48 |         {
49 |           values: theme('transitionDelay')
50 |         }
51 |       );
52 |     })
53 |   ]
54 | };
55 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "baseUrl": ".",
18 |     "noUncheckedIndexedAccess": true,
19 |     "plugins": [
20 |       {
21 |         "name": "next"
22 |       }
23 |     ]
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------