@evenicanpm/storefront-core 1.1.0 → 1.2.0

package/src/pages/account/wishlist/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 "@/components/Notifications/use-notification";
-// Forms
-import { useFormik } from "formik";
-import { z } from "zod";
-import { withZodSchema } from "formik-validator-zod";
-// API
-import useCreateWishlist from "@/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/pages/account/wishlist/create-wishlist-button.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@mui/material";
-import T from "@/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/pages/account/wishlist/wishlist-item.tsx

@@ -1,82 +0,0 @@
-import { Box, IconButton } from "@mui/material";
-import { useTranslations } from "next-intl";
-import { useNotification } from "@/components/Notifications/use-notification";
-import { format } from "date-fns";
-// MUI ICON COMPONENTS
-import { MdDelete as Delete } from "react-icons/md";
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { NavLink3 } from "@evenicanpm/storefront-core/src/components/_components/nav-link";
-// LOCAL CUSTOM COMPONENT
-import TableRow from "../table-row";
-// API
-import useDeleteWishlist from "@/api-manager/services/user/mutations/delete-wishlist";
-import {
-  Wishlist,
-  WishlistDetailInput,
-} from "@/api-manager/schemas/user.schema";
-
-interface Props {
-  wishlist: Wishlist;
-}
-
-export default function WishlistItem({ wishlist }: Props) {
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-
-  const { mutateAsync: deleteWishlist } = useDeleteWishlist();
-
-  const handleDelete = async (id: string) => {
-    const wishlistDeleteInput: WishlistDetailInput = { Id: id };
-    try {
-      await deleteWishlist(wishlistDeleteInput);
-      setNotification({
-        message: t("deleteWishlistSuccess"),
-        severity: "success",
-      });
-    } catch (error) {
-      setNotification({
-        message: t("deleteWishlistFailed"),
-        severity: "error",
-      });
-    }
-  };
-
-  return (
-    <TableRow
-      sx={{
-        display: "grid",
-        gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", // Define equal column structure
-        alignItems: "center",
-        gap: 2,
-        padding: "10px 15px",
-      }}
-    >
-      <Paragraph ellipsis>
-        <NavLink3
-          href={`/account/wish-lists/${wishlist?.Id}`}
-          text={wishlist?.Name ?? ""}
-        />
-      </Paragraph>
-      <Paragraph ellipsis>
-        {" "}
-        {format(
-          new Date(wishlist?.CreatedDateTime ?? wishlist?.LastUpdated ?? ""),
-          "MMM dd, yyyy",
-        )}
-      </Paragraph>
-      <Paragraph
-        ellipsis
-      >{`${wishlist?.ProductListLines?.length} ${t("products")}`}</Paragraph>
-      {/* <Paragraph ellipsis>
-        {wishlist?.isPublic ? "Public" : "Private"}
-      </Paragraph> */}
-
-      <Box display="flex" alignItems="center" gap={1} justifySelf="end">
-        <IconButton onClick={() => handleDelete(wishlist?.Id || "")}>
-          <Delete fontSize="large" color="inherit" />
-        </IconButton>
-      </Box>
-    </TableRow>
-  );
-}

package/src/pages/blog/pagination.tsx

@@ -1,38 +0,0 @@
-"use client";
-import {
-  Pagination as MuiPagination,
-  PaginationItem,
-  PaginationRenderItemParams,
-} from "@mui/material";
-import Link from "next/link";
-
-interface Props {
-  page?: number;
-  count: number;
-  pageSize?: number;
-}
-
-const Pagination = ({ count, page, pageSize }: Props) => {
-  const isSinglePage = count <= 1;
-  return (
-    <MuiPagination
-      variant="outlined"
-      color="primary"
-      shape="rounded"
-      page={page}
-      count={count}
-      renderItem={(item: PaginationRenderItemParams) =>
-        isSinglePage ? (
-          // If there's only 1 page, don't wrap with Link
-          <PaginationItem {...item} />
-        ) : (
-          <Link href={`?page=${item.page}&pageSize=${pageSize}`} passHref>
-            <PaginationItem {...item} />
-          </Link>
-        )
-      }
-    />
-  );
-};
-
-export default Pagination;

package/src/pages/cart/cart-item.tsx

