@evenicanpm/storefront-core 2.2.0 → 2.3.0

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>