@evenicanpm/storefront-core 1.0.4 → 1.0.6

package/src/pages-v2/account/wishlist/create-new-list.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect } from "react";
+"use client";
+
+import React, { useEffect, createContext, useContext, ReactNode } from "react";
 import isFunction from "lodash/isFunction";
 import { useTranslations } from "next-intl";
 import {
@@ -11,157 +13,209 @@ import {
   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 {
+interface CreateNewListContextValue {
+  formik: ReturnType<typeof useFormik<FormSchemaType>>;
+  handleClose: () => void;
+  t: ReturnType<typeof useTranslations>;
+}
+const CreateNewListContext = createContext<CreateNewListContextValue | null>(
+  null,
+);
+
+const FormSchema = z.object({
+  Id: z.string(),
+  Name: z.string().nonempty(),
+  Comment: z.string().optional(),
+  IsPublic: z.boolean().optional(),
+});
+type FormSchemaType = z.infer<typeof FormSchema>;
+interface CreateNewListProps {
   open: boolean;
   handleClose: () => void;
+  children: ReactNode;
 }
 
-export default function CreateNewList(props: Props) {
+const CreateNewList = ({
+  open,
+  handleClose: onClose,
+  children,
+}: CreateNewListProps) => {
   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,
+    initialValues: { Id: "", Name: "", Comment: "", IsPublic: false },
+    onSubmit: async (values) => {
+      try {
+        await createWishlist({ ...values, IsPublic: !values.IsPublic });
+        onClose();
+        setNotification({ message: t("wishlistSuccess"), severity: "success" });
+      } catch (error) {
+        setNotification({ message: t("wishlistFailed"), severity: "error" });
+      }
     },
-    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]);
+    if (open) formik.resetForm();
+  }, [open]);
 
   const handleClose = () => {
-    if (isFunction(props.handleClose)) {
-      props.handleClose();
-    }
+    if (isFunction(onClose)) onClose();
   };
 
   return (
-    <Dialog
-      open={props.open}
-      onClose={handleClose}
-      aria-labelledby="form-dialog-title"
+    <CreateNewListContext.Provider value={{ formik, handleClose, t }}>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="form-dialog-title"
+      >
+        <DialogContent>{children}</DialogContent>
+      </Dialog>
+    </CreateNewListContext.Provider>
+  );
+};
+
+CreateNewList.Title = () => {
+  const ctx = useContext(CreateNewListContext);
+  if (!ctx) return null;
+  const { t } = ctx;
+  return <H5 mb={4}>{t("formTitle")}</H5>;
+};
+
+CreateNewList.Form = ({ children }: { children: React.ReactNode }) => {
+  const ctx = useContext(CreateNewListContext);
+  if (!ctx) return null;
+  const { formik } = ctx;
+  return (
+    <Box component="form" onSubmit={formik.handleSubmit}>
+      <Grid container spacing={3}>
+        {children}
+      </Grid>
+    </Box>
+  );
+};
+
+CreateNewList.NameField = () => {
+  const ctx = useContext(CreateNewListContext);
+  if (!ctx) return null;
+  const { formik, t } = ctx;
+  return (
+    <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>
+  );
+};
+
+CreateNewList.CommentField = () => {
+  const ctx = useContext(CreateNewListContext);
+  if (!ctx) return null;
+  const { formik, t } = ctx;
+  return (
+    <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>
+  );
+};
+
+CreateNewList.PrivacyField = () => {
+  const ctx = useContext(CreateNewListContext);
+  if (!ctx) return null;
+  const { formik, t } = ctx;
+  return (
+    <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>
+  );
+};
+
+CreateNewList.Actions = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Grid
+      size={{ sm: 6, xs: 12 }}
+      sx={{
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        gap: 2,
+      }}
     >
-      <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>
+      {children}
+    </Grid>
   );
-}
+};
+
+CreateNewList.Save = () => {
+  const ctx = useContext(CreateNewListContext);
+  if (!ctx) return null;
+  const { t } = ctx;
+  return (
+    <Button
+      color="primary"
+      variant="contained"
+      size="small"
+      type="submit"
+      sx={{ height: 30.75 }}
+    >
+      {t("btnSave")}
+    </Button>
+  );
+};
+
+CreateNewList.Cancel = () => {
+  const ctx = useContext(CreateNewListContext);
+  if (!ctx) return null;
+  const { handleClose, t } = ctx;
+  return (
+    <Button
+      color="primary"
+      variant="outlined"
+      size="small"
+      onClick={handleClose}
+      sx={{ height: 30.75 }}
+    >
+      {t("btnCancel")}
+    </Button>
+  );
+};
+
+export default CreateNewList;

package/src/pages-v2/account/wishlist/create-wishlist-button.tsx

@@ -3,7 +3,7 @@
 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";
