@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/lib/category-helpers.ts

@@ -1,4 +1,4 @@
-import {
+import type {
 	Category,
 	TextValueTranslation,
 } from "@msdyn365-commerce/retail-proxy";
@@ -67,7 +67,7 @@ const mapCategoryToHierarchy = (
 		return categoryHierarchy;
 	}
 
-	return JSON.parse(JSON.stringify(rootCategory.Children)) ?? [];
+	return globalThis.structuredClone(rootCategory.Children) ?? [];
 };
 
 const generateUrl = (
@@ -86,7 +86,7 @@ const generateUrl = (
 		);
 	}
 	categoryNames.unshift(currentCategory.RecordId.toString());
-	return categoryNames.reverse().join("/");
+	return categoryNames.slice().reverse().join("/");
 };
 
 const getFriendlyName = (
@@ -99,7 +99,7 @@ const getFriendlyName = (
 			(item) => item?.Language?.toLowerCase() === locale?.toLowerCase(),
 		);
 	}
-	return nameTranslation && nameTranslation.Text;
+	return nameTranslation?.Text;
 };
 
 const normalizeCategoryName = (string_: string) =>

package/src/lib/create-graphql-client.ts

@@ -1,10 +1,9 @@
-import { GraphQLClient } from "graphql-request";
-
 // Note: We are keeping two separate versions of the graphqlRequestSdk
 // currently. We need one in the api-manager client packages to get types
 // and one here to isntantiate because graphql-request library must be same
 // for this file and the sdk
 import { getSdk } from "@evenicanpm/storefront-core/src/lib/graphqlRequestSdk";
+import { GraphQLClient } from "graphql-request";
 
 // typescript can't infer type without reference
 export type E4Sdk = ReturnType<typeof getSdk>;

package/src/lib/get-palette-color.ts

@@ -1,8 +1,38 @@
-import { Theme } from "@mui/material";
+import type { Theme } from "@mui/material";
 
 // Define a union type for possible color values
 type ColorValue = string | number | (() => string);
 
