@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/pages-v2/account/orders/ordered-products.tsx

@@ -6,157 +6,160 @@ import Grid from "@mui/material/Grid2";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import {
-  H6,
-  Paragraph,
-  Span,
+	H6,
+	Paragraph,
+	Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
-  FlexBetween,
-  FlexBox,
+	FlexBetween,
+	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import useCurrencyFormatter from "@/lib/currency-formatter";
-import { SalesLine, SalesOrder } from "@/api-manager/schemas/order.schema";
+import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
+import {
+	SalesLine,
+	SalesOrder,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
 import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
-import buildDetailUrl from "@/lib/build-detail-url";
+import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 import React, { createContext } from "react";
 
 type Props = { order: SalesOrder };
 
 const OrderedProductsContext = createContext<{
-  order: SalesOrder;
-  formatCurrency: (val: number) => string;
+	order: SalesOrder;
+	formatCurrency: (val: number) => string;
 } | null>(null);
 
 const OrderedProducts = ({
-  order,
-  children,
+	order,
+	children,
 }: React.PropsWithChildren<Props>) => {
-  const { formatCurrency } = useCurrencyFormatter();
-  return (
-    <OrderedProductsContext.Provider value={{ order, formatCurrency }}>
-      <Card sx={{ p: 0, mb: "30px" }}>{children}</Card>
-    </OrderedProductsContext.Provider>
-  );
+	const { formatCurrency } = useCurrencyFormatter();
+	return (
+		<OrderedProductsContext.Provider value={{ order, formatCurrency }}>
+			<Card sx={{ p: 0, mb: "30px" }}>{children}</Card>
+		</OrderedProductsContext.Provider>
+	);
 };
 
 // Subcomponents
 OrderedProducts.Header = ({ children }: React.PropsWithChildren) => (
-  <FlexBetween px={3} py={2} flexWrap="wrap" bgcolor="grey.200">
-    {children}
-  </FlexBetween>
+	<FlexBetween px={3} py={2} flexWrap="wrap" bgcolor="grey.200">
+		{children}
+	</FlexBetween>
 );
 
 OrderedProducts.HeaderItem = ({
-  title,
-  value,
+	title,
+	value,
 }: {
-  title: string;
-  value: string;
+	title: string;
+	value: string;
 }) => {
-  const t = useTranslations("Account.OrderDetails");
-  return (
-    <FlexBox gap={1} alignItems="center">
-      <Paragraph color="grey.600">{t(title)}</Paragraph>
-      <Paragraph>{value}</Paragraph>
-    </FlexBox>
-  );
+	const t = useTranslations("Account.OrderDetails");
+	return (
+		<FlexBox gap={1} alignItems="center">
+			<Paragraph color="grey.600">{t(title)}</Paragraph>
+			<Paragraph>{value}</Paragraph>
+		</FlexBox>
+	);
 };
 
 OrderedProducts.List = ({ children }: React.PropsWithChildren) => (
-  <Grid container spacing={2} padding={"20px 15px 10px"} alignItems={"center"}>
-    {children}
-  </Grid>
+	<Grid container spacing={2} padding={"20px 15px 10px"} alignItems={"center"}>
+		{children}
+	</Grid>
 );
 
 OrderedProducts.Row = ({
-  item,
-  children,
+	item,
+	children,
 }: {
-  item: SalesLine;
-  children: React.ReactNode;
+	item: SalesLine;
+	children: React.ReactNode;
 }) => {
-  return (
-    <Link
-      href={buildDetailUrl(
-        item?.Product?.Name ?? "",
-        item?.Product?.RecordId ?? 0,
-      )}
-      style={{ display: "contents" }}
-    >
-      {children}
-    </Link>
-  );
+	return (
+		<Link
+			href={buildDetailUrl(
+				item?.Product?.Name ?? "",
+				item?.Product?.RecordId ?? 0,
+			)}
+			style={{ display: "contents" }}
+		>
+			{children}
+		</Link>
+	);
 };
 
 OrderedProducts.ColumnOne = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <Grid size={{ xs: 12, sm: 5 }}>
-      <FlexBox gap={2.5} alignItems="center" padding={"12px 15px"}>
-        {children}
-      </FlexBox>
-    </Grid>
-  );
+	return (
+		<Grid size={{ xs: 12, sm: 5 }}>
+			<FlexBox gap={2.5} alignItems="center" padding={"12px 15px"}>
+				{children}
+			</FlexBox>
+		</Grid>
+	);
 };
 
 OrderedProducts.Image = ({ item }: { item: SalesLine }) => {
-  return (
-    <Avatar
-      alt={item?.Product?.Name}
-      src={item?.Product?.PrimaryImageUrl}
-      sx={{ height: 64, width: 64 }}
-    />
-  );
+	return (
+		<Avatar
+			alt={item?.Product?.Name}
+			src={item?.Product?.PrimaryImageUrl}
+			sx={{ height: 64, width: 64 }}
+		/>
+	);
 };
 
 OrderedProducts.Info = ({ children }: { children: React.ReactNode }) => {
-  return <div>{children}</div>;
+	return <div>{children}</div>;
 };
 
 OrderedProducts.Title = ({ item }: { item: SalesLine }) => {
-  return <H6>{item?.Product?.Name}</H6>;
+	return <H6>{item?.Product?.Name}</H6>;
 };
 
 OrderedProducts.Price = ({ item }: { item: SalesLine }) => {
-  const { formatCurrency } = useCurrencyFormatter();
-  return (
-    <Paragraph color="grey.600">
-      {formatCurrency(item?.Price ?? 0)} x {item?.Quantity || 1}
-    </Paragraph>
-  );
+	const { formatCurrency } = useCurrencyFormatter();
+	return (
+		<Paragraph color="grey.600">
+			{formatCurrency(item?.Price ?? 0)} x {item?.Quantity || 1}
+		</Paragraph>
+	);
 };
 
 OrderedProducts.Dimensions = ({ item }: { item: SalesLine }) => {
-  if (!item.Product?.Dimensions?.length) {
-    return (
-      <Grid size={{ xs: 8, sm: 4 }}>
-        <Box />
-      </Grid>
-    );
-  }
-
-  return (
-    <Grid size={{ xs: 8, sm: 4 }}>
-      {item.Product.Dimensions.map((dim, i) => (
-        <Paragraph key={i} paddingLeft={"15px"}>
-          <Span>{ProductDimensionType[dim.DimensionTypeValue || 0]}:</Span>
-          <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
-        </Paragraph>
-      ))}
-    </Grid>
-  );
+	if (!item.Product?.Dimensions?.length) {
+		return (
+			<Grid size={{ xs: 8, sm: 4 }}>
+				<Box />
+			</Grid>
+		);
+	}
+
+	return (
+		<Grid size={{ xs: 8, sm: 4 }}>
+			{item.Product.Dimensions.map((dim, i) => (
+				<Paragraph key={i} paddingLeft={"15px"}>
+					<Span>{ProductDimensionType[dim.DimensionTypeValue || 0]}:</Span>
+					<Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
+				</Paragraph>
+			))}
+		</Grid>
+	);
 };
 
 OrderedProducts.ReviewButton = () => {
-  const t = useTranslations("Account.OrderDetails");
-  return (
-    <Grid size={{ xs: 4, sm: 3 }}>
-      <Box justifySelf={"end"}>
-        <Button variant="text" color="primary">
-          {t("writeReview")}
-        </Button>
-      </Box>
-    </Grid>
-  );
+	const t = useTranslations("Account.OrderDetails");
+	return (
+		<Grid size={{ xs: 4, sm: 3 }}>
+			<Box justifySelf={"end"}>
+				<Button variant="text" color="primary">
+					{t("writeReview")}
+				</Button>
+			</Box>
+		</Grid>
+	);
 };
 
 export default OrderedProducts;

