@evenicanpm/storefront-core 2.3.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/storefront-core",
-	"version": "2.3.0",
+	"version": "2.3.1",
 	"description": "Core module for D365/e4 Headless Storefront",
 	"type": "module",
 	"scripts": {
@@ -16,7 +16,7 @@
 	"author": "Evenica",
 	"license": "ISC",
 	"dependencies": {
-		"@evenicanpm/cms": "^2.3.0",
+		"@evenicanpm/cms": "^2.3.1",
 		"@evenicanpm/ui": "^2.0.0",
 		"strapi-sdk-js": "^3.0.0"
 	},
@@ -54,5 +54,5 @@
 			"esbuild": "0.19.11"
 		}
 	},
-	"gitHead": "72bf1aeb02a3d96c587706c0d91606698e38ff6a"
+	"gitHead": "7a5a6a8c3c3dd9efe96fbbb884b21e7681d32550"
 }

package/src/api-manager/datasources/d365/d365-user.datasource.ts

@@ -320,22 +320,37 @@ class D365UserDatasource extends D365DatasourceBase implements UserApi {
 	}
 
 	async addProductsToWishlist(input: WishlistLinesInput): Promise<Wishlist> {
-		const context = this.context;
-		const id = input.Id;
-		const productListLines = input.ProductListLines;
+		return tracer.startActiveSpan(
+			"d365.addProductsToWishlist",
+			async (span) => {
+				const context = this.context;
+				const id = input.Id;
+				const catalogId = this.context.requestContext.apiSettings.catalogId;
 
-		try {
-			const updatedProductListLines = await addProductListLinesAsync(
-				this.getRetailContext(context),
-				id,
-				productListLines,
-			);
+				const productListLines = input.ProductListLines.map((line) => ({
+					...line,
+					CatalogId: catalogId,
+				}));
+				console.log(productListLines);
+				try {
+					const updatedProductListLines = await addProductListLinesAsync(
+						this.getRetailContext(context),
+						id,
+						productListLines,
+					);
 
-			const wishlist = { Id: id, productListLines: updatedProductListLines };
-			return wishlist;
-		} catch (error) {
-			throw new Error(`Error adding to wishlist: ${error}`);
-		}
+					const wishlist = {
+						Id: id,
+						productListLines: updatedProductListLines,
+					};
+					return wishlist;
+				} catch (error) {
+					throw new Error(`Error adding to wishlist: ${error}`);
+				} finally {
+					span.end();
+				}
+			},
+		);
 	}
 
 	async removeProductsFromWishlist(input: WishlistLinesInput): Promise<void> {

package/src/api-manager/datasources/e4/graphqlRequestSdk.ts

@@ -3428,6 +3428,7 @@ export type Mutation = {
   reindex: IndexAttemptResponse;
   relatedAccountCreate?: Maybe<RelatedAccountCreateMutationResponse>;
   relatedAccountDelete?: Maybe<RelatedAccountDeleteMutationResponse>;
+  removeIndexHistory?: Maybe<Scalars['ID']['output']>;
   /** Removes role and returns removed role */
   removeRole?: Maybe<Role>;
   /**
@@ -4290,6 +4291,12 @@ export type MutationRelatedAccountDeleteArgs = {
 };
 
 
+export type MutationRemoveIndexHistoryArgs = {
+  id: Scalars['ID']['input'];
+  index?: InputMaybe<Scalars['String']['input']>;
+};
+
+
 export type MutationRemoveRoleArgs = {
   input: RemoveRoleInput;
 };

package/src/cms/blocks/components/footer/footer-content.tsx

@@ -0,0 +1,61 @@
+import type { FooterBlock } from "@evenicanpm/cms/src/content/footer/types";
+import { Box, Container } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import Contact from "@/cms/blocks/components/footer/sections/footer-contact";
+import Links from "@/cms/blocks/components/footer/sections/footer-links";
+import Logo from "@/cms/blocks/components/footer/sections/footer-logo";
+
+const getBlockComponent = (block: FooterBlock, index: number) => {
+	switch (block.__component) {
+		case "footer.links":
+			return (
+				<Links key={`index-${index}`} title={block.title} links={block.links} />
+			);
+		case "footer.logo":
+			return (
+				<Logo
+					key={`index-${index}`}
+					logoImage={block.logoImage}
+					description={block.description}
+				/>
+			);
+		case "footer.contact":
+			return (
+				<Contact
+					key={`index-${index}`}
+					address={block.address}
+					email={block.email}
+					phoneNumber={block.phoneNumber}
+					social={block.social}
+				/>
+			);
+		default:
+			return null;
+	}
+};
+
+const FooterContent = ({ sections }: { sections: FooterBlock[] }) => {
+	if (!sections?.length) return null;
+
+	return (
+		<Box
+			component="footer"
+			bgcolor="#222935"
+			mt={{ xs: 7 }}
+			mb={{ sm: 0, xs: 7 }}
+		>
+			<Box
+				component={Container}
+				color="white"
+				overflow="hidden"
+				py={{ sm: 10, xs: 4 }}
+			>
+				<Grid container spacing={6}>
+					{sections.map((block, index) => getBlockComponent(block, index))}
+				</Grid>
+			</Box>
+		</Box>
+	);
+};
+
+export default FooterContent;

package/src/cms/blocks/components/footer/index.tsx

@@ -1,86 +1,24 @@
 // MUI
-import { Box, Container } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import type {
-	FooterBlock,
-	FooterResponse,
-} from "@/cms/blocks/components/footer/interfaces";
-import Contact from "@/cms/blocks/components/footer/sections/footer-contact";
-import Links from "@/cms/blocks/components/footer/sections/footer-links";
-// Local Custom Components
-import Logo from "@/cms/blocks/components/footer/sections/footer-logo";
-import cms from "@/cms/endpoints";
+import { cms } from "@evenicanpm/cms";
+import type { FooterBlock } from "@evenicanpm/cms/src/content/footer/types";
+import FooterContent from "@/cms/blocks/components/footer/footer-content";
 
-const getBlockComponent = (block: FooterBlock, index: number) => {
-	let Block: typeof Links | typeof Logo | typeof Contact;
-
-	switch (block.__component) {
-		case "footer.links":
-			Block = Links;
-			return (
-				<Block key={`index-${index}`} title={block.title} links={block.links} />
-			);
-		case "footer.logo":
-			Block = Logo;
-			return <Block key={`index-${index}`} description={block.description} />;
-		case "footer.contact":
-			Block = Contact;
-			return <Block key={`index-${index}`} social={block.social} />;
-		default:
-			return null;
-	}
-};
-
-const fetchFooterData = async (): Promise<FooterResponse | null> => {
+const Footer = async () => {
+	let sections: FooterBlock[] | undefined;
 	try {
-		const response = await fetch(cms.getCmsApiUrl("footer"), {
-			cache: "no-store", // Ensure server-side fetching
-		});
-
-		if (!response.ok) {
-			return null;
-		}
-
-		const text = await response.text();
-
-		if (!text) {
-			return null;
-		}
-
-		return JSON.parse(text) as FooterResponse;
+		const response = await cms.footer.getFooter();
+		sections = (response as { data?: { sections?: FooterBlock[] } })?.data
+			?.sections;
 	} catch (error) {
 		console.error("Error fetching footer data:", error);
 		return null;
 	}
-};
-
-const Footer = async () => {
-	const data = await fetchFooterData();
-	const sections = data?.data?.sections;
 
 	if (!sections?.length) {
 		return null;
 	}
 
-	return (
-		<Box
-			component="footer"
-			bgcolor="#222935"
-			mt={{ xs: 7 }}
-			mb={{ sm: 0, xs: 7 }}
-		>
-			<Box
-				component={Container}
-				color="white"
-				overflow="hidden"
-				py={{ sm: 10, xs: 4 }}
-			>
-				<Grid container spacing={6}>
-					{sections.map((block, index) => getBlockComponent(block, index))}
-				</Grid>
-			</Box>
-		</Box>
-	);
+	return <FooterContent sections={sections} />;
 };
 
 export default Footer;

package/src/cms/blocks/components/footer/interfaces.ts

@@ -9,6 +9,7 @@ export interface SocialLink {
 interface FooterLogoBlock {
 	id: number;
 	__component: "footer.logo";
+	logoImage?: { url: string; alternativeText?: string };
 	description: string;
 }
 
@@ -22,6 +23,9 @@ interface FooterLinksBlock {
 interface FooterContactBlock {
 	id: number;
 	__component: "footer.contact";
+	address?: string;
+	email?: string;
+	phoneNumber?: string;
 	social: SocialLink[];
 }
 

package/src/cms/blocks/components/footer/sections/footer-contact.tsx

@@ -7,6 +7,9 @@ import { Heading } from "@/cms/blocks/components/footer/styles/index";
 interface Props {
 	isDark?: boolean;
 	title?: string;
+	address?: string;
+	email?: string;
+	phoneNumber?: string;
 	social?: SocialLink[];
 }
 
@@ -15,17 +18,23 @@ const AboutLinks = (props: Props) => {
 		<Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
 			<Heading>Contact Us</Heading>
 
-			<Paragraph py={0.6} color="grey.500">
-				70 Washington Square South, New York, NY 10012, United States
-			</Paragraph>
+			{props.address && (
+				<Paragraph py={0.6} color="grey.500">
+					{props.address}
+				</Paragraph>
+			)}
 
-			<Paragraph py={0.6} color="grey.500">
-				Email: evenica@example.org
-			</Paragraph>
+			{props.email && (
+				<Paragraph py={0.6} color="grey.500">
+					Email: {props.email}
+				</Paragraph>
+			)}
 
-			<Paragraph py={0.6} mb={2} color="grey.500">
-				Phone: +1 1123 456 780
-			</Paragraph>
+			{props.phoneNumber && (
+				<Paragraph py={0.6} mb={2} color="grey.500">
+					Phone: {props.phoneNumber}
+				</Paragraph>
+			)}
 
 			<SocialLinks socials={props.social} />
 		</Grid>

package/src/cms/blocks/components/footer/sections/footer-logo.tsx

@@ -2,20 +2,35 @@
 
 import SiteLogo from "@evenicanpm/storefront-core/src/components/site-logo";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
+import { Box } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import cmsEndPoints from "@/cms/endpoints";
 
 interface Props {
+	logoImage?: { url: string; alternativeText?: string };
 	description: string;
 }
 
 export default function LogoSection(props: Readonly<Props>) {
 	const theme = useTheme();
-	const downMd = useMediaQuery(theme.breakpoints.down(1150)); // same like in header
+	const downMd = useMediaQuery(theme.breakpoints.down(1150));
+	const logoHeight = downMd ? "2.125rem" : "3rem";
+
 	return (
 		<Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
-			<SiteLogo {...(downMd ? { height: "2.125rem" } : {})} />
+			{props.logoImage?.url ? (
+				<Box mb={1}>
+					<img
+						src={cmsEndPoints.buildCmsMediaUrl(props.logoImage.url)}
+						alt={props.logoImage.alternativeText || "Logo"}
+						style={{ height: logoHeight, width: "auto" }}
+					/>
+				</Box>
+			) : (
+				<SiteLogo {...(downMd ? { height: "2.125rem" } : {})} />
+			)}
 
 			<Paragraph mb={2.5} color="grey.500">
 				{props.description}

package/src/components/_tests_/site-logo.test.tsx

@@ -15,7 +15,7 @@ vi.mock("next/link", () => ({
 describe("SiteLogo", () => {
 	it("renders logo image", () => {
 		render(<SiteLogo />);
-		const logo = screen.getByAltText("E4 Logo");
+		const logo = screen.getByAltText("e4 Logo");
 		expect(logo).toBeInTheDocument();
 		// next/image rewrites src to an optimized URL (e.g. /_next/image?url=...)
 		expect(logo.getAttribute("src")).toMatch(/logo-blue\.png/);

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

@@ -16,7 +16,7 @@ import T from "@evenicanpm/storefront-core/src/components/T";
 import {
 	type AccountRoute,
 	type AccountRouteOverrides,
-	createAccountRoutes,
+	useCreateAccountRoutes,
 } from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 // UI Components
 import {
@@ -61,7 +61,7 @@ const routeToMenuItem = (route: AccountRoute) => ({
 });
 
 const buildMenuItems = (overrides?: AccountRouteOverrides) => {
-	const routes = createAccountRoutes(overrides);
+	const routes = useCreateAccountRoutes(overrides);
 	return [
 		routeToMenuItem(routes.profile),
 		routeToMenuItem(routes.orders),
@@ -89,10 +89,9 @@ const UserContext = createContext<UserContextValue | undefined>(undefined);
 
 interface Props {
 	children?: ReactNode;
-	routeOverrides?: AccountRouteOverrides;
 }
 
-const User = ({ children, routeOverrides }: Props) => {
+const User = ({ children }: Props) => {
 	const { data: session, isPending } = useBetterAuthSession();
 	const status = isPending
 		? "loading"
@@ -166,7 +165,7 @@ const User = ({ children, routeOverrides }: Props) => {
 	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 	const open = Boolean(anchorEl);
 
-	const menuItems = buildMenuItems(routeOverrides);
+	const menuItems = buildMenuItems();
 
 	const value: UserContextValue = {
 		isAuthenticated,

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

@@ -8,6 +8,7 @@ import { Sticky } from "@evenicanpm/ui";
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useCallback, useState } from "react";
+import { AccountRouteOverrides } from "../../pages/account/account-routes";
 
 /**
  * @category Implementation

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

@@ -1,7 +1,4 @@
-import {
-	FlexBetween,
-	FlexBox,
-} from "@evenicanpm/storefront-core/src/components/flex-box/index";
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components/flex-box/index";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components/ImageWithFallback";
 // LOCAL CUSTOM COMPONENTS
 import DiscountChip from "@evenicanpm/storefront-core/src/components/product-cards/discount-chip";
@@ -9,6 +6,7 @@ import FavoriteButton from "@evenicanpm/storefront-core/src/components/product-c
 // STYLED COMPONENTS
 import {
 	HoverIconWrapper,
+	PlpImageWrapper,
 	PriceText,
 } from "@evenicanpm/storefront-core/src/components/product-cards/product-card-plp/styles/index";
 import QuantityButtons from "@evenicanpm/storefront-core/src/components/product-cards/quantity-buttons";
@@ -86,15 +84,9 @@ ProductCardPlp.ImageWrapper = ({ children }: { children: React.ReactNode }) => {
 
 	return (
 		<Link href={buildDetailUrl(title, id)}>
-			<FlexBox
-				className="hover-box-container"
-				position="relative"
-				bgcolor="grey.50"
-				borderRadius={3}
-				mb={2}
-			>
+			<PlpImageWrapper className="hover-box-container">
 				{children}
-			</FlexBox>
+			</PlpImageWrapper>
 		</Link>
 	);
 };

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { FlexBox } from "@evenicanpm/storefront-core/src/components/flex-box/index";
 import styled from "@mui/material/styles/styled";
 
 export const PriceText = styled("p")(({ theme }) => ({
@@ -17,6 +18,20 @@ export const PriceText = styled("p")(({ theme }) => ({
 	},
 }));
 
+export const PlpImageWrapper = styled(FlexBox)(({ theme }) => ({
+	position: "relative",
+	backgroundColor: theme.palette.grey[50],
+	borderRadius: theme.shape.borderRadius * 3,
+	marginBottom: theme.spacing(2),
+
+	"& img": {
+		maxHeight: 300,
+		objectFit: "contain",
+		width: "100%",
+		borderRadius: 12,
+	},
+}));
+
 export const HoverIconWrapper = styled("div")({
 	zIndex: 2,
 	top: "7px",

package/src/components/site-logo.tsx

@@ -12,7 +12,7 @@ const SiteLogo: React.FC<SiteLogoProps> = () => {
 		<Link href="/">
 			<Image
 				src="/logo-blue.png"
-				alt="E4 Logo"
+				alt="e4 Logo"
 				width={180}
 				height={54}
 				style={{ width: "auto", height: 54 }}

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

@@ -9,6 +9,7 @@ import {
 } from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/add-to-wishlist/compound/context";
 import UseWishlist from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/add-to-wishlist/hooks/use-add-to-wishlist";
 import { StyledTableRow } from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/styles";
+import { useCreateAccountRoutes } from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 import { Add, Delete } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import { format } from "date-fns";
@@ -25,6 +26,7 @@ export default function WishlistDialogItem() {
 
 	const itemCtx = useContext(WishListItemContext);
 	const dialogCtx = useContext(AddToWishListDialogContext);
+	const { wishlists: wishlistsRoute } = useCreateAccountRoutes();
 
 	if (!itemCtx || !dialogCtx)
 		throw new Error("WishlistModalItem must be used within a wishlist context");
@@ -59,7 +61,7 @@ export default function WishlistDialogItem() {
 			}}
 		>
 			<Paragraph ellipsis sx={{ fontWeight: "bold" }}>
-				<Link href={`/account/wish-lists/${wishlist?.Id}`}>
+				<Link href={`${wishlistsRoute.href}/${wishlist?.Id}`}>
 					{wishlist?.Name ?? ""}
 				</Link>
 			</Paragraph>

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

@@ -12,7 +12,7 @@ import {
 import {
 	type AccountRoute,
 	type AccountRouteOverrides,
-	createAccountRoutes,
+	useCreateAccountRoutes,
 } from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 // STYLED COMPONENTS
 import {
@@ -85,7 +85,7 @@ const routeToNavItem = (route: AccountRoute): NavItem => {
 export const DEFAULT_MENU_ITEMS = (
 	overrides?: AccountRouteOverrides,
 ): NavSection[] => {
-	const routes = createAccountRoutes(overrides);
+	const routes = useCreateAccountRoutes(overrides);
 	return [
 		{
 			title: "DASHBOARD",

package/src/pages/account/account-routes.ts

@@ -1,3 +1,4 @@
+import { createContext, useContext } from "react";
 import type { IconType } from "react-icons";
 import {
 	MdFavoriteBorder as FavoriteBorder,
@@ -44,9 +45,42 @@ const defaults = {
 	},
 } as const satisfies Record<string, AccountRoute>;
 
+/**
+ * Context for overriding account route configuration.
+ * Allows parent providers to customize route paths and title keys
+ * without modifying the default route definitions.
+ *
+ * @example
+ * ```tsx
+ * <RoutesOverrideContext.Provider value={{ wishlists: { href: "/account/order-templates", titleKey: "orderTemplates" } }}>
+ *   {children}
+ * </RoutesOverrideContext.Provider>
+ * ```
+ */
+export const RoutesOverrideContext = createContext<
+	AccountRouteOverrides | undefined
+>(undefined);
+
 export type AccountRouteKey = keyof typeof defaults;
 
-export const createAccountRoutes = (overrides?: AccountRouteOverrides) => ({
-	...defaults,
-	wishlists: { ...defaults.wishlists, ...overrides?.wishlists },
-});
+/**
+ * Hook that builds the account routes map, merging defaults with context-level
+ * and call-site overrides. Override priority (highest wins):
+ * 1. `overrides` parameter passed directly to the hook
+ * 2. Values from {@link RoutesOverrideContext}
+ * 3. Built-in defaults
+ *
+ * @param overrides - Optional route overrides applied at the call site
+ * @returns The full set of account routes with any overrides merged in
+ */
+export const useCreateAccountRoutes = (overrides?: AccountRouteOverrides) => {
+	const ctxOverrides = useContext(RoutesOverrideContext);
+	return {
+		...defaults,
+		wishlists: {
+			...defaults.wishlists,
+			...ctxOverrides?.wishlists,
+			...overrides?.wishlists,
+		},
+	};
+};

package/src/pages/account/table-row-skeleton.tsx

@@ -0,0 +1,31 @@
+import TableRow from "@evenicanpm/storefront-core/src/pages/account/table-row";
+import Box from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+import type { SxProps, Theme } from "@mui/material/styles";
+
+interface TableRowSkeletonProps {
+	sx?: SxProps<Theme>;
+}
+
+export default function TableRowSkeleton({
+	sx = { gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" },
+}: TableRowSkeletonProps) {
+	return (
+		<TableRow sx={sx}>
+			<Skeleton variant="text" width="60%" />
+			<Box textAlign="center">
+				<Skeleton
+					variant="rounded"
+					width={70}
+					height={24}
+					sx={{ mx: "auto" }}
+				/>
+			</Box>
+			<Skeleton variant="text" width="70%" sx={{ mx: { sm: "auto" } }} />
+			<Skeleton variant="text" width="50%" sx={{ mx: { sm: "auto" } }} />
+			<Box display={{ sm: "inline-flex", xs: "none" }} justifyContent="end">
+				<Skeleton variant="circular" width={32} height={32} />
+			</Box>
+		</TableRow>
+	);
+}

package/src/pages/account/wishlist/wishlist-item.tsx

@@ -16,6 +16,7 @@ import { format } from "date-fns";
 import { useTranslations } from "next-intl";
 import { createContext, type ReactNode, useContext } from "react";
 import { MdDelete as Delete } from "react-icons/md";
+import { useCreateAccountRoutes } from "../account-routes";
 
 interface WishlistItemContextValue {
 	wishlist: Wishlist;
@@ -76,10 +77,12 @@ WishlistItem.Name = () => {
 	const ctx = useContext(WishlistItemContext);
 	if (!ctx) return null;
 	const { wishlist } = ctx;
+	const { wishlists: wishlistsRoute } = useCreateAccountRoutes();
+
 	return (
 		<Paragraph ellipsis>
 			<NavLink3
-				href={`/account/order-templates/${wishlist?.Id}`}
+				href={`${wishlistsRoute.href}/${wishlist?.Id}`}
 				text={wishlist?.Name ?? ""}
 			/>
 		</Paragraph>

package/src/pages/blog/blog-detail-view.tsx

@@ -7,7 +7,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import Link from "next/link";
 import { cmsQueryOptions } from "../../cms/queries";
 import { BorderShadowCard } from "../../components/BoxShadowCard";
-import { Display, Subtitle } from "../../components/Typography";
+import { Display, Paragraph, Subtitle } from "../../components/Typography";
 
 interface Props {
 	id: string;
@@ -29,6 +29,7 @@ export const BlogDetailView = ({ id, locale, cmsLocale }: Props) => {
 	const title = blogData?.title;
 	const shortDescription = blogData?.shortDescription;
 	const content = blogData?.content;
+	const author = blogData?.author;
 
 	return (
 		<Container className="mt-2 mb-2" maxWidth="xl">
@@ -128,6 +129,7 @@ export const BlogDetailView = ({ id, locale, cmsLocale }: Props) => {
 						</Grid>
 						<Grid size={{ xs: 12, md: 3 }} order={{ xs: 1, md: 2 }}>
 							<Box sx={{ paddingBottom: "15px" }}>
+								{author && <Paragraph sx={noSpaceSx}>{author}</Paragraph>}
 								<Subtitle sx={noSpaceSx}>Published on: {publishDate}</Subtitle>
 							</Box>
 						</Grid>

package/src/pages/cms-page-view.tsx

@@ -40,7 +40,7 @@ export const CmsPageView = ({ slug, cmsLocale, isDraftMode }: Props) => {
 			) : (
 				<Container>
 					<Paper sx={{ marginTop: "25px", padding: "50px" }} elevation={1}>
-						<H1>E4 Storefront</H1>
+						<H1>e4 Storefront</H1>
 						<H4>
 							Add a page to the &quot;Page&quot; content-type in CMS to add
 							content to this page.

package/src/pages/product-details/product-description.tsx

@@ -3,22 +3,34 @@
 import { H3 } from "@evenicanpm/storefront-core/src/components/Typography";
 import type { AttributeValue } from "@msdyn365-commerce/retail-proxy";
 
-type Props = { attributes: AttributeValue[] };
+type Props = { attributes: AttributeValue[]; description?: string };
 
-export default function ProductDescription({ attributes }: Readonly<Props>) {
+export default function ProductDescription({
+	attributes,
+	description,
+}: Readonly<Props>) {
 	return (
 		<div>
-			<H3 mb={2}>Specifications:</H3>
-			{attributes?.map((attr, index) => {
-				if (attr?.TextValue && attr?.Name) {
-					return (
-						<div key={`attr-${index + 1}`}>
-							{attr.Name}: {attr.TextValue}
-						</div>
-					);
-				}
-				return null;
-			})}
+			{description && (
+				<div style={{ marginBottom: 16 }}>
+					<p>{description}</p>
+				</div>
+			)}
+			{attributes?.length > 0 && (
+				<>
+					<H3 mb={2}>Specifications:</H3>
+					{attributes.map((attr, index) => {
+						if (attr?.TextValue && attr?.Name) {
+							return (
+								<div key={`attr-${index + 1}`}>
+									{attr.Name}: {attr.TextValue}
+								</div>
+							);
+						}
+						return null;
+					})}
+				</>
+			)}
 		</div>
 	);
 }

package/src/pages/product-details/product-intro/compound/product-intro-images.tsx

@@ -11,6 +11,7 @@ import {
 } from "@evenicanpm/storefront-core/src/pages/product-details/product-intro/compound/context";
 import ThumbnailWithSkeleton from "@evenicanpm/storefront-core/src/pages/product-details/product-intro/compound/thumbnail-with-skeleton";
 import Grid from "@mui/material/Grid2";
+import Skeleton from "@mui/material/Skeleton";
 import type React from "react";
 import { useContext, useState } from "react";
 
@@ -124,21 +125,38 @@ ProductImages.Main = () => {
 			"ProductImages.Main must be used inside a product images context",
 		);
 	const { name, images, primaryImageUrl, selectedImageIndex } = ctx;
+	const [loaded, setLoaded] = useState(false);
+
+	const src =
+		Array.isArray(images) &&
+		selectedImageIndex !== undefined &&
+		images[selectedImageIndex]
+			? images[selectedImageIndex]
+			: primaryImageUrl;
 
 	return (
-		<FlexBox borderRadius={3} overflow="hidden" justifyContent="center" mb={6}>
+		<FlexBox
+			borderRadius={3}
+			overflow="hidden"
+			justifyContent="center"
+			mb={6}
+			position="relative"
+		>
+			{!loaded && (
+				<Skeleton
+					variant="rounded"
+					width={300}
+					height={300}
+					sx={{ position: "absolute", inset: 0, m: "auto" }}
+				/>
+			)}
 			<ImageWithFallback
 				alt={name ?? "product"}
 				width={300}
 				height={300}
 				loading="eager"
-				src={
-					Array.isArray(images) &&
-					selectedImageIndex !== undefined &&
-					images[selectedImageIndex]
-						? images[selectedImageIndex]
-						: primaryImageUrl
-				}
+				src={src}
+				onLoad={() => setLoaded(true)}
 				style={{ objectFit: "contain" }}
 			/>
 		</FlexBox>

package/src/pages/product-details/product-intro/compound/thumbnail-with-skeleton.tsx

@@ -1,31 +1,27 @@
-import { Skeleton } from "@mui/material";
 import Image from "next/image";
-import { useState } from "react";
+
+const shimmer = `<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50" fill="#f0f0f0"/></svg>`;
+const blurDataURL = `data:image/svg+xml;base64,${typeof window === "undefined" ? Buffer.from(shimmer).toString("base64") : btoa(shimmer)}`;
 
 /**
- * Shows a skeleton until the image loads
+ * Product thumbnail image
  * @category Sub-Component
  */
 function ThumbnailWithSkeleton({ src }: Readonly<{ src: string }>) {
-	const [loaded, setLoaded] = useState(false);
-
 	return (
-		<>
-			{!loaded && <Skeleton variant="rounded" width={50} height={50} />}
-			<Image
-				src={src}
-				alt="Product thumbnail"
-				width={50}
-				height={50}
-				onLoad={() => setLoaded(true)}
-				style={{
-					display: loaded ? "block" : "none",
-					width: "80%",
-					height: "80%",
-					objectFit: "cover",
-				}}
-			/>
-		</>
+		<Image
+			src={src}
+			alt="Product thumbnail"
+			width={50}
+			height={50}
+			placeholder="blur"
+			blurDataURL={blurDataURL}
+			style={{
+				width: "80%",
+				height: "80%",
+				objectFit: "cover",
+			}}
+		/>
 	);
 }
 

package/src/pages/product-details/product-tabs.tsx

@@ -23,11 +23,16 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
 	},
 }));
 
-type Props = { productAttributes: AttributeValue[]; children: React.ReactNode };
+type Props = {
+	productAttributes: AttributeValue[];
+	productDescription?: string;
+	children: React.ReactNode;
+};
 
 export interface TabsContext {
 	selectedOption: number;
 	productAttributes: AttributeValue[];
+	productDescription?: string;
 	handleOptionClick: (_: React.SyntheticEvent, value: number) => void;
 }
 
@@ -54,6 +59,7 @@ const TabsContext = createContext<TabsContext | null>(null);
  */
 export default function ProductTabs({
 	productAttributes,
+	productDescription,
 	children,
 }: Readonly<Props>) {
 	const [selectedOption, setSelectedOption] = useState(0);
@@ -62,7 +68,12 @@ export default function ProductTabs({
 
 	return (
 		<TabsContext.Provider
-			value={{ selectedOption, handleOptionClick, productAttributes }}
+			value={{
+				selectedOption,
+				handleOptionClick,
+				productAttributes,
+				productDescription,
+			}}
 		>
 			<Box mb={6}>{children}</Box>
 		</TabsContext.Provider>
@@ -130,6 +141,11 @@ ProductTabs.Description = () => {
 		throw new Error(
 			"ProductTabs.Tabs must be used inside a ProductTabsContext",
 		);
-	const { productAttributes } = ctx;
-	return <ProductDescription attributes={productAttributes} />;
+	const { productAttributes, productDescription } = ctx;
+	return (
+		<ProductDescription
+			attributes={productAttributes}
+			description={productDescription}
+		/>
+	);
 };