@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/pages-v2/product-list/facet.tsx

@@ -0,0 +1,36 @@
+import {
+  ProductRefiner,
+  ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
+import React from "react";
+import FacetGroup from "./facet-group";
+import { Box, Divider } from "@mui/material";
+
+type Props = {
+  facets: ProductRefiner[];
+  selectedRefiners: ProductRefinerValue[];
+  handleRefinerSelect(refiner: ProductRefinerValue): void;
+};
+
+export default function Facet({
+  facets,
+  selectedRefiners,
+  handleRefinerSelect,
+}: Props) {
+  return (
+    <div>
+      {facets.map((facetGroup, index) => {
+        return (
+          <Box key={facetGroup.KeyName}>
+            <FacetGroup
+              facet={facetGroup}
+              selectedRefiners={selectedRefiners}
+              handleRefinerSelect={handleRefinerSelect}
+            />
+            {index < facets.length - 1 && <Divider />}
+          </Box>
+        );
+      })}
+    </div>
+  );
+}

package/src/pages-v2/product-list/list-filter.tsx

@@ -0,0 +1,43 @@
+import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+import React from "react";
+import CheckboxLabel from "./checkbox-label";
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { RenderedFacetProps } from "./facet-group";
+
+type Props = RenderedFacetProps & NonNullable<unknown>;
+
+const generateKey = (f: ProductRefinerValue) => {
+  return `${f.LeftValueBoundString}-${f.RefinerRecordId}`;
+};
+
+export default function ListFilter({
+  facet,
+  handleRefinerSelect,
+  isRefinerSelected,
+}: Props) {
+  const createFacetLabel = (f: ProductRefinerValue) => {
+    const label = f.LeftValueBoundLocalizedString || f.LeftValueBoundString;
+    return (
+      <FlexBetween>
+        <Span>{label}</Span>
+        <Span ml={2}>({f.Count})</Span>
+      </FlexBetween>
+    );
+  };
+  return (
+    <FlexBox flexDirection="column" pl={1}>
+      {facet.Values?.map((f) => (
+        <CheckboxLabel
+          key={generateKey(f)}
+          label={createFacetLabel(f)}
+          checked={isRefinerSelected(f)}
+          onChange={() => handleRefinerSelect(f)}
+        />
+      ))}
+    </FlexBox>
+  );
+}

package/src/pages-v2/product-list/pagination.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { ChangeEvent } from "react";
+import MuiPagination, { PaginationProps } from "@mui/material/Pagination";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useTranslations } from "next-intl";
+
+export interface PageInfo {
+  top?: number;
+  skip?: number;
+  search?: string;
+  sort?: string;
+  sortDesc?: boolean;
+  startCursor?: string;
+  endCursor?: string;
+  hasNextPage?: boolean;
+  hasPreviousPage?: boolean;
+  currentPage?: number;
+  after?: string;
+  before?: string;
+  // filter?: any;
+}
+interface Props extends PaginationProps {
+  recordCount: number;
+  pageInfo: PageInfo;
+  handleChange: (filter: PageInfo) => void;
+}
+
+const Pagination = ({ recordCount, pageInfo, handleChange, page }: Props) => {
+  const t = useTranslations("ProductList");
+
+  const newPageInfo = {
+    ...pageInfo,
+    top: pageInfo.top ?? 20,
+    skip: pageInfo.skip ?? 0,
+  };
+
+  // Calculate showing range
+  const start = recordCount === 0 ? 0 : newPageInfo.skip + 1;
+  const end = Math.min(newPageInfo.skip + newPageInfo.top, recordCount);
+  const showingText = t("showingRange", {
+    start,
+    end,
+    total: recordCount,
+  });
+
+  // Calculate page count
+  let newCount = Math.floor(recordCount / newPageInfo.top);
+  if (recordCount === 0) {
+    newCount = 1;
+  } else if (recordCount % newPageInfo.top !== 0) {
+    newCount += 1;
+  }
+
+  const handleMuiPaginationChange = (
+    _event: ChangeEvent<unknown>,
+    newPage: number,
+  ) => {
+    const skip = newPageInfo.top * (newPage - 1);
+    handleChange({
+      ...newPageInfo,
+      currentPage: newPage,
+      skip,
+    });
+  };
+
+  return (
+    <>
+      <Span color="grey.600">{showingText}</Span>
+      <MuiPagination
+        color="primary"
+        variant="outlined"
+        count={newCount}
+        page={page}
+        onChange={handleMuiPaginationChange}
+      />
+    </>
+  );
+};
+
+export default Pagination;

