@evenicanpm/storefront-core 1.8.4 → 2.0.1

package/src/api-manager/services/create-query.ts

@@ -1,5 +1,3 @@
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-// TODO: use api manager types to remove type any
 import createApiManager from "@evenicanpm/storefront-core/src/api-manager/index";
 import type { DatasourceApis } from "@evenicanpm/storefront-core/src/api-manager/types/Datasource";
 import { isServer, type QueryClient } from "@tanstack/query-core";
@@ -18,277 +16,130 @@ import signOut from "@/auth/signout";
 const QUERY_ROUTE = "/api";
 const mutex = new Mutex();
 
-/**
- * Creates a react-query query with all data access methods exported.
- * Handles switching between direct api-manager calls and accessing api manager through
- * route handler. If no query key provided, use api manager path as cache key prefix.
- * @param queryKey a prefix to add to cache key
- * @param route the route to the corresponding route handler
- * @param apiManagerPath a tuple of two items, entity name and method
- * @param options.disableProperty if these input properties are undefined then disable query
- * @param options.enabled raw enabled for certain use cases
- * @returns
- */
-export const createQuery = <TInput, TOutput>(
-	apiManagerPath: ApiPath<keyof DatasourceApis>,
-	config?: {
-		queryKey?: string;
-		disableProperties?: Array<keyof TInput>;
-	},
-) => {
-	/**
-	 * Generates the configuration object for a query, including the query function, cache key, and enabled state.
-	 *
-	 * The query function (`queryFn`) is determined based on the execution environment (server or client):
-	 * - On the server, it checks for token expiry, refreshes the token if needed, creates an API manager, and invokes the appropriate API function.
-	 * - On the client, it checks for token expiry and either refreshes the token or performs a fetch operation.
-	 *
-	 * The `enabled` property is computed based on the presence and truthiness of specified properties in the input, if `disableProperties` are provided in options.
-	 *
-	 * @param input - Optional input parameters for the query and API function.
-	 * @returns An object containing:
-	 *   - `queryKey`: The cache key for the query, built from the input.
-	 *   - `queryFn`: The asynchronous function to execute for the query.
-	 *   - `enabled`: A boolean indicating whether the query should be enabled.
-	 */
-	const getQueryData = (input?: TInput) => {
-		const queryFn = isServer
-			? /// Server ///
-				async () => {
-					const apiManager = await createApiManager();
-					const apiFunction = getApiFromPath(apiManager, apiManagerPath);
-					const result = await apiFunction(input);
-					return result;
-				}
-			: /// Client ///
-				async () => {
-					// Check if token is expired
-					const shouldRefreshToken = await checkTokenExpiry();
-					if (shouldRefreshToken) {
-						return await handleTokenRefreshClient(input);
-					} else {
-						return await doFetch(input, apiManagerPath);
-					}
-				};
-
-		// if disable props specified then use them to compute enabled
-		const enabled: boolean = config?.disableProperties
-			? config.disableProperties.every((prop) => !!input?.[prop])
-			: true;
-
-		const data = {
-			queryKey: buildCacheKey(input),
-			queryFn,
-			enabled,
-		};
-		return data;
-	};
-
-	/**
-	 * Sends a POST request to the specified route with the provided input and API manager path.
-	 *
-	 * @template TInput - The type of the input parameter.
-	 * @param input - The input data to be sent in the request body. Can be undefined.
-	 * @param route - The endpoint URL to which the request is sent.
-	 * @param apiManagerPath - The API manager path used to identify the API endpoint.
-	 * @returns A promise that resolves to the response of the fetch request.
-	 */
-	const doFetch = async (
-		input: TInput | undefined,
-		apiManagerPath: ApiPath<keyof DatasourceApis>,
-		additionalHeaders?: HeadersInit,
-	) => {
-		// Merge headers
-		const headers = new Headers(additionalHeaders);
-		// generic route handler (new) - will refactor all queries to use this
-		const result = await fetch(QUERY_ROUTE, {
-			method: "POST",
-			body: JSON.stringify({ input, apiManagerPath }),
-			headers,
-		});
-
-		if (result.status === 401) {
-			// If unauthenticated , sign out the user
-			signOut();
-		}
-		return await result.json();
-	};
+export type ApiPath<T extends keyof DatasourceApis = keyof DatasourceApis> = [
+	T,
+	keyof DatasourceApis[T],
+];
 
-	/**
-	 * Client-side hook to call data from react query cache
-	 * @returns
-	 */
-	const useData = (
-		input?: TInput,
-		options?: { enabled: boolean },
-	): UseQueryResult<TOutput> => {
-		return useQuery({ ...getQueryData(input), enabled: options?.enabled });
-	};
+export type Query<TInput, TOutput> = ReturnType<
+	typeof createQuery<TInput, TOutput>
+>;
 
-	/**
-	 * Client-side hook to call data from react query cache,
-	 * used with suspense for suspense loading state handling
-	 * @returns
-	 */
-	const useSuspenseData = (input?: TInput): UseSuspenseQueryResult<TOutput> => {
-		return useSuspenseQuery(getQueryData(input));
-	};
+// --- Shared helpers (no closure dependencies) ---
 
-	/**
-	 * Called on server to fetch query and load cache
-	 * @param queryClient
-	 * @returns
-	 */
-	const fetchData = async (queryClient: QueryClient, input?: TInput) => {
-		return await queryClient.fetchQuery(getQueryData(input));
-	};
+const checkTokenExpiry = async (): Promise<boolean> => {
+	let token: string | undefined;
+	if (isServer) {
+		const session = (await manuallyRetrieveSessionCookie()) ?? undefined;
+		token = session?.accessToken;
+	} else {
+		const session = await getSession();
+		token = session?.accessToken;
+	}
+	const decoded = token && (jwt.decode(token) as { exp?: number } | null);
+	const currentTime = Math.floor(Date.now() / 1000);
+	return (
+		!!decoded && typeof decoded.exp === "number" && decoded.exp < currentTime
+	);
+};
 
-	/**
-	 * Called on server to fetch query and load cache in anticipation
-	 * of client using data
-	 * @param queryClient
-	 */
-	const prefetchData = async (queryClient: QueryClient, input?: TInput) => {
-		return await queryClient.prefetchQuery(getQueryData(input));
-	};
+const doFetch = async <TInput>(
+	input: TInput | undefined,
+	apiManagerPath: ApiPath,
+	additionalHeaders?: HeadersInit,
+) => {
+	const headers = new Headers(additionalHeaders);
+	const result = await fetch(QUERY_ROUTE, {
+		method: "POST",
+		body: JSON.stringify({ input, apiManagerPath }),
+		headers,
+	});
+	if (result.status === 401) {
+		signOut();
+	}
+	return result.json();
+};
 
-	/**
-	 * Wrapper on getQueryData
-	 * TODO: need to fix this naming so we're properly shadowing
-	 * the names of tanstack-query
-	 */
-	const getData = async (
-		queryClient: QueryClient,
-	): Promise<TOutput | undefined> => {
-		const cacheKey = buildCacheKey();
-		return await queryClient.getQueryData(cacheKey);
-	};
+// Acquires a mutex before fetching so concurrent requests don't each trigger
+// a token refresh simultaneously (double-check pattern after acquiring lock).
+const withTokenRefresh = async <TInput>(
+	input: TInput | undefined,
+	apiManagerPath: ApiPath,
+) => {
+	const release = await mutex.acquire();
+	try {
+		const headers = new Headers();
+		if (await checkTokenExpiry()) {
+			headers.append("should-refresh-token", "true");
+		}
+		return await doFetch(input, apiManagerPath, headers);
+	} catch (error) {
+		console.error("Error fetching data:", error);
+		throw new Error("Failed to fetch data");
+	} finally {
+		release();
+	}
+};
 
-	/**
-	 *
-	 * @param queryClient react-query client
-	 * @param data the data to set the query to
-	 * @param input the input of the query that's used to generate cache key
-	 * returns a promise of QueryResult for query
-	 */
-	const setQueryData = async (
-		queryClient: QueryClient,
-		data: TOutput,
-		input?: TInput,
-	) => {
-		const key = buildCacheKey(input);
-		return await queryClient.setQueryData(key, data);
-	};
+// --- Factory ---
 
-	/**
-	 *
-	 * @param input the input for the query of TInput
-	 * @returns if no input, the query key, if input, query key and input in array
-	 */
+export const createQuery = <TInput, TOutput>(
+	apiManagerPath: ApiPath<keyof DatasourceApis>,
+	config?: {
+		queryKey?: string;
+		disableProperties?: Array<keyof TInput>;
+	},
+) => {
 	const buildCacheKey = (input?: TInput) => {
 		const prefix = config?.queryKey ?? apiManagerPath;
 		return input ? [prefix, input] : [prefix];
 	};
 
-	/**
-	 * Asynchronously checks whether the current session's access token has expired.
-	 *
-	 * Retrieves the current session and decodes the access token to extract its expiration time.
-	 * Compares the token's expiration (`exp`) claim with the current time.
-	 *
-	 * @returns A promise that resolves to `true` if the token is expired, or `false` otherwise.
-	 */
-	const checkTokenExpiry = async () => {
-		let token: string | undefined;
-		if (isServer) {
-			// Server-side: retrieve session from cookies
-			const session = (await manuallyRetrieveSessionCookie()) ?? undefined;
-			token = session?.accessToken;
-		} else {
-			const session = await getSession();
-			token = session?.accessToken;
-		}
-
-		const decoded = token && (jwt.decode(token) as { exp?: number } | null);
-
-		const currentTime = Math.floor(Date.now() / 1000);
-
-		// Use this for testing - expires after 60 seconds (1 min) from issued-at time
-		// const isExpired = !!decoded && typeof decoded.iat === "number" && currentTime > decoded.iat + 60;
-
-		const isExpired =
-			!!decoded && typeof decoded.exp === "number" && decoded.exp < currentTime;
-
-		return isExpired;
-	};
-
-	/**
-	 * Handles fetching data with token refresh logic in a thread-safe manner.
-	 *
-	 * Acquires a mutex lock to ensure only one token refresh operation occurs at a time.
-	 * Checks if the token is expired and, if so, adds a header to indicate that the token should be refreshed.
-	 * Performs the fetch operation with the appropriate headers and returns the parsed JSON response.
-	 * Releases the mutex lock after the operation completes, regardless of success or failure.
-	 *
-	 * @param input - The input data for the fetch operation, which may be undefined.
-	 * @returns A promise that resolves to the parsed JSON response from the fetch operation.
-	 * @throws An error if the fetch operation fails.
-	 */
-	const handleTokenRefreshClient = async (input: TInput | undefined) => {
-		const release = await mutex.acquire();
-		try {
-			// Check if token is expired again
-			const stillShouldRefreshToken = await checkTokenExpiry();
-			const headers = new Headers();
-			if (stillShouldRefreshToken) {
-				// Add refresh token header
-				headers.append("should-refresh-token", "true");
-			}
-			// Call do fetch with the headers
-			return await doFetch(input, apiManagerPath, headers);
-		} catch (error) {
-			// Handle API Error
-			console.error("Error fetching data:", error);
-			throw new Error("Failed to fetch data");
-		} finally {
-			release();
-		}
-	};
+	const getQueryOptions = (input?: TInput) => ({
+		queryKey: buildCacheKey(input),
+		queryFn: isServer
+			? async () => {
+					const apiManager = await createApiManager();
+					return getApiFromPath(apiManager, apiManagerPath)(input);
+				}
+			: async () => {
+					const isExpired = await checkTokenExpiry();
+					return isExpired
+						? withTokenRefresh(input, apiManagerPath)
+						: doFetch(input, apiManagerPath);
+				},
+		enabled: config?.disableProperties
+			? config.disableProperties.every((prop) => !!input?.[prop])
+			: true,
+	});
 
 	return {
-		useData,
-		useSuspenseData,
-		setQueryData,
-		fetchData,
-		prefetchData,
+		useData: (
+			input?: TInput,
+			options?: { enabled: boolean },
+		): UseQueryResult<TOutput> =>
+			useQuery({ ...getQueryOptions(input), enabled: options?.enabled }),
+		useSuspenseData: (input?: TInput): UseSuspenseQueryResult<TOutput> =>
+			useSuspenseQuery(getQueryOptions(input)),
+		fetchData: (queryClient: QueryClient, input?: TInput) =>
+			queryClient.fetchQuery(getQueryOptions(input)),
+		prefetchData: (queryClient: QueryClient, input?: TInput) =>
+			queryClient.prefetchQuery(getQueryOptions(input)),
+		getData: (queryClient: QueryClient): TOutput | undefined =>
+			queryClient.getQueryData(buildCacheKey()),
+		setQueryData: (queryClient: QueryClient, data: TOutput, input?: TInput) =>
+			queryClient.setQueryData(buildCacheKey(input), data),
 		buildCacheKey,
-		getData,
 	};
 };
 
-/**
- * A tuple type where api manager entity is first item and second item is method
- * of first item
- */
-export type ApiPath<T extends keyof DatasourceApis = keyof DatasourceApis> = [
-	T,
-	keyof DatasourceApis[T],
-];
+// --- Utilities ---
 
-/// Utilities ///
-/**
- * Takes an apiManager and reaches into nested sub api's based on array path
- * @param apiManager
- * @param path array of path steps
- * @returns the function at the specified path
- */
 export function getApiFromPath<TInput, TOutput>(
-	apiManager: any,
+	apiManager: Awaited<ReturnType<typeof createApiManager>>,
 	path: ApiPath,
 ): (input?: TInput) => Promise<TOutput> {
 	const [entity, method] = path;
-	// Typescript is doing heavy lifting to ensure correct api path
-	// so safe to call method directly
 	const result = apiManager[entity][method];
 
 	if (process.env.NODE_ENV === "development") {
@@ -300,30 +151,19 @@ export function getApiFromPath<TInput, TOutput>(
 		});
 	}
 
-	// Function reference loses 'this' context.
-	// Re-bind for d365 classes.
+	// Function reference loses 'this' context — re-bind for d365 classes.
 	if (typeof result === "function") {
-		return result.bind(apiManager[entity]);
+		return (result as (input?: TInput) => Promise<TOutput>).bind(
+			apiManager[entity],
+		);
 	}
 	return result;
 }
 
