@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/newsletter/newsletter.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useState } from "react";
+// MUI
+import Grid from "@mui/material/Grid2";
+import Modal from "@mui/material/Modal";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+import IconButton from "@mui/material/IconButton";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+// MUI UTILS METHODS
+import debounce from "@mui/material/utils/debounce";
+// MUI ICON COMPONENTS
+import Clear from "@mui/icons-material/Clear";
+// GLOBAL CUSTOM COMPONENTS
+import {
+  H1,
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM COMPONENT
+import SocialIcons from "./social-icons";
+// STYLED COMPONENTS
+import { Wrapper } from "./styles";
+
+// ======================================================
+type Props = { image?: string };
+// ======================================================
+
+export default function Newsletter({
+  image = "/assets/images/newsletter/bg-1.png",
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const handleClose = () => setOpen(false);
+
+  useEffect(() => {
+    if (!window) return;
+
+    if (!window.sessionStorage.getItem("newsletter")) {
+      debounce(() => {
+        setOpen(true);
+        window.sessionStorage.setItem("newsletter", "true");
+      }, 2000)();
+    }
+  }, []);
+
+  return (
+    <ClickAwayListener onClickAway={handleClose}>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        sx={{ zIndex: 999999999 }}
+      >
+        <Wrapper img={image}>
+          <Grid container spacing={2}>
+            <Grid
+              size={{ lg: 6, md: 6 }}
+              display={{ md: "flex", xs: "none" }}
+            />
+
+            <Grid size={{ lg: 6, md: 6, xs: 12 }} alignItems="center">
+              <div className="content">
+                <Paragraph fontSize={22} fontWeight={700}>
+                  UP TO <Span color="primary.main">30% OFF</Span>
+                </Paragraph>
+
+                <H1 fontSize={36} fontWeight={700} mb={2}>
+                  Sign up to <Span color="primary.main">BAZAAR</Span>
+                </H1>
+
+                <Paragraph color="grey.600" mb={5}>
+                  Subscribe to the BAZAR eCommerce newsletter to receive timely
+                  updates from your favorite products.
+                </Paragraph>
+
+                <TextField
+                  fullWidth
+                  className="emailInput"
+                  placeholder="Enter your email address"
+                />
+
+                <Button
+                  variant="contained"
+                  fullWidth
+                  color="primary"
+                  sx={{ p: 1.5 }}
+                >
+                  SUBMIT
+                </Button>
+
+                <SocialIcons />
+
+                <FormControlLabel
+                  control={<Checkbox defaultChecked />}
+                  label="No, Thanks"
+                />
+              </div>
+            </Grid>
+          </Grid>
+
+          <IconButton onClick={handleClose} className="clear-btn">
+            <Clear color="inherit" />
+          </IconButton>
+        </Wrapper>
+      </Modal>
+    </ClickAwayListener>
+  );
+}

package/src/components-v2/newsletter/social-icons.tsx

@@ -0,0 +1,35 @@
+import IconButton from "@mui/material/IconButton";
+// MUI ICON COMPONENTS
+import Google from "@mui/icons-material/Google";
+import Twitter from "@mui/icons-material/Twitter";
+import Instagram from "@mui/icons-material/Instagram";
+// GLOBAL CUSTOM COMPONENT
+import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
+// CUSTOM ICON COMPONENT
+// import Facebook from "icons/Facebook";
+import FallbackIcon from "@/cms/blocks/Icons/Components/FallbackIcon";
+const Facebook = FallbackIcon;
+
+const STYLE = { fontSize: 20, color: "grey.900" };
+
+export default function SocialIcons() {
+  return (
+    <FlexRowCenter mt={4} mb={2}>
+      <IconButton>
+        <Facebook sx={STYLE} />
+      </IconButton>
+
+      <IconButton>
+        <Twitter sx={STYLE} />
+      </IconButton>
+
+      <IconButton>
+        <Instagram sx={STYLE} />
+      </IconButton>
+
+      <IconButton>
+        <Google sx={STYLE} />
+      </IconButton>
+    </FlexRowCenter>
+  );
+}

package/src/components-v2/newsletter/styles.ts

@@ -0,0 +1,65 @@
+import styled from "@mui/material/styles/styled";
+
+// styled components
+export const Wrapper = styled("div", {
+  shouldForwardProp: (prop) => prop !== "img",
+})<{ img: string }>(({ theme, img }) => ({
+  top: "50%",
+  padding: 0,
+  left: "50%",
+  width: "100%",
+  maxWidth: 1020,
+  height: "auto",
+  borderRadius: 8,
+  outline: "none",
+  position: "absolute",
+  boxShadow: theme.shadows[3],
+  transform: "translate(-50%, -50%)",
+  backgroundColor: theme.palette.background.paper,
+  ".content": {
+    zIndex: 2,
+    padding: 24,
+    textAlign: "center",
+    position: "relative",
+  },
+  ".clear-btn": {
+    top: 8,
+    right: 8,
+    zIndex: 2,
+    position: "absolute",
+    color: theme.palette.grey[900],
+  },
+  ".emailInput": {
+    marginBottom: 16,
+    "& input": { padding: 16, textAlign: "center" },
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderColor: theme.palette.grey[300],
+    },
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    padding: 24,
+    maxWidth: 620,
+  },
+  [theme.breakpoints.up("md")]: {
+    padding: 32,
+    height: 550,
+    ":after": {
+      content: "''",
+      width: "100%",
+      height: "100%",
+      backgroundImage: `url(${img})`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "left",
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      position: "absolute",
+      ...(theme.direction === "rtl" && {
+        right: 0,
+        marginRight: "auto",
+        backgroundPosition: "right",
+        transform: "rotateX(180deg) rotateZ(180deg)",
+      }),
+    },
+  },
+}));

package/src/components-v2/page-sidenav/grocery-side-nav/components/link-item.tsx

@@ -0,0 +1,21 @@
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+
+// ==============================================================
+interface Props {
+  ml: number;
+  href: string;
+  title: string;
+}
+// ==============================================================
+
+export default function LinkItem({ href, title, ml = 4 }: Props) {
+  return (
+    <NavLink href={href} color="grey.700">
+      <Span display="block" ml={ml} py={1}>
+        {title}
+      </Span>
+    </NavLink>
+  );
+}

package/src/components-v2/page-sidenav/grocery-side-nav/components/list-item.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// CUSTOM ICON COMPONENTS
+// import appIcons from "icons";
+import FallbackIcon from "@/cms/blocks/Icons/Components/FallbackIcon";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+}
+// ==============================================================
+
+export default function ListItem({ title }: Props) {
+  // const Icon = appIcons[icon] as SvgIconComponent;
+  const Icon = FallbackIcon;
+
+  return (
+    <FlexBox py={1} gap={1.5} alignItems="center">
+      <Icon fontSize="small" />
+      <Span fontWeight={600}>{title}</Span>
+    </FlexBox>
+  );
+}

