@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/search-bar/utils/findCategoryNameById.ts

@@ -0,0 +1,18 @@
+import { Category } from "@msdyn365-commerce/retail-proxy";
+
+/**
+ * Looks up the category name by id.
+ */
+export const findCategoryNameById = (
+  searchCategory: number,
+  categories: any,
+  t: Function,
+) => {
+  if (searchCategory === 0) {
+    return t("Navigation.allCategoriesLabel");
+  }
+  return (
+    categories?.find((cat: Category) => cat.RecordId === searchCategory)
+      ?.Name || ""
+  );
+};

package/src/components-v2/section/compound/section-header.tsx

@@ -0,0 +1,63 @@
+/**
+ * @module Section
+ */
+"use client";
+
+import Link from "next/link";
+import { ReactNode } from "react";
+// Mui Icon Components
+import ArrowLeft from "@mui/icons-material/ArrowLeft";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+// Local Custom Components
+import { H2 } from "../../Typography";
+import { FlexBetween, FlexBox } from "../../flex-box/index";
+import useSettings from "../../../hooks/use-settings";
+
+/**
+ * @category Sub-Component
+ */
+export const SectionHeader = ({ children }: { children: ReactNode }) => {
+  return <FlexBetween mb={3}>{children}</FlexBetween>;
+};
+
+/**
+ * @category Props
+ */
+export interface TitleProps {
+  /** Title of section */
+  title: string;
+  /** Icon to display beside title */
+  icon?: ReactNode;
+}
+
+/**
+ * @category Sub-Component
+ */
+export const SectionHeaderTitle = ({ icon, title }: TitleProps) => (
+  <FlexBox alignItems="center" gap={1}>
+    {icon ?? null}
+    <H2 lineHeight={1}>{title}</H2>
+  </FlexBox>
+);
+
+/**
+ * @category Sub-Component
+ */
+export const SectionHeaderSeeMoreLink = ({ link }: { link: string }) => {
+  const { settings } = useSettings();
+  return (
+    <Link href={link}>
+      <FlexBox alignItems="center" color="grey.600">
+        View all
+        {settings.direction === "ltr" ? (
+          <ArrowRight fontSize="small" color="inherit" />
+        ) : (
+          <ArrowLeft fontSize="small" color="inherit" />
+        )}
+      </FlexBox>
+    </Link>
+  );
+};
+
+SectionHeader.Title = SectionHeaderTitle;
+SectionHeader.SeeMoreLink = SectionHeaderSeeMoreLink;

package/src/components-v2/section/compound/section.tsx

@@ -0,0 +1,26 @@
+/**
+ * @module Section
+ */
+import { ReactNode } from "react";
+import Container from "@mui/material/Container";
+import Box, { BoxProps } from "@mui/material/Box";
+import { SectionHeader } from "./section-header";
+
+interface Props extends BoxProps {
+  children: ReactNode;
+}
+
+/**
+ * @category Compound Component
+ */
+export const Section = (props: Props) => {
+  const { children, ...others } = props;
+
+  return (
+    <Box mb={7.5} {...others}>
+      <Container className="pb-1">{children}</Container>
+    </Box>
+  );
+};
+
+Section.Header = SectionHeader;

package/src/components-v2/section/index.ts

@@ -0,0 +1 @@
+export { Section } from "./compound/section";

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

@@ -3,8 +3,8 @@ import Drawer from "@mui/material/Drawer";
 // GLOBAL CUSTOM COMPONENT
 import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
 
