@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -1,12 +1,12 @@
 "use client";
 
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
 } from "@mui/material";
 import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
 import QuickOrderRow from "./quick-order-row";
@@ -14,56 +14,56 @@ import { useQuickOrder } from "./context";
 import { useTranslations } from "next-intl";
 
 const QuickOrderTable = () => {
-  const { rows, handleRowUpdate, handleRowDelete, handleAddRows } =
-    useQuickOrder();
-  const t = useTranslations("QuickOrder");
+	const { rows, handleRowUpdate, handleRowDelete, handleAddRows } =
+		useQuickOrder();
+	const t = useTranslations("QuickOrder");
 
-  return (
-    <BorderShadowCard sx={{ padding: 0 }}>
-      <TableContainer sx={{ borderRadius: "4px" }}>
-        <Table>
-          <TableHead sx={{ backgroundColor: "#323337" }}>
-            <TableRow>
-              <TableCell sx={{ color: "white", width: { xs: "30%" } }}>
-                {t("Table.itemNo")}
-              </TableCell>
-              <TableCell sx={{ color: "white", width: { xs: "20%" } }}>
-                {t("Table.quantity")}
-              </TableCell>
-              <TableCell sx={{ color: "white" }}>
-                {t("Table.itemName")}
-              </TableCell>
-              <TableCell
-                sx={{
-                  color: "white",
-                  display: { xs: "none", sm: "table-cell" },
-                }}
-              >
-                {t("Table.price")}
-              </TableCell>
-              <TableCell sx={{ color: "white" }}>{t("Table.delete")}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row, idx) => (
-              <QuickOrderRow
-                key={row.id}
-                id={row.id}
-                value={row.value}
-                quantity={row.quantity}
-                product={row.product}
-                onRowDelete={handleRowDelete}
-                onRowChange={handleRowUpdate}
-                onAddRows={handleAddRows}
-                isLastRow={idx === rows.length - 1}
-                rowError={row.rowError}
-              />
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </BorderShadowCard>
-  );
+	return (
+		<BorderShadowCard sx={{ padding: 0 }}>
+			<TableContainer sx={{ borderRadius: "4px" }}>
+				<Table>
+					<TableHead sx={{ backgroundColor: "#323337" }}>
+						<TableRow>
+							<TableCell sx={{ color: "white", width: { xs: "30%" } }}>
+								{t("Table.itemNo")}
+							</TableCell>
+							<TableCell sx={{ color: "white", width: { xs: "20%" } }}>
+								{t("Table.quantity")}
+							</TableCell>
+							<TableCell sx={{ color: "white" }}>
+								{t("Table.itemName")}
+							</TableCell>
+							<TableCell
+								sx={{
+									color: "white",
+									display: { xs: "none", sm: "table-cell" },
+								}}
+							>
+								{t("Table.price")}
+							</TableCell>
+							<TableCell sx={{ color: "white" }}>{t("Table.delete")}</TableCell>
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{rows.map((row, idx) => (
+							<QuickOrderRow
+								key={row.id}
+								id={row.id}
+								value={row.value}
+								quantity={row.quantity}
+								product={row.product}
+								onRowDelete={handleRowDelete}
+								onRowChange={handleRowUpdate}
+								onAddRows={handleAddRows}
+								isLastRow={idx === rows.length - 1}
+								rowError={row.rowError}
+							/>
+						))}
+					</TableBody>
+				</Table>
+			</TableContainer>
+		</BorderShadowCard>
+	);
 };
 
 export default QuickOrderTable;

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

