@evenicanpm/storefront-core 2.2.0 → 2.3.1

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 (

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

@@ -0,0 +1,53 @@
+"use client";
+import { Box, Container, Paper } from "@mui/material";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import BlockManager from "../cms/blocks/block-manager";
+import type { BlockManagerType } from "../cms/blocks/interfaces";
+import { DraftModeBadge } from "../cms/draft-mode-badge";
+import { cmsQueryOptions } from "../cms/queries";
+import { H1, H4 } from "../components/Typography";
+
+interface Props {
+	slug: string;
+	cmsLocale?: string;
+	isDraftMode: boolean;
+}
+
+export const CmsPageView = ({ slug, cmsLocale, isDraftMode }: Props) => {
+	const { data } = useSuspenseQuery(
+		cmsQueryOptions.page(slug, isDraftMode ? "draft" : "published", cmsLocale),
+	);
+
+	const pageData = data?.data[0];
+
+	return (
+		<>
+			{isDraftMode && <DraftModeBadge />}
+			{pageData ? (
+				<Box
+					sx={{
+						width: "100%",
+						maxWidth: "100vw",
+						overflowX: "hidden",
+						wordWrap: "break-word",
+						marginTop: "25px",
+					}}
+				>
+					<BlockManager
+						blocks={pageData?.block as unknown as BlockManagerType}
+					/>
+				</Box>
+			) : (
+				<Container>
+					<Paper sx={{ marginTop: "25px", padding: "50px" }} elevation={1}>
+						<H1>e4 Storefront</H1>
+						<H4>
+							Add a page to the &quot;Page&quot; content-type in CMS to add
+							content to this page.
+						</H4>
+					</Paper>
+				</Container>
+			)}
+		</>
+	);
+};

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}
+		/>
+	);
 };

package/src/pages/quickorder/order-upload.tsx

