@evenicanpm/storefront-core 1.1.0 → 1.2.0

package/src/components/_components/search-box/components/category-dropdown.tsx

@@ -1,61 +0,0 @@
-"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 { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
-
-import Menu from "@evenicanpm/storefront-core/src/components/_components/BazaarMenu";
-import { DropDownHandler } from "../styles/index";
-import { CategoryHierarchy } from "@/lib/category-helpers";
-
-type DisplayCategory = {
-  name: string;
-  id: number;
-};
-interface Props {
-  title: string;
-  handleChange: (categoryId: number) => void;
-  categories: CategoryHierarchy[];
-}
-
-const CategoryDropdown = ({ title, handleChange, categories }: Props) => {
-  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
-
-  return (
-    <>
-      <Menu
-        direction="left"
-        sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
-        handler={(e) => (
-          <DropDownHandler as={TouchRipple} onClick={e}>
-            {title}
-            <KeyboardArrowDownOutlined fontSize="small" color="inherit" />
-          </DropDownHandler>
-        )}
-        options={(onClose) => {
-          return options
-            ?.filter((current: DisplayCategory) => current.name !== title)
-            .map((item: DisplayCategory) => (
-              <MenuItem
-                key={item.id}
-                onClick={() => {
-                  handleChange(item.id);
-                  onClose();
-                }}
-              >
-                {item.name}
-              </MenuItem>
-            ));
-        }}
-      />
-    </>
-  );
-};
-
-export default CategoryDropdown;

package/src/components/_components/search-box/components/search-result.tsx

@@ -1,83 +0,0 @@
-import React from "react";
-import NavLink from "@evenicanpm/storefront-core/src/components/_components/nav-link/nav-link";
-import MenuItem from "@mui/material/MenuItem";
-import { SearchResultCard } from "../styles/index";
-import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
-import { getProductDetailUrl } from "@/lib/build-product-detail-url";
-import { Box, Grid, useMediaQuery, useTheme } from "@mui/material";
-import LazyImage from "@/_components/LazyImage";
-import { H4, Span } from "@/_components/Typography";
-import { currency } from "@/lib/lib";
-import ProductCard8 from "@/_components/product-cards/product-card-8/product-card";
-import { DialogType } from "../search-input-category";
-
-interface Props {
-  results: ProductSearchResult[];
-  handleCloseDrawer?: () => void; // Close search drawer in mobile screen
-  openDialog: (type: DialogType, productId: number) => void;
-}
-
-export default function SearchResult({
-  results,
-  handleCloseDrawer,
-  openDialog,
-}: Props) {
-  const theme = useTheme();
-  const downMd = useMediaQuery(theme.breakpoints.down(1150));
-  return (
-    <SearchResultCard>
-      {downMd ? (
-        <>
-          {results.map((item, i) => (
-            <MenuItem key={item?.Name || "" + i} 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 container>
-          {results.map((item) => (
-            <Grid
-              key={item.ItemId}
-              item
-              xs={12}
-              sm={6}
-              md={4}
-              onClick={handleCloseDrawer}
-            >
-              <ProductCard8
-                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
-                openDialog={openDialog}
-                enableWishlistDialog={false}
-                enableQuickViewDialog={false} // Enable quick view dialog
-              />
-            </Grid>
-          ))}
-        </Grid>
-      )}
-    </SearchResultCard>
-  );
-}

package/src/components/_components/search-box/hooks/use-search.ts

@@ -1,63 +0,0 @@
-"use client";
-
-import { ChangeEvent, useState, useEffect, useCallback } from "react";
-import useSearchProducts from "@evenicanpm/storefront-core/src/api-manager/services/product/mutations/search-products";
-import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
-
-const DEBOUNCE_TIME = 100;
-
-export default function useSearch() {
-  const [resultList, setResultList] = useState<ProductSearchResult[]>([]);
-  const [categoryId, setCategoryId] = useState<string | null>(null);
-  const [categoryTitle, setCategoryTitle] = useState("All Categories");
-  const [searchText, setSearchText] = useState("");
-  const [debouncedSearchText, setDebouncedSearchText] = useState("");
-
-  const { mutateAsync: searchProducts } = useSearchProducts();
-
-  const handleSearch = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setSearchText(e.target.value);
-  }, []);
-
-  const handleCategoryChange = useCallback(
-    (cat: { name: string; id: string }) => {
-      setCategoryId(cat.id);
-      setCategoryTitle(cat.name);
-    },
-    [],
-  );
-
-  // Debounce search input
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setDebouncedSearchText(searchText);
-    }, DEBOUNCE_TIME);
-    return () => clearTimeout(timeoutId);
-  }, [searchText]);
-
-  useEffect(() => {
-    const getProducts = async () => {
-      if (!debouncedSearchText) {
-        setResultList([]);
-        return;
-      }
-
-      const results = await searchProducts({
-        searchText: debouncedSearchText,
-        category: 0, // Category filter not used in mobile search
-      });
-
-      setResultList(results);
-    };
-
-    getProducts();
-  }, [debouncedSearchText, categoryId, searchProducts]);
-
-  return {
-    category: categoryId,
-    resultList,
-    handleSearch,
-    categoryTitle,
-    handleCategoryChange,
-  };
-}

