@evenicanpm/storefront-core 1.0.2 → 1.0.3

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>
+  );
+}

package/src/pages-v2/product-list/quick-view-dialog-content.tsx

@@ -0,0 +1,207 @@
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import {
+  H1,
+  H2,
+  H6,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// import ImageWithFallback from "@app/_shared/ImageWithFallback";
+import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import {
+  Button,
+  CircularProgress,
+  DialogContent,
+  Typography,
+} from "@mui/material";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import ProductRating from "./product-rating";
+import useCart, {
+  AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/product-quantity-buttons";
+import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import {
+  InventorySearchCriteriaInput,
+  ProductDetails,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import { useMemo, useState } from "react";
+import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
+import Link from "next/link";
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
+import { useTranslations } from "next-intl";
+
+interface Props {
+  product: ProductSearchResult;
+  cart: Cart;
+  productDetails: ProductDetails;
+  handleClose: () => void;
+}
+
+export default function QuickViewContent({
+  product,
+  cart,
+  productDetails,
+  handleClose,
+}: Props) {
+  const [showDimensionError, setShowDimensionError] = useState(false);
+  const {
+    selectVariantId,
+    selectDimensions,
+    handleChangeVariant,
+    allDimensionsSelected,
+  } = useVariants({ product: productDetails });
+  const t = useTranslations("ProductList.QuickView");
+  const { formatCurrency } = useCurrencyFormatter();
+  const { handleCartAmountChange, handleAddToCart, loading } = useCart(
+    cart
+      ? {
+          cart,
+          recordId: product.RecordId,
+          selectVariantId: selectVariantId,
+        }
+      : {
+          cart: { Id: "", CartLines: [] },
+          recordId: product.RecordId,
+          selectVariantId: selectVariantId,
+        },
+  );
+
+  const searchCriteria = useMemo<InventorySearchCriteriaInput>(
+    () => ({
+      allDimensionsSelected: allDimensionsSelected(selectDimensions),
+      searchCriteria: {
+        defaultWarehouseOnly: true,
+        productIds: [selectVariantId || product.RecordId],
+      },
+    }),
+    [allDimensionsSelected, selectDimensions, product, selectVariantId],
+  );
+
+  const { data: shippingInventoryData, isLoading: inventoryLoading } =
+    getProductAvailability.useData(searchCriteria);
+
+  const currentCartLine = cart?.CartLines?.find((item) => {
+    return item?.ProductId === (Number(selectVariantId) || product.RecordId);
+  });
+
+  const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
+    if (!allDimensionsSelected(selectDimensions)) {
+      setShowDimensionError(true);
+      return;
+    }
+    setShowDimensionError(false);
+    handleAddToCart(bopisInput);
+  };
+
+  const getInventoryLabel = (): string | null => {
+    const aggregate =
+      shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
+      shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+    if (aggregate) {
+      const { TotalAvailableInventoryLevelLabel } = aggregate;
+      return TotalAvailableInventoryLevelLabel || null;
+    }
+    return null;
+  };
+
+  return (
+    <DialogContent
+      sx={{
+        padding: 2,
+      }}
+    >
+      <Grid container spacing={3} justifyContent="space-around" mt={0}>
+        <Box height={"100%"} sx={{ marginTop: "auto", marginBottom: "auto" }}>
+          <ImageWithFallback
+            src={product.PrimaryImageUrl ?? ""}
+            alt={product.Name || "Product Image"}
+            width="300"
+            height="300"
+          />
+        </Box>
+        <Grid item md={6} xs={12} alignItems="center" p={4}>
+          <H1 mb={1}>{product.Name}</H1>
+          <FlexBox alignItems="center" mb={1}>
+            <H6>SKU: {product.ItemId}</H6>
+          </FlexBox>
+
+          {/* PRODUCT RATING */}
+          <FlexBox alignItems="center" gap={1} mb={2}>
+            <ProductRating rating={product.TotalRatings || 0} mb={1} />
+          </FlexBox>
+
+          {/* PRODUCT VARIANTS  */}
+          {productDetails ? (
+            <ProductDimensions
+              dimensionGroups={productDetails.DimensionValues}
+              selectDimensions={selectDimensions}
+              handleChangeVariant={handleChangeVariant}
+              showDimensionError={showDimensionError}
+            />
+          ) : null}
+
+          {/* PRODUCT PRICE & STOCK */}
+          <Box pt={1} mb={3}>
+            <H2 color="primary.main" mb={0.5} lineHeight="1">
+              {formatCurrency(product.Price)}
+            </H2>
+            <Box color="inherit">{}</Box>
+          </Box>
+
+          <Box sx={{ my: 3 }}>
+            {inventoryLoading ? (
+              <CircularProgress size={20} />
+            ) : (
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                fontWeight={600}
+              >
+                {getInventoryLabel()}
+              </Typography>
+            )}
+          </Box>
+
+          <Link
+            href={buildDetailUrl(product.Name ?? "", product.RecordId || 0)}
+          >
+            <Typography
+              sx={{
+                color: "primary.main",
+                "&:hover": {
+                  textDecoration: "underline",
+                },
+              }}
+            >
+              {t("seeFullDetails")}
+            </Typography>
+          </Link>
+
+          {/* ACTION BUTTONS */}
+          <Box sx={{ mt: 2 }}>
+            <QuantityButtons
+              loading={loading}
+              handleAddToCart={onAddToCart}
+              productCartLine={currentCartLine}
+              handleCartAmountChange={handleCartAmountChange}
+              isOOS={false}
+            />
+            <Button
+              color="primary"
+              variant="outlined"
+              size="small"
+              onClick={handleClose}
+              sx={{ height: 36.5, ml: 2, px: 4 }}
+            >
+              {t("close")}
+            </Button>
+          </Box>
+        </Grid>
+      </Grid>
+    </DialogContent>
+  );
+}