@evenicanpm/storefront-core 1.0.6 → 1.1.0

package/src/components-v2/products-view/compound/products-grid-view.tsx

@@ -1,16 +1,20 @@
 /**
  * @module ProductsView
  */
-import React, { useContext, cloneElement } from "react";
+import React from "react";
 import Grid from "@mui/material/Grid2";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/product-card";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@/api-manager/schemas/product.schema";
-import { ProductsViewContext } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
+import {
+  ProductsViewContext,
+  useProductsView,
+} from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
 import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+import { cloneElement } from "react";
+import { ProductPrice } from "@/api-manager/schemas/product.schema";
 
 /**
  * Root component of products grid view.
@@ -47,18 +51,17 @@ export default function ProductsGridView(props: ProductsViewProps) {
  *
  */
 ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
-  const { products, productPrices } = useContext(ProductsViewContext);
+  const { products, productPrices } = useProductsView();
+
   return (
     <>
-      {products.map((item: Product, i) => {
+      {products.map((product: Product, i) => {
         const matchingPrice = productPrices?.find(
-          (price) => price.ProductId === item.RecordId,
+          (price) => price.ProductId === product.RecordId,
         );
-        // Legacy API, consider alternatives.
-        // Using this to pass props to child.
         return cloneElement(children, {
           key: i,
-          product: item,
+          product: product,
           price: matchingPrice,
         });
       })}
@@ -66,14 +69,10 @@ ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
   );
 };
 
-/**
- * @category Props
- */
 export interface ProductCardProps {
   product?: Product;
   price?: ProductPrice;
 }
-
 /**
  * Individual product card component displayed in the grid.
  * @param props.item The product data to render.
@@ -81,6 +80,7 @@ export interface ProductCardProps {
  * @category Sub-Component
  */
 ProductsGridView.Card = ({ product, price }: ProductCardProps) => {
+  if (!product) return null;
   return (
     <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={product.ItemId}>
       <ProductCardPlp
@@ -95,13 +95,22 @@ ProductsGridView.Card = ({ product, price }: ProductCardProps) => {
           id: product.RecordId,
         }}
       >
-        <ProductCardPlp.Image />
+        <ProductCardPlp.ImageWrapper>
+          <ProductCardPlp.Image />
+          <ProductCardPlp.HoverActions>
+            <ProductCardPlp.QuickViewButton />
+            <ProductCardPlp.FavoriteButton />
+          </ProductCardPlp.HoverActions>
+        </ProductCardPlp.ImageWrapper>
         <ProductCardPlp.Body>
           <ProductCardPlp.Info>
             <ProductCardPlp.Title />
             <ProductCardPlp.Rating />
             <ProductCardPlp.Price />
           </ProductCardPlp.Info>
+          {/* <ProductCardPlp.Actions>
+            <ProductCardPlp.QuantityButtons />
+          </ProductCardPlp.Actions> */}
         </ProductCardPlp.Body>
       </ProductCardPlp>
     </Grid>

package/src/components-v2/products-view/compound/products-list-view.tsx

@@ -1,14 +1,17 @@
 /**
  * @module ProductsView
  */
-import { useContext, cloneElement } from "react";
+import { cloneElement } from "react";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
 import { ProductCardPlpList } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/index";
 import { ProductPrice } from "@/api-manager/schemas/product.schema";
 // DATA MODEL
 import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductsViewContext } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
+import {
+  ProductsViewContext,
+  useProductsView,
+} from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
 import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
 
 /**
@@ -35,7 +38,7 @@ export default function ProductsListView(props: ProductsViewProps) {
  *
  */
 ProductsListView.List = ({ children }: { children: React.ReactElement }) => {
-  const { products, productPrices } = useContext(ProductsViewContext);
+  const { products, productPrices } = useProductsView();
   return (
     <>
       {products.map((item: Product, i) => {
@@ -69,6 +72,7 @@ export interface ProductCardProps {
  * @category Sub-Component
  */
 ProductsListView.Card = ({ product, price }: ProductCardProps) => {
+  if (!product) return null;
   return (
     <ProductCardPlpList
       key={product.RecordId}
@@ -83,6 +87,7 @@ ProductsListView.Card = ({ product, price }: ProductCardProps) => {
         //tags: ["Bike", "Motor", "Ducati"], // Example tags
       }}
     >
+      <ProductCardPlpList.QuickViewButton />
       <ProductCardPlpList.Body>
         <ProductCardPlpList.Image />
         <ProductCardPlpList.Content>
@@ -91,6 +96,10 @@ ProductsListView.Card = ({ product, price }: ProductCardProps) => {
             <ProductCardPlpList.Price />
             <ProductCardPlpList.Rating />
           </ProductCardPlpList.Info>
+          <ProductCardPlpList.Actions>
+            <ProductCardPlpList.FavoriteButton />
+            {/* <ProductCardPlpList.QuantityButtons /> */}
+          </ProductCardPlpList.Actions>
         </ProductCardPlpList.Content>
       </ProductCardPlpList.Body>
     </ProductCardPlpList>

package/src/components-v2/search-bar/compound/context.ts

@@ -1,5 +1,5 @@
 import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 import { FormEvent } from "react";
 
 /**
@@ -21,11 +21,32 @@ export interface SearchBarContext {
     handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
     handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
   };
-  handleCloseDrawer: () => void;
+  handleCloseDrawer?: () => void;
 }
 export const SearchContext = createContext<SearchBarContext>(null);
 
 /**
  * @internal
  */
-export const SearchResultItemContext = createContext<ProductSearchResult>(null);
+export const SearchResultItemContext =
+  createContext<ProductSearchResult | null>(null);
+
+export const useSearchContext = () => {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error(
+      "useSearchContext must be used within a SearchContext provider",
+    );
+  }
+  return context;
+};
+
+export const useSearchResultItem = () => {
+  const context = useContext(SearchResultItemContext);
+  if (!context) {
+    throw new Error(
+      "useSearchResultItem must be used within a SearchResultItemContext provider",
+    );
+  }
+  return context;
+};

package/src/components-v2/search-bar/compound/results-item-lg.tsx

@@ -1,12 +1,12 @@
 /**
  * @module SearchBar
  */
-import React, { useContext } from "react";
+import React from "react";
 import Grid from "@mui/material/Grid";
 import ProductCardSearch from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-search";
 import {
-  SearchContext,
-  SearchResultItemContext,
+  useSearchContext,
+  useSearchResultItem,
 } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
 
 /**
@@ -14,25 +14,26 @@ import {
  * @category Sub-Component
  */
 export default function ResultItemLg() {
-  const { handleCloseDrawer } = useContext(SearchContext);
-  const item = useContext(SearchResultItemContext);
-
+  const { handleCloseDrawer } = useSearchContext();
+  const item = useSearchResultItem();
   return (
     <Grid item xs={12} sm={6} md={4} onClick={handleCloseDrawer}>
       <ProductCardSearch
         product={{
-          slug: item.ItemId ?? "",
-          price: item.Price,
-          title: item.Name ?? "",
-          thumbnail: item.PrimaryImageUrl ?? "",
-          id: item.RecordId ?? "",
-          rating: item.AverageRating ?? 0,
-          reviews: item.TotalRatings ?? 0,
+          slug: item?.ItemId ?? "",
+          price: item?.Price,
+          title: item?.Name ?? "",
+          thumbnail: item?.PrimaryImageUrl ?? "",
+          id: item?.RecordId ?? "",
+          rating: item?.AverageRating ?? 0,
+          reviews: item?.TotalRatings ?? 0,
           categories: [], // TODO: Category info not available in item
         }}
       >
         <ProductCardSearch.CardMedia>
           <ProductCardSearch.Image />
+          <ProductCardSearch.QuickViewButton />
+          <ProductCardSearch.FavoriteButton />
         </ProductCardSearch.CardMedia>
         <ProductCardSearch.Info>
           <ProductCardSearch.Category />

package/src/components-v2/search-bar/compound/results-item-sm.tsx

@@ -1,7 +1,7 @@
 /**
  * @module SearchBar
  */
-import React, { useContext } from "react";
+import React from "react";
 import NavLink from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
 import MenuItem from "@mui/material/MenuItem";
 import { getProductDetailUrl } from "@/lib/build-product-detail-url";
@@ -13,8 +13,8 @@ import {
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { currency } from "@/lib/lib";
 import {
-  SearchContext,
-  SearchResultItemContext,
+  useSearchContext,
+  useSearchResultItem,
 } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
 
 /**
@@ -22,8 +22,8 @@ import {
  * @category Sub-Component
  */
 export default function ResultItemSm() {
-  const { handleCloseDrawer } = useContext(SearchContext);
-  const item = useContext(SearchResultItemContext);
+  const { handleCloseDrawer } = useSearchContext();
+  const item = useSearchResultItem();
 
   return (
     <Grid item xs={12}>

package/src/components-v2/search-bar/compound/results-suspense.tsx

@@ -3,8 +3,8 @@
  */
 "use client";
 
-import React, { Suspense, useContext } from "react";
-import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import React, { Suspense } from "react";
+import { useSearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
 import { CircularProgress } from "@mui/material";
 import SearchResult from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results";
 import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
@@ -26,7 +26,7 @@ export default function SearchResultSuspense({
 }: {
   children: React.ReactNode;
 }) {
-  const { state } = useContext(SearchContext);
+  const { state } = useSearchContext();
   return (
     <Suspense
       fallback={

package/src/components-v2/search-bar/compound/results.tsx

@@ -1,12 +1,12 @@
 /**
  * @module SearchBar
  */
-import React, { useContext } from "react";
+import React from "react";
 import { useTranslations } from "next-intl";
-import searchProducts from "@/services/product/queries/search-products";
+import searchProducts from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/search-products";
 import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
 import {
-  SearchContext,
+  useSearchContext,
   SearchResultItemContext,
 } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
 import Grid from "@mui/material/Grid";
@@ -21,7 +21,7 @@ export default function SearchResultsContainer({
   children: React.ReactNode;
 }) {
   const t = useTranslations();
-  const { state } = useContext(SearchContext);
+  const { state } = useSearchContext();
   const { data: results } = searchProducts.useSuspenseData({
     searchText: state.searchText,
     category: state.searchCategory,

package/src/components-v2/search-bar/compound/textfield-adornment-category.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import MenuItem from "@mui/material/MenuItem";
 import TouchRipple from "@mui/material/ButtonBase";
 import useTheme from "@mui/material/styles/useTheme";
-import getCategories from "@/services/categories/queries/get-categories";
+import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
 import { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
 import { findCategoryNameById } from "@evenicanpm/storefront-core/src/components-v2/search-bar/utils/findCategoryNameById";
 import Menu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";

package/src/components-v2/search-bar/compound/textfield.tsx

@@ -2,7 +2,7 @@
  * @module SearchBar
  */
 "use client";
-import React, { useContext } from "react";
+import React from "react";
 import TextField from "@mui/material/TextField";
 
 import SearchIconAdornment from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-search-icon";
@@ -13,7 +13,7 @@ import { INPUT_SX } from "@evenicanpm/storefront-core/src/components-v2/search-b
 import { useTheme, useMediaQuery } from "@mui/material";
 import _ from "lodash";
 import { useTranslations } from "next-intl";
-import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import { useSearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
 
 /**
  * The actual input field for the search bar.
@@ -22,7 +22,7 @@ import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/sea
  * @category Sub-Component
  */
 export default function SearchBarTextField() {
-  const { handlers, state } = useContext(SearchContext);
+  const { handlers, state } = useSearchContext();
   const t = useTranslations();
   const theme = useTheme();
   const downMd = useMediaQuery(theme.breakpoints.down(1150));

package/src/components-v2/search-bar/hooks/use-click-outside.ts

@@ -8,7 +8,7 @@ export const useClickOutside = (
   callback: () => void,
 ) => {
   useEffect(() => {
-    const handleClick = (e: PointerEvent) => {
+    const handleClick = (e: Event) => {
       if (ref.current && !ref.current.contains(e.target as Node)) callback();
     };
 

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

@@ -4,13 +4,10 @@ import { useState } from "react";
 import { Button, ButtonProps } from "@mui/material";
 import T from "@evenicanpm/storefront-core/src/components-v2/T";
 import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/index";
-import { ProductDetails } from "@/api-manager/schemas/product.schema";
-import { Cart } from "@/api-manager/schemas/cart.schema";
 
 interface Props {
   path: string;
-  product?: ProductDetails;
-  cart?: Cart;
+  productId?: number;
   variant?: string;
 }
 
@@ -59,8 +56,7 @@ const AddToWishlistButton = (props: Props) => {
       <AddToWishlistDialog
         open={openAddListDialog}
         handleClose={handleCloseDialog}
-        productId={props.product?.RecordId}
-        cart={props.cart}
+        productId={props?.productId}
       />
     </>
   );

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

@@ -5,7 +5,12 @@ import { AddToWishListDialogContext } from "@evenicanpm/storefront-core/src/comp
 
 const AddToWishListBottomUI = () => {
   const t = useTranslations("Account.Wishlists");
-  const { handleClose } = useContext(AddToWishListDialogContext);
+  const ctx = useContext(AddToWishListDialogContext);
+  if (!ctx)
+    throw new Error(
+      "CreateNewWishlistForm must be used within a CreateNewWishlistContext",
+    );
+  const { handleClose } = ctx;
   return (
     <Grid container spacing={3}>
       <Grid

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

@@ -10,15 +10,12 @@ import AddToWishListBottomUI from "@evenicanpm/storefront-core/src/components-v2
 
 // 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 "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/context";
 
 export interface AddToWishlistDialogProps {
   open: boolean;
   handleClose: () => void;
   productId?: number;
-  cart?: Cart;
-  onSuccess?: () => void;
   children: React.ReactNode;
 }
 
@@ -43,17 +40,20 @@ export interface AddToWishlistDialogProps {
  *   </AddToWishlistDialog>
  *
  */
-export default function AddToWishlistDialog(props: AddToWishlistDialogProps) {
-  const { data: wishlists, isPending: isLoading } = getWishlists.useData();
+export default function AddToWishlistDialog({
+  open,
+  handleClose,
+  productId,
+  children,
+}: AddToWishlistDialogProps) {
+  const { data: wishlists } = getWishlists.useSuspenseData();
 
   const { data: session } = useSession();
   const isAuthenticated = !!session;
 
-  if (isLoading) return null;
-
-  const handleClose = () => {
-    if (typeof props.handleClose === "function") {
-      props.handleClose();
+  const handleCloseDialog = () => {
+    if (typeof handleClose === "function") {
+      handleClose();
     }
   };
 
@@ -61,14 +61,21 @@ export default function AddToWishlistDialog(props: AddToWishlistDialogProps) {
     <AddToWishListDialogContext.Provider
       value={{
         wishlists,
-        isLoading,
-        props,
+        productId,
         isAuthenticated,
-        handleClose,
+        handleClose: handleCloseDialog,
       }}
     >
-      <Dialog open={props.open} onClose={handleClose}>
-        <DialogContent>{props.children}</DialogContent>
+      <Dialog
+        open={open}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleClose?.();
+        }}
+      >
+        <DialogContent onClick={(e) => e.stopPropagation()}>
+          {children}
+        </DialogContent>
       </Dialog>
     </AddToWishListDialogContext.Provider>
   );

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

@@ -19,22 +19,23 @@ import { Wishlist } from "@evenicanpm/storefront-core/src/api-manager/schemas/us
  * @category Sub-Component
  */
 const WishlistList = ({ children }: { children: React.ReactNode }) => {
-  const { wishlists, isAuthenticated, isLoading } = useContext(
-    AddToWishListDialogContext,
-  );
-
-  if (isLoading) return;
+  const ctx = useContext(AddToWishListDialogContext);
+  if (!ctx)
+    throw new Error(
+      "CreateNewWishlistForm must be used within a CreateNewWishlistContext",
+    );
+  const { wishlists, isAuthenticated } = ctx;
 
   if (!isAuthenticated) {
     return <NoRecords message="Account.Wishlists.wishlistAddUnauthenticated" />;
   }
 
-  if (wishlists.length === 0) {
+  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}>
+    <WishListItemContext.Provider value={{ wishlist }} key={i}>
       {children}
     </WishListItemContext.Provider>
   ));

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

@@ -3,21 +3,19 @@
  */
 import { createContext } from "react";
 import { Wishlist } from "@/api-manager/schemas/user.schema";
-import { AddToWishlistDialogProps } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-dialog";
 
 /**
  * @category Context
  */
 export interface AddToWishlistDialogContext {
-  wishlists: Wishlist[];
-  isLoading: boolean;
-  props: AddToWishlistDialogProps;
-  isAuthenticated: boolean;
-  handleClose: () => void;
+  wishlists?: Wishlist[];
+  productId?: number;
+  isAuthenticated?: boolean;
+  handleClose?: () => void;
 }
 
 export const AddToWishListDialogContext =
-  createContext<AddToWishlistDialogContext>(null);
+  createContext<AddToWishlistDialogContext | null>(null);
 
 /**
  * @category Context
@@ -26,4 +24,6 @@ export interface WishlistItemContext {
   wishlist: Wishlist;
 }
 
-export const WishListItemContext = createContext<WishlistItemContext>(null);
+export const WishListItemContext = createContext<WishlistItemContext | null>(
+  null,
+);

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

@@ -1,8 +1,8 @@
 /**
  * @module Add-To-Wishlist-Dialog
  */
-import { Button, CircularProgress } from "@mui/material";
 import { useContext, useState } from "react";
+import Link from "next/link";
 import {
   AddToWishListDialogContext,
   WishListItemContext,
@@ -11,31 +11,40 @@ import UseWishlist from "@evenicanpm/storefront-core/src/components-v2/wishlist-
 import { format } from "date-fns";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { StyledTableRow } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/styles";
-
+import { Add } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import { Delete } from "@mui/icons-material";
 /**
  * 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() {
+export default function WishlistDialogItem() {
   const [isDisabled, setIsDisabled] = useState(false);
 
-  const { wishlist } = useContext(WishListItemContext);
-  const { wishlists } = useContext(AddToWishListDialogContext);
-  const { props } = useContext(AddToWishListDialogContext);
+  const itemCtx = useContext(WishListItemContext);
+  const dialogCtx = useContext(AddToWishListDialogContext);
+
+  if (!itemCtx || !dialogCtx)
+    throw new Error("WishlistModalItem must be used within a wishlist context");
+
   const { handleAddToWishlist, handleRemoveFromWishlist, loading } =
     UseWishlist();
+  const { productId } = dialogCtx;
+  const { wishlist } = itemCtx;
 
   const productInWishlist = wishlist.ProductListLines?.some(
-    (line) => line.ProductId === props.productId,
+    (line) => line?.ProductId === productId,
   );
 
+  if (!productId) return null;
+
   const action = productInWishlist
-    ? () => handleRemoveFromWishlist(wishlist.Id, props.productId)
-    : () => handleAddToWishlist(wishlist.Id, wishlists, props);
+    ? () => handleRemoveFromWishlist(wishlist.Id, productId)
+    : () => handleAddToWishlist(wishlist.Id, productId);
 
-  const buttonText = productInWishlist ? "Remove" : "Add";
+  const buttonText = productInWishlist ? <Delete /> : <Add />;
 
   return (
     <StyledTableRow
@@ -50,7 +59,9 @@ export default function WishlistModalItem() {
       }}
     >
       <Paragraph ellipsis sx={{ fontWeight: "bold" }}>
-        {wishlist?.Name ?? ""}
+        <Link href={`/account/wish-lists/${wishlist?.Id}`}>
+          {wishlist?.Name ?? ""}
+        </Link>
       </Paragraph>
       <Paragraph ellipsis>
         {" "}
@@ -61,25 +72,24 @@ export default function WishlistModalItem() {
       </Paragraph>
       <Paragraph ellipsis>
         {" "}
-        {`${wishlist?.ProductListLines?.length} products`}
+        {`${wishlist?.ProductListLines?.length ?? 0} products`}
       </Paragraph>
-      <Button
+      <IconButton
         onClick={() => {
           // throttle to prevent race conditions
           setIsDisabled(true);
           action();
           setTimeout(() => setIsDisabled(false), 1000);
         }}
-        color="primary"
+        color={productInWishlist ? "secondary" : "primary"}
         sx={{
-          bgcolor: loading ? "grey.100" : "primary.light",
-          height: "35px",
-          px: 4,
+          justifySelf: "end",
         }}
+        loading={loading}
         disabled={isDisabled || loading}
       >
-        {loading ? <CircularProgress size={10} /> : buttonText}
-      </Button>
+        {buttonText}
+      </IconButton>
     </StyledTableRow>
   );
 }