@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

package/src/pages/account/wishlist/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 "@/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

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

@@ -0,0 +1,82 @@
+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 "@/components/_components/Typography";
+import { NavLink3 } from "@/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

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

@@ -0,0 +1,312 @@
+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>
+  );
+}