@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/components-v2/navbar/nav-list/nav-list.tsx

@@ -1,35 +1,124 @@
 "use client";
 
-import { createContext, useContext, ReactNode } from "react";
-// import { useContext as useReactContext } from "react";
-import MenuItem from "@mui/material/MenuItem";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
-import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import MegaMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/mega-menu";
 import CategoryBasedMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/category-based-menu";
+import MegaMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/mega-menu";
+import NavItemChild from "@evenicanpm/storefront-core/src/components-v2/navbar/nav-list/nav-item-child";
 import {
-	StyledNavLink,
-	NAV_LINK_STYLES,
 	ChildNavListWrapper,
+	NAV_LINK_STYLES,
+	StyledNavLink,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
-import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 import {
+	type TransformedNavItem,
 	transformCmsNav,
-	TransformedNavItem,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
-import NavItemChild from "@evenicanpm/storefront-core/src/components-v2/navbar/nav-list/nav-item-child";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import MenuItem from "@mui/material/MenuItem";
+import { createContext, type ReactNode, useContext } from "react";
 
 type NavigationContextValue = {
 	list: TransformedNavItem[];
 };
+
 const NavigationContext = createContext<NavigationContextValue | undefined>(
 	undefined,
 );
 
-export default function Navigation({ children }: { children?: ReactNode }) {
+type NavigationItemProps = Readonly<{
+	nav: TransformedNavItem;
+	isRoot?: boolean;
+}>;
+
+function RenderMegaMenu(props: Readonly<{ nav: TransformedNavItem }>) {
+	const { nav } = props;
+	const columns = nav.items.map((item) => [item]);
+	const columnCount = columns.length;
+
+	return (
+		<MegaMenu title={nav.title}>
+			<MegaMenu.Container>
+				{columns.map((column) => {
+					const columnKey = column.map((c) => c.title).join("-");
+
+					return (
+						<MegaMenu.Column key={columnKey} count={columnCount}>
+							{column.map((cat) => (
+								<MegaMenu.Category key={cat.title} title={cat.title}>
+									{cat.items.map((sub) => (
+										<MegaMenu.Item key={sub.title} href={sub.href}>
+											{sub.title}
+										</MegaMenu.Item>
+									))}
+								</MegaMenu.Category>
+							))}
+						</MegaMenu.Column>
+					);
+				})}
+			</MegaMenu.Container>
+		</MegaMenu>
+	);
+}
+
+function RenderFullScreenMenu({ nav }: Readonly<{ nav: TransformedNavItem }>) {
+	return (
+		<CategoryBasedMenu key={nav.title} title={nav.title} menuList={nav.items}>
+			<CategoryBasedMenu.MainList />
+			<CategoryBasedMenu.Section />
+		</CategoryBasedMenu>
+	);
+}
+
+function RenderRootWithChildren({
+	nav,
+}: Readonly<{ nav: TransformedNavItem }>) {
+	const { title, items } = nav;
+
+	return (
+		<FlexBox
+			alignItems="center"
+			position="relative"
+			flexDirection="column"
+			sx={{
+				"&:hover": { "& > .child-nav-item": { display: "block" } },
+			}}
+		>
+			<FlexBox alignItems="flex-end" gap={0.3} sx={NAV_LINK_STYLES}>
+				{title}
+				<KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
+			</FlexBox>
+
+			<ChildNavListWrapper className="child-nav-item">
+				<BazaarCard elevation={3} sx={{ mt: 2.5, py: 1, minWidth: 100 }}>
+					{items.map((child) => (
+						<Navigation.Item key={child.title} nav={child} />
+					))}
+				</BazaarCard>
+			</ChildNavListWrapper>
+		</FlexBox>
+	);
+}
+
+function RenderChildWithChildren({
+	nav,
+}: Readonly<{ nav: TransformedNavItem }>) {
+	return (
+		<Navigation.Child nav={nav}>
+			{nav.items.map((child) => (
+				<Navigation.Item key={child.title} nav={child} />
+			))}
+		</Navigation.Child>
+	);
+}
+
+export default function Navigation({
+	children,
+}: Readonly<{ children?: ReactNode }>) {
 	const cmsList = transformCmsNav(useContext(NavContext).cmsNav ?? []);
+
 	return (
 		<NavigationContext.Provider value={{ list: cmsList }}>
 			<FlexBox gap={4}>{children ?? <Navigation.List />}</FlexBox>
@@ -40,6 +129,7 @@ export default function Navigation({ children }: { children?: ReactNode }) {
 Navigation.List = function List() {
 	const ctx = useContext(NavigationContext);
 	if (!ctx) return null;
+
 	return (
 		<>
 			{ctx.list.map((nav) => (
@@ -49,96 +139,44 @@ Navigation.List = function List() {
 	);
 };
 
-Navigation.Item = function Item({
-	nav,
-	isRoot = false,
-}: {
-	nav: TransformedNavItem;
-	isRoot?: boolean;
-}) {
+Navigation.Item = function Item({ nav, isRoot = false }: NavigationItemProps) {
 	const { href, title, items, menuType } = nav;
-	const hasChildren = !!(items && items.length);
+	const hasChildren = !!items?.length;
 
+	// ROOT ITEMS
 	if (isRoot) {
 		if (menuType === "mega-menu") {
-			return (
-				<MegaMenu title={title}>
-					<MegaMenu.Container>
-						{nav.items
-							.map((i) => [i])
-							.map((column, i) => (
-								<MegaMenu.Column
-									key={i}
-									count={nav.items.map((i) => [i]).length}
-								>
-									{column.map((cat) => (
-										<MegaMenu.Category key={cat.title} title={cat.title}>
-											{cat.items.map((sub) => (
-												<MegaMenu.Item key={sub.title} href={sub.href}>
-													{sub.title}
-												</MegaMenu.Item>
-											))}
-										</MegaMenu.Category>
-									))}
-								</MegaMenu.Column>
-							))}
-					</MegaMenu.Container>
-				</MegaMenu>
-			);
+			return <RenderMegaMenu nav={nav} />;
 		}
+
 		if (menuType === "full-screen-mega-menu") {
-			return (
-				<CategoryBasedMenu key={title} title={title} menuList={nav.items}>
-					<CategoryBasedMenu.MainList />
-					<CategoryBasedMenu.Section />
-				</CategoryBasedMenu>
-			);
+			return <RenderFullScreenMenu nav={nav} />;
 		}
-		if (href && !hasChildren) {
+
+		if (!hasChildren && href) {
 			return <StyledNavLink href={href}>{title}</StyledNavLink>;
 		}
+
 		if (hasChildren) {
-			return (
-				<FlexBox
-					alignItems="center"
-					position="relative"
-					flexDirection="column"
-					sx={{
-						"&:hover": { "& > .child-nav-item": { display: "block" } },
-					}}
-				>
-					<FlexBox alignItems="flex-end" gap={0.3} sx={NAV_LINK_STYLES}>
-						{title}{" "}
-						<KeyboardArrowDown sx={{ color: "grey.500", fontSize: "1.1rem" }} />
-					</FlexBox>
-					<ChildNavListWrapper className="child-nav-item">
-						<BazaarCard elevation={3} sx={{ mt: 2.5, py: 1, minWidth: 100 }}>
-							{items.map((child) => (
-								<Navigation.Item key={child.title} nav={child} />
-							))}
-						</BazaarCard>
-					</ChildNavListWrapper>
-				</FlexBox>
-			);
-		}
-	} else {
-		if (href && !hasChildren) {
-			return (
-				<NavLink href={href}>
-					<MenuItem>{title}</MenuItem>
-				</NavLink>
-			);
-		}
-		if (hasChildren) {
-			return (
-				<Navigation.Child nav={nav}>
-					{items.map((child) => (
-						<Navigation.Item key={child.title} nav={child} />
-					))}
-				</Navigation.Child>
-			);
+			return <RenderRootWithChildren nav={nav} />;
 		}
+
+		return null;
+	}
+
+	// CHILD ITEMS
+	if (!hasChildren && href) {
+		return (
+			<NavLink href={href}>
+				<MenuItem>{title}</MenuItem>
+			</NavLink>
+		);
+	}
+
+	if (hasChildren) {
+		return <RenderChildWithChildren nav={nav} />;
 	}
+
 	return null;
 };
 

package/src/components-v2/navbar/navbar.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
-
 // LOCAL CUSTOM COMPONENTS
 import Categories from "@evenicanpm/storefront-core/src/components-v2/navbar/categories";
 import NavigationList from "@evenicanpm/storefront-core/src/components-v2/navbar/nav-list/index";
-
 // STYLED COMPONENTS
 import {
-	NavBarWrapper,
 	InnerContainer,
+	NavBarWrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
+import type React from "react";
+import { createContext, useContext } from "react";
 
 /**
  * Usage Examples:
@@ -57,7 +56,7 @@ export default function Navbar({
 	elevation = 2,
 	hideCategories = false,
 	children,
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<NavbarContext.Provider value={{ hideCategories }}>
 			<NavBarWrapper hoverEffect={false} elevation={elevation} border={border}>

package/src/components-v2/navbar/styles.ts

@@ -1,10 +1,10 @@
+import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+// GLOBAL CUSTOM COMPONENTS
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import styled from "@mui/material/styles/styled";
 import Container from "@mui/material/Container";
-// GLOBAL CUSTOM COMPONENTS
-import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
-import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import styled from "@mui/material/styles/styled";
 
 // COMMON STYLED OBJECT
 export const NAV_LINK_STYLES = {

package/src/components-v2/navbar/utils/transform-nav.test.ts

@@ -1,10 +1,10 @@
-import { describe, it, expect } from "vitest";
 import {
 	transformCategoryNav,
 	transformCmsNav,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
-import { CmsNavItem } from "@/cms/interfaces/navigation";
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import { describe, expect, it } from "vitest";
+import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 describe("transform nav items", () => {
 	it("should recursively transform deeply nested categories and its children with correct href, title, and items", () => {

package/src/components-v2/navbar/utils/transform-nav.ts

@@ -1,6 +1,6 @@
-import { CmsNavItem } from "@/cms/interfaces/navigation";
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
-import { SvgIconComponent } from "@mui/icons-material";
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import type { SvgIconComponent } from "@mui/icons-material";
+import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 type MenuType = "default" | "mega-menu" | "full-screen-mega-menu";
 export interface TransformedNavItem {

package/src/components-v2/no-records.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { Box } from "@mui/material";
 import { H4 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { Box } from "@mui/material";
 import { useTranslations } from "next-intl";
+import React from "react";
 
 type Props = { message: string };
 
-export default function NoRecords({ message }: Props) {
+export default function NoRecords({ message }: Readonly<Props>) {
 	const t = useTranslations();
 	return (
 		<Box

package/src/components-v2/product-cards/discount-chip.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Chip, { ChipProps } from "@mui/material/Chip";
+import Chip, { type ChipProps } from "@mui/material/Chip";
 import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENT

package/src/components-v2/product-cards/favorite-button.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React from "react";
-import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import Favorite from "@mui/icons-material/Favorite";
 import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
+import React from "react";
 
 export interface FavoriteButtonProps extends Omit<IconButtonProps, "onClick"> {
 	isFavorite: boolean;
@@ -28,7 +28,7 @@ export default function FavoriteButton({
 	activeColor = "primary",
 	inactiveColor = "disabled",
 	...rest
-}: FavoriteButtonProps) {
+}: Readonly<FavoriteButtonProps>) {
 	const iconProps = customIconSize
 		? { sx: { fontSize: customIconSize } }
 		: { fontSize: iconSize };

package/src/components-v2/product-cards/product-card/ProductCard.stories.tsx

@@ -1,7 +1,7 @@
+import { Box } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
-import ProductCard from "./index";
 import { data } from "../../../../__mocks__/products";
-import { Box } from "@mui/material";
+import ProductCard from "./index";
 
 const meta = {
 	title: "Product/ProductCards/ProductCard",

package/src/components-v2/product-cards/product-card/product-card.tsx

@@ -1,54 +1,54 @@
 "use client";
 
-import React, {
-	createContext,
-	ReactNode,
-	useContext,
-	useMemo,
-	useState,
-} from "react";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Rating from "@mui/material/Rating";
-import IconButton from "@mui/material/IconButton";
-import { Delete, ShoppingCart } from "@mui/icons-material";
-import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
-import { useTranslations } from "next-intl";
-import { useIsFetching } from "@tanstack/react-query";
+import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import type {
+	ExtendedProductListLine,
+	ExtendedWishlist,
+	WishlistLinesInput,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import useAddToCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-to-cart";
+// API AND SCHEMAS
+import useRemoveFromWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/remove-from-wishlist";
+import useUpdateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-wishlist";
+import { WISHLIST_DETAILS_QUERY_KEY } from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-wishlist-details";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 // GLOBAL CUSTOM COMPONENTS
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
-// LOCAL CUSTOM COMPONENTS
-import ProductPrice from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-price";
-import ProductTitle from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-title";
-import QuantityBtns from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
 import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-cards/discount-chip";
 import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
 // STYLED COMPONENTS
 import {
-	ImageWrapper,
 	ContentWrapper,
-	StyledBazaarCard,
 	HoverIconWrapper,
+	ImageWrapper,
+	StyledBazaarCard,
 } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/styles/index";
+// LOCAL CUSTOM COMPONENTS
+import ProductPrice from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-price";
+import ProductTitle from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-title";
+import QuantityBtns from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
+import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
 // LIBRARY AND HOOKS
 import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
-import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
-// API AND SCHEMAS
-import useRemoveFromWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/remove-from-wishlist";
-import useUpdateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-wishlist";
-import useAddToCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-to-cart";
-import { WISHLIST_DETAILS_QUERY_KEY } from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-wishlist-details";
-import {
-	ExtendedWishlist,
-	ExtendedProductListLine,
-	WishlistLinesInput,
-} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { Delete, ShoppingCart } from "@mui/icons-material";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Rating from "@mui/material/Rating";
+import { useIsFetching } from "@tanstack/react-query";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import React, {
+	createContext,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
 
 function findChild(
 	children: ReactNode,
@@ -397,16 +397,14 @@ ProductCard.QuickViewButton = () => {
 
 ProductCard.FavoriteButton = () => {
 	const internal = useContext(ProductCardInternalContext);
-	if (!internal) return null;
-
-	const { handleToggleFavorite } = internal;
-
 	const ctx = useContext(ProductCardContext);
-	if (!ctx) return null;
 
-	const { id } = ctx.product;
+	const id = ctx?.product?.id;
+	const isFavorite = useFavorite(id ? Number(id) : undefined);
 
-	const isFavorite = useFavorite(Number(id));
+	if (!internal || !ctx) return null;
+
+	const { handleToggleFavorite } = internal;
 
 	return (
 		<FavoriteButton isFavorite={isFavorite} onToggle={handleToggleFavorite} />

package/src/components-v2/product-cards/product-card/styles/index.ts

@@ -1,7 +1,7 @@
-import styled from "@mui/material/styles/styled";
-import { StyledComponent } from "@mui/styled-engine";
 // GLOBAL CUSTOM COMPONENT
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import styled from "@mui/material/styles/styled";
+import type { StyledComponent } from "@mui/styled-engine";
 
 export const StyledBazaarCard = styled(BazaarCard)({
 	height: "100%",

package/src/components-v2/product-cards/product-card-plp/ProductCardPlp.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ProductCardPlp from "./index";
 import { Box } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
 import { data } from "../../../../__mocks__/products";
+import ProductCardPlp from "./index";
 
 const meta = {
 	title: "Product/ProductCards/ProductCardPlp",

package/src/components-v2/product-cards/product-card-plp/product-card.tsx

@@ -1,34 +1,34 @@
-import { createContext, useContext, ReactNode, useState } from "react";
-import Link from "next/link";
-import Rating from "@mui/material/Rating";
-import IconButton from "@mui/material/IconButton";
-import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
-// GLOBAL CUSTOM COMPONENTS
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
 	FlexBetween,
 	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
-import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
 // LOCAL CUSTOM COMPONENTS
 import DiscountChip from "@evenicanpm/storefront-core/src/components-v2/product-cards/discount-chip";
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
 import FavoriteButton from "@evenicanpm/storefront-core/src/components-v2/product-cards/favorite-button";
+// STYLED COMPONENTS
+import {
+	HoverIconWrapper,
+	PriceText,
+} from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/styles/index";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-cards/quantity-buttons";
+import ProductViewDialog from "@evenicanpm/storefront-core/src/components-v2/product-dialog";
+// GLOBAL CUSTOM COMPONENTS
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist";
+import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
+import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 // LIBRARY AND HOOKS
 import {
 	calculateDiscount,
 	currency,
 } from "@evenicanpm/storefront-core/src/lib/lib";
-import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
-import useCart from "@evenicanpm/storefront-core/src/hooks/use-cart";
-import useFavorite from "@evenicanpm/storefront-core/src/hooks/use-favorite";
-// STYLED COMPONENTS
-import {
-	PriceText,
-	HoverIconWrapper,
-} from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/styles/index";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import IconButton from "@mui/material/IconButton";
+import Rating from "@mui/material/Rating";
+import Link from "next/link";
+import { createContext, type ReactNode, useContext, useState } from "react";
 
 type Product = {
 	title: string;
@@ -201,11 +201,11 @@ ProductCardPlp.QuickViewButton = () => {
 
 ProductCardPlp.FavoriteButton = () => {
 	const ctx = useContext(ProductCardPlpContext);
-	if (!ctx) return null;
 
-	const { id } = ctx.product;
+	const id = ctx?.product?.id;
+	const isFavorite = useFavorite(id ? Number(id) : undefined);
 
-	const isFavorite = useFavorite(Number(id));
+	if (!ctx) return null;
 
 	return (
 		<FavoriteButton
@@ -216,17 +216,18 @@ ProductCardPlp.FavoriteButton = () => {
 		/>
 	);
 };
-
 // Using quantity buttons (addtocart) doesn't make sense when we have product variants to select.
 // So hide them for now, implement based on client requirements.
 ProductCardPlp.QuantityButtons = () => {
 	const ctx = useContext(ProductCardPlpContext);
-	if (!ctx) return null;
 
-	const { id } = ctx.product;
+	const id = ctx?.product?.id;
 	const { currentCartLine, handleCartAmountChange, loading } = useCart(id);
+
 	const [quantity, setQuantity] = useState(currentCartLine?.Quantity || 0);
 
+	if (!ctx) return null;
+
 	const handleIncrementQuantity = () => {
 		const qty = quantity + 1;
 		handleCartAmountChange(qty);

package/src/components-v2/product-cards/product-card-plp-list/ProductCardPlpList.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { ProductCardPlpList } from "./index";
 import { data } from "../../../../__mocks__/products";
+import { ProductCardPlpList } from "./index";
 
 const meta = {
 	title: "Product/ProductCards/ProductCardPlpList",

package/src/components-v2/product-cards/product-card-plp-list/components/tags.tsx

@@ -20,7 +20,7 @@ interface Props {
 }
 // ==============================================================
 
-export default function ProductTags({ tags }: Props) {
+export default function ProductTags({ tags }: Readonly<Props>) {
 	return (
 		<StyledRoot>
 			{tags.map((item) => (