package/src/pages-v2/account/profile/profile-button.test.tsx

@@ -4,56 +4,56 @@ import ProfileButton from "@evenicanpm/storefront-core/src/pages-v2/account/prof
 import { getMsalInstance, initializeMsal, getRequestConfig } from "@/auth/msal";
 
 vi.mock("@/auth/msal", () => ({
-  initializeMsal: vi.fn(),
-  getMsalInstance: vi.fn(),
-  getRequestConfig: vi.fn(),
+	initializeMsal: vi.fn(),
+	getMsalInstance: vi.fn(),
+	getRequestConfig: vi.fn(),
 }));
 
 vi.mock("@evenicanpm/storefront-core/src/components-v2/T/index", () => ({
-  default: ({ path }: { path: string }) => <span>{path}</span>,
+	default: ({ path }: { path: string }) => <span>{path}</span>,
 }));
 
 describe("ProfileButton Component", () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("renders disabled button initially (MSAL not ready)", () => {
-    render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
-    const button = screen.getByRole("button");
-    expect(button).toBeDisabled();
-  });
-
-  it("initializes MSAL on mount", async () => {
-    render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
-    await waitFor(() => {
-      expect(initializeMsal).toHaveBeenCalled();
-    });
-  });
-
-  it("calls MSAL loginRedirect when clicked", async () => {
-    (initializeMsal as ReturnType<typeof vi.fn>).mockImplementation(() =>
-      Promise.resolve(),
-    );
-    (getRequestConfig as ReturnType<typeof vi.fn>).mockReturnValue({
-      scopes: ["user.read"],
-    });
-    (getMsalInstance as ReturnType<typeof vi.fn>).mockReturnValue({
-      loginRedirect: vi.fn(),
-    });
-    render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
-
-    await waitFor(() => {
-      expect(initializeMsal).toHaveBeenCalled();
-    });
-
-    const button = screen.getByRole("button");
-    fireEvent.click(button);
-
-    await waitFor(() => {
-      expect(getMsalInstance().loginRedirect).toHaveBeenCalledWith({
-        scopes: ["user.read"],
-      });
-    });
-  });
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("renders disabled button initially (MSAL not ready)", () => {
+		render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
+		const button = screen.getByRole("button");
+		expect(button).toBeDisabled();
+	});
+
+	it("initializes MSAL on mount", async () => {
+		render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
+		await waitFor(() => {
+			expect(initializeMsal).toHaveBeenCalled();
+		});
+	});
+
+	it("calls MSAL loginRedirect when clicked", async () => {
+		(initializeMsal as ReturnType<typeof vi.fn>).mockImplementation(() =>
+			Promise.resolve(),
+		);
+		(getRequestConfig as ReturnType<typeof vi.fn>).mockReturnValue({
+			scopes: ["user.read"],
+		});
+		(getMsalInstance as ReturnType<typeof vi.fn>).mockReturnValue({
+			loginRedirect: vi.fn(),
+		});
+		render(<ProfileButton type="edit" path="Account.Profile.btnEditProfile" />);
+
+		await waitFor(() => {
+			expect(initializeMsal).toHaveBeenCalled();
+		});
+
+		const button = screen.getByRole("button");
+		fireEvent.click(button);
+
+		await waitFor(() => {
+			expect(getMsalInstance().loginRedirect).toHaveBeenCalledWith({
+				scopes: ["user.read"],
+			});
+		});
+	});
 });

