@evenicanpm/storefront-core 1.0.1 → 1.0.3

package/src/components-v2/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-v2/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-v2/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-v2/wishlist-modal/add-to-wishlist-button.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+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 { 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: any, btnFullwidth: boolean;
+  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}
+        variant={btnVariant}
+      >
+        <T path={props.path} />
+      </Button>
+      <AddToWishlistDialog
+        open={openAddListDialog}
+        handleClose={handleCloseDialog}
+        productId={props.product?.RecordId}
+        cart={props.cart}
+      />
+    </>
+  );
+};
+
+export default AddToWishlistButton;

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

@@ -0,0 +1,161 @@
+import React, { Fragment } 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 "@evenicanpm/storefront-core/src/pages/account/dashboard-header";
+import CreateWishlistButton from "@evenicanpm/storefront-core/src/pages/account/wishlist/create-wishlist-button";
+import WishlistModalItem from "./wishlist-modal-item";
+import NoRecords from "@evenicanpm/storefront-core/src/pages/account/no-records";
+// API
+import {
+  CopyCartToWishlistInput,
+  Wishlist,
+  WishlistLinesInput,
+} from "@/api-manager/schemas/user.schema";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import useCopyCartToWishlist from "@/api-manager/services/user/mutations/copy-cart-to-wishlist";
+import { useSession } from "next-auth/react";
+import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+  productId?: number;
+  cart?: Cart;
+  onSuccess?: () => void;
+}
+
+export default function AddToWishlistDialog(props: Props) {
+  const { data: wishlists, isLoading } = getWishlists.useData();
+
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: addToWishlist } = useAddToWishlist();
+  const { mutateAsync: copyCartToWishlist } = useCopyCartToWishlist();
+
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+
+  const handleClose = () => {
+    if (isFunction(props.handleClose)) {
+      props.handleClose();
+    }
+  };
+
+  const handleAddToWishlist = async (wishlistId: string) => {
+    if (props.productId) {
+      try {
+        const wishlistLinesInput: WishlistLinesInput = {
+          Id: wishlistId,
+          ProductListLines: [],
+        };
+
+        wishlistLinesInput.ProductListLines.push({
+          ProductListId: wishlistId,
+          ProductId: props.productId,
+          Quantity: 1,
+          UnitOfMeasure: "ea",
+        });
+        await addToWishlist(wishlistLinesInput);
+        setNotification({
+          message: t("wishlistLineAddSuccess"),
+          severity: "success",
+        });
+        if (isFunction(props.onSuccess)) {
+          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",
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog
+      open={props.open}
+      onClose={handleClose}
+      aria-labelledby="form-dialog-title"
+    >
+      <DialogContent>
+        <Fragment>
+          <DashboardHeader
+            title="Account.Wishlists.heading"
+            Icon={MdFavorite}
+            href=""
+            buttonText=""
+            buttons={
+              isAuthenticated && (
+                <CreateWishlistButton path="Account.Wishlists.btnCreateNewList" />
+              )
+            }
+          />
+          {isAuthenticated && !isLoading ? (
+            wishlists && wishlists.length > 0 ? (
+              wishlists?.map((wishlist: Wishlist) => (
+                <WishlistModalItem
+                  key={wishlist.Id}
+                  wishlist={wishlist}
+                  addToWishlist={handleAddToWishlist}
+                />
+              ))
+            ) : (
+              <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={handleClose}
+              sx={{ height: 30.75 }}
+            >
+              {t("btnCancel")}
+            </Button>
+          </Grid>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components-v2/wishlist-modal/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 "../../../pages/account/dashboard-header";
+import WishlistModalItem from "./wishlist-modal-item";
+import NoRecords from "../../../pages/account/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/providers/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-v2/wishlist-modal/wishlist-modal-item.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@mui/material";
+import { format } from "date-fns";
+// MUI ICON COMPONENTS
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// LOCAL CUSTOM COMPONENT
+import TableRow from "@evenicanpm/storefront-core/src/pages/account/table-row";
+// API
+import { Wishlist } from "@/api-manager/schemas/user.schema";
+
+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 (
+    <TableRow
+      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>
+    </TableRow>
+  );
+}

package/src/pages/README.md

@@ -0,0 +1,4 @@
+# Pages V1 Folder
+
+- Keeping this temporarily to maintain compatability for OLCC while we create the new component system
+- OLCC will start moving over to components-v2 and pages-v2 and then we will remove this folder

package/src/pages/product-details/product-intro/product-intro.tsx

@@ -25,7 +25,9 @@ import getProductAvailability from "@/api-manager/services/product/queries/get-p
 
 // LOCAL HOOKS
 import useVariants from "../../../hooks/use-variants";
-import useCart, { AddToCartBopisInput } from "@/hooks/use-cart";
+import useCart, {
+  AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
 
 // LOCAL COMPONENTS
 import ProductDimensions from "@/_components/product-dimensions/product-dimensions";

package/src/pages/product-list/quick-view-dialog-content.tsx

@@ -16,11 +16,13 @@ import {
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import ProductRating from "./product-rating";
-import useCart, { AddToCartBopisInput } from "@/hooks/use-cart";
+import useCart, {
+  AddToCartBopisInput,
+} from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import useCurrencyFormatter from "@/lib/currency-formatter";
 import ProductDimensions from "@/components/_components/product-dimensions/product-dimensions";
 import QuantityButtons from "@/components/_components/product-quantity-buttons/product-quantity-buttons";
-import useVariants from "@/hooks/use-variants";
+import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
 import {
   InventorySearchCriteriaInput,
   ProductDetails,

package/src/pages-v2/README.md

@@ -0,0 +1,4 @@
+# Pages V2
+
+- This is new pages structure, the only difference between this and v1 is the updated imports to use
+  the new components folder.