@alphasquad/saleor-template-advance 0.1.0

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

@@ -0,0 +1,106 @@
+import { GET_TESTIMONIAL_PAGE_TYPE } from "@/graphql/queries/getPageTypeId";
+import { GET_TESTIMONIALS } from "@/graphql/queries/getTestimonials";
+import createApolloServerClient from "@/graphql/server-client";
+import Heading from "../reuseableUI/heading";
+import { TestimonialCard } from "../reuseableUI/testimonialCard";
+
+export const TestimonialsGrid = async ({ first = 6 }: { first?: number }) => {
+  let items: Array<{
+    id: string;
+    name: string;
+    text: string;
+    rating: number;
+    publishedAt: string;
+  }> = [];
+
+  try {
+    const client = createApolloServerClient();
+
+    const pageTypeResp = await client.query<{
+      pageTypes?: {
+        edges?: Array<{ node?: { id: string; slug: string } | null }>;
+      };
+    }>({ query: GET_TESTIMONIAL_PAGE_TYPE, errorPolicy: "all" });
+
+    const pageTypeId = pageTypeResp.data.pageTypes?.edges?.[0]?.node?.id;
+    if (!pageTypeId) {
+      items = [];
+    } else {
+      const testimonialsResp = await client.query<{
+        pages?: {
+          edges?: Array<{
+            node?: {
+              id: string;
+              publishedAt: string;
+              attributes?: Array<{
+                attribute?: { slug?: string | null } | null;
+                values?: Array<{
+                  name?: string | null;
+                  value?: string | null;
+                }> | null;
+              }> | null;
+            } | null;
+          }>;
+        };
+      }>({
+        query: GET_TESTIMONIALS,
+        variables: { pageTypeId, first },
+        errorPolicy: "all",
+      });
+      items = (testimonialsResp.data.pages?.edges || [])
+        .map((e) => e.node)
+        .filter(Boolean)
+        .map((n) => {
+          const attrs = n!.attributes || [];
+          const getAttributeValue = (slug: string): string => {
+            const attr = attrs.find((a) => a?.attribute?.slug === slug);
+            return attr?.values?.[0]?.name || attr?.values?.[0]?.value || "";
+          };
+          const publishedAt = n!.publishedAt;
+          const name = getAttributeValue("testimonial_name");
+          const text = getAttributeValue("testimonial_text");
+          const ratingValue = getAttributeValue("testimonial_rating");
+          const rating = Math.max(0, Math.min(5, Number(ratingValue) || 0));
+
+          return {
+            id: n!.id,
+            name,
+            text,
+            rating,
+            publishedAt,
+          };
+        })
+        .filter((item) => item.name && item.text);
+    }
+  } catch (error) {
+    console.error("Error fetching testimonials:", error);
+    items = [];
+  }
+
+  return !items.length ? null : (
+    <section
+      style={{
+        backgroundColor: "var(--color-secondary-920)",
+      }}
+      className="py-12 px-4 md:px-6 md:py-16 lg:py-20 lg:px-0"
+    >
+      <div className="container mx-auto">
+        <Heading content="What Our Customers Say" />
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-6 lg:pt-16">
+          {items.map((t) => (
+            <TestimonialCard
+              key={t.id}
+              id={t.id}
+              title=""
+              publishedAt={t.publishedAt}
+              content={t.text}
+              author={t.name}
+              rating={t.rating}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/app/components/skeletons/ContentSkeleton.tsx

@@ -0,0 +1,14 @@
+export default function ContentSkeleton() {
+  return (
+    <div className="w-full animate-pulse">
+      <div className="h-6 w-40 bg-[var(--color-secondary-800)]/30 rounded mb-4" />
+      <div className="h-4 w-full bg-[var(--color-secondary-800)]/20 rounded mb-2" />
+      <div className="h-4 w-[90%] bg-[var(--color-secondary-800)]/20 rounded mb-2" />
+      <div className="h-4 w-[80%] bg-[var(--color-secondary-800)]/20 rounded mb-6" />
+      <div className="h-6 w-56 bg-[var(--color-secondary-800)]/30 rounded mb-4" />
+      <div className="h-4 w-full bg-[var(--color-secondary-800)]/20 rounded mb-2" />
+      <div className="h-4 w-[85%] bg-[var(--color-secondary-800)]/20 rounded mb-2" />
+      <div className="h-4 w-[70%] bg-[var(--color-secondary-800)]/20 rounded" />
+    </div>
+  )
+}

package/src/app/components/sortDropdown/index.tsx

@@ -0,0 +1,116 @@
+import { cn } from "@/app/utils/functions";
+import { ChevronDownIcon } from "@/app/utils/svgs/chevronDownIcon";
+import { useEffect, useRef, useState } from "react";
+
+interface SortOption {
+  key: string;
+  label: string;
+}
+
+interface SortDropdownProps {
+  sortOptions: SortOption[];
+  sortKey: string;
+  setSortKey: (key: string) => void;
+}
+
+export const SortDropdown: React.FC<SortDropdownProps> = ({
+  sortOptions,
+  sortKey,
+  setSortKey,
+}) => {
+  const [sortOpen, setSortOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setSortOpen(false);
+      }
+    };
+
+    if (sortOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [sortOpen]);
+
+  const currentSortLabel =
+    sortOptions.find((opt) => opt.key === sortKey)?.label || "Select";
+
+  return (
+    <div className="relative w-full md:w-auto" ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setSortOpen((v) => !v)}
+        className="flex cursor-pointer border border-[var(--color-secondary-300)] bg-[var(--color-secondary-110)] w-full md:w-auto uppercase justify-between text-[var(--color-secondary-800)] items-center gap-2 px-4 py-3.5 font-secondary"
+        aria-haspopup="listbox"
+        aria-expanded={sortOpen}
+      >
+        <div className="flex items-center">
+          <span className="font-semibold text-xs md:text-sm hidden md:block">
+            SORT BY: &nbsp;
+          </span>
+          <span className="text-xs md:text-sm">
+            {currentSortLabel.split(":")[1] || currentSortLabel}
+          </span>
+        </div>
+        <span
+          className={cn(
+            "size-5 flex-shrink-0 transition-all ease-in-out duration-300 text-[var(--color-primary-600)]",
+            sortOpen ? "-rotate-180" : ""
+          )}
+        >
+          {ChevronDownIcon}
+        </span>
+      </button>
+
+      {sortOpen && (
+        <div className="absolute right-0 mt-2 w-full bg-white border border-[var(--color-secondary-200)] z-10">
+          <ul role="listbox" className="text-xs md:text-sm">
+            {sortOptions.map((opt) => {
+              const selected = opt.key === sortKey;
+              return (
+                <li
+                  key={opt.key}
+                  role="option"
+                  aria-selected={selected}
+                  onClick={() => {
+                    setSortKey(opt.key);
+                    setSortOpen(false);
+                  }}
+                  className={`cursor-pointer text-xs md:text-sm -tracking-[0.035px] p-3 font-secondary border-b border-[var(--color-secondary-200)] flex items-center gap-2 text-[var(--color-secondary-800)]`}
+                >
+                  <p
+                    className={cn(
+                      "border rounded-full p-px flex items-center justify-center",
+                      selected
+                        ? "border-[var(--color-primary-600)]"
+                        : "border-[var(--color-secondary-200)]"
+                    )}
+                  >
+                    <span
+                      className={`inline-block size-2.5 text-xs md:text-sm  rounded-full  ${
+                        selected
+                          ? "bg-[var(--color-primary-600)] "
+                          : "bg-white "
+                      }`}
+                    />
+                  </p>
+                  {opt.label}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/app/components/tertiaryButton/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+interface ButtonProps {
+  content: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+}
+const TertiaryButton = ({
+  content,
+  onClick,
+  className = "",
+  style = {},
+}: ButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      style={style}
+      className={`font-secondary font-semibold uppercase underline underline-offset-2 hover:underline-offset-4 transition-all duration-300 ease-in-out cursor-pointer -tracking-[0.035px] text-sm ${className}`}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default TertiaryButton;

package/src/app/components/theme/theme-provider.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type React from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme =
+  | "asphalt"
+  | "racing-red"
+  | "chrome"
+  | "sunset"
+  | "forest-green"
+  | "ocean-blue";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined);
+
+const VALID_THEMES: Theme[] = [
+  "asphalt",
+  "racing-red",
+  "chrome",
+  "sunset",
+  "forest-green",
+  "ocean-blue",
+];
+
+function getThemeFromEnv(): Theme {
+  const envTheme = process.env.NEXT_PUBLIC_THEME_PALETTE as Theme;
+  return VALID_THEMES.includes(envTheme) ? envTheme : "asphalt";
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme,
+  storageKey = "ui-theme",
+}: ThemeProviderProps) {
+  const fallbackTheme = defaultTheme || getThemeFromEnv();
+  const [theme, setThemeState] = useState<Theme>(fallbackTheme);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const storedTheme = localStorage.getItem(storageKey) as Theme | null;
+
+    const resolvedTheme = VALID_THEMES.includes(storedTheme as Theme)
+      ? (storedTheme as Theme)
+      : fallbackTheme;
+
+    root.setAttribute("data-theme", resolvedTheme);
+    setThemeState(resolvedTheme);
+  }, [storageKey, fallbackTheme]);
+
+  const setTheme = (newTheme: Theme) => {
+    if (!VALID_THEMES.includes(newTheme)) return;
+
+    document.documentElement.setAttribute("data-theme", newTheme);
+    localStorage.setItem(storageKey, newTheme);
+    setThemeState(newTheme);
+  };
+
+  return (
+    <ThemeProviderContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};

package/src/app/contact/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { getStoreName } from "@/app/utils/branding";
+
+export const metadata: Metadata = {
+  title: `Contact Us - ${getStoreName()}`,
+  description: `Get in touch with ${getStoreName()} for product questions, fitment help, order support, and general inquiries.`,
+  alternates: {
+    canonical: "/contact",
+  },
+  openGraph: {
+    title: `Contact Us - ${getStoreName()}`,
+    description: `Get in touch with ${getStoreName()} for product questions, fitment help, order support, and general inquiries.`,
+    type: "website",
+    url: "/contact",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Contact Us - ${getStoreName()}`,
+    description: `Get in touch with ${getStoreName()} for product questions, fitment help, order support, and general inquiries.`,
+    images: ["/Logo.png"],
+  },
+};
+
+export default function ContactLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}
+