@evenicanpm/storefront-core 1.0.3 → 1.0.5

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

@@ -1,346 +0,0 @@
-"use client";
-
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/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 "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
-import {
-  H2,
-  Span,
-} from "@evenicanpm/storefront-core/src/components-v2/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>
-  );
-}