@evenicanpm/storefront-core 1.0.6 → 1.2.0

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

@@ -1,167 +0,0 @@
-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/providers/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

@@ -1,40 +0,0 @@
-"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;

package/src/components/_components/wishlist/components/dashboard-header.tsx

@@ -1,123 +0,0 @@
-import React, { ReactNode } from "react";
-import Link from "next/link";
-import { Box, Button, IconButton, Theme, styled } from "@mui/material";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTranslations } from "next-intl";
-// ICON COMPONENTS
-import { MdMenu as Menu } from "react-icons/md";
-// GLOBAL CUSTOM COMPONENTS
-import SideNav from "@evenicanpm/storefront-core/src/components/_components/side-nav/index";
-import { H2 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
-// LOCAL CUSTOM COMPONENTS
-import Navigation from "./navigation";
-import { IconType } from "react-icons";
-
-// STYLED COMPONENT
-const StyledBox = styled("div")(({ theme }) => ({
-  display: "flex",
-  marginTop: theme.spacing(-2),
-  marginBottom: theme.spacing(3),
-  "& .headerHold": {
-    flexGrow: 1,
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  [theme.breakpoints.up("md")]: {
-    "& .sidenav": { display: "none" },
-  },
-  [theme.breakpoints.down("md")]: {
-    flexDirection: "column",
-  },
-}));
-
-// ==============================================================
-
-type WithButtons = {
-  title: string;
-  titleMessage?: string;
-  buttons: ReactNode;
-  Icon: IconType;
-  href?: never;
-  buttonText?: never;
-};
-
-type WithGeneratedButton = {
-  title: string;
-  titleMessage?: string;
-  href?: string;
-  buttonText?: string;
-  Icon: IconType;
-  buttons?: ReactNode;
-};
-
-type Props = WithButtons | WithGeneratedButton;
-
-// ==============================================================
-
-export default function DashboardHeader({
-  title,
-  titleMessage,
-  buttons,
-  href,
-  buttonText,
-  Icon,
-}: Props) {
-  const t = useTranslations();
-  const isTablet = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down(1025),
-  );
-
-  const GENERATED_BUTTON = href ? (
-    <Button
-      href={href}
-      color="primary"
-      LinkComponent={Link}
-      sx={{ bgcolor: "primary.light", px: 4 }}
-    >
-      {t(buttonText)}
-    </Button>
-  ) : null;
-
-  const HEADER_LINKS = (
-    <FlexBox gap={1} justifyContent="flex-end">
-      {buttons || GENERATED_BUTTON}
-    </FlexBox>
-  );
-
-  return (
-    <StyledBox>
-      <FlexBox mt={2} className="headerHold">
-        <FlexBox alignItems="center" gap={0.5}>
-          {Icon && (
-            <IconButton color="primary">
-              <Icon />
-            </IconButton>
-          )}
-          <H2 my={0} lineHeight={1} ellipsis>
-            {titleMessage ? titleMessage : t(title)}
-          </H2>
-        </FlexBox>
-
-        <FlexBox className="button-container" justifyContent="flex-end">
-          {!isTablet && HEADER_LINKS}
-        </FlexBox>
-
-        <div className="sidenav">
-          <SideNav
-            position="left"
-            handler={(close) => (
-              <IconButton onClick={close}>
-                <Menu fontSize="small" />
-              </IconButton>
-            )}
-          >
-            <Navigation />
-          </SideNav>
-        </div>
-      </FlexBox>
-
-      {isTablet ? <Box mt={2}>{HEADER_LINKS}</Box> : null}
-    </StyledBox>
-  );
-}

package/src/components/_components/wishlist/components/navigation.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import { Fragment } from "react";
-import { useTranslations } from "next-intl";
-
-// ICON COMPONENTS
-import {
-  MdOutlineShoppingBag as ShoppingBagOutlined,
-  MdFavoriteBorder as FavoriteBorder,
-  MdPerson as Person,
-  MdPlace as Place,
-} from "react-icons/md";
-
-// GLOBAL CUSTOM COMPONENTS
-import FlexBox from "@evenicanpm/storefront-core/src/components/_components/flex-box/flex-box";
-import {
-  Paragraph,
-  Span,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-
-// API
-import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
-import getUserCounts from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user-counts";
-
-// STYLED COMPONENTS
-import { MainContainer, StyledNavLink } from "../styles";
-
-const MENU_ITEMS = [
-  {
-    title: "DASHBOARD",
-    list: [
-      {
-        href: "/account/orders",
-        title: "orders",
-        Icon: ShoppingBagOutlined,
-        count: 0,
-      },
-      { href: "/account/wish-lists", title: "wishlists", Icon: FavoriteBorder },
-    ],
-  },
-  {
-    title: "ACCOUNT SETTINGS",
-    list: [
-      { href: "/account/profile", title: "profile", Icon: Person },
-      { href: "/account/addresses", title: "addresses", Icon: Place, count: 0 },
-    ],
-  },
-];
-
-export default function Navigation() {
-  const pathname = usePathname();
-  const t = useTranslations("Account.Menu");
-
-  const { data: user } = getUser.useData();
-  const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
-
-  MENU_ITEMS[0].list[0].count = counts?.orderCount;
-  MENU_ITEMS[1].list[1].count = counts?.addressCount;
-
-  return (
-    <MainContainer>
-      {MENU_ITEMS.map((item) => (
-        <Fragment key={item.title}>
-          <Paragraph p="26px 30px 1rem" color="grey.600" fontSize={12}>
-            {item.title}
-          </Paragraph>
-
-          {item.list.map(({ Icon, count, href, title }) => (
-            <StyledNavLink
-              href={href}
-              key={title}
-              isCurrentPath={pathname.includes(href)}
-            >
-              <FlexBox alignItems="center" gap={1}>
-                <Icon color="inherit" fontSize="large" className="nav-icon" />
-                <Span>{t(title)}</Span>
-              </FlexBox>
-
-              <Span>{count}</Span>
-            </StyledNavLink>
-          ))}
-        </Fragment>
-      ))}
-    </MainContainer>
-  );
-}

package/src/components/_components/wishlist/components/no-records.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import { H4 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { useTranslations } from "next-intl";
-
-type Props = { message: string };
-
-export default function NoRecords({ message }: Props) {
-  const t = useTranslations();
-  return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      height="50vh"
-    >
-      <H4 color="grey.500">{t(message)}</H4>
-    </Box>
-  );
-}

package/src/components/_components/wishlist/components/wishlist-modal-item.tsx

@@ -1,66 +0,0 @@
-import { Button } from "@mui/material";
-import { format } from "date-fns";
-// MUI ICON COMPONENTS
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-// LOCAL CUSTOM COMPONENT
-
-// API
-import { Wishlist } from "@/api-manager/schemas/user.schema";
-import { StyledTableRow } from "../styles";
-
-interface Props {
-  wishlist: Wishlist;
-  addToWishlist?: (wishlistId: string) => void;
-  removeFromWishlist?: (wishlistId: string) => void;
-}
-
-export default function WishlistModalItem({
-  wishlist,
-  addToWishlist,
-  removeFromWishlist,
-}: Props) {
-  const handleClick = () => {
-    if (addToWishlist) {
-      addToWishlist(wishlist.Id);
-    } else if (removeFromWishlist) {
-      removeFromWishlist(wishlist.Id);
-    }
-  };
-  return (
-    <StyledTableRow
-      sx={{
-        display: "grid",
-        gridTemplateColumns: "2fr 1fr 1fr 1fr", // Define equal column structure
-        alignItems: "center",
-        gap: 2,
-        padding: "10px 15px",
-        width: "500px",
-        cursor: "default",
-      }}
-    >
-      <Paragraph ellipsis sx={{ fontWeight: "bold" }}>
-        {wishlist?.Name ?? ""}
-      </Paragraph>
-      <Paragraph ellipsis>
-        {" "}
-        {format(
-          new Date(wishlist?.CreatedDateTime ?? wishlist?.LastUpdated ?? ""),
-          "MMM dd, yyyy",
-        )}
-      </Paragraph>
-      <Paragraph ellipsis>
-        {" "}
-        {`${wishlist?.ProductListLines?.length} products`}
-      </Paragraph>
-
-      <Button
-        onClick={handleClick}
-        color="primary"
-        sx={{ bgcolor: "primary.light", px: 4 }}
-      >
-        {addToWishlist ? "Add" : "Remove"}
-      </Button>
-    </StyledTableRow>
-  );
-}

package/src/components/_components/wishlist/remove-from-wishlist-dialog.tsx

@@ -1,174 +0,0 @@
-import React, { Fragment, useCallback, useEffect } 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 WishlistModalItem from "./components/wishlist-modal-item";
-import NoRecords from "@evenicanpm/storefront-core/src/components-v2/no-records";
-// API
-import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
-import {
-  ExtendedProductListLine,
-  Wishlist,
-  WishlistLinesInput,
-} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import { useSession } from "next-auth/react";
-import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
-
-interface Props {
-  open: boolean;
-  // product?: ProductDetails;
-  productId?: number;
-  onSuccess?: () => void;
-  handleClose: () => void;
-}
-
-export default function RemoveFromWishlistDialog({
-  open,
-  productId,
-  handleClose,
-  onSuccess,
-}: Props) {
-  const { data: wishlists, isLoading } = getWishlists.useSuspenseData();
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-
-  const { mutateAsync: removeFromWishlist } = useRemoveFromWishlist();
-
-  const { data: session } = useSession();
-  const isAuthenticated = !!session;
-
-  const [relevantWishlists, setRelevantWishlists] = React.useState<Wishlist[]>(
-    [],
-  );
-
-  const handleCloseDialog = () => {
-    if (isFunction(handleClose)) {
-      handleClose();
-    }
-  };
-
-  // get wishlists that the product is in
-  const getRelevantWishlists = useCallback(
-    (wishlists: Wishlist[]) => {
-      return wishlists.filter((wishlist) =>
-        wishlist.ProductListLines?.some((line) => line.ProductId === productId),
-      );
-    },
-    [productId],
-  );
-
-  const handleRemoveFromWishlist = useCallback(
-    async (wishlistId: string) => {
-      // get the selected wishlist
-      const wishlist = relevantWishlists.find(
-        (wishlist) => wishlist.Id === wishlistId,
-      );
-      if (wishlist) {
-        try {
-          const extendedWishlistLine = wishlist.ProductListLines?.find(
-            (item: ExtendedProductListLine) => item.ProductId === productId,
-          );
-
-          if (extendedWishlistLine) {
-            const wishlistLinesInput: WishlistLinesInput = {
-              Id: wishlist.Id,
-              ProductListLines: [extendedWishlistLine],
-            };
-
-            await removeFromWishlist(wishlistLinesInput);
-
-            setNotification({
-              message: t("wishlistLineRemoveSuccess"),
-              severity: "success",
-            });
-            if (isFunction(onSuccess)) {
-              onSuccess();
-            }
-          }
-        } catch (error) {
-          setNotification({
-            message: t("wishlistLineRemoveFailed"),
-            severity: "error",
-          });
-        }
-      }
-    },
-    [
-      relevantWishlists,
-      removeFromWishlist,
-      setNotification,
-      t,
-      onSuccess,
-      productId,
-    ],
-  );
-
-  useEffect(() => {
-    const withlistsWithProduct = getRelevantWishlists(wishlists);
-    setRelevantWishlists(withlistsWithProduct);
-    if (open && withlistsWithProduct.length === 1) {
-      // delete right away
-      handleRemoveFromWishlist(withlistsWithProduct[0].Id);
-    }
-  }, [open, getRelevantWishlists, handleRemoveFromWishlist, wishlists]);
-
-  return (
-    <Dialog
-      open={open}
-      onClose={handleCloseDialog}
-      aria-labelledby="form-dialog-title"
-    >
-      <DialogContent>
-        <Fragment>
-          <DashboardHeader
-            title="Account.Wishlists.heading"
-            Icon={MdFavorite}
-            href=""
-            buttonText=""
-          />
-          {isAuthenticated && !isLoading ? (
-            relevantWishlists && relevantWishlists.length > 0 ? (
-              relevantWishlists?.map((wishlist: Wishlist) => (
-                <WishlistModalItem
-                  key={wishlist.Id}
-                  wishlist={wishlist}
-                  removeFromWishlist={handleRemoveFromWishlist}
-                />
-              ))
-            ) : (
-              <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={handleCloseDialog}
-              sx={{ height: 30.75 }}
-            >
-              {t("btnCancel")}
-            </Button>
-          </Grid>
-        </Grid>
-      </DialogContent>
-    </Dialog>
-  );
-}