package/src/components-v2/page-sidenav/grocery-side-nav/components/nav-accordion.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Fragment, useState } from "react";
+import Collapse from "@mui/material/Collapse";
+// GLOBAL CUSTOM COMPONENTS
+import { AccordionHeader } from "@evenicanpm/storefront-core/src/components-v2/accordion/index";
+// LOCAL CUSTOM COMPONENT
+import ListItem from "./list-item";
+import { renderChild } from "./render-child";
+// CUSTOM DATA MODEL
+import { CategoryItem } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+type Props = { item: CategoryItem };
+// ==============================================================
+
+export default function NavAccordion({ item }: Props) {
+  const { icon, title, child } = item;
+
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Fragment>
+      <AccordionHeader
+        open={open}
+        onClick={() => setOpen((state) => !state)}
+        sx={{ padding: 0, cursor: "pointer" }}
+      >
+        <ListItem icon={icon} title={title} />
+      </AccordionHeader>
+
+      {/* RENDER NESTED ITEMS */}
+      {child ? <Collapse in={open}>{renderChild(child)}</Collapse> : null}
+    </Fragment>
+  );
+}

package/src/components-v2/page-sidenav/grocery-side-nav/components/render-child.tsx

@@ -0,0 +1,26 @@
+import { Fragment } from "react";
+import LinkItem from "./link-item";
+
+// ==============================================================
+type Item = { title: string; href: string };
+
+interface Props extends Item {
+  child?: Item[];
+}
+// ==============================================================
+
+export const renderChild = (childList: Props[], type = "parent") => {
+  // NESTED LIST
+  if (type === "parent") {
+    return childList.map(({ href, title, child }) => (
+      <Fragment key={title}>
+        <LinkItem href={href} title={title} ml={4} />
+        {child ? renderChild(child, "child") : null}
+      </Fragment>
+    ));
+  }
+
+  return childList.map((item, ind) => (
+    <LinkItem key={ind} href={item.href} title={item.title} ml={6} />
+  ));
+};

package/src/components-v2/page-sidenav/grocery-side-nav/grocery-side-nav.tsx

