@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,203 +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-v2/icons/search";
-import { useTranslations } from "next-intl";
-import React, { FormEvent, 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";
-import ProductViewDialog, {
-  ProductInfo,
-} from "../products-view/product-view-dialog";
-import { IconButton } from "@mui/material";
-import { 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
-};
-
-export default function SearchInputWithCategory() {
-  console.log("SEARCH INPUT CATEGORY");
-  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 [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-v2/search-box/search-input.test.tsx

@@ -1,41 +0,0 @@
-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-v2/search-box/search-input.tsx

@@ -1,66 +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 ? (
-        // TODO: needs Dialog implementation like search-input-category
-        // @ts-ignore
-        <SearchResult
-          results={resultList}
-          handleCloseDrawer={handleCloseDrawer}
-        />
-      ) : null}
-    </Box>
-  );
-}

package/src/components-v2/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-v2/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-v2/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 "@evenicanpm/storefront-core/src/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-v2/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 "@/cms/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-v2/service-cards/service-card-1/index.ts

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

package/src/components-v2/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-v2/Typography";
-import {
-  FlexBox,
-  FlexRowCenter,
-} from "@evenicanpm/storefront-core/src/components-v2/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-v2/service-cards/service-card-2/index.ts

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

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

@@ -1,37 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import {
-  H3,
-  Span,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/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-v2/service-cards/service-card-3/index.ts

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

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

@@ -1,28 +0,0 @@
-import IconComponent from "../icon-component";
-import {
-  H4,
-  Span,
-} from "@evenicanpm/storefront-core/src/components-v2/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-v2/service-cards/service-card-3/styles.ts

@@ -1,23 +0,0 @@
-"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-v2/settings/index.ts

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