@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -1,150 +0,0 @@
-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

@@ -1,343 +0,0 @@
-"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

@@ -1,144 +0,0 @@
-"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/src/pages-v2/quickorder/index.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import { Container } from "@mui/material";
-import QuickOrderProvider from "./provider";
-import QuickOrderHeader from "./quick-order-header";
-import QuickOrderTable from "./quick-order-table";
-import QuickOrderActions from "./quick-order-actions";
-import QuickOrderUpload from "./quick-order-upload";
-
-/**
- * <QuickOrderForm>
- *   <QuickOrderForm.Header />
- *   <QuickOrderForm.Table />
- *   <QuickOrderForm.Actions />
- *   <QuickOrderForm.Upload />
- * </QuickOrderForm>
- */
-const QuickOrderForm = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <Container>
-      <QuickOrderProvider>{children}</QuickOrderProvider>
-    </Container>
-  );
-};
-
-QuickOrderForm.Header = QuickOrderHeader;
-QuickOrderForm.Table = QuickOrderTable;
-QuickOrderForm.Actions = QuickOrderActions;
-QuickOrderForm.Upload = QuickOrderUpload;
-
-export default QuickOrderForm;

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

@@ -1,30 +0,0 @@
-"use client";
-
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
-import { Button } from "@mui/material";
-import { useQuickOrder } from "./context";
-import { useTranslations } from "next-intl";
-
-const QuickOrderActions = () => {
-  const { handleAddToCart, resetForm, generateFile } = useQuickOrder();
-  const t = useTranslations("QuickOrder");
-
-  return (
-    <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={resetForm}>
-          {t("resetFormBtn")}
-        </Button>
-        <Button variant="contained" color="secondary" onClick={generateFile}>
-          {t("downloadFileBtn")}
-        </Button>
-      </FlexBox>
-    </BorderShadowCard>
-  );
-};
-
-export default QuickOrderActions;