@alphasquad/saleor-template-advance 0.1.0

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

@@ -0,0 +1,187 @@
+"use client";
+
+import { CategoryAPIType } from "@/lib/api/shop";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useMemo, useState } from "react";
+import Select, { SelectOption } from "@/app/components/reuseableUI/select";
+
+interface ShopByDropdownCardProps {
+  label: string;
+  placeholder: string;
+  options: SelectOption[];
+  loading?: boolean;
+  onChange: (value: string) => void;
+}
+
+/**
+ * Single dropdown card with title and select.
+ */
+function ShopByDropdownCard({
+  label,
+  placeholder,
+  options,
+  loading,
+  onChange,
+}: ShopByDropdownCardProps) {
+  return (
+    <div className="flex flex-col w-full rounded-lg bg-[var(--color-secondary-800)] p-4 shadow-md border-b-[3px] border-b-[var(--color-primary)]">
+      <div className="flex items-center gap-2 mb-3">
+        <span
+          className="w-1 h-5 flex-shrink-0 rounded-full bg-[var(--color-primary)]"
+          aria-hidden
+        />
+        <h3 className="text-white text-sm font-secondary font-semibold uppercase tracking-wide whitespace-nowrap">
+          {label}
+        </h3>
+      </div>
+      <Select
+        options={options}
+        placeholder={loading ? "Loading..." : placeholder}
+        disabled={loading}
+        defaultValue=""
+        aria-label={label}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}
+
+/**
+ * Vehicle search dropdowns: three "Shop by" cards (Differential, Category, Brands)
+ * stacked vertically.
+ */
+export function VehicleSearchDropdowns() {
+  const router = useRouter();
+  const [categories, setCategories] = useState<CategoryAPIType[]>([]);
+  const [brands, setBrands] = useState<CategoryAPIType[]>([]);
+  const [loadingCategories, setLoadingCategories] = useState(true);
+  const [loadingBrands, setLoadingBrands] = useState(true);
+
+  useEffect(() => {
+    const partsLogicUrl = process.env.NEXT_PUBLIC_PARTSLOGIC_URL || "";
+
+    async function fetchCategories() {
+      try {
+        const res = await fetch(
+          `${partsLogicUrl}/api/categories?page=1&per_page=100`,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json",
+            },
+          },
+        );
+        if (res.ok) {
+          const data = await res.json();
+          setCategories(data.categories || []);
+        }
+      } catch (error) {
+        console.error("Error fetching categories:", error);
+      } finally {
+        setLoadingCategories(false);
+      }
+    }
+
+    async function fetchBrands() {
+      try {
+        const res = await fetch(
+          `${partsLogicUrl}/api/brands?page=1&per_page=100`,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json",
+            },
+          },
+        );
+        if (res.ok) {
+          const data = await res.json();
+          setBrands(data.brands || []);
+        }
+      } catch (error) {
+        console.error("Error fetching brands:", error);
+      } finally {
+        setLoadingBrands(false);
+      }
+    }
+
+    fetchCategories();
+    fetchBrands();
+  }, []);
+
+  const handleCategoryChange = (slug: string) => {
+    if (slug) {
+      router.push(`/category/${slug}`);
+    }
+  };
+
+  const handleBrandChange = (slug: string) => {
+    if (slug) {
+      router.push(`/brand/${slug}`);
+    }
+  };
+
+  const handleDifferentialChange = (slug: string) => {
+    if (slug) {
+      router.push(`/category/${slug}`);
+    }
+  };
+
+  const categoryOptions = useMemo(
+    () =>
+      categories.map((cat) => ({
+        value: cat.slug,
+        label: cat.name,
+      })),
+    [categories],
+  );
+
+  const differentialOptions = useMemo(() => {
+    const differentials = categories.find(
+      (cat) => cat.slug === "gears-install-kits-carriers-spider-gears",
+    );
+    return (
+      differentials?.children?.map((cat) => ({
+        value: cat.slug,
+        label: cat.name,
+      })) || []
+    );
+  }, [categories]);
+
+  const brandOptions = useMemo(
+    () =>
+      brands.map((brand) => ({
+        value: brand.slug,
+        label: brand.name,
+      })),
+    [brands],
+  );
+
+  return (
+    <div
+      className="flex flex-col gap-4 w-full"
+      aria-label="Shop by differential, category, or brand"
+    >
+      <ShopByDropdownCard
+        label="SHOP BY DIFFERENTIAL"
+        placeholder="SELECT DIFFERENTIAL..."
+        options={differentialOptions}
+        loading={loadingCategories}
+        onChange={handleDifferentialChange}
+      />
+      <ShopByDropdownCard
+        label="SHOP BY CATEGORY"
+        placeholder="SELECT CATEGORY..."
+        options={categoryOptions}
+        loading={loadingCategories}
+        onChange={handleCategoryChange}
+      />
+      <ShopByDropdownCard
+        label="SHOP BY BRANDS"
+        placeholder="SELECT BRAND..."
+        options={brandOptions}
+        loading={loadingBrands}
+        onChange={handleBrandChange}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+"use client";
+import { CategoryAPIType, shopApi } from "@/lib/api/shop";
+import React, { useEffect } from "react";
+import EmptyState from "../reuseableUI/emptyState";
+import Heading from "../reuseableUI/heading";
+import { BrandsSwiperClient } from "./brandsSwiperClient";
+
+export const BrandsSwiper = () => {
+  const [brandsData, setBrands] = React.useState<CategoryAPIType[]>([]);
+
+  useEffect(() => {
+    const fetchBrandsData = async () => {
+      try {
+        const resp = await shopApi.brandsProductPL();
+        if (resp && Array.isArray(resp.brands)) {
+          setBrands(resp.brands);
+        }
+      } catch (error) {
+        console.error("Error fetching brands:", error);
+        setBrands([]);
+      }
+    };
+    fetchBrandsData();
+  }, []);
+
+  return (
+    <section
+      style={{
+        backgroundColor: "var(--color-secondary-920)",
+      }}
+      className="py-12 px-4 md:px-6 md:py-16 lg:py-24 lg:px-0"
+    >
+      {!brandsData.length ? (
+        <div className="container mx-auto">
+          <div className="flex w-full items-center justify-between ">
+            <Heading content=" Brands" />
+          </div>
+          <EmptyState
+            text="No brands available"
+            textParagraph="Check back later to see our featured brands."
+            className="h-[20vh] mt-16"
+          />
+        </div>
+      ) : (
+        <BrandsSwiperClient brands={brandsData} />
+      )}
+    </section>
+  );
+};

package/src/app/components/showroom/brandsSwiperClient copy.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { SwiperArrowIconLeft } from "@/app/utils/svgs/swiperArrowIconLeft";
+import { SwiperArrowIconRight } from "@/app/utils/svgs/swiperArrowIconRight";
+import {
+  A11y,
+  Keyboard,
+  Mousewheel,
+  Navigation,
+  Pagination,
+  Scrollbar,
+} from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { BrandCard } from "../reuseableUI/brandCard";
+import Heading from "../reuseableUI/heading";
+import { CategoryAPIType } from "@/lib/api/shop";
+
+interface BrandSwiperProps {
+  brands: CategoryAPIType[];
+}
+
+export const BrandsSwiperClient = ({ brands }: BrandSwiperProps) => {
+  return (
+    <div className="container mx-auto ">
+      <div className="flex w-full items-center justify-between ">
+        <Heading content="Brands" />
+        <div className="flex gap-4 items-center">
+          <button
+            style={{
+              backgroundColor: "var(--color-secondary-200)",
+              color: "var(--color-secondary-800)",
+            }}
+            className="p-2 rounded-full disabled:opacity-50 cursor-pointer brands-prev"
+          >
+            <span className="size-6 block">{SwiperArrowIconLeft}</span>
+          </button>
+          <button
+            style={{
+              backgroundColor: "var(--color-secondary-200)",
+              color: "var(--color-secondary-800)",
+            }}
+            className="p-2 rounded-full disabled:opacity-50 cursor-pointer brands-next"
+          >
+            <span className="size-6 flex-shrink-0 block">
+              {SwiperArrowIconRight}
+            </span>
+          </button>
+        </div>
+      </div>
+      <div className="relative">
+        <Swiper
+          key={`swiper_brands`}
+          threshold={6}
+          spaceBetween={12}
+          speed={800}
+          slidesPerView={"auto"}
+          modules={[
+            Navigation,
+            Scrollbar,
+            A11y,
+            Keyboard,
+            Mousewheel,
+            Pagination,
+          ]}
+          navigation={{ prevEl: ".brands-prev", nextEl: ".brands-next" }}
+          mousewheel={{
+            enabled: true,
+            forceToAxis: true,
+            releaseOnEdges: true,
+          }}
+          keyboard={{
+            enabled: true,
+            onlyInViewport: true,
+          }}
+          className="w-full my-16 relative h-full"
+        >
+          {brands.map((brand, index) => (
+            <SwiperSlide
+              className="max-w-[246px]"
+              key={`${brand.name}-${index}`}
+            >
+              <BrandCard
+                name={brand.slug}
+                imageUrl={brand.image || ""}
+                url={brand.id}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,122 @@
+"use client";
+
+import { SwiperArrowIconLeft } from "@/app/utils/svgs/swiperArrowIconLeft";
+import { SwiperArrowIconRight } from "@/app/utils/svgs/swiperArrowIconRight";
+import { CategoryAPIType } from "@/lib/api/shop";
+import Link from "next/link";
+import { 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 { BrandCard } from "../reuseableUI/brandCard";
+import Heading from "../reuseableUI/heading";
+
+interface BrandSwiperProps {
+  brands: CategoryAPIType[];
+}
+
+const LIFESTYLE_IMAGES = [
+  "/random-car-1.jpeg",
+  "/random-car-2.png",
+  "/random-car-3.jpg",
+  "/random-car-4.jpg",
+  "/random-car-5.jpg",
+];
+
+export const BrandsSwiperClient = ({ brands }: BrandSwiperProps) => {
+  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 BRAND" />
+      </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 brands-prev ${
+            isBeginning ? "opacity-0 pointer-events-none" : "opacity-100"
+          }`}
+          aria-label="Previous brands"
+        >
+          <span className="size-5 md:size-6 block">{SwiperArrowIconLeft}</span>
+        </button>
+
+        <Swiper
+          key={`swiper_brands`}
+          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: ".brands-prev",
+            nextEl: ".brands-next",
+          }}
+          onSlideChange={handleSlideChange}
+          onInit={handleSlideChange}
+          mousewheel={{
+            enabled: true,
+            forceToAxis: true,
+            releaseOnEdges: true,
+          }}
+          keyboard={{
+            enabled: true,
+            onlyInViewport: true,
+          }}
+          className="w-full !overflow-visible"
+        >
+          {brands.map((brand, index) => (
+            // Avoid noisy logs in templates/production.
+            <SwiperSlide
+              className="h-auto"
+              key={`${brand.name}-${index}`}
+            >
+              <BrandCard
+                name={brand.name}
+                imageUrl={brand.image || ""}
+                url={brand.slug}
+                bgImage={LIFESTYLE_IMAGES[index % LIFESTYLE_IMAGES.length]}
+              />
+            </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 brands-next ${
+            isEnd ? "opacity-0 pointer-events-none" : "opacity-100"
+          }`}
+          aria-label="Next brands"
+        >
+          <span className="size-5 md:size-6 block">{SwiperArrowIconRight}</span>
+        </button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { CategoryAPIType } from "@/lib/api/shop";
+import { BrandsSwiperClient } from "./brandsSwiperClient";
+
+async function fetchBrands(): Promise<CategoryAPIType[]> {
+  try {
+    const partsLogicUrl = process.env.NEXT_PUBLIC_PARTSLOGIC_URL || "";
+    const url = `${partsLogicUrl}/api/brands?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 brands: ${res.status}`);
+    }
+
+    const data = await res.json();
+    return data.brands || [];
+  } catch (error) {
+    console.error("Error fetching brands:", error);
+    return [];
+  }
+}
+
+export const BrandsSwiperServer = async () => {
+  const brandsData = await fetchBrands();
+
+  return brandsData.length <= 1 ? null : (
+    <section
+      style={{
+        backgroundColor: "var(--color-secondary-920)",
+      }}
+      className="py-12 px-4 md:px-6 md:py-16 lg:px-0"
+    >
+      <BrandsSwiperClient brands={brandsData} />
+    </section>
+  );
+};

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

@@ -0,0 +1,120 @@
+import { GET_BUNDLES } from "@/graphql/queries/getBundles"
+import createApolloServerClient from "@/graphql/server-client"
+import { Product } from "@/graphql/types/product"
+import ProductSwiper from "./productSwiper"
+
+type MetadataItem = { key: string; value: string }
+type BundleCollection = {
+  id: string
+  name: string
+  slug: string
+  metadata?: MetadataItem[]
+  products?: { edges: { node: Product }[] }
+}
+
+type Props = {
+  count?: number
+  collection?: string
+}
+
+export const BundleProducts = async ({ count = 10, collection }: Props) => {
+  let f_products: Product[] = []
+  let bundleName: string | undefined
+  let bundlePriceText: string | undefined
+  let selectedBundle: BundleCollection | null = null
+
+  try {
+    const client = createApolloServerClient()
+    const channel = process.env.NEXT_PUBLIC_SALEOR_CHANNEL || "default-channel"
+
+    const { data } = await client.query({
+      query: GET_BUNDLES,
+      variables: {
+        channel,
+        first: count,
+      },
+      fetchPolicy: "no-cache",
+      errorPolicy: "all",
+    })
+
+    const bundles: BundleCollection[] = (data?.collections?.edges ?? []).map(
+      (e: { node: BundleCollection }) => e.node
+    )
+
+    if (bundles.length) {
+      if (collection) {
+        const exact = bundles.find(
+          (b: BundleCollection) => b.slug === collection
+        )
+        selectedBundle = exact ?? bundles[0]
+        if (!exact) {
+          console.warn(
+            `[BundleProducts] Bundle slug "${collection}" not found. Falling back to first bundle "${bundles[0].slug}".`
+          )
+        }
+      } else {
+        selectedBundle = bundles[0]
+      }
+    }
+
+    if (selectedBundle) {
+      bundleName = selectedBundle.name
+      const meta: Record<string, string> = Object.fromEntries(
+        (selectedBundle.metadata ?? []).map((m: MetadataItem) => [
+          m.key,
+          m.value,
+        ])
+      )
+      bundlePriceText = meta.price || undefined
+
+      f_products =
+        selectedBundle.products?.edges?.map((e: { node: Product }) => e.node) ??
+        []
+    }
+  } catch (error) {
+    console.error(`[BundleProducts] Error fetching bundle products:`, error)
+    // f_products remains empty array, will show empty state
+  }
+
+  if (!f_products.length) return null
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-4 md:gap-8 lg:gap-20">
+      {/* Left promotional section */}
+      <div
+        style={{
+          backgroundColor: "var(--color-primary-600)",
+        }}
+        className="w-full lg:max-w-[536px] px-4 md:px-8 lg:px-20 pt-6 md:pt-12 lg:pt-24 flex flex-col font-secondary justify-between pb-4 md:pb-8 lg:pb-12 min-h-[300px] lg:min-h-auto"
+      >
+        <div className="flex flex-col">
+          <p
+       
+            className="text-white text-sm md:text-base lg:text-lg -tracking-[0.045px]"
+          >
+            RECOMMENDED
+          </p>
+          <p className="text-white font-medium text-2xl md:text-4xl lg:text-6xl -tracking-[0.15px] leading-tight">
+            {bundleName || "Bundle"}
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 md:gap-6 lg:gap-10 mt-4 lg:mt-0">
+          {bundlePriceText ? (
+            <p className="text-white font-light text-3xl md:text-5xl lg:text-7xl -tracking-[0.18px]">
+              {bundlePriceText}
+            </p>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Right products section */}
+      <section className="py-6 md:py-12 lg:py-24 w-full flex-1 overflow-hidden">
+        <ProductSwiper
+          key={`bundle-swiper-${selectedBundle?.id || "none"}`}
+          heading={bundleName ?? "Bundle Products"}
+          products={f_products}
+        />
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,51 @@
+"use client";
+import { shopApi } from "@/lib/api/shop";
+import React, { useEffect } from "react";
+import EmptyState from "../reuseableUI/emptyState";
+import Heading from "../reuseableUI/heading";
+import CategorySwiper from "./categorySwiper";
+export type CategoryAPIType = {
+  id: string;
+  image: string;
+  name: string;
+  slug: string;
+};
+
+export const CategoryGrid = () => {
+  const [categories, setCategories] = React.useState<CategoryAPIType[]>([]);
+  useEffect(() => {
+    const fetchCategoriesData = async () => {
+      try {
+        const resp = await shopApi.categoryProductPL();
+        setCategories(resp.categories);
+      } catch (error) {
+        console.error("Error fetching categories:", error);
+        setCategories([]);
+      }
+    };
+    fetchCategoriesData();
+  }, []);
+  return (
+    <section
+      className="py-12 px-4 md:px-6 md:py-16 lg:py-24 lg:px-0"
+      style={{
+        backgroundColor: "var(--color-secondary-920)",
+      }}
+    >
+      {!categories.length ? (
+        <div className="container mx-auto">
+          <div className="flex w-full items-center justify-between ">
+            <Heading content="Shop by Category" />
+          </div>
+          <EmptyState
+            text="No categories available"
+            textParagraph="Categories will appear here once they are added"
+            className="h-[20vh] mt-16"
+          />
+        </div>
+      ) : (
+        <CategorySwiper categories={categories} />
+      )}
+    </section>
+  );
+};