@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/layout/header/search.tsx

@@ -0,0 +1,418 @@
+"use client";
+
+import { SearchIcon } from "@/app/utils/svgs/searchIcon";
+import {
+  shopApi,
+  type GlobalSearchProduct,
+  type GlobalSearchCategory,
+  type GlobalSearchProductType,
+  type PLSearchProductsResponse,
+} from "@/lib/api/shop";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import React, { useEffect, useRef, useState } from "react";
+import InputField from "../../reuseableUI/defaultInputField";
+import { ArrowUpIcon } from "@/app/utils/svgs/arrowUpIcon";
+import { cn, getFullImageUrl } from "@/app/utils/functions";
+import { useGlobalStore } from "@/store/useGlobalStore";
+
+const Search = ({ className }: { className?: string }) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const isYMMActive = useGlobalStore((state) => state.isYMMActive);
+  const channel = process.env.NEXT_PUBLIC_SALEOR_CHANNEL || "default-channel";
+  const searchParams = useSearchParams();
+  const fitmentPairs = searchParams.get("fitment_pairs");
+  const [term, setTerm] = useState("");
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [products, setProducts] = useState<GlobalSearchProduct[]>([]);
+  const [categories, setCategories] = useState<GlobalSearchCategory[]>([]);
+  const [productTypes, setProductTypes] = useState<GlobalSearchProductType[]>(
+    []
+  );
+
+  // All refs declared together
+  const abortRef = useRef<AbortController | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const justSelectedRef = useRef<boolean>(false);
+
+  // Debounced fetch
+  useEffect(() => {
+    // Don't open if user just selected an item
+    if (justSelectedRef.current) {
+      justSelectedRef.current = false;
+      return;
+    }
+
+    // Clear results if search term is too short
+    if (!term || term.trim().length < 2) {
+      setProducts([]);
+      setCategories([]);
+      setProductTypes([]);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    if (term.trim().length >= 2) {
+      setOpen(true);
+    }
+
+    const controller = new AbortController();
+    abortRef.current?.abort();
+    abortRef.current = controller;
+
+    const t = setTimeout(async () => {
+      try {
+        // If YMM status is OK/Active → Use PartsLogic search products API
+        // If YMM status is NOT OK → Use GraphQL search
+        if (isYMMActive) {
+          const resp: PLSearchProductsResponse = await shopApi.searchProductsPL(
+            {
+              q: term.trim(),
+              page: 1,
+              per_page: 10,
+              fitment_pairs: fitmentPairs ? fitmentPairs : "",
+            }
+          );
+
+          if (!controller.signal.aborted) {
+            // Transform PartsLogic response to match component's expected format
+            const restProducts = resp.products.map((product) => ({
+              id: product.id,
+              name: product.name,
+              slug: product.slug,
+              updatedAt: "",
+              // Map category from PartsLogic format or GraphQL format
+              category:
+                product.category ||
+                (product.category_name
+                  ? {
+                      id: product.category_id || "",
+                      name: product.category_name,
+                    }
+                  : null),
+              // Use primary_image from PartsLogic API or thumbnail from GraphQL
+              thumbnail:
+                product.thumbnail ||
+                (product.primary_image
+                  ? {
+                      url: product.primary_image,
+                      alt: product.name,
+                    }
+                  : null),
+            }));
+
+            const restCategories = resp.facets.categories.map((cat) => ({
+              id: cat.id,
+              name: cat.value,
+              slug: cat.value.toLowerCase().replace(/\s+/g, "-"),
+              level: 0,
+              parent: null,
+              backgroundImage: cat.media
+                ? { url: cat.media, alt: cat.value }
+                : null,
+              products: {
+                totalCount: cat.count,
+              },
+            }));
+
+            const restProductTypes = resp.facets.brands.map((brand) => ({
+              id: brand.id,
+              name: brand.value,
+              slug: brand.value.toLowerCase().replace(/\s+/g, "-"),
+              hasVariants: false,
+            }));
+
+            setProducts(restProducts);
+            setCategories(restCategories);
+            setProductTypes(restProductTypes);
+          }
+        } else {
+          const resp = await shopApi.globalSearchStorefront({
+            query: term.trim(),
+            channel,
+            includeProducts: true,
+            includeCategories: true,
+            includeCollections: false,
+            includeProductTypes: true,
+          });
+
+          if (!controller.signal.aborted) {
+            setProducts(resp.products?.edges.map((edge) => edge.node) || []);
+            setCategories(
+              resp.categories?.edges.map((edge) => edge.node) || []
+            );
+            setProductTypes(
+              resp.productTypes?.edges.map((edge) => edge.node) || []
+            );
+          }
+        }
+      } catch (e) {
+        if (!controller.signal.aborted) {
+          setProducts([]);
+          setCategories([]);
+          setProductTypes([]);
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    }, 300); // Slightly longer debounce
+
+    return () => {
+      clearTimeout(t);
+      controller.abort();
+    };
+  }, [term, isYMMActive]);
+
+  // Close on outside click or Escape
+  useEffect(() => {
+    const onDocClick = (e: MouseEvent) => {
+      if (!open) return;
+      const t = e.target as Node;
+      if (containerRef.current && !containerRef.current.contains(t)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("click", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("click", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const goToShop = (params: Record<string, string | undefined>) => {
+    // Navigate to shop page with search query
+    if (pathname === "/products/all") {
+      // If on shop page, replace with new search query
+      const sp = new URLSearchParams();
+      if (params.q) sp.set("q", params.q);
+      const newUrl = sp.toString()
+        ? `/products/all?${sp.toString()}`
+        : "/products/all";
+      router.replace(newUrl, { scroll: false });
+    } else {
+      // If not on shop page, navigate to shop with search query
+      const sp = new URLSearchParams();
+      if (params.q) sp.set("q", params.q);
+      const url = sp.toString()
+        ? `/products/all?${sp.toString()}`
+        : "/products/all";
+      router.push(url);
+    }
+    setOpen(false);
+  };
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!term.trim()) return;
+    goToShop({ q: term.trim() });
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        border: "1px solid var(--color-secondary-700)",
+        backgroundColor: "transparent",
+      }}
+      className={cn(
+        "flex items-center relative max-w-[560px] px-4 py-2.5 max-h-10 justify-between w-full",
+        className
+      )}
+    >
+      <form
+        onSubmit={onSubmit}
+        className="flex items-center w-full bg-transparent h-full justify-center"
+      >
+        <InputField
+          className="leading-none !bg-transparent w-full !px-0 !py-0"
+          name="Search-product"
+          type="text"
+          placeholder="Search product"
+          value={term}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setTerm(e.target.value)
+          }
+          onFocus={() => term.trim().length >= 2 && setOpen(true)}
+        />
+        <button type="submit" className="h-full">
+          <span className="text-black">
+            {SearchIcon}
+          </span>
+        </button>
+      </form>
+
+      {open && term?.length > 1 && (
+        <div className="absolute top-full left-0 right-0 mt-2 bg-white border shadow-[0_10px_20px_0_rgba(0,0,0,0.10)] border-[var(--color-secondary-200)] z-40">
+          <div className=" max-h-80 flex flex-col gap-2 overflow-auto p-3">
+            {/* Products Section - Now at the top */}
+            {products.length > 0 && (
+              <div className="border-b border-gray-200 pb-2 mb-2">
+                <div className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
+                  Products
+                </div>
+                {products.slice(0, 8).map((p) => (
+                  <button
+                    key={p.id}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      // Navigate to product detail page using original slug
+                      router.push(`/product/${encodeURIComponent(p.slug)}`);
+                      setOpen(false);
+                    }}
+                    className="w-full font-secondary p-3 text-left hover:bg-[var(--color-secondary-200)] flex items-center justify-between -tracking-[0.035px] text-[var(--color-secondary-800)] text-base transition-colors duration-200"
+                  >
+                    <div className="flex items-center gap-3 flex-1 min-w-0">
+                      <div className="w-12 h-12 flex-shrink-0 bg-gray-100 rounded overflow-hidden">
+                        {p.thumbnail ? (
+                          <img
+                            src={getFullImageUrl(p.thumbnail.url)}
+                            alt={p.thumbnail.alt || p.name}
+                            className="w-full h-full object-cover"
+                            onError={(e) => {
+                              // Fallback to placeholder if image fails to load
+                              const target = e.target as HTMLImageElement;
+                              target.style.display = "none";
+                              target.parentElement!.innerHTML =
+                                '<div class="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 text-xs">No Image</div>';
+                            }}
+                          />
+                        ) : (
+                          <div className="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 text-xs">
+                            No Image
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="truncate font-medium text-sm">
+                          {p.name}
+                        </div>
+                        {p.category && (
+                          <div className="text-xs text-gray-500 mt-1">
+                            Category: {p.category.name}
+                          </div>
+                        )}
+                        <div className="text-xs text-blue-600 mt-1">
+                          View Product Details →
+                        </div>
+                      </div>
+                    </div>
+                    <span className="rotate-90 ml-2 text-gray-400">
+                      {ArrowUpIcon}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Categories Section */}
+            {categories.length > 0 && (
+              <div className="border-b border-gray-200 pb-2 mb-2">
+                <div className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
+                  Categories
+                </div>
+                {categories.slice(0, 4).map((c) => (
+                  <button
+                    key={`cat-${c.id}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      justSelectedRef.current = true;
+                      setTerm(c.name);
+                      setOpen(false);
+                      try {
+                        (document.activeElement as HTMLElement | null)?.blur();
+                      } catch {}
+                      // Navigate to category page directly using slug
+                      router.push(`/category/${encodeURIComponent(c.slug)}`);
+                    }}
+                    className="w-full font-secondary p-2 text-left hover:bg-[var(--color-secondary-200)] flex items-center justify-between -tracking-[0.035px] text-[var(--color-secondary-800)] text-base "
+                  >
+                    <div className="flex items-center gap-3 flex-1">
+                      {/* Category Image */}
+                      {c.backgroundImage?.url && (
+                        <div className="w-10 h-10 flex-shrink-0 bg-gray-100 rounded overflow-hidden">
+                          <img
+                            src={getFullImageUrl(c.backgroundImage.url)}
+                            alt={c.backgroundImage.alt || c.name}
+                            className="w-full h-full object-cover"
+                            onError={(e) => {
+                              const target = e.target as HTMLImageElement;
+                              target.style.display = "none";
+                            }}
+                          />
+                        </div>
+                      )}
+                      <div className="flex items-center justify-between flex-1">
+                        <span>{c.name}</span>
+                        <span className="text-xs text-gray-500">
+                          ({c.products.totalCount})
+                        </span>
+                      </div>
+                    </div>
+                    <span className=" rotate-90 ml-2">{ArrowUpIcon}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Product Types Section */}
+            {productTypes.length > 0 && (
+              <div>
+                <div className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
+                  Product Types
+                </div>
+                {productTypes.slice(0, 3).map((pt) => (
+                  <button
+                    key={`pt-${pt.id}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      justSelectedRef.current = true;
+                      setTerm(pt.name);
+                      setOpen(false);
+                      try {
+                        (document.activeElement as HTMLElement | null)?.blur();
+                      } catch {}
+                      // Navigate to brand page directly using slug
+                      router.push(`/brand/${encodeURIComponent(pt.slug)}`);
+                    }}
+                    className="w-full font-secondary p-2 text-left hover:bg-[var(--color-secondary-200)] flex items-center justify-between -tracking-[0.035px] text-[var(--color-secondary-800)] text-base "
+                  >
+                    <div className="flex items-center justify-between w-full">
+                      <span>{pt.name}</span>
+                      <span className="text-xs text-gray-500 bg-blue-100 px-1 rounded">
+                        Type
+                      </span>
+                    </div>
+                    <span className=" rotate-90 ml-2">{ArrowUpIcon}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {!loading &&
+              !products.length &&
+              !categories.length &&
+              !productTypes.length &&
+              term.trim().length >= 2 && (
+                <div className=" text-sm text-gray-500">No Results found</div>
+              )}
+            {loading && (
+              <div className="text-sm text-gray-500 font-secondary">
+                Searching…
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Search;

package/src/app/components/layout/header/styles/navbarStyles.ts

@@ -0,0 +1,27 @@
+export const navbarStyles = {
+  navLinkBase: "font-secondary text-white font-extrabold w-auto hover:text-zinc-300 transition-all ease-in-out duration-300 relative group",
+  
+  navLinkActive: "text-[var(--color-primary-500)] after:w-full",
+  
+  navLinkInactive: "text-black",
+  
+  navLinkWithUnderline: "after:bg-[var(--color-primary-500)] after:transition-all after:duration-300",
+  
+  iconBtnBase: "cursor-pointer transition-all ease-in-out duration-300 hover:text-[var(--color-primary-500)]",
+  
+  mobileContainer: "xl:hidden flex items-center py-5 px-4 md:px-6 bg-[#e8e8e8] text-sm font-semibold border-b border-zinc-600",
+
+  desktopContainer: "hidden xl:flex w-full items-center justify-between gap-10 py-5 px-20 bg-[#e8e8e8] text-sm font-semibold",
+  
+  linksContainer: "grid auto-cols-auto grid-flow-col gap-10 items-center w-auto",
+  
+  actionsContainer: "ml-auto flex w-full items-center gap-5",
+  
+  brandContainer: "flex-shrink-0 relative w-[160px] flex items-center h-[48px]",
+  
+  dropdown: {
+    container: "absolute top-full left-0 mt-2 p-2 bg-white shadow-lg overflow-y-auto min-w-48 max-h-80 z-50",
+    item: "block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-[var(--color-primary-500)] transition-colors"
+  },
+  cartBadge: "absolute -right-0.5 -top-1.5 lg:-right-1 lg:-top-1.5 flex size-5 items-center justify-center rounded-full text-xs bg-white/80 text-[var(--color-primary)]"
+} as const;

package/src/app/components/layout/header/topBar.tsx

@@ -0,0 +1,214 @@
+import Link from "next/link";
+import { fetchSiteInfo } from "@/graphql/queries/getSiteInfo";
+import EditorJsRenderer from "@/app/components/reuseableUI/EditorJsRenderer";
+
+function normalizePhone(raw: string) {
+  const digits = raw.replace(/[^\d+]/g, "");
+  return digits ? `tel:${digits}` : null;
+}
+
+function IconMail(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={14}
+      height={14}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
+      <path d="m22 6-10 7L2 6" />
+    </svg>
+  );
+}
+
+function IconPhone(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={14}
+      height={14}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.62 2.6a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.48-1.14a2 2 0 0 1 2.11-.45c.83.29 1.7.5 2.6.62A2 2 0 0 1 22 16.92z" />
+    </svg>
+  );
+}
+
+function IconClock(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={14}
+      height={14}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </svg>
+  );
+}
+
+function IconMapPin(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={14}
+      height={14}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  );
+}
+
+export default async function TopBar() {
+  const page = await fetchSiteInfo();
+  const content = page?.content;
+
+  const get = (k: string) =>
+    page?.metadata
+      ?.find((m) => m.key.toLowerCase() === k.toLowerCase())
+      ?.value?.trim() || "";
+
+  const email = get("Email");
+  const phone = get("Phone");
+  const timings = get("Timings");
+  const address = get("Address");
+
+  // If nothing to show, render nothing
+  if (![email, phone, timings, address, content].some(Boolean)) return null;
+
+  const phoneHref = phone
+    ? normalizePhone(phone.split(/\r?\n/).pop() || phone)
+    : null;
+
+  return (
+    <div
+      className="w-full border-b"
+      style={{
+        backgroundColor: "var(--color-secondary-950)",
+        borderColor: "var(--color-secondary-800)",
+      }}
+    >
+      <div className="container mx-auto px-4 md:px-6">
+        <div className="flex flex-col sm:flex-row items-center justify-center sm:justify-between gap-2 py-2 md:py-2.5">
+          {/* Left: Contact */}
+          <div
+            className="flex items-center gap-4 text-xs sm:text-sm"
+            style={{ color: "var(--color-secondary-50)" }}
+          >
+            {/* {email && (
+              <div className="group flex items-center gap-1.5">
+                <IconMail className="text-white group-hover:text-[var(--color-primary)] transition-colors" />
+                <Link
+                  aria-label="Email"
+                  prefetch={false}
+                  href={`mailto:${email}`}
+                  className="text-white hover:text-[var(--color-primary)] transition-colors"
+                >
+                  {email}
+                </Link>
+              </div>
+            )}
+            {phone && (
+              <div className="group flex items-center gap-1.5">
+                <IconPhone className="text-white group-hover:text-[var(--color-primary)] transition-colors" />
+                {phoneHref ? (
+                  <Link
+                    aria-label="Phone"
+                    prefetch={false}
+                    href={phoneHref}
+                    className="text-white group-hover:text-[var(--color-primary)] transition-colors"
+                  >
+                    {phone}
+                  </Link>
+                ) : (
+                  <span className="text-white group-hover:text-[var(--color-primary)] transition-colors">
+                    {phone}
+                  </span>
+                )}
+              </div>
+            )} */}
+            {content && (
+              <div className="text-xs sm:text-sm text-white [&_p]:m-0 [&_a]:font-semibold [&_a]:underline [&_a]:underline-offset-2 [&_a]:text-white [&_a:hover]:text-[var(--color-primary)] [&_a]:transition-colors">
+                <EditorJsRenderer content={content} />
+              </div>
+            )}
+          </div>
+
+          {/* Free Shipping Notification */}
+
+          {/* Right: Timings */}
+          {/* {timings && (
+            <div
+              className="group flex items-center gap-1.5 text-xs sm:text-sm"
+              style={{ color: "var(--color-secondary-50)" }}
+            >
+              <div className="mb-[2px]">
+                <IconClock className="opacity-80 transition-colors group-hover:text-[var(--color-primary-500)]" />
+              </div>
+              <span className="transition-colors group-hover:text-[var(--color-primary-500)]">
+                {timings}
+              </span>
+            </div>
+          )} */}
+          <div
+            className="flex items-center gap-4 text-xs sm:text-sm"
+            style={{ color: "var(--color-secondary-50)" }}
+          >
+            {phone && (
+              <div className="group flex items-center gap-1.5">
+                <IconPhone className="text-white group-hover:text-[var(--color-primary)] transition-colors" />
+                {phoneHref ? (
+                  <Link
+                    aria-label="Phone"
+                    prefetch={false}
+                    href={phoneHref}
+                    className="text-white group-hover:text-[var(--color-primary)] transition-colors"
+                  >
+                    {phone} 
+                  </Link>
+                ) : (
+                  <span className="text-white group-hover:text-[var(--color-primary)] transition-colors">
+                    {phone}
+                  </span>
+                )}
+              </div>
+            )}
+            {address && (
+              <div className="group flex items-center gap-1.5 text-white group-hover:text-[var(--color-primary)] transition-colors">
+                <IconMapPin className="text-white group-hover:text-[var(--color-primary)] transition-colors" />
+                {address}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}