@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -3,185 +3,200 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { QuickOrderContext, RowError } from "./context";
 import type { QuickOrderRowData } from "./quick-order-row";
-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 useSearchProducts from "@evenicanpm/storefront-core/src/api-manager/services/product/mutations/search-products";
+import useAddToCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-to-cart";
+import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 
 export default function QuickOrderProvider({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-  const [rows, setRows] = useState<QuickOrderRowData[]>([]);
-  const { mutateAsync: searchProducts } = useSearchProducts();
-  const { mutateAsync: addToCart } = useAddToCart();
-  const { data: cart } = getCart.useData();
-
-  const generateEmptyRow = (id: number): QuickOrderRowData => ({
-    id,
-    value: "",
-    quantity: "1",
-    product: null,
-    rowError: RowError.None,
-  });
-
-  const initTable = useCallback(() => {
-    const newRows = Array.from({ length: 3 }, (_, i) => generateEmptyRow(i + 1));
-    setRows(newRows);
-  }, []);
-
-  const generateRowData = useCallback(
-    (
-      product: any,
-      rowId: number,
-      value: string,
-      found: boolean,
-      qty: string
-    ): QuickOrderRowData => {
-      let rowError = RowError.None;
-      if (
-        Number.isNaN(Number(qty)) ||
-        Number(qty) < 1 ||
-        !Number.isInteger(Number(qty))
-      ) {
-        rowError = RowError.InvalidQuantity;
-      } else if (!found) {
-        rowError = RowError.ProductNotFound;
-      }
-      return {
-        ...generateEmptyRow(rowId),
-        product: found ? product : null,
-        value,
-        quantity: qty.toString(),
-        rowError,
-      };
-    },
-    []
-  );
-
-  const getProductSearchResults = useCallback(
-    async (itemIds: string[]) => {
-      const results = await searchProducts({ itemIds });
-      return results;
-    },
-    [searchProducts]
-  );
-
-  const handleRowUpdate = async (
-    id: number,
-    value: string,
-    quantity: string
-  ) => {
-    const updated = [...rows];
-    const idx = updated.findIndex((row) => row.id === id);
-    if (idx === -1) return;
-
-    let product = updated[idx].product;
-
-    if (updated[idx].value !== value) {
-      updated[idx].value = value;
-      const response = await getProductSearchResults([value]);
-      product = (response && response[0]) || null;
-    }
-
-    updated[idx] = generateRowData(!!product ? product : null, id, value, !!product, quantity);
-    setRows(updated);
-  };
-
-  const handleRowDelete = (id: number) => {
-    let updated = rows.filter((r) => r.id !== id);
-    const lastId = updated.at(-1)?.id ?? 0;
-    if (updated.length < 3) {
-      updated.push(generateEmptyRow(lastId + 1));
-    }
-    setRows(updated);
-  };
-
-  const handleAddRows = () => {
-    const maxRowId = rows.length ? Math.max(...rows.map((r) => r.id)) : 0;
-    setRows([
-      ...rows,
-      generateEmptyRow(maxRowId + 1),
-      generateEmptyRow(maxRowId + 2),
-    ]);
-  };
-
-  const handleAddToCart = 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 addToCart({
-        cartId: cart.Id,
-        version: cart.Version,
-        cartLine: products,
-      });
-      initTable();
-    }
-  };
-
-  const handleUploadedItems = async (items: any[]) => {
-    const itemIds = items.map((it: any) => it.itemId.toString());
-    const response = await getProductSearchResults(itemIds);
-
-    let updated = rows.filter((r) => r.value);
-    let rowId = updated.reduce((max, r) => Math.max(max, r.id), 0) + 1;
-
-    items.forEach((it: any) => {
-      const product = response?.find(
-        (r: any) =>
-          r.ItemId?.toLowerCase() === it.itemId.toString().toLowerCase()
-      );
-      const qty = it.qty || 1;
-      updated.push(
-        generateRowData(product || null, rowId++, it.itemId, !!product, qty.toString())
-      );
-    });
-
-    while (updated.length < 3) {
-      updated.push(generateEmptyRow(rowId++));
-    }
-
-    setRows(updated);
-  };
-
-  const generateFile = () => {
-    if (!rows.length) return;
-    const header = "SKU,Quantity\n";
-    const csv =
-      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);
-  };
-
-  useEffect(() => initTable(), [initTable]);
-
-  return (
-    <QuickOrderContext.Provider
-      value={{
-        rows,
-        cart,
-        handleRowUpdate,
-        handleRowDelete,
-        handleAddRows,
-        handleAddToCart,
-        handleUploadedItems,
-        resetForm: initTable,
-        generateFile,
-      }}
-    >
-      {children}
-    </QuickOrderContext.Provider>
-  );
+	const [rows, setRows] = useState<QuickOrderRowData[]>([]);
+	const { mutateAsync: searchProducts } = useSearchProducts();
+	const { mutateAsync: addToCart } = useAddToCart();
+	const { data: cart } = getCart.useData();
+
+	const generateEmptyRow = (id: number): QuickOrderRowData => ({
+		id,
+		value: "",
+		quantity: "1",
+		product: null,
+		rowError: RowError.None,
+	});
+
+	const initTable = useCallback(() => {
+		const newRows = Array.from({ length: 3 }, (_, i) =>
+			generateEmptyRow(i + 1),
+		);
+		setRows(newRows);
+	}, []);
+
+	const generateRowData = useCallback(
+		(
+			product: any,
+			rowId: number,
+			value: string,
+			found: boolean,
+			qty: string,
+		): QuickOrderRowData => {
+			let rowError = RowError.None;
+			if (
+				Number.isNaN(Number(qty)) ||
+				Number(qty) < 1 ||
+				!Number.isInteger(Number(qty))
+			) {
+				rowError = RowError.InvalidQuantity;
+			} else if (!found) {
+				rowError = RowError.ProductNotFound;
+			}
+			return {
+				...generateEmptyRow(rowId),
+				product: found ? product : null,
+				value,
+				quantity: qty.toString(),
+				rowError,
+			};
+		},
+		[],
+	);
+
+	const getProductSearchResults = useCallback(
+		async (itemIds: string[]) => {
+			const results = await searchProducts({ itemIds });
+			return results;
+		},
+		[searchProducts],
+	);
+
+	const handleRowUpdate = async (
+		id: number,
+		value: string,
+		quantity: string,
+	) => {
+		const updated = [...rows];
+		const idx = updated.findIndex((row) => row.id === id);
+		if (idx === -1) return;
+
+		let product = updated[idx].product;
+
+		if (updated[idx].value !== value) {
+			updated[idx].value = value;
+			const response = await getProductSearchResults([value]);
+			product = (response && response[0]) || null;
+		}
+
+		updated[idx] = generateRowData(
+			!!product ? product : null,
+			id,
+			value,
+			!!product,
+			quantity,
+		);
+		setRows(updated);
+	};
+
+	const handleRowDelete = (id: number) => {
+		let updated = rows.filter((r) => r.id !== id);
+		const lastId = updated.at(-1)?.id ?? 0;
+		if (updated.length < 3) {
+			updated.push(generateEmptyRow(lastId + 1));
+		}
+		setRows(updated);
+	};
+
+	const handleAddRows = () => {
+		const maxRowId = rows.length ? Math.max(...rows.map((r) => r.id)) : 0;
+		setRows([
+			...rows,
+			generateEmptyRow(maxRowId + 1),
+			generateEmptyRow(maxRowId + 2),
+		]);
+	};
+
+	const handleAddToCart = 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 addToCart({
+				cartId: cart.Id,
+				version: cart.Version,
+				cartLine: products,
+			});
+			initTable();
+		}
+	};
+
+	const handleUploadedItems = async (items: any[]) => {
+		const itemIds = items.map((it: any) => it.itemId.toString());
+		const response = await getProductSearchResults(itemIds);
+
+		let updated = rows.filter((r) => r.value);
+		let rowId = updated.reduce((max, r) => Math.max(max, r.id), 0) + 1;
+
+		items.forEach((it: any) => {
+			const product = response?.find(
+				(r: any) =>
+					r.ItemId?.toLowerCase() === it.itemId.toString().toLowerCase(),
+			);
+			const qty = it.qty || 1;
+			updated.push(
+				generateRowData(
+					product || null,
+					rowId++,
+					it.itemId,
+					!!product,
+					qty.toString(),
+				),
+			);
+		});
+
+		while (updated.length < 3) {
+			updated.push(generateEmptyRow(rowId++));
+		}
+
+		setRows(updated);
+	};
+
+	const generateFile = () => {
+		if (!rows.length) return;
+		const header = "SKU,Quantity\n";
+		const csv =
+			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);
+	};
+
+	useEffect(() => initTable(), [initTable]);
+
+	return (
+		<QuickOrderContext.Provider
+			value={{
+				rows,
+				cart,
+				handleRowUpdate,
+				handleRowDelete,
+				handleAddRows,
+				handleAddToCart,
+				handleUploadedItems,
+				resetForm: initTable,
+				generateFile,
+			}}
+		>
+			{children}
+		</QuickOrderContext.Provider>
+	);
 }

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

