@evenicanpm/storefront-core 2.2.0 → 2.3.1

package/src/pages/account/orders/order-history-sort.tsx

@@ -0,0 +1,90 @@
+import type { SortColumn } from "@msdyn365-commerce/retail-proxy";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+interface SortOption {
+	id: number;
+	label: string;
+	columnName: string;
+	isDescending: boolean;
+}
+
+const sortOptions: SortOption[] = [
+	{
+		id: 0,
+		label: "Newest order placed",
+		columnName: "CREATEDDATETIME",
+		isDescending: true,
+	},
+	{
+		id: 1,
+		label: "Oldest order placed",
+		columnName: "CREATEDDATETIME",
+		isDescending: false,
+	},
+	{
+		id: 2,
+		label: "Newest confirmed ship date",
+		columnName: "CONFIRMEDSHIPDATE",
+		isDescending: true,
+	},
+	{
+		id: 3,
+		label: "Oldest confirmed ship date",
+		columnName: "CONFIRMEDSHIPDATE",
+		isDescending: false,
+	},
+];
+
+interface OrderSortProps {
+	setSortColumn: (selectedSortColumn: SortColumn) => void;
+}
+
+export default function OrdersSort({ setSortColumn }: OrderSortProps) {
+	const [selectedSort, setSelectedSort] = useState<number>(0);
+	const t = useTranslations("Account.Orders");
+
+	const handleSelectSort = (sortId: number) => {
+		const sortColumn = getSortCriteria(sortId);
+		setSortColumn(sortColumn);
+		setSelectedSort(sortId);
+	};
+
+	const getSortCriteria = (sortId: number): SortColumn => {
+		const sortOption = sortOptions.find((e) => e.id === sortId);
+		if (sortOption) {
+			return {
+				ColumnName: sortOption.columnName,
+				IsDescending: sortOption.isDescending,
+			};
+		} else {
+			return {
+				ColumnName: "CREATEDDATETIME",
+				IsDescending: false,
+			};
+		}
+	};
+
+	return (
+		<FormControl
+			fullWidth
+			size="small"
+			sx={{ maxWidth: 240, backgroundColor: "#fff" }}
+		>
+			<InputLabel id="orders-sort-label">{t("sortByLabel")}</InputLabel>
+			<Select
+				labelId="orders-sort-label"
+				value={selectedSort}
+				label={t("sortByLabel")}
+				onChange={(e) => handleSelectSort(Number(e.target.value))}
+			>
+				{sortOptions.map((option) => (
+					<MenuItem key={option.id} value={option.id}>
+						{option.label}
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
+}

package/src/pages/account/orders/order-history-table.tsx

@@ -0,0 +1,54 @@
+import NoRecords from "@evenicanpm/storefront-core/src/components/no-records";
+import { Box, CircularProgress } from "@mui/material";
+import { cloneElement, Fragment } from "react";
+import OrderHistoryHeader from "./order-history-header";
+import OrdersPagination from "./order-history-pagination";
+import { useOrderHistory } from "./order-history-root";
+import OrderHistoryRow, {
+	OrderHistoryTableRowContext,
+} from "./order-history-row";
+
+const OrderHistoryTable = ({ children }: { children: React.ReactNode }) => {
+	return <>{children}</>;
+};
+
+OrderHistoryTable.List = ({ children }: { children: React.ReactElement }) => {
+	const { orders, isLoading } = useOrderHistory();
+
+	if (isLoading) {
+		return (
+			<Box display="flex" justifyContent="center" my={4}>
+				<CircularProgress />
+			</Box>
+		);
+	}
+
+	if (!orders || orders.length === 0) {
+		return <NoRecords message="Account.Orders.noOrders" />;
+	}
+
+	return (
+		<Fragment>
+			{orders.map((order, index) => (
+				<OrderHistoryTableRowContext.Provider
+					key={order.RecordId ?? index}
+					value={{ order }}
+				>
+					{cloneElement(children)}
+				</OrderHistoryTableRowContext.Provider>
+			))}
+			<Box mt={4}>
+				<OrderHistoryTable.Pagination>
+					<OrderHistoryTable.Pagination.ResultNumber />
+					<OrderHistoryTable.Pagination.PaginationControl />
+				</OrderHistoryTable.Pagination>
+			</Box>
+		</Fragment>
+	);
+};
+
+OrderHistoryTable.Header = OrderHistoryHeader;
+OrderHistoryTable.Row = OrderHistoryRow;
+OrderHistoryTable.Pagination = OrdersPagination;
+
+export default OrderHistoryTable;

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

@@ -39,7 +39,7 @@ const OrderRow = ({ order, children }: React.PropsWithChildren<Props>) => {
 
 	return (
 		<OrderRowContext.Provider value={{ order, formatCurrency }}>
-			<Link href={`/account/orders/${order.Id}`}>
+			<Link href={`/account/orders/${order.SalesId}`}>
 				<TableRow sx={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
 					{children}
 				</TableRow>
@@ -73,7 +73,7 @@ OrderRow.Date = () => {
 	const { order } = context;
 	return (
 		<Paragraph textAlign={{ sm: "center", xs: "left" }}>
-			{format(new Date(order.TransactionDate ?? ""), "MMM dd, yyyy")}
+			{format(new Date(order.CreatedDateTime ?? ""), "MMM dd, yyyy")}
 		</Paragraph>
 	);
 };

package/src/pages/account/orders/orders-drop-down-handler.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+
+export const OrdersDropDownHandler = styled(Box)(({ theme }) => ({
+	width: 150,
+	minWidth: 150,
+	height: "100%",
+	display: "flex",
+	whiteSpace: "pre",
+	alignItems: "center",
+	gap: theme.spacing(0.5),
+	justifyContent: "flex-start",
+	color: theme.palette.grey[700],
+	paddingInline: theme.spacing(2),
+	borderRight: `1px solid ${theme.palette.grey[400]}`,
+	[theme.breakpoints.down("xs")]: { display: "none" },
+}));

package/src/pages/account/table-header.tsx

@@ -0,0 +1,20 @@
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+const TableHeader = styled(Card)(({ theme }) => ({
+	gap: 16,
+	marginBlock: 16,
+	display: "grid",
+	borderRadius: 10,
+	alignItems: "center",
+	padding: ".6rem 1.2rem",
+	gridTemplateColumns: "1.5fr 2fr 1.5fr auto",
+	[theme.breakpoints.down("sm")]: {
+		gap: 8,
+		gridTemplateColumns: "repeat(2, 1fr)",
+	},
+	backgroundColor: theme.palette.primary.main,
+	color: theme.palette.primary.contrastText,
+}));
+
+export default TableHeader;

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/wish-lists/${wishlist?.Id}`}
+				href={`${wishlistsRoute.href}/${wishlist?.Id}`}
 				text={wishlist?.Name ?? ""}
 			/>
 		</Paragraph>

package/src/pages/blog/blog-card.tsx

@@ -14,7 +14,7 @@ import { format } from "date-fns";
 
 interface Props {
 	title: string;
-	imageUrl: string;
+	imageUrl: string | undefined;
 	description: string;
 	createdAt: Date;
 	id: string;
@@ -31,8 +31,14 @@ export default function BlogCard({
 }: Readonly<Props>) {
 	return (
 		<Box overflow="hidden">
-			<ZoomLazyImage width={588} height={272} alt="blog-image" src={imageUrl} />
-
+			{imageUrl && (
+				<ZoomLazyImage
+					width={588}
+					height={272}
+					alt="blog-image"
+					src={imageUrl}
+				/>
+			)}
 			<Box py={3}>
 				<H3 lineHeight={1.3} color="secondary.900">
 					{title}

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

@@ -0,0 +1,152 @@
+"use client";
+import ArrowBack from "@mui/icons-material/ArrowBack";
+import { Box, Container, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { BlocksRenderer } from "@strapi/blocks-react-renderer";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { cmsQueryOptions } from "../../cms/queries";
+import { BorderShadowCard } from "../../components/BoxShadowCard";
+import { Display, Paragraph, Subtitle } from "../../components/Typography";
+
+interface Props {
+	id: string;
+	locale: string;
+	cmsLocale?: string;
+}
+
+export const BlogDetailView = ({ id, locale, cmsLocale }: Props) => {
+	const { data: blog } = useSuspenseQuery(cmsQueryOptions.blog(id, cmsLocale));
+
+	if (!blog) return null;
+
+	const blogData = blog?.data;
+	const imageUrl = blogData?.image?.formats?.large?.url;
+	const imageAlt = blogData?.image?.alternativeText || "Image";
+	const publishDate = new Date(blogData?.publishedAt).toLocaleDateString(
+		locale,
+	);
+	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">
+			<BorderShadowCard style={{ padding: 0 }}>
+				{/* Hero header — full-width image with dark overlay and text */}
+				<Box
+					sx={{
+						position: "relative",
+						width: "100%",
+						minHeight: { xs: 280, md: 420 },
+						borderTopRightRadius: "inherit",
+						borderTopLeftRadius: "inherit",
+						overflow: "hidden",
+					}}
+				>
+					{imageUrl && (
+						<Box
+							component="img"
+							src={imageUrl}
+							alt={imageAlt}
+							sx={{
+								position: "absolute",
+								inset: 0,
+								width: "100%",
+								height: "100%",
+								objectFit: "cover",
+							}}
+						/>
+					)}
+					{/* Dark gradient overlay */}
+					<Box
+						sx={{
+							position: "absolute",
+							inset: 0,
+							background:
+								"linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.15) 100%)",
+						}}
+					/>
+					{/* Text content on top of overlay */}
+					<Box
+						sx={{
+							position: "relative",
+							zIndex: 1,
+							display: "flex",
+							flexDirection: "column",
+							justifyContent: "flex-end",
+							height: "100%",
+							minHeight: { xs: 280, md: 420 },
+							padding: { xs: "24px 20px", md: "40px 40px" },
+							color: "#fff",
+						}}
+					>
+						<Link
+							href="/blog"
+							style={{
+								color: "rgba(255,255,255,0.85)",
+								marginBottom: "16px",
+								display: "inline-flex",
+								alignItems: "center",
+								gap: 4,
+							}}
+						>
+							<ArrowBack fontSize="small" />
+						</Link>
+						<Display sx={{ color: "#fff", mb: 1 }}>{title}</Display>
+						<Typography
+							sx={{
+								color: "rgba(255,255,255,0.85)",
+								lineHeight: "1.7",
+								maxWidth: 640,
+							}}
+						>
+							{shortDescription}
+						</Typography>
+					</Box>
+				</Box>
+				<Box>
+					<Grid
+						container
+						sx={{
+							backgroundColor: "background.paper",
+							padding: "25px",
+							boxSizing: "border-box",
+							color: "grey.900",
+						}}
+					>
+						<Grid size={{ xs: 12, md: 9 }} order={{ xs: 2, md: 1 }}>
+							<Box sx={blogSx}>
+								<BlocksRenderer
+									content={
+										content as React.ComponentProps<
+											typeof BlocksRenderer
+										>["content"]
+									}
+								/>
+							</Box>
+						</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>
+					</Grid>
+				</Box>
+			</BorderShadowCard>
+		</Container>
+	);
+};
+
+const noSpaceSx = { margin: 0, padding: 0 };
+const blogSx = {
+	maxWidth: "650px",
+	"& img": {
+		width: "100%",
+	},
+	"& p": {
+		lineHeight: "1.8",
+	},
+};

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

@@ -0,0 +1,59 @@
+"use client";
+import { Box, Container, Grid } from "@mui/material";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { cmsQueryOptions } from "../../cms/queries";
+import { BorderShadowCard } from "../../components/BoxShadowCard";
+import { FlexBox } from "../../components/flex-box";
+import { H1, H3 } from "../../components/Typography";
+import BlogCard from "./blog-card";
+import Pagination from "./pagination";
+
+interface Props {
+	page: number;
+	pageSize: number;
+	cmsLocale?: string;
+}
+
+export const BlogListView = ({ page, pageSize, cmsLocale }: Props) => {
+	const { data: blogs } = useSuspenseQuery(
+		cmsQueryOptions.blogs(page, pageSize, cmsLocale),
+	);
+
+	const pageCount = blogs?.meta.pagination?.pageCount ?? 0;
+
+	if (blogs.data.length === 0) {
+		return (
+			<BorderShadowCard>
+				<FlexBox justifyContent="center">
+					<H3 color={"grey.700"}>No posts yet, visit again soon!</H3>
+				</FlexBox>
+			</BorderShadowCard>
+		);
+	}
+
+	return (
+		<Container className="mt-2 mb-2" maxWidth="xl">
+			<H1>Posts</H1>
+			<Grid container spacing={3}>
+				{blogs.data.map((blog) => {
+					const imageUrl = blog?.image?.formats?.small?.url;
+					return (
+						<Grid item md={6} xs={12} key={blog.id}>
+							<BlogCard
+								key={blog?.id}
+								title={blog?.title}
+								imageUrl={imageUrl || undefined}
+								description={blog?.shortDescription}
+								createdAt={blog?.createdAt}
+								id={blog.documentId}
+							/>
+						</Grid>
+					);
+				})}
+			</Grid>
+			<Box display="flex" justifyContent="center" sx={{ my: 2 }}>
+				<Pagination count={pageCount} page={page} pageSize={pageSize} />
+			</Box>
+		</Container>
+	);
+};

package/src/pages/cart/estimate-shipping.tsx

@@ -162,11 +162,12 @@ EstimateShipping.State = () => {
 			onChange={(e) => setSelectedState(e.target.value)}
 		>
 			<MenuItem value="">Select a state</MenuItem>
-			{states.map(({ StateName, StateId }) => (
-				<MenuItem value={StateId} key={StateId}>
-					{StateName}
-				</MenuItem>
-			))}
+			{Array.isArray(states) &&
+				states.map(({ StateName, StateId }) => (
+					<MenuItem value={StateId} key={StateId}>
+						{StateName}
+					</MenuItem>
+				))}
 		</TextField>
 	);
 };

package/src/pages/checkout/checkout-alt-form/checkout-form.tsx

@@ -70,29 +70,51 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 	const placeOrder = async () => {
 		setIsSubmitting(true);
 		const cache = queryClient.getQueryCache();
-		const acceptResultCache = cache.get(
-			JSON.stringify(["paymentAcceptResult", cart.Id]),
-		);
-		const paymentAcceptResult = acceptResultCache?.state
-			.data as CardPaymentAcceptResult;
-
-		if (!paymentAcceptResult?.TokenizedPaymentCard) {
-			return;
-		}
+
+		const selectedPaymentMethod =
+			(queryClient.getQueryData<string>(["selectedPaymentMethod", cart.Id]) as
+				| "card"
+				| "on-account") ?? "card";
 
 		try {
-			const data = await placeOrderMutation({
-				id: cart.Id,
-				receiptEmail: cart.ReceiptEmail ?? "",
-				tokenizedPaymentCard: paymentAcceptResult.TokenizedPaymentCard,
-				currency: channelConfigurationData?.Currency ?? "",
-				amount: cart.TotalAmount || 0,
-			});
-			await cleanupCart(data.Id);
-			setNotification({
-				message: t("placeOrderSuccessMessage"),
-				severity: "success",
-			});
+			if (selectedPaymentMethod === "on-account") {
+				const data = await placeOrderMutation({
+					id: cart.Id,
+					receiptEmail: cart.ReceiptEmail ?? "",
+					currency: channelConfigurationData?.Currency ?? "",
+					amount: cart.TotalAmount || 0,
+					paymentMethod: "on-account",
+				});
+				await cleanupCart(data.Id);
+				setNotification({
+					message: t("placeOrderSuccessMessage"),
+					severity: "success",
+				});
+			} else {
+				const acceptResultCache = cache.get(
+					JSON.stringify(["paymentAcceptResult", cart.Id]),
+				);
+				const paymentAcceptResult = acceptResultCache?.state
+					.data as CardPaymentAcceptResult;
+
+				if (!paymentAcceptResult?.TokenizedPaymentCard) {
+					return;
+				}
+
+				const data = await placeOrderMutation({
+					id: cart.Id,
+					receiptEmail: cart.ReceiptEmail ?? "",
+					tokenizedPaymentCard: paymentAcceptResult.TokenizedPaymentCard,
+					currency: channelConfigurationData?.Currency ?? "",
+					amount: cart.TotalAmount || 0,
+					paymentMethod: "card",
+				});
+				await cleanupCart(data.Id);
+				setNotification({
+					message: t("placeOrderSuccessMessage"),
+					severity: "success",
+				});
+			}
 		} catch (error) {
 			console.error(error);
 			setNotification({