package/src/pages-v2/account/profile/profile-button.tsx

@@ -6,45 +6,45 @@ import { Button } from "@mui/material";
 import T from "@evenicanpm/storefront-core/src/components-v2/T/index";
 import { RedirectRequest } from "@azure/msal-browser";
 interface Props {
-  type: string;
-  path: string;
+	type: string;
+	path: string;
 }
 
 const ProfileButton = ({ type, path }: Props) => {
-  const [isMsalReady, setIsMsalReady] = useState(false);
+	const [isMsalReady, setIsMsalReady] = useState(false);
 
-  useEffect(() => {
-    const initMsal = async () => {
-      await initializeMsal();
-      setIsMsalReady(true);
-    };
-    initMsal();
-  }, []);
+	useEffect(() => {
+		const initMsal = async () => {
+			await initializeMsal();
+			setIsMsalReady(true);
+		};
+		initMsal();
+	}, []);
 
-  const handleProfile = async () => {
-    if (!isMsalReady) {
-      console.error("MSAL is not initialized yet.");
-      return;
-    }
+	const handleProfile = async () => {
+		if (!isMsalReady) {
+			console.error("MSAL is not initialized yet.");
+			return;
+		}
 
-    try {
-      const req = getRequestConfig(type);
-      await getMsalInstance().loginRedirect(req as RedirectRequest); // "handleRedirectPromise" is in user component.
-    } catch (error) {
-      console.error("Profile update through MSAL failed", error);
-    }
-  };
+		try {
+			const req = getRequestConfig(type);
+			await getMsalInstance().loginRedirect(req as RedirectRequest); // "handleRedirectPromise" is in user component.
+		} catch (error) {
+			console.error("Profile update through MSAL failed", error);
+		}
+	};
 
-  return (
-    <Button
-      onClick={() => handleProfile()}
-      disabled={!isMsalReady}
-      color="primary"
-      sx={{ bgcolor: "primary.light", px: 4 }}
-    >
-      <T path={path} />
-    </Button>
-  );
+	return (
+		<Button
+			onClick={() => handleProfile()}
+			disabled={!isMsalReady}
+			color="primary"
+			sx={{ bgcolor: "primary.light", px: 4 }}
+		>
+			<T path={path} />
+		</Button>
+	);
 };
 
 export default ProfileButton;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, ReactNode } from "react";
