@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/mini-cart/components/cart-item.tsx

@@ -0,0 +1,147 @@
+"use client";
+import Link from "next/link";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Avatar from "@mui/material/Avatar";
+import IconButton from "@mui/material/IconButton";
+// MUI ICON COMPONENTS
+import Add from "@mui/icons-material/Add";
+import Close from "@mui/icons-material/Close";
+import Remove from "@mui/icons-material/Remove";
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import {
+  H6,
+  Tiny,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { CartLine } from "@/schemas/cart.schema";
+import { useFormatter, useTranslations } from "next-intl";
+import { CircularProgress } from "@mui/material";
+import { getProductDetailUrl } from "@/lib/build-product-detail-url";
+
+// ==============================================================
+interface Props {
+  item: CartLine;
+  handleCartAmountChange: (cartLine: CartLine) => void;
+  isLineUpdating: boolean;
+  closeDrawer: () => void;
+}
+// ==============================================================
+
+const MiniCartItem: React.FC<Props> = ({
+  closeDrawer,
+  handleCartAmountChange,
+  isLineUpdating,
+  item,
+}) => {
+  const { number } = useFormatter();
+  const t = useTranslations("Cart.CartLine");
+  const currency = (value: number) =>
+    number(value, { style: "currency", currency: "USD" });
+  const quantity = item.Quantity || 0;
+  const onIncreaseClick = () => {
+    const qty = item.Quantity || 0;
+    handleCartAmountChange({ ...item, Quantity: qty + 1 });
+  };
+  return (
+    <FlexBox
+      py={2}
+      px={2.5}
+      key={item.LineId}
+      alignItems="center"
+      borderBottom="1px solid"
+      borderColor="divider"
+    >
+      <FlexBox
+        minWidth={30}
+        minHeight={85}
+        alignItems="center"
+        justifyContent="center"
+      >
+        {!isLineUpdating ? (
+          <FlexBox alignItems="center" flexDirection="column">
+            <Button
+              size="small"
+              color="primary"
+              variant="outlined"
+              onClick={onIncreaseClick}
+              title={t("increaseQuantity")}
+              sx={{ height: 28, width: 28, borderRadius: 50 }}
+            >
+              <Add fontSize="small" />
+            </Button>
+
+            <H6 my="3px">{item.Quantity}</H6>
+
+            <Button
+              data-testid={"decreaseQuantity"}
+              size="small"
+              color="primary"
+              variant="outlined"
+              title={t("decreaseQuantity")}
+              disabled={item.Quantity === 1}
+              onClick={() =>
+                handleCartAmountChange({ ...item, Quantity: quantity - 1 })
+              }
+              sx={{ height: 28, width: 28, borderRadius: 50 }}
+            >
+              <Remove fontSize="small" />
+            </Button>
+          </FlexBox>
+        ) : (
+          <CircularProgress size={"10px"} color={"primary"} />
+        )}
+      </FlexBox>
+
+      <Link
+        href={item.Product ? getProductDetailUrl(item.Product) : ""}
+        onClick={() => closeDrawer()}
+      >
+        <Avatar
+          alt={item.Product?.Name}
+          src={item.Product?.PrimaryImageUrl}
+          sx={{ mx: 1, width: 75, height: 75 }}
+        />
+      </Link>
+
+      <Box
+        flex="1"
+        textOverflow="ellipsis"
+        whiteSpace="nowrap"
+        overflow="hidden"
+      >
+        <Link
+          href={item.Product ? getProductDetailUrl(item.Product) : ""}
+          onClick={() => closeDrawer()}
+        >
+          <H6 ellipsis className="title">
+            {item.Product?.Name}
+          </H6>
+        </Link>
+        <H6 color="grey.600" mt={0.5}>
+          {item?.Product?.Dimensions?.map((d, i) => (
+            <span key={i}>{d?.DimensionValue?.Value + " "}</span>
+          ))}
+        </H6>
+        <Tiny color="grey.600">
+          {currency(item.Price || 0)} x {quantity}
+        </Tiny>
+
+        <H6 color="primary.main" mt={0.5}>
+          {currency(item.TotalAmount || 0)}
+        </H6>
+      </Box>
+
+      <IconButton
+        size="small"
+        onClick={() => handleCartAmountChange({ ...item, Quantity: 0 })}
+        sx={{ marginLeft: 2.5 }}
+        title={t("removeItem")}
+      >
+        <Close fontSize="small" />
+      </IconButton>
+    </FlexBox>
+  );
+};
+
+export default MiniCartItem;

package/src/components-v2/mini-cart/components/empty-view.tsx

@@ -0,0 +1,29 @@
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useTranslations } from "next-intl";
+
+import { MdShoppingBag as ShoppingBag } from "react-icons/md";
+
+export default function EmptyCartView() {
+  const t = useTranslations("Cart");
+  return (
+    <FlexBox
+      alignItems="center"
+      flexDirection="column"
+      justifyContent="center"
+      height="calc(100% - 74px)"
+    >
+      <ShoppingBag />
+      <Paragraph
+        fontSize={15}
+        mt={2}
+        color="grey.600"
+        textAlign="center"
+        maxWidth={200}
+      >
+        {t("emptyCartMsg")}
+      </Paragraph>
+    </FlexBox>
+  );
+}

