@evenicanpm/storefront-core 1.3.0 → 1.4.0

package/src/pages-v2/product-list/utils/getCategoryFilterFromSlug.ts

@@ -10,6 +10,23 @@ export type Category = {
 	Children?: Category[];
 };
 
+const matchesSlug = (cat: Category, slug: string) => {
+	const url = cat?.Url?.toLowerCase() || "";
+	const name = cat?.Name?.toLowerCase() || "";
+	const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
+	const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
+
+	return (
+		url.includes(slug) ||
+		name === slug ||
+		neutralName === slug ||
+		seoCrumb === slug
+	);
+};
+
+const getCategoryId = (cat: Category, isD365: boolean) =>
+	isD365 ? cat.RecordId?.toString() : cat.id?.toString();
+
 export function getCategoryIdFromSlug(
 	slug: string[],
 	categories: Category[],
@@ -23,18 +40,9 @@ export function getCategoryIdFromSlug(
 		const parentSlug = slug[0]?.toLowerCase();
 		const childSlug = slug[1]?.toLowerCase();
 
-		const parentCategory = categories.find((cat) => {
-			const url = cat?.Url?.toLowerCase() || "";
-			const name = cat?.Name?.toLowerCase() || "";
-			const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
-			const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
-			return (
-				url.includes(parentSlug) ||
-				name === parentSlug ||
-				neutralName === parentSlug ||
-				seoCrumb === parentSlug
-			);
-		});
+		const parentCategory = categories.find((cat) =>
+			matchesSlug(cat, parentSlug),
+		);
 
 		if (!parentCategory) {
 			console.warn(
@@ -44,74 +52,30 @@ export function getCategoryIdFromSlug(
 			return undefined;
 		}
 
-		const childMatch = parentCategory.Children?.find((cat) => {
-			const url = cat?.Url?.toLowerCase() || "";
-			const name = cat?.Name?.toLowerCase() || "";
-			const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
-			const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
-			return (
-				url.includes(childSlug) ||
-				name === childSlug ||
-				neutralName === childSlug ||
-				seoCrumb === childSlug
-			);
-		});
-		if (childMatch) {
-			return isD365
-				? childMatch.RecordId?.toString()
-				: childMatch.id?.toString();
-		}
+		const childMatch = parentCategory.Children?.find((cat) =>
+			matchesSlug(cat, childSlug),
+		);
 
-		return undefined;
+		return childMatch ? getCategoryId(childMatch, isD365) : undefined;
 	}
 
 	const slugValue = slug[0]?.toLowerCase();
 
-	const topLevelMatch = categories.find((cat) => {
-		const url = cat?.Url?.toLowerCase() || "";
-		const name = cat?.Name?.toLowerCase() || "";
-		const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
-		const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
-		return (
-			url.includes(slugValue) ||
-			name === slugValue ||
-			neutralName === slugValue ||
-			seoCrumb === slugValue
-		);
-	});
+	const topLevelMatch = categories.find((cat) => matchesSlug(cat, slugValue));
 
 	if (topLevelMatch) {
-		return isD365
-			? topLevelMatch.RecordId?.toString()
-			: topLevelMatch.id?.toString();
+		return getCategoryId(topLevelMatch, isD365);
 	}
 
-	let childMatch: Category | undefined;
 	for (const topLevelCat of categories) {
-		if (topLevelCat.Children && topLevelCat.Children.length > 0) {
-			const child = topLevelCat.Children.find((cat) => {
-				const url = cat?.Url?.toLowerCase() || "";
-				const name = cat?.Name?.toLowerCase() || "";
-				const neutralName = cat?.NeutralizedNAME?.toLowerCase() || "";
-				const seoCrumb = cat?.seoCrumb?.toLowerCase() || "";
-				return (
-					url.includes(slugValue) ||
-					name === slugValue ||
-					neutralName === slugValue ||
-					seoCrumb === slugValue
-				);
-			});
-			if (child) {
-				childMatch = child;
-				break;
-			}
+		const child = topLevelCat.Children?.find((cat) =>
+			matchesSlug(cat, slugValue),
+		);
+		if (child) {
+			return getCategoryId(child, isD365);
 		}
 	}
 
-	if (childMatch) {
-		return isD365 ? childMatch.RecordId?.toString() : childMatch.id?.toString();
-	}
-
 	return undefined;
 }
 
@@ -142,7 +106,8 @@ export function getCategoryFilterFromSlug(
 			});
 			if (children.length > 0) {
 				return children
-					.map((child) => (child.seoCrumb || child.Url || child.Name) as string)
+					.map((child) => child.seoCrumb || child.Url || child.Name)
+					.filter(Boolean)
 					.join("|");
 			}
 		}

package/src/pages-v2/product-list/utils/product-list-helper.ts

@@ -42,7 +42,7 @@ const getSelectedSortOption = (
 const getCategoryFromSlug = (slug: string[]) => {
 	if (Array.isArray(slug)) {
 		const categoryId = Number(slug.pop());
-		if (!isNaN(categoryId)) {
+		if (!Number.isNaN(categoryId)) {
 			return categoryId;
 		}
 	}

package/src/pages-v2/product-list/utils/search-for-category.ts

@@ -53,11 +53,11 @@ const getCategoryTranslatedName = (
 			(item) => item.Language?.toLowerCase() === locale.toLowerCase(),
 		);
 	}
-	return nameTranslation && nameTranslation.Text;
+	return nameTranslation?.Text;
 };
 
 const normalizeCategoryName = (name: string) =>
-	name.toLowerCase().replace(/ /g, "-");
+	name.toLowerCase().replaceAll(" ", "-");
 
 const getCategoryUrl = (category: CategoryHierarchy) => {
 	const contentPageKey = PageSlug.Content;

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

@@ -15,11 +15,14 @@ export interface OrderUploadProps {
 	onUploadItems: (data: OrderUploadItem[]) => void;
 }
 
-// eslint-disable-next-line
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const XLSX: any;
 
-export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
+export default function OrderUpload({
+	onUploadItems,
+}: Readonly<OrderUploadProps>) {
 	const t = useTranslations("QuickOrder");
+
 	const [items, setItems] = useState<OrderUploadItem[]>([]);
 	const [errCount, setErrCount] = useState<number>(0);
 	const [files, setFiles] = useState<File[]>();
@@ -27,13 +30,28 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
 
 	const accept: Accept = { "text/*": [".xlsx", ".csv", ".xls"] };
 
+	useEffect(loadXlsxScript, []);
+
 	useEffect(() => {
-		const script = document.createElement("script");
-		script.lang = "javascript";
-		script.src =
-			"https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js";
-		document.head.appendChild(script);
-	}, []);
+		if (!files) return;
+
+		const processFiles = async () => {
+			for (const file of files) {
+				const buffer = await file.arrayBuffer();
+
+				const sheet = readFirstSheet(buffer);
+				const parsed = extractItemsFromSheet(sheet);
+
+				const { validItems, errors } = validateItems(parsed, items);
+
+				setItems(validItems);
+				setErrCount(errCount + errors);
+				onUploadItems(validItems);
+			}
+		};
+
+		processFiles();
+	}, [files, items, onUploadItems]);
 
 	const handleReject = (rejs: FileRejection[]) => {
 		const msgs = rejs.map((r) => `${r.file.name} ${t("fileRejectionMsg")}`);
@@ -53,82 +71,16 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
 
 	const handleCloseError = () => setFileRejections([]);
 
-	useEffect(() => {
-		const handleUploadItems = (list: OrderUploadItem[]) => onUploadItems(list);
-
-		const parseFile = (file: File) => {
-			const currItems = items ? [...items] : [];
-			let currErrCount = errCount;
-
-			const reader = new FileReader();
-			reader.onload = (evt) => {
-				const bstr = evt.target?.result;
-				const wb = XLSX.read(bstr, { type: "binary" });
-				const wsname = wb.SheetNames[0];
-				const ws = wb.Sheets[wsname];
-				const ref = ws["!ref"];
-				let data: OrderUploadItem[] = [];
-
-				try {
-					if (ref) {
-						const spl = ref.split(":");
-						if (spl.length === 2) {
-							const rowCount = Number(spl[1].substring(1));
-							for (let i = 2; i < rowCount + 1; i++) {
-								const qty = ws[`B${i}`]?.v;
-								const itemId = ws[`A${i}`]?.v;
-								if (itemId) data.push({ itemId, qty });
-							}
-						}
-					}
-				} catch {}
-
-				if (data.length === 0) {
-					data = XLSX.utils.sheet_to_json(ws, {
-						header: 0,
-					}) as OrderUploadItem[];
-				}
-
-				data.forEach((d) => {
-					const qty =
-						typeof d.qty === "string" || d.qty - Math.floor(d.qty) !== 0
-							? 1
-							: d.qty;
-					if (d.itemId && d.qty) currItems.push({ qty, itemId: d.itemId });
-					else currErrCount++;
-				});
-
-				setItems(currItems);
-				setErrCount(currErrCount);
-				handleUploadItems(currItems);
-			};
-			reader.readAsBinaryString(file);
-		};
-
-		const isValidFile = (file: File): boolean => {
-			parseFile(file);
-			return file.type === "text/csv";
-		};
-
-		if (files) {
-			files.forEach((file) => {
-				if (isValidFile(file)) {
-					// noop
-				}
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [items, files, errCount, onUploadItems]);
-
 	return (
 		<>
 			{fileRejections.length > 0 && (
 				<Alert severity="error" onClose={handleCloseError}>
 					{fileRejections.map((msg, i) => (
-						<div key={i}>{msg}</div>
+						<div key={`e-msg-${i + 1}`}>{msg}</div>
 					))}
 				</Alert>
 			)}
+
 			<DropZone
 				onChange={getFiles}
 				handleReject={handleReject}
@@ -137,3 +89,65 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
 		</>
 	);
 }
+
+// Loading xlsx script from CDN, as the library doesn't support ESM imports yet
+function loadXlsxScript() {
+	const script = document.createElement("script");
+	script.lang = "javascript";
+	script.src =
+		"https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js";
+	document.head.appendChild(script);
+}
+
+//Read Excel Sheet
+function readFirstSheet(binary: string | ArrayBuffer) {
+	const wb = XLSX.read(binary, { type: "binary" });
+	const wsname = wb.SheetNames[0];
+	return wb.Sheets[wsname];
+}
+
+//Extract Items
+// biome-ignore lint/suspicious/noExplicitAny: <explanation> This is required as the XLSX library returns a sheet as an object with dynamic keys based on the cell positions (e.g., A1, B2, etc.), which cannot be typed more specifically without extensive type definitions that may not be practical. --- IGNORE ---
+function extractItemsFromSheet(ws: Record<string, any>): OrderUploadItem[] {
+	const ref = ws["!ref"];
+	let data: OrderUploadItem[] = [];
+
+	try {
+		if (ref) {
+			const [_, end] = ref.split(":");
+			const rowCount = Number(end.substring(1));
+
+			for (let i = 2; i < rowCount + 1; i++) {
+				const qty = ws[`B${i}`]?.v;
+				const itemId = ws[`A${i}`]?.v;
+
+				if (itemId) data.push({ itemId, qty });
+			}
+		}
+	} catch {}
+
+	if (data.length === 0) {
+		data = XLSX.utils.sheet_to_json(ws, { header: 0 });
+	}
+
+	return data;
+}
+
+//Validate Items
+function validateItems(data: OrderUploadItem[], existing: OrderUploadItem[]) {
+	const validItems = [...existing];
+	let errors = 0;
+
+	data.forEach((d) => {
+		const qty =
+			typeof d.qty === "string" || d.qty - Math.floor(d.qty) !== 0 ? 1 : d.qty;
+
+		if (d.itemId && d.qty) {
+			validItems.push({ itemId: d.itemId, qty });
+		} else {
+			errors++;
+		}
+	});
+
+	return { validItems, errors };
+}

package/src/pages-v2/quickorder/provider.tsx

@@ -11,7 +11,7 @@ import type { QuickOrderRowData } from "./quick-order-row";
 export default function QuickOrderProvider({
 	children,
 }: {
-	children: React.ReactNode;
+	readonly children: React.ReactNode;
 }) {
 	const [rows, setRows] = useState<QuickOrderRowData[]>([]);
 	const { mutateAsync: searchProducts } = useSearchProducts();
@@ -84,11 +84,11 @@ export default function QuickOrderProvider({
 		if (updated[idx].value !== value) {
 			updated[idx].value = value;
 			const response = await getProductSearchResults([value]);
-			product = (response && response[0]) || null;
+			product = response?.[0] || null;
 		}
 
 		updated[idx] = generateRowData(
-			product ? product : null,
+			product || null,
 			id,
 			value,
 			!!product,
@@ -173,12 +173,14 @@ export default function QuickOrderProvider({
 			header +
 			rows.map(({ value, quantity }) => `${value},${quantity}`).join("\n");
 		const uri = "data:text/csv;charset=utf-8," + csv;
+
 		const link = document.createElement("a");
 		link.setAttribute("href", encodeURI(uri));
 		link.setAttribute("download", "quick_order.csv");
+
 		document.body.appendChild(link);
 		link.click();
-		document.body.removeChild(link);
+		link.remove();
 	};
 
 	useEffect(() => initTable(), [initTable]);

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

@@ -47,7 +47,7 @@ export default function QuickOrderRow({
 	onRowChange,
 	isLastRow,
 	rowError,
-}: QuickOrderRowProps) {
+}: Readonly<QuickOrderRowProps>) {
 	const theme = useTheme();
 	const t = useTranslations("QuickOrder");
 	const { formatCurrency } = useCurrencyFormatter();

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

@@ -98,7 +98,7 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 		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;
+			const newRowId = (current.at(-1)?.id ?? 0) + 1;
 			if (current.length < 3) current.push(generateEmptyRow(newRowId));
 			setRows(current);
 		}
@@ -167,7 +167,7 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 		if (current[idx].value !== value) {
 			current[idx].value = value;
 			const response = await searchProductByRow(id, value);
-			product = (response && response[0]) || null;
+			product = response?.[0] || null;
 			found = !!product;
 		}
 
@@ -177,7 +177,7 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 
 	const addRows = () => {
 		const current = [...rows];
-		const maxRowId = current.reduce((m, r) => (r.id > m ? r.id : m), 0);
+		const maxRowId = current.reduce((m, r) => Math.max(m, r.id), 0);
 		const newRowId = maxRowId + 1;
 		current.push(generateEmptyRow(newRowId), generateEmptyRow(newRowId + 1));
 		setRows(current);
@@ -190,12 +190,13 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 			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);
+		link.remove();
 	};
 
 	const addToCart = async () => {
@@ -225,7 +226,7 @@ const QuickOrder = ({ children }: { children?: ReactNode }) => {
 			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;
+			let rowId = curr.reduce((m, r) => Math.max(m, r.id), 0) + 1;
 
 			items.forEach((it) => {
 				const product = response?.find(
@@ -325,6 +326,24 @@ QuickOrder.Row = ({
 }) => {
 	const ctx = useQuickOrder();
 	const theme = useTheme();
+	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],
+	);
+
 	if (!ctx) return null;
 
 	const getStatus = (
@@ -344,22 +363,6 @@ QuickOrder.Row = ({
 		}
 	};
 
-	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);
@@ -389,6 +392,7 @@ QuickOrder.Row = ({
 					placeholder={t("Table.itemNo")}
 				/>
 			</TableCell>
+
 			<TableCell sx={{ width: { xs: "20%" } }}>
 				<QuickOrder.QtyInput
 					value={row.quantity}
@@ -397,10 +401,13 @@ QuickOrder.Row = ({
 					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"

package/src/providers/notifications/notification-context.tsx

@@ -33,7 +33,6 @@ export const NotificationProvider = ({
 		severity: "info",
 		type: "general",
 	});
-	// const [miniCartOpen, setMiniCartOpen] = React.useState<boolean>(false);
 
 	const setNotification = (notification: NotificationType) => {
 		setAlert(notification);