@evenicanpm/storefront-core 1.1.0 → 1.2.1

package/src/components-v2/wishlist-dialogs/add-to-wishlist/hooks/use-add-to-wishlist.ts

@@ -7,96 +7,96 @@ import { useTranslations } from "next-intl";
 // Core/storefront utilities
 import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import {
-  ExtendedProductListLine,
-  WishlistLinesInput,
+	ExtendedProductListLine,
+	WishlistLinesInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
 
 // API manager - mutations
-import useAddToWishlist from "@/api-manager/services/user/mutations/add-to-wishlist";
-import useRemoveFromWishlist from "@/api-manager/services/user/mutations/remove-from-wishlist";
+import useAddToWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/add-to-wishlist";
+import useRemoveFromWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/remove-from-wishlist";
 
 // API manager - queries and types
-import getWishlists from "@/api-manager/services/user/queries/get-wishlists";
+import getWishlists from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-wishlists";
 
 /**
  * Handles adding and removing products from a wishlist.
  * @category Hook
  */
 export default function UseWishlist() {
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
-  const { mutateAsync: addToWishlist, isPending: addPending } =
-    useAddToWishlist();
-  const { mutateAsync: removeFromWishlist, isPending: removePending } =
-    useRemoveFromWishlist();
-  const { data: wishlists } = getWishlists.useSuspenseData();
-  const loading = addPending || removePending;
+	const t = useTranslations("Account.Wishlists");
+	const { setNotification } = useNotification();
+	const { mutateAsync: addToWishlist, isPending: addPending } =
+		useAddToWishlist();
+	const { mutateAsync: removeFromWishlist, isPending: removePending } =
+		useRemoveFromWishlist();
+	const { data: wishlists } = getWishlists.useSuspenseData();
+	const loading = addPending || removePending;
 
-  const handleAddToWishlist = async (wishlistId: string, productId: number) => {
-    try {
-      const wishlistLine = [
-        {
-          ProductListId: wishlistId,
-          ProductId: productId,
-          Quantity: 1,
-          UnitOfMeasure: "ea",
-        },
-      ];
+	const handleAddToWishlist = async (wishlistId: string, productId: number) => {
+		try {
+			const wishlistLine = [
+				{
+					ProductListId: wishlistId,
+					ProductId: productId,
+					Quantity: 1,
+					UnitOfMeasure: "ea",
+				},
+			];
 
-      const wishlistLinesInput: WishlistLinesInput = {
-        Id: wishlistId,
-        ProductListLines: wishlistLine,
-      };
+			const wishlistLinesInput: WishlistLinesInput = {
+				Id: wishlistId,
+				ProductListLines: wishlistLine,
+			};
 
-      await addToWishlist(wishlistLinesInput);
-      setNotification({
-        message: t("wishlistLineAddSuccess"),
-        severity: "success",
-      });
-    } catch (error) {
-      setNotification({
-        message: t("wishlistLineAddFailed"),
-        severity: "error",
-      });
-    }
-  };
+			await addToWishlist(wishlistLinesInput);
+			setNotification({
+				message: t("wishlistLineAddSuccess"),
+				severity: "success",
+			});
+		} catch (error) {
+			setNotification({
+				message: t("wishlistLineAddFailed"),
+				severity: "error",
+			});
+		}
+	};
 
-  const handleRemoveFromWishlist = async (
-    wishlistId: string,
-    productId: number,
-  ) => {
-    // get the selected wishlist
-    const wishlist = wishlists.find((wishlist) => wishlist.Id === wishlistId);
-    if (!wishlist) return null;
-    try {
-      const extendedWishlistLine = wishlist.ProductListLines?.find(
-        (item: ExtendedProductListLine) => item.ProductId === productId,
-      );
+	const handleRemoveFromWishlist = async (
+		wishlistId: string,
+		productId: number,
+	) => {
+		// get the selected wishlist
+		const wishlist = wishlists.find((wishlist) => wishlist.Id === wishlistId);
+		if (!wishlist) return null;
+		try {
+			const extendedWishlistLine = wishlist.ProductListLines?.find(
+				(item: ExtendedProductListLine) => item.ProductId === productId,
+			);
 
-      if (extendedWishlistLine) {
-        const wishlistLinesInput: WishlistLinesInput = {
-          Id: wishlist.Id,
-          ProductListLines: [extendedWishlistLine],
-        };
+			if (extendedWishlistLine) {
+				const wishlistLinesInput: WishlistLinesInput = {
+					Id: wishlist.Id,
+					ProductListLines: [extendedWishlistLine],
+				};
 
-        await removeFromWishlist(wishlistLinesInput);
+				await removeFromWishlist(wishlistLinesInput);
 
-        setNotification({
-          message: t("wishlistLineRemoveSuccess"),
-          severity: "success",
-        });
-      }
-    } catch (error) {
-      setNotification({
-        message: t("wishlistLineRemoveFailed"),
-        severity: "error",
-      });
-    }
-  };
+				setNotification({
+					message: t("wishlistLineRemoveSuccess"),
+					severity: "success",
+				});
+			}
+		} catch (error) {
+			setNotification({
+				message: t("wishlistLineRemoveFailed"),
+				severity: "error",
+			});
+		}
+	};
 
-  return {
-    handleAddToWishlist,
-    handleRemoveFromWishlist,
-    loading,
-  };
+	return {
+		handleAddToWishlist,
+		handleRemoveFromWishlist,
+		loading,
+	};
 }

package/src/components-v2/wishlist-dialogs/add-to-wishlist/index.tsx

@@ -1,31 +1,31 @@
 import AddToWishlistDialog from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-dialog";
 
 interface Props {
-  open: boolean;
-  handleClose: () => void;
-  productId?: number;
-  onSuccess?: () => void;
+	open: boolean;
+	handleClose: () => void;
+	productId?: number;
+	onSuccess?: () => void;
 }
 
 /**
  * @category Implementation
  */
 const AddToWishListDialog1 = ({ open, handleClose, productId }: Props) => {
-  return (
-    <>
-      <AddToWishlistDialog
-        open={open}
-        handleClose={handleClose}
-        productId={productId}
-      >
-        <AddToWishlistDialog.Header />
-        <AddToWishlistDialog.List>
-          <AddToWishlistDialog.List.Item />
-        </AddToWishlistDialog.List>
-        <AddToWishlistDialog.BottomUI />
-      </AddToWishlistDialog>
-    </>
-  );
+	return (
+		<>
+			<AddToWishlistDialog
+				open={open}
+				handleClose={handleClose}
+				productId={productId}
+			>
+				<AddToWishlistDialog.Header />
+				<AddToWishlistDialog.List>
+					<AddToWishlistDialog.List.Item />
+				</AddToWishlistDialog.List>
+				<AddToWishlistDialog.BottomUI />
+			</AddToWishlistDialog>
+		</>
+	);
 };
 
 export default AddToWishListDialog1;

package/src/components-v2/wishlist-dialogs/create-wishlist/CreateWishlistButton.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CreateWishlistButton from "./create-wishlist-button";
+
+const meta = {
+	title: "Wishlist/CreateWishlist",
+	component: CreateWishlistButton,
+	tags: ["autodocs"],
+} satisfies Meta<typeof CreateWishlistButton>;
+
+export default meta;
+type Story = StoryObj<typeof CreateWishlistButton>;
+
+export const Default: Story = {
+	render: () => <CreateWishlistButton />,
+};

package/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-bottom-ui.tsx

@@ -5,43 +5,43 @@ import Grid from "@mui/material/Grid2";
 import { CreateNewWishlistContext } from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-dialog";
 
 function BottomUI() {
-  const t = useTranslations("Account.Wishlists");
-  const ctx = useContext(CreateNewWishlistContext);
-  if (!ctx)
-    throw new Error(
-      "CreateNewWishlistForm must be used within a CreateNewWishlistContext",
-    );
-  const { handleClose } = ctx;
-  return (
-    <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>
-  );
+	const t = useTranslations("Account.Wishlists");
+	const ctx = useContext(CreateNewWishlistContext);
+	if (!ctx)
+		throw new Error(
+			"CreateNewWishlistForm must be used within a CreateNewWishlistContext",
+		);
+	const { handleClose } = ctx;
+	return (
+		<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>
+	);
 }
 
 export default BottomUI;

package/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-dialog.tsx

@@ -14,87 +14,87 @@ import useCreateWishlist from "@evenicanpm/storefront-core/src/api-manager/servi
 import CreateNewWishlistForm from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-form";
 
 interface Props {
-  open: boolean;
-  handleClose: () => void;
-  children: React.ReactNode;
+	open: boolean;
+	handleClose: () => void;
+	children: React.ReactNode;
 }
 
 const createFormSchema = (t: ReturnType<typeof useTranslations>) =>
-  z.object({
-    Id: z.string(),
-    Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
-    Comment: z.string().optional(),
-    IsPublic: z.boolean().optional(),
-  });
+	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<ReturnType<typeof createFormSchema>>;
 type FormikContextType = ReturnType<typeof useFormik<FormSchemaType>>;
 
 interface CreateNewWishlistContext {
-  formik: FormikContextType;
-  handleClose: () => void;
+	formik: FormikContextType;
+	handleClose: () => void;
 }
 
 export const CreateNewWishlistContext =
-  createContext<CreateNewWishlistContext | null>(null);
+	createContext<CreateNewWishlistContext | null>(null);
 
 export default function CreateNewList(props: Props) {
-  const { children } = props;
-  const t = useTranslations("Account.Wishlists");
-  const { setNotification } = useNotification();
+	const { children } = props;
+	const t = useTranslations("Account.Wishlists");
+	const { setNotification } = useNotification();
 
-  const { mutateAsync: createWishlist } = useCreateWishlist();
-  const FormSchema = createFormSchema(t);
-  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 { mutateAsync: createWishlist } = useCreateWishlist();
+	const FormSchema = createFormSchema(t);
+	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),
-  });
+	const formik = useFormik<FormSchemaType>({
+		initialValues: {
+			Id: "",
+			Name: "",
+			Comment: "",
+			IsPublic: false,
+		},
+		onSubmit: handleSubmit,
+		validate: withZodSchema(FormSchema),
+	});
 