package/src/components-v2/mini-cart/components/top-header.tsx

@@ -0,0 +1,37 @@
+import IconButton from "@mui/material/IconButton";
+import Clear from "@mui/icons-material/Clear";
+// LOCAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+// CUSTOM ICON COMPONENT
+import { MdOutlineShoppingBag as CartBag } from "react-icons/md";
+import { useTranslations } from "next-intl";
+
+// ==============================================================
+interface Props {
+  total: number;
+  toggle: () => void;
+}
+// ==============================================================
+
+export default function TopHeader({ toggle, total }: Props) {
+  const t = useTranslations("Cart");
+  return (
+    <FlexBetween mx={3} height={74}>
+      <FlexBox gap={1} alignItems="center" color="secondary.main">
+        <CartBag color="inherit" />
+
+        <Paragraph lineHeight={0} fontWeight={600}>
+          {t("count", { count: total })}
+        </Paragraph>
+      </FlexBox>
+
+      <IconButton onClick={toggle} title={t("closeMiniCart")}>
+        <Clear />
+      </IconButton>
+    </FlexBetween>
+  );
+}

package/src/components-v2/mini-cart/index.ts

@@ -0,0 +1 @@
+export { default as MiniCart } from "./mini-cart";

package/src/components-v2/mini-cart/mini-cart.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+
+// LOCAL CUSTOM COMPONENTS
+import TopHeader from "./components/top-header";
+import MiniCartItem from "./components/cart-item";
+import EmptyCartView from "./components/empty-view";
+import BottomActions from "./components/bottom-actions";
+// GLOBAL CUSTOM COMPONENT
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+// CUSTOM UTILS LIBRARY FUNCTION
+// CUSTOM DATA MODEL
+import { Cart, CartLine } from "@/schemas/cart.schema";
+import { useFormatter } from "next-intl";
+import useUpdateCartLines from "@/services/cart/mutations/update-cart-lines";
+import useDeleteCartLine from "@/services/cart/mutations/delete-cart-line";
+
+// =========================================================
+export interface MiniCartProps {
+  cart: Cart;
+  closeDrawer: () => void;
+}
+// =========================================================
+
+export default function MiniCart({ cart, closeDrawer }: MiniCartProps) {
+  const { push } = useRouter();
+  const { number } = useFormatter();
+  const currency = (value: number) =>
+    number(value, { style: "currency", currency: "USD" });
+  const {
+    mutate: updateLine,
+    isPending: isUpdatePending,
+    variables: updateVariables,
+  } = useUpdateCartLines();
+  const {
+    mutate: deleteLine,
+    isPending: isDeletePending,
+    variables: deleteVariables,
+  } = useDeleteCartLine();
+
+  const shouldShowLoadingSpinner = (lineId: string) =>
+    (isUpdatePending || isDeletePending) &&
+    (updateVariables?.cartLine[0].LineId === lineId ||
+      deleteVariables?.cartLine[0].LineId === lineId);
+
+  const handleCartAmountChange = (cartLine: CartLine) => {
+    if (cartLine.Quantity === 0) {
+      deleteLine({
+        cartLine: [cartLine],
+        cartId: cart.Id,
+        version: cart.Version,
+      });
+      return;
+    }
+    updateLine({
+      cartLine: [cartLine],
+      cartId: cart.Id,
+      version: cart.Version,
+    });
+  };
+
+  const handleNavigate = (path: string) => () => {
+    // toggleSidenav();
+    push(path);
+  };
+
+  return (
+    <Box width="100%" minWidth={380}>
+      {/* HEADING SECTION */}
+      <TopHeader toggle={closeDrawer} total={cart?.CartLines.length || 0} />
+
+      <Divider />
+
+      <Box
+        height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}
+      >
+        {/* CART ITEM LIST */}
+        {cart.CartLines.length > 0 ? (
+          <Scrollbar>
+            {cart?.CartLines?.map((item) => (
+              <MiniCartItem
+                item={item}
+                key={item.LineId}
+                handleCartAmountChange={handleCartAmountChange}
+                isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
+                closeDrawer={closeDrawer}
+              />
+            ))}
+          </Scrollbar>
+        ) : (
+          <EmptyCartView />
+        )}
+      </Box>
+
+      {/* CART BOTTOM ACTION BUTTONS */}
+      {cart?.CartLines.length > 0 ? (
+        <BottomActions
+          total={currency(cart?.TotalAmount || 0)}
+          handleNavigate={handleNavigate}
+        />
+      ) : null}
+    </Box>
+  );
+}

