@evenicanpm/storefront-core 1.0.2 → 1.0.3

package/src/pages-v2/account/profile/user-info.tsx

@@ -0,0 +1,62 @@
+import _ from "lodash";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { Theme } from "@mui/material/styles";
+import Card from "@mui/material/Card";
+import { useTranslations } from "next-intl";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import {
+  Small,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// API
+import { User } from "@/api-manager/schemas/user.schema";
+type Props = {
+  user: User;
+};
+export default function UserInfo({ user }: Props) {
+  const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));
+
+  return (
+    <Card
+      sx={{
+        mt: 3,
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "5rem",
+        p: "0.75rem 1.5rem",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        ...(downMd && {
+          gap: "1rem",
+          alignItems: "start",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+        }),
+      }}
+    >
+      <TableRowItem
+        title="labelFirstName"
+        value={_.capitalize(user?.FirstName)}
+      />
+      <TableRowItem
+        title="labelLastName"
+        value={_.capitalize(user?.LastName)}
+      />
+      <TableRowItem title="labelEmail" value={user?.Email ?? ""} />
+    </Card>
+  );
+}
+
+function TableRowItem({ title, value = "" }: { title: string; value: string }) {
+  const t = useTranslations("Account.Profile");
+  return (
+    <FlexBox flexDirection="column" p={1}>
+      <Small color="grey.600" mb={0.5}>
+        {t(title)}
+      </Small>
+
+      <Span>{value}</Span>
+    </FlexBox>
+  );
+}

package/src/pages-v2/account/styles.ts

@@ -0,0 +1,32 @@
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+import NavLink from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
+
+export const MainContainer = styled(Card)(({ theme }) => ({
+  paddingBottom: "1.5rem",
+  [theme.breakpoints.down("md")]: {
+    boxShadow: "none",
+    overflowY: "auto",
+    height: "calc(100vh - 64px)",
+  },
+}));
+
+export const StyledNavLink = styled(NavLink, {
+  shouldForwardProp: (prop) => prop !== "isCurrentPath",
+})<{ isCurrentPath: boolean }>(({ theme, isCurrentPath }) => ({
+  display: "flex",
+  alignItems: "center",
+  borderLeft: "4px solid",
+  paddingLeft: "1.5rem",
+  paddingRight: "1.5rem",
+  marginBottom: "1.25rem",
+  justifyContent: "space-between",
+  borderColor: isCurrentPath ? theme.palette.primary.main : "transparent",
+  "& .nav-icon": {
+    color: isCurrentPath ? theme.palette.primary.main : theme.palette.grey[600],
+  },
+  "&:hover": {
+    borderColor: theme.palette.primary.main,
+    "& .nav-icon": { color: theme.palette.primary.main },
+  },
+}));

package/src/pages-v2/account/table-row.tsx

@@ -0,0 +1,19 @@
+import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
+
+const TableRow = styled(Card)(({ theme }) => ({
+  gap: 16,
+  marginBlock: 16,
+  display: "grid",
+  borderRadius: 10,
+  cursor: "pointer",
+  alignItems: "center",
+  padding: ".6rem 1.2rem",
+  gridTemplateColumns: "1.5fr 2fr 1.5fr auto",
+  [theme.breakpoints.down("sm")]: {
+    gap: 8,
+    gridTemplateColumns: "repeat(2, 1fr)",
+  },
+}));
+
+export default TableRow;

package/src/pages-v2/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 "@evenicanpm/storefront-core/src/components-v2/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 "@/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-v2/account/wishlist/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-v2/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-v2/account/wishlist/wishlist-item.tsx

@@ -0,0 +1,82 @@
+import { Box, IconButton } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/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-v2/Typography";
+import { NavLink3 } from "@evenicanpm/storefront-core/src/components-v2/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-v2/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;