@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/layout/footer.tsx

@@ -0,0 +1,283 @@
+import { fetchMenuBySlug } from "@/graphql/queries/getMenuBySlug";
+import Image from "next/image";
+import Link from "next/link";
+import { facebook } from "../../../../public/footer/facebook";
+import { Instagram } from "../../../../public/footer/instagram";
+import { fetchSiteInfo } from "@/graphql/queries/getSiteInfo";
+import { FooterNewsletter } from "./components/FooterNewsletter";
+import { normalizeInternalUrl } from "@/lib/urls/normalizeInternalUrl";
+
+// Define types for footer sections and menu items
+type FooterChild = {
+  id: string;
+  name: string;
+  href?: string;
+  url?: string;
+  metadata?: Array<{
+    key: string;
+    value: string;
+  }>;
+};
+
+type FooterSection = {
+  id: string;
+  name: string;
+  url?: string;
+  children: FooterChild[];
+};
+
+const SectionTitle = ({ children }: { children: React.ReactNode }) => (
+  <span className="text-base font-secondary font-bold text-white uppercase tracking-wider">
+    {children}
+  </span>
+);
+
+const SocialIcons = [
+  ...(process.env.NEXT_PUBLIC_SOCIAL_FACEBOOK_URL
+    ? [{ icon: facebook, link: process.env.NEXT_PUBLIC_SOCIAL_FACEBOOK_URL }]
+    : []),
+  ...(process.env.NEXT_PUBLIC_SOCIAL_INSTAGRAM_URL
+    ? [{ icon: Instagram, link: process.env.NEXT_PUBLIC_SOCIAL_INSTAGRAM_URL }]
+    : []),
+];
+
+// ---------- STATIC SECTIONS ----------
+const STATIC_SECTIONS: FooterSection[] = [
+  {
+    id: "learn-more",
+    name: "LEARN MORE",
+    children: [
+      { id: "about", name: "About Us", href: "/about" },
+      { id: "faqs", name: "FAQ", href: "/frequently-asked-questions" },
+      { id: "privacy-policy", name: "Privacy Policy", href: "/privacy-policy" },
+      {
+        id: "terms-and-conditions",
+        name: "Terms & Conditions",
+        href: "/terms-and-conditions",
+      },
+    ],
+  },
+  {
+    id: "support",
+    name: "SUPPORT",
+    children: [
+      { id: "warranty", name: "Warranty", href: "/warranty" },
+      {
+        id: "shipping-returns",
+        name: "Shipping & Returns",
+        href: "/shipping-returns",
+      },
+    ],
+  },
+];
+
+const getTargetFromMetadata = (
+  metadata?: Array<{ key: string; value: string }>,
+) => {
+  const targetMetadata = metadata?.find((meta) => meta.key === "target");
+  return targetMetadata?.value === "_blank" ? "_blank" : "_self";
+};
+
+function normalizePhone(raw: string) {
+  const digits = raw.replace(/[^\d+]/g, "");
+  return digits ? `tel:${digits}` : null;
+}
+
+  const Footer = async () => {
+    const currentYear = new Date().getFullYear();
+
+  const TENANT_NAME = process.env.NEXT_PUBLIC_BRAND_NAME || process.env.NEXT_PUBLIC_TENANT_NAME || "Storefront";
+  const logo =
+    process.env.NEXT_PUBLIC_LOGO_URL ||
+    "https://webshopmanager.com/files/images/logo.png";
+
+  // Fetch footer menu data from backend
+  const footerMenu = await fetchMenuBySlug("footer");
+
+  // Fetch site info for address and phone
+  const siteInfo = await fetchSiteInfo();
+  const getInfo = (k: string) =>
+    siteInfo?.metadata
+      ?.find((m) => m.key.toLowerCase() === k.toLowerCase())
+      ?.value?.trim() || "";
+
+  const address = getInfo("Address");
+  const phone = getInfo("Phone");
+
+  // Always show static data, add dynamic data if available
+  const dynamicSections: FooterSection[] =
+    footerMenu &&
+    typeof footerMenu === "object" &&
+    "items" in footerMenu &&
+    Array.isArray(footerMenu.items) &&
+    footerMenu.items.length > 0
+      ? (
+          footerMenu.items as Array<{
+            id: string;
+            name: string;
+            url: string;
+            children?: Array<{
+              id: string;
+              name: string;
+              href: string;
+              url: string;
+              metadata?: Array<{
+                key: string;
+                value: string;
+              }>;
+            }>;
+          }>
+        ).map((item) => ({
+          id: item.id,
+          name: item.name,
+          url: item.url ? normalizeInternalUrl(item.url) : item.url,
+          children:
+            item.children?.map((child) => ({
+              id: child.id,
+              name: child.name,
+              href: child.href,
+              url: child.url ? normalizeInternalUrl(child.url) : child.url,
+              metadata: child.metadata,
+            })) || [],
+        }))
+      : [];
+
+  // Combine static sections with dynamic sections
+  const sectionsToRender: FooterSection[] =
+    dynamicSections.length > 0 ? dynamicSections : STATIC_SECTIONS;
+
+  return (
+    <footer className="bg-[#171717] text-white font-secondary">
+      <div className="container mx-auto px-6 py-12 md:py-20">
+        <div className="flex flex-col lg:flex-row gap-12 lg:gap-24">
+          {/* Left Column: Socials, Logo, Info */}
+          <div className="flex flex-col gap-8 lg:w-1/3">
+            {/* Newsletter */}
+            <FooterNewsletter />
+
+            {/* Social Icons */}
+            <div className="flex gap-4">
+              {SocialIcons.map((item) => (
+                <Link
+                  key={item.link}
+                  href={item.link}
+                target={item.link == "/contact" ? "" : "_blank"}
+                  rel="noopener noreferrer"
+                className="[&>svg]:size-8 h-fit [&>svg]:block [&>svg]:shrink-0 [&>svg]:text-white block bg-white hover:scale-105 transition-all ease-in-out duration-300 p-1.5 rounded-full"
+                >
+                    {item.icon}
+                </Link>
+              ))}
+            </div>
+
+            {/* Logo */}
+            <Link href="/" className="block max-w-[240px]">
+              <Image
+                src={logo}
+                alt={TENANT_NAME}
+                width={240}
+                height={60}
+                className="object-contain"
+              />
+            </Link>
+
+            {/* Site Info */}
+            <div className="flex flex-col gap-4 text-sm text-white/80">
+              {address && (
+                <div className="flex items-start gap-3">
+                  <svg
+                    className="w-5 h-5 text-[var(--color-primary-600)] shrink-0 mt-0.5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                  </svg>
+                  <span>{address}</span>
+                </div>
+              )}
+              {phone && (
+                <div className="flex items-center gap-3">
+                  <svg
+                    className="w-5 h-5 text-[var(--color-primary-600)] shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+                    />
+                  </svg>
+                  <Link
+                    href={normalizePhone(phone) || "#"}
+                    className="hover:text-[var(--color-primary-600)] transition-colors"
+                  >
+                    {phone}
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Right Column: Links Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:w-2/3">
+            {sectionsToRender.map((section) => (
+              <div key={section.id} className="flex flex-col gap-4">
+                <SectionTitle>
+                  <Link href={section.url || ""} className="hover:text-white/80">
+                    {section.name}
+                  </Link>
+                </SectionTitle>
+                <div className="flex flex-col gap-2">
+                  {section.children.map((child) => (
+                    <Link
+                      prefetch={false}
+                      key={child.id}
+                      href={child.url ? child.url : child.href || "#"}
+                      target={getTargetFromMetadata(child.metadata)}
+                      rel={
+                        getTargetFromMetadata(child.metadata) === "_blank"
+                          ? "noopener noreferrer"
+                          : undefined
+                      }
+                      className="text-sm text-white/60 hover:text-white transition-colors"
+                    >
+                      {child.name}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <p className="font-normal text-sm font-secondary text-center text-[var(--color-secondary-50)] uppercase">
+          Copyright © {currentYear} {TENANT_NAME}. All Rights Reserved.
+          Powered by &nbsp;
+          <Link
+            href="https://webshopmanager.com/"
+            target="_blank"
+            className="font-semibold text-zinc-400 hover:underline"
+          >
+            Web Shop Manager.
+          </Link>
+        </p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { LogOutIcon } from "@/app/utils/svgs/logOutIcon";
+import { UserProfileIcon } from "@/app/utils/svgs/userProfileIcon";
+import Link from "next/link";
+
+type AccountMenuDropdownProps = {
+  isAccountOpen: boolean;
+  isLoggingOut: boolean;
+  handleLogout: () => void;
+};
+
+export default function AccountMenuDropdown({
+  isAccountOpen,
+  isLoggingOut,
+  handleLogout,
+}: AccountMenuDropdownProps) {
+  if (!isAccountOpen) return null;
+
+  return (
+    <div
+      role="menu"
+      aria-label="Account menu"
+      style={{ backgroundColor: "var(--color-secondary-50)" }}
+      className="absolute right-0 mt-2 w-52 shadow-[0_10px_20px_0_rgba(0,0,0,0.10)] z-50"
+    >
+      {/* Account Dashboard */}
+      <Link
+        href="/account/settings"
+        className="flex w-full items-center gap-2 font-secondary transition-all ease-in-out duration-300 border-b border-[var(--color-secondary-200)] rounded-md font-normal px-4 py-3 text-sm text-[var(--color-secondary-900)] hover:text-[var(--color-primary-500)]"
+        role="menuitem"
+      >
+        <span className="[&>svg]:size-4 text-[var(--color-primary-600)]">
+          {UserProfileIcon}
+        </span>
+        Account Dashboard
+      </Link>
+
+      {/* Logout Button */}
+      <button
+        onClick={handleLogout}
+        disabled={isLoggingOut}
+        className="flex w-full items-center gap-2 font-secondary transition-all ease-in-out duration-300 rounded-md font-normal px-4 py-3 text-left text-sm text-[var(--color-secondary-900)] hover:text-[var(--color-primary-500)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
+        role="menuitem"
+      >
+        <span className="[&>svg]:size-4 text-[var(--color-primary-600)]">
+          {LogOutIcon}
+        </span>
+        {isLoggingOut ? "Signing Out..." : "Logout"}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { navbarStyles } from "../styles/navbarStyles";
+
+interface CartBadgeProps {
+  count: number;
+}
+
+export const CartBadge = ({ count }: CartBadgeProps) => {
+  if (count <= 0) return null;
+  
+  return (
+    <span
+      className={navbarStyles.cartBadge}
+      aria-label={`${count} items in cart`}
+    >
+      {count}
+    </span>
+  );
+};

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

@@ -0,0 +1,17 @@
+interface LoadingStateProps {
+  className?: string;
+}
+
+export const LoadingState = ({ className = "" }: LoadingStateProps) => {
+  return (
+    <div className={`animate-pulse mx-auto w-fit ${className}`}>
+      <div className="flex items-center gap-7">
+        {Array.from({ length: 7 }).map((_, index) => (
+          <div key={index} className="flex flex-col gap-1">
+            <div className="h-5 bg-gray-300 rounded w-24 mx-auto" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,124 @@
+import Link from "next/link";
+import { ChevronDownIcon } from "@/app/utils/svgs/chevronDownIcon";
+import { useDropdown } from "../hooks/useDropdown";
+import { navbarStyles } from "../styles/navbarStyles";
+import type { MenuItem } from "../hooks/useNavbarData";
+import Image from "next/image";
+
+interface MenuItemDropdownProps {
+  item: MenuItem;
+  isActive: (href: string) => boolean;
+}
+
+const navbarItems = [
+  {
+    name: "apparel",
+    image:
+      "http://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-apparel.png",
+  },
+  {
+    name: "american vtwin",
+    image:
+      "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-vtwin.png",
+  },
+  {
+    name: "atv",
+    image:
+      "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-atv.png",
+  },
+  {
+    name: "offroad",
+    image:
+      "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-offroad.png",
+  },
+  {
+    name: "outdoor",
+    image: "https://www.socalpowersports.com/files/images/nav-icon-outdoor.png",
+  },
+  {
+    name: "scooters",
+    image:
+      "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-scooter.png",
+  },
+  {
+    name: "snow",
+    image:
+      "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-snowmobile.png",
+  },
+  {
+    name: "street",
+    image:
+      "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-street.png",
+  },
+  {
+    name: "utv",
+    image:
+      "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-utv.png",
+  },
+  {
+    name: "watercraft",
+    image:
+      "https://wsm-saleor-assets.s3.us-west-2.amazonaws.com/socal-powersports/categories/nav-icon-watercraft.png",
+  },
+];
+
+export const MenuItemDropdown = ({ item, isActive }: MenuItemDropdownProps) => {
+  const { isOpen, handleMouseEnter, handleMouseLeave } = useDropdown(80);
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Link
+        href={item.url}
+        prefetch={false}
+        className={`${navbarStyles.navLinkBase} ${
+          isActive(item.url)
+            ? navbarStyles.navLinkActive
+            : navbarStyles.navLinkInactive
+        } whitespace-nowrap`}
+        aria-expanded={isOpen}
+        aria-haspopup="menu"
+      >
+        <div
+       
+          className="flex items-center justify-center text-white uppercase font-extrabold gap-2 transition-all ease-in-out duration-300 font-secondary"
+        >
+          <span>{item.name}</span>
+          <span
+            className={`size-4 transition-transform duration-300 ${
+              isOpen ? "rotate-180" : ""
+            }`}
+            aria-hidden="true"
+          >
+            {ChevronDownIcon}
+          </span>
+        </div>
+      </Link>
+
+      {isOpen && (
+        <div
+          className={navbarStyles.dropdown.container}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          role="menu"
+          aria-label={`${item.name} submenu`}
+        >
+          {item.children?.map((child) => (
+            <Link
+              key={child.id}
+              href={child.url}
+              prefetch={false}
+              className={navbarStyles.dropdown.item}
+              role="menuitem"
+            >
+              {child.name}
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,123 @@
+import Link from "next/link";
+import { SearchIcon } from "@/app/utils/svgs/searchIcon";
+import { CrossIcon } from "@/app/utils/svgs/crossIcon";
+import { MenuIcon } from "@/app/utils/svgs/menuIcon";
+import { UserProfileIcon } from "@/app/utils/svgs/userProfileIcon";
+import { ShoppingCart } from "@/app/utils/svgs/shoppingCart";
+import Search from "../search";
+import SecondaryButton from "../../../reuseableUI/secondaryButton";
+import { NavbarBrand } from "./NavbarBrand";
+import { CartBadge } from "./CartBadge";
+import { navbarStyles } from "../styles/navbarStyles";
+
+interface MobileNavbarProps {
+  isEnableSearch: boolean;
+  toggleSearch: () => void;
+  isHamMenuOpen: boolean;
+  toggleHamMenu: () => void;
+  logo: string;
+  brandName: string;
+  isLoggedIn: boolean;
+  totalItems: number;
+  syncingCart: boolean;
+  isActive: (href: string) => boolean;
+}
+
+export const MobileNavbar = ({
+  isEnableSearch,
+  toggleSearch,
+  isHamMenuOpen,
+  toggleHamMenu,
+  logo,
+  brandName,
+  isLoggedIn,
+  totalItems,
+  syncingCart,
+  isActive
+}: MobileNavbarProps) => {
+  return (
+    <div className={navbarStyles.mobileContainer}>
+      {isEnableSearch ? (
+        <div className="flex items-center w-full gap-2">
+          <Search className="w-full max-w-none" />
+          <button
+            onClick={toggleSearch}
+            className="p-2.5 cursor-pointer text-white [&>svg]:size-5"
+            aria-label="Close search"
+          >
+            {CrossIcon}
+          </button>
+        </div>
+      ) : (
+        <div className="flex items-center justify-between w-full">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={toggleHamMenu}
+              className="[&>svg]:size-5 py-2.5 text-black cursor-pointer"
+              aria-label={isHamMenuOpen ? "Close menu" : "Open menu"}
+              aria-expanded={isHamMenuOpen}
+            >
+              {isHamMenuOpen ? CrossIcon : MenuIcon}
+            </button>
+            <NavbarBrand 
+              logo={logo} 
+              brandName={brandName} 
+              width={107} 
+              height={32} 
+            />
+          </div>
+          
+          <div className="flex w-fit items-center gap-4">
+            <button
+              onClick={toggleSearch}
+              className="text-black py-2.5 hover:text-[var(--color-primary-500)] cursor-pointer transition-all ease-in-out duration-300"
+              aria-label="Open search"
+            >
+              {SearchIcon}
+            </button>
+            
+            {isLoggedIn ? (
+              <Link
+                href="/account"
+                prefetch={false}
+                className={`flex items-center py-2.5 !bg-transparent ${navbarStyles.iconBtnBase} ${
+                  isActive("/account")
+                    ? "text-[var(--color-primary-500)]"
+                    : navbarStyles.navLinkInactive
+                } relative`}
+                aria-label="User Account"
+              >
+                {UserProfileIcon}
+              </Link>
+            ) : (
+              <Link href="/account/login" prefetch={false}>
+                {UserProfileIcon}
+              </Link>
+            )}
+            
+            <Link
+              href="/cart"
+              prefetch={false}
+              className={`flex items-center py-2.5 !bg-transparent ${navbarStyles.iconBtnBase} ${
+                isActive("/cart")
+                  ? "text-[var(--color-primary-500)]"
+                  : navbarStyles.navLinkInactive
+              } relative`}
+              aria-label={`Cart with ${totalItems} items`}
+            >
+              {ShoppingCart}
+              {syncingCart ? (
+                <div 
+                  className="absolute -top-1 -right-1 w-3 h-3 border border-[var(--color-primary-600)] rounded-full border-t-transparent animate-spin"
+                  aria-label="Syncing cart"
+                />
+              ) : (
+                <CartBadge count={totalItems} />
+              )}
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};