@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/reuseableUI/offerCard.tsx

@@ -0,0 +1,42 @@
+"use client";
+import CommonButton from "./commonButton";
+import PrimaryButton from "./primaryButton";
+
+export interface OfferCardProps {
+  title: string;
+  subtitle: string;
+  image: string;
+  buttonText: string;
+}
+
+export const OfferCard = ({
+  title,
+  subtitle,
+  image,
+  buttonText,
+}: OfferCardProps) => {
+  return (
+    <div
+      style={{
+        backgroundImage: `url('${image}')`,
+        color: "var(--color-secondary-50)",
+      }}
+      className="p-6 lg:p-10 bg-cover bg-center relative"
+    >
+      <div className="flex flex-col gap-20  z-[5] relative">
+        <div>
+          <p className="font-secondary font-light text-xs md:text-sm lg:text-base tracking-[-0.04px]">
+            {subtitle}
+          </p>
+          <p className="font-secondary text-2xl md:text-3xl font-bold tracking-[-0.075px]">
+            {title}
+          </p>
+        </div>
+        <div>
+          <CommonButton variant="primary" content={buttonText} className="uppercase py-2 md:py-3" />
+        </div>
+      </div>
+      <div className="bg-black/40 absolute inset-0 w-full h-full z-[2] pointer-events-none" />
+    </div>
+  );
+};

