@evenicanpm/storefront-core 2.1.0 → 2.3.0

package/src/api-manager/services/invoice/queries/get-invoice-details.ts

@@ -0,0 +1,18 @@
+import type { GetInvoicesDetailsInput } from "@evenicanpm/storefront-core/src/api-manager/schemas/invoice.schema";
+import {
+	createApiPath,
+	createQuery,
+} from "@evenicanpm/storefront-core/src/api-manager/services/create-query";
+import type { SalesInvoice } from "@msdyn365-commerce/retail-proxy/dist";
+
+const apiPath = createApiPath("invoice", "getInvoiceDetails");
+const config = {
+	queryKey: "invoices",
+};
+
+const getInvoices = createQuery<GetInvoicesDetailsInput, SalesInvoice>(
+	apiPath,
+	config,
+);
+
+export default getInvoices;

package/src/api-manager/services/invoice/queries/get-invoices.ts

@@ -0,0 +1,18 @@
+import {
+	createApiPath,
+	createQuery,
+} from "@evenicanpm/storefront-core/src/api-manager/services/create-query";
+import type { OrderInvoice } from "@msdyn365-commerce/retail-proxy/dist";
+import type { GetInvoicesInput } from "../../../schemas/invoice.schema";
+
+const apiPath = createApiPath("invoice", "getInvoices");
+const config = {
+	queryKey: "invoices",
+};
+
+const getInvoices = createQuery<GetInvoicesInput, OrderInvoice[]>(
+	apiPath,
+	config,
+);
+
+export default getInvoices;

package/src/api-manager/services/order/queries/get-order-details.ts