package/src/components-v2/mobile-navigation/index.ts

@@ -0,0 +1,3 @@
+import MobileNavigationBar from "./mobile-navigation-bar";
+
+export { MobileNavigationBar };

package/src/components-v2/mobile-navigation/mobile-navigation-bar.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Fragment, useContext } from "react";
+import Box from "@mui/material/Box";
+import Badge from "@mui/material/Badge";
+import { Theme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+// CUSTOM ICON COMPONENTS
+import Home from "@evenicanpm/storefront-core/src/components-v2/icons/home";
+import User2 from "@evenicanpm/storefront-core/src/components-v2/icons/user2";
+import CategoryOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/category-outline";
+import ShoppingBagOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/shopping-bag-outlined";
+// STYLED COMPONENTS
+import { iconStyle, StyledBox, StyledNavLink, Wrapper } from "./styles/index";
+import getCart from "@/services/cart/queries/get-cart";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+
+const MENU_LIST = [
+  { title: "home", Icon: Home, href: "/" },
+  { title: "category", Icon: CategoryOutlined },
+  { title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
+  { title: "account", Icon: User2, href: "/account/profile" },
+];
+
+export default function MobileNavigationBar2() {
+  const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
+
+  const t = useTranslations("Navigation.Mobile");
+
+  const { toggleMobileSideNav } = useContext(NavContext);
+
+  const { data: cart } = getCart.useData();
+
+  if (DOWN_900) {
+    return (
+      <Box position="relative" display="flex" flexDirection="column">
+        <Wrapper>
+          {MENU_LIST.map(({ Icon, title, href }) => {
+            // Link inner content
+            const ICON = <Icon sx={iconStyle} fontSize="small" />;
+
+            const CONTENT = (
+              <Fragment>
+                {title === "cart" ? (
+                  <Badge badgeContent={cart?.TotalItems || 0} color="primary">
+                    {ICON}
+                  </Badge>
+                ) : (
+                  ICON
+                )}
+
+                {t(title)}
+              </Fragment>
+            );
+
+            return href ? (
+              <StyledNavLink key={title} href={href}>
+                {CONTENT}
+              </StyledNavLink>
+            ) : (
+              <StyledBox key={title} onClick={toggleMobileSideNav}>
+                {CONTENT}
+              </StyledBox>
+            );
+          })}
+        </Wrapper>
+      </Box>
+    );
+  }
+
+  return null;
+}

package/src/components-v2/mobile-navigation/styles/index.ts

@@ -0,0 +1,63 @@
+import Drawer from "@mui/material/Drawer";
+import styled from "@mui/material/styles/styled";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
+
+// STYLED COMPONENTS
+const Wrapper = styled("div")(({ theme }) => ({
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "none",
+  position: "fixed",
+  justifyContent: "space-around",
+  zIndex: theme.zIndex.drawer + 1,
+  height: layoutConstant.mobileNavHeight,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: "0px 1px 4px 3px rgba(0, 0, 0, 0.1)",
+  "@media only screen and (max-width: 900px)": {
+    display: "flex",
+    width: "100vw",
+  },
+}));
+
+const StyledNavLink = styled(NavLink)({
+  flex: "1 1 0",
+  display: "flex",
+  fontSize: "13px",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+});
+
+const StyledBox = styled("div")(({ theme }) => ({
+  flex: "1 1 0",
+  display: "flex",
+  fontSize: "13px",
+  cursor: "pointer",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+  transition: "color 150ms ease-in-out",
+  "&:hover": { color: `${theme.palette.primary.main} !important` },
+}));
+
+const StyledDrawer = styled(Drawer)(({ theme }) => ({
+  width: 250,
+  zIndex: 1501,
+  flexShrink: 0,
+  "& .MuiDrawer-paper": {
+    width: 250,
+    boxSizing: "border-box",
+    boxShadow: theme.shadows[2],
+  },
+}));
+
+const iconStyle = {
+  display: "flex",
+  marginBottom: "4px",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+export { Wrapper, StyledBox, StyledNavLink, StyledDrawer, iconStyle };

package/src/components-v2/nav-link/index.ts

@@ -0,0 +1,5 @@
+import NavLink from "./nav-link";
+import NavLink2 from "./nav-link-2";
+import NavLink3 from "./nav-link-3";
+
+export { NavLink, NavLink2, NavLink3 };

package/src/components-v2/nav-link/nav-link-2.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+// GLOBAL CUSTOM COMPONENT
+import { Small } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+// ==============================================================
+interface NavLinkProps {
+  url: string;
+  title: string;
+  color?: string;
+  borderColor?: string;
+}
+// ==============================================================
+
+export default function NavLink2({
+  url,
+  color,
+  title = "SHOP NOW",
+  borderColor = "primary.600",
+}: NavLinkProps) {
+  return (
+    <Link href={url}>
+      <Small
+        fontWeight="700"
+        borderBottom={2}
+        color={color}
+        borderColor={borderColor}
+      >
+        {title}
+      </Small>
+    </Link>
+  );
+}

package/src/components-v2/nav-link/nav-link-3.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import Link from "next/link";
+// MUI ICON COMPONENT
+import ArrowForward from "@mui/icons-material/ArrowForward";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+//   ==========================================
+interface Props {
+  href: string;
+  text: string;
+  color?: string;
+  hoverColor?: string;
+}
+//   ==========================================
+
+export default function NavLink3({
+  href,
+  text,
+  color = "text.primary",
+  hoverColor = "primary.main",
+  ...props
+}: Props) {
+  return (
+    <Link href={href}>
+      <Span
+        color={color}
+        sx={{
+          color,
+          gap: 1,
+          lineHeight: 1,
+          fontWeight: 600,
+          alignItems: "center",
+          position: "relative",
+          paddingBottom: "4px",
+          display: "inline-flex",
+          ":after": {
+            left: 0,
+            bottom: 0,
+            width: "0%",
+            content: "''",
+            height: "2px",
+            transition: "0.3s",
+            position: "absolute",
+            backgroundColor: color,
+          },
+          ":hover": {
+            color: hoverColor,
+            "&::after": { width: "100%", backgroundColor: hoverColor },
+          },
+        }}
+        {...props}
+      >
+        {text}{" "}
+        <ArrowForward
+          sx={{
+            fontSize: 14,
+            flexShrink: 0,
+            transform: ({ direction }) =>
+              `rotate(${direction === "rtl" ? "180deg" : "0deg"})`,
+          }}
+        />
+      </Span>
+    </Link>
+  );
+}

package/src/components-v2/nav-link/nav-link.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { AnchorHTMLAttributes, CSSProperties } from "react";
+import styled from "@mui/material/styles/styled";
+import clsx from "clsx";
+
+// STYLED COMPONENT
+const StyledLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: number }>(({ theme, active }) => ({
+  position: "relative",
+  transition: "color 150ms ease-in-out",
+  color: active ? theme.palette.primary.main : "inherit",
+  "&:hover": { color: `${theme.palette.primary.main} !important` },
+}));
+
+// ==============================================================
+export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  style?: CSSProperties;
+  className?: string;
+}
+// ==============================================================
+
+export default function NavLink({
+  href,
+  children,
+  style,
+  className,
+  ...props
+}: NavLinkProps) {
+  const pathname = usePathname();
+
+  // CHECK CURRENT ROUTE
+  const checkRouteMatch = () => {
+    if (href === "/") return pathname === href;
+    return pathname?.includes(href);
+  };
+
+  return (
+    <StyledLink
+      href={href}
+      style={style}
+      className={clsx(className)}
+      active={checkRouteMatch() ? 1 : 0}
+      {...props}
+    >
+      {children}
+    </StyledLink>
+  );
+}

package/src/components-v2/navbar/categories.tsx

@@ -0,0 +1,27 @@
+import { MdChevronRight as ChevronRight } from "react-icons/md";
+import { useTranslations } from "next-intl";
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import CategoryMenu from "@evenicanpm/storefront-core/src/components-v2/categories/category-menu";
+// CUSTOM ICON COMPONENT
+import Category from "@evenicanpm/storefront-core/src/components-v2/icons/category";
+// STYLED COMPONENT
+import { CategoryMenuButton } from "./styles";
+
+export default function Categories() {
+  const t = useTranslations("Navigation");
+  return (
+    <CategoryMenu
+      render={(handler) => (
+        <CategoryMenuButton variant="text" onClick={(e) => handler(e)}>
+          <div className="prefix">
+            <Category fontSize="small" />
+            <Paragraph fontWeight={600}>{t("topLevelCategoryName")}</Paragraph>
+          </div>
+
+          <ChevronRight className="dropdown-icon" fontSize="large" />
+        </CategoryMenuButton>
+      )}
+    />
+  );
+}