@@ -0,0 +1,521 @@
+"use client";
+
+import React, {
+	ReactNode,
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+import {
+	Button,
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
+	useTheme,
+	Box,
+	TextField,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import _ from "lodash";
+import { useTranslations } from "next-intl";
+
+import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components/BoxShadowCard";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import useSearchProducts from "@/api-manager/services/product/mutations/search-products";
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+
+import OrderUploadInner, {
+	OrderUploadItem,
+} from "@evenicanpm/storefront-core/src/pages/quickorder/order-upload";
+
+type TextInputProps = {
+	value: string;
+	onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	onFocus?: () => void;
+	placeholder?: string;
+	sx?: object;
+};
+
+export enum RowError {
+	ProductNotFound,
+	InvalidQuantity,
+	OutOfStock,
+	None,
+}
+
+export interface QuickOrderRowData {
+	id: number;
+	value: string;
+	quantity: string;
+	product: ProductSearchResult | null;
+	rowError: RowError;
+}
+
+type Ctx = {
+	rows: QuickOrderRowData[];
+	setRows: React.Dispatch<React.SetStateAction<QuickOrderRowData[]>>;
+	addRows: () => void;
+	resetTable: () => void;
+	updateRow: (id: number, value: string, quantity: string) => Promise<void>;
+	deleteRow: (id: number) => void;
+	generateCsv: () => void;
+	handleUploadedItems: (items: OrderUploadItem[]) => Promise<void>;
+	addToCart: () => Promise<void>;
+};
+
+const QuickOrderContext = createContext<Ctx | null>(null);
+
+const QuickOrder = ({ children }: { children?: ReactNode }) => {
+	const [rows, setRows] = useState<QuickOrderRowData[]>([]);
+	const { mutateAsync: searchProducts } = useSearchProducts();
+	const { mutateAsync: addToCartMut } = useAddToCart();
+	const { data: cart } = getCart.useData();
+	const t = useTranslations("QuickOrder");
+
+	const generateEmptyRow = (id: number): QuickOrderRowData => ({
+		id,
+		value: "",
+		quantity: "1",
+		product: null,
+		rowError: RowError.None,
+	});
+
+	const tableInit = useCallback(() => {
+		const next: QuickOrderRowData[] = [];
+		for (let i = 0; i < 3; i++) next.push(generateEmptyRow(i + 1));
+		setRows(next);
+	}, []);
+
+	const deleteRow = (id: number) => {
+		const current = [...rows];
+		const idx = current.findIndex((r) => r.id === id);
+		if (idx > -1) {
+			current.splice(idx, 1);
+			const newRowId = current.length ? current[current.length - 1].id + 1 : 1;
+			if (current.length < 3) current.push(generateEmptyRow(newRowId));
+			setRows(current);
+		}
+	};
+
+	const getProductSearchResults = useCallback(
+		async (itemIds: string[]) => {
+			return await searchProducts({ itemIds });
+		},
+		[searchProducts],
+	);
+
+	const searchProductsMultiple = useCallback(
+		async (itemIds: string[]) => {
+			const min = 5;
+			const valid = itemIds.filter((id) => id.length >= min);
+			if (!valid.length) return [];
+			return await getProductSearchResults(valid);
+		},
+		[getProductSearchResults],
+	);
+
+	const generateRowData = useCallback(
+		(
+			product: ProductSearchResult | null,
+			rowId: number,
+			searchText: string,
+			foundProduct: boolean,
+			quantity: string,
+		): QuickOrderRowData => {
+			let rowError = RowError.None;
+			if (
+				Number.isNaN(Number(quantity)) ||
+				Number(quantity) < 1 ||
+				!Number.isInteger(Number(quantity))
+			) {
+				rowError = RowError.InvalidQuantity;
+			} else if (!foundProduct) {
+				rowError = RowError.ProductNotFound;
+			}
+			return {
+				...generateEmptyRow(rowId),
+				product: foundProduct ? product : null,
+				value: searchText,
+				quantity: quantity.toString(),
+				rowError,
+			};
+		},
+		[],
+	);
+
+	const searchProductByRow = async (_id: number, searchText: string) => {
+		const minQueryLength = 5;
+		if (searchText.length < minQueryLength) return [];
+		return await getProductSearchResults([searchText]);
+	};
+
+	const updateRow = async (id: number, value: string, quantity: string) => {
+		const current = [...rows];
+		const idx = current.findIndex((row) => row.id === id);
+		if (idx < 0) return;
+
+		let product = current[idx].product;
+		let found = !!product;
+
+		if (current[idx].value !== value) {
+			current[idx].value = value;
+			const response = await searchProductByRow(id, value);
+			product = (response && response[0]) || null;
+			found = !!product;
+		}
+
+		current[idx] = generateRowData(product, id, value, found, quantity);
+		setRows(current);
+	};
+
+	const addRows = () => {
+		const current = [...rows];
+		const maxRowId = current.reduce((m, r) => (r.id > m ? r.id : m), 0);
+		const newRowId = maxRowId + 1;
+		current.push(generateEmptyRow(newRowId), generateEmptyRow(newRowId + 1));
+		setRows(current);
+	};
+
+	const generateCsv = () => {
+		if (!rows.length) return;
+		const header = "SKU,Quantity\n";
+		const csv =
+			header +
+			rows.map(({ value, quantity }) => `${value},${quantity}`).join("\n");
+		const encoded = encodeURI("data:text/csv;charset=utf-8," + csv);
+		const link = document.createElement("a");
+		link.setAttribute("href", encoded);
+		link.setAttribute("download", "quick_order.csv");
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	};
+
+	const addToCart = async () => {
+		if (!cart) return;
+		const products = rows
+			.filter((r) => r.product && r.rowError === RowError.None)
+			.map((r) => ({
+				ProductId: Number(r.product?.RecordId),
+				Quantity: Number(r.quantity),
+			}));
+		if (products.length > 0) {
+			await addToCartMut({
+				cartId: cart.Id,
+				version: cart.Version,
+				cartLine: products,
+			});
+			tableInit();
+		}
+	};
+
+	const handleUploadedItems = useCallback(
+		async (items: OrderUploadItem[]) => {
+			const ids = items.map((it) => it.itemId.toString());
+			const response = await searchProductsMultiple(ids);
+
+			let curr = [...rows];
+			const firstEmptyIdx = curr.findIndex((r) => !r.value);
+			if (firstEmptyIdx > -1) curr = curr.slice(0, firstEmptyIdx);
+
+			let rowId = curr.reduce((m, r) => (r.id > m ? r.id : m), 0) + 1;
+
+			items.forEach((it) => {
+				const product = response?.find(
+					(r) => it.itemId.toString().toLowerCase() === r.ItemId?.toLowerCase(),
+				);
+				const qty = it.qty || 1;
+				curr.push(
+					generateRowData(
+						product || null,
+						rowId++,
+						it.itemId,
+						!!product,
+						qty.toString(),
+					),
+				);
+			});
+
+			while (curr.length < 3) curr.push({ ...generateEmptyRow(rowId++) });
+			setRows(curr);
+		},
+		[rows, searchProductsMultiple, generateRowData],
+	);
+
+	useEffect(() => {
+		tableInit();
+	}, [tableInit]);
+
+	const value: Ctx = {
+		rows,
+		setRows,
+		addRows,
+		resetTable: tableInit,
+		updateRow,
+		deleteRow,
+		generateCsv,
+		handleUploadedItems,
+		addToCart,
+	};
+
+	return (
+		<QuickOrderContext.Provider value={value}>
+			<BorderShadowCard sx={{ padding: 0 }}>{children}</BorderShadowCard>
+		</QuickOrderContext.Provider>
+	);
+};
+
+const useQuickOrder = () => useContext(QuickOrderContext);
+
+QuickOrder.Table = ({ children }: { children?: ReactNode }) => (
+	<TableContainer sx={{ borderRadius: "4px" }}>
+		<Table>{children}</Table>
+	</TableContainer>
+);
+
+QuickOrder.Head = () => {
+	const t = useTranslations("QuickOrder");
+	return (
+		<TableHead sx={{ backgroundColor: "#323337" }}>
+			<TableRow>
+				<TableCell sx={{ color: "white", width: { xs: "30%" } }}>
+					{t("Table.itemNo")}
+				</TableCell>
+				<TableCell sx={{ color: "white", width: { xs: "20%" } }}>
+					{t("Table.quantity")}
+				</TableCell>
+				<TableCell sx={{ color: "white" }}>{t("Table.itemName")}</TableCell>
+				<TableCell
+					sx={{ color: "white", display: { xs: "none", sm: "table-cell" } }}
+				>
+					{t("Table.price")}
+				</TableCell>
+				<TableCell sx={{ color: "white" }}>{t("Table.delete")}</TableCell>
+			</TableRow>
+		</TableHead>
+	);
+};
+
+QuickOrder.Body = () => {
+	const ctx = useQuickOrder();
+	if (!ctx) return null;
+	const { rows } = ctx;
+	return (
+		<TableBody>
+			{rows.map((r, i) => (
+				<QuickOrder.Row key={r.id} row={r} isLast={i === rows.length - 1} />
+			))}
+		</TableBody>
+	);
+};
+
+QuickOrder.Row = ({
+	row,
+	isLast,
+}: {
+	row: QuickOrderRowData;
+	isLast: boolean;
+}) => {
+	const ctx = useQuickOrder();
+	const theme = useTheme();
+	if (!ctx) return null;
+
+	const getStatus = (
+		product: ProductSearchResult | null,
+		rowError: RowError,
+		t: ReturnType<typeof useTranslations>,
+	) => {
+		switch (rowError) {
+			case RowError.InvalidQuantity:
+				return t("invalidQuantity");
+			case RowError.ProductNotFound:
+				return t("productNotFound");
+			case RowError.OutOfStock:
+				return t("OOS");
+			default:
+				return product ? product.Name : null;
+		}
+	};
+
+	const t = useTranslations("QuickOrder");
+	const { formatCurrency } = useCurrencyFormatter();
+
+	const [inputValue, setInputValue] = useState<string>(row.value || "");
+
+	useEffect(() => setInputValue(row.value || ""), [row.value]);
+
+	const debounced = useMemo(
+		() =>
+			_.debounce(
+				(val: string) => ctx.updateRow(row.id, val, row.quantity),
+				500,
+			),
+		[ctx, row.id, row.quantity],
+	);
+
+	const onValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setInputValue(e.target.value);
+		debounced(e.target.value);
+	};
+
+	const onQtyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		ctx.updateRow(row.id, row.value, e.target.value);
+	};
+
+	const onFocus = () => {
+		if (isLast) ctx.addRows();
+	};
+
+	return (
+		<TableRow
+			sx={{
+				...(row.rowError !== RowError.None && {
+					bgcolor: theme.palette.error.light,
+				}),
+			}}
+		>
+			<TableCell sx={{ width: { xs: "30%" } }}>
+				<QuickOrder.SkuInput
+					value={inputValue}
+					onChange={onValueChange}
+					onFocus={onFocus}
+					placeholder={t("Table.itemNo")}
+				/>
+			</TableCell>
+			<TableCell sx={{ width: { xs: "20%" } }}>
+				<QuickOrder.QtyInput
+					value={row.quantity}
+					onChange={onQtyChange}
+					onFocus={onFocus}
+					placeholder={t("Table.quantity")}
+				/>
+			</TableCell>
+			<TableCell>{getStatus(row.product, row.rowError, t)}</TableCell>
+			<TableCell sx={{ display: { xs: "none", sm: "table-cell" } }}>
+				{row.product?.Price ? formatCurrency(row.product.Price) : ""}
+			</TableCell>
+			<TableCell>
+				<Button
+					variant="contained"
+					color="secondary"
+					onClick={() => ctx.deleteRow(row.id)}
+				>
+					<DeleteIcon />
+					<Span sx={{ display: { xs: "none", sm: "inline-flex" } }}>
+						{t("deleteBtn")}
+					</Span>
+				</Button>
+			</TableCell>
+		</TableRow>
+	);
+};
+
+QuickOrder.SkuInput = ({
+	value,
+	onChange,
+	onFocus,
+	placeholder,
+	sx,
+}: TextInputProps) => (
+	<TextField
+		value={value}
+		onChange={onChange}
+		onFocus={onFocus}
+		fullWidth
+		size="small"
+		variant="outlined"
+		placeholder={placeholder}
+		InputProps={{ sx: { bgcolor: "white" } }}
+		sx={sx}
+	/>
+);
+
+QuickOrder.QtyInput = ({
+	value,
+	onChange,
+	onFocus,
+	placeholder,
+	sx,
+}: TextInputProps) => (
+	<TextField
+		value={value}
+		onChange={onChange}
+		onFocus={onFocus}
+		fullWidth
+		size="small"
+		variant="outlined"
+		placeholder={placeholder}
+		InputProps={{ sx: { bgcolor: "white" } }}
+		sx={sx}
+	/>
+);
+
+// Actions
+
+QuickOrder.Actions = ({ children }: { children?: ReactNode }) => (
+	<BorderShadowCard>
+		<FlexBox sx={{ justifyContent: "center", gap: { xs: 2, sm: 20 } }}>
+			{children}
+		</FlexBox>
+	</BorderShadowCard>
+);
+
+QuickOrder.AddToCartButton = () => {
+	const ctx = useQuickOrder();
+	const t = useTranslations("QuickOrder");
+	if (!ctx) return null;
+	return (
+		<Button variant="contained" color="secondary" onClick={ctx.addToCart}>
+			{t("addToCartBtn")}
+		</Button>
+	);
+};
+
+QuickOrder.ResetButton = () => {
+	const ctx = useQuickOrder();
+	const t = useTranslations("QuickOrder");
+	if (!ctx) return null;
+	return (
+		<Button variant="contained" color="secondary" onClick={ctx.resetTable}>
+			{t("resetFormBtn")}
+		</Button>
+	);
+};
+
+QuickOrder.DownloadCsvButton = () => {
+	const ctx = useQuickOrder();
+	const t = useTranslations("QuickOrder");
+	if (!ctx) return null;
+	return (
+		<Button variant="contained" color="secondary" onClick={ctx.generateCsv}>
+			{t("downloadFileBtn")}
+		</Button>
+	);
+};
+
+QuickOrder.Upload = ({ children }: { children?: ReactNode }) => (
+	<BorderShadowCard>
+		<FlexBox justifyContent="center" gap={2} flexDirection="column" px={2}>
+			{children}
+		</FlexBox>
+	</BorderShadowCard>
+);
+
+QuickOrder.OrderUpload = () => {
+	const ctx = useQuickOrder();
+	if (!ctx) return null;
+	return <OrderUploadInner onUploadItems={ctx.handleUploadedItems} />;
+};
+
+export default QuickOrder;