@evenicanpm/storefront-core 1.6.0 → 1.8.0

package/__mocks__/next-image.tsx

@@ -1,7 +1,9 @@
 // __mocks__/next/image.js
 const Image = (props) => {
+	const { alt = "", ...rest } = props;
+
 	// eslint-disable-next-line @next/next/no-img-element
-	return <img {...props} />;
+	return <img alt={alt} {...rest} />;
 };
 
 export default Image;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/storefront-core",
-	"version": "1.6.0",
+	"version": "1.8.0",
 	"description": "Core module for D365/e4 Headless Storefront",
 	"type": "module",
 	"scripts": {
@@ -16,7 +16,7 @@
 	"author": "Evenica",
 	"license": "ISC",
 	"dependencies": {
-		"@evenicanpm/ui": "^1.6.0"
+		"@evenicanpm/ui": "^1.8.0"
 	},
 	"devDependencies": {
 		"@storybook/addon-docs": "^9.1.6",
@@ -49,5 +49,5 @@
 			"esbuild": "0.19.11"
 		}
 	},
-	"gitHead": "9b18fe6294cc0e57332ec8703825a609ac7b73b2"
+	"gitHead": "485f77c5cce7c36849fb9d416d1e503d0f9299a3"
 }

package/src/api-manager/datasources/d365/d365-product.datasource.ts

