@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/_components/carousel/components/carousel-arrows.tsx

@@ -0,0 +1,60 @@
+import { CustomArrowProps } from "react-slick"; // Installed react slick package for fixing error
+import { SxProps, Theme } from "@mui/material/styles";
+// MUI ICON COMPONENTS
+import ArrowBack from "@mui/icons-material/ArrowBack";
+import ArrowForward from "@mui/icons-material/ArrowForward";
+// STYLED COMPONENT
+import { ArrowButton } from "../styles/index";
+
+// ==============================================================
+interface ArrowProps extends CustomArrowProps {
+  sx?: SxProps<Theme>;
+}
+// ==============================================================
+
+function NextArrow({ onClick, sx, className }: ArrowProps) {
+  const updatedClassName =
+    className ||
+    ""
+      .split(" ")
+      .filter((item: string) => item !== "slick-next")
+      .join(" ");
+
+  return (
+    <ArrowButton
+      right={0}
+      onClick={onClick}
+      className={`next ${updatedClassName}`}
+      sx={{ ...sx }}
+    >
+      <ArrowForward fontSize="small" color="inherit" className="forward-icon" />
+    </ArrowButton>
+  );
+}
+
+function PrevArrow({ onClick, sx, className }: ArrowProps) {
+  const updatedClassName =
+    className ||
+    ""
+      .split(" ")
+      .filter((item: string) => item !== "slick-prev")
+      .join(" ");
+
+  return (
+    <ArrowButton
+      left={0}
+      onClick={onClick}
+      className={`prev ${updatedClassName}`}
+      sx={{ ...sx }}
+    >
+      <ArrowBack fontSize="small" color="inherit" className="back-icon" />
+    </ArrowButton>
+  );
+}
+
+export default function CarouselArrows(sx?: SxProps<Theme>) {
+  return {
+    nextArrow: <NextArrow sx={sx} />,
+    prevArrow: <PrevArrow sx={sx} />,
+  };
+}

package/src/components/_components/carousel/components/carousel-dots.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { BoxProps } from "@mui/material/Box";
+// STYLED COMPONENTS
+import { Dot, DotList } from "../styles/index";
+
+// ==============================================================
+interface Props extends BoxProps {
+  dotColor?: string;
+}
+// ==============================================================
+
+export default function CarouselDots({ dotColor, ...props }: Props) {
+  return {
+    customPaging: () => <Dot dotColor={dotColor} />,
+    appendDots: (dots: ReactNode) => (
+      <DotList component="ul" {...props}>
+        {dots}
+      </DotList>
+    ),
+  };
+}

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

@@ -0,0 +1,3 @@
+export { default as Carousel } from "./carousel";
+export { default as CarouselDots } from "./components/carousel-dots";
+export { default as CarouselArrows } from "./components/carousel-arrows";

package/src/components/_components/carousel/styles/index.ts

@@ -0,0 +1,93 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+
+export const COMMON_DOT_STYLES = {
+  left: 0,
+  right: 0,
+  bottom: 25,
+  position: "absolute",
+};
+
+export const RootStyle = styled("div", {
+  shouldForwardProp: (prop) => prop !== "space",
+})<{ space: number }>(({ space }) => ({
+  ".slick-list": { marginInline: -space },
+  ".slick-slide": { paddingInline: space },
+  ":hover": {
+    ".slick-arrow": {
+      opacity: 1,
+      "&.next": { right: 5 },
+      "&.prev": { left: 5 },
+    },
+  },
+}));
+
+export const DotList = styled(Box)(({ theme }) => ({
+  gap: 6,
+  zIndex: 1,
+  margin: 0,
+  padding: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.primary.main,
+  "& li": {
+    width: 15,
+    height: 15,
+    display: "flex",
+    cursor: "pointer",
+    alignItems: "center",
+    justifyContent: "center",
+    "&.slick-active span::after": { scale: "1" },
+  },
+}));
+
+export const Dot = styled("span", {
+  shouldForwardProp: (prop) => prop !== "dotColor",
+})<{ dotColor?: string }>(({ dotColor, theme }) => ({
+  width: "100%",
+  height: "100%",
+  cursor: "pointer",
+  borderRadius: "50%",
+  position: "relative",
+  border: `1px solid ${dotColor || theme.palette.secondary.main}`,
+  "&:after": {
+    scale: 0,
+    inset: 0,
+    width: 9,
+    height: 9,
+    content: '""',
+    margin: "auto",
+    borderRadius: "50%",
+    position: "absolute",
+    transition: "scale 500ms ease-in-out",
+    backgroundColor: dotColor || theme.palette.secondary.main,
+  },
+}));
+
+export const ArrowButton = styled(Box)(({ theme }) => ({
+  zIndex: 1,
+  width: 35,
+  height: 35,
+  padding: 0,
+  opacity: 0,
+  top: "50%",
+  display: "flex",
+  cursor: "pointer",
+  position: "absolute",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(0, -50%)",
+  transition: "all 0.2s ease-in-out",
+  color: theme.palette.secondary.contrastText,
+  backgroundColor: theme.palette.secondary.main,
+  boxShadow: "0px 10px 30px rgba(0, 0, 0, 0.1)",
+
+  ...(theme.direction === "rtl" && {
+    ".back-icon, .forward-icon": { rotate: "180deg" },
+  }),
+
+  "&.slick-disabled": { visibility: "hidden" },
+}));

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