+import CreateNewList from "@evenicanpm/storefront-core/src/pages-v2/account/wishlist/create-new-list";
 
 interface Props {
   path: string;
@@ -29,10 +29,23 @@ const CreateWishlistButton = ({ path }: Props) => {
       >
         <T path={path} />
       </Button>
-      <CreateNewListDialog
+
+      {/* Dialog with Form */}
+      <CreateNewList
         open={openCreateListDialog}
         handleClose={handleCloseDialog}
-      />
+      >
+        <CreateNewList.Title />
+        <CreateNewList.Form>
+          <CreateNewList.NameField />
+          <CreateNewList.CommentField />
+          <CreateNewList.PrivacyField />
+          <CreateNewList.Actions>
+            <CreateNewList.Save />
+            <CreateNewList.Cancel />
+          </CreateNewList.Actions>
+        </CreateNewList.Form>
+      </CreateNewList>
     </>
   );
 };

package/src/pages-v2/account/wishlist/wishlist-item.tsx

@@ -1,14 +1,15 @@
+"use client";
+
+import { ReactNode, createContext, useContext } from "react";
 import { Box, IconButton } from "@mui/material";
+import { SxProps } from "@mui/material/styles";
 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";
+import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
 // API
 import useDeleteWishlist from "@/api-manager/services/user/mutations/delete-wishlist";
 import {
@@ -16,14 +17,24 @@ import {
   WishlistDetailInput,
 } from "@/api-manager/schemas/user.schema";
 
-interface Props {
+interface WishlistItemContextValue {
+  wishlist: Wishlist;
+  handleDelete: (id: string) => void;
+}
+
+const WishlistItemContext = createContext<WishlistItemContextValue | null>(
+  null,
+);
+
+interface RootProps {
   wishlist: Wishlist;
+  children: ReactNode;
+  sx?: SxProps;
 }
 
-export default function WishlistItem({ wishlist }: Props) {
+const WishlistItem = ({ wishlist, children, sx }: RootProps) => {
   const t = useTranslations("Account.Wishlists");
   const { setNotification } = useNotification();
-
   const { mutateAsync: deleteWishlist } = useDeleteWishlist();
 
   const handleDelete = async (id: string) => {
@@ -43,40 +54,80 @@ export default function WishlistItem({ wishlist }: Props) {
   };
 
   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> */}
+    <WishlistItemContext.Provider value={{ wishlist, handleDelete }}>
+      <TableRow
+        sx={{
+          display: "grid",
+          gridTemplateColumns: "2fr 1fr 1fr 1fr",
+          alignItems: "center",
+          gap: 2,
+          padding: "10px 15px",
+          ...sx,
+        }}
+      >
+        {children}
+      </TableRow>
+    </WishlistItemContext.Provider>
+  );
+};
 
-      <Box display="flex" alignItems="center" gap={1} justifySelf="end">
-        <IconButton onClick={() => handleDelete(wishlist?.Id || "")}>
-          <Delete fontSize="large" color="inherit" />
-        </IconButton>
-      </Box>
-    </TableRow>
+WishlistItem.Name = () => {
+  const ctx = useContext(WishlistItemContext);
+  if (!ctx) return null;
+  const { wishlist } = ctx;
+  return (
+    <Paragraph ellipsis>
+      <NavLink3
+        href={`/account/wish-lists/${wishlist?.Id}`}
+        text={wishlist?.Name ?? ""}
+      />
+    </Paragraph>
   );
-}
+};
+
+WishlistItem.Date = () => {
+  const ctx = useContext(WishlistItemContext);
+  if (!ctx) return null;
+  const { wishlist } = ctx;
+  return (
+    <Paragraph ellipsis>
+      {format(
+        new Date(wishlist?.CreatedDateTime ?? wishlist?.LastUpdated ?? ""),
+        "MMM dd, yyyy",
+      )}
+    </Paragraph>
+  );
+};
+
+WishlistItem.ProductCount = () => {
+  const ctx = useContext(WishlistItemContext);
+  if (!ctx) return null;
+  const { wishlist } = ctx;
+  const t = useTranslations("Account.Wishlists");
+  return (
+    <Paragraph ellipsis>
+      {`${wishlist?.ProductListLines?.length} ${t("products")}`}
+    </Paragraph>
+  );
+};
+
+WishlistItem.Actions = ({ children }: { children?: ReactNode }) => {
+  return (
+    <Box display="flex" alignItems="center" gap={1} justifySelf="end">
+      {children}
+    </Box>
+  );
+};
+
+WishlistItem.Delete = () => {
+  const ctx = useContext(WishlistItemContext);
+  if (!ctx) return null;
+  const { wishlist, handleDelete } = ctx;
+  return (
+    <IconButton onClick={() => handleDelete(wishlist?.Id || "")}>
+      <Delete fontSize="large" color="inherit" />
+    </IconButton>
+  );
+};
+
+export default WishlistItem;