@evenicanpm/storefront-core 2.3.0 → 2.4.0

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/cms/endpoints.ts

@@ -1,5 +1,3 @@
-import type { Formats } from "@/cms/interfaces/product-data";
-
 const apiKeys = {
 	pages: "/cms/pages",
 	blogs: "/cms/blogs",
@@ -42,6 +40,13 @@ export const extendCmsEndpoints = (
 
 export type sizes = "small" | "medium" | "large" | "thumbnail";
 
+interface Formats {
+	small?: { url: string };
+	medium?: { url: string };
+	large?: { url: string };
+	thumbnail?: { url: string };
+}
+
 /**
  * @param formats formats array from CMS data
  * @param size size of the image

package/src/components/BazaarMenu.tsx

@@ -34,7 +34,7 @@ export default function BazaarMenu({
 			{handler ? handler(handleClick) : null}
 
 			<Menu
-				elevation={0}
+				slotProps={{ paper: { elevation: 0 } }}
 				anchorEl={anchorEl}
 				onClose={handleClose}
 				open={open ?? Boolean(anchorEl)}

package/src/components/Typography.tsx

@@ -6,9 +6,11 @@ import clsx from "clsx";
 
 // ==============================================================
 type Ellipsis = { ellipsis: number };
-export interface EllipsisProps extends BoxProps {
+export type EllipsisProps = BoxProps & {
 	ellipsis?: boolean;
-}
+	children?: React.ReactNode;
+	className?: string;
+};
 // ==============================================================
 
 const StyledBox = styled(Box, {

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/carousel-cards/carousel-card-1/CarouselCard1.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import CarouselCard1 from "./index";
 
 const meta: Meta<typeof CarouselCard1> = {

package/src/components/categories/category-menu.tsx

@@ -24,7 +24,7 @@ const Wrapper = styled("div", {
 type Props = {
 	render: (
 		handler: (e: React.MouseEvent<HTMLButtonElement>) => void,
-	) => JSX.Element;
+	) => React.ReactElement;
 };
 
 // CategoryMenu is acting purely as a configuration/wiring component,

package/src/components/countries-input.tsx

@@ -57,6 +57,10 @@ export default function CountryInput({
 			fullWidth
 			value={selectedCountry}
 			options={countries}
+			getOptionKey={(option) => option.CountryRegionId}
+			isOptionEqualToValue={(option, value) =>
+				option.CountryRegionId === value?.CountryRegionId
+			}
 			onChange={(_event, newValue) => {
 				setSelectedCountry(newValue);
 			}}

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/navbar/mobile-menu/mobile-menu.test.tsx

@@ -1,9 +1,9 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import MobileMenu from "@evenicanpm/storefront-core/src/components/navbar/mobile-menu/mobile-menu";
 import { transformCmsNav } from "@evenicanpm/storefront-core/src/components/navbar/utils/transform-nav";
 import { fireEvent, render, screen } from "@testing-library/react";
 import type React from "react";
 import { beforeEach, describe, it, vi } from "vitest";
-import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 const useContext = vi.fn();
 

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

@@ -1,10 +1,10 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import {
 	transformCategoryNav,
 	transformCmsNav,
 } from "@evenicanpm/storefront-core/src/components/navbar/utils/transform-nav";
 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/navbar/utils/transform-nav.ts

@@ -1,6 +1,6 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 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/product-cards/product-card/product-card.tsx

@@ -60,8 +60,11 @@ function findChild(
 		if (!React.isValidElement(child)) return;
 		if (child.type === component) {
 			found = true;
-		} else if (child.props?.children) {
-			found ||= findChild(child.props.children, component);
+		} else if ((child.props as { children?: ReactNode })?.children) {
+			found ||= findChild(
+				(child.props as { children?: ReactNode }).children,
+				component,
+			);
 		}
 	});
 

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

@@ -1,7 +1,6 @@
 // GLOBAL CUSTOM COMPONENT
 import BazaarCard from "@evenicanpm/storefront-core/src/components/BazaarCard";
 import styled from "@mui/material/styles/styled";
-import type { StyledComponent } from "@mui/styled-engine";
 
 export const StyledBazaarCard = styled(BazaarCard)({
 	height: "100%",
@@ -46,7 +45,4 @@ export const ContentWrapper = styled("div")({
 	},
 });
 
-const StyledBazaarCardType: StyledComponent<typeof BazaarCard, object, "div"> =
-	StyledBazaarCard as StyledComponent<typeof BazaarCard, object, "div">;
-
-export default StyledBazaarCardType;
+export default StyledBazaarCard;

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/products-view/compound/products-grid-view.tsx

@@ -52,7 +52,11 @@ export default function ProductsGridView(props: Readonly<ProductsViewProps>) {
  * @category Sub-Component
  *
  */
-ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
+ProductsGridView.Grid = ({
+	children,
+}: {
+	children: React.ReactElement<Record<string, unknown>>;
+}) => {
 	const { products, productPrices } = useProductsView();
 
 	return (

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

@@ -38,7 +38,11 @@ export default function ProductsListView(props: Readonly<ProductsViewProps>) {
  * @category Sub-Component
  *
  */
-ProductsListView.List = ({ children }: { children: React.ReactElement }) => {
+ProductsListView.List = ({
+	children,
+}: {
+	children: React.ReactElement<Record<string, unknown>>;
+}) => {
 	const { products, productPrices } = useProductsView();
 	return (
 		<>

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/global.d.ts

@@ -0,0 +1,3 @@
+declare module "*.css";
+declare module "*.scss";
+declare module "*.sass";

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/addresses/address-form.tsx

@@ -11,6 +11,7 @@ import type { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
 import {
 	Box,
 	Button,
+	CircularProgress,
 	FormControl,
 	InputLabel,
 	MenuItem,
@@ -25,7 +26,7 @@ import { withZodSchema } from "formik-validator-zod";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useRef } from "react";
 import { z } from "zod";
 
 interface AddressFormValues {
@@ -71,6 +72,7 @@ const AddressForm = ({ address, children }: RootProps) => {
 
 	const { mutateAsync: createAddress } = useCreateAddress();
 	const { mutateAsync: updateAddress } = useUpdateAddress();
+	const isSubmittingRef = useRef(false);
 
 	const FormSchema = z.object({
 		Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
@@ -99,6 +101,9 @@ const AddressForm = ({ address, children }: RootProps) => {
 	};
 
 	const handleSubmit = async (values: AddressFormValues) => {
+		if (isSubmittingRef.current) return;
+		isSubmittingRef.current = true;
+
 		let newAddress: Address = {
 			Name: values.Name,
 			Street: values.Street,
@@ -128,6 +133,7 @@ const AddressForm = ({ address, children }: RootProps) => {
 				severity: "error",
 			});
 			console.log(error);
+			isSubmittingRef.current = false;
 		}
 	};
 
@@ -291,8 +297,20 @@ AddressForm.Actions = ({ children }: { children?: React.ReactNode }) => {
 
 AddressForm.SubmitButton = () => {
 	const t = useTranslations("Address");
+	const ctx = useContext(FormContext);
+	const isSubmitting = ctx?.formik.isSubmitting ?? false;
 	return (
-		<Button type="submit" variant="contained" color="primary">
+		<Button
+			type="submit"
+			variant="contained"
+			color="primary"
+			disabled={isSubmitting}
+			startIcon={
+				isSubmitting ? (
+					<CircularProgress size={20} color="inherit" />
+				) : undefined
+			}
+		>
 			{t("save")}
 		</Button>
 	);

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;
@@ -73,13 +74,14 @@ const WishlistItem = ({ wishlist, children, sx }: RootProps) => {
 };
 
 WishlistItem.Name = () => {
+	const { wishlists: wishlistsRoute } = useCreateAccountRoutes();
 	const ctx = useContext(WishlistItemContext);
 	if (!ctx) return null;
 	const { wishlist } = ctx;
 	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/cart/cart-item.tsx

@@ -416,13 +416,6 @@ CartItemRoot.Comment = () => {
 				</FlexBox>
 			</>
 		);
-	} else if (isLoading) {
-		content = (
-			<CircularProgress
-				size={30}
-				sx={{ marginTop: "auto", marginLeft: "auto" }}
-			/>
-		);
 	} else {
 		content = (
 			<>
@@ -448,6 +441,7 @@ CartItemRoot.Comment = () => {
 				<Button
 					color="primary"
 					variant="outlined"
+					disabled={isLoading}
 					sx={{ width: 150, mt: "auto", ml: "auto" }}
 					onClick={() => setIsWritingComment(true)}
 				>