@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/pages-v2/product-list/quick-view-dialog-content.tsx

@@ -21,7 +21,7 @@ import useCart, {
 } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import useCurrencyFormatter from "@/lib/currency-formatter";
 import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/product-quantity-buttons";
+import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
 import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
 import {
   InventorySearchCriteriaInput,
@@ -49,11 +49,11 @@ export default function QuickViewContent({
 }: Props) {
   const [showDimensionError, setShowDimensionError] = useState(false);
   const {
-    selectVariantId,
+    selectedVariant,
     selectDimensions,
     handleChangeVariant,
     allDimensionsSelected,
-  } = useVariants({ product: productDetails });
+  } = useVariants(productDetails);
   const t = useTranslations("ProductList.QuickView");
   const { formatCurrency } = useCurrencyFormatter();
   const { handleCartAmountChange, handleAddToCart, loading } = useCart(
@@ -61,35 +61,42 @@ export default function QuickViewContent({
       ? {
           cart,
           recordId: product.RecordId,
-          selectVariantId: selectVariantId,
+          selectVariantId: selectedVariant?.RecordId,
         }
       : {
           cart: { Id: "", CartLines: [] },
           recordId: product.RecordId,
-          selectVariantId: selectVariantId,
+          selectVariantId: selectedVariant?.RecordId,
         },
   );
 
   const searchCriteria = useMemo<InventorySearchCriteriaInput>(
     () => ({
-      allDimensionsSelected: allDimensionsSelected(selectDimensions),
       searchCriteria: {
         defaultWarehouseOnly: true,
-        productIds: [selectVariantId || product.RecordId],
+        productIds: [selectedVariant?.RecordId || product.RecordId],
       },
     }),
-    [allDimensionsSelected, selectDimensions, product, selectVariantId],
+    [
+      allDimensionsSelected,
+      selectDimensions,
+      product,
+      selectedVariant?.RecordId,
+    ],
   );
 
   const { data: shippingInventoryData, isLoading: inventoryLoading } =
     getProductAvailability.useData(searchCriteria);
 
   const currentCartLine = cart?.CartLines?.find((item) => {
-    return item?.ProductId === (Number(selectVariantId) || product.RecordId);
+    return (
+      item?.ProductId ===
+      (Number(selectedVariant?.RecordId) || product.RecordId)
+    );
   });
 
   const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
-    if (!allDimensionsSelected(selectDimensions)) {
+    if (!allDimensionsSelected) {
       setShowDimensionError(true);
       return;
     }

package/src/pages-v2/quickorder/context.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { QuickOrderRowData } from "./quick-order-row";
+
+export enum RowError {
+  ProductNotFound,
+  InvalidQuantity,
+  OutOfStock,
+  None,
+}
+
+export type QuickOrderContextType = {
+  rows: QuickOrderRowData[];
+  cart: any;
+  handleRowUpdate: (
+    id: number,
+    value: string,
+    quantity: string
+  ) => Promise<void>;
+  handleRowDelete: (id: number) => void;
+  handleAddRows: () => void;
+  handleAddToCart: () => Promise<void>;
+  handleUploadedItems: (items: any[]) => Promise<void>;
+  resetForm: () => void;
+  generateFile: () => void;
+};
+
+export const QuickOrderContext = createContext<QuickOrderContextType | null>(
+  null
+);
+
+export const useQuickOrder = () => {
+  const ctx = useContext(QuickOrderContext);
+  if (!ctx) {
+    throw new Error("useQuickOrder must be used within QuickOrderProvider");
+  }
+  return ctx;
+};

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

@@ -0,0 +1,31 @@
+"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/order-upload.tsx

@@ -1,7 +1,10 @@
+"use client";
+
 import DropZone from "@evenicanpm/storefront-core/src/components-v2/DropZone";
 import { Alert } from "@mui/material";
 import { useEffect, useState } from "react";
-import { Accept, FileRejection } from "react-dropzone/.";
+import { Accept, FileRejection } from "react-dropzone";
+import { useTranslations } from "next-intl";
 
 export interface OrderUploadItem {
   itemId: string;
@@ -12,11 +15,11 @@ export interface OrderUploadProps {
   onUploadItems: (data: OrderUploadItem[]) => void;
 }
 
-// TODO: fix type
-// eslint-disable-next-line
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const XLSX: any;
 
 export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
+  const t = useTranslations("QuickOrder");
   const [items, setItems] = useState<OrderUploadItem[]>([]);
   const [errCount, setErrCount] = useState<number>(0);
   const [files, setFiles] = useState<File[]>();
@@ -34,11 +37,11 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
     document.head.appendChild(script);
   }, []);
 
-  const handleReject = (fileRejections: FileRejection[]) => {
-    const rejections = fileRejections.map(
-      (r) => `${r.file.name} {t('QuickOrder.fileRejectionMsg')}`,
+  const handleReject = (rejections: FileRejection[]) => {
+    const msgs = rejections.map(
+      (r) => `${r.file.name} ${t("fileRejectionMsg")}`
     );
-    setFileRejections(rejections);
+    setFileRejections(msgs);
   };
 
   const resetStates = () => {
@@ -52,9 +55,7 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
     setFiles(files);
   };
 
-  const handleCloseError = () => {
-    setFileRejections([]);
-  };
+  const handleCloseError = () => setFileRejections([]);
 
   useEffect(() => {
     const handleUploadItems = (items: OrderUploadItem[]) => {
@@ -81,16 +82,13 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
                 const qty = ws[`B${i}`]?.v;
                 const itemId = ws[`A${i}`]?.v;
                 if (itemId) {
-                  data.push({
-                    itemId,
-                    qty,
-                  });
+                  data.push({ itemId, qty });
                 }
               }
             }
           }
-        } catch (ex) {
-          // Do nothing
+        } catch {
+          // noop
         }
         if (data.length === 0) {
           data = XLSX.utils.sheet_to_json(ws, {
@@ -102,8 +100,8 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
             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 });
+          if (d.itemId && d.qty !== undefined && d.qty !== null) {
+            currItems.push({ qty: qty as number, itemId: d.itemId });
           } else {
             currErrCount++;
           }
@@ -123,12 +121,11 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
     if (files) {
       files.forEach((file) => {
         if (isValidFile(file)) {
-          //console.log("Valid!");
+          // valid
         }
       });
     }
-    // TODO: fix dependency
-    //eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items, files, errCount]);
 
   return (
@@ -140,11 +137,7 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
           ))}
         </Alert>
       )}
-      <DropZone
-        onChange={getFiles}
-        handleReject={handleReject}
-        accept={accept}
-      />
+      <DropZone onChange={getFiles} handleReject={handleReject} accept={accept} />
     </>
   );
 }

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