@@ -0,0 +1,32 @@
+// GLOBAL CUSTOM COMPONENTS
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+// LOCAL CUSTOM COMPONENTS
+import ListItem from "./components/list-item";
+import NavAccordion from "./components/nav-accordion";
+// STYLED COMPONENTS
+import { StyledCard } from "./styles/index";
+// CUSTOM DATA MODEL
+import { CategoryItem } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ===========================================================
+type Props = { navigation: CategoryItem[] };
+// ===========================================================
+
+export default function GrocerySideNav({ navigation }: Props) {
+  return (
+    <Scrollbar>
+      <StyledCard elevation={3}>
+        {navigation.map((item, ind) => {
+          if (item.child) return <NavAccordion item={item} key={ind} />;
+
+          return (
+            <NavLink key={ind} href={item.href ?? ""} color="grey.700">
+              <ListItem title={item.title} icon={item.icon} />
+            </NavLink>
+          );
+        })}
+      </StyledCard>
+    </Scrollbar>
+  );
+}

package/src/components-v2/page-sidenav/grocery-side-nav/index.ts

@@ -0,0 +1 @@
+export { default } from "./grocery-side-nav";

package/src/components-v2/page-sidenav/grocery-side-nav/styles/index.ts

@@ -0,0 +1,11 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+export const StyledCard = styled(Card)({
+  height: "100%",
+  borderRadius: 8,
+  position: "relative",
+  padding: "20px 20px 14px 24px",
+});

package/src/components-v2/page-sidenav/health-beauty-side-nav/components/list-item.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// CUSTOM ICON COMPONENTS
+// import appIcons from "icons";
+import FallbackIcon from "@/cms/blocks/Icons/Components/FallbackIcon";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+}
+// ==============================================================
+
+export default function ListItem({ title }: Props) {
+  // const Icon = appIcons[icon] as SvgIconComponent;
+  const Icon = FallbackIcon;
+
+  return (
+    <FlexBox py={1} gap={1.5} alignItems="center">
+      <Icon fontSize="small" />
+      <Span fontWeight={600}>{title}</Span>
+    </FlexBox>
+  );
+}

package/src/components-v2/page-sidenav/health-beauty-side-nav/components/nav-accordion.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Fragment, useState } from "react";
+import Collapse from "@mui/material/Collapse";
+// GLOBAL CUSTOM COMPONENTS
+import { AccordionHeader } from "@evenicanpm/storefront-core/src/components-v2/accordion/index";
+// LOCAL CUSTOM COMPONENT
+import ListItem from "./list-item";
+import { renderChild } from "./render-child";
+// CUSTOM DATA MODEL
+import { CategoryItem } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+type Props = { item: CategoryItem };
+// ==============================================================
+
+export default function NavAccordion({ item }: Props) {
+  const { icon, title, child } = item;
+
+  const [open, setOpen] = useState(false);
+
+  const STYLE = {
+    padding: 0,
+    cursor: "pointer",
+    transition: "all 150ms ease-in-out",
+    ":hover": { color: "primary.main" },
+  };
+
+  return (
+    <Fragment>
+      {/* ACCORDION / COLLAPSE HEADER */}
+      <AccordionHeader
+        open={open}
+        onClick={() => setOpen((state) => !state)}
+        sx={STYLE}
+      >
+        <ListItem icon={icon} title={title} />
+      </AccordionHeader>
+
+      {/* RENDER NESTED NAV ITEMS */}
+      {child ? <Collapse in={open}>{renderChild(child)}</Collapse> : null}
+    </Fragment>
+  );
+}

package/src/components-v2/page-sidenav/health-beauty-side-nav/components/render-child.tsx

@@ -0,0 +1,20 @@
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+// STYLED COMPONENTS
+import { Circle, DotListItem } from "../styles/index";
+
+// ==============================================================
+type Item = { title: string; href: string };
+// ==============================================================
+
+// RENDER THE NESTED CHILD
+export const renderChild = (childList: Item[]) => {
+  return childList.map((item) => (
+    <NavLink href={item.href} key={item.title} color="grey.700">
+      <DotListItem>
+        <Circle className="dot" />
+        <Span lineHeight={1}>{item.title}</Span>
+      </DotListItem>
+    </NavLink>
+  ));
+};

package/src/components-v2/page-sidenav/health-beauty-side-nav/health-beauty-side-nav.tsx

