@evenicanpm/storefront-core 1.0.4 → 1.0.5

package/src/pages-v2/confirmation/ordered-products.tsx

@@ -1,115 +1,147 @@
-import useCurrencyFormatter from "@/lib/currency-formatter";
-import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
+"use client";
+
+import React, { ReactNode, createContext, useContext } from "react";
 import { Card, Avatar, Box } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import { SalesLine } from "@/api-manager/schemas/order.schema";
 import {
   FlexBetween,
   FlexBox,
-} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import {
   H6,
   Paragraph,
   Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { useFormatter, useTranslations } from "next-intl";
-import React from "react";
-import { Fragment } from "react";
-
-type Props = {
-  salesLines: SalesLine[];
-  orderId: string;
-  transactionDate: Date;
-  receiptEmail: string;
+import { useTranslations, useFormatter } from "next-intl";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
+import { SalesLine, SalesOrder } from "@/api-manager/schemas/order.schema";
+
+const OrderedProductsContext = createContext<SalesOrder | null>(null);
+
+type Props = { order: SalesOrder; children?: ReactNode };
+
+export const OrderedProducts = ({ order, children }: Props) => {
+  return (
+    <OrderedProductsContext.Provider value={order}>
+      <Card sx={{ p: 0, mb: "30px" }}>{children}</Card>
+    </OrderedProductsContext.Provider>
+  );
 };
 
-export default function OrderedProducts({
-  salesLines,
-  orderId,
-  transactionDate,
-  receiptEmail,
-}: Props) {
+OrderedProducts.Header = () => {
+  const ctx = useContext(OrderedProductsContext);
+  if (!ctx) return null;
   const t = useTranslations("Confirmation");
+  const order = ctx;
   const { dateTime } = useFormatter();
+
+  return (
+    <FlexBetween
+      px={3}
+      py={2}
+      flexWrap="wrap"
+      borderBottom="1px solid"
+      borderColor="divider"
+    >
+      <FlexBox gap={1} alignItems="center">
+        <Paragraph color="grey.600">{t("orderNumber")}</Paragraph>
+        <Paragraph>{order.ChannelReferenceId}</Paragraph>
+      </FlexBox>
+      {order.TransactionDate && (
+        <FlexBox gap={1} alignItems="center">
+          <Paragraph color="grey.600">{t("orderDate")}</Paragraph>
+          <Paragraph>
+            {dateTime(new Date(order.TransactionDate), { dateStyle: "medium" })}
+          </Paragraph>
+        </FlexBox>
+      )}
+      <FlexBox gap={1} alignItems="center">
+        <Paragraph color="grey.600">{t("orderEmail")}</Paragraph>
+        <Paragraph>{order.ReceiptEmail}</Paragraph>
+      </FlexBox>
+    </FlexBetween>
+  );
+};
+
+OrderedProducts.List = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Grid container spacing={2} alignItems="center" padding="15px 5px">
+      {children}
+    </Grid>
+  );
+};
+
+// Line: single product row
+type LineProps = { line: SalesLine };
+OrderedProducts.Row = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+OrderedProducts.ColumnOne = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Grid size={{ xs: 12, sm: 6 }}>
+      <FlexBox gap={2.5} alignItems="center">
+        {children}
+      </FlexBox>
+    </Grid>
+  );
+};
+
+OrderedProducts.Image = ({ src, alt }: { src?: string; alt?: string }) => (
+  <Avatar alt={alt} src={src} sx={{ mx: 1, width: 75, height: 75 }} />
+);
+
+OrderedProducts.Info = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+OrderedProducts.Title = ({ line }: LineProps) => {
   const { formatCurrency } = useCurrencyFormatter();
+  return (
+    <>
+      <H6>{line.Product?.Name}</H6>
+      <Paragraph color="grey.600">
+        {formatCurrency(line.Price ?? 0)} x {line.Quantity}
+      </Paragraph>
+    </>
+  );
+};
 