package/src/pages-v2/product-list/product-list-context.tsx

@@ -0,0 +1,302 @@
+import {
+  SearchByCriteriaInput,
+  SearchByCriteriaResponse,
+  ProductPrice,
+} from "@/api-manager/schemas/product.schema";
+import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
+import React, { createContext, useMemo, useCallback } from "react";
+import {
+  PageKey,
+  ProductListParamHandlers,
+  SortOption,
+  ViewMode,
+} from "./utils/product-list-types";
+import {
+  ProductRefinerSource,
+  ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
+import {
+  areRefinersEqual,
+  convertRefinerToParameter,
+} from "@/lib/refiner-utils";
+import getProductList from "@/api-manager/services/product/queries/get-product-list";
+import getSortOptions from "./utils/sort-options";
+import { usePathname, useSearchParams } from "next/navigation";
+import {
+  buildInitialState,
+  calculatePage,
+  calculateSkip,
+  getDefaultValueByPageKey,
+  getSelectedSortOption,
+} from "./utils/product-list-helper";
+import getProductPrices from "@/api-manager/services/product/queries/get-product-prices";
+export type ProductListContextType = {
+  productData: SearchByCriteriaResponse;
+  isLoading: boolean;
+  paramHandlers: ProductListParamHandlers;
+  view: ViewMode;
+  sortOptions: SortOption[];
+  selectedSort: string;
+  itemsPerPage: number;
+  page: number;
+  skip: number;
+  selectedRefiners: ProductRefinerValue[];
+  searchTerm: string;
+  productPrices: ProductPrice[];
+};
+
+export const ProductListContext = createContext<
+  ProductListContextType | undefined
+>(undefined);
+
+const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [topParameter, setTopParameter] = useQueryState(
+    PageKey.TOP,
+    parseAsInteger
+      .withDefault(getDefaultValueByPageKey(PageKey.TOP) as number)
+      .withOptions({ clearOnDefault: true }),
+  );
+  const [pageParameter, setPageParameter] = useQueryState(
+    PageKey.PAGE,
+    parseAsInteger
+      .withDefault(getDefaultValueByPageKey(PageKey.PAGE) as number)
+      .withOptions({ clearOnDefault: true }),
+  );
+  const [refinerParameter, setRefinerParameter] = useQueryState(
+    PageKey.REFINEMENT,
+    parseAsString
+      .withDefault(getDefaultValueByPageKey(PageKey.REFINEMENT) as string)
+      .withOptions({ clearOnDefault: true }),
+  );
+
+  const [viewParameter, setViewParameter] = useQueryState(
+    PageKey.VIEW,
+    parseAsString
+      .withDefault(getDefaultValueByPageKey(PageKey.VIEW) as string)
+      .withOptions({ clearOnDefault: true }),
+  );
+  const [sortParameter, setSortParameter] = useQueryState(
+    PageKey.SORT,
+    parseAsString
+      .withDefault(
+        getSelectedSortOption(
+          getSortOptions(),
+          !!searchParams.get(PageKey.SEARCH),
+        )?.code,
+      )
+      .withOptions({ clearOnDefault: true }),
+  );
+
+  const [searchParameter, setSearchParameter] = useQueryState(
+    PageKey.SEARCH,
+    parseAsString
+      .withDefault(getDefaultValueByPageKey(PageKey.SEARCH) as string)
+      .withOptions({ clearOnDefault: true }),
+  );
+
+  const initialState = buildInitialState(
+    pathname.split("/"),
+    topParameter,
+    pageParameter,
+    sortParameter,
+    refinerParameter,
+    searchParameter,
+  );
+  const [inputParams, setInputParams] =
+    React.useState<SearchByCriteriaInput>(initialState);
+
+  const { data, isLoading } = getProductList.useData(inputParams);
+  const { data: productPrices } = getProductPrices.useSuspenseData({
+    productIds: data?.products.map((product) => product.RecordId) || [],
+  });
+  const handleRefinerChange = useCallback(
+    (refiner: ProductRefinerValue) => {
+      const newInputParams = { ...inputParams };
+      const refiners = newInputParams.searchState.refinement;
+      const priceIndex = ProductRefinerSource.Price;
+      const idx = refiners.findIndex((r) => areRefinersEqual(r, refiner));
+      if (refiner.RefinerSourceValue === priceIndex) {
+        const priceRefiner = refiners[idx];
+        if (idx > -1) {
+          if (
+            priceRefiner.LeftValueBoundString ===
+              refiner.LeftValueBoundString &&
+            priceRefiner.RightValueBoundString === refiner.RightValueBoundString
+          ) {
+            refiners.splice(idx, 1);
+          } else {
+            priceRefiner.LeftValueBoundString = refiner.LeftValueBoundString;
+            priceRefiner.RightValueBoundString = refiner.RightValueBoundString;
+          }
+        } else {
+          refiners.push(refiner);
+        }
+      } else {
+        if (idx > -1) {
+          refiners.splice(idx, 1);
+        } else {
+          refiners.push(refiner);
+        }
+      }
+
+      setInputParams(newInputParams);
+    },
+    [inputParams, setInputParams],
+  );
+
+  const handlePageChange = useCallback(
+    (page: number) => {
+      const updatedInputParams = { ...inputParams };
+      const calculationSkip = calculateSkip(page, topParameter);
+      let paging = updatedInputParams.searchState.queryResultSettings.Paging;
+      paging = paging || {};
+      paging.Skip = calculationSkip;
+      setInputParams(updatedInputParams);
+    },
+    [inputParams, topParameter, setInputParams],
+  );
+
+  const handlePerPageChange = useCallback(
+    (newValue: number) => {
+      const updatedInputParams = { ...inputParams };
+      let paging = updatedInputParams.searchState.queryResultSettings.Paging;
+      paging = paging || {};
+      paging.Top = newValue;
+      setInputParams(updatedInputParams);
+    },
+    [inputParams, setInputParams],
+  );
+
+  const handleViewChange = useCallback(
+    (viewMode: ViewMode) => {
+      setViewParameter(viewMode);
+    },
+    [setViewParameter],
+  );
+
+  const handleSortChange = useCallback(
+    (sort: SortOption) => {
+      const updatedInputParams = { ...inputParams };
+      const sortOption = getSortOptions().find((s) => s.code === sort.code);
+      if (!sortOption) {
+        return;
+      }
+      let sorting = updatedInputParams.searchState.queryResultSettings.Sorting;
+      sorting = sorting || {};
+      sorting.Columns = [
+        { ColumnName: sortOption.field, IsDescending: sortOption.isDescending },
+      ];
+      setInputParams(updatedInputParams);
+    },
+    [inputParams, setInputParams],
+  );
+
+  const handleSearchChange = useCallback(
+    (searchTerm: string) => {
+      const updatedInputParams = { ...inputParams };
+      updatedInputParams.searchState.searchTerm = searchTerm;
+      setInputParams(updatedInputParams);
+    },
+    [inputParams, setInputParams],
+  );
+
+  const handleRefinersClear = useCallback(() => {
+    const updatedInputParams = { ...inputParams };
+    updatedInputParams.searchState.refinement = [];
+    setInputParams(updatedInputParams);
+  }, [inputParams, setInputParams]);
+
+  const paramHandlers = useMemo(
+    () => ({
+      handlePageChange,
+      handlePerPageChange,
+      handleRefinerChange,
+      handleViewChange,
+      handleSortChange,
+      handleSearchChange,
+      handleRefinersClear,
+    }),
+    [
+      handlePageChange,
+      handlePerPageChange,
+      handleRefinerChange,
+      handleViewChange,
+      handleSortChange,
+      handleSearchChange,
+      handleRefinersClear,
+    ],
+  );
+
+  React.useEffect(() => {
+    const sortObj =
+      inputParams.searchState.queryResultSettings.Sorting?.Columns?.[0];
+    let sortCode = "";
+    if (sortObj) {
+      sortCode =
+        getSortOptions().find(
+          (s) =>
+            s.field === sortObj.ColumnName &&
+            s.isDescending === sortObj.IsDescending,
+        )?.code || "";
+    }
+
+    setTopParameter(
+      inputParams.searchState.queryResultSettings.Paging?.Top || 20,
+    );
+    setPageParameter(
+      calculatePage(inputParams.searchState.queryResultSettings),
+    );
+    setRefinerParameter(
+      inputParams.searchState.refinement
+        .map((r) => convertRefinerToParameter(r))
+        .join("||"),
+    );
+    setSortParameter(sortCode);
+    setSearchParameter(inputParams.searchState.searchTerm || "");
+  }, [
+    inputParams,
+    setPageParameter,
+    setRefinerParameter,
+    setSearchParameter,
+    setSortParameter,
+    setTopParameter,
+  ]);
+
+  const value = useMemo(
+    () => ({
+      productData: data as SearchByCriteriaResponse,
+      isLoading,
+      paramHandlers,
+      view: viewParameter as ViewMode,
+      sortOptions: getSortOptions(),
+      selectedSort: sortParameter,
+      itemsPerPage: topParameter,
+      page: pageParameter,
+      skip: calculateSkip(pageParameter, topParameter),
+      selectedRefiners: inputParams.searchState.refinement,
+      searchTerm: searchParameter,
+      productPrices: productPrices,
+    }),
+    [
+      data,
+      isLoading,
+      paramHandlers,
+      viewParameter,
+      sortParameter,
+      topParameter,
+      pageParameter,
+      inputParams.searchState.refinement,
+      searchParameter,
+      productPrices,
+    ],
+  );
+  return (
+    <ProductListContext.Provider value={value}>
+      {children}
+    </ProductListContext.Provider>
+  );
+};
+
+export default ProductListProvider;

