@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

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

@@ -0,0 +1,205 @@
+import { FlexBox } from "@evenicanpm/storefront-core/src/components/_components/flex-box";
+import {
+  H1,
+  H2,
+  H6,
+} from "@evenicanpm/storefront-core/src/components/_components/Typography";
+// import ImageWithFallback from "@app/_shared/ImageWithFallback";
+import ImageWithFallback from "@evenicanpm/storefront-core/src/components/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 "@/hooks/use-cart";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import ProductDimensions from "@/components/_components/product-dimensions/product-dimensions";
+import QuantityButtons from "@/components/_components/product-quantity-buttons/product-quantity-buttons";
+import useVariants from "@/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>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { CircularProgress, Dialog, DialogContent } from "@mui/material";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
+import getProductById from "@/api-manager/services/product/queries/get-product-by-id";
+import QuickViewContent from "./quick-view-dialog-content";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+  product: ProductSearchResult;
+}
+
+export default function QuickView({ open, handleClose, product }: Props) {
+  if (!open) {
+    return;
+  }
+
+  const { data: cart } = getCart.useData();
+  const { data: productDetails } = getProductById.useData({
+    id: product.RecordId,
+  });
+
+  return (
+    <Dialog
+      fullWidth={true}
+      maxWidth="md"
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="quick-view-dialog-title"
+    >
+      {cart && productDetails ? (
+        <QuickViewContent
+          product={product}
+          cart={cart}
+          productDetails={productDetails}
+          handleClose={handleClose}
+        />
+      ) : (
+        <DialogContent
+          sx={{
+            padding: 2,
+            width: "100%",
+            height: "200px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <CircularProgress size={20} sx={{ width: "200px" }} />
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,125 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Box, Typography, Slider, TextField } from "@mui/material";
+import { RenderedFacetProps } from "./facet-group";
+import {
+  ProductRefinerSource,
+  ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
+import React from "react";
+
+type Props = RenderedFacetProps & {
+  selectedValues?: ProductRefinerValue;
+};
+export default function RangeFilter({
+  facet,
+  handleRefinerSelect,
+  selectedValues,
+}: Props) {
+  const getMinValForSlider = () => {
+    const item = facet.Values?.[0];
+    if (item) {
+      return Number(item.LeftValueBoundString);
+    }
+    return 0;
+  };
+
+  const getMaxValForSlider = () => {
+    const item = facet.Values?.[0];
+    if (item) {
+      return Number(item.RightValueBoundString);
+    }
+    return 0;
+  };
+  const [minVal, setMinVal] = useState<number>(getMinValForSlider());
+  const [maxVal, setMaxVal] = useState<number>(getMaxValForSlider());
+  const [textMin, setTextMin] = useState<number>(getMinValForSlider());
+  const [textMax, setTextMax] = useState<number>(getMaxValForSlider());
+  const [selected, setSelected] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (selectedValues) {
+      setMinVal(Number(selectedValues.LeftValueBoundString));
+      setMaxVal(Number(selectedValues.RightValueBoundString));
+      setTextMin(Number(selectedValues.LeftValueBoundString));
+      setTextMax(Number(selectedValues.RightValueBoundString));
+    } else {
+    }
+  }, [selectedValues]);
+
+  useEffect(() => {
+    // debouncing
+    const request = setTimeout(pushPriceFilter, 600);
+    return () => clearTimeout(request);
+  });
+
+  const handleSliderChange = (_: Event, newValue: number | number[]) => {
+    if (Array.isArray(newValue)) {
+      setMinVal(Number(newValue[0]));
+      setTextMin(Number(newValue[0]));
+      setMaxVal(Number(newValue[1]));
+      setTextMax(Number(newValue[1]));
+      setSelected(true);
+    }
+  };
+
+  const handleTextMin = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const val = Number(evt.target.value);
+    setTextMin(val);
+    setMinVal(val);
+    setSelected(true);
+  };
+
+  const handleTextMax = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const val = Number(evt.target.value);
+    setTextMax(val);
+    setMaxVal(val);
+    setSelected(true);
+  };
+
+  const pushPriceFilter = () => {
+    if (selected) {
+      const refiner: ProductRefinerValue = {
+        RefinerRecordId: 0,
+        RefinerSourceValue: ProductRefinerSource.Price,
+        LeftValueBoundString: minVal.toString(),
+        RightValueBoundString: maxVal.toString(),
+        DataTypeValue: 1,
+      };
+      handleRefinerSelect(refiner);
+    }
+  };
+
+  return (
+    <Box mb={3}>
+      <Slider
+        min={getMinValForSlider()}
+        max={getMaxValForSlider()}
+        size="small"
+        value={[minVal, maxVal]}
+        valueLabelDisplay="auto"
+        onChange={handleSliderChange}
+      />
+      <Box display="flex" gap={1} alignItems="center">
+        <TextField
+          fullWidth
+          size="small"
+          type="number"
+          label="Min"
+          value={textMin}
+          onChange={handleTextMin}
+        />
+        <Typography>-</Typography>
+        <TextField
+          fullWidth
+          size="small"
+          type="number"
+          label="Max"
+          value={textMax}
+          onChange={handleTextMax}
+        />
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import { SxProps, Theme } from "@mui/material/styles";
+import { Props } from "simplebar-react";
+import "simplebar-react/dist/simplebar.min.css";
+import { alpha, styled } from "@mui/material/styles";
+import SimpleBar from "simplebar-react";
+
+// =============================================================
+interface ScrollbarProps extends Props {
+  autoHide?: boolean;
+  sx?: SxProps<Theme>;
+  children: ReactNode;
+}
+// =============================================================
+
+const StyledScrollBar = styled(SimpleBar)(({ theme }) => ({
+  maxHeight: "100%",
+  "& .simplebar-scrollbar": {
+    "&.simplebar-visible:before": { opacity: 1 },
+    "&:before": { backgroundColor: alpha(theme.palette.grey[400], 0.6) },
+  },
+  "& .simplebar-track.simplebar-vertical": { width: 9 },
+  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": { height: 6 },
+  "& .simplebar-mask": { zIndex: "inherit" },
+}));
+
+export default function Scrollbar({
+  children,
+  autoHide = true,
+  sx,
+  ...props
+}: ScrollbarProps) {
+  return (
+    <StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
+      {children}
+    </StyledScrollBar>
+  );
+}

package/src/pages/product-list/search-bar.tsx

@@ -0,0 +1,162 @@
+"use client";
+import {
+  Box,
+  MenuItem,
+  Typography,
+  ToggleButtonGroup,
+  ToggleButton,
+  TextField,
+} from "@mui/material";
+import Apps from "@mui/icons-material/Apps";
+import ViewList from "@mui/icons-material/ViewList";
+import FilterList from "@mui/icons-material/FilterList";
+import IconButton from "@mui/material/IconButton";
+import { Theme } from "@mui/material/styles";
+import { ViewMode } from "./utils/product-list-types";
+import useProductList from "./use-product-list";
+import { useTranslations } from "next-intl";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Sidenav from "./side-nav";
+import React from "react";
+
+const sxView = {
+  display: "flex",
+  border: "none",
+  "& button": {
+    border: "none",
+    borderTopRightRadius: "50% !important",
+    borderBottomRightRadius: "50% !important",
+    borderTopLeftRadius: "50% !important",
+    borderBottomLeftRadius: "50% !important",
+  },
+};
+
+interface SearchBarProps {
+  children?: React.ReactNode;
+}
+
+const SearchBar = ({ children }: SearchBarProps) => {
+  const {
+    itemsPerPage,
+    sortOptions,
+    selectedSort,
+    view,
+    paramHandlers: { handleSortChange, handleViewChange, handlePerPageChange },
+  } = useProductList();
+  const t = useTranslations("ProductList.SearchBar");
+  const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("md"));
+
+  const handleSelectedOption = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const codeSelection = e.target.value;
+    const optionSelection = sortOptions.find(
+      (option) => option.code === codeSelection,
+    );
+    if (optionSelection !== undefined) {
+      handleSortChange(optionSelection);
+    }
+  };
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      columnGap={4}
+      flexWrap="wrap"
+      justifyContent={downMd ? "flex-start" : "flex-end"}
+    >
+      <Box display="flex" alignItems="center" gap={1} flex="1 1 0" pb={1}>
+        <Typography color="grey.600" whiteSpace="pre">
+          Per page:
+        </Typography>
+
+        <TextField
+          select
+          fullWidth
+          size="small"
+          value={itemsPerPage}
+          variant="outlined"
+          placeholder="Sort by"
+          onChange={(e) => handlePerPageChange(Number(e.target.value))}
+          sx={{ flex: "1 1 0", minWidth: "150px" }}
+        >
+          <MenuItem value={20}>20</MenuItem>
+          <MenuItem value={50}>50</MenuItem>
+          <MenuItem value={100}>100</MenuItem>
+        </TextField>
+      </Box>
+
+      <Box display="flex" alignItems="center" gap={1} flex="1 1 0" pb={1}>
+        <Typography color="grey.600" whiteSpace="pre">
+          Sort by:
+        </Typography>
+
+        <TextField
+          select
+          fullWidth
+          size="small"
+          value={selectedSort}
+          variant="outlined"
+          placeholder="Sort by"
+          onChange={handleSelectedOption}
+          sx={{ flex: "1 1 0", minWidth: "150px" }}
+        >
+          {sortOptions.map((option) => (
+            <MenuItem key={option.code} value={option.code}>
+              {option.displayName}
+            </MenuItem>
+          ))}
+        </TextField>
+      </Box>
+
+      <Box display="flex" alignItems="center" my="0.25rem" pb={1}>
+        <Typography color="grey.600" mr={1}>
+          View:
+        </Typography>
+
+        <ToggleButtonGroup
+          exclusive
+          value={view}
+          onChange={(_e, value: ViewMode) => handleViewChange(value)}
+          sx={sxView}
+        >
+          <ToggleButton
+            value="grid"
+            aria-label={t("gridView")}
+            title={t("gridView")}
+          >
+            <Apps
+              fontSize="small"
+              color={view === "grid" ? "primary" : "inherit"}
+            />
+          </ToggleButton>
+          <ToggleButton
+            value="list"
+            aria-label={t("listView")}
+            title={t("listView")}
+          >
+            <ViewList
+              fontSize="small"
+              color={view === "list" ? "primary" : "inherit"}
+            />
+          </ToggleButton>
+        </ToggleButtonGroup>
+
+        {/* SHOW IN THE SMALL DEVICE */}
+        {downMd && (
+          <Sidenav
+            handler={(close) => (
+              <IconButton onClick={close}>
+                <FilterList fontSize="small" />
+              </IconButton>
+            )}
+          >
+            <Box px={3} py={2}>
+              {children}
+            </Box>
+          </Sidenav>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default SearchBar;

package/src/pages/product-list/selected-facets.tsx

@@ -0,0 +1,80 @@
+import {
+  ProductRefinerSource,
+  ProductRefinerValue,
+} from "@msdyn365-commerce/retail-proxy";
+import { Button, Chip, Stack } from "@mui/material";
+import { Paragraph } from "@/components/_components/Typography";
+import React, { useState, useEffect } from "react";
+import useProductList from "./use-product-list";
+import { useTranslations } from "next-intl";
+
+export default function SelectedFacets() {
+  const t = useTranslations("ProductList.Facets");
+  const {
+    selectedRefiners,
+    productData,
+    paramHandlers: { handleRefinerChange, handleRefinersClear },
+  } = useProductList();
+
+  const refiners = productData?.refiners;
+  const [lastRefiners, setLastRefiners] = useState<typeof refiners>([]);
+
+  useEffect(() => {
+    if (refiners && refiners.length > 0) {
+      setLastRefiners(refiners);
+    }
+  }, [refiners]);
+
+  const getRefinerLabel = (refiner: ProductRefinerValue) => {
+    const refinerRecord = lastRefiners?.find(
+      (r) => r.RecordId === refiner.RefinerRecordId,
+    );
+
+    // RefinerRecordId for some filters is sent as 0 instead of valid value.
+    // category refiner RecordId in lastRefiners is 0 but here (RefinerRecordId) its a valid value.
+    if (!refinerRecord || refiner.RefinerRecordId === 0) {
+      const sourceValue = refiner.RefinerSourceValue;
+
+      const sourceLabel = ProductRefinerSource[sourceValue ?? 0];
+
+      if (
+        sourceLabel !== undefined &&
+        sourceValue !== ProductRefinerSource.Attribute
+      ) {
+        return sourceLabel;
+      }
+    }
+
+    return refinerRecord?.KeyName ?? "Unknown"; // use this to avoid undefined.
+  };
+
+  const getRefinerValue = (refiner: ProductRefinerValue) => {
+    if (refiner.RefinerSourceValue === ProductRefinerSource.Price) {
+      return `${refiner.LeftValueBoundString} - ${refiner.RightValueBoundString}`;
+    }
+    if (refiner.RefinerSourceValue === ProductRefinerSource.Rating) {
+      return `${refiner.LeftValueBoundString} stars and up`;
+    }
+    return (
+      refiner.LeftValueBoundLocalizedString || refiner.LeftValueBoundString
+    );
+  };
+
+  return (
+    <Stack direction={"row"} spacing={2}>
+      {selectedRefiners.map((refiner) => (
+        <Chip
+          key={`${refiner.RefinerRecordId}-${refiner.LeftValueBoundString}`}
+          title={refiner.LeftValueBoundString}
+          label={`${getRefinerLabel(refiner)}: ${getRefinerValue(refiner)}`}
+          onDelete={() => handleRefinerChange(refiner)}
+        />
+      ))}
+      {selectedRefiners.length > 0 ? (
+        <Button variant={"text"} sx={{ ml: 2 }} onClick={handleRefinersClear}>
+          <Paragraph>{t("clearAll")}</Paragraph>
+        </Button>
+      ) : undefined}
+    </Stack>
+  );
+}