@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/components-v2/products-view/products-grid-view.tsx

@@ -2,7 +2,7 @@ import { Fragment, ReactNode } from "react";
 import Grid from "@mui/material/Grid2";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import ProductCard16 from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-16/product-card";
+import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/product-card";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import { ProductPrice } from "@/api-manager/schemas/product.schema";
@@ -29,17 +29,30 @@ export default function ProductsGridView({
           );
           return (
             <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
-              <ProductCard16
-                id={item.RecordId}
+              <ProductCardPlp
                 key={item.RecordId}
-                slug={item.ItemId ?? ""}
-                title={item.Name ?? ""}
-                price={matchingPrice?.CustomerContextualPrice ?? 0}
-                discount={0} // Need to get discount info for product.
-                rating={item.TotalRatings ?? 0}
-                imgUrl={item.PrimaryImageUrl ?? ""}
-                showAddToCart={false}
-              />
+                product={{
+                  title: item.Name ?? "",
+                  slug: item.ItemId ?? "",
+                  price: matchingPrice?.CustomerContextualPrice ?? 0,
+                  imgUrl: item.PrimaryImageUrl ?? "",
+                  rating: item.TotalRatings ?? 0,
+                  discount: 0, // Need to get discount info for product.
+                  id: item.RecordId,
+                }}
+              >
+                <ProductCardPlp.Image />
+                <ProductCardPlp.Body>
+                  <ProductCardPlp.Info>
+                    <ProductCardPlp.Title />
+                    <ProductCardPlp.Rating />
+                    <ProductCardPlp.Price />
+                  </ProductCardPlp.Info>
+                  {/* <ProductCardPlp.Actions>
+                    <ProductCardPlp.QuantityButtons />
+                  </ProductCardPlp.Actions> */}
+                </ProductCardPlp.Body>
+              </ProductCardPlp>
             </Grid>
           );
         })}

package/src/components-v2/products-view/products-list-view.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
-import { ProductCard9 } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-9/index";
+import { ProductCardPlpList } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/index";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import { ProductPrice } from "@/api-manager/schemas/product.schema";
@@ -26,18 +26,35 @@ export default function ProductsListView({
           (price) => price.ProductId === item.RecordId,
         );
         return (
-          <ProductCard9
-            id={item.RecordId}
+          <ProductCardPlpList
             key={item.RecordId}
-            slug={item.ItemId ?? ""}
-            title={item.Name ?? ""}
-            price={matchingPrice?.CustomerContextualPrice ?? 0}
-            off={0} // Need to get discount info for product.
-            rating={item.TotalRatings ?? 0}
-            imgUrl={item.PrimaryImageUrl ?? ""}
-            showAddToCart={false}
-            showFavorite={false}
-          />
+            product={{
+              id: item.RecordId,
+              title: item.Name ?? "",
+              slug: item.ItemId ?? "",
+              price: matchingPrice?.CustomerContextualPrice ?? 0,
+              imgUrl: item.PrimaryImageUrl ?? "",
+              rating: item.TotalRatings ?? 0,
+              discount: 0, // Need to get discount info for product.,
+              //tags: ["Bike", "Motor", "Ducati"], // Example tags
+            }}
+          >
+            {/* <ProductCardPlpList.FavoriteButton /> */}
+            <ProductCardPlpList.Body>
+              <ProductCardPlpList.Image />
+              <ProductCardPlpList.Content>
+                <ProductCardPlpList.Info>
+                  {/* <ProductCardPlpList.Tags /> */}
+                  <ProductCardPlpList.Title />
+                  <ProductCardPlpList.Price />
+                  <ProductCardPlpList.Rating />
+                </ProductCardPlpList.Info>
+                {/* <ProductCardPlpList.Actions>
+                  <ProductCardPlpList.QuantityButtons />
+                </ProductCardPlpList.Actions> */}
+              </ProductCardPlpList.Content>
+            </ProductCardPlpList.Body>
+          </ProductCardPlpList>
         );
       })}
 

package/src/components-v2/progress/index.ts

@@ -1 +1 @@
-export { default } from "./progress";
+export { default } from "@evenicanpm/storefront-core/src/components-v2/progress/progress";

package/src/components-v2/scrollbar/index.ts

@@ -1 +1 @@
-export { default } from "./scrollbar";
+export { default } from "@evenicanpm/storefront-core/src/components-v2/scrollbar/scrollbar";

package/src/components-v2/scrollbar/scrollbar.tsx

@@ -3,7 +3,7 @@ import { SxProps, Theme } from "@mui/material/styles";
 import { Props } from "simplebar-react";
 import "simplebar-react/dist/simplebar.min.css";
 // STYLED COMPONENT