package/src/components/_components/search-box/index.ts

@@ -1,2 +0,0 @@
-export { default as SearchInput } from "./search-input";
-export { default as SearchInputWithCategory } from "./search-input-category";

package/src/components/_components/search-box/search-input-category.tsx

@@ -1,207 +0,0 @@
-"use client";
-
-import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
-// LOCAL CUSTOM COMPONENTS
-import SearchResult from "./components/search-result";
-import CategoryDropdown from "./components/category-dropdown";
-// CUSTOM ICON COMPONENT
-import Search from "@evenicanpm/storefront-core/src/components/_components/icons/search";
-import { useTranslations } from "next-intl";
-import React, { FormEvent, useState } from "react";
-import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
-import searchProducts from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/search-products";
-import { INPUT_SX } from "./styles/index";
-import _ from "lodash";
-import ProductViewDialog, {
-  ProductInfo,
-} from "../products-view/product-view-dialog";
-import { IconButton } from "@mui/material";
-import { usePathname, useRouter } from "next/navigation";
-import { PageSlug } from "@/lib/page-slugs";
-import { PageKey } from "@/lib/product-list-types";
-import AddToWishlistDialog from "../wishlist/add-to-wishlist-dialog";
-import RemoveFromWishlistDialog from "../wishlist/remove-from-wishlist-dialog";
-import getCart from "@/api-manager/services/cart/queries/get-cart";
-
-export enum DialogType {
-  AddToWishlist = "addToWishlist",
-  RemoveFromWishlist = "removeFromWishlist",
-  QuickView = "quickView",
-}
-
-type DialogState = {
-  type: DialogType | null;
-  productId: number | null;
-  productInfo?: ProductInfo; // for quick view
-};
-
-type Props = {
-  cartId?: string;
-};
-
-export default function SearchInputWithCategory() {
-  const t = useTranslations();
-  const { data: cart } = getCart.useData();
-  const [resultsOpen, setResultsOpen] = useState(false);
-  const [searchText, setSearchText] = React.useState<string>("");
-  const [selectedCategory, setSelectedCategory] = React.useState<number>(0);
-  const router = useRouter();
-  const pathname = usePathname();
-  const [dialogState, setDialogState] = useState<DialogState>({
-    type: null, // the type of dialog to open (add to/remove from wishlist, quick view)
-    productId: null,
-  });
-
-  const { data: resultList } = searchProducts.useData({
-    searchText,
-    category: selectedCategory,
-  });
-
-  const { data: categories, error: categoriesError } =
-    getCategories.useSuspenseData();
-
-  const handleCategoryChange = (categoryId: number) => {
-    setSelectedCategory(categoryId);
-  };
-
-  const findCategoryNameById = () => {
-    if (selectedCategory === 0) {
-      return t("Navigation.allCategoriesLabel");
-    }
-    return (
-      categories?.find((cat) => cat.RecordId === selectedCategory)?.Name || ""
-    );
-  };
-
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchText(e.target.value || "");
-  };
-
-  const debounceSearch = _.debounce(handleSearchChange, 500);
-
-  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 INPUT_PROPS = {
-    startAdornment: (
-      <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>
-    ),
-    endAdornment: (
-      <CategoryDropdown
-        title={findCategoryNameById()}
-        handleChange={handleCategoryChange}
-        categories={categoriesError ? [] : categories}
-      />
-    ),
-  };
-
-  const openDialog = (
-    type: DialogType,
-    productId: number,
-    productInfo?: ProductInfo,
-  ) => {
-    setDialogState({
-      type,
-      productId,
-      productInfo,
-    });
-    setResultsOpen(false);
-  };
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>): void {
-    event.preventDefault();
-    handleNavigate();
-    setResultsOpen(false);
-    setSearchText("");
-    setSelectedCategory(0);
-  }
-
-  const handleCloseDialog = () => {
-    setDialogState({
-      type: null,
-      productId: null,
-      productInfo: undefined,
-    });
-  };
-
-  const handleAddRemoveSuccess = () => {
-    // Implement
-  };
-
-  return (
-    <>
-      <Box position="relative" flex="1 1 0" maxWidth="670px" mx="auto">
-        <form onSubmit={handleSubmit}>
-          <TextField
-            fullWidth
-            variant="outlined"
-            placeholder={t("Search.searchPlaceholder")}
-            onChange={debounceSearch}
-            InputProps={{ ...INPUT_PROPS, sx: INPUT_SX }}
-            onFocus={() => {
-              setResultsOpen(true);
-            }}
-            onBlur={() => {
-              setTimeout(() => {
-                setResultsOpen(false);
-              }, 500);
-            }}
-          />
-        </form>
-
-        {resultList && resultList?.length > 0 && resultsOpen ? (
-          <SearchResult results={resultList} openDialog={openDialog} />
-        ) : null}
-      </Box>
-      {/* Dialog */}
-      {dialogState.type === DialogType.AddToWishlist &&
-        dialogState.productId && (
-          <AddToWishlistDialog
-            open={dialogState.type === DialogType.AddToWishlist}
-            handleClose={handleCloseDialog}
-            productId={dialogState.productId}
-            onSuccess={handleAddRemoveSuccess}
-          />
-        )}
-      {dialogState.type === DialogType.RemoveFromWishlist &&
-        dialogState.productId && (
-          <RemoveFromWishlistDialog
-            open={dialogState.type === DialogType.RemoveFromWishlist}
-            handleClose={handleCloseDialog}
-            productId={dialogState.productId}
-            onSuccess={handleAddRemoveSuccess}
-          />
-        )}
-
-      {dialogState.type === DialogType.QuickView &&
-        dialogState.productId &&
-        dialogState.productInfo && (
-          <ProductViewDialog
-            openDialog={dialogState.type === DialogType.QuickView}
-            handleCloseDialog={handleCloseDialog}
-            product={dialogState.productInfo}
-            cartId={cart.Id}
-          />
-        )}
-    </>
-  );
-}

