@evenicanpm/storefront-core 2.2.0 → 2.3.1

package/src/cms/queries.ts

@@ -0,0 +1,81 @@
+/**
+ * THIS IS A REACT-QUERY WRAPPER LAYER AROUND THE CMS SDK.
+ * IT PROVIDES TYPING AND STRUCTURE TO THE QUERIES USED THROUGHOUT THE APP, AND
+ * IT ALSO PROVIDES A SINGLE PLACE TO CONFIGURE QUERY OPTIONS FOR CMS DATA.
+ */
+import { cms } from "@evenicanpm/cms";
+import type { Blog } from "@evenicanpm/cms/src/content/blogs/types";
+import type { Page } from "@evenicanpm/cms/src/content/pages/types";
+import { queryOptions } from "@tanstack/react-query";
+import type { StrapiResponse } from "strapi-sdk-js";
+
+// strapi-sdk-js's StrapiResponseMetaPagination is missing pageCount, which Strapi
+// includes when queries use withCount:true. This extends the meta to include it.
+type StrapiPagedResponse<T> = StrapiResponse<T> & {
+	meta: {
+		pagination: {
+			page: number;
+			pageSize: number;
+			pageCount: number;
+			total: number;
+		};
+	};
+};
+
+export const cmsQueryKeys = {
+	navigation: () => ["cms", "navigation"] as const,
+	page: (
+		slug: string,
+		status: "draft" | "published" = "published",
+		locale?: string,
+	) => ["cms", "pages", slug, status, locale] as const,
+	blogs: (page: number, pageSize: number, locale?: string) =>
+		["cms", "blogs", page, pageSize, locale] as const,
+	blog: (id: string, locale?: string) => ["cms", "blog", id, locale] as const,
+};
+
+export const cmsQueryOptions = {
+	navigation: () =>
+		queryOptions({
+			queryKey: cmsQueryKeys.navigation(),
+			queryFn: (): Promise<unknown> => cms.navigation.getMainNavigation(),
+		}),
+	page: (
+		slug: string,
+		status: "draft" | "published" = "published",
+		locale?: string,
+	) =>
+		queryOptions({
+			queryKey: cmsQueryKeys.page(slug, status, locale),
+			queryFn: (): Promise<StrapiResponse<Page[]>> =>
+				(
+					cms.pages.getPage as (opts: {
+						slug: string;
+						status?: "draft" | "published";
+						locale?: string;
+					}) => Promise<StrapiResponse<Page[]>>
+				)({ slug, status, locale }),
+		}),
+	blogs: (page: number, pageSize: number, locale?: string) =>
+		queryOptions({
+			queryKey: cmsQueryKeys.blogs(page, pageSize, locale),
+			queryFn: (): Promise<StrapiPagedResponse<Blog[]>> =>
+				(
+					cms.blogs.getBlogs as (opts: {
+						pagination: { page: number; pageSize: number };
+						locale?: string;
+					}) => Promise<StrapiPagedResponse<Blog[]>>
+				)({ pagination: { page, pageSize }, locale }),
+		}),
+	blog: (id: string, locale?: string) =>
+		queryOptions({
+			queryKey: cmsQueryKeys.blog(id, locale),
+			queryFn: (): Promise<StrapiResponse<Blog>> =>
+				(
+					cms.blogs.getBlog as (opts: {
+						id: string;
+						locale?: string;
+					}) => Promise<StrapiResponse<Blog>>
+				)({ id, locale }),
+		}),
+};

package/src/components/_tests_/site-logo.test.tsx

