@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/carousel-cards/carousel-card-1/styles.ts

@@ -0,0 +1,34 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+export const StyledRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  ".title": {
+    fontSize: 50,
+    marginTop: 0,
+    lineHeight: 1.2,
+    marginBottom: "1.35rem",
+  },
+  [theme.breakpoints.up("sm")]: {
+    ".grid-item": {
+      minHeight: 424,
+      display: "flex",
+      alignItems: "baseline",
+      flexDirection: "column",
+      justifyContent: "center",
+    },
+  },
+  [theme.breakpoints.down("sm")]: {
+    marginLeft: 0,
+    paddingLeft: 0,
+    ".title": { fontSize: 32 },
+  },
+  [theme.breakpoints.down("xs")]: {
+    ".title": { fontSize: 16 },
+    ".title + *": { fontSize: 13 },
+    ".button-link": { height: 36, padding: "0 1.5rem", fontSize: 13 },
+  },
+}));

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

@@ -0,0 +1,78 @@
+import Grid from "@mui/material/Grid2";
+import Button from "@mui/material/Button";
+// MUI ICON COMPONENT
+import Favorite from "@mui/icons-material/Favorite";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import { Countdown } from "@evenicanpm/storefront-core/src/components-v2/countdown/index";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import {
+  H2,
+  H3,
+  H4,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// STYLED COMPONENT
+import { ContentWrapper, FavoriteButton } from "./styles";
+
+// ================================================================
+interface Props {
+  imgUrl: string;
+  expireDate: number;
+  productName: string;
+}
+// ================================================================
+
+export default function CarouselCard2({
+  imgUrl,
+  productName,
+  expireDate,
+}: Props) {
+  return (
+    <Grid container alignItems="center">
+      <Grid size={{ lg: 6, md: 5, sm: 12, xs: 12 }}>
+        <BazaarImage
+          src={imgUrl}
+          alt="xiaomi-watch-1"
+          sx={{ display: "block", mx: "auto", maxWidth: "100%", p: 5 }}
+        />
+      </Grid>
+
+      <Grid size={{ lg: 4, md: 5, sm: 12, xs: 12 }}>
+        <ContentWrapper>
+          <H3 color="primary.500" mb="0.2rem">
+            Deal Of The Day
+          </H3>
+          <H2>{productName}</H2>
+
+          <Paragraph mt="0.3rem">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis
+            lobortis consequat eu, quam etiam at quis ut convallis.
+          </Paragraph>
+
+          <H4 mt="1.5rem" mb="0.3rem">
+            Fresh Deal Everyday, Get It Now!
+          </H4>
+
+          {/* countdown time */}
+          <Countdown expireDate={expireDate} />
+
+          <FlexBox gap={2} mt={3}>
+            <Button
+              color="primary"
+              disableElevation
+              variant="contained"
+              sx={{ px: 4, borderRadius: 2 }}
+            >
+              BUY NOW
+            </Button>
+
+            <FavoriteButton>
+              <Favorite />
+            </FavoriteButton>
+          </FlexBox>
+        </ContentWrapper>
+      </Grid>
+    </Grid>
+  );
+}

package/src/components-v2/carousel-cards/carousel-card-2/index.ts

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

package/src/components-v2/carousel-cards/carousel-card-2/styles.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import Button from "@mui/material/Button";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+export const ContentWrapper = styled("div")(({ theme }) => ({
+  [theme.breakpoints.down("sm")]: {
+    padding: "2rem",
+    width: "100%",
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    padding: "0 3rem",
+    paddingBottom: "2rem",
+    width: "80%",
+  },
+}));
+
+export const FavoriteButton = styled(Button)(({ theme }) => ({
+  color: "white",
+  height: "44px",
+  borderRadius: "8px",
+  paddingInline: "1rem",
+  backgroundColor: theme.palette.grey[500],
+  ":hover": { backgroundColor: theme.palette.grey[500] },
+}));

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

@@ -0,0 +1,37 @@
+import Link from "next/link";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
+import {
+  H2,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// STYLED COMPONENTS
+import { ContentWrapper, LinkText, RootStyled } from "./styles";
+// CUSTOM DATA MODEL
+import { Product } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==========================================================
+type Props = { product: Product };
+// ==========================================================
+
+export default function CarouselCard3({ product }: Props) {
+  return (
+    <RootStyled>
+      <ContentWrapper>
+        <H2 mb="0.5rem" textAlign="center" lineHeight={1.2}>
+          {product.title}
+        </H2>
+
+        <Paragraph color="grey.600" textAlign="center" mb="1.5rem">
+          Starting at ${product.price} & save upto {product.discount}%
+        </Paragraph>
+
+        <Link href={`/products/${product.slug}`}>
+          <LinkText>SHOP NOW</LinkText>
+        </Link>
+      </ContentWrapper>
+
+      <BazaarImage width="100%" src={product.thumbnail} alt="shoes" />
+    </RootStyled>
+  );
+}

package/src/components-v2/carousel-cards/carousel-card-3/index.ts

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

package/src/components-v2/carousel-cards/carousel-card-3/styles.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENTS
+export const RootStyled = styled(Card)(({ theme }) => ({
+  height: "100%",
+  overflow: "unset",
+  borderRadius: "2px",
+  boxShadow: theme.shadows[4],
+  transition: "all 250ms ease-in-out",
+}));
+
+export const ContentWrapper = styled("div")({
+  display: "flex",
+  padding: "1rem",
+  paddingTop: "3rem",
+  alignItems: "center",
+  flexDirection: "column",
+});
+
+export const LinkText = styled("small")(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 900,
+  lineHeight: 1.6,
+  borderBottom: `2px solid ${theme.palette.primary.main}`,
+}));