@@ -2,21 +2,24 @@
 
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
-import { H2, Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+	H2,
+	Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
 
 const QuickOrderHeader = () => {
-  const t = useTranslations("QuickOrder");
-  return (
-    <BorderShadowCard>
-      <FlexBox justifyContent="left" px={3}>
-        <H2>{t("title")}</H2>
-      </FlexBox>
-      <FlexBox justifyContent="left" px={3}>
-        <Span>{t("entryBySku")}</Span>
-      </FlexBox>
-    </BorderShadowCard>
-  );
+	const t = useTranslations("QuickOrder");
+	return (
+		<BorderShadowCard>
+			<FlexBox justifyContent="left" px={3}>
+				<H2>{t("title")}</H2>
+			</FlexBox>
+			<FlexBox justifyContent="left" px={3}>
+				<Span>{t("entryBySku")}</Span>
+			</FlexBox>
+		</BorderShadowCard>
+	);
 };
 
 export default QuickOrderHeader;

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

@@ -2,134 +2,134 @@
 
 import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
 import {
-  Button,
-  TableCell,
-  TableRow,
-  TextField,
-  useTheme,
+	Button,
+	TableCell,
+	TableRow,
+	TextField,
+	useTheme,
 } from "@mui/material";
 import React, { useEffect, useMemo, useState } from "react";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { RowError } from "./context";
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
-import useCurrencyFormatter from "@/lib/currency-formatter";
+import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
 import _ from "lodash";
 
 export interface QuickOrderRowData {
-  id: number;
-  value: string;
-  quantity: string;
-  product: ProductSearchResult | null;
-  rowError: RowError;
+	id: number;
+	value: string;
+	quantity: string;
+	product: ProductSearchResult | null;
+	rowError: RowError;
 }
 
 interface QuickOrderRowProps {
-  id: number;
-  value: string;
-  quantity: string;
-  product: ProductSearchResult | null;
-  rowError: RowError;
-  onRowDelete: (id: number) => void;
-  onAddRows: () => void;
-  onRowChange: (id: number, value: string, quantity: string) => void;
-  isLastRow: boolean;
+	id: number;
+	value: string;
+	quantity: string;
+	product: ProductSearchResult | null;
+	rowError: RowError;
+	onRowDelete: (id: number) => void;
+	onAddRows: () => void;
+	onRowChange: (id: number, value: string, quantity: string) => void;
+	isLastRow: boolean;
 }
 
 export default function QuickOrderRow({
-  id,
-  value,
-  quantity,
-  product,
-  onRowDelete,
-  onAddRows,
-  onRowChange,
-  isLastRow,
-  rowError,
+	id,
+	value,
+	quantity,
+	product,
+	onRowDelete,
+	onAddRows,
+	onRowChange,
+	isLastRow,
+	rowError,
 }: QuickOrderRowProps) {
-  const theme = useTheme();
-  const t = useTranslations("QuickOrder");
-  const { formatCurrency } = useCurrencyFormatter();
+	const theme = useTheme();
+	const t = useTranslations("QuickOrder");
+	const { formatCurrency } = useCurrencyFormatter();
 
-  const [inputValue, setInputValue] = useState<string>(value || "");
+	const [inputValue, setInputValue] = useState<string>(value || "");
 
-  useEffect(() => {
-    setInputValue(value || "");
-  }, [value]);
+	useEffect(() => {
+		setInputValue(value || "");
+	}, [value]);
 
-  const debouncedOnChange = useMemo(
-    () =>
-      _.debounce((val: string) => {
-        onRowChange(id, val, quantity);
-      }, 500),
-    [onRowChange, id, quantity]
-  );
+	const debouncedOnChange = useMemo(
+		() =>
+			_.debounce((val: string) => {
+				onRowChange(id, val, quantity);
+			}, 500),
+		[onRowChange, id, quantity],
+	);
 
-  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-    debouncedOnChange(e.target.value);
-  };
+	const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setInputValue(e.target.value);
+		debouncedOnChange(e.target.value);
+	};
 