-import { StyledScrollBar } from "./styles";
+import { StyledScrollBar } from "@evenicanpm/storefront-core/src/components-v2/scrollbar/styles";
 
 // =============================================================
 interface ScrollbarProps extends Props {

package/src/components-v2/search-bar/compound/context.ts

@@ -0,0 +1,31 @@
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { createContext } from "react";
+import { FormEvent } from "react";
+
+/**
+ * @category Context
+ * @internal
+ */
+export interface SearchBarContext {
+  state: {
+    resultsOpen: boolean;
+    searchText: string;
+    searchCategory: number;
+  };
+  setters: {
+    setResultsOpen: (open: boolean) => void;
+  };
+  handlers: {
+    handleNavigate: () => void;
+    handleCategoryChange: (categoryId: number) => void;
+    handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
+    handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  };
+  handleCloseDrawer: () => void;
+}
+export const SearchContext = createContext<SearchBarContext>(null);
+
+/**
+ * @internal
+ */
+export const SearchResultItemContext = createContext<ProductSearchResult>(null);

package/src/components-v2/search-bar/compound/results-item-lg.tsx

@@ -0,0 +1,46 @@
+/**
+ * @module SearchBar
+ */
+import React, { useContext } from "react";
+import Grid from "@mui/material/Grid";
+import ProductCardSearch from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-search";
+import {
+  SearchContext,
+  SearchResultItemContext,
+} from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+
+/**
+ * Large, vertical result item card, used for desktop view.
+ * @category Sub-Component
+ */
+export default function ResultItemLg() {
+  const { handleCloseDrawer } = useContext(SearchContext);
+  const item = useContext(SearchResultItemContext);
+
+  return (
+    <Grid item xs={12} sm={6} md={4} onClick={handleCloseDrawer}>
+      <ProductCardSearch
+        product={{
+          slug: item.ItemId ?? "",
+          price: item.Price,
+          title: item.Name ?? "",
+          thumbnail: item.PrimaryImageUrl ?? "",
+          id: item.RecordId ?? "",
+          rating: item.AverageRating ?? 0,
+          reviews: item.TotalRatings ?? 0,
+          categories: [], // TODO: Category info not available in item
+        }}
+      >
+        <ProductCardSearch.CardMedia>
+          <ProductCardSearch.Image />
+        </ProductCardSearch.CardMedia>
+        <ProductCardSearch.Info>
+          <ProductCardSearch.Category />
+          <ProductCardSearch.Title />
+          <ProductCardSearch.Price />
+          <ProductCardSearch.Rating />
+        </ProductCardSearch.Info>
+      </ProductCardSearch>
+    </Grid>
+  );
+}

package/src/components-v2/search-bar/compound/results-item-sm.tsx

@@ -0,0 +1,51 @@
+/**
+ * @module SearchBar
+ */
+import React, { useContext } from "react";
+import NavLink from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
+import MenuItem from "@mui/material/MenuItem";
+import { getProductDetailUrl } from "@/lib/build-product-detail-url";
+import { Box, Grid } from "@mui/material";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import {
+  H4,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { currency } from "@/lib/lib";
+import {
+  SearchContext,
+  SearchResultItemContext,
+} from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+
+/**
+ * Small, horizontal result item card, used for mobile view.
+ * @category Sub-Component
+ */
+export default function ResultItemSm() {
+  const { handleCloseDrawer } = useContext(SearchContext);
+  const item = useContext(SearchResultItemContext);
+
+  return (
+    <Grid item xs={12}>
+      <MenuItem onClick={handleCloseDrawer}>
+        <NavLink href={getProductDetailUrl(item)} key={item.RecordId}>
+          <Box display="flex" alignItems="center">
+            <Box position="relative" height={130} width={130}>
+              <LazyImage
+                height={300}
+                width={300}
+                alt="product"
+                className="product-img"
+                src={item.PrimaryImageUrl ?? ""}
+              />
+            </Box>
+            <Box flex="1" ml={2} whiteSpace="normal">
+              <H4>{item.Name}</H4>
+              <Span>{currency(item.Price)}</Span>
+            </Box>
+          </Box>
+        </NavLink>
+      </MenuItem>
+    </Grid>
+  );
+}

package/src/components-v2/search-bar/compound/results-suspense.tsx

@@ -0,0 +1,49 @@
+/**
+ * @module SearchBar
+ */
+"use client";
+
+import React, { Suspense, useContext } from "react";
+import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import { CircularProgress } from "@mui/material";
+import SearchResult from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results";
+import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
+import ResultItemCardLg from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results-item-lg";
+import ResultItemCardSm from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results-item-sm";
+
+import _ from "lodash";
+
+/**
+ * useSuspenseQuery will instantly suspend component fallback to
+ * suspense boundary above.
+ * Therefore, we cannot handle the suspense fallback state
+ * inside SearchResult, we have to use this wrapper.
+ *
+ * @category Sub-Component
+ */
+export default function SearchResultSuspense({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { state } = useContext(SearchContext);
+  return (
+    <Suspense
+      fallback={
+        <SearchResultCard sx={{ display: "flex", justifyContent: "center" }}>
+          <CircularProgress
+            size={15}
+            sx={{ marginTop: "1rem", marginBottom: "1rem" }}
+          />
+        </SearchResultCard>
+      }
+    >
+      {state.searchText && state.resultsOpen && (
+        <SearchResult>{children}</SearchResult>
+      )}
+    </Suspense>
+  );
+}
+
+SearchResultSuspense.ItemCardLg = ResultItemCardLg;
+SearchResultSuspense.ItemCardSm = ResultItemCardSm;

package/src/components-v2/search-bar/compound/results.tsx

@@ -0,0 +1,45 @@
+/**
+ * @module SearchBar
+ */
+import React, { useContext } from "react";
+import { useTranslations } from "next-intl";
+import searchProducts from "@/services/product/queries/search-products";
+import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
+import {
+  SearchContext,
+  SearchResultItemContext,
+} from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import Grid from "@mui/material/Grid";
+
+/**
+ * Search Results Container that handles mapping items and styles of the containing box.
+ * @category Sub-Component
+ */
+export default function SearchResultsContainer({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const t = useTranslations();
+  const { state } = useContext(SearchContext);
+  const { data: results } = searchProducts.useSuspenseData({
+    searchText: state.searchText,
+    category: state.searchCategory,
+  });
+
+  if (results.length === 0) {
+    return <SearchResultCard>{t("Search.noResults")}</SearchResultCard>;
+  }
+
+  return (
+    <SearchResultCard>
+      <Grid container>
+        {results.map((item, i) => (
+          <SearchResultItemContext.Provider value={item} key={i}>
+            {children}
+          </SearchResultItemContext.Provider>
+        ))}
+      </Grid>
+    </SearchResultCard>
+  );
+}

package/src/components-v2/search-bar/compound/search-bar-root.tsx

@@ -0,0 +1,64 @@
+/**
+ * @module SearchBar
+ */
+"use client";
+import React, { useRef } from "react";
+import Box from "@mui/material/Box";
+
+// local hooks
+import useSearch from "@evenicanpm/storefront-core/src/components-v2/search-bar/hooks/use-search";
+import { useClickOutside } from "@evenicanpm/storefront-core/src/components-v2/search-bar/hooks/use-click-outside";
+
+// contexts
+import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+
+// components
+import SearchResultSuspense from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results-suspense";
+import TextField from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield";
+
+import _ from "lodash";
+
+interface Props {
+  handleCloseDrawer?: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Search input with a category filter.
+ * @category Compound Component
+ * @example
+ * <SearchBar handleCloseDrawer={handleCloseDrawer}>
+ *   <SearchBar.TextField />
+ *   <SearchBar.Results>
+ *     <SearchBar.Results.ItemCardLg />
+ *   </SearchBar.Results>
+ * </SearchBar>
+ *
+ */
+export default function SearchBarRoot({ handleCloseDrawer, children }: Props) {
+  const { setters, handlers, state } = useSearch();
+  const inputRef = useRef(null);
+  useClickOutside(inputRef, () => setters.setResultsOpen(false));
+
+  return (
+    <SearchContext.Provider
+      value={{ setters, handlers, state, handleCloseDrawer }}
+    >
+      <Box
+        position="relative"
+        flex="1 1 0"
+        maxWidth="670px"
+        mx="auto"
+        onClick={() => {
+          setters.setResultsOpen(true);
+        }}
+        ref={inputRef}
+      >
+        {children}
+      </Box>
+    </SearchContext.Provider>
+  );
+}
+
+SearchBarRoot.TextField = TextField;
+SearchBarRoot.Results = SearchResultSuspense;

package/src/components-v2/search-bar/compound/textfield-adornment-button.tsx

@@ -0,0 +1,22 @@
+/**
+ * @module SearchBar
+ */
+import Button from "@mui/material/Button";
+
+/**
+ * @category Sub-Component
+ */
+const AdornmentButton = ({ label }: { label: string }) => {
+  return (
+    <Button
+      color="primary"
+      disableElevation
+      variant="contained"
+      type="submit"
+      sx={{ px: "3rem", height: "100%", borderRadius: "0 4px 4px 0" }}
+    >
+      {label}
+    </Button>
+  );
+};
+export default AdornmentButton;

package/src/components-v2/{search-box/components/category-dropdown.tsx → search-bar/compound/textfield-adornment-category.tsx}

@@ -1,32 +1,54 @@
+/**
+ * @module SearchBar
+ */
 "use client";
 import React from "react";
 import MenuItem from "@mui/material/MenuItem";
 import TouchRipple from "@mui/material/ButtonBase";
 import useTheme from "@mui/material/styles/useTheme";
+import getCategories from "@/services/categories/queries/get-categories";
 import { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
-
+import { findCategoryNameById } from "@evenicanpm/storefront-core/src/components-v2/search-bar/utils/findCategoryNameById";
 import Menu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
-import { DropDownHandler } from "../styles/index";
-import { CategoryHierarchy } from "@/lib/category-helpers";
-
+import { DropDownHandler } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
+import { useTranslations } from "next-intl";
 type DisplayCategory = {
   name: string;
   id: number;
 };
-interface Props {
-  title: string;
+
+/**
+ * @category Props
+ */
+export interface CategoryDropdownProps {
+  /** The currently selected category id, "All" by default. Used to filter typeahead search query. */
+  selectedCategoryId: number;
+  /** A handler to call when the category is changed. In this case will be changing the state that is held in top-level context */
   handleChange: (categoryId: number) => void;
-  categories: CategoryHierarchy[];
 }
 
-const CategoryDropdown = ({ title, handleChange, categories }: Props) => {
+/**
+ * Category Dropdown filter for SearchBar. Selecting a category
+ * will filter the search query.
+ *
+ * @category Sub-Component
+ */
+const CategoryDropdown = ({
+  selectedCategoryId,
+  handleChange,
+}: CategoryDropdownProps) => {
+  const { data: categories } = getCategories.useSuspenseData();
+  const t = useTranslations();
   const { breakpoints } = useTheme();
+
   const _categories = Array.isArray(categories) ? categories : [];
   const options: DisplayCategory[] = [
     ..._categories.map((cat) => ({ name: cat?.Name ?? "", id: cat.RecordId })),
     { name: "All Categories", id: 0 },
   ]; // add all categories option
 
+  const title = findCategoryNameById(selectedCategoryId, categories, t);
+
   return (
     <>
       <Menu

package/src/components-v2/search-bar/compound/textfield-adornment-search-icon.tsx

@@ -0,0 +1,34 @@
+/**
+ * @module SearchBar
+ */
+import Box from "@mui/material/Box";
+import { IconButton } from "@mui/material";
+import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
+
+interface Props {
+  handleNavigate: () => void;
+}
+
+/**
+ * Search icon that appears in the left adornment slot of search-box
+ * @category Sub-Component
+ */
+const AdornmentSearchIcon = ({ handleNavigate }: Props) => {
+  return (
+    <Box
+      mr={1}
+      px={1}
+      display="grid"
+      alignItems="center"
+      justifyContent="center"
+      borderRight="1px solid"
+      borderColor="grey.400"
+    >
+      <IconButton onClick={handleNavigate}>
+        <Search sx={{ fontSize: 17, color: "grey.600" }} />
+      </IconButton>
+    </Box>
+  );
+};
+
+export default AdornmentSearchIcon;

package/src/components-v2/search-bar/compound/textfield.tsx

@@ -0,0 +1,58 @@
+/**
+ * @module SearchBar
+ */
+"use client";
+import React, { useContext } from "react";
+import TextField from "@mui/material/TextField";
+
+import SearchIconAdornment from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-search-icon";
+import AdornmentButton from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-button";
+import CategoryDropdown from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-category";
+
+import { INPUT_SX } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
+import { useTheme, useMediaQuery } from "@mui/material";
+import _ from "lodash";
+import { useTranslations } from "next-intl";
+import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+
+/**
+ * The actual input field for the search bar.
+ * Adornment will change based on media query width -
+ * Categories filter for desktop and search button for mobile.
+ * @category Sub-Component
+ */
+export default function SearchBarTextField() {
+  const { handlers, state } = useContext(SearchContext);
+  const t = useTranslations();
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down(1150));
+
+  const endAdornment = downMd ? (
+    <AdornmentButton label={t("Search.searchBtn")} />
+  ) : (
+    <CategoryDropdown
+      selectedCategoryId={state.searchCategory}
+      handleChange={handlers.handleCategoryChange}
+    />
+  );
+
+  return (
+    <form onSubmit={handlers.handleSubmit}>
+      <TextField
+        fullWidth
+        variant="outlined"
+        placeholder={t("Search.searchPlaceholder")}
+        onChange={handlers.handleSearch}
+        slotProps={{
+          input: {
+            sx: INPUT_SX,
+            startAdornment: (
+              <SearchIconAdornment handleNavigate={handlers.handleNavigate} />
+            ),
+            endAdornment: endAdornment,
+          },
+        }}
+      />
+    </form>
+  );
+}

package/src/components-v2/search-bar/hooks/use-click-outside.ts

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+/**
+ * Detect if clicks are outside of an element in an ref
+ */
+export const useClickOutside = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void,
+) => {
+  useEffect(() => {
+    const handleClick = (e: PointerEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) callback();
+    };
+
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, [ref, callback]);
+};