@@ -150,7 +150,7 @@ class D365ProductDatasource extends D365DatasourceBase implements ProductApi {
 
 		const refinerSearchSettings = { ...searchCriteria };
 		const queryResultSettingsWithCount: IQueryResultSettings = {
-			...(queryResultSettings ?? {}),
+			...queryResultSettings,
 			count: true,
 		};
 

package/src/api-manager/datasources/d365/utils/product-inventory-utils.ts

@@ -17,9 +17,7 @@ const createInventoryAvailabilitySearchCriteria = (
 	defaultDeliveryMode: DeliveryMode,
 ) => {
 	const salesUnitType = 2; // Sales unit type is always 2 for product inventory
-	const deliveryMode = defaultDeliveryMode
-		? defaultDeliveryMode
-		: DeliveryMode.shipping;
+	const deliveryMode = defaultDeliveryMode || DeliveryMode.shipping;
 
 	const inventoryAvailabilitySearchCriteria: InventoryAvailabilitySearchCriteria =
 		{

package/src/api-manager/datasources/e4/cart/e4-cart.remaps.ts

@@ -30,12 +30,14 @@ export const cartLineMap = {
 			if (!product) return;
 
 			// For some reason transform is run multiple times. This prevents merge from running multiple times and overwriting translation.
-			const translated = merge(product, productMap) as DynProduct & {
-				ProductTypeValue?: number;
+			const raw = merge(product, productMap) as unknown as DynProduct;
+
+			if (!raw?.RecordId) return product;
+
+			return {
+				...raw,
+				ProductTypeValue: 4, // default for now. Type = Standalone
 			};
-			if (!translated.RecordId) return product;
-			translated.ProductTypeValue = 4; // default for now. Type = Standalone
-			return translated;
 		},
 	},
 	"[].id": "[].LineId",

package/src/api-manager/datasources/e4/product/e4-product.datasource.ts

@@ -13,9 +13,6 @@ import type {
 	SimpleProduct,
 } from "@msdyn365-commerce/retail-proxy";
 
-// See TODO below
-//import { generateCategoryFilterString } from "./e4.translator";
-
 const product: ProductApi = {
 	async getProductById(
 		input: productSchema.GetProductByIdInput,
@@ -92,7 +89,7 @@ const product: ProductApi = {
 				return null;
 			})
 			.filter(Boolean) as ProductSearchResult[];
-		return products as ProductSearchResult[];
+		return products;
 	},
 
 	async getProductsList(

package/src/api-manager/datasources/e4/product/e4-product.translator.ts

@@ -207,7 +207,7 @@ export const refinersTransformValidate = (
 			if (
 				!rawRefiner ||
 				typeof rawRefiner !== "object" ||
-				!rawRefiner.AttributeName ||
+				!rawRefiner.name ||
 				!Array.isArray(rawRefiner.value)
 			) {
 				console.warn("Skipping invalid raw refiner object:", rawRefiner);
@@ -219,8 +219,8 @@ export const refinersTransformValidate = (
 					if (
 						!rawValue ||
 						typeof rawValue !== "object" ||
-						!rawValue.AttributeValue ||
-						typeof rawValue.Count !== "number"
+						!rawValue.value ||
+						typeof rawValue.count !== "number"
 					) {
 						console.warn(
 							"Skipping invalid raw refiner value object:",
@@ -229,33 +229,29 @@ export const refinersTransformValidate = (
 						return null;
 					}
 
-					RECORD_ID_MAPPER.add(
-						Number(rawValue?.id),
-						rawValue?.AttributeId ?? "",
-					);
+					RECORD_ID_MAPPER.add(Number(rawValue?.id), rawValue?.id ?? "");
 
 					return {
 						RefinerRecordId: Number(rawValue?.id),
 						DataTypeValue: DATA_TYPE_VALUE_STRING,
-						LeftValueBoundString: rawValue.AttributeValue,
-						RightValueBoundString: rawValue.AttributeValue,
+						LeftValueBoundString: rawValue.value,
+						RightValueBoundString: rawValue.value,
 						UnitText: "",
 						RowNumber: 0,
-						Count: rawValue.Count,
+						Count: rawValue.count,
 						LeftValueBoundLocalizedString: "",
 						RightValueBoundLocalizedString: "",
 						ExtensionProperties: [],
 						RefinerSourceValue: SOURCE_VALUE_ATTRIBUTE,
 						SwatchImageUrl: "",
-						SwatchColorHexCode:
-							rawValue?.AttributeId === "color" ? rawValue.AttributeValue : "",
+						SwatchColorHexCode: rawValue?.id === "color" ? rawValue.value : "",
 						"@odata.type": ODATA_TYPE_REFINER_VALUE,
 					};
 				})
 				.filter((value): value is TransformedRefinerValue => value !== null);
 
 			const isDimension = DIMENSION_ATTRIBUTE_IDS.has(
-				rawRefiner.AttributeId?.toLowerCase() ?? "",
+				rawRefiner.id?.toLowerCase() ?? "",
 			);
 
 			return {
@@ -292,16 +288,14 @@ export const refinersTransformValidate = (
 export const productTransformValidate = (
 	productData: Product,
 ): ProductDetails => {
-	const translatedData = merge(
-		productData,
-		productDetailsMap,
-	) as ProductDetails;
+	const translatedData = merge(productData, productDetailsMap);
+
 	try {
-		productSchema.parse(translatedData);
+		return productSchema.parse(translatedData) as ProductDetails;
 	} catch (e) {
 		console.warn("Product data does not match retail-proxy schema", e);
+		return translatedData as ProductDetails; // fallback only if needed
 	}
-	return translatedData;
 };
 
 export const productPricesTransformValidate = (

package/src/api-manager/datasources/e4/utils/unwrap-e4-variants.ts

@@ -1,8 +1,4 @@
-import type {
-	Attributes,
-	Maybe,
-	Variants,
-} from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
+import type { Variants } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
 import { dimensionMap } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/product/e4-product.remaps";
 import { merge } from "object-mapper";
 
@@ -28,18 +24,19 @@ export default function unwrapE4Variants(
 	variants: Variants[],
 ): UnwrappedAttribute[][] {
 	if (!variants?.length) return [];
-	const attrs: UnwrappedAttribute[] = variants.flatMap(
-		(v) =>
-			v.Attributes?.map((attr: Maybe<Attributes>) => {
-				const dimension = attr ? merge(attr, dimensionMap) : null;
+	const attrs: UnwrappedAttribute[] = variants.flatMap((v) =>
+		(v.Attributes ?? [])
+			.map((attr) => {
+				if (!attr) return null;
 
-				if (!dimension) return null;
+				const dimension = merge(attr, dimensionMap);
 
 				return {
-					...dimension,
+					...(dimension as object),
 					ProductIds: [v.ProductId],
-				} as UnwrappedAttribute;
-			}).filter(Boolean) as UnwrappedAttribute[],
+				};
+			})
+			.filter((item): item is UnwrappedAttribute => item !== null),
 	);
 
 	const grouped: UnwrappedAttribute[][] = attrs.reduce((acc, item) => {

package/src/auth/auth-options.ts

@@ -23,6 +23,35 @@ const createAuthOptions = (): NextAuthOptions => {
 	return {
 		providers,
 		secret,
+		cookies: {
+			csrfToken: {
+				name: "next-auth.csrf-token",
+				options: {
+					httpOnly: true,
+					sameSite: "none",
+					path: "/",
+					secure: true,
+				},
+			},
+			pkceCodeVerifier: {
+				name: "next-auth.pkce.code_verifier",
+				options: {
+					httpOnly: true,
+					sameSite: "none",
+					path: "/",
+					secure: true,
+				},
+			},
+			nonce: {
+				name: "next-auth.nonce",
+				options: {
+					httpOnly: true,
+					sameSite: "none",
+					path: "/",
+					secure: true,
+				},
+			},
+		},
 		// Order in which callbacks are called = signin > redirect > jwt > session. Thats why session callback has token info.
 		callbacks: {
 			// By default, NextAuth uses "session" with strategy: "jwt"
@@ -31,7 +60,11 @@ const createAuthOptions = (): NextAuthOptions => {
 				// account and profile is available only in first callback after signin
 				if (account && profile) {
 					_token.provider = account.provider;
-					_token.accessToken = account.access_token;
+					// use id_token for entra external id and access_token for aadb2c
+					_token.accessToken =
+						_token.provider === "entra-external-id"
+							? account.id_token
+							: account.access_token;
 					_token.refreshToken = account.refresh_token;
 				}
 				return _token;

package/src/auth/providers/entra-external-id-provider.ts

@@ -0,0 +1,50 @@
+import { Provider } from "next-auth/providers";
+
+const createEntraExternalIdProvider = (): Provider => {
+	const clientId = process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_ID || "";
+	const customScopes =
+		process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CUSTOM_SCOPES || "";
+	const tenantName =
+		process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_TENANT_NAME || "";
+	const clientSecret =
+		process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_SECRET || "";
+
+	// Build auth url and wellKnown from the loginAuthority
+	const loginAuthority = `https://${tenantName}.ciamlogin.com/${tenantName}.onmicrosoft.com`;
+	const authUrl = `${loginAuthority}/oauth2/v2.0/authorize`;
+	const wellKnownUrl = `${loginAuthority}/v2.0/.well-known/openid-configuration`;
+
+	return {
+		id: "entra-external-id",
+		clientId: clientId,
+		client: {
+			client_id: clientId,
+			response_types: ["code id_token"],
+			client_secret: clientSecret,
+			// token_endpoint_auth_method: 'none',
+		},
+		type: "oauth",
+		idToken: true,
+		name: "Microsoft Entra External ID",
+		authorization: {
+			url: authUrl,
+			params: {
+				scope: customScopes,
+				prompt: "login",
+				response_type: "code id_token",
+				response_mode: "form_post",
+			},
+		},
+		wellKnown: wellKnownUrl,
+		profile(profile) {
+			return {
+				id: profile.oid,
+				name: profile.name,
+				email: profile.email,
+			};
+		},
+		checks: ["pkce", "nonce"],
+	};
+};
+
+export default createEntraExternalIdProvider;

package/src/auth/providers/index.ts

@@ -1,9 +1,16 @@
 import azureADB2CProvider from "@/auth/providers/aadb2c-provider";
 import authentikProvider from "@/auth/providers/authentik-provider";
 import keycloakProvider from "@/auth/providers/keycloak-provider";
+import createEntraExternalIdProvider from "@/auth/providers/entra-external-id-provider";
 
 export const getProviders = () => {
 	const azureProvider = azureADB2CProvider();
+	const entraExternalIdProvider = createEntraExternalIdProvider();
 	// once we stop hard coding others use loader function here
-	return [authentikProvider, azureProvider, keycloakProvider];
+	return [
+		authentikProvider,
+		azureProvider,
+		keycloakProvider,
+		entraExternalIdProvider,
+	];
 };

package/src/auth/refresh-token.ts

@@ -53,7 +53,7 @@ const checkAccessTokenExpiry = async (
 	const matchedProvider = providers.find(
 		(p) => p.id.toLowerCase() === token.provider.toLowerCase(),
 	);
-	if (!matchedProvider) {
+	if (!matchedProvider || !("wellKnown" in matchedProvider)) {
 		token.error = "NoProviderMatch";
 		return {
 			token,

package/src/cms/blocks/interfaces.ts

@@ -131,6 +131,8 @@ export interface ImageBlock {
 	id: number;
 	__component: "blocks.image-block";
 	media: MediaData;
+	size?: string;
+	justify?: string;
 }
 
 export interface RichTextBlock {

package/src/components-v2/BazaarMenu.stories.tsx

@@ -16,7 +16,7 @@ export const Basic: Story = {
 	args: {
 		direction: "left",
 		handler: (onClick) => (
-			<Button variant="contained" onClick={onClick as any}>
+			<Button variant="contained" onClick={onClick}>
 				Open Menu
 			</Button>
 		),

package/src/components-v2/BazaarMenu.tsx

@@ -8,7 +8,7 @@ import { Fragment, type ReactNode, useState } from "react";
 interface Props {
 	open?: boolean;
 	sx?: SxProps<Theme>;
-	handler?: (e: (event: React.MouseEvent) => void) => ReactNode;
+	handler?: (onClick: React.MouseEventHandler<HTMLElement>) => ReactNode;
 	options: (e: () => void) => ReactNode;
 	direction?: "left" | "right" | "center";
 }
@@ -25,8 +25,9 @@ export default function BazaarMenu({
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
 	const handleClose = () => setAnchorEl(null);
-	const handleClick = (event: React.MouseEvent<Element>) =>
-		setAnchorEl(event.currentTarget as HTMLElement);
+	const handleClick: React.MouseEventHandler<HTMLElement> = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
 
 	return (
 		<Fragment>

package/src/components-v2/T/__tests__/T.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+import T from "../index";
+
+vi.mock("next-intl", () => ({
+	useTranslations: vi.fn(() => (key: string) => {
+		const translations: Record<string, string> = {
+			"HomePage.welcome": "Welcome to our store",
+			"HomePage.products": "Products",
+			"Navigation.home": "Home",
+			"Navigation.about": "About Us",
+			"Common.loading": "Loading...",
+			"Common.error": "An error occurred",
+		};
+		return translations[key] || key;
+	}),
+}));
+
+describe("T (Translation Component)", () => {
+	it("renders translation for given path", () => {
+		render(<T path="HomePage.welcome" />);
+		expect(screen.getByText("Welcome to our store")).toBeInTheDocument();
+	});
+
+	it("renders multiple translations", () => {
+		const { container } = render(
+			<>
+				<T path="HomePage.welcome" />
+				<T path="Navigation.home" />
+			</>,
+		);
+		const text = container.textContent || "";
+		expect(text).toContain("Welcome to our store");
+		expect(text).toContain("Home");
+	});
+
+	it("renders fallback path when translation not found", () => {
+		render(<T path="Unknown.path" />);
+		expect(screen.getByText("Unknown.path")).toBeInTheDocument();
+	});
+
+	it("handles nested translation paths", () => {
+		render(<T path="Navigation.home" />);
+		expect(screen.getByText("Home")).toBeInTheDocument();
+	});
+
+	it("renders common translations", () => {
+		render(<T path="Common.loading" />);
+		expect(screen.getByText("Loading...")).toBeInTheDocument();
+	});
+
+	it("renders multiple different paths together", () => {
+		const { container } = render(
+			<>
+				<T path="HomePage.welcome" />
+				<T path="Navigation.home" />
+			</>,
+		);
+		const text = container.textContent || "";
+		expect(text).toContain("Welcome to our store");
+		expect(text).toContain("Home");
+	});
+
+	it("renders translation with special characters", () => {
+		render(<T path="Common.error" />);
+		expect(screen.getByText("An error occurred")).toBeInTheDocument();
+	});
+
+	it("accepts dynamic paths", () => {
+		const paths = ["HomePage.welcome", "Navigation.home", "Common.loading"];
+		const { container } = render(
+			<>
+				{paths.map((path) => (
+					<T key={path} path={path} />
+				))}
+			</>,
+		);
+		const text = container.textContent || "";
+		expect(text).toContain("Welcome to our store");
+		expect(text).toContain("Home");
+		expect(text).toContain("Loading...");
+	});
+
+	it("re-renders when path changes", () => {
+		const { rerender } = render(<T path="HomePage.welcome" />);
+		expect(screen.getByText("Welcome to our store")).toBeInTheDocument();
+
+		rerender(<T path="Navigation.home" />);
+		expect(screen.getByText("Home")).toBeInTheDocument();
+	});
+});

package/src/components-v2/accordion/__tests__/accordion-header.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import AccordionHeader from "../accordion-header";
+
+describe("accordion-header", () => {
+	it("renders the provided header text", () => {
+		render(<AccordionHeader>Accordion Title</AccordionHeader>);
+
+		expect(screen.getByText("Accordion Title")).toBeInTheDocument();
+	});
+
+	it("shows the caret icon by default", () => {
+		const { container } = render(
+			<AccordionHeader>Accordion With Icon</AccordionHeader>,
+		);
+
+		expect(container.querySelector(".caret")).toBeInTheDocument();
+	});
+
+	it("hides the caret icon when showIcon is false", () => {
+		const { container } = render(
+			<AccordionHeader showIcon={false}>
+				Accordion Without Icon
+			</AccordionHeader>,
+		);
+
+		expect(container.querySelector(".caret")).not.toBeInTheDocument();
+	});
+});