-  const checkValidDate = (date: Date | string) => {
-    return new Date(date) instanceof Date;
-  };
+OrderedProducts.Comment = ({ line }: LineProps) => {
+  const t = useTranslations("Confirmation");
+  if (!line.Comment) return null;
+  return (
+    <Paragraph mt={1}>
+      <H6 sx={{ display: "inline" }}>{t("commentLabel")}: </H6>
+      {line.Comment}
+    </Paragraph>
+  );
+};
 
-  const renderItem = (title: string, value: string) => (
-    <FlexBox gap={1} alignItems="center">
-      <Paragraph color="grey.600">{title}</Paragraph>
-      <Paragraph>{value}</Paragraph>
-    </FlexBox>
+OrderedProducts.Dimensions = ({ line }: LineProps) => {
+  if (!line.Product?.Dimensions?.length) return <Box />;
+  return (
+    <Grid size={{ xs: 8, sm: 4 }}>
+      {line.Product.Dimensions.map((dim, i) => (
+        <Paragraph key={i} paddingLeft="15px">
+          <Span>{ProductDimensionType[dim.DimensionTypeValue || 0]}:</Span>
+          <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
+        </Paragraph>
+      ))}
+    </Grid>
   );
+};
+
+OrderedProducts.Total = ({ line }: LineProps) => {
+  const { formatCurrency } = useCurrencyFormatter();
   return (
-    <Card sx={{ p: 0, mb: "30px" }}>
-      <FlexBetween
-        px={3}
-        py={2}
-        flexWrap="wrap"
-        borderBottom="1px solid"
-        borderColor="divider"
-      >
-        {renderItem(t("orderNumber"), orderId)}
-        {checkValidDate(transactionDate)
-          ? renderItem(
-              t("orderDate"),
-              dateTime(new Date(transactionDate), { dateStyle: "medium" }),
-            )
-          : null}
-        {renderItem(t("orderEmail"), receiptEmail)}
-      </FlexBetween>
-
-      <Grid container spacing={2} alignItems={"center"} padding={"15px 5px"}>
-        {salesLines.map((item, ind) => (
-          <Fragment key={ind}>
-            <Grid size={{ xs: 12, sm: 6 }}>
-              <FlexBox gap={2.5} alignItems="center">
-                <Avatar
-                  alt={item.Product?.Name}
-                  src={item.Product?.PrimaryImageUrl}
-                  sx={{ mx: 1, width: 75, height: 75 }}
-                />
-                <div>
-                  <H6>{item.Product?.Name}</H6>
-                  <Paragraph color="grey.600">
-                    {formatCurrency(item.Price ?? 0)} x {item.Quantity}
-                  </Paragraph>
-                  {item.Comment ? (
-                    <Paragraph mt={1}>
-                      <H6 sx={{ display: "inline" }}>{t("commentLabel")}: </H6>
-                      {item.Comment}
-                    </Paragraph>
-                  ) : null}
-                </div>
-              </FlexBox>
-            </Grid>
-
-            <Grid size={{ xs: 8, sm: 4 }}>
-              {item.Product?.Dimensions?.length ? (
-                item.Product.Dimensions.map((dim, dimInd) => (
-                  <Paragraph key={dimInd} paddingLeft={"15px"}>
-                    <Span>
-                      {ProductDimensionType[dim.DimensionTypeValue || 0]}:
-                    </Span>
-                    <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
-                  </Paragraph>
-                ))
-              ) : (
-                <Box />
-              )}
-            </Grid>
-
-            <Grid size={{ xs: 4, sm: 2 }}>
-              <Box justifySelf={"end"} paddingRight={"15px"}>
-                <Paragraph>{formatCurrency(item.TotalAmount ?? 0)}</Paragraph>
-              </Box>
-            </Grid>
-          </Fragment>
-        ))}
-      </Grid>
-    </Card>
+    <Grid size={{ xs: 4, sm: 2 }}>
+      <Box justifySelf="end" paddingRight="15px">
+        <Paragraph>{formatCurrency(line.TotalAmount ?? 0)}</Paragraph>
+      </Box>
+    </Grid>
   );
-}
+};
+
+export default OrderedProducts;

