@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

package/src/pages/product-list/side-nav.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState, ReactNode } from "react";
+import Drawer from "@mui/material/Drawer";
+// GLOBAL CUSTOM COMPONENT
+import Scrollbar from "./scrollbar";
+
+// ================================================================
+interface Props {
+  open?: boolean;
+  width?: number;
+  children: ReactNode;
+  toggle?: () => void;
+  position?: "left" | "right";
+  handler: (event: () => void) => ReactNode;
+}
+// ================================================================
+
+export default function SideNav(props: Props) {
+  const {
+    position = "left",
+    open = false,
+    width = 280,
+    children,
+    handler,
+    toggle,
+  } = props;
+
+  const [sideNavOpen, setSideNavOpen] = useState(open);
+  const handleToggleSideNav = () => setSideNavOpen(!sideNavOpen);
+
+  useEffect(() => setSideNavOpen(open), [open]);
+
+  const handleClose = toggle || handleToggleSideNav;
+
+  return (
+    <div>
+      <Drawer
+        anchor={position}
+        open={sideNavOpen}
+        onClose={handleClose}
+        SlideProps={{ style: { width } }}
+        sx={{ zIndex: 15001 }}
+      >
+        <Scrollbar autoHide={false}>{children}</Scrollbar>
+      </Drawer>
+
+      {handler(handleClose)}
+    </div>
+  );
+}