@@ -0,0 +1,64 @@
+import Grid from "@mui/material/Grid2";
+import Button from "@mui/material/Button";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@/components/_components/BazaarImage";
+import { Paragraph } from "@/components/_components/Typography";
+// STYLED COMPONENT
+import { StyledRoot } from "./styles";
+
+// ==================================================
+interface Props {
+  title?: string;
+  imgUrl?: string;
+  buttonLink?: string;
+  buttonText?: string;
+  description?: string;
+  buttonColor?: "dark" | "primary";
+}
+// ==================================================
+
+export default function CarouselCard1({
+  title,
+  imgUrl,
+  buttonLink,
+  buttonText,
+  description,
+}: Props) {
+  return (
+    <StyledRoot>
+      <Grid container spacing={3} alignItems="center">
+        <Grid className="Grid2-item" size={{ xl: 4, md: 5, sm: 6, xs: 12 }}>
+          <h1 className="title">{title}</h1>
+          <Paragraph color="secondary.main" mb={2.7}>
+            {description}
+          </Paragraph>
+
+          <a href={buttonLink}>
+            <Button
+              size="large"
+              disableElevation
+              variant="contained"
+              className="button-link"
+              sx={{ height: 44, borderRadius: "4px" }}
+            >
+              {buttonText}
+            </Button>
+          </a>
+        </Grid>
+
+        <Grid size={{ xl: 8, md: 7, sm: 6, xs: 12 }}>
+          <BazaarImage
+            src={imgUrl ?? ""}
+            alt="apple-watch-1"
+            sx={{
+              mx: "auto",
+              maxHeight: 400,
+              display: "block",
+              maxWidth: "100%",
+            }}
+          />
+        </Grid>
+      </Grid>
+    </StyledRoot>
+  );
+}

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

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

package/src/components/_components/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/_components/carousel-cards/carousel-card-2/carousel-card-2.tsx

@@ -0,0 +1,73 @@
+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 "@/components/_components/BazaarImage";
+import { Countdown } from "@/components/_components/countdown/index";
+import FlexBox from "@/components/_components/flex-box/flex-box";
+import { H2, H3, H4, Paragraph } from "@/components/_components/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/_components/carousel-cards/carousel-card-2/index.ts

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

package/src/components/_components/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/_components/carousel-cards/carousel-card-3/carousel-card-3.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+// GLOBAL CUSTOM COMPONENTS
+import BazaarImage from "@/components/_components/BazaarImage";
+import { H2, Paragraph } from "@/components/_components/Typography";
+// STYLED COMPONENTS
+import { ContentWrapper, LinkText, RootStyled } from "./styles";
+// CUSTOM DATA MODEL
+import { Product } from "@/components/_components/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/_components/carousel-cards/carousel-card-3/index.ts

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

package/src/components/_components/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/_components/carousel-cards/carousel-card-4/carousel-card-4.tsx

@@ -0,0 +1,76 @@
+import Link from "next/link";
+import Button from "@mui/material/Button";
+// GLOBAL CUSTOM COMPONENTS
+import { H1, H4, Paragraph, Span } from "@/components/_components/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/_components/carousel-cards/carousel-card-4/index.ts

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

package/src/components/_components/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/_components/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 "@/components/_components/categories/mega-menu/mega-menu-1";
+import MegaMenu2 from "@/components/_components/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/_components/categories/category-list/index.ts

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

package/src/components/_components/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/_components/categories/category-list/types.ts

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