@evenicanpm/storefront-core 2.2.0 → 2.3.0

package/src/api-manager/types/Datasource.ts

@@ -7,10 +7,16 @@ import type {
 	GetStatesInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
 import type * as cartSchemas from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import type {
+	GetInvoicesDetailsInput,
+	GetInvoicesInput,
+	Invoice,
+	InvoiceDetails,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/invoice.schema";
 import type {
 	GetSalesOrderDetailsInput,
+	GetSalesOrdersInput,
 	SalesOrder,
-	SalesOrderInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
 import type {
 	ChannelConfiguration,
@@ -47,6 +53,7 @@ export interface DatasourceApis {
 	order: OrderApi;
 	address: AddressApi;
 	organization: OrganizationApi;
+	invoice: InvoiceApi;
 }
 
 export abstract class Datasource {
@@ -59,6 +66,7 @@ export abstract class Datasource {
 	abstract address: Partial<AddressApi>;
 	abstract organization: Partial<OrganizationApi>;
 	abstract session: Partial<SessionApi>;
+	abstract invoice: Partial<InvoiceApi>;
 
 	constructor(name: string) {
 		this.name = name;
@@ -89,6 +97,9 @@ export interface UserApi {
 	updateUser(user: userSchemas.User): Promise<userSchemas.User>;
 	getUser(): Promise<userSchemas.User | null>;
 	getUserCounts(userId: string): Promise<userSchemas.UserCounts>;
+	getCustomerBalance(
+		input: userSchemas.GetCustomerBalanceInput,
+	): Promise<userSchemas.CustomerBalances>;
 	// wishlists
 	getWishlists(): Promise<userSchemas.Wishlist[]>;
 	getWishlistDetails(
@@ -199,7 +210,7 @@ export interface CategoryApi {
  * Order Data Actions
  */
 export interface OrderApi {
-	getSalesOrders(input: SalesOrderInput): Promise<SalesOrder[]>;
+	getSalesOrders(input: GetSalesOrdersInput): Promise<SalesOrder[]>;
 	getSalesOrderDetails(input: GetSalesOrderDetailsInput): Promise<SalesOrder>;
 }
 
@@ -214,3 +225,11 @@ export interface AddressApi {
 	updateAddress(address: Address): Promise<Address>;
 	deleteAddress(addressId: string): Promise<string>;
 }
+
+/**
+ * Invoice Data Actions
+ */
+export interface InvoiceApi {
+	getInvoices(input: GetInvoicesInput): Promise<Invoice[]>;
+	getInvoiceDetails(input: GetInvoicesDetailsInput): Promise<InvoiceDetails>;
+}

package/src/auth/better-auth.ts

@@ -1,6 +1,6 @@
 import { betterAuth } from "better-auth";
-import { genericOAuth, customSession } from "better-auth/plugins";
 import { nextCookies } from "better-auth/next-js";
+import { customSession, genericOAuth } from "better-auth/plugins";
 
 const tenantName = process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_TENANT_NAME || "";
 const loginAuthority = `https://${tenantName}.ciamlogin.com/${tenantName}.onmicrosoft.com`;

package/src/cms/blocks/block-manager.tsx

@@ -3,12 +3,14 @@ import type { Block } from "@/cms/blocks/interfaces";
 import {
 	BrandLogosScroller,
 	CategoryCarousel,
+	CtaBanner,
 	FeaturedCategories,
 	FeaturedProducts,
 	FeaturePill,
 	Footer,
 	Hero,
 	HeroCarousel,
+	HeroImage,
 	Image,
 	ProductCarousel,
 	ProductSectionFullWidth,
@@ -18,6 +20,8 @@ import {
 
 const componentMap = {
 	"blocks.hero-section": Hero,
+	"blocks.hero-image": HeroImage,
+	"blocks.cta-banner": CtaBanner,
 	"blocks.features-pill": FeaturePill, // Should replace this with bazaar-react-ts/src/pages-sections/market-2/section-2/section-2.tsx
 	"blocks.featured-products": FeaturedProducts,
 	"blocks.featured-categories": FeaturedCategories,
@@ -40,8 +44,16 @@ const getBlockComponent: <B extends Block>(
 ) => JSX.Element | null = (block: Block) => {
 	const Component = componentMap[
 		block.__component as keyof typeof componentMap
-	] as React.ComponentType<Block>;
-	return <Component key={`block-${block.id}`} {...block} />;
+	] as React.ComponentType<Block> | undefined;
+	if (!Component) {
+		console.warn(
+			`BlockManager: no component mapped for "${block.__component}"`,
+		);
+		return null;
+	}
+	return (
+		<Component key={`block-${block.__component}-${block.id}`} {...block} />
+	);
 };
 
 interface BlockManagerProps {
@@ -55,7 +67,10 @@ const BlockManager: React.FC<BlockManagerProps> = ({ blocks }) => {
 			{blocks.map((block, idx) => {
 				const isLast = idx === blocks.length - 1;
 				return (
-					<Box key={`block-wrapper-${block.id}`} mb={isLast ? 0 : 6}>
+					<Box
+						key={`block-wrapper-${block.__component}-${block.id}`}
+						mb={isLast ? 0 : 6}
+					>
 						{getBlockComponent(block, idx)}
 					</Box>
 				);

package/src/cms/blocks/components/cta-banner.tsx

@@ -0,0 +1,65 @@
+import { Box, Button, Container, Typography } from "@mui/material";
+import NextLink from "next/link";
+import type { CtaBannerBlock } from "@/cms/blocks/interfaces";
+
+const CtaBanner = ({
+	heading,
+	subtext,
+	buttonText,
+	buttonLink,
+	backgroundColor,
+}: CtaBannerBlock) => {
+	const bgColor = backgroundColor || "#1a237e";
+
+	return (
+		<Box
+			sx={{
+				backgroundColor: bgColor,
+				color: "#fff",
+				py: { xs: 6, md: 8 },
+				px: 2,
+				textAlign: "center",
+				width: "100%",
+			}}
+		>
+			<Container maxWidth="md">
+				<Typography
+					variant="h3"
+					component="h2"
+					sx={{ fontWeight: 700, mb: subtext ? 2 : 3, color: "#fff" }}
+				>
+					{heading}
+				</Typography>
+				{subtext && (
+					<Typography
+						variant="h6"
+						sx={{ color: "rgba(255,255,255,0.85)", mb: 3, fontWeight: 400 }}
+					>
+						{subtext}
+					</Typography>
+				)}
+				{buttonText && buttonLink && (
+					<Button
+						component={NextLink}
+						href={buttonLink}
+						variant="contained"
+						size="large"
+						sx={{
+							backgroundColor: "#fff",
+							color: bgColor,
+							fontWeight: 700,
+							px: 4,
+							"&:hover": {
+								backgroundColor: "rgba(255,255,255,0.9)",
+							},
+						}}
+					>
+						{buttonText}
+					</Button>
+				)}
+			</Container>
+		</Box>
+	);
+};
+
+export default CtaBanner;

package/src/cms/blocks/components/hero-image.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, Container, Typography } from "@mui/material";
+import NextImage from "next/image";
+import NextLink from "next/link";
+import type { HeroImageBlock } from "@/cms/blocks/interfaces";
+
+const sxBanner = {
+	position: "relative",
+	backgroundColor: "grey.900",
+	color: "white",
+	height: 500,
+	width: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	overflow: "hidden",
+	marginBottom: "50px",
+};
+
+const contentContainer = {
+	position: "absolute",
+	top: 0,
+	left: 0,
+	right: 0,
+	bottom: 0,
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	alignItems: "center",
+	zIndex: 2,
+	textAlign: "center",
+	padding: "0 20px",
+};
+
+const overlayStyle = {
+	position: "absolute",
+	inset: 0,
+	backgroundColor: "rgba(10,25,60,0.55)",
+	zIndex: 1,
+};
+
+const HeroImage = ({
+	heading,
+	subheading,
+	buttonText,
+	buttonLink,
+	image,
+}: HeroImageBlock) => {
+	const imageUrl = image?.url;
+
+	return (
+		<Box sx={sxBanner}>
+			{imageUrl && (
+				<NextImage
+					src={imageUrl}
+					alt={heading}
+					fill
+					style={{ objectFit: "cover", objectPosition: "center" }}
+					priority
+				/>
+			)}
+			<Box sx={overlayStyle} />
+			<Container sx={contentContainer}>
+				<Typography variant="h1" gutterBottom>
+					{heading}
+				</Typography>
+				{subheading && (
+					<Typography variant="h5" gutterBottom sx={{ marginBottom: "30px" }}>
+						{subheading}
+					</Typography>
+				)}
+				{buttonText && buttonLink && (
+					<NextLink href={buttonLink} passHref>
+						<Button color="primary" size="large" variant="contained">
+							{buttonText}
+						</Button>
+					</NextLink>
+				)}
+			</Container>
+		</Box>
+	);
+};
+
+export default HeroImage;

package/src/cms/blocks/index.tsx

@@ -14,3 +14,5 @@ export { default as ProductCarousel } from "@/cms/blocks/components/product-caro
 export { default as ProductSectionFullWidth } from "@/cms/blocks/components/product-section-fullwidth/index";
 export { default as RichText } from "@/cms/blocks/components/rich-text";
 export { default as Services } from "@/cms/blocks/components/services/index";
+export { default as CtaBanner } from "./components/cta-banner";
+export { default as HeroImage } from "./components/hero-image";

package/src/cms/blocks/interfaces.ts

@@ -141,6 +141,26 @@ export interface RichTextBlock {
 	content: string;
 }
 
+export interface HeroImageBlock {
+	id: number;
+	__component: "blocks.hero-image";
+	heading: string;
+	subheading?: string | null;
+	buttonText?: string | null;
+	buttonLink?: string | null;
+	image?: Media | null;
+}
+
+export interface CtaBannerBlock {
+	id: number;
+	__component: "blocks.cta-banner";
+	heading: string;
+	subtext?: string | null;
+	buttonText?: string | null;
+	buttonLink?: string | null;
+	backgroundColor?: string | null;
+}
+
 export interface ImageFormat {
 	ext: string;
 	url: string;

package/src/cms/draft-mode-badge.tsx

@@ -0,0 +1,26 @@
+import { Box, Chip } from "@mui/material";
+
+export function DraftModeBadge() {
+	return (
+		<Box
+			sx={{
+				position: "fixed",
+				bottom: 16,
+				right: 16,
+				zIndex: 9999,
+			}}
+		>
+			<Chip
+				label="Draft Mode"
+				size="small"
+				sx={{
+					backgroundColor: "#f59e0b",
+					color: "#000",
+					fontWeight: 700,
+					fontSize: "0.75rem",
+					boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+				}}
+			/>
+		</Box>
+	);
+}

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/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,
+	createAccountRoutes,
+} 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 = createAccountRoutes(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>;
@@ -69,9 +89,10 @@ const UserContext = createContext<UserContextValue | undefined>(undefined);
 
 interface Props {
 	children?: ReactNode;
+	routeOverrides?: AccountRouteOverrides;
 }
 
-const User = ({ children }: Props) => {
+const User = ({ children, routeOverrides }: Props) => {
 	const { data: session, isPending } = useBetterAuthSession();
 	const status = isPending
 		? "loading"
@@ -87,6 +108,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 +166,12 @@ const User = ({ children }: Props) => {
 	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 	const open = Boolean(anchorEl);
 
+	const menuItems = buildMenuItems(routeOverrides);
+
 	const value: UserContextValue = {
 		isAuthenticated,
 		status,
-		menuItems: MENU_ITEMS,
+		menuItems,
 		handleLogout,
 		handleSignIn,
 		signOut: signOutCustom,
@@ -198,7 +223,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/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/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";