-  const { resetForm, isSubmitting } = formik;
+	const { resetForm, isSubmitting } = formik;
 
-  const handleClose = () => {
-    if (isFunction(props.handleClose)) {
-      props.handleClose();
-      resetForm();
-    }
-  };
+	const handleClose = () => {
+		if (isFunction(props.handleClose)) {
+			props.handleClose();
+			resetForm();
+		}
+	};
 
-  return (
-    <CreateNewWishlistContext.Provider value={{ formik, handleClose }}>
-      <Dialog open={props.open} onClose={handleClose}>
-        <DialogContent>
-          {isSubmitting ? <CircularProgress /> : children}
-        </DialogContent>
-      </Dialog>
-    </CreateNewWishlistContext.Provider>
-  );
+	return (
+		<CreateNewWishlistContext.Provider value={{ formik, handleClose }}>
+			<Dialog open={props.open} onClose={handleClose}>
+				<DialogContent>
+					{isSubmitting ? <CircularProgress /> : children}
+				</DialogContent>
+			</Dialog>
+		</CreateNewWishlistContext.Provider>
+	);
 }
 
 const FormTitle = () => {
-  const t = useTranslations("Account.Wishlists");
-  return <H5 mb={4}>{t("formTitle")}</H5>;
+	const t = useTranslations("Account.Wishlists");
+	return <H5 mb={4}>{t("formTitle")}</H5>;
 };
 CreateNewList.Title = FormTitle;
 CreateNewList.Form = CreateNewWishlistForm;