package/src/components/_components/search-box/search-input.tsx

@@ -1,64 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import { useTranslations } from "next-intl";
-// LOCAL CUSTOM HOOKS
-import useSearch from "./hooks/use-search";
-// LOCAL CUSTOM COMPONENT
-import SearchResult from "./components/search-result";
-// STYLED COMPONENT
-import { SearchOutlinedIcon } from "./styles/index";
-
-interface Props {
-  handleCloseDrawer: () => void;
-}
-export default function SearchInput({ handleCloseDrawer }: Props) {
-  const { handleSearch, resultList } = useSearch();
-  const t = useTranslations("Search");
-  const INPUT_PROPS = {
-    sx: {
-      border: 0,
-      height: 44,
-      paddingRight: 0,
-      overflow: "hidden",
-      backgroundColor: "grey.200",
-      "& .MuiOutlinedInput-notchedOutline": { border: 0 },
-    },
-    endAdornment: (
-      <Button
-        color="primary"
-        disableElevation
-        variant="contained"
-        sx={{ px: "3rem", height: "100%", borderRadius: "0 4px 4px 0" }}
-      >
-        {t("searchBtn")}
-      </Button>
-    ),
-    startAdornment: <SearchOutlinedIcon fontSize="small" />,
-  };
-
-  return (
-    <Box
-      position="relative"
-      flex="1 1 0"
-      maxWidth="670px"
-      mx="auto"
-      // {...{ ref: parentRef }}
-    >
-      <TextField
-        fullWidth
-        variant="outlined"
-        placeholder={t("searchPlaceholder")}
-        onChange={handleSearch}
-        InputProps={INPUT_PROPS}
-      />
-
-      {resultList && resultList?.length > 0 ? (
-        <SearchResult
-          results={resultList}
-          handleCloseDrawer={handleCloseDrawer}
-        />
-      ) : null}
-    </Box>
-  );
-}

package/src/components/_components/search-box/styles/index.ts

@@ -1,47 +0,0 @@
-"use client";
-
-import Card from "@mui/material/Card";
-import Box from "@mui/material/Box";
-import styled from "@mui/material/styles/styled";
-import SearchOutlined from "@mui/icons-material/SearchOutlined";
-
-// TODO: caused from symlinked node_modules in client-packages root
-// Need to install only types for mui/styled-engine
-export const SearchOutlinedIcon = styled(SearchOutlined)(({ theme }) => ({
-  color: theme.palette.grey[600],
-  marginRight: 6,
-}));
-
-export const SearchResultCard = styled(Card)({
-  zIndex: 99,
-  top: "100%",
-  width: "100%",
-  position: "absolute",
-  paddingTop: "0.5rem",
-  paddingBottom: "0.5rem",
-  paddingLeft: "2rem",
-  paddingRight: "2rem",
-});
-
-export const DropDownHandler = styled(Box)(({ theme }) => ({
-  width: 160,
-  minWidth: 160,
-  height: "100%",
-  display: "flex",
-  whiteSpace: "pre",
-  alignItems: "center",
-  gap: theme.spacing(0.5),
-  justifyContent: "flex-end",
-  color: theme.palette.grey[700],
-  paddingInline: theme.spacing(3),
-  borderLeft: `1px solid ${theme.palette.grey[400]}`,
-  [theme.breakpoints.down("xs")]: { display: "none" },
-}));
-
-export const INPUT_SX = {
-  height: 44,
-  padding: 0,
-  overflow: "hidden",
-  backgroundColor: "grey.200",
-  "& .MuiOutlinedInput-notchedOutline": { border: 0 },
-};

