@evenicanpm/storefront-core 1.1.0 → 1.2.0

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

@@ -1,147 +0,0 @@
-"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/_components/flex-box/index";
-import {
-  H6,
-  Tiny,
-} from "@evenicanpm/storefront-core/src/components/_components/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/_components/mini-cart/components/empty-view.tsx

@@ -1,29 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/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/_components/mini-cart/components/top-header.tsx

@@ -1,37 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-import Clear from "@mui/icons-material/Clear";
-// LOCAL CUSTOM COMPONENTS
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components/_components/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/_components/mini-cart/index.ts

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

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

@@ -1,107 +0,0 @@
-"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/_components/scrollbar/index";
-// CUSTOM UTILS LIBRARY FUNCTION
-// CUSTOM DATA MODEL
-import { Cart, CartLine } from "@/schemas/cart.schema";
-import { useFormatter } from "next-intl";
-import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
-import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/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/_components/mobile-navigation/index.ts

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

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

@@ -1,73 +0,0 @@
-"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/_components/icons/home";
-import User2 from "@evenicanpm/storefront-core/src/components/_components/icons/user2";
-import CategoryOutlined from "@evenicanpm/storefront-core/src/components/_components/icons/category-outline";
-import ShoppingBagOutlined from "@evenicanpm/storefront-core/src/components/_components/icons/shopping-bag-outlined";
-// STYLED COMPONENTS
-import { iconStyle, StyledBox, StyledNavLink, Wrapper } from "./styles/index";
-import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
-import { NavContext } from "@/components/NavProvider/index";
-
-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/_components/mobile-navigation/styles/index.ts

@@ -1,63 +0,0 @@
-import Drawer from "@mui/material/Drawer";
-import styled from "@mui/material/styles/styled";
-import { NavLink } from "@/components/_components/nav-link/index";
-import { layoutConstant } from "@/components/_components/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/_components/nav-link/index.ts

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

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

@@ -1,32 +0,0 @@
-import Link from "next/link";
-// GLOBAL CUSTOM COMPONENT
-import { Small } from "@evenicanpm/storefront-core/src/components/_components/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/_components/nav-link/nav-link-3.tsx

@@ -1,67 +0,0 @@
-"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/_components/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/_components/nav-link/nav-link.tsx

@@ -1,53 +0,0 @@
-"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/_components/navbar/categories.tsx

@@ -1,27 +0,0 @@
-import { MdChevronRight as ChevronRight } from "react-icons/md";
-import { useTranslations } from "next-intl";
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import CategoryMenu from "@evenicanpm/storefront-core/src/components/_components/categories/category-menu";
-// CUSTOM ICON COMPONENT
-import Category from "@evenicanpm/storefront-core/src/components/_components/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>
-      )}
-    />
-  );
-}