@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/showroom/categoryGridServer.tsx

@@ -0,0 +1,45 @@
+import { CategoryAPIType } from "@/lib/api/shop";
+import React from "react";
+import EmptyState from "../reuseableUI/emptyState";
+import Heading from "../reuseableUI/heading";
+import CategorySwiper from "./categorySwiper";
+
+async function fetchCategories(): Promise<CategoryAPIType[]> {
+  try {
+    const partsLogicUrl = process.env.NEXT_PUBLIC_PARTSLOGIC_URL || "";
+    const url = `${partsLogicUrl}/api/categories?page=1&per_page=100`;
+
+    const res = await fetch(url, {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      next: { revalidate: 3600 }, // Cache for 1 hour
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to fetch categories: ${res.status}`);
+    }
+
+    const data = await res.json();
+    return data.categories || [];
+  } catch (error) {
+    console.error("Error fetching categories:", error);
+    return [];
+  }
+}
+
+export const CategoryGridServer = async () => {
+  const categories = await fetchCategories();
+
+  return !categories.length ? null : (
+    <section
+      className="py-12 px-4 md:px-6 md:py-16 lg:py-24 lg:px-0"
+      style={{
+        backgroundColor: "var(--color-secondary-920)",
+      }}
+    >
+      <CategorySwiper categories={categories} />
+    </section>
+  );
+};

package/src/app/components/showroom/categorySwiper.tsx

@@ -0,0 +1,115 @@
+"use client";
+import { SwiperArrowIconLeft } from "@/app/utils/svgs/swiperArrowIconLeft";
+import { SwiperArrowIconRight } from "@/app/utils/svgs/swiperArrowIconRight";
+import { CategoryAPIType } from "@/lib/api/shop";
+import React, { Suspense, useState } from "react";
+import {
+  A11y,
+  Keyboard,
+  Mousewheel,
+  Navigation,
+  Pagination,
+  Scrollbar,
+} from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import type { Swiper as SwiperType } from "swiper";
+import { CategoryCard } from "../reuseableUI/categoryCard";
+import { CategorySkeleton } from "../reuseableUI/categorySkeleton";
+import Heading from "../reuseableUI/heading";
+
+interface CategorySwiperProps {
+  categories: CategoryAPIType[];
+}
+
+const CategorySwiper: React.FC<CategorySwiperProps> = ({ categories }) => {
+  const [isBeginning, setIsBeginning] = useState(true);
+  const [isEnd, setIsEnd] = useState(false);
+
+  const handleSlideChange = (swiper: SwiperType) => {
+    setIsBeginning(swiper.isBeginning);
+    setIsEnd(swiper.isEnd);
+  };
+
+  return (
+    <div className="container mx-auto px-8 md:px-12">
+      <div className="flex w-full items-center justify-between mb-8">
+        <Heading content="Shop by Category" />
+      </div>
+
+      <div className="relative group/swiper">
+        <button
+          className={`absolute -left-4 md:-left-8 top-1/2 -translate-y-1/2 z-20 p-2 md:p-3 rounded-full shadow-xl transition-all duration-300 bg-[var(--color-primary)] text-white hover:scale-110 active:scale-95 category-prev ${
+            isBeginning ? "opacity-0 pointer-events-none" : "opacity-100"
+          }`}
+          aria-label="Previous categories"
+        >
+          <span className="size-5 md:size-6 block">{SwiperArrowIconLeft}</span>
+        </button>
+
+        <Swiper
+          key={`swiper_category`}
+          threshold={6}
+          spaceBetween={16}
+          speed={600}
+          slidesPerView={1.2}
+          breakpoints={{
+            480: { slidesPerView: 2.2 },
+            768: { slidesPerView: 3.2 },
+            1024: { slidesPerView: 4.2 },
+            1280: { slidesPerView: 5.2 },
+            1536: { slidesPerView: 6.2 },
+          }}
+          modules={[
+            Navigation,
+            Scrollbar,
+            A11y,
+            Keyboard,
+            Mousewheel,
+            Pagination,
+          ]}
+          navigation={{
+            prevEl: ".category-prev",
+            nextEl: ".category-next",
+          }}
+          onSlideChange={handleSlideChange}
+          onInit={handleSlideChange}
+          mousewheel={{
+            enabled: true,
+            forceToAxis: true,
+            releaseOnEdges: true,
+          }}
+          keyboard={{
+            enabled: true,
+            onlyInViewport: true,
+          }}
+          className="w-full !overflow-visible [&_.swiper-wrapper]:items-stretch"
+        >
+          {categories.map((c) => (
+            <SwiperSlide key={c?.id} className="!h-auto">
+              <Suspense fallback={<CategorySkeleton variant="swiper" />}>
+                <CategoryCard
+                  id={c?.id}
+                  name={c?.name}
+                  image={c?.image ?? "/no-image-avail-large.png"}
+                  href={`/category/${c?.slug}`}
+                  description={c?.name ?? ""}
+                />
+              </Suspense>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        <button
+          className={`absolute -right-4 md:-right-8 top-1/2 -translate-y-1/2 z-20 p-2 md:p-3 rounded-full shadow-xl transition-all duration-300 bg-[var(--color-primary)] text-white hover:scale-110 active:scale-95 category-next ${
+            isEnd ? "opacity-0 pointer-events-none" : "opacity-100"
+          }`}
+          aria-label="Next categories"
+        >
+          <span className="size-5 md:size-6 block">{SwiperArrowIconRight}</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CategorySwiper;

package/src/app/components/showroom/featureStrip.tsx

@@ -0,0 +1,139 @@
+import Image from "next/image";
+import createApolloServerClient from "@/graphql/server-client";
+import {
+  GET_PAGE_METADATA_BY_SLUG,
+  type PageMetadataResponse,
+} from "@/graphql/queries/getHeroMetadata";
+
+export const FeaturesStrip = async ({
+  slug,
+  className,
+}: {
+  slug?: string;
+  className?: string;
+}) => {
+  // Fetch page metadata for features-strip
+  let meta: Record<string, string> = {};
+  try {
+    const client = createApolloServerClient();
+    const { data } = await client.query<PageMetadataResponse>({
+      query: GET_PAGE_METADATA_BY_SLUG,
+      variables: { slug: slug || "features-strip" },
+      fetchPolicy: "network-only",
+      errorPolicy: "ignore",
+    });
+    const items = data?.page?.metadata ?? [];
+    meta = Object.fromEntries(items.map((m) => [m.key, m.value ?? ""]));
+  } catch {
+    // Silent fallback to defaults below
+  }
+
+  const extractIconSrc = (raw?: string | null): string => {
+    const fallback = "/star.svg";
+    if (!raw) return fallback;
+    const val = raw.trim();
+    // Strip leading 'background-image:' if present
+    const withoutProp = val.replace(/^background-image\s*:\s*/i, "");
+    const match = withoutProp.match(/url\(([^)]+)\)/i);
+    if (match) {
+      let url = match[1].trim();
+      if (
+        (url.startsWith('"') && url.endsWith('"')) ||
+        (url.startsWith("'") && url.endsWith("'"))
+      ) {
+        url = url.slice(1, -1);
+      }
+      return url || fallback;
+    }
+    // If it's already a direct url/path/data uri
+    if (
+      val.startsWith("/") ||
+      val.startsWith("http") ||
+      val.startsWith("data:")
+    )
+      return val;
+    return fallback;
+  };
+
+  const h1 = meta["feature_1_heading"] || "Original Products";
+  const t1 =
+    meta["feature_1_text"] || "Creative designs that elevate daily items.";
+  const i1 = extractIconSrc(meta["feature_1_icon"]) || "/star.svg";
+  const h2 = meta["feature_2_heading"] || "Affordable Rates";
+  const t2 =
+    meta["feature_2_text"] || "Explore affordable prices for everyone here!";
+  const i2 = extractIconSrc(meta["feature_2_icon"]) || "/star.svg";
+  const h3 = meta["feature_3_heading"] || "Wide variety";
+  const t3 = meta["feature_3_text"] || "Explore a range of unique offerings.";
+  const i3 = extractIconSrc(meta["feature_3_icon"]) || "/star.svg";
+
+  return (
+    <section
+      className={`relative isolate bg-[var(--color-secondary-920)] px-4 py-4 md:px-6 lg:px-20 overflow-hidden ${className}`}
+      aria-label="Store features"
+    >
+      {/* Content */}
+      <div className="relative mx-auto w-full py-3 md:py-3 max-w-7xl border-y border-gray-300 rounded-lg border-x !bg-[#E9E9E9] md:min-w-[980px]">
+        <div className="flex flex-col md:flex-row items-stretch justify-between">
+          {/* Feature 1 */}
+          <div className="flex items-center gap-4 py-4 px-2 md:py-0 md:px-8 md:flex-1 md:basis-1/3 md:justify-center">
+            <Image
+              src={i1}
+              alt={`${h1} icon`}
+              width={80}
+              height={80}
+              priority
+              unoptimized={i1.startsWith("data:")}
+            />
+            <div className="leading-none">
+              <p className="font-primary capitalize text-[var(--color-secondary-910)] text-lg font-bold leading-tight whitespace-nowrap">
+                {h1}
+              </p>
+              <p className="font-secondary text-[var(--color-secondary-910)] text-sm">
+                {t1}
+              </p>
+            </div>
+          </div>
+
+          {/* Feature 2 */}
+          <div className="flex items-center gap-4 py-4 px-2 md:py-0 md:px-8 md:flex-1 md:basis-1/3 md:justify-center">
+            <Image
+              src={i2}
+              alt={`${h2} icon`}
+              width={80}
+              height={80}
+              unoptimized={i2.startsWith("data:")}
+            />
+            <div className="leading-none">
+              <p className="font-primary capitalize text-[var(--color-secondary-910)] text-lg font-bold leading-tight whitespace-nowrap">
+                {h2}
+              </p>
+              <p className="font-secondary text-[var(--color-secondary-910)] text-sm">
+                {t2}
+              </p>
+            </div>
+          </div>
+
+          {/* Feature 3 */}
+          <div className="flex items-center gap-4 py-4 px-2 md:py-0 md:px-8 md:flex-1 md:basis-1/3 md:justify-center">
+            <Image
+              src={i3}
+              alt={`${h3} icon`}
+              width={80}
+              height={80}
+              unoptimized={i3.startsWith("data:")}
+            />
+            <div className="leading-none">
+              <p className="font-primary capitalize text-[var(--color-secondary-910)] text-lg font-bold leading-tight whitespace-nowrap">
+                {h3}
+              </p>
+              <p className="font-secondary text-[var(--color-secondary-910)] text-sm">
+                {t3}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/app/components/showroom/offersSwiper.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import CommonButton from "../reuseableUI/commonButton";
+import EmptyState from "../reuseableUI/emptyState";
+
+interface OfferSlide {
+  id: string;
+  image: string;
+  alt: string;
+  Heading: string;
+  subHeading: string;
+  Offer: string;
+}
+
+const defaultSlides = [
+  {
+    id: "1",
+    image: "/no-image-avail-large.png",
+    alt: "Slide 3",
+    Heading: "Cold Air Intake for Ford F-150 2019+",
+    subHeading: "INTAKE SYSTEMS",
+    Offer: "$300.69",
+  },
+  {
+    id: "2",
+    image: "/no-image-avail-large.png",
+    alt: "Slide 3",
+    Heading: "Cold Air Intake for Ford F-150 2019+",
+    subHeading: "INTAKE SYSTEMS",
+    Offer: "$300.69",
+  },
+  {
+    id: "3",
+    image: "/no-image-avail-large.png",
+    alt: "Slide 3",
+    Heading: "Cold Air Intake for Ford F-150 2019+",
+    subHeading: "INTAKE SYSTEMS",
+    Offer: "$300.69",
+  },
+];
+
+interface OffersSwiperProps {
+  slides?: OfferSlide[];
+}
+
+export const OffersSwiper = ({ slides }: OffersSwiperProps) => {
+  const slidesToUse = slides && slides.length > 0 ? slides : defaultSlides;
+  const router = useRouter();
+
+  if (!slidesToUse || slidesToUse.length === 0) {
+    return (
+      <section className="container mx-auto py-12 px-4 md:px-6 md:py-16 lg:py-24 lg:px-0">
+        <div className="relative w-full h-[644px] flex items-center justify-center">
+          <EmptyState
+            text="No offers available"
+            textParagraph="Check back later for exciting offers and deals"
+            className="h-full"
+          />
+        </div>
+      </section>
+    );
+  }
+  return (
+    <section className="mx-0 lg:container lg:mx-auto py-12 px-4 md:px-6 md:py-16 lg:py-24 lg:px-0">
+      <div className="relative w-full">
+        <div className="w-full h-full absolute bg-black/60 backdrop-blur-md z-[2] top-0 left-0 text-center flex items-center justify-center font-primary ">
+          <div className="bg-[var(--color-secondary-400)] px-2 py-1 size-fit text-[var(--color-secondary-90)] text-3xl">
+            Coming Soon
+          </div>
+        </div>
+        <Swiper
+          modules={[Navigation, Pagination, Autoplay]}
+          navigation={{ prevEl: ".category-prev", nextEl: ".category-next" }}
+          pagination={{ clickable: true }}
+          // autoplay={{ delay: 4000 }}
+          loop
+          slidesPerView={1}
+          mousewheel={{
+            enabled: true,
+            forceToAxis: true,
+            releaseOnEdges: true,
+          }}
+          keyboard={{ enabled: true, onlyInViewport: true }}
+          className="w-full h-full    
+          [&_.swiper-pagination-bullet]:!mr-2.5
+          [&_.swiper-pagination-bullet]:!size-2.5
+          [&_.swiper-pagination-bullet]:!opacity-100
+          [&_.swiper-pagination-bullet]:!bg-[var(--color-secondary-200)]
+          [&_.swiper-pagination-bullet-active]:!bg-[var(--color-secondary-950)]
+          [&_.swiper-pagination]:!relative
+          [&_.swiper-pagination]:lg:hidden
+          [&_.swiper-pagination]:!top-[16px]
+          [&_.swiper-horizontal>.swiper-pagination-bullets]:!top-[1px]
+          [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:!top-[5px]"
+        >
+          {slidesToUse.map((slide) => (
+            <SwiperSlide key={slide.id}>
+              <div
+                style={{ backgroundImage: `url(${slide?.image})` }}
+                className="relative w-full flex justify-center items-center h-full bg-cover"
+              >
+                <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.9)_100%)]" />
+                <div className="relative flex px-4 py-12 md:px-6 md:py-16 lg:px-0 lg:py-24 max-w-[1152px] items-center h-full justify-between container w-full">
+                  <div className="flex flex-col items-start w-full max-w-[400px] lg:max-w-[645px]">
+                    <p
+                      style={{ color: "var(--color-secondary-300)" }}
+                      className="font-secondary text-xs md:text-sm lg:text-base tracking-[-0.04px]"
+                    >
+                      {slide.subHeading}
+                    </p>
+                    <div className="w-full flex flex-col justify-start gap-6 lg:gap-10">
+                      <h2
+                        style={{ color: "var(--color-secondary-50)" }}
+                        className="font-primary text-2xl md:text-3xl lg:text-6xl tracking-[-0.15px] uppercase"
+                      >
+                        {slide.Heading}
+                      </h2>
+
+                      <p
+                        style={{ color: "var(--color-secondary-50)" }}
+                        className="font-secondary text-3xl md:text-5xl lg:text-7xl font-light tracking-[-0.18px]"
+                      >
+                        {slide.Offer}
+                      </p>
+                      <CommonButton className="py-2 lg:py-3 w-fit" variant="primary" content={"SHOP NOW"} onClick={() => router.push("/products/all")} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        {/* Custom Previous Arrow (Left) */}
+        <div
+          style={{ backgroundColor: "var(--color-secondary-300)" }}
+          className="absolute hidden lg:block left-4 top-1/2 transform -translate-y-1/2 z-10 cursor-pointer p-2 rounded-full category-prev"
+        >
+          <svg
+            style={{ color: "var(--color-secondary-500)" }}
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+        </div>
+
+        {/* Custom Next Arrow (Right) */}
+        <div
+          style={{ backgroundColor: "var(--color-secondary-50)" }}
+          className="absolute hidden lg:block right-4 top-1/2 transform -translate-y-1/2 z-10 cursor-pointer p-2 rounded-full category-next"
+        >
+          <svg
+            style={{ color: "var(--color-secondary-950)" }}
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </div>
+      </div>
+    </section >
+  );
+};

package/src/app/components/showroom/productGrid.tsx

@@ -0,0 +1,56 @@
+import createApolloServerClient from "@/graphql/server-client";
+import { GET_FEATURED_PRODUCTS } from "@/graphql/queries/getFeaturedProducts";
+import { Product } from "@/graphql/types/product";
+import ProductSwiper from "./productSwiper";
+
+type Props = {
+  count?: number;
+  collection?: string;
+  heading?: string;
+};
+
+export const ProductGrid = async ({
+  count = 10,
+  collection,
+  heading = "",
+}: Props) => {
+  let f_products: Product[] = [];
+  const channel = process.env.NEXT_PUBLIC_SALEOR_CHANNEL || "default-channel";
+
+  try {
+    const client = createApolloServerClient();
+
+    const { data } = await client.query({
+      query: GET_FEATURED_PRODUCTS,
+      variables: {
+        slug: collection,
+        first: count,
+        channel,
+      },
+      fetchPolicy: "cache-first",
+      errorPolicy: "all", // Continue even with network errors
+    });
+
+    f_products =
+      data?.collection?.products?.edges?.map(
+        (e: { node: Product }) => e.node
+      ) ?? [];
+  } catch (error) {
+    console.error(
+      `[ProductGrid] Error fetching products for ${heading}:`,
+      error
+    );
+    // f_products remains empty array, will show empty state
+  }
+
+  return !f_products?.length ? null : (
+    <section
+      className="py-12 px-4 md:px-6 md:py-16 lg:py-24 lg:px-0"
+      style={{
+        backgroundColor: "var(--color-secondary-920)",
+      }}
+    >
+      <ProductSwiper products={f_products} heading={heading} />
+    </section>
+  );
+};

package/src/app/components/showroom/productSwiper.tsx

@@ -0,0 +1,119 @@
+"use client";
+import { SwiperArrowIconLeft } from "@/app/utils/svgs/swiperArrowIconLeft";
+import { SwiperArrowIconRight } from "@/app/utils/svgs/swiperArrowIconRight";
+import React, { Suspense, useState } from "react";
+import {
+  A11y,
+  Keyboard,
+  Mousewheel,
+  Navigation,
+  Pagination,
+  Scrollbar,
+} from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import type { Swiper as SwiperType } from "swiper";
+import { ProductCard } from "../reuseableUI/productCard";
+import { ProductSkeleton } from "../reuseableUI/productSkeleton";
+import Heading from "../reuseableUI/heading";
+import { Product } from "@/graphql/types/product";
+
+interface ProductSwiperProps {
+  products: Product[];
+  heading: string;
+}
+
+const ProductSwiper: React.FC<ProductSwiperProps> = ({ products, heading }) => {
+  const [isBeginning, setIsBeginning] = useState(true);
+  const [isEnd, setIsEnd] = useState(false);
+
+  const handleSlideChange = (swiper: SwiperType) => {
+    setIsBeginning(swiper.isBeginning);
+    setIsEnd(swiper.isEnd);
+  };
+
+  return (
+    <div className="container mx-auto px-8 md:px-12">
+      <div className="flex w-full items-center justify-between mb-8">
+        <Heading content={heading} />
+      </div>
+
+      <div className="relative group/swiper">
+        <button
+          className={`absolute -left-4 md:-left-8 top-1/2 -translate-y-1/2 z-20 p-2 md:p-3 rounded-full shadow-xl transition-all duration-300 bg-[var(--color-primary)] text-white hover:scale-110 active:scale-95 product-prev ${
+            isBeginning ? "opacity-0 pointer-events-none" : "opacity-100"
+          }`}
+          aria-label="Previous products"
+        >
+          <span className="size-5 md:size-6 block">{SwiperArrowIconLeft}</span>
+        </button>
+
+        <Swiper
+          key={`swiper_product`}
+          threshold={6}
+          spaceBetween={16}
+          speed={600}
+          slidesPerView={1.2}
+          breakpoints={{
+            480: { slidesPerView: 2.2 },
+            768: { slidesPerView: 3.2 },
+            1024: { slidesPerView: 4.2 },
+            1280: { slidesPerView: 5.2 },
+          }}
+          modules={[
+            Navigation,
+            Scrollbar,
+            A11y,
+            Keyboard,
+            Mousewheel,
+            Pagination,
+          ]}
+          navigation={{
+            prevEl: ".product-prev",
+            nextEl: ".product-next",
+          }}
+          onSlideChange={handleSlideChange}
+          onInit={handleSlideChange}
+          mousewheel={{
+            enabled: true,
+            forceToAxis: true,
+            releaseOnEdges: true,
+          }}
+          keyboard={{
+            enabled: true,
+            onlyInViewport: true,
+          }}
+          className="w-full !overflow-visible [&_.swiper-wrapper]:items-stretch"
+        >
+          {products.map((p) => (
+            <SwiperSlide key={p.id} className="!h-auto">
+              <Suspense fallback={<ProductSkeleton variant="grid" />}>
+                <ProductCard
+                  id={p.id}
+                  name={p.name}
+                  image={p?.media[0]?.url || "/no-image-avail-large.png"}
+                  href={`/product/${encodeURIComponent(p.slug)}`}
+                  price={p.pricing?.priceRange?.start?.gross?.amount || 0}
+                  category_id={p.category?.id || ""}
+                  category={p.category?.name || "Uncategorized"}
+                  discount={p.pricing?.discount?.gross?.amount || 0}
+                  onSale={p?.pricing?.onSale}
+                />
+              </Suspense>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        <button
+          className={`absolute -right-4 md:-right-8 top-1/2 -translate-y-1/2 z-20 p-2 md:p-3 rounded-full shadow-xl transition-all duration-300 bg-[var(--color-primary)] text-white hover:scale-110 active:scale-95 product-next ${
+            isEnd ? "opacity-0 pointer-events-none" : "opacity-100"
+          }`}
+          aria-label="Next products"
+        >
+          <span className="size-5 md:size-6 block">{SwiperArrowIconRight}</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ProductSwiper;