-  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onRowChange(id, value, e.target.value);
-  };
+	const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		onRowChange(id, value, e.target.value);
+	};
 
-  const addRows = () => onAddRows();
-  const handleRowDelete = () => onRowDelete(id);
+	const addRows = () => onAddRows();
+	const handleRowDelete = () => onRowDelete(id);
 
-  const getRowStatusMessage = (p: ProductSearchResult | null) => {
-    switch (rowError) {
-      case RowError.InvalidQuantity:
-        return t("invalidQuantity");
-      case RowError.ProductNotFound:
-        return t("productNotFound");
-      case RowError.OutOfStock:
-        return t("OOS");
-    }
-    if (p) return p.Name;
-    return null;
-  };
+	const getRowStatusMessage = (p: ProductSearchResult | null) => {
+		switch (rowError) {
+			case RowError.InvalidQuantity:
+				return t("invalidQuantity");
+			case RowError.ProductNotFound:
+				return t("productNotFound");
+			case RowError.OutOfStock:
+				return t("OOS");
+		}
+		if (p) return p.Name;
+		return null;
+	};
 
-  return (
-    <TableRow
-      sx={{
-        ...(rowError !== RowError.None && {
-          bgcolor: theme.palette.error.light,
-        }),
-      }}
-    >
-      <TableCell sx={{ width: { xs: "30%" } }}>
-        <TextField
-          value={inputValue}
-          InputProps={{ sx: { bgcolor: "white" } }}
-          onChange={handleValueChange}
-          onFocus={() => {
-            if (isLastRow && addRows) addRows();
-          }}
-        />
-      </TableCell>
-      <TableCell sx={{ width: { xs: "20%" } }}>
-        <TextField
-          value={quantity}
-          InputProps={{ sx: { bgcolor: "white" } }}
-          onChange={handleQuantityChange}
-          onFocus={() => {
-            if (isLastRow && addRows) addRows();
-          }}
-        />
-      </TableCell>
-      <TableCell>{getRowStatusMessage(product)}</TableCell>
-      <TableCell sx={{ display: { xs: "none", sm: "table-cell" } }}>
-        {product?.Price ? formatCurrency(product?.Price) : ""}
-      </TableCell>
-      <TableCell>
-        <Button variant="contained" color="secondary" onClick={handleRowDelete}>
-          <DeleteIcon />
-          <Span sx={{ display: { xs: "none", sm: "inline-flex" } }}>
-            {t("deleteBtn")}
-          </Span>
-        </Button>
-      </TableCell>
-    </TableRow>
-  );
+	return (
+		<TableRow
+			sx={{
+				...(rowError !== RowError.None && {
+					bgcolor: theme.palette.error.light,
+				}),
+			}}
+		>
+			<TableCell sx={{ width: { xs: "30%" } }}>
+				<TextField
+					value={inputValue}
+					InputProps={{ sx: { bgcolor: "white" } }}
+					onChange={handleValueChange}
+					onFocus={() => {
+						if (isLastRow && addRows) addRows();
+					}}
+				/>
+			</TableCell>
+			<TableCell sx={{ width: { xs: "20%" } }}>
+				<TextField
+					value={quantity}
+					InputProps={{ sx: { bgcolor: "white" } }}
+					onChange={handleQuantityChange}
+					onFocus={() => {
+						if (isLastRow && addRows) addRows();
+					}}
+				/>
+			</TableCell>
+			<TableCell>{getRowStatusMessage(product)}</TableCell>
+			<TableCell sx={{ display: { xs: "none", sm: "table-cell" } }}>
+				{product?.Price ? formatCurrency(product?.Price) : ""}
+			</TableCell>
+			<TableCell>
+				<Button variant="contained" color="secondary" onClick={handleRowDelete}>
+					<DeleteIcon />
+					<Span sx={{ display: { xs: "none", sm: "inline-flex" } }}>
+						{t("deleteBtn")}
+					</Span>
+				</Button>
+			</TableCell>
+		</TableRow>
+	);
 }