@evenicanpm/storefront-core 2.1.0 → 2.3.0

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/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>

package/src/api-manager/datasources/d365/utils/decode-jwt.ts

@@ -1,10 +0,0 @@
-"use server";
-import { decode } from "next-auth/jwt";
-
-export async function decodeToken(token: string) {
-	const secret = process.env.NEXTAUTH_SECRET; //this shouldn't be from key vault.
-	if (!secret) {
-		throw new Error("Environment variable NEXTAUTH_SECRET is not set.");
-	}
-	return decode({ token: token, secret });
-}

package/src/auth/auth-options.test.ts

@@ -1,70 +0,0 @@
-import type { Account, Session } from "next-auth";
-import type { JWT } from "next-auth/jwt";
-import { describe, expect, it } from "vitest";
-import authOptions, { type ExtendedJwtToken } from "@/auth/auth-options";
-
-describe("next-auth option callbacks", () => {
-	describe("jwt callback", () => {
-		it("should store accessToken and refreshToken when account and profile are available", async () => {
-			const token: ExtendedJwtToken = {
-				accessToken: "",
-				accessTokenExpiresAt: 0,
-				provider: "azure-ad-b2c",
-				refreshTokenExpiresAt: 0,
-				exp: 0,
-			};
-			const account: Account = {
-				access_token: "testAccessToken",
-				refresh_token: "testRefreshToken",
-				expires_on: Math.floor(Date.now() / 1000) + 3600,
-				refresh_token_expires_in: 86400,
-				providerAccountId: "test-provider-account-id",
-				provider: "azure-ad-b2c",
-				type: "oauth",
-			};
-
-			let newToken: ExtendedJwtToken | undefined;
-			if (authOptions()?.callbacks?.jwt) {
-				newToken = await authOptions().callbacks.jwt({
-					token,
-					user: { id: "123" },
-					account,
-					profile: {},
-				});
-			}
-
-			expect(newToken?.accessToken).toBe("testAccessToken");
-			expect(newToken?.refreshToken).toBe("testRefreshToken");
-			expect(newToken?.accessTokenExpiresAt).toBe(token.accessTokenExpiresAt); // We're not setting this or using it anymore
-			expect(newToken?.refreshTokenExpiresAt).toBe(token.refreshTokenExpiresAt); // We're not setting this or using it anymore);
-		});
-	});
-
-	describe("session callback", () => {
-		it("should pass accessToken and error to session", async () => {
-			const session = { expires: "", user: { name: "123" } };
-			const token: JWT = {
-				accessToken: "sessionToken",
-				accessTokenExpiresAt: 0,
-				refreshToken: "",
-				refreshTokenExpiresAt: 0,
-				error: "SomeError",
-			};
-			let newSession: Session | null;
-			if (authOptions()?.callbacks?.session) {
-				newSession = await authOptions().callbacks.session({
-					session,
-					token,
-					user: { id: "123", email: "", emailVerified: new Date(Date.now()) },
-					newSession: {},
-					trigger: "update",
-				});
-			} else {
-				newSession = null;
-			}
-
-			expect(newSession?.accessToken).toBe("sessionToken");
-			expect(newSession?.error).toBe("SomeError");
-		});
-	});
-});

package/src/auth/auth-options.ts

@@ -1,101 +0,0 @@
-import { deleteCartCookie } from "@evenicanpm/storefront-core/src/lib/cart-cookie-handler";
-import type {
-	GetServerSidePropsContext,
-	NextApiRequest,
-	NextApiResponse,
-} from "next";
-import type { NextAuthOptions, Session } from "next-auth";
-import type { JWT } from "next-auth/jwt";
-import { getServerSession } from "next-auth/next";
-import { getProviders } from "@/auth/providers";
-
-// Split providers into separate array so we can iterate them and match the provider ID
-export type ExtendedJwtToken = JWT & {
-	provider: string;
-	exp: number;
-};
-
-export type ExtendedSession = Session & { token?: JWT };
-
-const createAuthOptions = (): NextAuthOptions => {
-	const providers = getProviders();
-	const secret = process.env.NEXTAUTH_SECRET; // internally used by next-auth, shouldn't be from key vault.
-	return {
-		providers,
-		secret,
-		cookies: {
-			csrfToken: {
-				name: "next-auth.csrf-token",
-				options: {
-					httpOnly: true,
-					sameSite: "none",
-					path: "/",
-					secure: true,
-				},
-			},
-			pkceCodeVerifier: {
-				name: "next-auth.pkce.code_verifier",
-				options: {
-					httpOnly: true,
-					sameSite: "none",
-					path: "/",
-					secure: true,
-				},
-			},
-			nonce: {
-				name: "next-auth.nonce",
-				options: {
-					httpOnly: true,
-					sameSite: "none",
-					path: "/",
-					secure: true,
-				},
-			},
-		},
-		// Order in which callbacks are called = signin > redirect > jwt > session. Thats why session callback has token info.
-		callbacks: {
-			// By default, NextAuth uses "session" with strategy: "jwt"
-			async jwt({ token, account, profile }) {
-				const _token = token as ExtendedJwtToken;
-				// account and profile is available only in first callback after signin
-				if (account && profile) {
-					_token.provider = account.provider;
-					// use id_token for entra external id and access_token for aadb2c
-					_token.accessToken =
-						_token.provider === "entra-external-id"
-							? account.id_token
-							: account.access_token;
-					_token.refreshToken = account.refresh_token;
-				}
-				return _token;
-				// return await checkAccessTokenExpiry(_token)
-			},
-			async session({ session, token }) {
-				const _session = { ...session } as ExtendedSession;
-				// Way to pass data to the browser
-				// Use this error to force logout in UI. No proper way to signout user from server.
-				_session.error = token?.error;
-				_session.accessToken = token.accessToken;
-
-				return _session;
-			},
-		},
-		events: {
-			signOut: async () => {
-				await deleteCartCookie();
-			},
-		},
-	};
-};
-
-export function auth(
-	// <-- use this function to access the jwt from React components
-	...args:
-		| [GetServerSidePropsContext["req"], GetServerSidePropsContext["res"]]
-		| [NextApiRequest, NextApiResponse]
-		| []
-) {
-	return getServerSession(...args, createAuthOptions());
-}
-
-export default createAuthOptions;