package/src/pages-v2/product-list/product-list-state.ts

@@ -0,0 +1,187 @@
+import { SearchByCriteriaInput } from "@/api-manager/schemas/product.schema";
+import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
+import React from "react";
+import {
+  PageKey,
+  ProductListParamHandlers,
+  ViewMode,
+} from "./utils/product-list-types";
+import {
+  IQueryResultSettings,
+  ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
+import {
+  areRefinersEqual,
+  convertParameterToRefiner,
+  convertRefinerToParameter,
+} from "@/lib/refiner-utils";
+import getProductList from "@/api-manager/services/product/queries/get-product-list";
+import { SortOption } from "./types";
+import getSortOptions from "./utils/sort-options";
+
+const calculatePage = (searchState: IQueryResultSettings) => {
+  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 useProductListState = () => {
+  const [topParameter, setTopParameter] = useQueryState(
+    PageKey.TOP,
+    parseAsInteger.withDefault(20),
+  );
+  const [pageParameter, setPageParameter] = useQueryState(
+    PageKey.PAGE,
+    parseAsInteger.withDefault(1),
+  );
+  const [refinerParameter, setRefinerParameter] = useQueryState(
+    PageKey.REFINEMENT,
+    parseAsString,
+  );
+
+  const [viewParameter, setViewParameter] = useQueryState(
+    PageKey.VIEW,
+    parseAsString.withDefault("grid"),
+  );
+
+  const [sortParameter, setSortParameter] = useQueryState(
+    PageKey.SORT,
+    parseAsString,
+  );
+
+  const [searchParameter, setSearchParameter] = useQueryState(
+    PageKey.SEARCH,
+    parseAsString,
+  );
+
+  const buildInitialState = () => {
+    const state: SearchByCriteriaInput = {
+      searchState: {
+        queryResultSettings: {
+          Paging: {
+            Top: topParameter,
+            Skip: calculateSkip(pageParameter, topParameter),
+          },
+          Sorting: {
+            Columns:
+              (sortParameter && [
+                { ColumnName: sortParameter, IsDescending: false },
+              ]) ||
+              [],
+          },
+        },
+        refinement: refinerParameter
+          ? refinerParameter
+              .split("||")
+              .map((r) => convertParameterToRefiner(r))
+          : [],
+        searchTerm: searchParameter || undefined,
+      },
+    };
+    return state;
+  };
+
+  const [inputParams, setInputParams] =
+    React.useState<SearchByCriteriaInput>(buildInitialState());
+
+  const { data } = getProductList.useData(inputParams);
+
+  const handleRefinerChange = (refiner: ProductRefinerValue) => {
+    const newInputParams = { ...inputParams };
+    const refiners = newInputParams.searchState.refinement;
+    const idx = refiners.findIndex((r) => areRefinersEqual(r, refiner));
+    if (idx > -1) {
+      refiners.splice(idx, 1);
+    } else {
+      refiners.push(refiner);
+    }
+    setInputParams(newInputParams);
+  };
+
+  const handlePageChange = (page: number) => {
+    const updatedInputParams = { ...inputParams };
+    const calculationSkip = calculateSkip(page, topParameter);
+    let paging = updatedInputParams.searchState.queryResultSettings.Paging;
+    paging = paging || {};
+    paging.Skip = calculationSkip;
+    setInputParams(updatedInputParams);
+  };
+
+  const handlePerPageChange = (newValue: number) => {
+    const updatedInputParams = { ...inputParams };
+    let paging = updatedInputParams.searchState.queryResultSettings.Paging;
+    paging = paging || {};
+    paging.Top = newValue;
+    setInputParams(updatedInputParams);
+  };
+
+  const handleViewChange = (viewMode: ViewMode) => {
+    setViewParameter(viewMode);
+  };
+
+  const handleSortChange = (sort: SortOption) => {
+    const updatedInputParams = { ...inputParams };
+    let sorting = updatedInputParams.searchState.queryResultSettings.Sorting;
+    sorting = sorting || {};
+    sorting.Columns = [
+      { ColumnName: sort.field, IsDescending: sort.isDescending },
+    ];
+    setInputParams(updatedInputParams);
+  };
+
+  const handleSearchChange = (searchTerm: string) => {
+    const updatedInputParams = { ...inputParams };
+    updatedInputParams.searchState.searchTerm = searchTerm;
+    setInputParams(updatedInputParams);
+  };
+
+  const paramHandlers: ProductListParamHandlers = {
+    handlePageChange,
+    handlePerPageChange,
+    handleRefinerChange,
+    handleViewChange,
+    handleSortChange,
+    handleSearchChange,
+  };
+
+  React.useEffect(() => {
+    setTopParameter(
+      inputParams.searchState.queryResultSettings.Paging?.Top || 20,
+    );
+    setPageParameter(
+      calculatePage(inputParams.searchState.queryResultSettings),
+    );
+    setRefinerParameter(
+      inputParams.searchState.refinement
+        .map((r) => convertRefinerToParameter(r))
+        .join("||"),
+    );
+    setSortParameter(
+      inputParams.searchState.queryResultSettings.Sorting?.Columns?.[0]
+        .ColumnName || "",
+    );
+    setSearchParameter(inputParams.searchState.searchTerm || "");
+  }, [
+    inputParams,
+    setTopParameter,
+    setPageParameter,
+    setRefinerParameter,
+    setSortParameter,
+    setSearchParameter,
+  ]);
+
+  return {
+    productData: data,
+    paramHandlers,
+    viewMode: viewParameter as ViewMode,
+    sortOptions: getSortOptions(),
+    selectedSort: sortParameter,
+    top: topParameter,
+    page: pageParameter,
+    skip: calculateSkip(pageParameter, topParameter),
+  };
+};
+
+export default useProductListState;

package/src/pages-v2/product-list/product-rating.tsx

@@ -0,0 +1,16 @@
+import Rating from "@mui/material/Rating";
+import { BoxProps } from "@mui/material/Box";
+import { Box, Typography } from "@mui/material";
+
+interface Props extends BoxProps {
+  rating: number;
+}
+
+export default function ProductRating({ rating = 0, ...props }: Props) {
+  return (
+    <Box display="flex" gap={1} alignItems="center" {...props}>
+      <Rating size="small" value={rating} color="warn" readOnly />
+      <Typography color="grey.600">({rating})</Typography>
+    </Box>
+  );
+}