@evenicanpm/storefront-core 1.0.0-alpha

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

@@ -0,0 +1,104 @@
+"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 "@/components/_components/icons/search";
+import { useTranslations } from "next-intl";
+import React, { useState } from "react";
+import getCategories from "@/services/categories/queries/get-categories";
+import searchProducts from "@/services/product/queries/search-products";
+import { INPUT_SX } from "./styles/index";
+import _ from "lodash";
+
+export default function SearchInputWithCategory() {
+  const t = useTranslations();
+
+  const [resultsOpen, setResultsOpen] = useState(false);
+  const [searchText, setSearchText] = React.useState<string>("");
+  const [selectedCategory, setSelectedCategory] = React.useState<number>(0);
+
+  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 INPUT_PROPS = {
+    startAdornment: (
+      <Box
+        mr={2}
+        px={2}
+        display="grid"
+        alignItems="center"
+        justifyContent="center"
+        borderRight="1px solid"
+        borderColor="grey.400"
+      >
+        <Search sx={{ fontSize: 17, color: "grey.600" }} />
+      </Box>
+    ),
+    endAdornment: (
+      <CategoryDropdown
+        title={findCategoryNameById()}
+        handleChange={handleCategoryChange}
+        categories={categoriesError ? [] : categories}
+      />
+    ),
+  };
+
+  return (
+    <Box
+      position="relative"
+      flex="1 1 0"
+      maxWidth="670px"
+      mx="auto"
+      //  {...{ ref: parentRef }}
+    >
+      <TextField
+        fullWidth
+        variant="outlined"
+        placeholder={t("Search.searchPlaceholder")}
+        onChange={debounceSearch}
+        InputProps={{ ...INPUT_PROPS, sx: INPUT_SX }}
+        onFocus={() => {
+          setResultsOpen(true);
+        }}
+        onBlur={() => {
+          // must use timeout to prevent
+          // onClick event not firing in time
+          // when selecting menu items
+          setResultsOpen(false);
+        }}
+      />
+
+      {resultList && resultList?.length > 0 && resultsOpen ? (
+        <SearchResult results={resultList} />
+      ) : null}
+    </Box>
+  );
+}

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

@@ -0,0 +1,41 @@
+import SearchInput from "./search-input";
+import { render, screen } from "@testing-library/react";
+import { expect, describe, it, vi, beforeAll } from "vitest";
+import userEvent from "@testing-library/user-event";
+
+beforeAll(() => {
+  vi.mock("next/navigation", () => ({
+    usePathname: vi.fn().mockReturnValue("/"),
+  }));
+  vi.mock("@services/product", () => {
+    return {
+      searchProducts: vi
+        .fn()
+        .mockReturnValue([{ Name: "shorts", ItemCode: "123" }]),
+    };
+  });
+  vi.mock("next/headers", () => ({
+    cookies: vi.fn().mockReturnValue(new Map([["storefront", "token"]])),
+  }));
+});
+const handleCloseDrawer = vi.fn();
+describe("SearchInput", () => {
+  it.skip("should render the search input", () => {
+    render(<SearchInput handleCloseDrawer={handleCloseDrawer} />);
+    const input = screen.getByRole("textbox");
+    expect(input).toBeInTheDocument();
+  });
+
+  it.skip("should render search results after user types", async () => {
+    const user = userEvent.setup();
+
+    render(<SearchInput handleCloseDrawer={handleCloseDrawer} />);
+    const input = screen.getAllByRole("textbox")[0];
+    expect(screen.queryByText("shorts")).not.toBeInTheDocument();
+
+    user.click(input);
+    user.keyboard("shorts"); // search term doesn't matter here, mock will return data regardless
+
+    expect(await screen.findByText("shorts")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,45 @@
+"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",
+});
+
+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

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

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

@@ -0,0 +1,28 @@
+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;
+}
+// ==============================================================
+
+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

@@ -0,0 +1,44 @@
+"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/useSettings";
+
+// ===================================================
+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

@@ -0,0 +1,18 @@
+"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

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

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

@@ -0,0 +1,39 @@
+// GLOBAL CUSTOM COMPONENTS
+import { H6, Paragraph } from "@/components/_components/Typography";
+import {
+  FlexBox,
+  FlexRowCenter,
+} from "@/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

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

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

@@ -0,0 +1,34 @@
+// GLOBAL CUSTOM COMPONENTS
+import { H3, Span } from "@/components/_components/Typography";
+import FlexBox from "@/components/_components/flex-box/flex-box";
+// LOCAL CUSTOM COMPONENTS
+import IconComponent from "../icon-component";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+  description: string;
+}
+// ==============================================================
+
+export default function ServiceCard2({ icon, title, description }: Props) {
+  return (
+    <FlexBox gap={1} p="1rem">
+      <IconComponent
+        icon={icon}
+        color="inherit"
+        fontSize="inherit"
+        sx={{ color: "grey.900", fontSize: "40px" }}
+      />
+
+      <div>
+        <H3 color="grey.900" lineHeight={1.3}>
+          {title}
+        </H3>
+
+        <Span color="grey.600">{description}</Span>
+      </div>
+    </FlexBox>
+  );
+}

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

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

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

@@ -0,0 +1,25 @@
+import IconComponent from "../icon-component";
+import { H4, Span } from "@/components/_components/Typography";
+// STYLED COMPONENTS
+import { StyledRoot } from "./styles";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+  description: string;
+}
+// ==============================================================
+
+export default function ServiceCard3({ icon, title, description }: Props) {
+  return (
+    <StyledRoot>
+      <IconComponent icon={icon} sx={{ fontSize: 40 }} />
+
+      <div>
+        <H4 lineHeight={1.3}>{title}</H4>
+        <Span color="grey.600">{description}</Span>
+      </div>
+    </StyledRoot>
+  );
+}