package/src/components-v2/wishlist-dialogs/create-wishlist/compound/create-wishlist-form.tsx

@@ -13,99 +13,99 @@ import { CreateNewWishlistContext } from "@evenicanpm/storefront-core/src/compon
  * @category Sub-Component
  */
 const CreateNewWishlistForm = ({ children }: { children: React.ReactNode }) => {
-  const ctx = useContext(CreateNewWishlistContext);
-  if (!ctx)
-    throw new Error(
-      "CreateNewWishlistForm must be used within a CreateNewWishlistContext",
-    );
-  const { formik } = ctx;
-  return (
-    <Box component="form" onSubmit={formik.handleSubmit}>
-      <Grid container spacing={3}>
-        {children}
-      </Grid>
-    </Box>
-  );
+	const ctx = useContext(CreateNewWishlistContext);
+	if (!ctx)
+		throw new Error(
+			"CreateNewWishlistForm must be used within a CreateNewWishlistContext",
+		);
+	const { formik } = ctx;
+	return (
+		<Box component="form" onSubmit={formik.handleSubmit}>
+			<Grid container spacing={3}>
+				{children}
+			</Grid>
+		</Box>
+	);
 };
 
 /*
  * @category Sub-Component
  */
 function NameTextField() {
-  const t = useTranslations("Account.Wishlists");
-  const ctx = useContext(CreateNewWishlistContext);
-  if (!ctx)
-    throw new Error(
-      "CreateNewWishlistForm must be used within a CreateNewWishlistContext",
-    );
-  const { formik } = 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>
-  );
+	const t = useTranslations("Account.Wishlists");
+	const ctx = useContext(CreateNewWishlistContext);
+	if (!ctx)
+		throw new Error(
+			"CreateNewWishlistForm must be used within a CreateNewWishlistContext",
+		);
+	const { formik } = 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>
+	);
 }
 
 /*
  * @category Sub-Component
  */
 function DescriptionTextField() {
-  const t = useTranslations("Account.Wishlists");
-  const ctx = useContext(CreateNewWishlistContext);
-  if (!ctx)
-    throw new Error(
-      "CreateNewWishlistForm must be used within a CreateNewWishlistContext",
-    );
-  const { formik } = 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>
-  );
+	const t = useTranslations("Account.Wishlists");
+	const ctx = useContext(CreateNewWishlistContext);
+	if (!ctx)
+		throw new Error(
+			"CreateNewWishlistForm must be used within a CreateNewWishlistContext",
+		);
+	const { formik } = 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>
+	);
 }
 
 function IsPrivateCheckbox() {
-  const t = useTranslations("Account.Wishlists");
-  const ctx = useContext(CreateNewWishlistContext);
-  if (!ctx)
-    throw new Error(
-      "CreateNewWishlistForm must be used within a CreateNewWishlistContext",
-    );
-  const { formik } = 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>
-  );
+	const t = useTranslations("Account.Wishlists");
+	const ctx = useContext(CreateNewWishlistContext);
+	if (!ctx)
+		throw new Error(
+			"CreateNewWishlistForm must be used within a CreateNewWishlistContext",
+		);
+	const { formik } = 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>
+	);
 }
 
 CreateNewWishlistForm.BottomUI = BottomUI;