package/src/pages/product-list/swatch.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Box } from "@mui/material";
+import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+import { Chip, useTheme } from "@mui/material";
+import { RenderedFacetProps } from "./facet-group";
+
+type Props = RenderedFacetProps & NonNullable<unknown>;
+
+const cssColorName = (color: string | undefined) => {
+  if (!color) return false;
+  const cssColorName = new Option().style;
+  cssColorName.color = color;
+  return cssColorName.color !== "";
+};
+
+const checkWhite = (color: string | undefined) => {
+  return color?.trim().toLowerCase() === "white";
+};
+
+export default function Swatch({
+  facet,
+  handleRefinerSelect,
+  isRefinerSelected,
+}: Props) {
+  const theme = useTheme();
+
+  return (
+    <Box mb={3}>
+      {facet.Values?.map((colorItem: ProductRefinerValue) => {
+        return (
+          <Box
+            key={colorItem.LeftValueBoundString}
+            display="inline-block"
+            mr={3}
+            sx={{ textAlign: "center" }}
+          >
+            <Chip
+              clickable={true}
+              key={colorItem.LeftValueBoundString}
+              onClick={() => handleRefinerSelect(colorItem)}
+              sx={{
+                color: "black",
+                borderRadius: "100%",
+                backgroundColor:
+                  colorItem.SwatchColorHexCode ||
+                  (cssColorName(colorItem.LeftValueBoundString)
+                    ? colorItem.LeftValueBoundString?.toLowerCase()
+                    : theme.palette.grey[300]),
+                width: 32,
+                height: 32,
+                border: checkWhite(colorItem.LeftValueBoundString)
+                  ? "1px solid black"
+                  : isRefinerSelected(colorItem)
+                    ? "2px solid"
+                    : "2px solid transparent",
+                "&:hover": {
+                  backgroundColor:
+                    colorItem.SwatchColorHexCode ||
+                    (cssColorName(colorItem.LeftValueBoundString)
+                      ? colorItem.LeftValueBoundString?.toLowerCase()
+                      : theme.palette.grey[300]),
+                },
+                ".MuiChip-label": {
+                  overflow: "visible",
+                },
+              }}
+              label={
+                !colorItem.SwatchColorHexCode &&
+                (colorItem.LeftValueBoundString || "0")[0].toUpperCase()
+              }
+              title={colorItem.LeftValueBoundString}
+            />
+            <p>{colorItem.LeftValueBoundString}</p>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/pages/product-list/types.ts

@@ -0,0 +1,18 @@
+export interface ProductFilters {
+  brand: string[];
+  color: string[];
+  sales: string[];
+  price: number[];
+  rating: number;
+}
+
+export type ProductFilterKeys = keyof ProductFilters;
+export type ProductFilterValues = ProductFilters[ProductFilterKeys];
+
+export type SortOption = {
+  field: string;
+  isDefault?: boolean;
+  isDescending: boolean;
+  displayName: string;
+  defaultForSearch?: boolean;
+};

package/src/pages/product-list/use-product-list.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ProductListContext } from "./product-list-context";
+
+const useProductList = () => {
+  const context = useContext(ProductListContext);
+  if (!context) {
+    throw new Error("Context must be used within a ProductListProvider");
+  }
+  return context;
+};
+
+export default useProductList;

package/src/pages/product-list/useCategoryFilter.tsx

@@ -0,0 +1,26 @@
+import { notFound } from "next/navigation";
+
+export type Category = {
+  id: string;
+  parentId: string | null;
+  seoCrumb?: string | null;
+};
+
+export function getE4CategoryIdFromSlug(
+  slug: string[],
+  categories: Category[],
+): string {
+  if (!slug || slug.length === 0) {
+    const home = categories.find(
+      (cat) => cat.seoCrumb?.toLowerCase() === "home",
+    );
+    return home ? home.id : "1";
+  }
+  const slugStr = slug.join("/").toLowerCase();
+  const found = categories.find(
+    (cat) => cat.seoCrumb?.toLowerCase() === slugStr,
+  );
+  if (found) return found.id;
+  notFound();
+  return "";
+}

package/src/pages/product-list/utils/facet-helpers.ts

@@ -0,0 +1,5 @@
+const isRefinerSelected = () => {
+  return false;
+};
+
+export { isRefinerSelected };

package/src/pages/product-list/utils/generate-breadcrumbs.ts

@@ -0,0 +1,30 @@
+import { CategoryHierarchy } from "@/lib/category-helpers";
+import { searchCategory } from "./search-for-category";
+
+const generateBreadcrumbs = (
+  selectedCategory: CategoryHierarchy | undefined,
+  categoryHierarchy: CategoryHierarchy[],
+  locale: string,
+) => {
+  const breadcrumbs: CategoryHierarchy[] = [];
+  if (selectedCategory) {
+    breadcrumbs.push(selectedCategory);
+  }
+  let nextCategory: CategoryHierarchy | undefined =
+    selectedCategory ?? undefined;
+  while (nextCategory) {
+    nextCategory = searchCategory(
+      locale,
+      categoryHierarchy,
+      nextCategory?.ParentCategory,
+    );
+    if (nextCategory) {
+      breadcrumbs.push(nextCategory);
+    } else {
+      break;
+    }
+  }
+  return breadcrumbs.reverse();
+};
+
+export default generateBreadcrumbs;

package/src/pages/product-list/utils/getCategoryFilterFromSlug.ts

@@ -0,0 +1,153 @@
+export type Category = {
+  id?: string;
+  RecordId?: number;
+  parentId?: string | null;
+  ParentCategory?: number;
+  seoCrumb?: string | null;
+  Url?: string;
+  Name?: string;
+  NeutralizedNAME?: string;
+  Children?: Category[];
+};
+
+export function getCategoryIdFromSlug(
+  slug: string[],
+  categories: Category[],
+  isD365: boolean,
+): string | undefined {
+  if (!slug || slug.length === 0 || !categories || categories.length === 0) {
+    return undefined;
+  }
+
+  if (slug.length > 1) {
+    const parentSlug = slug[0]?.toLowerCase();
+    const childSlug = slug[1]?.toLowerCase();
+
+    const parentCategory = categories.find((cat) => {
+      const url = cat?.Url?.toLowerCase() || "";
+      const name = cat?.Name?.toLowerCase() || "";
+      const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
+      const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
+      return (
+        url.includes(parentSlug) ||
+        name === parentSlug ||
+        neutralName === parentSlug ||
+        seoCrumb === parentSlug
+      );
+    });
+
+    if (!parentCategory) {
+      console.warn(
+        "getCategoryIdFromSlug: No parent category found for slug:",
+        parentSlug,
+      );
+      return undefined;
+    }
+
+    const childMatch = parentCategory.Children?.find((cat) => {
+      const url = cat?.Url?.toLowerCase() || "";
+      const name = cat?.Name?.toLowerCase() || "";
+      const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
+      const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
+      return (
+        url.includes(childSlug) ||
+        name === childSlug ||
+        neutralName === childSlug ||
+        seoCrumb === childSlug
+      );
+    });
+    if (childMatch) {
+      return isD365
+        ? childMatch.RecordId?.toString()
+        : childMatch.id?.toString();
+    }
+
+    return undefined;
+  }
+
+  const slugValue = slug[0]?.toLowerCase();
+
+  const topLevelMatch = categories.find((cat) => {
+    const url = cat?.Url?.toLowerCase() || "";
+    const name = cat?.Name?.toLowerCase() || "";
+    const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
+    const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
+    return (
+      url.includes(slugValue) ||
+      name === slugValue ||
+      neutralName === slugValue ||
+      seoCrumb === slugValue
+    );
+  });
+
+  if (topLevelMatch) {
+    return isD365
+      ? topLevelMatch.RecordId?.toString()
+      : topLevelMatch.id?.toString();
+  }
+
+  let childMatch: Category | undefined;
+  for (const topLevelCat of categories) {
+    if (topLevelCat.Children && topLevelCat.Children.length > 0) {
+      const child = topLevelCat.Children.find((cat) => {
+        const url = cat?.Url?.toLowerCase() || "";
+        const name = cat?.Name?.toLowerCase() || "";
+        const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
+        const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
+        return (
+          url.includes(slugValue) ||
+          name === slugValue ||
+          neutralName === slugValue ||
+          seoCrumb === slugValue
+        );
+      });
+      if (child) {
+        childMatch = child;
+        break;
+      }
+    }
+  }
+
+  if (childMatch) {
+    return isD365 ? childMatch.RecordId?.toString() : childMatch.id?.toString();
+  }
+
+  return undefined;
+}
+
+export function getCategoryFilterFromSlug(
+  slug: string[],
+  categories: Category[],
+): string {
+  if (!slug || slug.length === 0) {
+    return "";
+  }
+
+  const topLevelSlugs = ["men", "women", "accessories"];
+
+  if (slug.length === 1 && topLevelSlugs.includes(slug[0].toLowerCase())) {
+    const topCategory = categories.find((cat) => {
+      const seoCrumb =
+        cat?.seoCrumb?.toLowerCase() ||
+        cat?.Url?.toLowerCase() ||
+        cat?.Name?.toLowerCase();
+      return seoCrumb === slug[0].toLowerCase();
+    });
+    if (topCategory) {
+      const children = categories.filter((cat) => {
+        const parentIdMatch =
+          cat.parentId === topCategory.id ||
+          cat.ParentCategory === topCategory.RecordId;
+        return parentIdMatch && (cat.seoCrumb || cat.Url || cat.Name);
+      });
+      if (children.length > 0) {
+        return children
+          .map((child) => (child.seoCrumb || child.Url || child.Name) as string)
+          .join("|");
+      }
+    }
+    return slug[0];
+  } else {
+    return slug.join("/");
+  }
+}

package/src/pages/product-list/utils/product-list-helper.ts

@@ -0,0 +1,111 @@
+import { IQueryResultSettings } from "@msdyn365-commerce/retail-proxy";
+import { PageKey, SortOption } from "./product-list-types";
+import getSortOptions from "./sort-options";
+import { convertParameterToRefiner } from "@/lib/refiner-utils";
+import { SearchByCriteriaInput } from "@/api-manager/schemas/product.schema";
+
+const getDefaultValueByPageKey = (pageKey: PageKey) => {
+  switch (pageKey) {
+    case PageKey.TOP:
+      return 20;
+    case PageKey.PAGE:
+      return 1;
+    case PageKey.REFINEMENT:
+    case PageKey.SEARCH:
+      return "";
+    case PageKey.VIEW:
+      return "grid";
+    default:
+      return undefined;
+  }
+};
+
+const getSelectedSortOption = (
+  sortOptions: SortOption[],
+  isSearch: boolean,
+  sortCode?: string,
+) => {
+  let sortOption: SortOption | undefined;
+  if (sortCode) {
+    sortOption = sortOptions.find((s) => s.code === sortCode);
+  } else {
+    sortOption = sortOptions.find((s) =>
+      isSearch ? s.defaultForSearch : s.isDefault,
+    );
+  }
+  if (!sortOption) {
+    sortOption = sortOptions[0];
+  }
+  return sortOption;
+};
+
+const getCategoryFromSlug = (slug: string[]) => {
+  if (Array.isArray(slug)) {
+    const categoryId = Number(slug.pop());
+    if (!isNaN(categoryId)) {
+      return categoryId;
+    }
+  }
+  return undefined;
+};
+
+const calculatePage = (searchState: IQueryResultSettings): number => {
+  const skip = searchState?.Paging?.Skip ?? 0;
+  const top = searchState?.Paging?.Top ?? 20;
+
+  return skip === 0 ? 1 : skip / top + 1;
+};
+
+const calculateSkip = (page: number, top: number) => (page - 1) * top;
+
+const buildInitialState = (
+  params: string[],
+  top: number,
+  page: number,
+  sort: string,
+  refiner: string,
+  searchTerm: string | undefined,
+) => {
+  const categoryId = getCategoryFromSlug(params);
+
+  const selectedSort = getSelectedSortOption(
+    getSortOptions(),
+    !!searchTerm,
+    sort || undefined,
+  );
+  const state: SearchByCriteriaInput = {
+    searchState: {
+      queryResultSettings: {
+        Paging: {
+          Top: top,
+          Skip: calculateSkip(page, top),
+        },
+        Sorting: {
+          Columns:
+            (selectedSort && [
+              {
+                ColumnName: selectedSort?.field,
+                IsDescending: selectedSort?.isDescending,
+              },
+            ]) ||
+            [],
+        },
+      },
+      refinement: refiner
+        ? refiner.split("||").map((r) => convertParameterToRefiner(r))
+        : [],
+      searchTerm: searchTerm,
+    },
+    categoryId: categoryId,
+  };
+  return state;
+};
+
+export {
+  getDefaultValueByPageKey,
+  getSelectedSortOption,
+  getCategoryFromSlug,
+  calculatePage,
+  calculateSkip,
+  buildInitialState,
+};

package/src/pages/product-list/utils/product-list-types.ts

@@ -0,0 +1,41 @@
+import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+
+export const PageKey = {
+  TOP: "perPage",
+  PAGE: "page",
+  REFINEMENT: "refiner",
+  VIEW: "view",
+  SORT: "sort",
+  SEARCH: "search",
+} as const;
+
+export type ProductListSearchParams = {
+  perPage?: typeof PageKey.TOP;
+  page?: typeof PageKey.PAGE;
+  refiner: typeof PageKey.REFINEMENT;
+  search: typeof PageKey.SEARCH;
+  sort: typeof PageKey.SORT;
+};
+
+export type PageKey = (typeof PageKey)[keyof typeof PageKey];
+
+export type ViewMode = "grid" | "list";
+
+export type ProductListParamHandlers = {
+  handlePageChange: (page: number) => void;
+  handlePerPageChange: (perPage: number) => void;
+  handleRefinerChange: (refiner: ProductRefinerValue) => void;
+  handleSortChange: (sort: SortOption) => void;
+  handleViewChange: (view: ViewMode) => void;
+  handleSearchChange: (searchTerm: string) => void;
+  handleRefinersClear?: () => void;
+};
+
+export type SortOption = {
+  field: string;
+  code: string;
+  isDefault?: boolean;
+  isDescending: boolean;
+  displayName: string;
+  defaultForSearch?: boolean;
+};

package/src/pages/product-list/utils/search-for-category.ts

@@ -0,0 +1,76 @@
+import { CategoryHierarchy } from "@/lib/category-helpers";
+import { PageSlug } from "@/lib/page-slugs";
+import { TextValueTranslation } from "@msdyn365-commerce/retail-proxy";
+
+const searchCategory = (
+  locale: string,
+  categoryHierarchy: CategoryHierarchy[],
+  categoryId?: number,
+  categoryName?: string,
+): CategoryHierarchy | undefined => {
+  let foundCategory;
+  if (!Array.isArray(categoryHierarchy)) {
+    return foundCategory;
+  }
+  for (const cat of categoryHierarchy) {
+    if (categoryId === cat.RecordId) {
+      foundCategory = cat;
+      break;
+    }
+    let nameToCheck = getCategoryTranslatedName(locale, cat.NameTranslations);
+    if (!nameToCheck) {
+      nameToCheck = cat.Name;
+    }
+    if (
+      categoryName &&
+      nameToCheck &&
+      normalizeCategoryName(categoryName) === normalizeCategoryName(nameToCheck)
+    ) {
+      foundCategory = cat;
+    }
+    if (cat.Children && cat.Children.length > 0) {
+      const matchingChild = searchCategory(
+        locale,
+        cat.Children,
+        categoryId,
+        categoryName,
+      );
+      if (matchingChild) {
+        foundCategory = matchingChild;
+      }
+    }
+  }
+  return foundCategory;
+};
+
+const getCategoryTranslatedName = (
+  locale?: string,
+  nameTranslations?: TextValueTranslation[],
+): string | undefined => {
+  let nameTranslation: TextValueTranslation | undefined;
+  if (locale && nameTranslations && nameTranslations.length > 0) {
+    nameTranslation = nameTranslations.find(
+      (item) => item.Language?.toLowerCase() === locale.toLowerCase(),
+    );
+  }
+  return nameTranslation && nameTranslation.Text;
+};
+
+const normalizeCategoryName = (name: string) =>
+  name.toLowerCase().replace(/ /g, "-");
+
+const getCategoryUrl = (category: CategoryHierarchy) => {
+  const contentPageKey = PageSlug.Content;
+  const productListPageKey = PageSlug.ProductList;
+  if (category.IsCMSPage) {
+    return `/${contentPageKey}/${category.Url}`;
+  }
+  return `/${productListPageKey}/${category.Url}`;
+};
+
+export {
+  searchCategory,
+  getCategoryTranslatedName,
+  normalizeCategoryName,
+  getCategoryUrl,
+};

package/src/pages/product-list/utils/sort-options.ts

@@ -0,0 +1,44 @@
+import { SortOption } from "./product-list-types";
+
+const sortOptions: SortOption[] = [
+  {
+    field: "Name",
+    code: "name-asc",
+    isDefault: true,
+    displayName: "Name A-Z",
+    isDescending: false,
+  },
+  {
+    field: "Name",
+    code: "name-desc",
+    isDefault: false,
+    displayName: "Name Z-A",
+    isDescending: true,
+  },
+  {
+    field: "Price",
+    code: "price-desc",
+    isDefault: false,
+    displayName: "Price High to Low",
+    isDescending: true,
+  },
+  {
+    field: "Price",
+    code: "price-asc",
+    isDefault: false,
+    displayName: "Price Low to High",
+    isDescending: false,
+  },
+  {
+    field: "Relevance",
+    code: "relevance",
+    isDefault: false,
+    displayName: "Relevance",
+    isDescending: true,
+    defaultForSearch: true,
+  },
+];
+
+const getSortOptions = () => sortOptions;
+
+export default getSortOptions;

package/src/pages/product-list/utils/use-previous-refiners.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+
+export const usePreviousRefiners = <T>(
+  value: T,
+  isValid: (val: T) => boolean,
+): T => {
+  const ref = useRef<T>(value);
+  useEffect(() => {
+    if (isValid(value)) {
+      ref.current = value;
+    }
+  }, [value, isValid]);
+  return ref.current;
+};