@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,49 +0,0 @@
-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

@@ -1,80 +0,0 @@
-"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

@@ -1,18 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,30 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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;
-};