@evenicanpm/storefront-core 2.2.0 → 2.3.0

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/wishlist/wishlist-item.tsx

@@ -79,7 +79,7 @@ WishlistItem.Name = () => {
 	return (
 		<Paragraph ellipsis>
 			<NavLink3
-				href={`/account/wish-lists/${wishlist?.Id}`}
+				href={`/account/order-templates/${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,150 @@
+"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, 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;
+
+	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" }}>
+								<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({

package/src/pages/checkout/checkout-alt-form/steps/payment/payment-details.tsx

@@ -1,6 +1,8 @@
 import type { RetrieveCardPaymentAcceptResultInput } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
 import usePaymentAcceptResult from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/get-payment-accept-result";
 import getPaymentAcceptPoint from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-payment-accept-point";
+import getCustomerBalance from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-customer-balance";
+import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components/flex-box";
 import {
 	H6,
@@ -12,10 +14,20 @@ import type {
 	CardPaymentAcceptPoint,
 	CardPaymentAcceptResult,
 } from "@msdyn365-commerce/retail-proxy";
-import { Alert, Box, Card } from "@mui/material";
+import {
+	Alert,
+	Box,
+	Card,
+	FormControlLabel,
+	Radio,
+	RadioGroup,
+} from "@mui/material";
+import { useQueryClient } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import React from "react";
 
+export type PaymentMethod = "card" | "on-account";
+
 enum PaymentConnectorPostMessageType {
 	CardPrefix = "msax-cc-cardprefix",
 	Error = "msax-cc-error",
@@ -41,7 +53,10 @@ type PaymentError = {
 };
 
 type PaymentDetailsCompound = React.FC<CheckoutStepComponentProps> & {
-	Preview: React.FC<{ paymentAcceptResult: CardPaymentAcceptResult | null }>;
+	Preview: React.FC<{
+		paymentAcceptResult: CardPaymentAcceptResult | null;
+		selectedPaymentMethod: PaymentMethod;
+	}>;
 	Form: React.FC<{
 		iframeReference: React.RefObject<HTMLIFrameElement>;
 		iframeHeight: number;
@@ -62,14 +77,37 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 
 	const [paymentAcceptResult, setPaymentAcceptResult] =
 		React.useState<CardPaymentAcceptResult | null>(null);
+	const [selectedPaymentMethod, setSelectedPaymentMethod] =
+		React.useState<PaymentMethod>("card");
 
 	const t = useTranslations("Checkout.Payment");
-	const { data: paymentAcceptPointData } = getPaymentAcceptPoint.useData({
-		cartId: cart.Id,
-		totalAmount: cart.TotalAmount ?? 0,
-		origin: globalThis.window?.location?.origin,
-		isClient: !!globalThis.window,
-	});
+	const queryClient = useQueryClient();
+	const { data: user } = getUser.useData();
+	const { data: customerBalance } = getCustomerBalance.useData(
+		user?.AccountNumber
+			? {
+					accountNumber: user.AccountNumber,
+					invoiceAccountNumber: user.InvoiceAccount,
+				}
+			: undefined,
+	);
+
+	const availableCredit = customerBalance
+		? customerBalance.CreditLimit -
+			customerBalance.Balance -
+			customerBalance.PendingBalance
+		: 0;
+	const canPayOnAccount = availableCredit >= (cart.TotalAmount ?? 0);
+
+	const { data: paymentAcceptPointData } = getPaymentAcceptPoint.useData(
+		{
+			cartId: cart.Id,
+			totalAmount: cart.TotalAmount ?? 0,
+			origin: globalThis.window?.location?.origin,
+			isClient: !!globalThis.window,
+		},
+		{ enabled: selectedPaymentMethod === "card" },
+	);
 
 	const { mutateAsync: retrievePaymentAcceptResult } = usePaymentAcceptResult();
 	const iframeReference = React.useRef<HTMLIFrameElement>(null);
@@ -219,10 +257,29 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 
 	React.useEffect(() => {
 		if (stepSubmissionState === "submitting") {
-			// INFO: This listens for `submitting` state, then posts submit message to iframe
-			postSubmitMessage();
+			if (selectedPaymentMethod === "on-account") {
+				// Store on-account selection in query cache for checkout-form to read
+				queryClient.setQueryData(
+					["selectedPaymentMethod", cart.Id],
+					"on-account",
+				);
+				setStepSubmissionState("idle");
+				handleStepCompletion();
+			} else {
+				// INFO: This listens for `submitting` state, then posts submit message to iframe
+				queryClient.setQueryData(["selectedPaymentMethod", cart.Id], "card");
+				postSubmitMessage();
+			}
 		}
-	}, [postSubmitMessage, stepSubmissionState]);
+	}, [
+		postSubmitMessage,
+		stepSubmissionState,
+		selectedPaymentMethod,
+		queryClient,
+		cart.Id,
+		setStepSubmissionState,
+		handleStepCompletion,
+	]);
 
 	React.useEffect(() => {
 		if (!paymentAcceptPointData || stepViewState !== "active") return;
@@ -246,21 +303,89 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 		<>
 			{children ||
 				(stepViewState === "preview" ? (
-					<PaymentDetails.Preview paymentAcceptResult={paymentAcceptResult} />
-				) : (
-					<PaymentDetails.Form
-						iframeReference={iframeReference}
-						iframeHeight={iframeHeight}
-						errorState={errorState}
-						paymentAcceptPointData={paymentAcceptPointData}
+					<PaymentDetails.Preview
+						paymentAcceptResult={paymentAcceptResult}
+						selectedPaymentMethod={selectedPaymentMethod}
 					/>
+				) : (
+					<Box sx={{ m: 2 }}>
+						{canPayOnAccount && (
+							<>
+								<H6 sx={{ mb: 2 }}>{t("selectPaymentMethod")}</H6>
+								<RadioGroup
+									value={selectedPaymentMethod}
+									onChange={(e) =>
+										setSelectedPaymentMethod(e.target.value as PaymentMethod)
+									}
+									sx={{ mb: 3 }}
+								>
+									<FormControlLabel
+										value="card"
+										control={<Radio />}
+										label={t("payWithCard")}
+									/>
+									<FormControlLabel
+										value="on-account"
+										control={<Radio />}
+										label={`${t("payOnAccount")} (${t("availableCredit")}: ${availableCredit.toFixed(2)})`}
+									/>
+								</RadioGroup>
+							</>
+						)}
+						{selectedPaymentMethod === "card" ? (
+							<PaymentDetails.Form
+								iframeReference={iframeReference}
+								iframeHeight={iframeHeight}
+								errorState={errorState}
+								paymentAcceptPointData={paymentAcceptPointData}
+							/>
+						) : (
+							<Card
+								sx={{
+									p: 3,
+									border: "1px solid",
+									borderColor: "success.main",
+									backgroundColor: "success.light",
+								}}
+							>
+								<Paragraph fontWeight="bold">{t("onAccountSummary")}</Paragraph>
+								<Paragraph>
+									{t("chargeAmount")}: {cart.TotalAmount?.toFixed(2)}
+								</Paragraph>
+								<Paragraph>
+									{t("availableCredit")}: {availableCredit.toFixed(2)}
+								</Paragraph>
+							</Card>
+						)}
+					</Box>
 				))}
 		</>
 	);
 };
 
-PaymentDetails.Preview = ({ paymentAcceptResult }) => {
+PaymentDetails.Preview = ({ paymentAcceptResult, selectedPaymentMethod }) => {
 	const t = useTranslations("Checkout.Payment");
+
+	if (selectedPaymentMethod === "on-account") {
+		return (
+			<FlexBox flexDirection={"column"} sx={{ m: 2 }}>
+				<H6 sx={{ mb: 2 }}>{t("cardPaymentDetails")}</H6>
+				<Card
+					sx={{
+						padding: 2,
+						boxShadow: "none",
+						border: "1px solid",
+						position: "relative",
+						backgroundColor: "grey.100",
+						borderColor: "secondary.main",
+					}}
+				>
+					<Paragraph fontWeight="bold">{t("payOnAccount")}</Paragraph>
+				</Card>
+			</FlexBox>
+		);
+	}
+
 	if (!paymentAcceptResult) return null;
 
 	return (