+import { createContext, useContext } from "react";
 import _ from "lodash";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { Theme } from "@mui/material/styles";
@@ -9,79 +9,82 @@ import { useTranslations } from "next-intl";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import {
-  Small,
-  Span,
+	Small,
+	Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 // API
-import { User } from "@/api-manager/schemas/user.schema";
+import { User } from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import { PropsWithChildren } from "react";
 
 interface UserInfoContextValue {
-  user: User;
+	user: User;
 }
 
 const UserInfoContext = createContext<UserInfoContextValue | null>(null);
-interface UserInfoProps {
-  user: User;
-  children: ReactNode;
+
+interface UserInfoProps extends PropsWithChildren {
+	user: User;
 }
 
 const UserInfo = ({ user, children }: UserInfoProps) => {
-  const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));
+	const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));
 
-  return (
-    <UserInfoContext.Provider value={{ user }}>
-      <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",
-          }),
-        }}
-      >
-        {children}
-      </Card>
-    </UserInfoContext.Provider>
-  );
+	return (
+		<UserInfoContext.Provider value={{ user }}>
+			<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",
+					}),
+				}}
+			>
+				{children}
+			</Card>
+		</UserInfoContext.Provider>
+	);
 };
+
 interface ItemProps {
-  title: string;
-  field?: keyof User;
-  value?: string;
-  transform?: (val: string) => string;
+	title: string;
+	field?: keyof User;
+	value?: string;
+	transform?: (val: string) => string;
 }
+
 UserInfo.Item = ({ title, field, value, transform }: ItemProps) => {
-  const ctx = useContext(UserInfoContext);
-  if (!ctx) return null;
-  const { user } = ctx;
-  const t = useTranslations("Account.Profile");
+	const ctx = useContext(UserInfoContext);
+	if (!ctx) return null;
+	const { user } = ctx;
+	const t = useTranslations("Account.Profile");
 
-  let displayValue = value;
+	let displayValue = value;
 
-  if (!value && field) {
-    displayValue = String(user?.[field] ?? "");
-  }
+	if (!value && field) {
+		displayValue = String(user?.[field] ?? "");
+	}
 
-  if (transform && displayValue) {
-    displayValue = transform(displayValue);
-  }
+	if (transform && displayValue) {
+		displayValue = transform(displayValue);
+	}
 
-  return (
-    <FlexBox flexDirection="column" p={1}>
-      <Small color="grey.600" mb={0.5}>
-        {t(title)}
-      </Small>
-      <Span>{displayValue}</Span>
-    </FlexBox>
-  );
+	return (
+		<FlexBox flexDirection="column" p={1}>
+			<Small color="grey.600" mb={0.5}>
+				{t(title)}
+			</Small>
+			<Span>{displayValue}</Span>
+		</FlexBox>
+	);
 };
 
 export default UserInfo;

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

@@ -3,30 +3,30 @@ 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)",
-  },
+	paddingBottom: "1.5rem",
+	[theme.breakpoints.down("md")]: {
+		boxShadow: "none",
+		overflowY: "auto",
+		height: "calc(100vh - 64px)",
+	},
 }));
 
 export const StyledNavLink = styled(NavLink, {
-  shouldForwardProp: (prop) => prop !== "isCurrentPath",
+	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 },
-  },
+	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 },
+	},
 }));