@evenicanpm/storefront-core 1.0.3 → 1.0.4

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/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,43 @@
+/**
+ * @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 "./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,48 @@
+/**
+ * @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 "./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 "./context";
+import { CircularProgress } from "@mui/material";
+import SearchResult from "./results";
+import { SearchResultCard } from "../styles/index";
+import ResultItemCardLg from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results-item-lg";
+import ResultItemCardSm from "./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,42 @@
+/**
+ * @module SearchBar
+ */
+import React, { useContext } from "react";
+import { useTranslations } from "next-intl";
+import searchProducts from "@/services/product/queries/search-products";
+import { SearchResultCard } from "../styles/index";
+import { SearchContext, SearchResultItemContext } from "./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 "../hooks/use-search";
+import { useClickOutside } from "../hooks/use-click-outside";
+
+// contexts
+import { SearchContext } from "./context";
+
+// components
+import SearchResultSuspense from "./results-suspense";
+import TextField from "./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 "../utils/findCategoryNameById";
 import Menu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
 import { DropDownHandler } from "../styles/index";
-import { CategoryHierarchy } from "@/lib/category-helpers";
-
+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 "./textfield-adornment-search-icon";
+import AdornmentButton from "./textfield-adornment-button";
+import CategoryDropdown from "./textfield-adornment-category";
+
+import { INPUT_SX } from "../styles/index";
+import { useTheme, useMediaQuery } from "@mui/material";
+import _ from "lodash";
+import { useTranslations } from "next-intl";
+import { SearchContext } from "./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]);
+};

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

@@ -0,0 +1,63 @@
+"use client";
+import React, { FormEvent, useState } from "react";
+import { PageSlug } from "@/lib/page-slugs";
+import { PageKey } from "@/lib/product-list-types";
+
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+
+/**
+ * Handles all main logic and state for the search bar components.
+ */
+export default function useSearch() {
+  // State
+  const [resultsOpen, setResultsOpen] = useState(false);
+  const [searchText, setSearchText] = React.useState<string>("");
+  const [searchCategory, setSelectedCategory] = React.useState<number>(0);
+
+  // Hooks
+  const router = useRouter();
+
+  // Handlers
+  const handleCategoryChange = (categoryId: number) => {
+    setSelectedCategory(categoryId);
+  };
+
+  const handleNavigate = () => {
+    if (searchText.trim() === "") {
+      return;
+    }
+    const url = new URL(PageSlug.ProductList, window.location.origin);
+    url.searchParams.set(PageKey.SEARCH, searchText);
+    router.push(url.toString());
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    handleNavigate();
+    setResultsOpen(false);
+    setSearchText("");
+    setSelectedCategory(0);
+  };
+
+  const handleSearch = _.debounce((e) => {
+    setSearchText(e.target.value || "");
+  }, 500);
+
+  return {
+    state: {
+      resultsOpen,
+      searchText,
+      searchCategory,
+    },
+    setters: {
+      setResultsOpen,
+    },
+    handlers: {
+      handleNavigate,
+      handleCategoryChange,
+      handleSubmit,
+      handleSearch,
+    },
+  };
+}

package/src/components-v2/search-bar/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * @module SearchBar
+ */
+import SearchBar from "./compound/search-bar-root";
+
+interface Props {
+  handleCloseDrawer?: () => void;
+}
+
+/**
+ * @category Implementation
+ */
+export const SearchBarViewLg = ({ handleCloseDrawer }: Props) => {
+  return (
+    <SearchBar handleCloseDrawer={handleCloseDrawer}>
+      <SearchBar.TextField />
+      <SearchBar.Results>
+        <SearchBar.Results.ItemCardLg />
+      </SearchBar.Results>
+    </SearchBar>
+  );
+};
+
+/**
+ * @category Implementation
+ */
+export const SearchBarViewSm = ({ handleCloseDrawer }: Props) => {
+  return (
+    <SearchBar handleCloseDrawer={handleCloseDrawer}>
+      <SearchBar.TextField />
+      <SearchBar.Results>
+        <SearchBar.Results.ItemCardSm />
+      </SearchBar.Results>
+    </SearchBar>
+  );
+};

package/src/components-v2/{search-box → search-bar}/styles/index.ts

@@ -12,16 +12,18 @@ export const SearchOutlinedIcon = styled(SearchOutlined)(({ theme }) => ({
   marginRight: 6,
 }));
 
-export const SearchResultCard = styled(Card)({
+export const SearchResultCard = styled(Card)(({ theme }) => ({
   zIndex: 99,
   top: "100%",
   width: "100%",
+  overflowY: "auto",
   position: "absolute",
   paddingTop: "0.5rem",
   paddingBottom: "0.5rem",
   paddingLeft: "2rem",
   paddingRight: "2rem",
-});
+  [theme.breakpoints.up("md")]: { maxHeight: "80vH" },
+}));
 
 export const DropDownHandler = styled(Box)(({ theme }) => ({
   width: 160,
@@ -39,8 +41,8 @@ export const DropDownHandler = styled(Box)(({ theme }) => ({
 }));
 
 export const INPUT_SX = {
-  height: 44,
   padding: 0,
+  height: 44,
   overflow: "hidden",
   backgroundColor: "grey.200",
   "& .MuiOutlinedInput-notchedOutline": { border: 0 },