package/src/components/_components/section-header/index.ts

@@ -1,2 +0,0 @@
-export { default as SectionCreator } from "./section-creator";
-export { default as SectionHeader } from "./section-header";

package/src/components/_components/section-header/section-creator.tsx

@@ -1,29 +0,0 @@
-import { ReactNode } from "react";
-import Container from "@mui/material/Container";
-import Box, { BoxProps } from "@mui/material/Box";
-import SectionHeader from "./section-header";
-
-// ==============================================================
-interface Props extends BoxProps {
-  title?: string;
-  icon?: ReactNode;
-  seeMoreLink?: string;
-  children: ReactNode;
-}
-// ==============================================================
-
-export default function SectionCreator(props: Props) {
-  const { icon, title, children, seeMoreLink, ...others } = props;
-
-  return (
-    <Box mb={7.5} {...others}>
-      <Container className="pb-1">
-        {title ? (
-          <SectionHeader title={title} seeMoreLink={seeMoreLink} icon={icon} />
-        ) : null}
-
-        {children}
-      </Container>
-    </Box>
-  );
-}

package/src/components/_components/section-header/section-header.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { ReactNode } from "react";
-// MUI ICON COMPONENTS
-import ArrowLeft from "@mui/icons-material/ArrowLeft";
-import ArrowRight from "@mui/icons-material/ArrowRight";
-// LOCAL CUSTOM COMPONENTS
-import { H2 } from "../Typography";
-import { FlexBetween, FlexBox } from "../flex-box/index";
-import useSettings from "../../../hooks/use-settings";
-
-// ===================================================
-interface Props {
-  title: string;
-  icon?: ReactNode;
-  seeMoreLink?: string;
-}
-// ===================================================
-
-export default function SectionHeader({ title, seeMoreLink, icon }: Props) {
-  const { settings } = useSettings();
-  return (
-    <FlexBetween mb={3}>
-      <FlexBox alignItems="center" gap={1}>
-        {icon ?? null}
-        <H2 lineHeight={1}>{title}</H2>
-      </FlexBox>
-
-      {seeMoreLink ? (
-        <Link href={seeMoreLink}>
-          <FlexBox alignItems="center" color="grey.600">
-            View all
-            {settings.direction === "ltr" ? (
-              <ArrowRight fontSize="small" color="inherit" />
-            ) : (
-              <ArrowLeft fontSize="small" color="inherit" />
-            )}
-          </FlexBox>
-        </Link>
-      ) : null}
-    </FlexBetween>
-  );
-}

package/src/components/_components/service-cards/icon-component.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import { SvgIconProps } from "@mui/material";
-// CUSTOM ICON COMPONENTS
-// import appIcons from "icons";
-import FallbackIcon from "@/components/Blocks/Icons/Components/FallbackIcon";
-
-// ==============================================================
-interface Props extends SvgIconProps {
-  icon: string;
-}
-// ==============================================================
-
-export default function IconComponent({ ...props }: Props) {
-  // const Icon = appIcons[icon] as SvgIconComponent;
-  const Icon = FallbackIcon;
-  return <Icon {...props} />;
-}

package/src/components/_components/service-cards/service-card-1/index.ts

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

package/src/components/_components/service-cards/service-card-1/service-card-1.tsx

@@ -1,42 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import {
-  H6,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import {
-  FlexBox,
-  FlexRowCenter,
-} from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-// LOCAL CUSTOM COMPONENTS
-import IconComponent from "../icon-component";
-
-// ==============================================================
-interface Props {
-  icon: string;
-  title: string;
-  description: string;
-}
-// ==============================================================
-
-export default function ServiceCard1({ icon, title, description }: Props) {
-  return (
-    <FlexBox gap={2}>
-      <FlexRowCenter
-        width={50}
-        height={50}
-        bgcolor="grey.100"
-        borderRadius="50%"
-      >
-        {icon ? <IconComponent icon={icon} fontSize="small" /> : null}
-      </FlexRowCenter>
-
-      <div>
-        <H6 mb={0.5} fontSize={17}>
-          {title}
-        </H6>
-
-        <Paragraph color="grey.600">{description}</Paragraph>
-      </div>
-    </FlexBox>
-  );
-}

package/src/components/_components/service-cards/service-card-2/index.ts

@@ -1 +0,0 @@
-export { default } from "./service-card-2";