-/**
- *
- * @param key
- * @param method
- * @returns
- */
 export function createApiPath<T extends keyof DatasourceApis>(
 	key: T,
 	method: keyof DatasourceApis[T],
 ) {
-	// have to re-cast to general keyof DatasourceApi after
-	// using stricter type for type narrowing and intellisense
-	console.log([key, method]);
+	// re-cast to general ApiPath after using stricter type for intellisense
 	return [key, method] as ApiPath<keyof DatasourceApis>;
 }
-
-export type Query<TInput, TOutput> = ReturnType<
-	typeof createQuery<TInput, TOutput>
->;

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

@@ -111,9 +111,6 @@ export interface UserApi {
 	copyCartToWishlist(
 		input: userSchemas.CopyCartToWishlistInput,
 	): Promise<userSchemas.Wishlist>;
-	updateUser(user: userSchemas.User): Promise<userSchemas.User>;
-	getUser(): Promise<userSchemas.User | null>;
-	getUserCounts(userId: string): Promise<userSchemas.UserCounts>;
 }
 
 /**

package/src/auth/auth-options.test.ts

@@ -23,7 +23,7 @@ describe("next-auth option callbacks", () => {
 				type: "oauth",
 			};
 
-			let newToken;
+			let newToken: ExtendedJwtToken | undefined;
 			if (authOptions()?.callbacks?.jwt) {
 				newToken = await authOptions().callbacks.jwt({
 					token,

package/src/auth/msal.ts

@@ -65,4 +65,4 @@ const getRequestConfig = (requestType?: string) => {
 	}
 };
 
-export { getMsalInstance, initializeMsal, getRequestConfig };
+export { getMsalInstance, getRequestConfig, initializeMsal };

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

@@ -1,4 +1,4 @@
-import { Provider } from "next-auth/providers";
+import type { Provider } from "next-auth/providers";
 
 const createEntraExternalIdProvider = (): Provider => {
 	const clientId = process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_ID || "";

package/src/auth/providers/index.ts

@@ -1,7 +1,7 @@
 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";
+import keycloakProvider from "@/auth/providers/keycloak-provider";
 
 export const getProviders = () => {
 	const azureProvider = azureADB2CProvider();

package/src/cms/blocks/components/category-card.tsx

@@ -2,7 +2,6 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Image from "next/image";
-import React from "react";
 
 import cmsEndPoints from "@/cms/endpoints";
 

package/src/cms/blocks/components/category-carousel/index.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 // GLOBAL CUSTOM COMPONENT
-import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
-import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
-import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
+import BazaarCard from "@evenicanpm/storefront-core/src/components/BazaarCard";
+import { Carousel } from "@evenicanpm/storefront-core/src/components/carousel/index";
+import { Section } from "@evenicanpm/storefront-core/src/components/section";
 import NextLink from "next/link";
-import React from "react";
 // LOCAL CUSTOM COMPONENT
 import TopCategoriesCard from "@/cms/blocks/components/shared/top-categories-card";
 // CUSTOM ICON COMPONENT

package/src/cms/blocks/components/featured-categories.tsx

@@ -1,6 +1,5 @@
 import { Box, Container } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 
 // Local components
 import CategoryCard from "@/cms/blocks/components/category-card";
@@ -26,7 +25,7 @@ const FeaturedCategories = (categoriesData: FeaturedCategoriesBlock) => {
 								size={3}
 								display="flex"
 								justifyContent="center"
-								key={"category_index_" + i}
+								key={`category_index_${i}`}
 							>
 								<CategoryCard
 									name={category.name}

package/src/cms/blocks/components/featured-products.tsx

@@ -1,6 +1,5 @@
 import { Box, Container } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 
 // Local components
 import MediaCard from "@/cms/blocks/components/media-card";
@@ -23,7 +22,7 @@ const FeaturedProducts = (productsData: FeaturedProductsBlock) => {
 								size={3}
 								display="flex"
 								justifyContent="center"
-								key={"product_index_" + i}
+								key={`product_index_${i}`}
 							>
 								<MediaCard
 									name={product?.description ?? ""}

package/src/cms/blocks/components/footer/index.tsx

@@ -1,7 +1,6 @@
 // MUI
 import { Box, Container } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 import type {
 	FooterBlock,
 	FooterResponse,
@@ -13,7 +12,7 @@ import Logo from "@/cms/blocks/components/footer/sections/footer-logo";
 import cms from "@/cms/endpoints";
 
 const getBlockComponent = (block: FooterBlock, index: number) => {
-	let Block;
+	let Block: typeof Links | typeof Logo | typeof Contact;
 
 	switch (block.__component) {
 		case "footer.links":

package/src/cms/blocks/components/footer/sections/footer-app-store.tsx

@@ -1,6 +1,6 @@
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import FlexBox from "@evenicanpm/storefront-core/src/components/flex-box/flex-box";
 import { Box } from "@mui/material";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { MdFacebook as Facebook } from "react-icons/md";
 import { Link } from "react-router-dom";
 

package/src/cms/blocks/components/footer/sections/footer-contact.tsx

@@ -1,6 +1,5 @@
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
 import Grid from "@mui/material/Grid2";
-import React from "react";
 import type { SocialLink } from "@/cms/blocks/components/footer/interfaces";
 import SocialLinks from "@/cms/blocks/components/footer/sections/footer-social-links";
 import { Heading } from "@/cms/blocks/components/footer/styles/index";

package/src/cms/blocks/components/footer/sections/footer-links.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import type { Link } from "@/cms/blocks/components/footer/interfaces";
 import {
 	Heading,

package/src/cms/blocks/components/footer/sections/footer-logo.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import SiteLogo from "@evenicanpm/storefront-core/src/components/site-logo";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
 import Grid from "@mui/material/Grid2";
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import React from "react";
 
 interface Props {
 	description: string;

package/src/cms/blocks/components/footer/sections/footer-social-links.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 // Custom Components
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import FlexBox from "@evenicanpm/storefront-core/src/components/flex-box/flex-box";
 import IconButton from "@mui/material/IconButton";
 import styled from "@mui/material/styles/styled";
-import React from "react";
 import {
 	FaGoogle as Google,
 	FaInstagram as Instagram,
@@ -43,7 +42,12 @@ export default function SocialLinks({
 	return (
 		<FlexBox className="flex" mx={-0.625}>
 			{socials?.map(({ name, link }, i) => {
-				let Icon;
+				let Icon:
+					| typeof Facebook
+					| typeof Instagram
+					| typeof Google
+					| typeof Twitter
+					| undefined;
 
 				switch (name) {
 					case "Facebook":

package/src/cms/blocks/components/footer.tsx

@@ -3,7 +3,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { useTheme } from "@mui/material/styles";
-import React from "react";
 import {
 	MdEmail as Email,
 	MdLocationOn as LocationOn,

package/src/cms/blocks/components/hero-carousel/index.tsx

@@ -2,10 +2,9 @@
 // This component works best with cutout product images
 
 // GLOBAL CUSTOM COMPONENTS
-import { Carousel } from "@evenicanpm/storefront-core/src/components-v2/carousel/index";
-import CarouselCard1 from "@evenicanpm/storefront-core/src/components-v2/carousel-cards/carousel-card-1/index";
+import { Carousel } from "@evenicanpm/storefront-core/src/components/carousel/index";
+import CarouselCard1 from "@evenicanpm/storefront-core/src/components/carousel-cards/carousel-card-1/index";
 import { Box, Container } from "@mui/material";
-import React from "react";
 import type { HeroCarouselBlock, Slide } from "@/cms/blocks/interfaces";
 import { getImageUrl } from "@/cms/endpoints";
 

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

@@ -1,7 +1,6 @@
 import { Box, Button, Container, Typography } from "@mui/material";
 import Image from "next/image";
 import NextLink from "next/link";
-import React from "react";
 import type { HeroSectionBlock } from "@/cms/blocks/interfaces";
 import cmsEndPoints from "@/cms/endpoints";
 

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

@@ -1,6 +1,5 @@
 import { Container, Paper } from "@mui/material";
 import NextImage from "next/image";
-import React from "react";
 import type { Media } from "@/cms/blocks/interfaces";
 import { getImageUrl, type sizes } from "@/cms/endpoints";
 

package/src/cms/blocks/components/media-card.tsx

@@ -3,7 +3,6 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Typography from "@mui/material/Typography";
 import Image from "next/image";
-import React from "react";
 
 import cmsEndPoints from "@/cms/endpoints";