+// Helper to resolve possible function values
+const resolveColorValue = (value: ColorValue): string => {
+	return typeof value === "function" ? value() : String(value);
+};
+
+// Helper to get main color if available
+const getMainColor = (colorObj: Record<string, ColorValue>): string => {
+	if ("main" in colorObj) {
+		const mainValue = colorObj.main;
+		return resolveColorValue(mainValue);
+	}
+	return "";
+};
+
+// Helper to get shade color if available
+const getShadeColor = (
+	colorObj: Record<string, ColorValue>,
+	shade: number | string,
+): string | undefined => {
+	const shadeKey = shade.toString();
+
+	// Try to access the shade
+	if (shadeKey in colorObj) {
+		const value = colorObj[shadeKey];
+		return resolveColorValue(value);
+	}
+
+	return undefined;
+};
+
 // Type-safe color getter function
 const getPaletteColor = (
 	theme: Theme,
@@ -21,30 +51,20 @@ const getPaletteColor = (
 
 	// If shade is specified, try to get it
 	if (shade !== undefined) {
-		const shadeKey = shade.toString();
+		const shadeColor = getShadeColor(colorObj, shade);
 
-		// Try to access the shade
-		if (shadeKey in colorObj) {
-			const value = colorObj[shadeKey];
-			// Handle possible function values
-			return typeof value === "function" ? value() : String(value);
+		if (shadeColor) {
+			return shadeColor;
 		}
 
 		// Check if this is a PaletteColor with main/dark/light properties
-		if ("main" in colorObj) {
-			const mainValue = colorObj.main;
-			return typeof mainValue === "function" ? mainValue() : String(mainValue);
-		}
+		return getMainColor(colorObj);
 	}
 
 	// If no shade specified but color has 'main' property
-	if ("main" in colorObj) {
-		const mainValue = colorObj.main;
-		return typeof mainValue === "function" ? mainValue() : String(mainValue);
-	}
+	return getMainColor(colorObj);
 
 	// Last resort fallback
-	return "";
 };
 
 export default getPaletteColor;

package/src/lib/graphqlRequestSdk.ts

@@ -1,6 +1,5 @@
-import { GraphQLClient, RequestOptions } from "graphql-request";
-import { GraphQLError, print } from "graphql";
-import { DocumentNode } from "graphql";
+import { type DocumentNode, type GraphQLError, print } from "graphql";
+import type { GraphQLClient, RequestOptions } from "graphql-request";
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {

package/src/lib/hexToLuma.ts

@@ -5,10 +5,10 @@ function sRGBtoLin(colorChannel: number): number {
 	if (colorChannel <= 0.04045) {
 		return colorChannel / 12.92;
 	} else {
-		return Math.pow((colorChannel + 0.055) / 1.055, 2.4);
+		return ((colorChannel + 0.055) / 1.055) ** 2.4;
 	}
 }
-1;
+
 function YtoLstar(Y: number): number {
 	// Send this function a luminance value between 0.0 and 1.0,
 	// and it returns L* which is "perceptual lightness"
@@ -16,7 +16,7 @@ function YtoLstar(Y: number): number {
 	if (Y <= 216 / 24389) {
 		return Y * (24389 / 27);
 	} else {
-		return Math.pow(Y, 1 / 3) * 116 - 16;
+		return Y ** (1 / 3) * 116 - 16;
 	}
 }
 
@@ -30,7 +30,7 @@ export const hexToLuma = (hex: string): number => {
 		throw new Error("not a valid hex color code");
 	}
 
-	const number = Number.parseInt(hex[0] === "#" ? hex.slice(1) : hex, 16);
+	const number = Number.parseInt(hex.startsWith("#") ? hex.slice(1) : hex, 16);
 	const red = number >> 16;
 	const green = (number >> 8) & 255;
 	const blue = number & 255;

package/src/lib/product-list-types.ts

@@ -1,4 +1,4 @@
-import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+import type { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
 
 export const PageKey = {
 	TOP: "perPage",

package/src/lib/refiner-utils.ts

@@ -1,4 +1,4 @@
-import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+import type { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
 
 const convertRefinerToParameter = (refiner: ProductRefinerValue) =>
 	`${refiner.RefinerRecordId}|${refiner.DataTypeValue}|${refiner.LeftValueBoundString}|${refiner.RightValueBoundString}|${refiner.RefinerSourceValue}`;

package/src/lib/store-hours-helper.ts

@@ -1,4 +1,4 @@
-import { RegularStoreHours } from "@msdyn365-commerce/retail-proxy";
+import type { RegularStoreHours } from "@msdyn365-commerce/retail-proxy";
 import get from "lodash/get";
 
 export interface IStoreSelectorLocationLineItemResources {
@@ -46,7 +46,7 @@ export const secondsToTime = (
 	let hours = Math.floor(seconds / (60 * 60));
 	const ampm = hours >= 12 ? "pm" : "am";
 	hours %= 12;
-	hours = hours ? hours : 12;
+	hours = hours || 12;
 	const divisorForMinutes = seconds % (60 * 60);
 	const minutes =
 		Math.floor(divisorForMinutes / 60) < 10
@@ -107,13 +107,13 @@ const buildHoursDisplayInfo = (
 	hoursInfo: string,
 	resources: IStoreSelectorLocationLineItemResources,
 ): IHoursDisplayInfo => {
+	const isSameDay = startDay === endDay;
+
 	return {
 		startDayShort: getShortTimeString(startDay, resources),
 		startDayFull: getFullTimeString(startDay, resources),
-		endDayShort:
-			startDay !== endDay ? getShortTimeString(endDay, resources) : undefined,
-		endDayFull:
-			startDay !== endDay ? getFullTimeString(endDay, resources) : undefined,
+		endDayShort: isSameDay ? undefined : getShortTimeString(endDay, resources),
+		endDayFull: isSameDay ? undefined : getFullTimeString(endDay, resources),
 		timeRange: hoursInfo,
 	};
 };

package/src/pages-v2/account/account-navigation.tsx

@@ -1,29 +1,29 @@
 "use client";
 
-import { createContext, Fragment, ReactNode } from "react";
-import { usePathname } from "next/navigation";
-import { useTranslations } from "next-intl";
-// ICON COMPONENTS
-import {
-	MdOutlineShoppingBag as ShoppingBagOutlined,
-	MdFavoriteBorder as FavoriteBorder,
-	MdPerson as Person,
-	MdPlace as Place,
-} from "react-icons/md";
+// API
+import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
+import getUserCounts from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user-counts";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import {
 	Paragraph,
 	Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// API
-import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
-import getUserCounts from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user-counts";
 // STYLED COMPONENTS
 import {
 	MainContainer,
 	StyledNavLink,
 } from "@evenicanpm/storefront-core/src/pages-v2/account/styles";
+import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { createContext, Fragment, type ReactNode } from "react";
+// ICON COMPONENTS
+import {
+	MdFavoriteBorder as FavoriteBorder,
+	MdPerson as Person,
+	MdPlace as Place,
+	MdOutlineShoppingBag as ShoppingBagOutlined,
+} from "react-icons/md";
 
 /**
  * 

package/src/pages-v2/account/addresses/address-form.tsx

@@ -1,32 +1,33 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
+// API and Interfaces
+import type { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
+import useCreateAddress from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/create-address";
+import useUpdateAddress from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/update-address";
+import getCountries from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-countries";
+import getStates from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-states";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import type { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
 import {
 	Box,
 	Button,
 	FormControl,
 	InputLabel,
-	TextField,
 	MenuItem,
-	Select,
 	OutlinedInput,
+	Select,
+	TextField,
 } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import _ from "lodash";
-import { useLocale, useTranslations } from "next-intl";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import { useRouter } from "next/navigation";
 // Forms
 import { useFormik } from "formik";
-import { z } from "zod";
 import { withZodSchema } from "formik-validator-zod";
-// API and Interfaces
-import { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
-import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
-import getCountries from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-countries";
-import getStates from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-states";
-import useCreateAddress from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/create-address";
-import useUpdateAddress from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/update-address";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import React, { createContext, useContext } from "react";
+import { z } from "zod";
+
 interface FormContextValue {
 	formik: ReturnType<typeof useFormik<any>>;
 	countries: CountryRegionInfo[] | undefined;
@@ -42,7 +43,8 @@ interface RootProps {
 }
 
 const AddressForm = ({ address, children }: RootProps) => {
-	const [tn, t] = ["Account.Addresses", "Address"].map(useTranslations);
+	const tn = useTranslations("Account.Addresses");
+	const t = useTranslations("Address");
 	const { setNotification } = useNotification();
 	const router = useRouter();
 	const locale = useLocale();
@@ -117,6 +119,7 @@ const AddressForm = ({ address, children }: RootProps) => {
 				message: tn("addressFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 
@@ -152,9 +155,9 @@ AddressForm.Fields = ({ children }: { children?: React.ReactNode }) => {
 
 AddressForm.Field = ({ name, label, required }: FieldProps) => {
 	const ctx = useContext(FormContext);
+	const t = useTranslations("Address");
 	if (!ctx) return null;
 	const { formik } = ctx;
-	const t = useTranslations("Address");
 
 	return (
 		<Grid size={{ sm: 6, xs: 12 }}>
@@ -179,9 +182,9 @@ AddressForm.Field = ({ name, label, required }: FieldProps) => {
 
 AddressForm.Country = () => {
 	const ctx = useContext(FormContext);
+	const t = useTranslations("Address");
 	if (!ctx) return null;
 	const { formik, countries, setSelectedCountry } = ctx;
-	const t = useTranslations("Address");
 
 	return (
 		<Grid size={{ sm: 6, xs: 12 }}>
@@ -209,8 +212,8 @@ AddressForm.Country = () => {
 					}}
 				>
 					<MenuItem value="">Select Country</MenuItem>
-					{countries?.map(({ ShortName, CountryRegionId }, i) => (
-						<MenuItem key={i} value={CountryRegionId}>
+					{countries?.map(({ ShortName, CountryRegionId }) => (
+						<MenuItem key={CountryRegionId} value={CountryRegionId}>
 							{ShortName}
 						</MenuItem>
 					))}
@@ -229,9 +232,9 @@ AddressForm.Country = () => {
 
 AddressForm.State = () => {
 	const ctx = useContext(FormContext);
+	const t = useTranslations("Address");
 	if (!ctx) return null;
 	const { formik, states } = ctx;
-	const t = useTranslations("Address");
 
 	return (
 		<Grid size={{ sm: 6, xs: 12 }}>
@@ -252,8 +255,8 @@ AddressForm.State = () => {
 					onBlur={formik.handleBlur}
 				>
 					<MenuItem value="">Select a state</MenuItem>
-					{states?.map(({ StateId, StateName }, i) => (
-						<MenuItem key={i} value={StateId}>
+					{states?.map(({ StateId, StateName }) => (
+						<MenuItem key={StateId} value={StateId}>
 							{StateName}
 						</MenuItem>
 					))}

package/src/pages-v2/account/addresses/address-item.tsx

@@ -1,22 +1,21 @@
 "use client";
 
-import { createContext, useContext, ReactNode } from "react";
-import IconButton from "@mui/material/IconButton";
-import { Button, Box, Chip } from "@mui/material";
-import { SxProps } from "@mui/material/styles";
-import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-// ICONS
-import { MdEdit as Edit } from "react-icons/md";
-import { MdDelete as Delete } from "react-icons/md";
-// Custom Components
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
+import type { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
 // API
 import useDeleteAddress from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/delete-address";
 import useUpdateUser from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user";
-import { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
+// Custom Components
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { Box, Button, Chip } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import type { SxProps } from "@mui/material/styles";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { createContext, type ReactNode, useContext } from "react";
+// ICONS
+import { MdDelete as Delete, MdEdit as Edit } from "react-icons/md";
 
 interface AddressContextValue {
 	address: Address;
@@ -115,9 +114,9 @@ AddressListItem.Actions = ({ children }: { children: ReactNode }) => {
 
 AddressListItem.Primary = () => {
 	const ctx = useContext(AddressContext);
+	const t = useTranslations("Account.Addresses");
 	if (!ctx) return null;
 	const { address, setPrimaryAddress } = ctx;
-	const t = useTranslations("Account.Addresses");
 	const rid = address.RecordId?.toString();
 	const addrId = address.Id ?? rid ?? "";
 

package/src/pages-v2/account/dashboard-header.tsx

@@ -1,23 +1,23 @@
 "use client";
 
-import React, { ReactNode, createContext, useContext } from "react";
-import Link from "next/link";
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// GLOBAL CUSTOM COMPONENTS
+import SideNav from "@evenicanpm/storefront-core/src/components-v2/side-nav/index";
+import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Navigation from "@evenicanpm/storefront-core/src/pages-v2/account/account-navigation";
 import {
 	Box,
 	Button,
 	IconButton,
-	Theme,
 	styled,
+	type Theme,
 	useMediaQuery,
 } from "@mui/material";
+import Link from "next/link";
 import { useTranslations } from "next-intl";
+import React, { createContext, type ReactNode, useContext } from "react";
+import type { IconType } from "react-icons";
 import { MdMenu as Menu } from "react-icons/md";
-// GLOBAL CUSTOM COMPONENTS
-import SideNav from "@evenicanpm/storefront-core/src/components-v2/side-nav/index";
-import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-import { IconType } from "react-icons";
-import Navigation from "@evenicanpm/storefront-core/src/pages-v2/account/account-navigation";
 
 const StyledBox = styled("div")(({ theme }) => ({
 	display: "flex",

package/src/pages-v2/account/orders/order-progress.tsx

@@ -1,20 +1,20 @@
-import { Fragment, createContext, useContext } from "react";
-import { useTranslations } from "next-intl";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Avatar from "@mui/material/Avatar";
-import styled from "@mui/material/styles/styled";
-import { MdDone as Done } from "react-icons/md";
-// CUSTOM ICON COMPONENTS
-import Delivery from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/delivery";
-import PackageBox from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/package-box";
-import TruckFilled from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/truck-filled";
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
 	FlexBetween,
 	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// CUSTOM ICON COMPONENTS
+import Delivery from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/delivery";
+import PackageBox from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/package-box";
+import TruckFilled from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/truck-filled";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+import { useTranslations } from "next-intl";
+import { createContext, Fragment, useContext } from "react";
+import { MdDone as Done } from "react-icons/md";
 
 // STYLED COMPONENTS
 const StyledFlexbox = styled(FlexBetween)(({ theme }) => ({
@@ -85,7 +85,7 @@ OrderProgress.Steps = () => {
 	return (
 		<StyledFlexbox>
 			{stepIcons.map((Icon, index) => (
-				<Fragment key={index}>
+				<Fragment key={`step-${index + 1}`}>
 					<Box position="relative">
 						<Avatar
 							alt="step"

package/src/pages-v2/account/orders/order-row.tsx

@@ -1,18 +1,19 @@
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
-import IconButton from "@mui/material/IconButton";
-import { MdEast as East } from "react-icons/md";
-import { ChipProps } from "@mui/material";
-import { format } from "date-fns";
+import type { SalesOrder } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
 import {
 	H6,
 	Paragraph,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
 import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import { SalesOrder } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
-import React, { createContext, useContext } from "react";
+import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
+import type { ChipProps } from "@mui/material";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import IconButton from "@mui/material/IconButton";
+import { format } from "date-fns";
+import Link from "next/link";
+import type React from "react";
+import { createContext, useContext } from "react";
+import { MdEast as East } from "react-icons/md";
 
 type Props = { order: SalesOrder };
 

package/src/pages-v2/account/orders/order-summary.tsx

@@ -1,7 +1,4 @@
-import Grid from "@mui/material/Grid2";
-import Card from "@mui/material/Card";
-import Divider from "@mui/material/Divider";
-import { useTranslations } from "next-intl";
+import type { SalesOrder } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import {
 	H5,
@@ -9,8 +6,12 @@ import {
 	Paragraph,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import { SalesOrder } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
-import React, { createContext, useContext } from "react";
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import Grid from "@mui/material/Grid2";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext, useContext } from "react";
 
 type Props = { order: SalesOrder };
 

package/src/pages-v2/account/orders/ordered-products.tsx

@@ -1,27 +1,28 @@
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
-import Avatar from "@mui/material/Avatar";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-import Link from "next/link";
-import { useTranslations } from "next-intl";
+import type {
+	SalesLine,
+	SalesOrder,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
+import {
+	FlexBetween,
+	FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import {
 	H6,
 	Paragraph,
 	Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import {
-	FlexBetween,
-	FlexBox,
-} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import {
-	SalesLine,
-	SalesOrder,
-} from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
 import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
-import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
-import React, { createContext } from "react";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid2";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext } from "react";
 
 type Props = { order: SalesOrder };
 
@@ -140,7 +141,7 @@ OrderedProducts.Dimensions = ({ item }: { item: SalesLine }) => {
 	return (
 		<Grid size={{ xs: 8, sm: 4 }}>
 			{item.Product.Dimensions.map((dim, i) => (
-				<Paragraph key={i} paddingLeft={"15px"}>
+				<Paragraph key={`product-dim-${i + 1}`} paddingLeft={"15px"}>
 					<Span>{ProductDimensionType[dim.DimensionTypeValue || 0]}:</Span>
 					<Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
 				</Paragraph>

package/src/pages-v2/account/profile/profile-button.test.tsx

@@ -1,7 +1,7 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { vi } from "vitest";
 import ProfileButton from "@evenicanpm/storefront-core/src/pages-v2/account/profile/profile-button";
-import { getMsalInstance, initializeMsal, getRequestConfig } from "@/auth/msal";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { vi } from "vitest";
+import { getMsalInstance, getRequestConfig, initializeMsal } from "@/auth/msal";
 
 vi.mock("@/auth/msal", () => ({
 	initializeMsal: vi.fn(),

package/src/pages-v2/account/profile/profile-button.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { getMsalInstance, initializeMsal, getRequestConfig } from "@/auth/msal";
-import { useEffect, useState } from "react";
-import { Button } from "@mui/material";
+import type { RedirectRequest } from "@azure/msal-browser";
 import T from "@evenicanpm/storefront-core/src/components-v2/T/index";
-import { RedirectRequest } from "@azure/msal-browser";
+import { Button } from "@mui/material";
+import { useEffect, useState } from "react";
+import { getMsalInstance, getRequestConfig, initializeMsal } from "@/auth/msal";
+
 interface Props {
 	type: string;
 	path: string;