package/src/pages-v2/product-details/bopis/find-in-store-button.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@mui/material";
 import React from "react";
-import FindInStoreModal from "./find-in-store-modal";
-import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import FindInStoreModal from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/find-in-store-modal";
+import { AddToCartBopisInput } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import { useTranslations } from "next-intl";
 
 type Props = {

package/src/pages-v2/product-details/bopis/find-in-store-modal.tsx

@@ -9,18 +9,18 @@ import {
 } from "@mui/material";
 import { Box } from "@mui/system";
 import React from "react";
-import SearchHeader from "./search-header";
-import ShopCard from "./store-card";
+import SearchHeader from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/search-header";
+import ShopCard from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card";
 import {
   DeliveryOption,
   ProductWarehouseInventoryAvailability,
   QueryResultSettings,
   SearchArea,
 } from "@msdyn365-commerce/retail-proxy";
-import PickupOptionSelect from "./pickup-option-select";
+import PickupOptionSelect from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/pickup-option-select";
 import { geolocate } from "@/lib/map-helper";
 import getStores from "@/api-manager/services/organization/queries/get-stores";
-import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import { AddToCartBopisInput } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
 import { InventorySearchCriteriaInput } from "@/api-manager/schemas/product.schema";
 import { OrgUnitLocationReturnType } from "@/api-manager/schemas/organization.schema";

package/src/pages-v2/product-details/bopis/pickup-option-select.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
 } from "@mui/material";
 import React from "react";
