@evenicanpm/storefront-core 1.0.4 → 1.0.5

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

package/tsconfig.json

@@ -22,7 +22,8 @@
       "@/schemas/*": ["src/api-manager/schemas/*"],
       "@/services/*": ["src/api-manager/services/*"],
       "@/hooks/*": ["src/hooks/*"],
-      "@config": ["src/config"]
+      "@config": ["src/config"],
+      "@messages/*": ["../../../../storefront/messages/*"]
     }
   },
   "include": ["src"]

package/src/api-manager/lib/get-graphql-client.test.ts

@@ -1,106 +0,0 @@
-//import { describe, it, expect, vi, beforeEach } from "vitest";
-import { getServerSession } from "next-auth/next";
-import { cookies } from "next/headers";
-import getGraphQLClient from "./get-graphql-client";
-
-// TODO: FIX THESE TESTS
-//
-//const mockSetHeaders = vi.fn();
-// const mockGraphQLClientInstance = { setHeaders: mockSetHeaders };
-
-/*
-vi.mock("graphql-request", () => ({
-  GraphQLClient: vi.fn(() => mockGraphQLClientInstance),
-}));
-
-vi.mock("@/api-manager/datasources/e4/graphqlRequestSdk", () => ({
-  getSdk: vi.fn(() => "mockSDK"),
-}));
-
-vi.mock("next-auth/next", () => ({
-  getServerSession: vi.fn(),
-}));
-
-vi.mock("@a/api/auth/[...nextauth]/auth-options", () => ({
-  default: {},
-}));
-
-vi.mock("next/headers", () => ({
-  cookies: vi.fn(),
-}));
-
-describe("getGraphQLClient", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("initializes GraphQL client without authentication", async () => {
-    (cookies as unknown as vi.Mock).mockReturnValue({
-      get: vi.fn().mockReturnValue(null),
-    });
-
-    const sdk = await getGraphQLClient();
-
-    expect(mockSetHeaders).toHaveBeenCalledWith({
-      "client-name": "storefront",
-      "client-version": "0.1.0",
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    });
-    expect(sdk).toBe("mockSDK");
-  });
-
-  it("includes storefront session cookie if available", async () => {
-    (cookies as unknown as vi.Mock).mockReturnValue({
-      get: vi.fn().mockReturnValue({ value: "mockSessionCookie" }),
-    });
-
-    const sdk = await getGraphQLClient();
-
-    expect(mockSetHeaders).toHaveBeenCalledWith(
-      expect.objectContaining({
-        Cookie: "storefront=mockSessionCookie",
-      }),
-    );
-    expect(sdk).toBe("mockSDK");
-  });
-
-  it("includes authorization token when withAuth is true", async () => {
-    (cookies as unknown as vi.Mock).mockReturnValue({
-      get: vi.fn().mockReturnValue(null),
-    });
-
-    (getServerSession as vi.Mock).mockResolvedValue({
-      accessToken: "mockAccessToken",
-    });
-
-    const sdk = await getGraphQLClient(true);
-
-    expect(getServerSession).toHaveBeenCalled();
-    expect(mockSetHeaders).toHaveBeenCalledWith(
-      expect.objectContaining({
-        Authorization: "Bearer mockAccessToken",
-      }),
-    );
-    expect(sdk).toBe("mockSDK");
-  });
-
-  it("does not include authorization token if session is missing", async () => {
-    (cookies as unknown as vi.Mock).mockReturnValue({
-      get: vi.fn().mockReturnValue(null),
-    });
-
-    (getServerSession as vi.Mock).mockResolvedValue(null);
-
-    const sdk = await getGraphQLClient(true);
-
-    expect(getServerSession).toHaveBeenCalled();
-    expect(mockSetHeaders).not.toHaveBeenCalledWith(
-      expect.objectContaining({
-        Authorization: expect.any(String),
-      }),
-    );
-    expect(sdk).toBe("mockSDK");
-  });
-});
-*/