@evenicanpm/storefront-core 1.0.0-alpha → 1.0.0

package/src/components/_components/search-box/search-input-category.tsx

@@ -8,18 +8,50 @@ import CategoryDropdown from "./components/category-dropdown";
 // CUSTOM ICON COMPONENT
 import Search from "@/components/_components/icons/search";
 import { useTranslations } from "next-intl";
-import React, { useState } from "react";
+import React, { FormEvent, useState } from "react";
 import getCategories from "@/services/categories/queries/get-categories";
 import searchProducts from "@/services/product/queries/search-products";
 import { INPUT_SX } from "./styles/index";
 import _ from "lodash";
+import ProductViewDialog, {
+  ProductInfo,
+} from "../products-view/product-view-dialog";
+import { IconButton } from "@mui/material";
+import { usePathname, useRouter } from "next/navigation";
+import { PageSlug } from "@/lib/page-slugs";
+import { PageKey } from "@/lib/product-list-types";
+import AddToWishlistDialog from "../wishlist/add-to-wishlist-dialog";
+import RemoveFromWishlistDialog from "../wishlist/remove-from-wishlist-dialog";
+import getCart from "@/api-manager/services/cart/queries/get-cart";
+
+export enum DialogType {
+  AddToWishlist = "addToWishlist",
+  RemoveFromWishlist = "removeFromWishlist",
+  QuickView = "quickView",
+}
+
+type DialogState = {
+  type: DialogType | null;
+  productId: number | null;
+  productInfo?: ProductInfo; // for quick view
+};
+
+type Props = {
+  cartId?: string;
+};
 
 export default function SearchInputWithCategory() {
   const t = useTranslations();
-
+  const { data: cart } = getCart.useData();
   const [resultsOpen, setResultsOpen] = useState(false);
   const [searchText, setSearchText] = React.useState<string>("");
   const [selectedCategory, setSelectedCategory] = React.useState<number>(0);
+  const router = useRouter();
+  const pathname = usePathname();
+  const [dialogState, setDialogState] = useState<DialogState>({
+    type: null, // the type of dialog to open (add to/remove from wishlist, quick view)
+    productId: null,
+  });
 
   const { data: resultList } = searchProducts.useData({
     searchText,
@@ -48,18 +80,29 @@ export default function SearchInputWithCategory() {
 
   const debounceSearch = _.debounce(handleSearchChange, 500);
 
+  const handleNavigate = () => {
+    if (searchText.trim() === "") {
+      return;
+    }
+    const url = new URL(PageSlug.ProductList, window.location.origin);
+    url.searchParams.set(PageKey.SEARCH, searchText);
+
+    router.push(url.toString());
+  };
   const INPUT_PROPS = {
     startAdornment: (
       <Box
-        mr={2}
-        px={2}
+        mr={1}
+        px={1}
         display="grid"
         alignItems="center"
         justifyContent="center"
         borderRight="1px solid"
         borderColor="grey.400"
       >
-        <Search sx={{ fontSize: 17, color: "grey.600" }} />
+        <IconButton onClick={handleNavigate}>
+          <Search sx={{ fontSize: 17, color: "grey.600" }} />
+        </IconButton>
       </Box>
     ),
     endAdornment: (
@@ -71,34 +114,94 @@ export default function SearchInputWithCategory() {
     ),
   };
 
+  const openDialog = (
+    type: DialogType,
+    productId: number,
+    productInfo?: ProductInfo,
+  ) => {
+    setDialogState({
+      type,
+      productId,
+      productInfo,
+    });
+    setResultsOpen(false);
+  };
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    handleNavigate();
+    setResultsOpen(false);
+    setSearchText("");
+    setSelectedCategory(0);
+  }
+
+  const handleCloseDialog = () => {
+    setDialogState({
+      type: null,
+      productId: null,
+      productInfo: undefined,
+    });
+  };
+
+  const handleAddRemoveSuccess = () => {
+    // Implement
+  };
+
   return (
-    <Box
-      position="relative"
-      flex="1 1 0"
-      maxWidth="670px"
-      mx="auto"
-      //  {...{ ref: parentRef }}
-    >
-      <TextField
-        fullWidth
-        variant="outlined"
-        placeholder={t("Search.searchPlaceholder")}
-        onChange={debounceSearch}
-        InputProps={{ ...INPUT_PROPS, sx: INPUT_SX }}
-        onFocus={() => {
-          setResultsOpen(true);
-        }}
-        onBlur={() => {
-          // must use timeout to prevent
-          // onClick event not firing in time
-          // when selecting menu items
-          setResultsOpen(false);
-        }}
-      />
+    <>
+      <Box position="relative" flex="1 1 0" maxWidth="670px" mx="auto">
+        <form onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            variant="outlined"
+            placeholder={t("Search.searchPlaceholder")}
+            onChange={debounceSearch}
+            InputProps={{ ...INPUT_PROPS, sx: INPUT_SX }}
+            onFocus={() => {
+              setResultsOpen(true);
+            }}
+            onBlur={() => {
+              setTimeout(() => {
+                setResultsOpen(false);
+              }, 500);
+            }}
+          />
+        </form>
+
+        {resultList && resultList?.length > 0 && resultsOpen ? (
+          <SearchResult results={resultList} openDialog={openDialog} />
+        ) : null}
+      </Box>
+      {/* Dialog */}
+      {dialogState.type === DialogType.AddToWishlist &&
+        dialogState.productId && (
+          <AddToWishlistDialog
+            open={dialogState.type === DialogType.AddToWishlist}
+            handleClose={handleCloseDialog}
+            productId={dialogState.productId}
+            onSuccess={handleAddRemoveSuccess}
+          />
+        )}
+      {dialogState.type === DialogType.RemoveFromWishlist &&
+        dialogState.productId && (
+          <RemoveFromWishlistDialog
+            open={dialogState.type === DialogType.RemoveFromWishlist}
+            handleClose={handleCloseDialog}
+            productId={dialogState.productId}
+            onSuccess={handleAddRemoveSuccess}
+          />
+        )}
 
-      {resultList && resultList?.length > 0 && resultsOpen ? (
-        <SearchResult results={resultList} />
-      ) : null}
-    </Box>
+      {dialogState.type === DialogType.QuickView &&
+        dialogState.productId &&
+        dialogState.productInfo && (
+          <ProductViewDialog
+            openDialog={dialogState.type === DialogType.QuickView}
+            handleCloseDialog={handleCloseDialog}
+            product={dialogState.productInfo}
+            cartId={cart.Id}
+          />
+        )}
+    </>
   );
 }

package/src/components/_components/search-box/styles/index.ts

@@ -19,6 +19,8 @@ export const SearchResultCard = styled(Card)({
   position: "absolute",
   paddingTop: "0.5rem",
   paddingBottom: "0.5rem",
+  paddingLeft: "2rem",
+  paddingRight: "2rem",
 });
 
 export const DropDownHandler = styled(Box)(({ theme }) => ({

package/src/components/_components/section-header/section-creator.tsx

@@ -8,6 +8,7 @@ interface Props extends BoxProps {
   title?: string;
   icon?: ReactNode;
   seeMoreLink?: string;
+  children: ReactNode;
 }
 // ==============================================================
 

package/src/components/_components/wishlist/add-to-wishlist-dialog.tsx

@@ -0,0 +1,161 @@
+import React, { Fragment } from "react";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import { Grid, Button, Dialog, DialogContent } from "@mui/material";
+import { MdFavorite } from "react-icons/md";
+// Global Custom components
+import DashboardHeader from "./components/dashboard-header";
+import CreateWishlistButton from "./components/create-wishlist-button";
+import WishlistModalItem from "./components/wishlist-modal-item";
+import NoRecords from "./components/no-records";
+// API
+import {
+  CopyCartToWishlistInput,
+  Wishlist,
+  WishlistLinesInput,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
+import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+import useCopyCartToWishlist from "@/api-manager/services/user/mutations/copy-cart-to-wishlist";
+import { useSession } from "next-auth/react";
+import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+  productId?: number;
+  cart?: Cart;
+  onSuccess?: () => void;
+}
+
+export default function AddToWishlistDialog(props: Props) {
+  const { data: wishlists, isLoading } = getWishlists.useData();
+
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: addToWishlist } = useAddToWishlist();
+  const { mutateAsync: copyCartToWishlist } = useCopyCartToWishlist();
+
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+
+  const handleClose = () => {
+    if (isFunction(props.handleClose)) {
+      props.handleClose();
+    }
+  };
+
+  const handleAddToWishlist = async (wishlistId: string) => {
+    if (props.productId) {
+      try {
+        const wishlistLinesInput: WishlistLinesInput = {
+          Id: wishlistId,
+          ProductListLines: [],
+        };
+
+        wishlistLinesInput.ProductListLines.push({
+          ProductListId: wishlistId,
+          ProductId: props.productId,
+          Quantity: 1,
+          UnitOfMeasure: "ea",
+        });
+        await addToWishlist(wishlistLinesInput);
+        setNotification({
+          message: t("wishlistLineAddSuccess"),
+          severity: "success",
+        });
+        if (isFunction(props.onSuccess)) {
+          props.onSuccess();
+        }
+      } catch (error) {
+        setNotification({
+          message: t("wishlistLineAddFailed"),
+          severity: "error",
+        });
+      }
+    } else if (props.cart) {
+      try {
+        const copyCartToWishlistInput: CopyCartToWishlistInput = {
+          Id: wishlistId,
+          CartID: props.cart.Id,
+          IsRewrite: false,
+          IsQuantityAggregate: true,
+        };
+
+        await copyCartToWishlist(copyCartToWishlistInput);
+        setNotification({
+          message: t("wishlistCartCopySuccess"),
+          severity: "success",
+        });
+      } catch (error) {
+        setNotification({
+          message: t("wishlistCartCopyFailed"),
+          severity: "error",
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog
+      open={props.open}
+      onClose={handleClose}
+      aria-labelledby="form-dialog-title"
+    >
+      <DialogContent>
+        <Fragment>
+          <DashboardHeader
+            title="Account.Wishlists.heading"
+            Icon={MdFavorite}
+            href=""
+            buttonText=""
+            buttons={
+              isAuthenticated && (
+                <CreateWishlistButton path="Account.Wishlists.btnCreateNewList" />
+              )
+            }
+          />
+          {isAuthenticated && !isLoading ? (
+            wishlists && wishlists.length > 0 ? (
+              wishlists?.map((wishlist: Wishlist) => (
+                <WishlistModalItem
+                  key={wishlist.Id}
+                  wishlist={wishlist}
+                  addToWishlist={handleAddToWishlist}
+                />
+              ))
+            ) : (
+              <NoRecords message="Account.Wishlists.noWishlists" />
+            )
+          ) : (
+            <NoRecords message="Account.Wishlists.wishlistAddUnauthenticated" />
+          )}
+        </Fragment>
+        <Grid container spacing={3}>
+          <Grid
+            item
+            sm={12}
+            xs={12}
+            sx={{
+              display: "flex",
+              justifyContent: "flex-start",
+              gap: 2,
+            }}
+          >
+            <Button
+              color="primary"
+              variant="outlined"
+              size="small"
+              onClick={handleClose}
+              sx={{ height: 30.75 }}
+            >
+              {t("btnCancel")}
+            </Button>
+          </Grid>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/_components/wishlist/components/create-new-list.tsx

@@ -0,0 +1,167 @@
+import React, { useEffect } from "react";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import {
+  Box,
+  Button,
+  TextField,
+  Dialog,
+  DialogContent,
+  FormControlLabel,
+  Checkbox,
+} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+// Global Custom components
+import { H5 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
+import { useNotification } from "@evenicanpm/storefront-core/src/components/Notifications/use-notification";
+// Forms
+import { useFormik } from "formik";
+import { z } from "zod";
+import { withZodSchema } from "formik-validator-zod";
+// API
+import useCreateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/create-wishlist";
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+}
+
+export default function CreateNewList(props: Props) {
+  const t = useTranslations("Account.Wishlists");
+  const { setNotification } = useNotification();
+
+  const { mutateAsync: createWishlist } = useCreateWishlist();
+
+  const FormSchema = z.object({
+    Id: z.string(),
+    Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
+    Comment: z.string().optional(),
+    IsPublic: z.boolean().optional(),
+  });
+  type FormSchemaType = z.infer<typeof FormSchema>;
+
+  const handleSubmit = async (values: FormSchemaType) => {
+    try {
+      await createWishlist({ ...values, IsPublic: !values.IsPublic });
+      handleClose();
+      setNotification({
+        message: t("wishlistSuccess"),
+        severity: "success",
+      });
+    } catch (error) {
+      setNotification({
+        message: t("wishlistFailed"),
+        severity: "error",
+      });
+    }
+  };
+
+  const formik = useFormik<FormSchemaType>({
+    initialValues: {
+      Id: "",
+      Name: "",
+      Comment: "",
+      IsPublic: false,
+    },
+    onSubmit: handleSubmit,
+    validate: withZodSchema(FormSchema),
+  });
+
+  // destructure to put in dependency array
+  // of use effect instead of whole formik
+  const { resetForm } = formik;
+
+  useEffect(() => {
+    if (props.open) {
+      resetForm();
+    }
+  }, [props.open, resetForm]);
+
+  const handleClose = () => {
+    if (isFunction(props.handleClose)) {
+      props.handleClose();
+    }
+  };
+
+  return (
+    <Dialog
+      open={props.open}
+      onClose={handleClose}
+      aria-labelledby="form-dialog-title"
+    >
+      <DialogContent>
+        <H5 mb={4}>{t("formTitle")}</H5>
+        <Box component="form" onSubmit={formik.handleSubmit}>
+          <Grid container spacing={3}>
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                name="Name"
+                fullWidth
+                label={t("name")}
+                value={formik.values.Name}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched.Name && Boolean(formik.errors.Name)}
+                helperText={formik.touched.Name && formik.errors.Name}
+                required
+              />
+            </Grid>
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                name="Comment"
+                fullWidth
+                label={t("comment")}
+                value={formik.values.Comment}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched.Comment && Boolean(formik.errors.Comment)}
+                helperText={formik.touched.Comment && formik.errors.Comment}
+              />
+            </Grid>
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    name="IsPublic"
+                    checked={formik.values.IsPublic}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                  />
+                }
+                label={t("private")}
+              />
+            </Grid>
+            <Grid
+              size={{ sm: 6, xs: 12 }}
+              sx={{
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+                gap: 2,
+              }}
+            >
+              <Button
+                color="primary"
+                variant="contained"
+                size="small"
+                type="submit"
+                sx={{ height: 30.75 }}
+              >
+                {t("btnSave")}
+              </Button>
+              <Button
+                color="primary"
+                variant="outlined"
+                size="small"
+                onClick={handleClose}
+                sx={{ height: 30.75 }}
+              >
+                {t("btnCancel")}
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/_components/wishlist/components/create-wishlist-button.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@mui/material";
+import T from "@evenicanpm/storefront-core/src/components/T";
+import CreateNewListDialog from "./create-new-list";
+
+interface Props {
+  path: string;
+}
+
+const CreateWishlistButton = ({ path }: Props) => {
+  const [openCreateListDialog, setOpenCreateListDialog] = useState(false);
+
+  const handleCloseDialog = () => {
+    setOpenCreateListDialog(false);
+  };
+
+  const handleCreateNewList = () => {
+    setOpenCreateListDialog(true);
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleCreateNewList}
+        color="primary"
+        sx={{ bgcolor: "primary.light", px: 4 }}
+      >
+        <T path={path} />
+      </Button>
+      <CreateNewListDialog
+        open={openCreateListDialog}
+        handleClose={handleCloseDialog}
+      />
+    </>
+  );
+};
+
+export default CreateWishlistButton;