-import { AddToCartBopisInput } from "../../../hooks/use-cart";
+import { AddToCartBopisInput } from "@evenicanpm/storefront-core/src/hooks/use-cart";
 import { useTranslations } from "next-intl";
 
 type Props = {

package/src/pages-v2/product-details/bopis/store-card/index.ts

@@ -1 +1 @@
-export { default } from "./shop-card";
+export { default } from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card/shop-card";

package/src/pages-v2/product-details/bopis/store-card/shop-card.tsx

@@ -13,15 +13,15 @@ import {
   FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 // STYLED COMPONENT
-import { ContentWrapper } from "./styles";
+import { ContentWrapper } from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card/styles";
 import {
   ProductWarehouseInventoryAvailability,
   StoreHours,
 } from "@msdyn365-commerce/retail-proxy";
 import { buildStoreHours, IHoursDisplayInfo } from "@/lib/store-hours-helper";
 import { Box } from "@mui/system";
-import { convertSecondsToTime } from "./utils/convertSecondsToTime";
-import { getDaysResources } from "./utils/getDaysResources";
+import { convertSecondsToTime } from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card/utils/convertSecondsToTime";
+import { getDaysResources } from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/store-card/utils/getDaysResources";
 
 type Props = {
   name: string;

package/src/pages-v2/product-details/frequently-bought.tsx

@@ -15,7 +15,7 @@ import {
   FlexRowCenter,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 // LOCAL CUSTOM COMPONENT
-import FrequentlyProductCard from "./frequently-product-card";
+import FrequentlyProductCard from "@evenicanpm/storefront-core/src/pages-v2/product-details/frequently-product-card";
 // CUSTOM UTILS LIBRARY FUNCTION
 import { currency } from "@/lib/lib";
 // CUSTOM DATA MODEL

package/src/pages-v2/product-details/product-filter-card.tsx

@@ -9,7 +9,7 @@ import Collapse from "@mui/material/Collapse";
 import TextField from "@mui/material/TextField";
 import FormGroup from "@mui/material/FormGroup";
 // LOCAL CUSTOM COMPONENTS
-import CheckboxLabel from "./checkbox-label";
+import CheckboxLabel from "@evenicanpm/storefront-core/src/pages-v2/product-details/checkbox-label";
 // GLOBAL CUSTOM COMPONENTS
 import {
   FlexBetween,
@@ -27,7 +27,7 @@ import {
   ProductFilterKeys,
   ProductFilterValues,
   ProductFilters,
-} from "./types";
+} from "@evenicanpm/storefront-core/src/pages-v2/product-details/types";
 import { Slider } from "@mui/material";
 
 // FILTER OPTIONS

package/src/pages-v2/product-details/product-intro/compound/context.ts

@@ -1,10 +1,7 @@
 import { createContext } from "react";
 import { ProductDetails } from "@/api-manager/schemas/product.schema";
 import { SelectedDimensions } from "@evenicanpm/storefront-core/src/hooks/use-variants";
-import {
-  ProductWarehouseInventoryAvailability,
-  ProductWarehouseInventoryInformation,
-} from "@msdyn365-commerce/retail-proxy";
+import { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
 
 export interface ProductIntroContext {
   /** The current master product of the PDP */

package/src/pages-v2/product-details/product-intro/compound/product-info.tsx

@@ -27,14 +27,17 @@ import useCart, {
 
 // LOCAL COMPONENTS
 import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
-import FindInStoreButton from "../../bopis/find-in-store-button";
-import { ProductIntroContext, ProductInfoContext } from "./context";
+import FindInStoreButton from "@evenicanpm/storefront-core/src/pages-v2/product-details/bopis/find-in-store-button";
+import {
+  ProductIntroContext,
+  ProductInfoContext,
+} from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/context";
 
 import {
   getInventoryLabel,
   checkProductOOS,
   buildInventorySearchCriteria,
-} from "../utils";
+} from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/utils";
 
 export interface Props {
   children: React.ReactNode;

package/src/pages-v2/product-details/product-intro/compound/product-intro-images.tsx

@@ -1,14 +1,17 @@
 "use client";
 import Grid from "@mui/material/Grid2";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 // GLOBAL CUSTOM COMPONENTS
 import {
   FlexBox,
   FlexRowCenter,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-import { ProductImagesContext, ProductIntroContext } from "./context";
-import ThumbnailWithSkeleton from "./thumbnail-with-skeleton";
+import {
+  ProductImagesContext,
+  ProductIntroContext,
+} from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/context";
+import ThumbnailWithSkeleton from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/thumbnail-with-skeleton";
 
 type Props = {
   children: React.ReactNode;

package/src/pages-v2/product-details/product-intro/compound/product-intro.tsx

@@ -3,10 +3,10 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 import { ProductDetails } from "@/api-manager/schemas/product.schema";
-import useVariants from "../../../../hooks/use-variants";
-import ProductImages from "./product-intro-images";
-import ProductInfo from "./product-info";
-import { ProductIntroContext } from "./context";
+import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
+import ProductImages from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/product-intro-images";
+import ProductInfo from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/product-info";
+import { ProductIntroContext } from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-intro/compound/context";
 
 /**
  * Master product data comes in as prop, selected variant details are called

package/src/pages-v2/product-details/product-intro/utils.ts

@@ -1,4 +1,3 @@
-import { ProductDetails } from "@/api-manager/schemas/product.schema";
 import { ProductWarehouseInventoryInformation } from "@msdyn365-commerce/retail-proxy";
 
 export const getInventoryLabel = (

package/src/pages-v2/product-details/product-review.tsx

@@ -7,10 +7,13 @@ import TextField from "@mui/material/TextField";
 import * as yup from "yup";
 import { useFormik } from "formik";
 // Local CUSTOM COMPONENT
-import ProductComment from "./product-comment";
+import ProductComment from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-comment";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { H2, H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import {
+  H2,
+  H5,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
 
 export default function ProductReview() {
   const initialValues = {

package/src/pages-v2/product-details/product-tabs.tsx

@@ -7,7 +7,7 @@ import Tabs from "@mui/material/Tabs";
 import styled from "@mui/material/styles/styled";
 
 // LOCAL CUSTOM COMPONENTS
-import ProductDescription from "./product-description";
+import ProductDescription from "@evenicanpm/storefront-core/src/pages-v2/product-details/product-description";
 import { AttributeValue } from "@msdyn365-commerce/retail-proxy";
 
 // STYLED COMPONENT

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} />
     </>
   );
 }