@evenicanpm/storefront-core 1.2.2 → 1.4.0

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

@@ -1,20 +1,18 @@
 "use client";
 
-import { createContext, useContext } from "react";
-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";
+// API
+import type { User } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
 // 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 "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
-import { PropsWithChildren } from "react";
+import Card from "@mui/material/Card";
+import type { Theme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+import { createContext, type PropsWithChildren, useContext } from "react";
 
 interface UserInfoContextValue {
 	user: User;
@@ -63,9 +61,9 @@ interface ItemProps {
 
 UserInfo.Item = ({ title, field, value, transform }: ItemProps) => {
 	const ctx = useContext(UserInfoContext);
+	const t = useTranslations("Account.Profile");
 	if (!ctx) return null;
 	const { user } = ctx;
-	const t = useTranslations("Account.Profile");
 
 	let displayValue = value;
 

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

@@ -1,6 +1,6 @@
+import NavLink from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
 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",

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

@@ -1,24 +1,25 @@
 "use client";
 
-import React, { useEffect, createContext, useContext, ReactNode } from "react";
-import isFunction from "lodash/isFunction";
-import { useTranslations } from "next-intl";
+import useCreateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/create-wishlist";
+import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import {
 	Box,
 	Button,
-	TextField,
+	Checkbox,
 	Dialog,
 	DialogContent,
 	FormControlLabel,
-	Checkbox,
+	TextField,
 } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
 import { useFormik } from "formik";
-import { z } from "zod";
 import { withZodSchema } from "formik-validator-zod";
-import useCreateWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/create-wishlist";
+import isFunction from "lodash/isFunction";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext, type ReactNode, useContext, useEffect } from "react";
+import { z } from "zod";
 
 interface CreateNewListContextValue {
 	formik: ReturnType<typeof useFormik<FormSchemaType>>;
@@ -60,6 +61,7 @@ const CreateNewList = ({
 				setNotification({ message: t("wishlistSuccess"), severity: "success" });
 			} catch (error) {
 				setNotification({ message: t("wishlistFailed"), severity: "error" });
+				console.log(error);
 			}
 		},
 		validate: withZodSchema(FormSchema),

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

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState } from "react";
-import { Button } from "@mui/material";
 import T from "@evenicanpm/storefront-core/src/components-v2/T";
 import CreateNewList from "@evenicanpm/storefront-core/src/pages-v2/account/wishlist/create-new-list";
+import { Button } from "@mui/material";
+import { useState } from "react";
 
 interface Props {
 	path: string;

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

@@ -1,21 +1,21 @@
 "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";
-import { MdDelete as Delete } from "react-icons/md";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { NavLink3 } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
-import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
-// API
-import useDeleteWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/delete-wishlist";
-import {
+import type {
 	Wishlist,
 	WishlistDetailInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+// API
+import useDeleteWishlist from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/delete-wishlist";
+import { NavLink3 } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { Box, IconButton } from "@mui/material";
+import type { SxProps } from "@mui/material/styles";
+import { format } from "date-fns";
+import { useTranslations } from "next-intl";
+import { createContext, type ReactNode, useContext } from "react";
+import { MdDelete as Delete } from "react-icons/md";
 
 interface WishlistItemContextValue {
 	wishlist: Wishlist;
@@ -50,6 +50,7 @@ const WishlistItem = ({ wishlist, children, sx }: RootProps) => {
 				message: t("deleteWishlistFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 
@@ -101,9 +102,9 @@ WishlistItem.Date = () => {
 
 WishlistItem.ProductCount = () => {
 	const ctx = useContext(WishlistItemContext);
+	const t = useTranslations("Account.Wishlists");
 	if (!ctx) return null;
 	const { wishlist } = ctx;
-	const t = useTranslations("Account.Wishlists");
 	return (
 		<Paragraph ellipsis>
 			{`${wishlist?.ProductListLines?.length ?? 0} ${t("products")}`}

package/src/pages-v2/blog/blog-card.tsx

@@ -0,0 +1,58 @@
+// GLOBAL CUSTOM COMPONENTS
+
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { ZoomLazyImage } from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import { NavLink2 } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
+import {
+	H3,
+	Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// MUI ICON COMPONENTS
+import AccessTime from "@mui/icons-material/AccessTime";
+import Box from "@mui/material/Box";
+import { format } from "date-fns";
+
+interface Props {
+	title: string;
+	imageUrl: string;
+	description: string;
+	createdAt: Date;
+	id: string;
+}
+
+const ICON_STYLE = { fontSize: "1rem", color: "grey.600" };
+
+export default function BlogCard({
+	title,
+	imageUrl,
+	description,
+	createdAt,
+	id,
+}: Readonly<Props>) {
+	return (
+		<Box overflow="hidden">
+			<ZoomLazyImage width={588} height={272} alt="blog-image" src={imageUrl} />
+
+			<Box py={3}>
+				<H3 lineHeight={1.3} color="secondary.900">
+					{title}
+				</H3>
+
+				<FlexBox alignItems="center" mt="5px" gap={3}>
+					<FlexBox alignItems="center" gap={0.5}>
+						<AccessTime sx={ICON_STYLE} />
+						<Paragraph>
+							{format(new Date(createdAt), "dd MMMM, yyyy")}
+						</Paragraph>
+					</FlexBox>
+				</FlexBox>
+
+				<Paragraph mt="1.2rem" mb="0.7rem">
+					{description}
+				</Paragraph>
+
+				<NavLink2 title="CONTINUE READING" url={`/blog/${id}`} />
+			</Box>
+		</Box>
+	);
+}

package/src/pages-v2/blog/pagination.tsx

@@ -2,7 +2,7 @@
 import {
 	Pagination as MuiPagination,
 	PaginationItem,
-	PaginationRenderItemParams,
+	type PaginationRenderItemParams,
 } from "@mui/material";
 import Link from "next/link";
 
@@ -18,7 +18,6 @@ const Pagination = ({ count, page, pageSize }: Props) => {
 		<MuiPagination
 			variant="outlined"
 			color="primary"
-			shape="rounded"
 			page={page}
 			count={count}
 			renderItem={(item: PaginationRenderItemParams) =>

package/src/pages-v2/cart/__tests__/cart-item.test.tsx

@@ -1,17 +1,16 @@
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import React from "react";
+import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import CartItem from "@evenicanpm/storefront-core/src/pages/cart/cart-item";
 import cartData from "@evenicanpm/storefront-core/src/pages-v2/cart/__tests__/cart-with-items.json";
-import { NextIntlClientProvider } from "next-intl";
+import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
 import ENUS from "@messages/en-US.json";
 import fr from "@messages/fr.json";
-import CartItem from "@evenicanpm/storefront-core/src/pages/cart/cart-item";
-import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { NextIntlClientProvider } from "next-intl";
+import type React from "react";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - Complaining about date types from the json
+// @ts-expect-error - Complaining about date types from the json
 const cart: Cart = cartData;
 
 const queryClient = new QueryClient();
@@ -70,7 +69,6 @@ describe.skip("cart-item", () => {
 				/>
 			</Wrapper>,
 		);
-		// expect(screen.getByText('Buy 2 or more')).toBeInTheDocument();
 		expect(screen.getByTestId("discount-strikethru")).toHaveTextContent(
 			"195.00",
 		);

package/src/pages-v2/cart/__tests__/checkout-form.test.tsx

@@ -1,15 +1,14 @@
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import CheckoutForm from "@evenicanpm/storefront-core/src/pages/cart/checkout-form";
+import cartData from "@evenicanpm/storefront-core/src/pages-v2/cart/__tests__/cart-with-items.json";
+import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
+import ENUS from "@messages/en-US.json";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
-import cartData from "@evenicanpm/storefront-core/src/pages-v2/cart/__tests__/cart-with-items.json";
+import _ from "lodash";
 import { NextIntlClientProvider } from "next-intl";
-import ENUS from "@messages/en-US.json";
-//import fr from "../../../../../../messages/fr.json";
+import type React from "react";
 import { vi } from "vitest";
-import CheckoutForm from "@evenicanpm/storefront-core/src/pages/cart/checkout-form";
-import _ from "lodash";
-import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
 
 vi.mock("next-auth/react", () => ({
 	// Empty mock for next-auth to stop throwing errors
@@ -17,7 +16,7 @@ vi.mock("next-auth/react", () => ({
 
 // global.fetch = vi.fn(() => Promise.resolve({ json: () => ({}) }));
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - Complaining about date types from the json
+// @ts-expect-error - Complaining about date types from the json
 const cart: Cart = cartData;
 const queryClient = new QueryClient();
 const Wrapper = ({ children }: React.PropsWithChildren) => (
@@ -28,13 +27,6 @@ const Wrapper = ({ children }: React.PropsWithChildren) => (
 	</NextIntlClientProvider>
 );
 
-// Commenting out until used
-/* const Wrapper2 = ({ children }: React.PropsWithChildren) => (
-  <NextIntlClientProvider locale={"fr"} messages={fr}>
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  </NextIntlClientProvider>
-); */
-
 describe.skip("Checkout Form", () => {
 	it("Has Total amount displayed", () => {
 		render(