@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/components-v2/wishlist-dialogs/add-to-wishlist/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 "./";
+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-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,
+  };
+}

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

@@ -0,0 +1,39 @@
+import AddToWishlistDialog from "./compound/add-to-wishlist-dialog";
+import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+  productId?: number;
+  cart?: Cart;
+  onSuccess?: () => void;
+}
+
+/**
+ * @category Implementation
+ */
+const AddToWishListDialog1 = ({
+  cart,
+  open,
+  handleClose,
+  productId,
+}: Props) => {
+  return (
+    <>
+      <AddToWishlistDialog
+        cart={cart}
+        open={open}
+        handleClose={handleClose}
+        productId={productId}
+      >
+        <AddToWishlistDialog.Header />
+        <AddToWishlistDialog.List>
+          <AddToWishlistDialog.List.Item />
+        </AddToWishlistDialog.List>
+        <AddToWishlistDialog.BottomUI />
+      </AddToWishlistDialog>
+    </>
+  );
+};
+
+export default AddToWishListDialog1;

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

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const CreateNewWishlistContext = createContext(null);

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

@@ -0,0 +1,42 @@
+import React, { useContext } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { CreateNewWishlistContext } from "./context";
+
+function BottomUI() {
+  const t = useTranslations("Account.Wishlists");
+  const { handleClose } = useContext(CreateNewWishlistContext);
+  return (
+    <Grid
+      size={{ sm: 6, xs: 12 }}
+      sx={{
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        gap: 2,
+      }}
+    >
+      <Button
+        color="primary"
+        variant="contained"
+        size="small"
+        type="submit"
+        sx={{ height: 30.75 }}
+      >
+        {t("btnSave")}
+      </Button>
+      <Button
+        color="primary"
+        variant="outlined"
+        size="small"
+        onClick={handleClose}
+        sx={{ height: 30.75 }}
+      >
+        {t("btnCancel")}
+      </Button>
+    </Grid>
+  );
+}
+
+export default BottomUI;