@@ -1,312 +0,0 @@
-import { useState } from "react";
-import Link from "next/link";
-import {
-  Button,
-  IconButton,
-  Box,
-  CircularProgress,
-  Typography,
-  TextField,
-} from "@mui/material";
-
-import { useTranslations } from "next-intl";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Close from "@mui/icons-material/Close";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import {
-  H6,
-  Span,
-  Tiny,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import Image from "@evenicanpm/storefront-core/src/components/ImageWithFallback";
-// STYLED COMPONENT
-import { Wrapper } from "./wrapper";
-// API
-import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
-import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
-import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
-import { CartLine } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
-// Utils
-import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import { getProductDetailUrl } from "@evenicanpm/storefront-core/src/lib/build-product-detail-url";
-
-// =========================================================
-type Props = {
-  cartLine: CartLine;
-  cartId: string;
-  cartVersion: number;
-  showCartLineComments?: boolean;
-};
-// =========================================================
-
-export default function CartItem({
-  cartLine,
-  cartId,
-  cartVersion,
-  showCartLineComments = true,
-}: Props) {
-  const [isWritingComment, setIsWritingComment] = useState(false);
-  const [comment, setComment] = useState(cartLine.Comment || "");
-  const t = useTranslations("Cart.CartLine");
-  const { mutate: updateCartLine, isPending: updatePending } =
-    useUpdateCartLines();
-  const { mutate: deleteCartLine, isPending: deletePending } =
-    useDeleteCartLine();
-  const { formatCurrency } = useCurrencyFormatter();
-  const handleCartAmountChange = (cartLineChange: CartLine) => () => {
-    if (cartLineChange.Quantity === 0) {
-      deleteCartLine({
-        cartLine: [cartLineChange],
-        cartId,
-        version: cartVersion,
-      });
-    } else {
-      updateCartLine({
-        cartLine: [cartLineChange],
-        cartId,
-        version: cartVersion,
-      });
-    }
-  };
-
-  const renderTotalPrice = () => {
-    if (cartLine.DiscountLines?.length) {
-      return (
-        <Span fontWeight={600} color="primary.main">
-          <s data-testid={"discount-strikethru"}>
-            {formatCurrency(cartLine.NetPrice ?? 0)}
-          </s>
-        </Span>
-      );
-    }
-
-    return (
-      <Span fontWeight={600} color="primary.main">
-        {formatCurrency(cartLine.NetPrice ?? 0)}
-      </Span>
-    );
-  };
-
-  const renderDiscountPrice = () => {
-    if (cartLine.DiscountLines?.length) {
-      return (
-        <Span fontWeight={600} color="primary.main">
-          {formatCurrency(cartLine.TotalAmount ?? 0)}
-        </Span>
-      );
-    }
-  };
-
-  const shouldDisplaySpinner = () => updatePending || deletePending;
-  const qty = cartLine.Quantity || 1;
-  return (
-    <Wrapper>
-      <Box className="img-wrapper">
-        <Image
-          alt={cartLine.Product?.Name || ""}
-          width={150}
-          height={150}
-          src={cartLine.Product?.PrimaryImageUrl || ""}
-        />
-      </Box>
-
-      {/* DELETE BUTTON */}
-      <IconButton
-        size="small"
-        onClick={handleCartAmountChange({ ...cartLine, Quantity: 0 })}
-        sx={{ position: "absolute", right: 15, top: 15 }}
-        title={t("removeItem")}
-        aria-label={t("removeItem")}
-      >
-        <Close fontSize="small" />
-      </IconButton>
-
-      <FlexBox p={2} rowGap={2} width="100%" flexDirection="column">
-        {cartLine.Product && (
-          <Link href={getProductDetailUrl(cartLine.Product)}>
-            <Span ellipsis fontWeight="600" fontSize={18}>
-              {cartLine.Product?.Name}
-            </Span>
-          </Link>
-        )}
-        <FlexBox
-          width="100%"
-          sx={{ flexDirection: { xs: "column", md: "row" } }}
-        >
-          <FlexBox rowGap={2} width="100%" flexDirection="column">
-            <Span ellipsis fontWeight="200" fontSize={14}>
-              {cartLine?.Product?.Dimensions?.map((d, i) => (
-                <span
-                  key={i}
-                >{`${ProductDimensionType[d.DimensionTypeValue]}: ${
-                  d?.DimensionValue?.Value
-                } ${
-                  i + 1 !== cartLine?.Product?.Dimensions?.length ? "|" : ""
-                } `}</span>
-              ))}
-            </Span>
-            {/* PRODUCT PRICE SECTION */}
-            <FlexBox gap={1} flexWrap="wrap" alignItems="center">
-              <Span color="grey.600">
-                {formatCurrency(cartLine.Price ?? 0)} x {cartLine.Quantity}
-                <Tiny>{cartLine.UnitOfMeasureSymbol}</Tiny>
-              </Span>
-              {renderTotalPrice()}
-              {renderDiscountPrice()}
-            </FlexBox>
-
-            <FlexBox gap={1} flexWrap="wrap" alignItems="center">
-              {cartLine.DiscountLines?.map((discount, index) => (
-                <Span key={index} color="error.main">
-                  {discount.DiscountCode} - {discount.OfferName}
-                </Span>
-              ))}
-            </FlexBox>
-
-            {/* PRODUCT QUANTITY INC/DEC BUTTONS */}
-            {!shouldDisplaySpinner() ? (
-              <FlexBox alignItems="center">
-                <Button
-                  color="primary"
-                  sx={{ p: "5px" }}
-                  variant="outlined"
-                  disabled={qty === 1}
-                  onClick={handleCartAmountChange({
-                    ...cartLine,
-                    Quantity: qty - 1,
-                  })}
-                  title={t("decreaseQuantity")}
-                  aria-label={t("decreaseQuantity")}
-                >
-                  <Remove fontSize="small" />
-                </Button>
-
-                <Span mx={1} fontWeight={600} fontSize={15}>
-                  {qty}
-                </Span>
-
-                <Button
-                  color="primary"
-                  sx={{ p: "5px" }}
-                  variant="outlined"
-                  onClick={handleCartAmountChange({
-                    ...cartLine,
-                    Quantity: qty + 1,
-                  })}
-                  title={t("increaseQuantity")}
-                  aria-label={t("increaseQuantity")}
-                >
-                  <Add fontSize="small" />
-                </Button>
-              </FlexBox>
-            ) : (
-              <CircularProgress size={30} />
-            )}
-          </FlexBox>
-          {/* CART LINE COMMENTS */}
-          {showCartLineComments && (
-            <FlexBox width="100%" flexDirection="column" mt={1}>
-              {isWritingComment ? (
-                <>
-                  <TextField
-                    label={t("addComment")}
-                    variant="outlined"
-                    multiline
-                    minRows={2}
-                    maxRows={2}
-                    fullWidth
-                    value={comment}
-                    onChange={(e) => setComment(e.target.value)}
-                    sx={{ marginBottom: 1 }}
-                  />
-                  <FlexBox
-                    flexDirection="row"
-                    sx={{ marginTop: "auto", marginLeft: "auto" }}
-                  >
-                    <Button
-                      color="primary"
-                      variant="outlined"
-                      sx={{
-                        width: "100px",
-                      }}
-                      onClick={() => {
-                        setIsWritingComment(false);
-                        setComment(cartLine.Comment || "");
-                      }}
-                    >
-                      {t("cancelComment")}
-                    </Button>
-                    <Button
-                      color="primary"
-                      variant="contained"
-                      sx={{
-                        width: "150px",
-                        marginLeft: 1,
-                      }}
-                      onClick={() => {
-                        handleCartAmountChange({
-                          ...cartLine,
-                          Comment: comment,
-                        })();
-                        setIsWritingComment(false);
-                      }}
-                    >
-                      {t("saveComment")}
-                    </Button>
-                  </FlexBox>
-                </>
-              ) : shouldDisplaySpinner() ? (
-                <CircularProgress
-                  size={30}
-                  sx={{ marginTop: "auto", marginLeft: "auto" }}
-                />
-              ) : (
-                <>
-                  <Typography
-                    sx={{
-                      marginBottom: 1,
-                      marginTop: "auto",
-                      // marginLeft: "auto",
-                      maxWidth: {
-                        xs: "250px",
-                        lg: "350px",
-                      },
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                    }}
-                    title={cartLine.Comment || ""}
-                  >
-                    {cartLine.Comment ? (
-                      <>
-                        <H6 sx={{ display: "inline" }}>
-                          {t("commentLabel")}:{" "}
-                        </H6>
-                        {cartLine.Comment}
-                      </>
-                    ) : null}
-                  </Typography>
-                  <Button
-                    color="primary"
-                    variant="outlined"
-                    sx={{
-                      width: "150px",
-                      marginTop: "auto",
-                      marginLeft: "auto",
-                    }}
-                    onClick={() => setIsWritingComment(true)}
-                  >
-                    {t("addComment")}
-                  </Button>
-                </>
-              )}
-            </FlexBox>
-          )}
-        </FlexBox>
-      </FlexBox>
-    </Wrapper>
-  );
-}