@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

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

@@ -0,0 +1,150 @@
+import DropZone from "@/components/_components/DropZone";
+import { Alert } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Accept, FileRejection } from "react-dropzone/.";
+
+export interface OrderUploadItem {
+  itemId: string;
+  qty: number;
+}
+
+export interface OrderUploadProps {
+  onUploadItems: (data: OrderUploadItem[]) => void;
+}
+
+// TODO: fix type
+// eslint-disable-next-line
+declare const XLSX: any;
+
+export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
+  const [items, setItems] = useState<OrderUploadItem[]>([]);
+  const [errCount, setErrCount] = useState<number>(0);
+  const [files, setFiles] = useState<File[]>();
+  const [fileRejections, setFileRejections] = useState<string[]>([]);
+
+  const accept: Accept = {
+    "text/*": [".xlsx", ".csv", ".xls"],
+  };
+
+  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);
+  }, []);
+
+  const handleReject = (fileRejections: FileRejection[]) => {
+    const rejections = fileRejections.map(
+      (r) => `${r.file.name} {t('QuickOrder.fileRejectionMsg')}`,
+    );
+    setFileRejections(rejections);
+  };
+
+  const resetStates = () => {
+    setItems([]);
+    setErrCount(0);
+    setFileRejections([]);
+  };
+
+  const getFiles = <T extends File>(files: T[]) => {
+    resetStates();
+    setFiles(files);
+  };
+
+  const handleCloseError = () => {
+    setFileRejections([]);
+  };
+
+  useEffect(() => {
+    const handleUploadItems = (items: OrderUploadItem[]) => {
+      onUploadItems(items);
+    };
+
+    const parseFile = (file: File) => {
+      const currItems = 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 (ex) {
+          // Do nothing
+        }
+        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: 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)) {
+          //console.log("Valid!");
+        }
+      });
+    }
+    // TODO: fix dependency
+    //eslint-disable-next-line
+  }, [items, files, errCount]);
+
+  return (
+    <>
+      {fileRejections.length > 0 && (
+        <Alert severity="error" onClose={handleCloseError}>
+          {fileRejections.map((msg, index) => (
+            <div key={index}>{msg}</div>
+          ))}
+        </Alert>
+      )}
+      <DropZone
+        onChange={getFiles}
+        handleReject={handleReject}
+        accept={accept}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,343 @@
+"use client";
+
+import { FlexBox } from "@/components/_components/flex-box/index";
+import {
+  Button,
+  Container,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import QuickOrderRow, { QuickOrderRowData } from "./quick-order-row";
+import { useCallback, useEffect, useState } from "react";
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import useSearchProducts from "@/api-manager/services/product/mutations/search-products";
+import { BorderShadowCard } from "@/components/BoxShadowCard";
+import { H2, Span } from "@/components/_components/Typography";
+import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
+import OrderUpload, { OrderUploadItem } from "./order-upload";
+import { useTranslations } from "next-intl";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
+
+export enum RowError {
+  ProductNotFound,
+  InvalidQuantity,
+  OutOfStock,
+  None,
+}
+
+export default function QuickOrderForm() {
+  const [rows, setRows] = useState<QuickOrderRowData[]>([]);
+  const { mutateAsync: searchProducts } = useSearchProducts();
+  const { mutateAsync: addToCart } = useAddToCart();
+  const { data: cart } = getCart.useData();
+
+  const t = useTranslations("QuickOrder");
+
+  const _generateEmptyRow = (id: number) => {
+    return {
+      id,
+      value: "",
+      quantity: "1",
+      product: null,
+      rowError: RowError.None,
+    };
+  };
+
+  // initialize the table with 3 empty rows
+  const _tableInit = useCallback(() => {
+    const numEmptyRows = 3;
+    const rows: QuickOrderRowData[] = [];
+    for (let i = 0; i < numEmptyRows; i++) {
+      rows.push(_generateEmptyRow(i + 1));
+    }
+    setRows(rows);
+  }, []);
+
+  const _handleRowDelete = (id: number) => {
+    const currentRows = [...rows];
+    const idx = currentRows.findIndex((r) => r.id === id);
+    if (idx > -1) {
+      currentRows.splice(idx, 1);
+      const newRowId = currentRows[currentRows.length - 1].id + 1;
+      if (currentRows.length < 3) {
+        currentRows.push(_generateEmptyRow(newRowId));
+      }
+      setRows(currentRows);
+    }
+  };
+
+  const _handleRowUpdate = async (
+    id: number,
+    value: string,
+    quantity: string,
+  ) => {
+    const currentRows = [...rows];
+    const idx = currentRows.findIndex((row) => row.id === id);
+
+    // if value changes and is beyond the min characters, do a search for the product
+    let product = currentRows[idx].product;
+    let foundProduct = false;
+    if (currentRows[idx].value !== value) {
+      currentRows[idx].value = value;
+      const response = await searchProductByRow(id, value);
+      product = (response && response[0]) || null;
+    }
+    foundProduct = !!product;
+    currentRows[idx] = _generateRowData(
+      product,
+      id,
+      value,
+      foundProduct,
+      quantity,
+    );
+    setRows(currentRows);
+  };
+
+  const searchProductByRow = async (_id: number, searchText: string) => {
+    // call getProductSearchResults with a single entry in an array
+    const minQueryLength = 5;
+    let response;
+    if (searchText.length >= minQueryLength) {
+      response = await getProductSearchResults([searchText]);
+    }
+    return response;
+  };
+
+  const getProductSearchResults = useCallback(
+    async (itemIds: string[]) => {
+      // API call to retrieve matching products from database
+      const results = await searchProducts({ itemIds });
+      return results;
+    },
+    [searchProducts],
+  );
+
+  const searchProductsMultiple = useCallback(
+    async (itemIds: string[]) => {
+      // call getProductSearchResults for all item ids
+      let response;
+      const minQueryLength = 5;
+      const validItemIds = itemIds.filter((it) => it.length >= minQueryLength);
+      if (validItemIds) {
+        response = await getProductSearchResults(validItemIds);
+      }
+      return response;
+    },
+    [getProductSearchResults],
+  );
+
+  const _generateRowData = useCallback(
+    (
+      product: ProductSearchResult | null,
+      rowId: number,
+      searchText: string,
+      foundProduct: boolean,
+      quantity: string,
+    ) => {
+      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;
+      }
+      // TODO: Out of Stock
+      const row: QuickOrderRowData = {
+        ..._generateEmptyRow(rowId),
+        product: foundProduct ? product : null,
+        value: searchText,
+        quantity: quantity.toString(),
+        rowError: rowError,
+      };
+      return row;
+    },
+    [],
+  );
+
+  const _handleAddRows = () => {
+    const currentRows = [...rows];
+
+    const maxRowId = currentRows.reduce(
+      (max, row) => (row.id > max ? row.id : max),
+      0,
+    );
+    const newRowId = maxRowId + 1;
+    currentRows.push(_generateEmptyRow(newRowId));
+    currentRows.push(_generateEmptyRow(newRowId + 1));
+
+    setRows(currentRows);
+  };
+
+  const _generateFile = () => {
+    if (rows.length === 0) return;
+
+    const header = "SKU,Quantity\n";
+
+    // parse data into CSV format
+    const csvContent =
+      "data:text/csv;charset=utf-8," +
+      header +
+      rows.map(({ value, quantity }) => `${value},${quantity}`).join("\n");
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", "quick_order.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const _generateRow = (row: QuickOrderRowData, isLast: boolean) => {
+    return (
+      <QuickOrderRow
+        key={row.id}
+        id={row.id}
+        value={row.value}
+        quantity={row.quantity}
+        product={row.product}
+        onRowDelete={_handleRowDelete}
+        onRowChange={_handleRowUpdate}
+        onAddRows={_handleAddRows}
+        isLastRow={isLast}
+        rowError={row.rowError}
+      />
+    );
+  };
+
+  const handleAddToCart = async () => {
+    // add all rows that have a RowError of type None with requested quantities
+    if (!cart) return;
+
+    const products = rows
+      .filter((row) => row.product && row.rowError === RowError.None)
+      .map((productRow) => ({
+        ProductId: Number(productRow.product?.RecordId),
+        Quantity: Number(productRow.quantity),
+      }));
+    if (products.length > 0) {
+      await addToCart({
+        cartId: cart.Id,
+        version: cart.Version,
+        cartLine: products,
+      });
+      _tableInit();
+    }
+  };
+
+  const handleUploadedItems = useCallback(
+    async (items: OrderUploadItem[]) => {
+      const itemIds = items.map((it) => it.itemId.toString());
+      const response = await searchProductsMultiple(itemIds);
+
+      // add items to table
+      let currRows = [...rows];
+      const idx = currRows.findIndex((r) => !r.value);
+      if (idx > -1) {
+        currRows = currRows.slice(0, idx);
+      }
+      let rowId =
+        currRows.reduce((max, row) => (row.id > max ? row.id : max), 0) + 1;
+
+      items.forEach((it) => {
+        const product = response?.find((r) => {
+          const itemId = it.itemId.toString().toLowerCase();
+          const searchText = r.ItemId?.toLowerCase();
+          return itemId === searchText;
+        });
+        const qty = it.qty || 1;
+        const rowData = _generateRowData(
+          product || null,
+          rowId++,
+          it.itemId,
+          !!product,
+          qty.toString(),
+        );
+        currRows.push(rowData);
+      });
+      while (currRows.length < 3) {
+        currRows.push({ ..._generateEmptyRow(rowId++) });
+      }
+      setRows(currRows);
+    },
+    [_generateRowData, rows, searchProductsMultiple],
+  );
+
+  useEffect(() => {
+    _tableInit();
+  }, [_tableInit]);
+
+  return (
+    <Container>
+      <BorderShadowCard>
+        <FlexBox justifyContent="left" px={3}>
+          <H2>{t("title")}</H2>
+        </FlexBox>
+        <FlexBox justifyContent="left" px={3}>
+          <Span>{t("entryBySku")}</Span>
+        </FlexBox>
+      </BorderShadowCard>
+      <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((r, i) => _generateRow(r, i === rows.length - 1))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </BorderShadowCard>
+      <BorderShadowCard>
+        <FlexBox sx={{ justifyContent: "center", gap: { xs: 2, sm: 20 } }}>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={handleAddToCart}
+          >
+            {t("addToCartBtn")}
+          </Button>
+          <Button variant="contained" color="secondary" onClick={_tableInit}>
+            {t("resetFormBtn")}
+          </Button>
+          <Button variant="contained" color="secondary" onClick={_generateFile}>
+            {t("downloadFileBtn")}
+          </Button>
+        </FlexBox>
+      </BorderShadowCard>
+      <BorderShadowCard>
+        <FlexBox justifyContent="center" gap={2} flexDirection="column" px={2}>
+          <OrderUpload onUploadItems={handleUploadedItems} />
+        </FlexBox>
+      </BorderShadowCard>
+    </Container>
+  );
+}

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

@@ -0,0 +1,144 @@
+"use client";
+
+import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import {
+  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 "./quick-order-form";
+import { Span } from "@/components/_components/Typography";
+import { useTranslations } from "next-intl";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import _ from "lodash";
+
+export interface QuickOrderRowData {
+  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;
+}
+
+export default function QuickOrderRow({
+  id,
+  value,
+  quantity,
+  product,
+  onRowDelete,
+  onAddRows,
+  onRowChange,
+  isLastRow,
+  rowError,
+}: QuickOrderRowProps) {
+  const theme = useTheme();
+  const t = useTranslations("QuickOrder");
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const [inputValue, setInputValue] = useState<string>(value || "");
+
+  useEffect(() => {
+    setInputValue(value || "");
+  }, [value]);
+
+  const debouncedOnChange = useMemo(
+    () =>
+      _.debounce((val) => {
+        onRowChange(id, val, quantity);
+      }, 500),
+    [onRowChange, id, quantity],
+  );
+
+  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 addRows = () => {
+    onAddRows();
+  };
+
+  const handleRowDelete = () => onRowDelete(id);
+
+  const getRowStatusMessage = (product: ProductSearchResult | null) => {
+    switch (rowError) {
+      case RowError.InvalidQuantity:
+        return t("invalidQuantity");
+      case RowError.ProductNotFound:
+        return t("productNotFound");
+      case RowError.OutOfStock:
+        return t("OOS");
+    }
+    if (product) {
+      return product.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>
+  );
+}

package/tsconfig.json

@@ -21,6 +21,7 @@
       "@/components/*": ["src/components/*"],
       "@/schemas/*": ["src/api-manager/schemas/*"],
       "@/services/*": ["src/api-manager/services/*"],
+      "@/hooks/*": ["src/hooks/*"],
       "@config": ["src/config"]
     }
   }