@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

package/src/components/_components/wishlist/components/dashboard-header.tsx

@@ -0,0 +1,123 @@
+import React, { ReactNode } from "react";
+import Link from "next/link";
+import { Box, Button, IconButton, Theme, styled } from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+// ICON COMPONENTS
+import { MdMenu as Menu } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import SideNav from "@evenicanpm/storefront-core/src/components/_components/side-nav/index";
+import { H2 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
+// LOCAL CUSTOM COMPONENTS
+import Navigation from "./navigation";
+import { IconType } from "react-icons";
+
+// STYLED COMPONENT
+const StyledBox = styled("div")(({ theme }) => ({
+  display: "flex",
+  marginTop: theme.spacing(-2),
+  marginBottom: theme.spacing(3),
+  "& .headerHold": {
+    flexGrow: 1,
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  [theme.breakpoints.up("md")]: {
+    "& .sidenav": { display: "none" },
+  },
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+  },
+}));
+
+// ==============================================================
+
+type WithButtons = {
+  title: string;
+  titleMessage?: string;
+  buttons: ReactNode;
+  Icon: IconType;
+  href?: never;
+  buttonText?: never;
+};
+
+type WithGeneratedButton = {
+  title: string;
+  titleMessage?: string;
+  href?: string;
+  buttonText?: string;
+  Icon: IconType;
+  buttons?: ReactNode;
+};
+
+type Props = WithButtons | WithGeneratedButton;
+
+// ==============================================================
+
+export default function DashboardHeader({
+  title,
+  titleMessage,
+  buttons,
+  href,
+  buttonText,
+  Icon,
+}: Props) {
+  const t = useTranslations();
+  const isTablet = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(1025),
+  );
+
+  const GENERATED_BUTTON = href ? (
+    <Button
+      href={href}
+      color="primary"
+      LinkComponent={Link}
+      sx={{ bgcolor: "primary.light", px: 4 }}
+    >
+      {t(buttonText)}
+    </Button>
+  ) : null;
+
+  const HEADER_LINKS = (
+    <FlexBox gap={1} justifyContent="flex-end">
+      {buttons || GENERATED_BUTTON}
+    </FlexBox>
+  );
+
+  return (
+    <StyledBox>
+      <FlexBox mt={2} className="headerHold">
+        <FlexBox alignItems="center" gap={0.5}>
+          {Icon && (
+            <IconButton color="primary">
+              <Icon />
+            </IconButton>
+          )}
+          <H2 my={0} lineHeight={1} ellipsis>
+            {titleMessage ? titleMessage : t(title)}
+          </H2>
+        </FlexBox>
+
+        <FlexBox className="button-container" justifyContent="flex-end">
+          {!isTablet && HEADER_LINKS}
+        </FlexBox>
+
+        <div className="sidenav">
+          <SideNav
+            position="left"
+            handler={(close) => (
+              <IconButton onClick={close}>
+                <Menu fontSize="small" />
+              </IconButton>
+            )}
+          >
+            <Navigation />
+          </SideNav>
+        </div>
+      </FlexBox>
+
+      {isTablet ? <Box mt={2}>{HEADER_LINKS}</Box> : null}
+    </StyledBox>
+  );
+}