package/src/app/components/reuseableUI/passwordRules/passwordRules.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { SuccessIcon } from "@/app/utils/svgs/passwordIcons/successIcon";
+import { ErrorIcon } from "@/app/utils/svgs/passwordIcons/errorIcon";
+import { DotListIcon } from "@/app/utils/svgs/account/myAccount/listDotIcon";
+
+export const PasswordRules = ({ value }: { value: string }) => {
+  const rules = [
+    {
+      label: "At least 8 characters long",
+      test: (val: string) => val.length >= 8,
+    },
+    {
+      label: "At least 1 uppercase letter (A-Z)",
+      test: (val: string) => /[A-Z]/.test(val),
+    },
+    {
+      label: "At least 1 lowercase letter (a-z)",
+      test: (val: string) => /[a-z]/.test(val),
+    },
+    {
+      label: "At least 1 number (0-9)",
+      test: (val: string) => /\d/.test(val),
+    },
+    {
+      label: "At least 1 special character",
+      test: (val: string) => /[^A-Za-z0-9]/.test(val),
+    },
+  ];
+
+  return (
+    <div className="w-full">
+      <ul
+        style={{ color: "var(--color-secondary-500)" }}
+        className="mt-2 text-sm list-disc list-inside"
+      >
+        {rules.map((rule, idx) => {
+          const passed = rule.test(value);
+          return (
+            <div key={idx} className="flex items-center gap-1">
+            {value ? (
+              <span className="w-4 h-4 flex items-center justify-center">
+                {passed ? SuccessIcon : ErrorIcon}
+              </span>
+            ) : (
+              <span className="w-4 h-4 flex items-center justify-center">
+                {DotListIcon}
+              </span>
+            )}
+              <span>{rule.label}</span>
+            </div>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

package/src/app/components/reuseableUI/primaryButton/index.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/app/utils/functions";
+import React from "react";
+
+interface ButtonProps {
+  content: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+}
+
+const PrimaryButton = ({
+  content,
+  onClick,
+  className = "",
+  type = "button",
+  disabled = false,
+}: ButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "px-4 py-2 font-secondary ring-1 ring-[var(--color-primary-600)] disabled:ring-[var(--color-secondary-200)] hover:text-[var(--color-primary-600)] bg-[var(--color-primary-700)] hover:bg-white transition-all ease-in-out duration-300 text-white disabled:text-[var(--color-secondary-400)] disabled:bg-[var(--color-secondary-300)] font-semibold cursor-pointer uppercase text-base -tracking-[0.04px] ",
+        className
+      )}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default PrimaryButton;

package/src/app/components/reuseableUI/productCard.tsx

@@ -0,0 +1,118 @@
+"use client";
+import { ArrowIcon } from "@/app/utils/svgs/arrowIcon";
+import { FeatureTag } from "@/app/utils/svgs/featureTag";
+import { getFullImageUrl } from "@/app/utils/functions";
+import Image from "next/image";
+import Link from "next/link";
+import PrimaryButton from "./primaryButton";
+import React, { useState } from "react";
+
+export interface ProductCardProps {
+  id: string;
+  name: string;
+  image: string;
+  href: string;
+  price: number;
+  category_id: string;
+  category: string;
+  discount?: number | null;
+  isFeatured?: boolean;
+  onSale: boolean;
+}
+
+export const ProductCard = ({
+  id,
+  name,
+  image,
+  href,
+  price,
+  category,
+  discount,
+  isFeatured = false,
+  onSale,
+}: ProductCardProps) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const hasDiscount = discount != null && discount > 0;
+  const priceValue = hasDiscount ? price + discount : price;
+  const fallbackImage = "/no-image-avail-large.png";
+
+  // Ensure image URL has full S3 path if it's relative
+  const fullImageUrl = getFullImageUrl(image) || fallbackImage;
+
+  return (
+    <Link
+      href={href}
+      key={id}
+      className="group block h-full overflow-hidden hover:shadow-lg transition-all duration-200 relative bg-white font-secondary p-4 rounded-sm"
+    >
+      {/* Featured badge */}
+      {isFeatured && (
+        <span
+          style={{ color: "var(--color-primary-600)" }}
+          className="absolute top-0 right-3 z-10 w-6 h-10"
+          aria-label="Featured"
+        >
+          {FeatureTag}
+        </span>
+      )}
+
+      <div className="relative w-full flex flex-col gap-3 justify-between h-full">
+        {/* Image area with skeleton */}
+        <div className="relative w-full aspect-square overflow-hidden">
+          {!loaded && (
+            <div
+              className="animate-pulse bg-gray-100 absolute inset-0 z-10"
+              aria-hidden="true"
+            />
+          )}
+          <Image
+            src={fullImageUrl}
+            alt={name}
+            width={296}
+            height={296}
+            className={`w-full h-full object-contain transition-all ease-in-out duration-300 group-hover:scale-105 ${
+              loaded ? "opacity-100" : "opacity-0"
+            }`}
+            onLoadingComplete={() => setLoaded(true)}
+            onError={() => setLoaded(true)}
+            priority={false}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1 flex-grow">
+          <p
+            className="font-normal text-[10px] uppercase font-secondary text-gray-500 tracking-wider"
+          >
+            {category}
+          </p>
+
+          <p
+            title={name}
+            className="tracking-tight font-bold text-sm md:text-base text-black line-clamp-2 leading-tight"
+          >
+            {name}
+          </p>
+
+          <div className="flex gap-2 items-center mt-auto pt-2">
+            {price === 0 ? (
+              <p
+                style={{ color: "var(--color-primary-700)" }}
+                className="text-sm font-bold"
+              >
+                Call for Availability
+              </p>
+            ) : (
+              <p
+                className="font-black text-lg md:text-xl text-black"
+              >
+                ${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+

package/src/app/components/reuseableUI/productSkeleton.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export type ProductSkeletonVariant = "grid" | "swiper" | "list";
+
+interface ProductSkeletonProps {
+  variant?: ProductSkeletonVariant;
+  className?: string;
+}
+
+export const ProductSkeleton: React.FC<ProductSkeletonProps> = ({
+  variant = "grid",
+  className,
+}) => {
+  const base = "group block border border-gray-200 rounded-md overflow-hidden bg-white animate-pulse";
+
+  const imageHeights: Record<ProductSkeletonVariant, string> = {
+    grid: "h-48",
+    swiper: "h-48",
+    list: "h-32",
+  };
+
+  return (
+    <div className={`${base} ${className ?? ""}`}>
+      <div className={`relative w-full ${imageHeights[variant]} bg-gray-200`} />
+      <div className="p-3">
+        <div className="h-4 bg-gray-200 rounded w-3/4 mb-2" />
+        <div className="h-3 bg-gray-200 rounded w-1/2 mb-2" />
+        <div className="h-4 bg-gray-200 rounded w-1/3" />
+      </div>
+    </div>
+  );
+};
+
+export default ProductSkeleton;

package/src/app/components/reuseableUI/searchByVehicle.tsx

@@ -0,0 +1,187 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import PrimaryButton from "./primaryButton";
+import Select from "./select";
+import { useVehicleData } from "@/hooks/useVehicleData";
+import { useGlobalStore } from "@/store/useGlobalStore";
+
+interface SelectInputProps {
+  onSearch?: (fitment: string) => void;
+  className?: string;
+  AddClearButton?: boolean;
+}
+
+export const SearchByVehicle = ({
+  onSearch,
+  className,
+  AddClearButton = false,
+}: SelectInputProps) => {
+  const params = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const isYMMActive = useGlobalStore((state) => state.isYMMActive);
+  const previousPairsRef = useRef<string | null>(null);
+  const isSearchPage = pathname === "/search";
+
+  const {
+    rootTypes,
+    selectedRootType,
+    dropdownLevels,
+    loading,
+    handleRootTypeChange,
+    handleValueChange,
+    isComplete,
+    getSelectedPairs,
+    initializeFromPairs,
+    resetInitialization,
+  } = useVehicleData();
+
+  const initialPairs = params.get("fitment_pairs");
+
+  useEffect(() => {
+    if (
+      rootTypes.length > 0 &&
+      selectedRootType === 0 &&
+      dropdownLevels.length === 0 &&
+      !initialPairs
+    ) {
+      handleRootTypeChange(rootTypes[0].id);
+    }
+  }, [rootTypes]);
+
+  useEffect(() => {
+    // Only initialize if we're on the search page AND we have fitment_pairs
+    if (!isSearchPage || !initialPairs) {
+      return;
+    }
+
+    // Prevent re-initialization if pairs haven't changed
+    if (previousPairsRef.current === initialPairs) {
+      return;
+    }
+
+    if (rootTypes.length === 0) {
+      return;
+    }
+
+    previousPairsRef.current = initialPairs;
+    initializeFromPairs(initialPairs);
+  }, [initialPairs, isSearchPage, rootTypes]);
+
+  // Reset when leaving the search page or pairs are cleared
+  useEffect(() => {
+    return () => {
+      if (isSearchPage) {
+        resetInitialization();
+        previousPairsRef.current = null;
+      }
+    };
+  }, [isSearchPage]);
+
+  const handleSearch = () => {
+    const pairs = getSelectedPairs();
+    if (onSearch) {
+      onSearch(pairs);
+    } else {
+      router.push(`/search?fitment_pairs=${pairs}`);
+    }
+  };
+
+  const handleClear = () => {
+    resetInitialization();
+    previousPairsRef.current = null;
+
+    // Only navigate if we're on the search page
+    if (isSearchPage) {
+      router.push(`/search`);
+    }
+
+    if (rootTypes.length > 0) {
+      setTimeout(() => {
+        handleRootTypeChange(rootTypes[0].id);
+      }, 100);
+    }
+  };
+
+  // Check if any filter is selected
+  const hasSelectedFilters = dropdownLevels.some(
+    (level) => level.selectedValue !== "",
+  );
+
+  if (!isYMMActive) {
+    return null;
+  }
+
+  if (rootTypes?.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{ backgroundColor: "var(--color-secondary-920)" }}
+      className={`p-6 lg:px-8 lg:py-10 flex flex-col items-start flex-wrap gap-1 md:gap-5 relative ${
+        className && className
+      }`}
+    >
+      <h2 className="font-secondary text-lg md:text-[24px] font-bold leading-6 md:leading-[32px] tracking-[-0.06px] text-[var(--color-secondary-75)]">
+        SEARCH BY VEHICLE
+      </h2>
+
+      {!dropdownLevels.length && (
+        <div className="w-full inline-block space-y-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="bg-gray-300 w-full block h-12 z-10" />
+          ))}
+        </div>
+      )}
+      <div className="max-h-[250px] overflow-y-auto w-full">
+        {/* Dynamic Dropdown Levels */}
+        {dropdownLevels.map((level, index) => {
+          const selectId = `vehicle-${level.typeName.toLowerCase()}-${index}`;
+
+          return (
+            <Select
+              key={`${level.typeId}-${index}`}
+              htmlFor={selectId}
+              label={level.typeName}
+              value={level.selectedValue}
+              onChange={(e) => {
+                const valueId =
+                  level.values.find(
+                    (v) => (v.value || v.name) === e.target.value,
+                  )?.id || 0;
+                handleValueChange(index, valueId, e.target.value);
+              }}
+              options={level.values.map((v) => ({
+                value: v.value || v.name || "",
+                label: v.value || v.name || "",
+              }))}
+              placeholder={`SELECT ${level.typeName.toUpperCase()}`}
+              parentClassName="w-full mb-3"
+              style={{ backgroundColor: "var(--color-secondary-50)" }}
+              disabled={loading || level.values.length === 0}
+            />
+          );
+        })}
+      </div>
+      <div className="flex flex-col gap-4 w-full">
+        <PrimaryButton
+          className="leading-[150%] py-3 w-full text-white"
+          content="SEARCH"
+          disabled={loading}
+          onClick={handleSearch}
+        />
+        {AddClearButton && (
+          <button
+            onClick={handleClear}
+            disabled={!hasSelectedFilters}
+            className="w-full h-11 bg-white border border-[var(--color-secondary-300)] text-[var(--color-secondary-800)] font-semibold rounded-md hover:bg-[var(--color-secondary-50)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
+          >
+            CLEAR
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/app/components/reuseableUI/secondaryButton/index.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/app/utils/functions";
+import React from "react";
+
+interface ButtonProps {
+  content: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+}
+
+const SecondaryButton = ({
+  content,
+  onClick,
+  className = "",
+  type,
+  disabled,
+}: ButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "font-secondary bg-[var(--color-secondary-900)] text-[var(--color-secondary-50)] hover:bg-[var(--color-secondary-800)] transition-all ease-in-out duration-300 font-semibold cursor-pointer -tracking-[0.04px] px-4 py-2",
+        className,
+      )}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default SecondaryButton;

package/src/app/components/reuseableUI/section.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+type SectionProps = {
+  title: string;
+  description: React.ReactNode; // allows both string & JSX (like <Image/>)
+  className?: string;
+};
+
+export default function Section({ title, description, className = "" }: SectionProps) {
+  return (
+    <div className={`flex gap-6 ${className}`}>
+      <div className="w-full max-w-[366px]">
+      <p className="text-2xl font-bold uppercase leading-8 tracking-[-0.06px]">
+        {title}
+      </p>
+      </div>
+      <div className="flex flex-col gap-4 leading-7 text-lg tracking-[-0.045px] items-center w-full">{description}</div>
+    </div>
+  );
+}

package/src/app/components/reuseableUI/select/index.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { SelectHTMLAttributes } from "react";
+import { cn } from "@/app/utils/functions";
+
+interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  options: SelectOption[];
+  placeholder?: string;
+  className?: string;
+  parentClassName?: string;
+  style?: React.CSSProperties;
+  label?: string;
+  hasError?: boolean;
+  errorMessage?: string;
+  darkTheme?: boolean;
+  htmlFor?: string;
+}
+
+const Select = ({
+  options,
+  placeholder = "Select an option",
+  className = "",
+  parentClassName,
+  value,
+  style,
+  label,
+  hasError = false,
+  errorMessage,
+  darkTheme = false,
+  htmlFor,
+  ...props
+}: SelectProps) => {
+  const defaultTheme = "text-[var(--color-secondary-800)] ring-[var(--color-secondary-200)] bg-white hover:bg-zinc-100 cursor-pointer disabled:bg-[var(--color-secondary-200)] disabled:text-[var(--color-secondary-400)] disabled:ring-[var(--color-secondary-300)]";
+  
+  return (
+    <div className={cn("w-full", parentClassName)}>
+      {label && (
+        <label htmlFor={htmlFor} className={cn("block text-sm font-medium pb-2 uppercase leading-5 tracking-[-0.035px]", darkTheme ? "text-[var(--color-secondary-200)]" : "text-[var(--color-secondary-800)]")}>
+          {label}
+        </label>
+      )}
+      <div className="relative w-full">
+        <select
+          value={value}
+          style={style}
+          className={cn("w-full p-2 ring-1 focus-visible:ring-[var(--color-secondary-600)] outline-none disabled:pointer-events-none px-4 pr-12 py-3.5 text-sm font-normal font-secondary appearance-none",
+            defaultTheme,
+            hasError ? 'ring-[var(--color-primary-600)]' : 'ring-[var(--color-secondary-200)]',
+            darkTheme && "bg-[var(--color-secondary-800)] ring-[var(--color-secondary-700)] text-[var(--color-secondary-200)] disabled:bg-[var(--color-secondary-800)] disabled:ring-0 disabled:text-[var(--color-secondary-600)]",
+            className
+          )}
+          {...props}
+        >
+          <option value="" disabled>
+            {placeholder}
+          </option>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {/* Custom dropdown arrow */}
+        <div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
+          <svg
+            className="w-4 h-4 text-[var(--color-secondary-600)]"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </div>
+      </div>
+      {errorMessage && (
+        <div
+          style={{ color: "var(--color-primary-600)" }}
+          className="text-sm leading-5 tracking-[-0.035px] mt-1.5"
+        >
+          {errorMessage}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Select;
+export type { SelectOption, SelectProps };