From a5398565cffc4eacefc02efb90450e84f3fe07af Mon Sep 17 00:00:00 2001 From: Amritanshu Date: Thu, 26 Sep 2024 09:50:24 +0530 Subject: [PATCH] Beginning of ecommerce --- next.config.mjs | 10 ++- package.json | 3 + public/images/{logo.svg => logo-black.svg} | 2 +- public/images/logo-puce-red.svg | 52 +++++++++++ public/images/logo-white.svg | 52 +++++++++++ src/app/{ => (static)}/about-us/page.tsx | 4 +- src/app/{ => (static)}/layout.tsx | 2 +- src/app/{ => (static)}/page.tsx | 0 .../{ => (static)}/privacy-policy/page.tsx | 0 src/app/{ => (static)}/terms/page.tsx | 0 src/app/(storefront)/cart/page.tsx.exclude | 87 +++++++++++++++++++ src/app/(storefront)/layout.tsx | 21 +++++ .../products/[handle]/ProductDetails.tsx | 79 +++++++++++++++++ .../(storefront)/products/[handle]/page.tsx | 37 ++++++++ src/app/(storefront)/products/page.tsx | 40 +++++++++ src/app/providers.tsx | 23 +++++ src/components/footer.tsx | 9 +- src/components/instagram.tsx | 2 +- src/components/navbar.module.css | 18 ++-- src/components/navbar.tsx | 5 +- src/lib/config.ts | 13 +++ src/{app => }/lib/instagram.ts | 0 src/lib/product-by-handle.tsx | 16 ++++ src/lib/product.tsx | 39 +++++++++ src/pages/_app.tsx | 13 --- 25 files changed, 493 insertions(+), 34 deletions(-) rename public/images/{logo.svg => logo-black.svg} (99%) create mode 100644 public/images/logo-puce-red.svg create mode 100644 public/images/logo-white.svg rename src/app/{ => (static)}/about-us/page.tsx (98%) rename src/app/{ => (static)}/layout.tsx (93%) rename src/app/{ => (static)}/page.tsx (100%) rename src/app/{ => (static)}/privacy-policy/page.tsx (100%) rename src/app/{ => (static)}/terms/page.tsx (100%) create mode 100644 src/app/(storefront)/cart/page.tsx.exclude create mode 100644 src/app/(storefront)/layout.tsx create mode 100644 src/app/(storefront)/products/[handle]/ProductDetails.tsx create mode 100644 src/app/(storefront)/products/[handle]/page.tsx create mode 100644 src/app/(storefront)/products/page.tsx create mode 100644 src/app/providers.tsx create mode 100644 src/lib/config.ts rename src/{app => }/lib/instagram.ts (100%) create mode 100644 src/lib/product-by-handle.tsx create mode 100644 src/lib/product.tsx delete mode 100644 src/pages/_app.tsx diff --git a/next.config.mjs b/next.config.mjs index d74bf65..34b7d73 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,7 +1,13 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - output: 'export', - images: { unoptimized: true }, + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: '**.amazonaws.com', + }, + ], + }, }; export default nextConfig; diff --git a/package.json b/package.json index af0d3a2..c87d15e 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,9 @@ "lint": "next lint" }, "dependencies": { + "@medusajs/medusa": "^1.20.10", + "@tanstack/react-query": "4.22", + "medusa-react": "^9.0.18", "next": "14.2.13", "react": "^18", "react-dom": "^18", diff --git a/public/images/logo.svg b/public/images/logo-black.svg similarity index 99% rename from public/images/logo.svg rename to public/images/logo-black.svg index 586a732..7d33e76 100644 --- a/public/images/logo.svg +++ b/public/images/logo-black.svg @@ -7,7 +7,7 @@ } .cls-1, .cls-2 { - fill: current; + fill: black; } diff --git a/public/images/logo-puce-red.svg b/public/images/logo-puce-red.svg new file mode 100644 index 0000000..444e618 --- /dev/null +++ b/public/images/logo-puce-red.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/logo-white.svg b/public/images/logo-white.svg new file mode 100644 index 0000000..21f20b3 --- /dev/null +++ b/public/images/logo-white.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/about-us/page.tsx b/src/app/(static)/about-us/page.tsx similarity index 98% rename from src/app/about-us/page.tsx rename to src/app/(static)/about-us/page.tsx index db87a79..9c5ea3b 100644 --- a/src/app/about-us/page.tsx +++ b/src/app/(static)/about-us/page.tsx @@ -8,8 +8,8 @@ import italyPic from '/public/images/about-us/06-italy.jpg'; export default function AboutUsPage() { return ( -
-
+
+
{/* Left Column - Text with Header */}
Welcome to the World of Mozimo Magic diff --git a/src/app/layout.tsx b/src/app/(static)/layout.tsx similarity index 93% rename from src/app/layout.tsx rename to src/app/(static)/layout.tsx index b2a077c..e0ce217 100644 --- a/src/app/layout.tsx +++ b/src/app/(static)/layout.tsx @@ -1,4 +1,4 @@ -import './globals.css'; +import '../globals.css'; // import './globalicons.css'; import { ReactNode } from 'react'; diff --git a/src/app/page.tsx b/src/app/(static)/page.tsx similarity index 100% rename from src/app/page.tsx rename to src/app/(static)/page.tsx diff --git a/src/app/privacy-policy/page.tsx b/src/app/(static)/privacy-policy/page.tsx similarity index 100% rename from src/app/privacy-policy/page.tsx rename to src/app/(static)/privacy-policy/page.tsx diff --git a/src/app/terms/page.tsx b/src/app/(static)/terms/page.tsx similarity index 100% rename from src/app/terms/page.tsx rename to src/app/(static)/terms/page.tsx diff --git a/src/app/(storefront)/cart/page.tsx.exclude b/src/app/(storefront)/cart/page.tsx.exclude new file mode 100644 index 0000000..a3d4985 --- /dev/null +++ b/src/app/(storefront)/cart/page.tsx.exclude @@ -0,0 +1,87 @@ +'use client'; + +import { useCart, useUpdateLineItem, useDeleteLineItem } from 'medusa-react'; +import { useRouter } from 'next/navigation'; + +export default function CartPage() { + const { cart } = useCart(); + const router = useRouter(); + + // Ensure cart is loaded + if (!cart?.id) { + return

Loading cart...

; + } + + // Hook for updating a cart line item + const { + mutate: updateLineItem, + isLoading: isUpdating, + error: updateError, + } = useUpdateLineItem(cart.id); + // Hook for deleting a cart line item + const { + mutate: deleteLineItem, + isLoading: isDeleting, + error: deleteError, + } = useDeleteLineItem(cart?.id); + + if (!cart) return

Loading cart...

; + + const handleUpdateItem = (lineId: string, quantity: number) => { + updateLineItem( + { lineId, quantity }, + { + onSuccess: () => { + // Optionally refetch cart or show a success message + }, + }, + ); + }; + + const handleRemoveItem = (lineId: string) => { + deleteLineItem( + { lineId }, + { + onSuccess: () => { + // Optionally refetch cart or show a success message + }, + }, + ); + }; + + const proceedToCheckout = () => { + router.push('/checkout'); + }; + + return ( +
+

Your Cart

+ {cart.items?.length ? ( + cart.items.map((item) => ( +
+

{item.title}

+

Quantity: {item.quantity}

+ + + {updateError &&

Error updating item: {updateError.message}

} + {deleteError &&

Error removing item: {deleteError.message}

} +
+ )) + ) : ( +

Your cart is empty.

+ )} +

Total: {cart.total ? `$${(cart.total / 100).toFixed(2)}` : '$0.00'}

+ +
+ ); +} diff --git a/src/app/(storefront)/layout.tsx b/src/app/(storefront)/layout.tsx new file mode 100644 index 0000000..ea4dddf --- /dev/null +++ b/src/app/(storefront)/layout.tsx @@ -0,0 +1,21 @@ +import '../globals.css'; +import { ReactNode } from 'react'; +import { Providers } from '../providers'; +import { Footer } from '@/components/footer'; +import { Navbar } from '@/components/navbar'; + +interface RootLayoutProps { + children: ReactNode; +} + +export default function RootLayout({ children }: RootLayoutProps) { + return ( + + + + {children} +