package/src/components-v2/carousel-cards/carousel-card-4/carousel-card-4.tsx

@@ -0,0 +1,81 @@
+import Link from "next/link";
+import Button from "@mui/material/Button";
+// GLOBAL CUSTOM COMPONENTS
+import {
+  H1,
+  H4,
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// STYLED COMPONENT
+import { CardWrapper } from "./styles";
+
+// ===============================================================
+interface Props {
+  title?: string;
+  bgImage?: string;
+  category?: string;
+  discount?: number;
+  buttonLink?: string;
+  buttonText?: string;
+  description?: string;
+  mode?: "dark" | "light";
+}
+// ===============================================================
+
+export default function CarouselCard4({
+  title,
+  bgImage,
+  category,
+  discount,
+  buttonLink,
+  buttonText,
+  description,
+  mode = "dark",
+}: Props) {
+  return (
+    <CardWrapper img={bgImage ?? ""} mode={mode}>
+      <div className="content">
+        <H4
+          mb={1}
+          lineHeight={1}
+          fontWeight={400}
+          textTransform="uppercase"
+          fontSize={{ sm: 30, xs: 24 }}
+        >
+          {title}
+        </H4>
+
+        <H1
+          fontSize={{ sm: 60, xs: 44 }}
+          lineHeight={1}
+          textTransform="uppercase"
+        >
+          {category}
+        </H1>
+
+        <H4
+          fontSize={{ sm: 30, xs: 24 }}
+          lineHeight={1}
+          mt={1.5}
+          textTransform="uppercase"
+        >
+          SALE UP TO <Span color="primary.main">{discount}% OFF</Span>
+        </H4>
+
+        <Paragraph fontSize={{ sm: 18, xs: 14 }} mb={4}>
+          {description}
+        </Paragraph>
+
+        <Button
+          size="large"
+          href={buttonLink}
+          variant="contained"
+          LinkComponent={Link}
+        >
+          {buttonText}
+        </Button>
+      </div>
+    </CardWrapper>
+  );
+}

package/src/components-v2/carousel-cards/carousel-card-4/index.ts

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

package/src/components-v2/carousel-cards/carousel-card-4/styles.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+export const CardWrapper = styled("div", {
+  shouldForwardProp: (prop) => prop !== "img" && prop !== "mode",
+})<{ img: string; mode: string }>(({ theme, img, mode }) => ({
+  minHeight: 500,
+  display: "flex",
+  alignItems: "center",
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat",
+  backgroundImage: `url(${img})`,
+  backgroundColor: mode === "dark" ? "#000" : "#fff",
+  color: mode === "light" ? theme.palette.primary.dark : "#fff",
+  ".content":
+    theme.direction === "rtl" ? { paddingRight: 80 } : { paddingLeft: 80 },
+  [theme.breakpoints.down("md")]: {
+    padding: 24,
+    textAlign: "center",
+    backgroundImage: "none",
+    justifyContent: "center",
+    ".content":
+      theme.direction === "rtl" ? { paddingRight: 0 } : { paddingLeft: 0 },
+  },
+}));

package/src/components-v2/categories/category-list/category-list.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+import CategoryListItem from "../category-list-item/index";
+import { StyledRoot, SubMenuStyledRoot } from "./styles";
+import { Props } from "./types";
+import getCategories from "@/services/categories/queries/get-categories";
+import { CategoryHierarchy } from "@/lib/category-helpers";
+import MegaMenu1 from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/mega-menu-1";
+import MegaMenu2 from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/mega-menu-2";
+
+type MegaMenuType = "default" | "mega-menu-1" | "mega-menu-2";
+
+export default function CategoryList({ open, position = "absolute" }: Props) {
+  let { data: categories } = getCategories.useSuspenseData();
+  if (!(categories && categories.length)) categories = [];
+
+  const megaMenuRenderers: Record<
+    MegaMenuType,
+    (children: CategoryHierarchy[]) => ReactNode
+  > = {
+    default: (children) => renderRecursiveMenu(children, true),
+    "mega-menu-1": (children) => <MegaMenu1 data={children} />,
+    "mega-menu-2": (children) => <MegaMenu2 data={children} />,
+  };
+
+  const renderRecursiveMenu = (
+    items: CategoryHierarchy[],
+    isSubMenu = true,
+  ) => {
+    const Wrapper = isSubMenu ? SubMenuStyledRoot : StyledRoot;
+
+    return (
+      <Wrapper elevation={2} {...(isSubMenu ? {} : { open, position })}>
+        {items.map((category) => {
+          const { RecordId, Name, Url, Children } = category;
+          const hasChildren = !!(Children && Children.length);
+
+          // Sub menu can also be "categories/mega-menu/mega-menu-1" or "mega-menu-2",
+          // Mega menus have submenu items listed in columns and also have option to show banners(offers).
+          // Which submenu to display should be decided from categopry data
+          const menuType: MegaMenuType = "default";
+
+          return (
+            <CategoryListItem
+              key={RecordId}
+              href={`/products/${Url}`}
+              title={Name ?? ""}
+              caret={hasChildren}
+              render={
+                hasChildren ? megaMenuRenderers[menuType]?.(Children) : null
+              }
+            />
+          );
+        })}
+      </Wrapper>
+    );
+  };
+
+  return renderRecursiveMenu(categories, false);
+}

package/src/components-v2/categories/category-list/index.ts

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

package/src/components-v2/categories/category-list/styles.ts

@@ -0,0 +1,29 @@
+import styled from "@mui/material/styles/styled";
+import { Props } from "./types";
+import Card from "@mui/material/Card";
+
+// styled component
+export const StyledRoot = styled("div", {
+  shouldForwardProp: (prop) => prop !== "position" && prop !== "open",
+})<Props>(({ theme, position, open }) => ({
+  left: 0,
+  zIndex: 98,
+  right: "auto",
+  borderRadius: 4,
+  padding: "0.5rem 0px",
+  transformOrigin: "top",
+  boxShadow: theme.shadows[2],
+  position: position || "unset",
+  transition: "all 250ms ease-in-out",
+  transform: open ? "scaleY(1)" : "scaleY(0)",
+  backgroundColor: theme.palette.background.paper,
+  top: position === "absolute" ? "calc(100% + 0.7rem)" : "0.5rem",
+}));
+
+export const SubMenuStyledRoot = styled(Card)(() => ({
+  marginLeft: "0.6rem",
+  paddingBlock: "0.5rem",
+  // Prevent clipping of 2nd-level dropdowns that are absolutely positioned.
+  // Needed to make sure submenus render outside the card's bounds
+  overflow: "visible",
+}));

package/src/components-v2/categories/category-list/types.ts

@@ -0,0 +1,4 @@
+export interface Props {
+  open?: boolean;
+  position?: "absolute" | "relative";
+}

package/src/components-v2/categories/category-list-item/category-menu-item.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { ReactNode } from "react";
+// MUI ICON COMPONENTS
+import { SvgIconComponent } from "@mui/icons-material";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+// STYLED COMPONENT
+import { Wrapper } from "./styles";
+
+// =============================================================
+interface Props {
+  href: string;
+  title: string;
+  caret?: boolean;
+  render?: ReactNode;
+  icon?: SvgIconComponent;
+}
+// =============================================================
+
+export default function CategoryListItem(props: Props) {
+  const { href, title, render, caret = true, icon: Icon } = props;
+
+  return (
+    <Wrapper>
+      <Link href={href}>
+        <div className="category-dropdown-link">
+          {Icon ? <Icon fontSize="small" color="inherit" /> : null}
+          <span className="title">{title}</span>
+          {caret ? (
+            <ChevronRight fontSize="small" className="caret-icon" />
+          ) : null}
+        </div>
+      </Link>
+
+      {render ? <div className="mega-menu">{render}</div> : null}
+    </Wrapper>
+  );
+}

package/src/components-v2/categories/category-list-item/index.ts

@@ -0,0 +1 @@
+export { default } from "./category-menu-item";

package/src/components-v2/categories/category-list-item/styles.ts

@@ -0,0 +1,35 @@
+import styled from "@mui/material/styles/styled";
+
+export const Wrapper = styled("div")(({ theme }) => ({
+  // Needed "relative" here so that the absolutely positioned `.mega-menu` inside this wrapper
+  // is aligned relative to this parent element.
+  // If we want submenu to align to the top always then we can remove this.
+  position: "relative",
+  "& .category-dropdown-link": {
+    height: 40,
+    display: "flex",
+    minWidth: "220px", // same as CategoryMenuButton width
+    cursor: "pointer",
+    whiteSpace: "pre",
+    padding: "0px 1rem",
+    alignItems: "center",
+    transition: "all 300ms ease-in-out",
+    ".title": { flexGrow: 1, paddingLeft: "0.75rem" },
+  },
+
+  ":hover": {
+    color: theme.palette.primary.main,
+    background: theme.palette.action.hover,
+    "& > .mega-menu": { display: "block" },
+  },
+
+  ".mega-menu": {
+    top: 0,
+    zIndex: 99,
+    left: "100%",
+    right: "auto",
+    display: "none",
+    position: "absolute",
+  },
+  ...(theme.direction === "rtl" && { ".caret-icon": { rotate: "180deg" } }),
+}));

package/src/components-v2/categories/category-menu.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { MouseEvent, useCallback, useEffect, useState } from "react";
+import styled from "@mui/material/styles/styled";
+import CategoryList from "./category-list/index";
+
+// STYLED COMPONENT
+const Wrapper = styled("div", {
+  shouldForwardProp: (prop) => prop !== "open",
+})<{ open: boolean }>(({ open, theme: { direction } }) => ({
+  cursor: "pointer",
+  position: "relative",
+  "& .dropdown-icon": {
+    transition: "all 250ms ease-in-out",
+    transform: `rotate(${
+      open ? (direction === "rtl" ? "-90deg" : "90deg") : "0deg"
+    })`,
+  },
+}));
+
+// ===========================================================
+type Props = {
+  render: (
+    handler: (e: React.MouseEvent<HTMLButtonElement>) => void,
+  ) => JSX.Element;
+};
+// ===========================================================
+
+export default function CategoryMenu({ render }: Props) {
+  const [open, setOpen] = useState(false);
+
+  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setOpen((open) => !open);
+  };
+
+  const handleDocumentClick = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    window.addEventListener("click", handleDocumentClick);
+    return () => window.removeEventListener("click", handleDocumentClick);
+  }, [handleDocumentClick]);
+
+  return (
+    <Wrapper open={open}>
+      {render(onClick)}
+
+      <CategoryList open={open} />
+    </Wrapper>
+  );
+}

package/src/components-v2/categories/mega-menu/banner.tsx

@@ -0,0 +1,60 @@
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import {
+  H3,
+  Paragraph,
+  Small,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+
+export default function OfferBanner() {
+  return (
+    <Link href="/sale-page-2">
+      <Grid
+        className="h-full"
+        container
+        spacing={0}
+        wrap="wrap-reverse"
+        alignItems="center"
+        mb={-1}
+      >
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <Box px={2.5}>
+            <H3 mb={1}>Big Sale Upto 60% Off</H3>
+
+            <Paragraph color="grey.600" mb={1}>
+              Handcrafted from genuine Italian Leather
+            </Paragraph>
+
+            <Small
+              fontWeight="700"
+              borderBottom="2px solid"
+              borderColor="primary.main"
+            >
+              SHOP NOW
+            </Small>
+          </Box>
+        </Grid>
+
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <FlexBox
+            height="160px"
+            position="relative"
+            flexDirection="column"
+            justifyContent="flex-end"
+          >
+            <LazyImage
+              alt="model"
+              width={292}
+              height={195}
+              src="/assets/images/models/model-1.png"
+            />
+          </FlexBox>
+        </Grid>
+      </Grid>
+    </Link>
+  );
+}