@@ -9,7 +9,7 @@ import {
 
 const apiPath = createApiPath("order", "getSalesOrderDetails");
 const config = {
-	queryKey: "salesOrderDetails",
+	queryKey: "salesOrders",
 };
 
 const getOrderDetails = createQuery<GetSalesOrderDetailsInput, SalesOrder>(

package/src/api-manager/services/order/queries/get-orders.ts

@@ -1,6 +1,6 @@
 import type {
+	GetSalesOrdersInput,
 	SalesOrder,
-	SalesOrderInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
 import {
 	createApiPath,
@@ -9,9 +9,12 @@ import {
 
 const apiPath = createApiPath("order", "getSalesOrders");
 const config = {
-	queryKey: "salesOrderDetails",
+	queryKey: "SalesOrders",
 };
 
-const getOrders = createQuery<SalesOrderInput, SalesOrder[]>(apiPath, config);
+const getOrders = createQuery<GetSalesOrdersInput, SalesOrder[]>(
+	apiPath,
+	config,
+);
 
 export default getOrders;

package/src/api-manager/services/user/queries/get-customer-balance.ts

@@ -0,0 +1,20 @@
+import type {
+	CustomerBalances,
+	GetCustomerBalanceInput,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/user.schema";
+import {
+	createApiPath,
+	createQuery,
+} from "@evenicanpm/storefront-core/src/api-manager/services/create-query";
+
+const apiPath = createApiPath("user", "getCustomerBalance");
+
+const getCustomerBalance = createQuery<
+	GetCustomerBalanceInput,
+	CustomerBalances
+>(apiPath, {
+	queryKey: "customerBalance",
+	disableProperties: ["accountNumber"],
+});
+
+export default getCustomerBalance;

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

@@ -0,0 +1,89 @@
+import { betterAuth } from "better-auth";
+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`;
+
+export const auth = betterAuth({
+	secret: process.env.BETTER_AUTH_SECRET,
+	baseURL: process.env.BETTER_AUTH_URL || process.env.NEXTAUTH_URL,
+	session: {
+		cookieCache: {
+			enabled: true,
+			maxAge: 60 * 60, // 1 hour
+			strategy: "jwe",
+			refreshCache: true,
+		},
+	},
+	account: {
+		storeStateStrategy: "cookie",
+		storeAccountCookie: true,
+	},
+	plugins: [
+		genericOAuth({
+			config: [
+				{
+					providerId: "entra-external-id",
+					clientId: process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_ID || "",
+					clientSecret:
+						process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_SECRET || "",
+					discoveryUrl: `${loginAuthority}/v2.0/.well-known/openid-configuration`,
+					scopes: (
+						process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CUSTOM_SCOPES ||
+						"offline_access openid email profile"
+					).split(" "),
+					pkce: true,
+					prompt: "login",
+					getUserInfo: async (tokens) => {
+						// Decode the id_token to get user claims
+						const idToken = tokens.idToken;
+						if (idToken) {
+							const parts = idToken.split(".");
+							if (parts.length === 3) {
+								const payload = JSON.parse(
+									Buffer.from(parts[1], "base64url").toString(),
+								);
+								return {
+									id: payload.oid || payload.sub,
+									name: payload.name,
+									email:
+										payload.email ||
+										payload.preferred_username ||
+										payload.emails?.[0],
+									emailVerified: !!payload.email_verified,
+								};
+							}
+						}
+						return null;
+					},
+				},
+			],
+		}),
+		customSession(async ({ user, session }, ctx) => {
+			let accessToken = "";
+			try {
+				const accounts = await ctx.context.internalAdapter.findAccounts(
+					user.id,
+				);
+				const account = accounts?.find(
+					(a) => a.providerId === "entra-external-id",
+				);
+				// For Entra External ID, use id_token as the access token
+				accessToken = account?.idToken || account?.accessToken || "";
+			} catch {
+				// Account data may not be accessible in all modes
+			}
+			return {
+				user,
+				session: {
+					...session,
+					accessToken,
+				},
+			};
+		}),
+		nextCookies(), // must be last plugin
+	],
+});
+
+export type Session = typeof auth.$Infer.Session;

package/src/auth/signout.ts

@@ -1,42 +1,13 @@
-const fetchCsrfToken = async (): Promise<string> => {
-	try {
-		const response = await fetch("/api/auth/csrf");
-		if (!response.ok) {
-			throw new Error(`Failed to fetch CSRF token: ${response.statusText}`);
-		}
-		const data: { csrfToken: string } = await response.json();
-		return data.csrfToken;
-	} catch (error) {
-		console.error("Error fetching CSRF token:", error);
-		throw error;
-	}
-};
+import { createAuthClient } from "better-auth/react";
+
+const authClient = createAuthClient();
 
 /**
- *  Alternative to signOut from "next-auth/react" - https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react.tsx
- *  Solution to known next-auth issue - https://github.com/nextauthjs/next-auth/issues/4612
+ * Signs the user out and redirects to the home page.
  */
 const signOut = async (): Promise<void> => {
 	try {
-		const csrfToken = await fetchCsrfToken();
-
-		const formData = new URLSearchParams({
-			csrfToken,
-			json: "true",
-		});
-
-		const response = await fetch("/api/auth/signout", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/x-www-form-urlencoded",
-			},
-			body: formData,
-		});
-
-		if (!response.ok) {
-			throw new Error(`Failed to sign out: ${response.statusText}`);
-		}
-
+		await authClient.signOut();
 		globalThis.location.href = "/";
 	} catch (error) {
 		console.error(error);

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/__tests__/header.test.tsx

@@ -7,8 +7,15 @@ vi.mock("@evenicanpm/storefront-core/src/hooks/use-nextauth-session", () => ({
 	useAppSession: vi.fn(() => ({ session: null })),
 }));
 
-vi.mock("next-auth/react", () => ({
-	useSession: () => ({ data: null, status: "unauthenticated" }),
+vi.mock("better-auth/react", () => ({
+	createAuthClient: () => ({
+		useSession: () => ({ data: null, isPending: false }),
+		signIn: { oauth2: vi.fn() },
+	}),
+}));
+
+vi.mock("better-auth/client/plugins", () => ({
+	genericOAuthClient: () => ({}),
 }));
 
 vi.mock(