@evenicanpm/storefront-core 1.0.0 → 1.0.1

package/src/components/_components/product-quantity-buttons/product-quantity-buttons.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { FlexBox } from "@/components/_components/flex-box";
+import Button from "@mui/material/Button";
+import { H3 } from "@/components/_components/Typography";
+import { MdAdd as Add } from "react-icons/md";
+import { MdRemove as Remove } from "react-icons/md";
+import CircularProgress from "@mui/material/CircularProgress";
+import { CartLine } from "@msdyn365-commerce/retail-proxy";
+import { useTranslations } from "next-intl";
+
+interface Props {
+  loading: boolean;
+  productCartLine: CartLine | undefined;
+  handleCartAmountChange: (amount: number, currentCartLine: CartLine) => void;
+  handleAddToCart: () => void;
+  isOOS: boolean;
+}
+
+export default function QuantityButtons({
+  loading,
+  handleAddToCart,
+  handleCartAmountChange,
+  productCartLine,
+  isOOS,
+}: Props) {
+  const t = useTranslations("productDetail");
+
+  if (!productCartLine?.Quantity || productCartLine.Quantity === 0) {
+    return (
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={handleAddToCart}
+        disabled={isOOS}
+      >
+        {t("btnAddToCart")}
+      </Button>
+    );
+  }
+
+  return (
+    <FlexBox alignItems="center">
+      <Button
+        size="small"
+        sx={{ p: 1 }}
+        color="primary"
+        variant="outlined"
+        disabled={loading}
+        onClick={() =>
+          handleCartAmountChange(
+            (productCartLine?.Quantity || 0) - 1,
+            productCartLine,
+          )
+        }
+      >
+        <Remove fontSize="small" />
+      </Button>
+
+      <H3
+        fontWeight="600"
+        mx={2.5}
+        sx={{ width: "20px", display: "flex", justifyContent: "center" }}
+      >
+        {loading ? (
+          <CircularProgress size={"10px"} />
+        ) : (
+          productCartLine.Quantity.toString().padStart(2, "0")
+        )}
+      </H3>
+
+      <Button
+        size="small"
+        sx={{ p: 1 }}
+        color="primary"
+        variant="outlined"
+        disabled={loading}
+        onClick={() =>
+          handleCartAmountChange(
+            (productCartLine?.Quantity || 0) + 1,
+            productCartLine,
+          )
+        }
+      >
+        <Add fontSize="small" />
+      </Button>
+    </FlexBox>
+  );
+}

package/src/components/_components/section-header/section-header.tsx

@@ -8,7 +8,7 @@ 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/useSettings";
+import useSettings from "../../../hooks/use-settings";
 
 // ===================================================
 interface Props {

package/src/components/_components/settings/setting.tsx

@@ -15,7 +15,7 @@ import { H6 } from "@/components/_components/Typography";
 import Scrollbar from "@/components/_components/scrollbar/scrollbar";
 import FlexBox from "@/components/_components/flex-box/flex-box";
 // GLOBAL CUSTOM HOOK
-import useSettings from "@/components/_components/hooks/useSettings";
+import useSettings from "@/hooks/use-settings";
 // STYLED COMPONENTS
 import {
   BodyWrapper,

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;

package/src/components/_components/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 "../../../pages/account/dashboard-header";
+import CreateWishlistButton from "../../../pages/account/wishlist/create-wishlist-button";
+import WishlistModalItem from "./wishlist-modal-item";
+import NoRecords from "../../../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 "@/components/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/_components/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/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-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 "@/components/_components/Typography";
+// LOCAL CUSTOM COMPONENT
+import TableRow from "../../../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/components/countries-input.tsx

@@ -45,6 +45,7 @@ export default function CountryInput({
       size="small"
       label={label}
       variant="outlined"
+      data-testid="country-input"
       placeholder="Select Country"
     />
   );

package/src/hooks/use-cart.tsx

@@ -0,0 +1,82 @@
+import useDeleteCartLine from "@/api-manager/services/cart/mutations/delete-cart-line";
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import useUpdateCartLines from "@/api-manager/services/cart/mutations/update-cart-lines";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import { CartLine } from "@msdyn365-commerce/retail-proxy";
+
+type UseCartProps = {
+  cart: Cart;
+  selectVariantId: number | undefined;
+  recordId: number;
+};
+
+export type AddToCartBopisInput = {
+  deliveryMode: string;
+  warehouseId: string;
+};
+
+export default function useCart({
+  cart,
+  selectVariantId,
+  recordId,
+}: UseCartProps) {
+  const { mutate: deleteCartLine, isPending: deletePending } =
+    useDeleteCartLine();
+  const { mutate: updateCartLine, isPending: updatePending } =
+    useUpdateCartLines();
+  const { mutate: addToCart, isPending: addPending } = useAddToCart();
+
+  const loading = deletePending || updatePending || addPending;
+
+  const handleCartAmountChange = (
+    amount: number,
+    currentCartLine?: CartLine,
+  ) => {
+    if (amount === 0) {
+      deleteCartLine({
+        cartId: cart.Id,
+        version: cart.Version,
+        cartLine: [
+          {
+            LineId: currentCartLine?.LineId,
+            ProductId: selectVariantId,
+          },
+        ],
+      });
+      return;
+    }
+
+    updateCartLine({
+      cartId: cart.Id,
+      version: cart.Version,
+      cartLine: [
+        {
+          LineId: currentCartLine?.LineId,
+          Quantity: amount,
+          ProductId: selectVariantId,
+        },
+      ],
+    });
+  };
+
+  const handleAddToCart = (bopisInput?: AddToCartBopisInput) => {
+    addToCart({
+      cartId: cart.Id,
+      version: cart.Version,
+      cartLine: [
+        {
+          Quantity: 1,
+          ProductId: selectVariantId || recordId,
+          WarehouseId: bopisInput?.warehouseId || "",
+          DeliveryMode: bopisInput?.deliveryMode || "",
+        },
+      ],
+    });
+  };
+
+  return {
+    loading,
+    handleCartAmountChange,
+    handleAddToCart,
+  };
+}