package/src/components/_components/service-cards/service-card-3/styles.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENTS
+export const StyledRoot = styled("div")(({ theme }) => ({
+  gap: 16,
+  flexGrow: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRight: `1px solid ${theme.palette.grey[400]}`,
+  ":last-child": { borderRight: 0 },
+
+  [theme.breakpoints.down("md")]: {
+    ":nth-of-type(even)": { borderRight: 0 },
+  },
+
+  [theme.breakpoints.down("sm")]: {
+    borderRight: 0,
+    justifyContent: "flex-start",
+  },
+}));

package/src/components/_components/settings/index.ts

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

package/src/components/_components/settings/setting.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+// MUI
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import Tooltip from "@mui/material/Tooltip";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+// MUI ICON COMPONENTS
+import Close from "@mui/icons-material/Close";
+import Settings from "@mui/icons-material/Settings";
+// LOCAL CUSTOM COMPONENTS
+import { H6 } from "@/components/_components/Typography";
+import Scrollbar from "@/components/_components/scrollbar/scrollbar";
+import FlexBox from "@/components/_components/flex-box/flex-box";
+// GLOBAL CUSTOM HOOK
+import useSettings from "@/components/_components/hooks/useSettings";
+// STYLED COMPONENTS
+import {
+  BodyWrapper,
+  MainContainer,
+  StyledAvatar,
+  StyledIconButton,
+} from "./styles";
+
+export default function Setting() {
+  const { push } = useRouter();
+  const { updateSettings, settings } = useSettings();
+  const [showBody, setShowBody] = useState(false);
+
+  return (
+    <ClickAwayListener onClickAway={() => setShowBody(false)}>
+      <MainContainer>
+        <Tooltip title="Settings & Demos" placement="left">
+          <StyledIconButton onClick={() => setShowBody((state) => !state)}>
+            {!showBody && <Settings />}
+            {showBody && <Close />}
+          </StyledIconButton>
+        </Tooltip>
+
+        <BodyWrapper showBody={showBody ? 1 : 0}>
+          <Scrollbar sx={{ maxHeight: showBody ? "calc(100vh - 200px)" : 0 }}>
+            <FlexBox gap={2}>
+              <Button
+                fullWidth
+                onClick={() => updateSettings({ direction: "rtl" })}
+                color={settings.direction === "rtl" ? "primary" : "secondary"}
+                variant={
+                  settings.direction === "rtl" ? "contained" : "outlined"
+                }
+              >
+                RTL
+              </Button>
+
+              <Button
+                fullWidth
+                onClick={() => updateSettings({ direction: "ltr" })}
+                color={settings.direction === "ltr" ? "primary" : "secondary"}
+                variant={
+                  settings.direction === "ltr" ? "contained" : "outlined"
+                }
+              >
+                LTR
+              </Button>
+            </FlexBox>
+
+            <Divider sx={{ my: 3 }} />
+
+            <H6 textAlign="center" mb={2}>
+              Bazaar Demos
+            </H6>
+
+            <FlexBox gap={2} flexWrap="wrap">
+              {demos.map((demo) => (
+                <StyledAvatar
+                  key={demo.id}
+                  src={demo.img}
+                  onClick={() => push(demo.path)}
+                />
+              ))}
+            </FlexBox>
+          </Scrollbar>
+        </BodyWrapper>
+      </MainContainer>
+    </ClickAwayListener>
+  );
+}
+
+const demos = [
+  {
+    id: 17,
+    path: "/furniture-3",
+    img: "/assets/images/landing/home/furniture-3.jpg",
+  },
+  {
+    id: 16,
+    path: "/gadget-3",
+    img: "/assets/images/landing/home/gadget-3.jpg",
+  },
+  {
+    id: 15,
+    path: "/grocery-4",
+    img: "/assets/images/landing/home/grocery-4.jpg",
+  },
+  {
+    id: 12,
+    path: "/furniture-2",
+    img: "/assets/images/landing/home/furniture-2.jpg",
+  },
+  {
+    id: 13,
+    path: "/gadget-2",
+    img: "/assets/images/landing/home/gadget-2.png",
+  },
+  { id: 14, path: "/medical", img: "/assets/images/landing/home/medical.png" },
+  {
+    id: 5,
+    path: "/fashion-3",
+    img: "/assets/images/landing/home/fashion-3.jpg",
+  },
+  { id: 0, path: "/market-1", img: "/assets/images/landing/page-1.png" },
+  { id: 1, path: "/market-2", img: "/assets/images/landing/home/market-2.jpg" },
+  { id: 9, path: "/grocery-1", img: "/assets/images/landing/grocery1.png" },
+  { id: 2, path: "/grocery-2", img: "/assets/images/landing/page-2.png" },
+  { id: 10, path: "/grocery-3", img: "/assets/images/landing/grocery3.png" },
+  { id: 3, path: "/fashion-1", img: "/assets/images/landing/page-3.png" },
+  {
+    id: 4,
+    path: "/fashion-2",
+    img: "/assets/images/landing/home/fashion-2.jpg",
+  },
+  { id: 6, path: "/gadget-1", img: "/assets/images/landing/page-4.png" },
+  { id: 7, path: "/furniture-1", img: "/assets/images/landing/furniture.png" },
+  { id: 8, path: "/gift-shop", img: "/assets/images/landing/gift-shop.png" },
+  {
+    id: 11,
+    path: "/health-beauty",
+    img: "/assets/images/landing/healthbeauty.png",
+  },
+];