@@ -0,0 +1,187 @@
+"use client";
+
+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";
+
+export default function QuickOrderProvider({
+  children,
+}: {
+  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>
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { BorderShadowCard } from "@/components/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;

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

@@ -0,0 +1,22 @@
+"use client";
+
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { BorderShadowCard } from "@/components/BoxShadowCard";
+import { H2, Span } from "@/components/_components/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>
+  );
+};
+
+export default QuickOrderHeader;

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

@@ -10,7 +10,7 @@ import {
 } from "@mui/material";
 import React, { useEffect, useMemo, useState } from "react";
 import DeleteIcon from "@mui/icons-material/Delete";
-import { RowError } from "./quick-order-form";
+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";
@@ -59,10 +59,10 @@ export default function QuickOrderRow({
 
   const debouncedOnChange = useMemo(
     () =>
-      _.debounce((val) => {
+      _.debounce((val: string) => {
         onRowChange(id, val, quantity);
       }, 500),
-    [onRowChange, id, quantity],
+    [onRowChange, id, quantity]
   );
 
   const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -74,13 +74,10 @@ export default function QuickOrderRow({
     onRowChange(id, value, e.target.value);
   };
 
-  const addRows = () => {
-    onAddRows();
-  };
-
+  const addRows = () => onAddRows();
   const handleRowDelete = () => onRowDelete(id);
 
-  const getRowStatusMessage = (product: ProductSearchResult | null) => {
+  const getRowStatusMessage = (p: ProductSearchResult | null) => {
     switch (rowError) {
       case RowError.InvalidQuantity:
         return t("invalidQuantity");
@@ -89,9 +86,7 @@ export default function QuickOrderRow({
       case RowError.OutOfStock:
         return t("OOS");
     }
-    if (product) {
-      return product.Name;
-    }
+    if (p) return p.Name;
     return null;
   };
 
@@ -109,9 +104,7 @@ export default function QuickOrderRow({
           InputProps={{ sx: { bgcolor: "white" } }}
           onChange={handleValueChange}
           onFocus={() => {
-            if (isLastRow && addRows) {
-              addRows();
-            }
+            if (isLastRow && addRows) addRows();
           }}
         />
       </TableCell>
@@ -121,9 +114,7 @@ export default function QuickOrderRow({
           InputProps={{ sx: { bgcolor: "white" } }}
           onChange={handleQuantityChange}
           onFocus={() => {
-            if (isLastRow && addRows) {
-              addRows();
-            }
+            if (isLastRow && addRows) addRows();
           }}
         />
       </TableCell>

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

@@ -0,0 +1,63 @@
+"use client";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import { BorderShadowCard } from "@/components/BoxShadowCard";
+import QuickOrderRow from "./quick-order-row";
+import { useQuickOrder } from "./context";
+import { useTranslations } from "next-intl";
+
+const QuickOrderTable = () => {
+  const { rows, handleRowUpdate, handleRowDelete, handleAddRows } = useQuickOrder();
+  const t = useTranslations("QuickOrder");
+
+  return (
+    <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((row, idx) => (
+              <QuickOrderRow
+                key={row.id}
+                id={row.id}
+                value={row.value}
+                quantity={row.quantity}
+                product={row.product}
+                onRowDelete={handleRowDelete}
+                onRowChange={handleRowUpdate}
+                onAddRows={handleAddRows}
+                isLastRow={idx === rows.length - 1}
+                rowError={row.rowError}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </BorderShadowCard>
+  );
+};
+
+export default QuickOrderTable;

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

@@ -0,0 +1,20 @@
+"use client";
+
+import { FlexBox } from "@/components/_components/flex-box/index";
+import { BorderShadowCard } from "@/components/BoxShadowCard";
+import OrderUpload from "./order-upload";
+import { useQuickOrder } from "./context";
+
+const QuickOrderUpload = () => {
+  const { handleUploadedItems } = useQuickOrder();
+
+  return (
+    <BorderShadowCard>
+      <FlexBox justifyContent="center" gap={2} flexDirection="column" px={2}>
+        <OrderUpload onUploadItems={handleUploadedItems} />
+      </FlexBox>
+    </BorderShadowCard>
+  );
+};
+
+export default QuickOrderUpload;

package/src/providers/nav-provider/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { CmsNavItem } from "@/cms/interfaces/navigation";
 import React, { createContext, PropsWithChildren, useState } from "react";
-import { createLink } from "./utils/createLink";
+import { createLink } from "@evenicanpm/storefront-core/src/providers/nav-provider/utils/createLink";
 import { useTranslations } from "next-intl";
 import { CategoryHierarchy } from "@/lib/category-helpers";
 

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

@@ -1,6 +1,6 @@
 import { Alert, Snackbar, SnackbarCloseReason } from "@mui/material";
 import React, { createContext } from "react";
-import { useNotification } from "./use-notification";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { DatasourceApis } from "@/api-manager/types/Datasource";
 
 const DEFAULT_ALERT_TIME = 5000;

package/src/providers/notifications/use-notification.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { NotificationContext } from "./notification-context";
+import { NotificationContext } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
 
 export const useNotification = () => {
   const context = React.useContext(NotificationContext);