@@ -15,7 +15,7 @@ vi.mock("next/link", () => ({
 describe("SiteLogo", () => {
 	it("renders logo image", () => {
 		render(<SiteLogo />);
-		const logo = screen.getByAltText("E4 Logo");
+		const logo = screen.getByAltText("e4 Logo");
 		expect(logo).toBeInTheDocument();
 		// next/image rewrites src to an optimized URL (e.g. /_next/image?url=...)
 		expect(logo.getAttribute("src")).toMatch(/logo-blue\.png/);

package/src/components/flex-box/flex-box.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Box, { type BoxProps } from "@mui/material/Box";
 
 /**

package/src/components/header/components/user.tsx

@@ -4,6 +4,7 @@ import useSessionInit from "@evenicanpm/storefront-core/src/api-manager/services
 import useSessionLogout from "@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-logout";
 // API hooks
 import useUpdateUser from "@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user";
+import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
 import {
 	getMsalInstance,
 	initializeMsal,
@@ -12,6 +13,11 @@ import signOutCustom from "@evenicanpm/storefront-core/src/auth/signout";
 import MobileUserIcon from "@evenicanpm/storefront-core/src/components/icons/user";
 import { NavLink } from "@evenicanpm/storefront-core/src/components/nav-link";
 import T from "@evenicanpm/storefront-core/src/components/T";
+import {
+	type AccountRoute,
+	type AccountRouteOverrides,
+	useCreateAccountRoutes,
+} from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 // UI Components
 import {
 	Box,
@@ -21,15 +27,16 @@ import {
 	ListItemButton,
 	Popover,
 } from "@mui/material";
-import { useRouter } from "next/navigation";
+import { genericOAuthClient } from "better-auth/client/plugins";
 // Auth components
 import { createAuthClient } from "better-auth/react";
-import { genericOAuthClient } from "better-auth/client/plugins";
+import { useRouter } from "next/navigation";
 
 const authClient = createAuthClient({
 	plugins: [genericOAuthClient()],
 });
 const { useSession: useBetterAuthSession } = authClient;
+
 import type React from "react";
 import {
 	createContext,
@@ -46,17 +53,30 @@ interface IdTokenClaims {
 	family_name?: string;
 }
 
-const MENU_ITEMS = [
-	{ href: "/account/profile", label: "Account.Menu.profile" },
-	{ href: "/account/addresses", label: "Account.Menu.addresses" },
-	{ href: "/account/orders", label: "Account.Menu.orders" },
-	{ href: "/account/wish-lists", label: "Account.Menu.wishlists" },
-];
+const routeToMenuItem = (route: AccountRoute) => ({
+	href: route.href,
+	label: `Account.Menu.${route.titleKey}`,
+	Icon: route.Icon,
+	count: route.count,
+});
+
+const buildMenuItems = (overrides?: AccountRouteOverrides) => {
+	const routes = useCreateAccountRoutes(overrides);
+	return [
+		routeToMenuItem(routes.profile),
+		routeToMenuItem(routes.orders),
+		routeToMenuItem(routes.wishlists),
+		routeToMenuItem(routes.invoices),
+		routeToMenuItem(routes.addresses),
+	];
+};
+
+type MenuItem = { href: string; label: string };
 
 interface UserContextValue {
 	isAuthenticated: boolean;
 	status: string;
-	menuItems: typeof MENU_ITEMS;
+	menuItems: MenuItem[];
 	handleLogout: () => Promise<void>;
 	handleSignIn: () => void;
 	signOut: () => Promise<void>;
@@ -87,6 +107,8 @@ const User = ({ children }: Props) => {
 	const { mutateAsync: sessionInit } = useSessionInit();
 	const { mutateAsync: updateUser } = useUpdateUser();
 	const { mutateAsync: sessionLogout } = useSessionLogout();
+	// Register the "me" query on the client so the hydrated cache entry has a queryFn for refetches
+	getUser.useData();
 
 	// session init
 	useEffect(() => {
@@ -143,10 +165,12 @@ const User = ({ children }: Props) => {
 	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 	const open = Boolean(anchorEl);
 
+	const menuItems = buildMenuItems();
+
 	const value: UserContextValue = {
 		isAuthenticated,
 		status,
-		menuItems: MENU_ITEMS,
+		menuItems,
 		handleLogout,
 		handleSignIn,
 		signOut: signOutCustom,
@@ -198,7 +222,7 @@ User.DesktopTrigger = function DesktopTrigger() {
 User.Menu = function Menu({
 	children,
 }: {
-	children?: (items: typeof MENU_ITEMS) => React.ReactNode;
+	children?: (items: MenuItem[]) => React.ReactNode;
 }) {
 	const ctx = useContext(UserContext);
 	if (!ctx) return null;

package/src/components/header/sticky-header.tsx

@@ -8,6 +8,7 @@ import { Sticky } from "@evenicanpm/ui";
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useCallback, useState } from "react";
+import { AccountRouteOverrides } from "../../pages/account/account-routes";
 
 /**
  * @category Implementation

package/src/components/mini-cart/mini-cart.tsx

@@ -121,8 +121,8 @@ MiniCart.Items = () => {
 	} = ctx;
 
 	return (
-		<Box height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}>
-			{cart.CartLines.length > 0 ? (
+		<Box height={`calc(100vh - ${cart?.CartLines?.length ? "207px" : "75px"})`}>
+			{cart?.CartLines?.length > 0 ? (
 				<Scrollbar>
 					{cart?.CartLines?.map((item) => (
 						<MiniCartItem
@@ -153,7 +153,7 @@ MiniCart.Actions = () => {
 	const ctx = useContext(MiniCartContext);
 	if (!ctx) return null;
 	const { cart, currency, handleNavigate } = ctx;
-	return cart?.CartLines.length > 0 ? (
+	return cart?.CartLines?.length > 0 ? (
 		<BottomActions
 			total={currency(cart?.TotalAmount || 0)}
 			handleNavigate={handleNavigate}

package/src/components/product-cards/product-card-plp/product-card.tsx

@@ -1,7 +1,4 @@
-import {
-	FlexBetween,
-	FlexBox,
-} from "@evenicanpm/storefront-core/src/components/flex-box/index";
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components/flex-box/index";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components/ImageWithFallback";
 // LOCAL CUSTOM COMPONENTS
 import DiscountChip from "@evenicanpm/storefront-core/src/components/product-cards/discount-chip";
@@ -9,6 +6,7 @@ import FavoriteButton from "@evenicanpm/storefront-core/src/components/product-c
 // STYLED COMPONENTS
 import {
 	HoverIconWrapper,
+	PlpImageWrapper,
 	PriceText,
 } from "@evenicanpm/storefront-core/src/components/product-cards/product-card-plp/styles/index";
 import QuantityButtons from "@evenicanpm/storefront-core/src/components/product-cards/quantity-buttons";
@@ -86,15 +84,9 @@ ProductCardPlp.ImageWrapper = ({ children }: { children: React.ReactNode }) => {
 
 	return (
 		<Link href={buildDetailUrl(title, id)}>
-			<FlexBox
-				className="hover-box-container"
-				position="relative"
-				bgcolor="grey.50"
-				borderRadius={3}
-				mb={2}
-			>
+			<PlpImageWrapper className="hover-box-container">
 				{children}
-			</FlexBox>
+			</PlpImageWrapper>
 		</Link>
 	);
 };

package/src/components/product-cards/product-card-plp/styles/index.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import { FlexBox } from "@evenicanpm/storefront-core/src/components/flex-box/index";
 import styled from "@mui/material/styles/styled";
 
 export const PriceText = styled("p")(({ theme }) => ({
@@ -17,6 +18,20 @@ export const PriceText = styled("p")(({ theme }) => ({
 	},
 }));
 
+export const PlpImageWrapper = styled(FlexBox)(({ theme }) => ({
+	position: "relative",
+	backgroundColor: theme.palette.grey[50],
+	borderRadius: theme.shape.borderRadius * 3,
+	marginBottom: theme.spacing(2),
+
+	"& img": {
+		maxHeight: 300,
+		objectFit: "contain",
+		width: "100%",
+		borderRadius: 12,
+	},
+}));
+
 export const HoverIconWrapper = styled("div")({
 	zIndex: 2,
 	top: "7px",

package/src/components/site-logo.tsx

@@ -12,7 +12,7 @@ const SiteLogo: React.FC<SiteLogoProps> = () => {
 		<Link href="/">
 			<Image
 				src="/logo-blue.png"
-				alt="E4 Logo"
+				alt="e4 Logo"
 				width={180}
 				height={54}
 				style={{ width: "auto", height: 54 }}

package/src/components/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-header.tsx

@@ -13,6 +13,7 @@ import { createAuthClient } from "better-auth/react";
 import { useTranslations } from "next-intl";
 
 const { useSession } = createAuthClient();
+
 // ICONS
 import { MdFavorite } from "react-icons/md";
 

package/src/components/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-item.tsx

@@ -9,6 +9,7 @@ import {
 } from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/add-to-wishlist/compound/context";
 import UseWishlist from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/add-to-wishlist/hooks/use-add-to-wishlist";
 import { StyledTableRow } from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/styles";
+import { useCreateAccountRoutes } from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 import { Add, Delete } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import { format } from "date-fns";
@@ -25,6 +26,7 @@ export default function WishlistDialogItem() {
 
 	const itemCtx = useContext(WishListItemContext);
 	const dialogCtx = useContext(AddToWishListDialogContext);
+	const { wishlists: wishlistsRoute } = useCreateAccountRoutes();
 
 	if (!itemCtx || !dialogCtx)
 		throw new Error("WishlistModalItem must be used within a wishlist context");
@@ -59,7 +61,7 @@ export default function WishlistDialogItem() {
 			}}
 		>
 			<Paragraph ellipsis sx={{ fontWeight: "bold" }}>
-				<Link href={`/account/wish-lists/${wishlist?.Id}`}>
+				<Link href={`${wishlistsRoute.href}/${wishlist?.Id}`}>
 					{wishlist?.Name ?? ""}
 				</Link>
 			</Paragraph>

package/src/pages/account/account-navigation.tsx

@@ -9,6 +9,11 @@ import {
 	Paragraph,
 	Span,
 } from "@evenicanpm/storefront-core/src/components/Typography";
+import {
+	type AccountRoute,
+	type AccountRouteOverrides,
+	useCreateAccountRoutes,
+} from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 // STYLED COMPONENTS
 import {
 	MainContainer,
@@ -17,88 +22,114 @@ import {
 import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { createContext, Fragment, type ReactNode } from "react";
-// ICON COMPONENTS
-import {
-	MdFavoriteBorder as FavoriteBorder,
-	MdPerson as Person,
-	MdPlace as Place,
-	MdOutlineShoppingBag as ShoppingBagOutlined,
-} from "react-icons/md";
+import type { IconType } from "react-icons";
 
 /**
  * 
  *** Extend menu: 
 <AccountNavigation
-  items={[
-    ...DEFAULT_MENU_ITEMS,
-    {
-      title: "EXTRAS",
-      list: [
-        {
-          href: "/account/rewards",
-          title: "rewards",
-          Icon: RewardsIcon,
-          count: 5,
-        },
-      ],
-    },
-  ]}
+	items={[
+		...DEFAULT_MENU_ITEMS,
+		{
+			title: "EXTRAS",
+			list: [
+				{
+					href: "/account/rewards",
+					title: "rewards",
+					Icon: RewardsIcon,
+					count: 5,
+				},
+			],
+		},
+	]}
 />;
 
 *** Override completely:
 <AccountNavigation>
-  <AccountNavigation.Section title="Custom Section">
-    <AccountNavigation.Item
-      href="/custom"
-      Icon={CustomIcon}
-      label="Custom Page"
-    />
-  </AccountNavigation.Section>
+	<AccountNavigation.Section title="Custom Section">
+		<AccountNavigation.Item
+			href="/custom"
+			Icon={CustomIcon}
+			label="Custom Page"
+		/>
+	</AccountNavigation.Section>
 </AccountNavigation>;
  */
 
-export const DEFAULT_MENU_ITEMS = [
-	{
-		title: "DASHBOARD",
-		list: [
-			{
-				href: "/account/orders",
-				title: "orders",
-				Icon: ShoppingBagOutlined,
-				count: 0,
-			},
-			{ href: "/account/wish-lists", title: "wishlists", Icon: FavoriteBorder },
-		],
-	},
-	{
-		title: "ACCOUNT SETTINGS",
-		list: [
-			{ href: "/account/profile", title: "profile", Icon: Person },
-			{ href: "/account/addresses", title: "addresses", Icon: Place, count: 0 },
-		],
-	},
-];
+interface NavItem {
+	href: string;
+	title: string;
+	Icon: IconType;
+	count?: number;
+}
+
+interface NavSection {
+	title: string;
+	list: NavItem[];
+}
+
+/**
+ *
+ * @param route
+ * @returns
+ */
+const routeToNavItem = (route: AccountRoute): NavItem => {
+	return {
+		href: route.href,
+		title: route.titleKey,
+		Icon: route.Icon,
+		count: route.count,
+	};
+};
+
+export const DEFAULT_MENU_ITEMS = (
+	overrides?: AccountRouteOverrides,
+): NavSection[] => {
+	const routes = useCreateAccountRoutes(overrides);
+	return [
+		{
+			title: "DASHBOARD",
+			list: [
+				routeToNavItem(routes.orders),
+				routeToNavItem(routes.wishlists),
+				routeToNavItem(routes.invoices),
+			],
+		},
+		{
+			title: "ACCOUNT SETTINGS",
+			list: [routeToNavItem(routes.profile), routeToNavItem(routes.addresses)],
+		},
+	];
+};
 
 interface AccountNavigationContextValue {
-	items: typeof DEFAULT_MENU_ITEMS;
+	items: NavSection[];
 }
 
 const AccountNavigationContext =
 	createContext<AccountNavigationContextValue | null>(null);
+
 interface AccountNavigationProps {
-	items?: typeof DEFAULT_MENU_ITEMS;
+	items?: NavSection[];
 	children?: ReactNode;
+	routeOverrides?: AccountRouteOverrides;
 }
 
-const AccountNavigation = ({ items, children }: AccountNavigationProps) => {
+const AccountNavigation = ({
+	items,
+	children,
+	routeOverrides,
+}: AccountNavigationProps) => {
 	const pathname = usePathname();
 	const t = useTranslations("Account.Menu");
 
 	const { data: user } = getUser.useData();
 	const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
 
-	// Merge default items with provided overrides
-	const mergedItems = (items || DEFAULT_MENU_ITEMS).map((section) => ({
+	const defaultItems = DEFAULT_MENU_ITEMS(routeOverrides);
+
+	// Render either the props items or the default items
+	const itemsWCounts = (items || defaultItems).map((section) => ({
 		...section,
 		list: section.list.map((item) => {
 			if (item.href === "/account/orders") {
@@ -112,10 +143,10 @@ const AccountNavigation = ({ items, children }: AccountNavigationProps) => {
 	}));
 
 	return (
-		<AccountNavigationContext.Provider value={{ items: mergedItems }}>
+		<AccountNavigationContext.Provider value={{ items: itemsWCounts }}>
 			<MainContainer>
 				{children ||
-					mergedItems.map((section) => (
+					itemsWCounts.map((section) => (
 						<AccountNavigation.Section
 							key={section.title}
 							title={section.title}
@@ -151,10 +182,7 @@ AccountNavigation.Section = ({ title, children }: SectionProps) => {
 	);
 };
 
-interface ItemProps {
-	href: string;
-	Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-	count?: number;
+interface ItemProps extends Pick<NavItem, "href" | "Icon" | "count"> {
 	label: string;
 	isActive?: boolean;
 }

package/src/pages/account/account-routes.ts

@@ -0,0 +1,86 @@
+import { createContext, useContext } from "react";
+import type { IconType } from "react-icons";
+import {
+	MdFavoriteBorder as FavoriteBorder,
+	MdDocumentScanner as InvoicesIcon,
+	MdPerson as Person,
+	MdPlace as Place,
+	MdOutlineShoppingBag as ShoppingBagOutlined,
+} from "react-icons/md";
+
+export interface AccountRoute {
+	href: string;
+	titleKey: string;
+	Icon: IconType;
+	count?: number;
+}
+
+export interface AccountRouteOverrides {
+	wishlists?: { href?: string; titleKey?: string };
+}
+
+const defaults = {
+	orders: {
+		href: "/account/orders",
+		titleKey: "orders",
+		Icon: ShoppingBagOutlined,
+		count: 0,
+	},
+	wishlists: {
+		href: "/account/wish-lists",
+		titleKey: "wishlists",
+		Icon: FavoriteBorder,
+	},
+	invoices: {
+		href: "/account/invoices",
+		titleKey: "invoices",
+		Icon: InvoicesIcon,
+	},
+	profile: { href: "/account/profile", titleKey: "profile", Icon: Person },
+	addresses: {
+		href: "/account/addresses",
+		titleKey: "addresses",
+		Icon: Place,
+		count: 0,
+	},
+} as const satisfies Record<string, AccountRoute>;
+
+/**
+ * Context for overriding account route configuration.
+ * Allows parent providers to customize route paths and title keys
+ * without modifying the default route definitions.
+ *
+ * @example
+ * ```tsx
+ * <RoutesOverrideContext.Provider value={{ wishlists: { href: "/account/order-templates", titleKey: "orderTemplates" } }}>
+ *   {children}
+ * </RoutesOverrideContext.Provider>
+ * ```
+ */
+export const RoutesOverrideContext = createContext<
+	AccountRouteOverrides | undefined
+>(undefined);
+
+export type AccountRouteKey = keyof typeof defaults;
+
+/**
+ * Hook that builds the account routes map, merging defaults with context-level
+ * and call-site overrides. Override priority (highest wins):
+ * 1. `overrides` parameter passed directly to the hook
+ * 2. Values from {@link RoutesOverrideContext}
+ * 3. Built-in defaults
+ *
+ * @param overrides - Optional route overrides applied at the call site
+ * @returns The full set of account routes with any overrides merged in
+ */
+export const useCreateAccountRoutes = (overrides?: AccountRouteOverrides) => {
+	const ctxOverrides = useContext(RoutesOverrideContext);
+	return {
+		...defaults,
+		wishlists: {
+			...defaults.wishlists,
+			...ctxOverrides?.wishlists,
+			...overrides?.wishlists,
+		},
+	};
+};

package/src/pages/account/orders/order-history-filter-types.tsx

@@ -0,0 +1,26 @@
+export enum FilterSourceType {
+	Origin = "Origin",
+	CreatedDate = "CreatedDate",
+	OrderStatus = "OrderStatus",
+}
+
+export interface OriginFilter {
+	sourceType: FilterSourceType.Origin;
+	label: string;
+	value: number;
+}
+
+export interface CreatedDateFilter {
+	sourceType: FilterSourceType.CreatedDate;
+	label: string;
+	startValue?: string;
+	endValue?: string;
+}
+
+export interface OrderStatusFilter {
+	sourceType: FilterSourceType.OrderStatus;
+	label: string;
+	value: number;
+}
+
+export type FilterOption = OriginFilter | CreatedDateFilter | OrderStatusFilter;