-// ================================================================
 interface Props {
+  /** Optionally manage open state from parent, default is to use local state. */
   open?: boolean;
   width?: number;
   children: ReactNode;
@@ -12,7 +12,6 @@ interface Props {
   position?: "left" | "right";
   handler: (event: () => void) => ReactNode;
 }
-// ================================================================
 
 export default function SideNav(props: Props) {
   const {
@@ -23,10 +22,11 @@ export default function SideNav(props: Props) {
     handler,
     toggle,
   } = props;
-
+  /** If no external state, just use local. */
   const [sideNavOpen, setSideNavOpen] = useState(open);
   const handleToggleSideNav = () => setSideNavOpen(!sideNavOpen);
 
+  /** Keep external and local state in sync */
   useEffect(() => setSideNavOpen(open), [open]);
 
   const handleClose = toggle || handleToggleSideNav;
@@ -37,8 +37,7 @@ export default function SideNav(props: Props) {
         anchor={position}
         open={sideNavOpen}
         onClose={handleClose}
-        SlideProps={{ style: { width } }}
-        sx={{ zIndex: 15001 }}
+        slotProps={{ transition: { style: { width } } }}
       >
         <Scrollbar autoHide={false}>{children}</Scrollbar>
       </Drawer>

package/src/components-v2/sticky/index.ts

@@ -1 +1 @@
-export { default } from "./Sticky";
+export { default } from "./sticky";

package/src/components-v2/{wishlist-modal → wishlist-dialogs/add-to-wishlist}/add-to-wishlist-button.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { Button, ButtonProps } from "@mui/material";
 import T from "@evenicanpm/storefront-core/src/components-v2/T";
-import AddToWishlistDialog from "./add-to-wishlist-dialog";
+import AddToWishlistDialog from "./";
 import { ProductDetails } from "@/api-manager/schemas/product.schema";
 import { Cart } from "@/api-manager/schemas/cart.schema";
 

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-bottom-ui.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import { useTranslations } from "next-intl";
+import { Grid, Button } from "@mui/material";
+import { AddToWishListDialogContext } from "./context";
+
+const AddToWishListBottomUI = () => {
+  const t = useTranslations("Account.Wishlists");
+  const { handleClose } = useContext(AddToWishListDialogContext);
+  return (
+    <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={handleClose}
+          sx={{ height: 30.75 }}
+        >
+          {t("btnCancel")}
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default AddToWishListBottomUI;

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-dialog.tsx

@@ -0,0 +1,79 @@
+// EXTERNAL LIBRARIES AND REACT
+import React from "react";
+import { Dialog, DialogContent } from "@mui/material";
+import { useSession } from "next-auth/react";
+
+// LOCAL COMPONENTS
+import DialogHeader from "./wishlist-dialog-header";
+import WishlistList from "./add-to-wishlist-list";
+import AddToWishListBottomUI from "./add-to-wishlist-bottom-ui";
+
+// API AND CONTEXT
+import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import { AddToWishListDialogContext } from "./context";
+
+export interface AddToWishlistDialogProps {
+  open: boolean;
+  handleClose: () => void;
+  productId?: number;
+  cart?: Cart;
+  onSuccess?: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * A dialog with a list of wishlists and an action button either add or remove
+ * that will change depending if the selected product is in the list or not.
+ *
+ * @category Compound Component
+ * @example
+ *
+ *  <AddToWishlistDialog
+ *     cart={cart}
+ *     open={open}
+ *     handleClose={handleClose}
+ *     productId={productId}
+ *   >
+ *     <AddToWishlistDialog.Header />
+ *     <AddToWishlistDialog.List>
+ *       <AddToWishlistDialog.List.Item />
+ *     </AddToWishlistDialog.List>
+ *     <AddToWishlistDialog.BottomUI />
+ *   </AddToWishlistDialog>
+ *
+ */
+export default function AddToWishlistDialog(props: AddToWishlistDialogProps) {
+  const { data: wishlists, isPending: isLoading } = getWishlists.useData();
+
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+
+  if (isLoading) return null;
+
+  const handleClose = () => {
+    if (typeof props.handleClose === "function") {
+      props.handleClose();
+    }
+  };
+
+  return (
+    <AddToWishListDialogContext.Provider
+      value={{
+        wishlists,
+        isLoading,
+        props,
+        isAuthenticated,
+        handleClose,
+      }}
+    >
+      <Dialog open={props.open} onClose={handleClose}>
+        <DialogContent>{props.children}</DialogContent>
+      </Dialog>
+    </AddToWishListDialogContext.Provider>
+  );
+}
+
+AddToWishlistDialog.Header = DialogHeader;
+AddToWishlistDialog.List = WishlistList;
+AddToWishlistDialog.BottomUI = AddToWishListBottomUI;

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-list.tsx

@@ -0,0 +1,41 @@
+/**
+ * @module Add-To-Wishlist-Dialog
+ */
+import { useContext } from "react";
+
+// LOCAL COMPONENTS
+import WishlistItem from "./wishlist-dialog-item";
+import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
+
+// API AND CONTEXT
+import { AddToWishListDialogContext, WishListItemContext } from "./context";
+import { Wishlist } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+
+/**
+ * Maps out the list items (wishlists) or displays no records.
+ * @category Sub-Component
+ */
+const WishlistList = ({ children }: { children: React.ReactNode }) => {
+  const { wishlists, isAuthenticated, isLoading } = useContext(
+    AddToWishListDialogContext,
+  );
+
+  if (isLoading) return;
+
+  if (!isAuthenticated) {
+    return <NoRecords message="Account.Wishlists.wishlistAddUnauthenticated" />;
+  }
+
+  if (wishlists.length === 0) {
+    return <NoRecords message="Account.Wishlists.noWishlists" />;
+  }
+
+  return wishlists?.map((wishlist: Wishlist, i: number) => (
+    <WishListItemContext.Provider value={{ wishlist }} key={i + wishlist.Name}>
+      {children}
+    </WishListItemContext.Provider>
+  ));
+};
+
+WishlistList.Item = WishlistItem;
+export default WishlistList;

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/context.ts

@@ -0,0 +1,29 @@
+/**
+ * @module Add-To-Wishlist-Dialog
+ */
+import { createContext } from "react";
+import { Wishlist } from "@/api-manager/schemas/user.schema";
+import { AddToWishlistDialogProps } from "./add-to-wishlist-dialog";
+
+/**
+ * @category Context
+ */
+export interface AddToWishlistDialogContext {
+  wishlists: Wishlist[];
+  isLoading: boolean;
+  props: AddToWishlistDialogProps;
+  isAuthenticated: boolean;
+  handleClose: () => void;
+}
+
+export const AddToWishListDialogContext =
+  createContext<AddToWishlistDialogContext>(null);
+
+/**
+ * @category Context
+ */
+export interface WishlistItemContext {
+  wishlist: Wishlist;
+}
+
+export const WishListItemContext = createContext<WishlistItemContext>(null);

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-header.tsx

@@ -0,0 +1,74 @@
+/**
+ * @module Add-To-Wishlist-Dialog
+ */
+import React from "react";
+import { useSession } from "next-auth/react";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+
+// ICONS
+import { MdFavorite } from "react-icons/md";
+import { IconButton, Theme, styled } from "@mui/material";
+
+// GLOBAL COMPONENTS
+import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+
+// LOCAL COMPONENTS
+import CreateWishlistButton from "../../create-wishlist/create-wishlist-button";
+
+// 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",
+  },
+}));
+
+/**
+ * The wishlist Diaglog header. Displays a create new list button if the
+ * user is authenticated. Was extracted from dashboard-header
+ * TODO: consider amalgamation.
+ * @category Sub-Components
+ */
+export default function WishlistDialogHeader() {
+  const t = useTranslations();
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+  const isTablet = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(1025),
+  );
+
+  return (
+    <StyledBox>
+      <FlexBox
+        mt={2}
+        className="headerHold"
+        flexDirection={isTablet ? "column" : "row"}
+      >
+        <FlexBox alignItems="center" gap={0.5}>
+          <IconButton color="primary">
+            <MdFavorite />
+          </IconButton>
+          <H2 my={0} lineHeight={1} ellipsis>
+            {t("Account.Wishlists.heading")}
+          </H2>
+        </FlexBox>
+
+        <FlexBox className="button-container">
+          {isAuthenticated && <CreateWishlistButton />}
+        </FlexBox>
+      </FlexBox>
+    </StyledBox>
+  );
+}

package/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-item.tsx

@@ -0,0 +1,82 @@
+/**
+ * @module Add-To-Wishlist-Dialog
+ */
+import { Button, CircularProgress } from "@mui/material";
+import { useContext, useState } from "react";
+import { AddToWishListDialogContext, WishListItemContext } from "./context";
+import UseWishlist from "../hooks/use-add-to-wishlist";
+import { format } from "date-fns";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { StyledTableRow } from "../../styles";
+
+/**
+ * Wishlist dialog list item. Displays info about the wishlist and
+ * also has a context-aware "action" button, either add or remove depending on
+ * if the currently selected product is in the list or not.
+ * @category Sub-Component
+ */
+export default function WishlistModalItem() {
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  const { wishlist } = useContext(WishListItemContext);
+  const { wishlists } = useContext(AddToWishListDialogContext);
+  const { props } = useContext(AddToWishListDialogContext);
+  const { handleAddToWishlist, handleRemoveFromWishlist, loading } =
+    UseWishlist();
+
+  const productInWishlist = wishlist.ProductListLines?.some(
+    (line) => line.ProductId === props.productId,
+  );
+
+  const action = productInWishlist
+    ? () => handleRemoveFromWishlist(wishlist.Id, props.productId)
+    : () => handleAddToWishlist(wishlist.Id, wishlists, props);
+
+  const buttonText = productInWishlist ? "Remove" : "Add";
+
+  return (
+    <StyledTableRow
+      sx={{
+        display: "grid",
+        gridTemplateColumns: "2fr 1fr 1fr 1fr",
+        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={() => {
+          // throttle to prevent race conditions
+          setIsDisabled(true);
+          action();
+          setTimeout(() => setIsDisabled(false), 1000);
+        }}
+        color="primary"
+        sx={{
+          bgcolor: loading ? "grey.100" : "primary.light",
+          height: "35px",
+          px: 4,
+        }}
+        disabled={isDisabled || loading}
+      >
+        {loading ? <CircularProgress size={10} /> : buttonText}
+      </Button>
+    </StyledTableRow>
+  );
+}

package/src/components-v2/wishlist-dialogs/add-to-wishlist/hooks/use-add-to-wishlist.ts

@@ -0,0 +1,152 @@
+/**
+ * @module Add-To-Wishlist-Dialog
+ */
+// External libraries
+import { useTranslations } from "next-intl";
+
+// Core/storefront utilities
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import {
+  CopyCartToWishlistInput,
+  ExtendedProductListLine,
+  WishlistLinesInput,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+
+// API manager - mutations
+import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
+import useCopyCartToWishlist from "@/api-manager/services/user/mutations/copy-cart-to-wishlist";
+import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
+
+// API manager - queries and types
+import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+import { Wishlist } from "@/api-manager/schemas/user.schema";
+
+// Component props
+import { AddToWishlistDialogProps } from "../compound/add-to-wishlist-dialog";
+
+/**
+ * Handles adding and removing products from a wishlist.
+ * @category Hook
+ */
+export default function UseWishlist() {
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+  const { mutateAsync: addToWishlist, isPending: addPending } =
+    useAddToWishlist();
+  const { mutateAsync: copyCartToWishlist } = useCopyCartToWishlist();
+  const { mutateAsync: removeFromWishlist, isPending: removePending } =
+    useRemoveFromWishlist();
+  const { data: wishlists } = getWishlists.useSuspenseData();
+  const loading = addPending || removePending;
+
+  const handleAddToWishlist = async (
+    wishlistId: string,
+    wishlists: Wishlist[],
+    props: AddToWishlistDialogProps,
+  ) => {
+    if (props.productId) {
+      const selectedWishlist = wishlists.find((list) => list.Id === wishlistId);
+
+      const alreadyAdded = selectedWishlist.ProductListLines.some(
+        (product) => product.ProductId === props.productId,
+      );
+
+      if (alreadyAdded) {
+        setNotification({
+          message: "Product already exists in wishlist",
+          severity: "info",
+        });
+        return;
+      }
+
+      try {
+        const wishlistLine = [
+          {
+            ProductListId: wishlistId,
+            ProductId: props.productId,
+            Quantity: 1,
+            UnitOfMeasure: "ea",
+          },
+        ];
+
+        const wishlistLinesInput: WishlistLinesInput = {
+          Id: wishlistId,
+          ProductListLines: wishlistLine,
+        };
+
+        await addToWishlist(wishlistLinesInput);
+        setNotification({
+          message: t("wishlistLineAddSuccess"),
+          severity: "success",
+        });
+        if (typeof props.onSuccess === "function") {
+          props.onSuccess();
+        }
+      } catch (error) {
+        setNotification({
+          message: t("wishlistLineAddFailed"),
+          severity: "error",
+        });
+      }
+    } else if (props.cart) {
+      try {
+        const copyCartToWishlistInput: CopyCartToWishlistInput = {
+          Id: wishlistId,
+          CartID: props.cart.Id,
+          IsRewrite: false,
+          IsQuantityAggregate: true,
+        };
+
+        await copyCartToWishlist(copyCartToWishlistInput);
+        setNotification({
+          message: t("wishlistCartCopySuccess"),
+          severity: "success",
+        });
+      } catch (error) {
+        setNotification({
+          message: t("wishlistCartCopyFailed"),
+          severity: "error",
+        });
+      }
+    }
+  };
+
+  const handleRemoveFromWishlist = async (
+    wishlistId: string,
+    productId: number,
+  ) => {
+    // get the selected wishlist
+    const wishlist = wishlists.find((wishlist) => wishlist.Id === wishlistId);
+
+    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",
+        });
+      }
+    } catch (error) {
+      setNotification({
+        message: t("wishlistLineRemoveFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  return {
+    handleAddToWishlist,
+    handleRemoveFromWishlist,
+    loading,
+  };
+}