package/src/components/_components/wishlist/components/navigation.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Fragment } from "react";
+import { useTranslations } from "next-intl";
+
+// ICON COMPONENTS
+import {
+  MdOutlineShoppingBag as ShoppingBagOutlined,
+  MdFavoriteBorder as FavoriteBorder,
+  MdPerson as Person,
+  MdPlace as Place,
+} from "react-icons/md";
+
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
+import {
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components/_components/Typography";
+
+// API
+import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
+import getUserCounts from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user-counts";
+
+// STYLED COMPONENTS
+import { MainContainer, StyledNavLink } from "../styles";
+
+const MENU_ITEMS = [
+  {
+    title: "DASHBOARD",
+    list: [
+      {
+        href: "/account/orders",
+        title: "orders",
+        Icon: ShoppingBagOutlined,
+        count: 0,
+      },
+      { href: "/account/wish-lists", title: "wishlists", Icon: FavoriteBorder },
+    ],
+  },
+  {
+    title: "ACCOUNT SETTINGS",
+    list: [
+      { href: "/account/profile", title: "profile", Icon: Person },
+      { href: "/account/addresses", title: "addresses", Icon: Place, count: 0 },
+    ],
+  },
+];
+
+export default function Navigation() {
+  const pathname = usePathname();
+  const t = useTranslations("Account.Menu");
+
+  const { data: user } = getUser.useData();
+  const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
+
+  MENU_ITEMS[0].list[0].count = counts?.orderCount;
+  MENU_ITEMS[1].list[1].count = counts?.addressCount;
+
+  return (
+    <MainContainer>
+      {MENU_ITEMS.map((item) => (
+        <Fragment key={item.title}>
+          <Paragraph p="26px 30px 1rem" color="grey.600" fontSize={12}>
+            {item.title}
+          </Paragraph>
+
+          {item.list.map(({ Icon, count, href, title }) => (
+            <StyledNavLink
+              href={href}
+              key={title}
+              isCurrentPath={pathname.includes(href)}
+            >
+              <FlexBox alignItems="center" gap={1}>
+                <Icon color="inherit" fontSize="large" className="nav-icon" />
+                <Span>{t(title)}</Span>
+              </FlexBox>
+
+              <Span>{count}</Span>
+            </StyledNavLink>
+          ))}
+        </Fragment>
+      ))}
+    </MainContainer>
+  );
+}

package/src/components/_components/wishlist/components/no-records.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { H4 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
+import { useTranslations } from "next-intl";
+
+type Props = { message: string };
+
+export default function NoRecords({ message }: Props) {
+  const t = useTranslations();
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      height="50vh"
+    >
+      <H4 color="grey.500">{t(message)}</H4>
+    </Box>
+  );
+}

package/src/components/_components/wishlist/components/wishlist-modal-item.tsx

@@ -0,0 +1,66 @@
+import { Button } from "@mui/material";
+import { format } from "date-fns";
+// MUI ICON COMPONENTS
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
+// LOCAL CUSTOM COMPONENT
+
+// API
+import { Wishlist } from "@/api-manager/schemas/user.schema";
+import { StyledTableRow } from "../styles";
+
+interface Props {
+  wishlist: Wishlist;
+  addToWishlist?: (wishlistId: string) => void;
+  removeFromWishlist?: (wishlistId: string) => void;
+}
+
+export default function WishlistModalItem({
+  wishlist,
+  addToWishlist,
+  removeFromWishlist,
+}: Props) {
+  const handleClick = () => {
+    if (addToWishlist) {
+      addToWishlist(wishlist.Id);
+    } else if (removeFromWishlist) {
+      removeFromWishlist(wishlist.Id);
+    }
+  };
+  return (
+    <StyledTableRow
+      sx={{
+        display: "grid",
+        gridTemplateColumns: "2fr 1fr 1fr 1fr", // Define equal column structure
+        alignItems: "center",
+        gap: 2,
+        padding: "10px 15px",
+        width: "500px",
+        cursor: "default",
+      }}
+    >
+      <Paragraph ellipsis sx={{ fontWeight: "bold" }}>
+        {wishlist?.Name ?? ""}
+      </Paragraph>
+      <Paragraph ellipsis>
+        {" "}
+        {format(
+          new Date(wishlist?.CreatedDateTime ?? wishlist?.LastUpdated ?? ""),
+          "MMM dd, yyyy",
+        )}
+      </Paragraph>
+      <Paragraph ellipsis>
+        {" "}
+        {`${wishlist?.ProductListLines?.length} products`}
+      </Paragraph>
+
+      <Button
+        onClick={handleClick}
+        color="primary"
+        sx={{ bgcolor: "primary.light", px: 4 }}
+      >
+        {addToWishlist ? "Add" : "Remove"}
+      </Button>
+    </StyledTableRow>
+  );
+}

package/src/components/_components/wishlist/remove-from-wishlist-dialog.tsx

@@ -0,0 +1,174 @@
+import React, { Fragment, useCallback, useEffect } from "react";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import { Grid, Button, Dialog, DialogContent } from "@mui/material";
+import { MdFavorite } from "react-icons/md";
+// Global Custom components
+import DashboardHeader from "./components/dashboard-header";
+import WishlistModalItem from "./components/wishlist-modal-item";
+import NoRecords from "./components/no-records";
+// API
+import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+import {
+  ExtendedProductListLine,
+  Wishlist,
+  WishlistLinesInput,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+import { useSession } from "next-auth/react";
+import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
+
+interface Props {
+  open: boolean;
+  // product?: ProductDetails;
+  productId?: number;
+  onSuccess?: () => void;
+  handleClose: () => void;
+}
+
+export default function RemoveFromWishlistDialog({
+  open,
+  productId,
+  handleClose,
+  onSuccess,
+}: Props) {
+  const { data: wishlists, isLoading } = getWishlists.useSuspenseData();
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
+
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+
+  const [relevantWishlists, setRelevantWishlists] = React.useState<Wishlist[]>(
+    [],
+  );
+
+  const handleCloseDialog = () => {
+    if (isFunction(handleClose)) {
+      handleClose();
+    }
+  };
+
+  // get wishlists that the product is in
+  const getRelevantWishlists = useCallback(
+    (wishlists: Wishlist[]) => {
+      return wishlists.filter((wishlist) =>
+        wishlist.ProductListLines?.some((line) => line.ProductId === productId),
+      );
+    },
+    [productId],
+  );
+
+  const handleRemoveFromWishlist = useCallback(
+    async (wishlistId: string) => {
+      // get the selected wishlist
+      const wishlist = relevantWishlists.find(
+        (wishlist) => wishlist.Id === wishlistId,
+      );
+      if (wishlist) {
+        try {
+          const extendedWishlistLine = wishlist.ProductListLines?.find(
+            (item: ExtendedProductListLine) => item.ProductId === productId,
+          );
+
+          if (extendedWishlistLine) {
+            const wishlistLinesInput: WishlistLinesInput = {
+              Id: wishlist.Id,
+              ProductListLines: [extendedWishlistLine],
+            };
+
+            await removeFromWishlist(wishlistLinesInput);
+
+            setNotification({
+              message: t("wishlistLineRemoveSuccess"),
+              severity: "success",
+            });
+            if (isFunction(onSuccess)) {
+              onSuccess();
+            }
+          }
+        } catch (error) {
+          setNotification({
+            message: t("wishlistLineRemoveFailed"),
+            severity: "error",
+          });
+        }
+      }
+    },
+    [
+      relevantWishlists,
+      removeFromWishlist,
+      setNotification,
+      t,
+      onSuccess,
+      productId,
+    ],
+  );
+
+  useEffect(() => {
+    const withlistsWithProduct = getRelevantWishlists(wishlists);
+    setRelevantWishlists(withlistsWithProduct);
+    if (open && withlistsWithProduct.length === 1) {
+      // delete right away
+      handleRemoveFromWishlist(withlistsWithProduct[0].Id);
+    }
+  }, [open, getRelevantWishlists, handleRemoveFromWishlist, wishlists]);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleCloseDialog}
+      aria-labelledby="form-dialog-title"
+    >
+      <DialogContent>
+        <Fragment>
+          <DashboardHeader
+            title="Account.Wishlists.heading"
+            Icon={MdFavorite}
+            href=""
+            buttonText=""
+          />
+          {isAuthenticated && !isLoading ? (
+            relevantWishlists && relevantWishlists.length > 0 ? (
+              relevantWishlists?.map((wishlist: Wishlist) => (
+                <WishlistModalItem
+                  key={wishlist.Id}
+                  wishlist={wishlist}
+                  removeFromWishlist={handleRemoveFromWishlist}
+                />
+              ))
+            ) : (
+              <NoRecords message="Account.Wishlists.noWishlists" />
+            )
+          ) : (
+            <NoRecords message="Account.Wishlists.wishlistAddUnauthenticated" />
+          )}
+        </Fragment>
+        <Grid container spacing={3}>
+          <Grid
+            item
+            sm={12}
+            xs={12}
+            sx={{
+              display: "flex",
+              justifyContent: "flex-start",
+              gap: 2,
+            }}
+          >
+            <Button
+              color="primary"
+              variant="outlined"
+              size="small"
+              onClick={handleCloseDialog}
+              sx={{ height: 30.75 }}
+            >
+              {t("btnCancel")}
+            </Button>
+          </Grid>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/_components/wishlist/styles.ts

@@ -0,0 +1,61 @@
+import Card, { CardProps } from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+import NavLink, {
+  NavLinkProps,
+} from "@evenicanpm/storefront-core/src/components/_components/nav-link/nav-link";
+import { ComponentType } from "react";
+
+type ExtendedNavLinkProps = NavLinkProps & {
+  isCurrentPath?: boolean;
+};
+
+export const MainContainer: ComponentType<CardProps> = styled(Card)(
+  ({ theme }) => ({
+    paddingBottom: "1.5rem",
+    [theme.breakpoints.down("md")]: {
+      boxShadow: "none",
+      overflowY: "auto",
+      height: "calc(100vh - 64px)",
+    },
+  }),
+) as typeof Card;
+
+export const StyledNavLink: ComponentType<ExtendedNavLinkProps> = styled(
+  NavLink,
+  {
+    shouldForwardProp: (prop) => prop !== "isCurrentPath",
+  },
+)<ExtendedNavLinkProps>(({ theme, isCurrentPath }) => ({
+  display: "flex",
+  alignItems: "center",
+  borderLeft: "4px solid",
+  paddingLeft: "1.5rem",
+  paddingRight: "1.5rem",
+  marginBottom: "1.25rem",
+  justifyContent: "space-between",
+  borderColor: isCurrentPath ? theme.palette.primary.main : "transparent",
+  "& .nav-icon": {
+    color: isCurrentPath ? theme.palette.primary.main : theme.palette.grey[600],
+  },
+  "&:hover": {
+    borderColor: theme.palette.primary.main,
+    "& .nav-icon": { color: theme.palette.primary.main },
+  },
+}));
+
+export const StyledTableRow: ComponentType<CardProps> = styled(Card)(
+  ({ theme }) => ({
+    gap: 16,
+    marginBlock: 16,
+    display: "grid",
+    borderRadius: 10,
+    cursor: "pointer",
+    alignItems: "center",
+    padding: ".6rem 1.2rem",
+    gridTemplateColumns: "1.5fr 2fr 1.5fr auto",
+    [theme.breakpoints.down("sm")]: {
+      gap: 8,
+      gridTemplateColumns: "repeat(2, 1fr)",
+    },
+  }),
+);

package/src/components/_components/wishlist-modal/TODO.md

@@ -0,0 +1,10 @@
+# Wish List Component Dedupe
+
+Found these components inside of the /app directory in storefront,
+seems like someone created duplicates of components that were already
+inside of our client packages wishlist folder.
+
+Todo: Audit two folders and amalgamate duplicate code.
+
+Date: 2025-07-10  
+By: Sam Forderer

package/src/components/_components/wishlist-modal/add-to-wishlist-button.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import { Button, ButtonProps } from "@mui/material";
+import T from "@/components/T";
+import AddToWishlistDialog from "./add-to-wishlist-dialog";
+import { ProductDetails } from "@/api-manager/schemas/product.schema";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+
+interface Props {
+  path: string;
+  product?: ProductDetails;
+  cart?: Cart;
+  variant?: string;
+}
+
+const AddToWishlistButton = (props: Props) => {
+  const [openAddListDialog, setOpenAddListDialog] = useState(false);
+
+  const handleCloseDialog = () => {
+    setOpenAddListDialog(false);
+  };
+
+  const handleCreateNewList = () => {
+    setOpenAddListDialog(true);
+  };
+
+  // conditionally render button styles based on variant (pdp or minicart)
+  let style, btnFullwidth;
+  let btnColor: ButtonProps["color"];
+  let btnVariant: ButtonProps["variant"];
+  switch (props.variant) {
+    case "minicart":
+      style = {
+        px: 4,
+      };
+      btnFullwidth = true;
+      btnVariant = "outlined";
+      btnColor = "primary";
+      break;
+    default:
+      btnFullwidth = false;
+      btnVariant = "contained";
+      btnColor = "secondary";
+      break;
+  }
+
+  return (
+    <>
+      <Button
+        onClick={handleCreateNewList}
+        sx={style}
+        fullWidth={btnFullwidth}
+        color={btnColor}
+      >
+        <T path={props.path} />
+      </Button>
+      <AddToWishlistDialog
+        open={openAddListDialog}
+        handleClose={handleCloseDialog}
+        productId={props.product?.RecordId}
+        cart={props.cart}
+      />
+    </>
+  );
+};
+
+export default AddToWishlistButton;