@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/components-v2/categories/mega-menu/column-list.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { PropsWithChildren, ReactNode } from "react";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/styles";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
 import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
-import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/styles";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import Link from "next/link";
+import type { PropsWithChildren, ReactNode } from "react";
 
 interface RootProps extends PropsWithChildren {
 	minWidth?: number;

package/src/components-v2/categories/mega-menu/mega-menu-1.tsx

@@ -1,13 +1,13 @@
-import Link from "next/link";
-// MUI
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
 // LOCAL CUSTOM COMPONENTS
 import ColumnList from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/column-list";
 // DATA TYPE
-import { CategoryItemOffer } from "@evenicanpm/storefront-core/src/components-v2/categories/types";
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import type { CategoryItemOffer } from "@evenicanpm/storefront-core/src/components-v2/categories/types";
+// GLOBAL CUSTOM COMPONENTS
+import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+// MUI
+import Box from "@mui/material/Box";
+import Link from "next/link";
 
 // =========================================================
 interface Props {
@@ -19,7 +19,7 @@ interface Props {
 
 // MegaMenu1 is acting purely as a configuration/wiring component,
 // not as a reusable UI element that needs further extensibility.
-export default function MegaMenu1({ banner, data }: Props) {
+export default function MegaMenu1({ banner, data }: Readonly<Props>) {
 	return (
 		<ColumnList>
 			<ColumnList.Wrapper>

package/src/components-v2/categories/mega-menu/mega-menu-2.tsx

@@ -1,11 +1,12 @@
 // LOCAL CUSTOM COMPONENTS
+
+import CategoryMenuItem from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/index";
 import OfferBanner from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/banner";
 import ColumnList from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/column-list";
-import CategoryMenuItem from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/index";
 // STYLED COMPONENT
 import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/styles";
 // DATA TYPE
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 
 // =======================================================================
 interface Props {
@@ -15,7 +16,7 @@ interface Props {
 
 // MegaMenu2 is acting purely as a configuration/wiring component,
 // not as a reusable UI element that needs further extensibility.
-export default function MegaMenu2({ data }: Props) {
+export default function MegaMenu2({ data }: Readonly<Props>) {
 	return (
 		<StyledRoot elevation={2}>
 			{data.map((item) => (
@@ -24,7 +25,7 @@ export default function MegaMenu2({ data }: Props) {
 					//icon={item.icon} // No icon information
 					key={item.RecordId}
 					title={item.Name ?? ""}
-					caret={!!(item.Children && item.Children.length)}
+					caret={!!item?.Children?.length}
 					render={
 						item.Children?.length ? (
 							<ColumnList minWidth={550}>

package/src/components-v2/categories/types.ts

@@ -1,4 +1,4 @@
-import { SvgIconComponent } from "@mui/icons-material";
+import type { SvgIconComponent } from "@mui/icons-material";
 
 export interface CategoryItemOffer {
 	url: string;

package/src/components-v2/countries-input.tsx

@@ -1,7 +1,7 @@
-import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import type { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
 import {
 	Autocomplete,
-	AutocompleteRenderInputParams,
+	type AutocompleteRenderInputParams,
 	Box,
 	TextField,
 } from "@mui/material";

package/src/components-v2/flex-box/Flex.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { FlexBox, FlexBetween, FlexRowCenter } from "./index";
+import { FlexBetween, FlexBox, FlexRowCenter } from "./index";
 
 const BoxStyle = {
 	padding: "10px 20px",

package/src/components-v2/flex-box/flex-between.tsx

@@ -1,4 +1,4 @@
-import Box, { BoxProps } from "@mui/material/Box";
+import Box, { type BoxProps } from "@mui/material/Box";
 
 export default function FlexBetween({ children, ...props }: BoxProps) {
 	return (

package/src/components-v2/flex-box/flex-box.tsx

@@ -1,4 +1,4 @@
-import Box, { BoxProps } from "@mui/material/Box";
+import Box, { type BoxProps } from "@mui/material/Box";
 
 /**
  * Convenience utility wrapper around css Flex style

package/src/components-v2/flex-box/flex-row-center.tsx

@@ -1,4 +1,4 @@
-import Box, { BoxProps } from "@mui/material/Box";
+import Box, { type BoxProps } from "@mui/material/Box";
 
 export default function FlexRowCenter({ children, ...props }: BoxProps) {
 	return (

package/src/components-v2/flex-box/index.ts

@@ -1,5 +1,5 @@
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
 
 export { FlexBox, FlexBetween, FlexRowCenter };

package/src/components-v2/header/__tests__/user.test.tsx

@@ -1,8 +1,8 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import signOut from "@evenicanpm/storefront-core/src/auth/signout";
+import Header from "@evenicanpm/storefront-core/src/components-v2/header/header";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { NextIntlClientProvider } from "next-intl";
 import { vi } from "vitest";
-import Header from "@evenicanpm/storefront-core/src/components-v2/header/header";
-import signOut from "@evenicanpm/storefront-core/src/auth/signout";
 
 vi.mock(
 	"@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init",

package/src/components-v2/header/components/categories-menu.tsx

@@ -1,11 +1,11 @@
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENT
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-// CUSTOM ICON COMPONENTS
-import Category from "@evenicanpm/storefront-core/src/components-v2/icons/category";
+import CategoryMenu from "@evenicanpm/storefront-core/src/components-v2/categories/category-menu";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import CategoryMenu from "@evenicanpm/storefront-core/src/components-v2/categories/category-menu";
+// CUSTOM ICON COMPONENTS
+import Category from "@evenicanpm/storefront-core/src/components-v2/icons/category";
+// MUI ICON COMPONENT
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import Button from "@mui/material/Button";
 
 export default function CategoriesMenu() {
 	return (

package/src/components-v2/header/components/mobile-header.tsx

@@ -1,32 +1,31 @@
-import { useContext, ReactNode, createContext } from "react";
-import Box from "@mui/material/Box";
-import Drawer from "@mui/material/Drawer";
-import IconButton from "@mui/material/IconButton";
-import { useTranslations } from "next-intl";
-// CUSTOM COMPONENTS
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { MobileMenu } from "@evenicanpm/storefront-core/src/components-v2/navbar/mobile-menu/index";
+// API
+import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 import {
 	FlexBetween,
 	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
-import MiniCartTrigger from "@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger";
 import User from "@evenicanpm/storefront-core/src/components-v2/header/components/user";
-// ICONS
-import { MdClear as Clear } from "react-icons/md";
-import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
-import MobileCartBag from "@evenicanpm/storefront-core/src/components-v2/icons/cart-bag";
-// API
-import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
-
 import useHeader from "@evenicanpm/storefront-core/src/components-v2/header/hooks/use-header";
-import { SearchBarViewSm as SearchBar } from "@evenicanpm/storefront-core/src/components-v2/search-bar";
+import MobileCartBag from "@evenicanpm/storefront-core/src/components-v2/icons/cart-bag";
+import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
+import MiniCartTrigger from "@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger";
+import { MobileMenu } from "@evenicanpm/storefront-core/src/components-v2/navbar/mobile-menu/index";
 import {
 	transformCategoryNav,
 	transformCmsNav,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import { SearchBarViewSm as SearchBar } from "@evenicanpm/storefront-core/src/components-v2/search-bar";
+import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
+// CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import { useTranslations } from "next-intl";
+import { createContext, type ReactNode, useContext } from "react";
+// ICONS
+import { MdClear as Clear } from "react-icons/md";
 
 type MobileHeaderRootProps = {
 	children: ReactNode;

package/src/components-v2/header/components/user.tsx

@@ -1,38 +1,39 @@
 "use client";
 
-import React, {
-	createContext,
-	useState,
-	useEffect,
-	useContext,
-	MouseEvent,
-	ReactNode,
-} from "react";
-import { useRouter } from "next/navigation";
+import useSessionInit from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init";
+import useSessionLogout from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-logout";
+// API hooks
+import useUpdateUser from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user";
+import {
+	getMsalInstance,
+	initializeMsal,
+} from "@evenicanpm/storefront-core/src/auth/msal";
+import signOutCustom from "@evenicanpm/storefront-core/src/auth/signout";
+import MobileUserIcon from "@evenicanpm/storefront-core/src/components-v2/icons/user";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
+import T from "@evenicanpm/storefront-core/src/components-v2/T";
 // UI Components
 import {
 	Box,
 	Button,
-	Popover,
+	IconButton,
 	List,
 	ListItemButton,
-	IconButton,
+	Popover,
 } from "@mui/material";
-import { MdPersonOutline as PersonOutline } from "react-icons/md";
-import MobileUserIcon from "@evenicanpm/storefront-core/src/components-v2/icons/user";
-import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
-import T from "@evenicanpm/storefront-core/src/components-v2/T";
+import { useRouter } from "next/navigation";
 // Auth components
 import { signIn, useSession } from "next-auth/react";
+import type React from "react";
 import {
-	getMsalInstance,
-	initializeMsal,
-} from "@evenicanpm/storefront-core/src/auth/msal";
-import signOutCustom from "@evenicanpm/storefront-core/src/auth/signout";
-// API hooks
-import useUpdateUser from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user";
-import useSessionInit from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init";
-import useSessionLogout from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-logout";
+	createContext,
+	type MouseEvent,
+	type ReactNode,
+	useContext,
+	useEffect,
+	useState,
+} from "react";
+import { MdPersonOutline as PersonOutline } from "react-icons/md";
 
 interface IdTokenClaims {
 	given_name?: string;
@@ -50,9 +51,9 @@ interface UserContextValue {
 	isAuthenticated: boolean;
 	status: string;
 	menuItems: typeof MENU_ITEMS;
-	handleLogout: () => void;
+	handleLogout: () => Promise<void>;
 	signIn: typeof signIn;
-	signOut: () => void;
+	signOut: () => Promise<void>;
 	anchorEl: HTMLButtonElement | null;
 	setAnchorEl: (el: HTMLButtonElement | null) => void;
 	open: boolean;
@@ -146,15 +147,15 @@ const User = ({ children }: Props) => {
 // Subcomponents
 User.MobileTrigger = function MobileTrigger() {
 	const ctx = useContext(UserContext);
+	const router = useRouter();
 	if (!ctx) return null;
 	const { isAuthenticated, signIn } = ctx;
-	const router = useRouter();
 	return (
 		<IconButton
 			aria-label="User Menu"
 			onClick={() => {
-				if (!isAuthenticated) signIn();
-				else router.push("/account/profile");
+				if (isAuthenticated) router.push("/account/profile");
+				else signIn();
 			}}
 		>
 			<MobileUserIcon style={{ fontSize: "1.25rem" }} />

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

@@ -1,24 +1,23 @@
 "use client";
 
-import { ReactNode } from "react";
-import clsx from "clsx";
-import { MdOutlineShoppingBag } from "react-icons/md";
+// API
+import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
 // LOCAL CUSTOM COMPONENTS
 import CategoriesMenu from "@evenicanpm/storefront-core/src/components-v2/header/components/categories-menu";
 import User from "@evenicanpm/storefront-core/src/components-v2/header/components/user";
-import MiniCartTrigger from "@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger";
 // STYLED COMPONENTS
 import {
 	HeaderWrapper,
 	StyledContainer,
 } from "@evenicanpm/storefront-core/src/components-v2/header/styles/index";
-// API
-import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
-
-import { useSession } from "next-auth/react";
+import MiniCartTrigger from "@evenicanpm/storefront-core/src/components-v2/mini-cart/mini-cart-trigger";
+import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
+import { useAppSession } from "@evenicanpm/storefront-core/src/hooks/use-nextauth-session";
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { MdOutlineShoppingBag } from "react-icons/md";
 
 type HeaderRootProps = {
 	className?: string;
@@ -53,7 +52,7 @@ Header.MidSlot = ({ children }: { children: ReactNode }) => {
 };
 
 Header.User = () => {
-	const { data: session } = useSession();
+	const { session } = useAppSession();
 	const isAuthenticated = !!session;
 	return (
 		<User>

package/src/components-v2/header/sticky-header.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import MobileHeader from "@evenicanpm/storefront-core/src/components-v2/header/components/mobile-header";
 import Header from "@evenicanpm/storefront-core/src/components-v2/header/index";
 import { SearchBarViewLg as SearchBar } from "@evenicanpm/storefront-core/src/components-v2/search-bar";
-import Sticky from "@evenicanpm/storefront-core/src/components-v2/sticky/index";
-import { useCallback, useState } from "react";
+import { Sticky } from "@evenicanpm/ui";
 
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import MobileHeader from "@evenicanpm/storefront-core/src/components-v2/header/components/mobile-header";
+import { useCallback, useState } from "react";
 
 /**
  * @category Implementation

package/src/components-v2/header/styles/index.ts

@@ -1,7 +1,8 @@
+// CONSTANT VARIABLES
+
+import { layoutConstant } from "@evenicanpm/ui";
 import Container from "@mui/material/Container";
 import styled from "@mui/material/styles/styled";
-// CONSTANT VARIABLES
-import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
 
 export const HeaderWrapper = styled("div")(({ theme }) => ({
 	zIndex: 3,

package/src/components-v2/mini-cart/__tests__/cart-item.test.tsx

@@ -1,14 +1,14 @@
-import { Cart, CartLine } from "@/schemas/cart.schema";
+import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
+import ENUS from "@messages/en-US.json";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { setupServer } from "msw/node";
-import React from "react";
-import cartData from "./test-cart-with-item.json";
 import { NextIntlClientProvider } from "next-intl";
-import ENUS from "@messages/en-US.json";
-import CartItem from "../components/cart-item";
+import type React from "react";
 import { vi } from "vitest";
-import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
+import type { Cart } from "@/schemas/cart.schema";
+import CartItem from "../components/cart-item";
+import cartData from "./test-cart-with-item.json";
 
 // @ts-expect-error - We don't use the dates from this json and its not worth parsin
 const cart: Cart = cartData;
@@ -36,10 +36,10 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
-					handleCartAmountChange={(cartline: CartLine) => {
-						cartline;
+					handleCartAmountChange={() => {
+						fn();
 					}}
 				>
 					<CartItem.ProductDetails />
@@ -57,10 +57,10 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
-					handleCartAmountChange={(cartline: CartLine) => {
-						cartline;
+					handleCartAmountChange={() => {
+						fn();
 					}}
 				>
 					<CartItem.QuantityControls />
@@ -80,10 +80,10 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={true}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
-					handleCartAmountChange={(cartline: CartLine) => {
-						cartline;
+					handleCartAmountChange={() => {
+						fn();
 					}}
 				>
 					<CartItem.QuantityControls />
@@ -103,7 +103,7 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
 					handleCartAmountChange={testClick}
 				>
@@ -125,7 +125,7 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
 					handleCartAmountChange={testClick}
 				>
@@ -148,7 +148,7 @@ describe("cart-item", () => {
 					item={cart.CartLines[0]}
 					isLineUpdating={false}
 					closeDrawer={() => {
-						fn;
+						fn();
 					}}
 					handleCartAmountChange={testClick}
 				>

package/src/components-v2/mini-cart/__tests__/mini-cart.test.tsx

@@ -1,14 +1,14 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { NextIntlClientProvider } from "next-intl";
-import cartData from "./test-cart-with-item.json";
-import cartDataEmpty from "./test-cart-empty.json";
+import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
 import ENUS from "@messages/en-US.json";
 import fr from "@messages/fr.json";
+import type { Cart } from "@msdyn365-commerce/retail-proxy";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen } from "@testing-library/react";
-import MiniCart from "../mini-cart";
+import { NextIntlClientProvider } from "next-intl";
 import { vi } from "vitest";
-import { Cart } from "@msdyn365-commerce/retail-proxy";
-import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
+import MiniCart from "../mini-cart";
+import cartDataEmpty from "./test-cart-empty.json";
+import cartData from "./test-cart-with-item.json";
 
 const { useRouter, mockedRouterPush } = vi.hoisted(() => {
 	const mockedRouterPush = vi.fn();

package/src/components-v2/mini-cart/components/bottom-actions.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
 import Box from "@mui/material/Box";
-import Button, { ButtonProps } from "@mui/material/Button";
+import Button, { type ButtonProps } from "@mui/material/Button";
 import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext, useContext } from "react";
 
 interface BottomActionsContextValue {
 	total: string;
@@ -40,9 +41,9 @@ BottomActions.ViewCartButton = function ViewCartButton(
 	props: Omit<ButtonProps, "onClick" | "children">,
 ) {
 	const ctx = useContext(BottomActionsContext);
+	const t = useTranslations("Cart");
 	if (!ctx) return null;
 	const { total, handleNavigate } = ctx;
-	const t = useTranslations("Cart");
 	return (
 		<Button
 			fullWidth

package/src/components-v2/mini-cart/components/cart-item.tsx

@@ -1,24 +1,25 @@
 // @refresh reset
 "use client";
 
-import React, { createContext, useContext } from "react";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Avatar from "@mui/material/Avatar";
-import IconButton from "@mui/material/IconButton";
-import { CircularProgress } from "@mui/material";
-import Add from "@mui/icons-material/Add";
-import Close from "@mui/icons-material/Close";
-import Remove from "@mui/icons-material/Remove";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import {
 	H6,
 	Tiny,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { CartLine } from "@/schemas/cart.schema";
-import { useFormatter, useTranslations } from "next-intl";
 import { getProductDetailUrl } from "@evenicanpm/storefront-core/src/lib/build-product-detail-url";
+import Add from "@mui/icons-material/Add";
+import Close from "@mui/icons-material/Close";
+import Remove from "@mui/icons-material/Remove";
+import { CircularProgress } from "@mui/material";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Link from "next/link";
+import { useFormatter, useTranslations } from "next-intl";
+import type React from "react";
+import { createContext, useContext } from "react";
+import type { CartLine } from "@/schemas/cart.schema";
 
 interface MiniCartItemContextValue {
 	item: CartLine;
@@ -73,9 +74,9 @@ const MiniCartItem = ({
 
 MiniCartItem.QuantityControls = () => {
 	const ctx = useContext(MiniCartItemContext);
+	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
 	const { item, handleCartAmountChange, isLineUpdating } = ctx;
-	const t = useTranslations("Cart.CartLine");
 	const quantity = item?.Quantity || 0;
 
 	if (isLineUpdating) {
@@ -172,7 +173,7 @@ MiniCartItem.ProductDetails = () => {
 			</Link>
 			<H6 color="grey.600" mt={0.5}>
 				{item?.Product?.Dimensions?.map((d, i) => (
-					<span key={i}>{d?.DimensionValue?.Value + " "}</span>
+					<span key={`dim-${i + 1}`}>{`${d?.DimensionValue?.Value} `}</span>
 				))}
 			</H6>
 			<Tiny color="grey.600">
@@ -187,9 +188,9 @@ MiniCartItem.ProductDetails = () => {
 
 MiniCartItem.RemoveButton = () => {
 	const ctx = useContext(MiniCartItemContext);
+	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
 	const { item, handleCartAmountChange } = ctx;
-	const t = useTranslations("Cart.CartLine");
 	return (
 		<IconButton
 			size="small"

package/src/components-v2/mini-cart/components/empty-view.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext, useContext } from "react";
 import { MdShoppingBag as ShoppingBagIcon } from "react-icons/md";
 
 interface EmptyCartContextValue {