@@ -3,7 +3,7 @@
 import DropZone from "@evenicanpm/storefront-core/src/components/DropZone";
 import { Alert } from "@mui/material";
 import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Accept, FileRejection } from "react-dropzone";
 
 export interface OrderUploadItem {
@@ -42,10 +42,16 @@ export default function OrderUpload({
 	const t = useTranslations("QuickOrder");
 
 	const [items, setItems] = useState<OrderUploadItem[]>([]);
-	const [errCount, setErrCount] = useState<number>(0);
+	const [_errCount, setErrCount] = useState<number>(0);
 	const [files, setFiles] = useState<File[]>();
 	const [fileRejections, setFileRejections] = useState<string[]>([]);
 
+	const itemsRef = useRef(items);
+	itemsRef.current = items;
+
+	const onUploadItemsRef = useRef(onUploadItems);
+	onUploadItemsRef.current = onUploadItems;
+
 	const accept: Accept = { "text/*": [".xlsx", ".csv", ".xls"] };
 
 	useEffect(loadXlsxScript, []);
@@ -60,16 +66,16 @@ export default function OrderUpload({
 				const sheet = readFirstSheet(buffer);
 				const parsed = extractItemsFromSheet(sheet);
 
-				const { validItems, errors } = validateItems(parsed, items);
+				const { validItems, errors } = validateItems(parsed, itemsRef.current);
 
 				setItems(validItems);
-				setErrCount(errCount + errors);
-				onUploadItems(validItems);
+				setErrCount((prev) => prev + errors);
+				onUploadItemsRef.current(validItems);
 			}
 		};
 
 		processFiles();
-	}, [files, items, onUploadItems, errCount]);
+	}, [files]);
 
 	const handleReject = (rejs: FileRejection[]) => {
 		const msgs = rejs.map((r) => `${r.file.name} ${t("fileRejectionMsg")}`);

package/src/pages/quickorder/quick-order.tsx

@@ -61,6 +61,7 @@ export interface QuickOrderRowData {
 
 type SearchableProduct = {
 	ItemId?: string;
+	RecordId?: number;
 };
 
 type Ctx = {
@@ -93,17 +94,22 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 
 	const tableInit = useCallback(() => {
 		const next: QuickOrderRowData[] = [];
-		for (let i = 0; i < 3; i++) next.push(generateEmptyRow(i + 1));
+		for (let i = 0; i < 2; i++) next.push(generateEmptyRow(i + 1));
 		setRows(next);
 	}, []);
 
 	const deleteRow = (id: number) => {
+		if (rows.length <= 1) return;
 		const current = [...rows];
 		const idx = current.findIndex((r) => r.id === id);
 		if (idx > -1) {
 			current.splice(idx, 1);
-			const newRowId = (current.at(-1)?.id ?? 0) + 1;
-			if (current.length < 3) current.push(generateEmptyRow(newRowId));
+			// Ensure there's always a trailing empty row for input
+			const lastRow = current[current.length - 1];
+			if (lastRow.value) {
+				const newRowId = current.reduce((m, r) => Math.max(m, r.id), 0) + 1;
+				current.push(generateEmptyRow(newRowId));
+			}
 			setRows(current);
 		}
 	};
@@ -176,6 +182,14 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 		}
 
 		current[idx] = generateRowData(product, id, value, found, quantity);
+
+		// Auto-add an empty row when the last row has data entered
+		const lastRow = current[current.length - 1];
+		if (lastRow.value) {
+			const newRowId = current.reduce((m, r) => Math.max(m, r.id), 0) + 1;
+			current.push(generateEmptyRow(newRowId));
+		}
+
 		setRows(current);
 	};
 
@@ -234,9 +248,11 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 			let rowId: number = curr.reduce((m, r) => Math.max(m, r.id), 0) + 1;
 
 			items.forEach((it: OrderUploadItem): void => {
+				const itemIdStr = it.itemId.toString().toLowerCase();
 				const product: ProductSearchResult | undefined = response?.find(
 					(r: SearchableProduct) =>
-						it.itemId.toString().toLowerCase() === r.ItemId?.toLowerCase(),
+						itemIdStr === r.ItemId?.toLowerCase() ||
+						itemIdStr === String(r.RecordId),
 				);
 				const qty: number = it.qty || 1;
 				curr.push(
@@ -250,7 +266,8 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 				);
 			});
 
-			while (curr.length < 3) curr.push({ ...generateEmptyRow(rowId++) });
+			// Add one trailing empty row for the next entry
+			curr.push(generateEmptyRow(rowId++));
 			setRows(curr);
 		},
 		[rows, searchProductsMultiple, generateRowData],
@@ -316,20 +333,14 @@ QuickOrder.Body = () => {
 	const { rows } = ctx;
 	return (
 		<TableBody>
-			{rows.map((r, i) => (
-				<QuickOrder.Row key={r.id} row={r} isLast={i === rows.length - 1} />
+			{rows.map((r) => (
+				<QuickOrder.Row key={r.id} row={r} />
 			))}
 		</TableBody>
 	);
 };
 
-QuickOrder.Row = ({
-	row,
-	isLast,
-}: {
-	row: QuickOrderRowData;
-	isLast: boolean;
-}) => {
+QuickOrder.Row = ({ row }: { row: QuickOrderRowData }) => {
 	const ctx = useQuickOrder();
 	const theme = useTheme();
 	const t = useTranslations("QuickOrder");
@@ -378,10 +389,6 @@ QuickOrder.Row = ({
 		ctx.updateRow(row.id, row.value, e.target.value);
 	};
 
-	const onFocus = () => {
-		if (isLast) ctx.addRows();
-	};
-
 	return (
 		<TableRow
 			sx={{
@@ -394,7 +401,6 @@ QuickOrder.Row = ({
 				<QuickOrder.SkuInput
 					value={inputValue}
 					onChange={onValueChange}
-					onFocus={onFocus}
 					placeholder={t("Table.itemNo")}
 				/>
 			</TableCell>
@@ -403,7 +409,6 @@ QuickOrder.Row = ({
 				<QuickOrder.QtyInput
 					value={row.quantity}
 					onChange={onQtyChange}
-					onFocus={onFocus}
 					placeholder={t("Table.quantity")}
 				/>
 			</TableCell>