@evenicanpm/storefront-core 1.0.2 → 1.0.4

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

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import ProductsGridView from "./compound/products-grid-view";
+import ProductsListView from "./compound/products-list-view";
+// DATA MODEL
+import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
+
+export interface Props {
+  /** List of products to display */
+  products: Product[];
+  /** Pagination component */
+  pagination?: ReactNode;
+  /** Array of product pricing */
+  productPrices?: ProductPrice[];
+}
+
+/**
+ *
+ * Pre-composed implementation of ProductGrid
+ *
+ */
+export function ProductsGrid(props: Props) {
+  return (
+    <ProductsGridView {...props}>
+      <ProductsGridView.Grid>
+        <ProductsGridView.Card />
+      </ProductsGridView.Grid>
+    </ProductsGridView>
+  );
+}
+
+/**
+ *
+ * Pre-composed implementation of ProductList
+ *
+ */
+export function ProductsList(props: Props) {
+  return (
+    <ProductsListView {...props}>
+      <ProductsListView.List>
+        <ProductsListView.Card />
+      </ProductsListView.List>
+    </ProductsListView>
+  );
+}

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

@@ -0,0 +1,65 @@
+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 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";
+
+// ========================================================
+type Props = {
+  products: Product[];
+  pagination?: ReactNode;
+  productPrices?: ProductPrice[];
+};
+// ========================================================
+
+export default function ProductsGridView({
+  products,
+  pagination,
+  productPrices,
+}: Props) {
+  return (
+    <Fragment>
+      <Grid container spacing={3}>
+        {products.map((item: Product) => {
+          const matchingPrice = productPrices?.find(
+            (price) => price.ProductId === item.RecordId,
+          );
+          return (
+            <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
+              <ProductCardPlp
+                key={item.RecordId}
+                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>
+          );
+        })}
+      </Grid>
+      <FlexBetween flexWrap="wrap" mt={6}>
+        {pagination}
+      </FlexBetween>
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { ReactNode } from "react";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
+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";
+
+// ==========================================================
+type Props = {
+  products: Product[];
+  pagination?: ReactNode;
+  productPrices?: ProductPrice[];
+};
+// ==========================================================
+
+export default function ProductsListView({
+  products,
+  pagination,
+  productPrices,
+}: Props) {
+  return (
+    <div>
+      {products.map((item) => {
+        const matchingPrice = productPrices?.find(
+          (price) => price.ProductId === item.RecordId,
+        );
+        return (
+          <ProductCardPlpList
+            key={item.RecordId}
+            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>
+        );
+      })}
+
+      <FlexBetween flexWrap="wrap" mt={4}>
+        {pagination}
+      </FlexBetween>
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { default } from "./progress";

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

@@ -0,0 +1,77 @@
+// https://github.com/apal21/nextjs-progressbar/issues/86
+
+"use client";
+import { useEffect } from "react";
+import NProgress from "nprogress";
+import useTheme from "@mui/material/styles/useTheme";
+import GlobalStyles from "@mui/material/GlobalStyles";
+
+import "nprogress/nprogress.css";
+
+type PushStateInput = [
+  data: string,
+  unused: string,
+  url?: string | URL | null | undefined,
+];
+
+export default function ProgressBar() {
+  const theme = useTheme();
+
+  useEffect(() => {
+    NProgress.configure({ showSpinner: false });
+
+    const handleAnchorClick = (event: Event) => {
+      const targetUrl = (event.currentTarget as HTMLAnchorElement).href;
+      const currentUrl = location.href;
+      if (targetUrl !== currentUrl) {
+        NProgress.start();
+      }
+    };
+
+    const handleMutation: MutationCallback = () => {
+      const anchorElements = document.querySelectorAll("a[href]");
+      anchorElements.forEach((anchor) =>
+        anchor.addEventListener("click", handleAnchorClick),
+      );
+    };
+
+    const mutationObserver = new MutationObserver(handleMutation);
+    mutationObserver.observe(document, { childList: true, subtree: true });
+
+    window.history.pushState = new Proxy(window.history.pushState, {
+      apply: (target, thisArg, argArray: PushStateInput) => {
+        NProgress.done();
+        return target.apply(thisArg, argArray);
+      },
+    });
+  });
+
+  return (
+    <GlobalStyles
+      styles={{
+        "#nprogress": {
+          pointerEvents: "none",
+          ".bar": {
+            top: 0,
+            left: 0,
+            height: 2,
+            width: "100%",
+            position: "fixed",
+            zIndex: 9999999999,
+            background: theme.palette.primary.main,
+          },
+          ".peg": {
+            right: 0,
+            opacity: 1,
+            width: 100,
+            height: "100%",
+            display: "block",
+            boxShadow: "none",
+            position: "absolute",
+            transform: "rotate(3deg) translate(0px, -4px)",
+          },
+        },
+      }}
+    />
+  );
+}

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

@@ -0,0 +1 @@
+export { default } from "./scrollbar";

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

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+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";
+
+// =============================================================
+interface ScrollbarProps extends Props {
+  autoHide?: boolean;
+  sx?: SxProps<Theme>;
+  children: ReactNode;
+}
+// =============================================================
+
+export default function Scolbar({
+  children,
+  autoHide = true,
+  sx,
+  ...props
+}: ScrollbarProps) {
+  return (
+    <StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
+      {children}
+    </StyledScrollBar>
+  );
+}

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

@@ -0,0 +1,15 @@
+"use client";
+
+import { alpha, styled } from "@mui/material/styles";
+import SimpleBar from "simplebar-react";
+
+export 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" },
+}));

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;