@@ -0,0 +1,43 @@
+// GLOBAL CUSTOM COMPONENTS
+import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// LOCAL CUSTOM COMPONENT
+import ListItem from "./components/list-item";
+import NavAccordion from "./components/nav-accordion";
+// STYLED COMPONENT
+import { NavbarRoot } from "./styles/index";
+// CUSTOM DATA MODEL
+import { CategoryItem } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// =================================================================
+type Props = { navigation: CategoryItem[] };
+// =================================================================
+
+export default function HealthBeautySideNav({ navigation }: Props) {
+  return (
+    <Scrollbar>
+      <NavbarRoot elevation={0}>
+        <FlexBox
+          padding="10px 18px"
+          borderRadius="0 0 8px 8px"
+          bgcolor="primary.200"
+          mb={1}
+        >
+          <H4>Categories</H4>
+        </FlexBox>
+
+        {navigation.map((item, ind) => {
+          if (item.child) return <NavAccordion item={item} key={ind} />;
+
+          return (
+            <NavLink key={ind} href={item.href ?? ""} color="grey.700">
+              <ListItem title={item.title} icon={item.icon} />
+            </NavLink>
+          );
+        })}
+      </NavbarRoot>
+    </Scrollbar>
+  );
+}

package/src/components-v2/page-sidenav/health-beauty-side-nav/index.ts

@@ -0,0 +1 @@
+export { default } from "./health-beauty-side-nav";

package/src/components-v2/page-sidenav/health-beauty-side-nav/styles/index.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+export const NavbarRoot = styled(Card)(() => ({
+  height: "100%",
+  borderRadius: 0,
+  position: "relative",
+}));
+
+export const DotListItem = styled("div")(({ theme }) => ({
+  gap: 8,
+  display: "flex",
+  paddingBlock: 10,
+  alignItems: "center",
+  transition: "all 0.2s",
+  ":hover": { ".dot": { backgroundColor: theme.palette.primary.main } },
+}));
+
+export const Circle = styled("div")(({ theme }) => ({
+  width: 4,
+  height: 4,
+  borderRadius: 3,
+  marginLeft: "2rem",
+  backgroundColor: theme.palette.grey[600],
+}));

package/src/components-v2/page-sidenav/side-navbar/components/list-item.tsx

@@ -0,0 +1,25 @@
+import { Fragment } from "react";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// CUSTOM ICON COMPONENTS
+// import appIcons from "icons";
+import FallbackIcon from "@/cms/blocks/Icons/Components/FallbackIcon";
+
+// ==============================================================
+interface Props {
+  icon: string;
+  title: string;
+}
+// ==============================================================
+
+export default function ListItem({ title }: Props) {
+  // const Icon = appIcons[icon] as SvgIconComponent;
+  const Icon = FallbackIcon;
+
+  return (
+    <Fragment>
+      <Icon fontSize="small" />
+      <Span fontWeight="600">{title}</Span>
+    </Fragment>
+  );
+}

package/src/components-v2/page-sidenav/side-navbar/components/nav-accordion.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Fragment, useState } from "react";
+import Collapse from "@mui/material/Collapse";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import AccordionHeader from "@evenicanpm/storefront-core/src/components-v2/accordion/accordion-header";
+// LOCAL CUSTOM COMPONENT
+import ListItem from "./list-item";
+import { renderChild } from "./render-child";
+// CUSTOM DATA MODEL
+import { CategoryItem } from "@evenicanpm/storefront-core/src/components-v2/bazaar-types";
+
+// ==============================================================
+interface Props {
+  item: CategoryItem;
+  handleSelect?: (category: string) => void;
+}
+// ==============================================================
+
+export default function Accordion({ item, handleSelect }: Props) {
+  const { icon, title, child } = item;
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Fragment>
+      {/* ACCORDION / COLLAPSE HEADER */}
+      <AccordionHeader
+        py={0.75}
+        open={open}
+        className="linkList"
+        onClick={() => setOpen((state) => !state)}
+      >
+        <FlexBox gap={1.5} alignItems="center">
+          <ListItem icon={icon} title={title} />
+        </FlexBox>
+      </AccordionHeader>
+
+      {/* RENDER NESTED NAV ITEMS */}
+      {child && handleSelect ? (
+        <Collapse in={open}>{renderChild(child, handleSelect)}</Collapse>
+      ) : null}
+    </Fragment>
+  );
+}

package/src/components-v2/page-sidenav/side-navbar/components/render-child.tsx

@@ -0,0 +1,20 @@
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { Circle, StyledList } from "../styles/index";
+
+interface Title {
+  title: string;
+}
+
+export const renderChild = (
+  childList: Title[],
+  handleSelect: (category: string) => void,
+) => {
+  return childList.map((item) => (
+    <StyledList key={item.title} onClick={() => handleSelect(item.title)}>
+      <Circle className="dot" />
+      <Span py={0.75} flex="1 1 0">
+        {item.title}
+      </Span>
+    </StyledList>
+  ));
+};

package/src/components-v2/page-sidenav/side-navbar/index.ts

@@ -0,0 +1 @@
+export { default } from "./side-nav-bar";