safak · Aymen-Gherdaine · Jun 7, 2024 · Jun 7, 2024 · Jun 7, 2024 · Jun 8, 2024
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,18 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+import { hostname } from "os";
+
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.pexels.com",
+      },
+      {
+        protocol: "https",
+        hostname: "static.wixstatic.com",
+      },
+    ],
+  },
+};
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,18 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@wix/bookings": "^1.0.388",
+    "@wix/sdk": "^1.9.8",
+    "@wix/stores": "^1.0.154",
+    "isomorphic-dompurify": "^2.12.0",
+    "js-cookie": "^3.0.5",
+    "next": "14.2.2",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.2"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.2"
+    "eslint-config-next": "14.2.2",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,3 +1,43 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body {
+  background: #f8f8f8;
+  text-color: #0c0c0c;
+}
+
+/* Apply scrollbar styling to the entire document */
+html {
+  scroll-behavior: smooth;
+  scrollbar-width: thin; /* For Firefox */
+  scrollbar-color: #545454 #303030; /* For Firefox */
+}
+
+body::-webkit-scrollbar {
+  width: 10px; /* Width of the vertical scrollbar */
+  height: 8px; /* Height of the horizontal scrollbar */
+}
+
+body::-webkit-scrollbar-thumb {
+  background: #545454; /* Color of the scrollbar thumb */
+  border-radius: 50px; /* Roundness of the scrollbar thumb */
+}
+
+body::-webkit-scrollbar-track {
+  background: #303030; /* Color of the scrollbar track */
+}
+
+/* Optional: Add hover effects for better UX */
+body::-webkit-scrollbar-thumb:hover {
+  background: #707070; /* Change thumb color on hover */
+}
+
+/* Hide scrollbar for the x of the category list */
+.scrollbar-hide::webkit-scrollbar {
+  display: none;
+}
+
+.scrollbar-hide {
+  scrollbar-width: none;
+}
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -0,0 +1,26 @@
+import { Cinzel } from "next/font/google";
+import "./globals.css";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import { WixClientContextProvider } from "../context/wixContext";
+
+const cinzel = Cinzel({ weight: "500", subsets: ["latin"] });
+
+export const metadata = {
+  title: "Eleganza E-Commerce ",
+  description: "A complete e-commerce application with Next.js and Wix",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={cinzel.className}>
+        <WixClientContextProvider>
+          <Navbar />
+          {children}
+          <Footer />
+        </WixClientContextProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
diff --git a/src/app/list/[productSlug]/page.js b/src/app/list/[productSlug]/page.js
@@ -0,0 +1,88 @@
+import { notFound } from "next/navigation";
+import { wixClientServer } from "../../../lib/wixCllientServer";
+import ProductImages from "../../../components/ProductImages";
+import ProductsVariants from "../../../components/ProductsVariants";
+import SelectQuantityAndAddToCart from "../../../components/SelectQuantityAndAddToCart";
+
+const ProductPage = async ({ params }) => {
+  const wixClient = await wixClientServer();
+
+  let product = [];
+
+  try {
+    product = await wixClient.products
+      .queryProducts()
+      .eq("slug", params.productSlug)
+      .find();
+
+    if (!product.items[0]) {
+      return notFound();
+    }
+  } catch (e) {
+    return <div>Error fetching product detailled</div>;
+  }
+
+  return (
+    <div className="px-4 md:px-8 lg:px-16 xl:32 2xl:px-64 relative flex flex-col lg:flex-row gap-16">
+      {/* IMG */}
+
+      <div className="w-full lg:w-1/2 lg:sticky top-20 h-max">
+        <ProductImages images={product.items[0]?.media} />
+      </div>
+
+      {/* TEXTS */}
+
+      <div className="w-full lg:w-1/2 flex flex-col gap-6">
+        <h1 className="text-4xl font-medium">{product.items[0].name}</h1>
+        <p className="text-gray-500">{product.items[0].description}</p>
+        <div className="h-[2px] bg-gray-100" />
+        {product.items[0].price?.price ===
+        product.items[0].price?.discountedPrice ? (
+          <h2 className="text-2xl font-medium">
+            ${product.items[0].price?.discountedPrice}
+          </h2>
+        ) : (
+          <div className="flex gap-4 items-center">
+            <h3 className="text-xl text-gray-500 line-through">
+              ${product.items[0].price?.price}
+            </h3>
+            <h2 className="text-2xl font-medium">
+              ${product.items[0].price?.discountedPrice}
+            </h2>
+          </div>
+        )}
+
+        <div className="h-[2px] bg-gray-100" />
+        {product.items[0]?.variants && product.items[0]?.productOptions ? (
+          <ProductsVariants
+            productId={product.items[0]._id}
+            variants={product.items[0].variants}
+            productOptions={product.items[0].productOptions}
+          />
+        ) : (
+          <SelectQuantityAndAddToCart
+            productId={product.items[0]._id}
+            variantId="00000000-0000-0000-0000-000000000000"
+            stockNumber={product.items[0].stock?.quantity || 0}
+          />
+        )}
+
+        <div className="h-[2px] bg-gray-100" />
+
+        {product?.items[0]?.additionalInfoSections.map((additionalInfo) => {
+          return (
+            <div className="text-sm" key={additionalInfo.title}>
+              <h4 className="text-md font-semibold mb-4">
+                {additionalInfo.title}
+              </h4>
+              <p className="">{additionalInfo.description}</p>
+              <p></p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ProductPage;
diff --git a/src/app/list/page.js b/src/app/list/page.js
@@ -0,0 +1,65 @@
+import Image from "next/image";
+import ProductList from "../../components/ProductList";
+import Filter from "../../components/Filter";
+import { wixClientServer } from "../../lib/wixCllientServer";
+import { Suspense } from "react";
+
+const ListPage = async ({ searchParams }) => {
+  const wixClient = await wixClientServer();
+
+  let categoryProducts = [];
+
+  try {
+    categoryProducts = await wixClient.collections.getCollectionBySlug(
+      searchParams.category || "all-products"
+    );
+  } catch (error) {
+    return <div>Error fetching category products</div>;
+  }
+
+  return (
+    <div className="px-4 md:px-8 ls:px-16 xl:32 2xl:px-64 relative">
+      {/* Banner section */}
+
+      <div className="px-4 mt-8 flex justify-between h-64 bg-[#ffe9e9] rounded-lg">
+        <div className="w-2/3 flex flex-col items-center justify-center gap-8">
+          <h1 className="text-lg sm:text-4xl font-semibold sm:leading-[48px] text-gray-700">
+            Grab up to 50% off on
+            <br />
+            Selected Products
+          </h1>
+          <button className="rounded-md bg-[#0c0c0c] text-[#fbfbfb] w-max py-3 px-5 text-sm">
+            Buy Now
+          </button>
+        </div>
+        <div className="relative w-1/3">
+          <Image
+            src="/woman.png"
+            alt="list page banner image"
+            fill
+            className="object-contain"
+          />
+        </div>
+      </div>
+
+      {/* Filter section */}
+
+      <Filter />
+
+      {/* Product List */}
+
+      <h1 className="my-12 text-xl font-semibold">Just For You!</h1>
+      <Suspense fallback={"loading"}>
+        <ProductList
+          categoryId={
+            categoryProducts?.collection?._id ||
+            "00000000-000000-000000-000000000001"
+          }
+          searchParams={searchParams}
+        />
+      </Suspense>
+    </div>
+  );
+};
+
+export default ListPage;
diff --git a/src/app/login/page.js b/src/app/login/page.js
@@ -0,0 +1,5 @@
+const LoginPage = () => {
+  return <div>Login Page</div>;
+};
+
+export default LoginPage;
diff --git a/src/app/page.js b/src/app/page.js
@@ -0,0 +1,49 @@
+import ProductList from "../components/ProductList";
+import Slider from "../components/Slider";
+import CategoryList from "../components/CategoryList";
+import { Suspense } from "react";
+
+const HomePage = async () => {
+  return (
+    <div className="">
+      {/* Hero Section */}
+
+      <Slider />
+
+      {/* Featured Products section */}
+
+      <section className="mt-24 px-4 md:px-8 ls:px-16 xl:px-32 2xl:px-64">
+        <h1 className="text-2xl mb-12">Featured Products</h1>
+        <Suspense fallback={"loading"}>
+          <ProductList
+            categoryId={process.env.FEATURED_PRODUCTS_CATEGORY_ID}
+            limit={4}
+          />
+        </Suspense>
+      </section>
+
+      {/* Categories section */}
+
+      <section className="mt-24">
+        <h1 className="text-2xl px-4 md:px-8 ls:px-16 xl:px-32 2xl:px-64 mb-12">
+          Categories
+        </h1>
+        <Suspense fallback={"loading"}>
+          <CategoryList />
+        </Suspense>
+      </section>
+
+      {/* New Products section */}
+
+      <section className="mt-24 px-4 md:px-8 ls:px-16 xl:px-32 2xl:px-64">
+        <h1 className="text-2xl mb-12">New Products</h1>
+        <ProductList
+          categoryId={process.env.NEW_PRODUCTS_CATEGORY_ID}
+          limit={4}
+        />
+      </section>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/src/app/page.tsx b/src/app/page.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ yarn-error.log* @@
     # local env files
     .env*.local
+    .env
     # vercel
     .vercel
@@ Expand Down @@