@evenicanpm/storefront-core 1.2.2 → 1.4.0

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

@@ -1,17 +1,7 @@
-import { describe, it, expect } from "vitest";
-import authOptions, { ExtendedJwtToken } from "@/auth/auth-options";
-import { JWT } from "next-auth/jwt";
-import { Account } from "next-auth";
-import { Session } from "next-auth";
-
-// vi.mock("./aadb2c-provider", () => ({
-//     azureADB2CProvider: {},
-//     refreshAccessToken: vi.fn(async (token) => ({
-//         ...token,
-//         accessToken: "newAccessToken",
-//         accessTokenExpiresAt: Date.now() + 3600 * 1000,
-//     })),
-// }));
+import type { Account, Session } from "next-auth";
+import type { JWT } from "next-auth/jwt";
+import { describe, expect, it } from "vitest";
+import authOptions, { type ExtendedJwtToken } from "@/auth/auth-options";
 
 describe("next-auth option callbacks", () => {
 	describe("jwt callback", () => {
@@ -34,11 +24,7 @@ describe("next-auth option callbacks", () => {
 			};
 
 			let newToken;
-			if (
-				authOptions &&
-				authOptions().callbacks &&
-				authOptions().callbacks.jwt
-			) {
+			if (authOptions()?.callbacks?.jwt) {
 				newToken = await authOptions().callbacks.jwt({
 					token,
 					user: { id: "123" },
@@ -52,45 +38,6 @@ describe("next-auth option callbacks", () => {
 			expect(newToken?.accessTokenExpiresAt).toBe(token.accessTokenExpiresAt); // We're not setting this or using it anymore
 			expect(newToken?.refreshTokenExpiresAt).toBe(token.refreshTokenExpiresAt); // We're not setting this or using it anymore);
 		});
-
-		// it("should return token if access token is not expired", async () => {
-		//     const token: JWT = {
-		//         accessToken: "validToken",
-		//         accessTokenExpiresAt: Date.now() + 3600 * 1000,
-		//         refreshToken: "",
-		//         refreshTokenExpiresAt: 0
-		//     };
-
-		//     let newToken;
-		//     if (authOptions && authOptions.callbacks && authOptions.callbacks.jwt) {
-		//         newToken = await authOptions.callbacks.jwt({ token, user: { id: '123' }, account: null });
-		//     }
-
-		//     expect(newToken).toEqual(token);
-		// });
-
-		// it("should return error if refresh token is expired", async () => {
-		//     const token = { accessTokenExpiresAt: Date.now() - 1000, refreshTokenExpiresAt: Date.now() - 1000 };
-
-		//     let newToken;
-		//     if (authOptions && authOptions.callbacks && authOptions.callbacks.jwt) {
-		//         newToken = await authOptions.callbacks.jwt({ token, user: { id: '123' }, account: null });
-		//     }
-
-		//     expect(newToken?.error).toBe("RefreshTokenExpired");
-		// });
-
-		// it("should refresh access token if access token is expired but refresh token is valid", async () => {
-		//     const token = { accessToken: "oldToken", accessTokenExpiresAt: Date.now() - 1000, refreshToken: "validRefreshToken", refreshTokenExpiresAt: Date.now() + 3600 * 1000 };
-
-		//     let newToken;
-		//     if (authOptions && authOptions.callbacks && authOptions.callbacks.jwt) {
-		//         newToken = await authOptions.callbacks.jwt({ token, user: { id: '123' }, account: null });
-		//     }
-
-		//     // expect(refreshAccessToken).toHaveBeenCalledWith(token);
-		//     expect(newToken?.accessToken).toBe("newAccessToken");
-		// });
 	});
 
 	describe("session callback", () => {
@@ -104,11 +51,7 @@ describe("next-auth option callbacks", () => {
 				error: "SomeError",
 			};
 			let newSession: Session | null;
-			if (
-				authOptions &&
-				authOptions().callbacks &&
-				authOptions().callbacks.session
-			) {
+			if (authOptions()?.callbacks?.session) {
 				newSession = await authOptions().callbacks.session({
 					session,
 					token,

package/src/auth/auth-options.ts

@@ -1,14 +1,13 @@
-import { Session, type NextAuthOptions } from "next-auth";
-import { getServerSession } from "next-auth/next";
-import { JWT } from "next-auth/jwt";
-import {
+import { deleteCartCookie } from "@evenicanpm/storefront-core/src/lib/cart-cookie-handler";
+import type {
 	GetServerSidePropsContext,
 	NextApiRequest,
 	NextApiResponse,
 } from "next";
+import type { NextAuthOptions, Session } from "next-auth";
+import type { JWT } from "next-auth/jwt";
+import { getServerSession } from "next-auth/next";
 import { getProviders } from "@/auth/providers";
-import { deleteCartCookie } from "@evenicanpm/storefront-core/src/lib/cart-cookie-handler";
-import { getSecret } from "@evenicanpm/common-core/keyvault";
 
 // Split providers into separate array so we can iterate them and match the provider ID
 export type ExtendedJwtToken = JWT & {
@@ -20,7 +19,7 @@ export type ExtendedSession = Session & { token?: JWT };
 
 const createAuthOptions = (): NextAuthOptions => {
 	const providers = getProviders();
-	const secret = getSecret("NEXTAUTH_SECRET");
+	const secret = process.env.NEXTAUTH_SECRET; // internally used by next-auth, shouldn't be from key vault.
 	return {
 		providers,
 		secret,

package/src/auth/msal.ts

@@ -1,4 +1,7 @@
-import { PublicClientApplication, Configuration } from "@azure/msal-browser";
+import {
+	type Configuration,
+	PublicClientApplication,
+} from "@azure/msal-browser";
 
 const createMsalConfig = (): Configuration => {
 	return {

package/src/auth/next-auth-cookie-manager.ts

@@ -1,13 +1,12 @@
 "use server";
-import { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
+import type { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
 import { cookies } from "next/headers";
-import { encode, decode, JWT } from "next-auth/jwt";
-import { ExtendedJwtToken } from "@/auth/auth-options";
+import { decode, encode, type JWT } from "next-auth/jwt";
+import type { ExtendedJwtToken } from "@/auth/auth-options";
+
 const NEXT_AUTH_COOKIE_NAME = "next-auth.session-token";
 const SECURE_COOKIE_PREFIX = "__Secure-";
 
-import { getSecret } from "@evenicanpm/common-core/keyvault";
-
 /**
  * Retrieves and decodes the NextAuth session cookie from the request.
  *
@@ -30,7 +29,7 @@ const manuallyRetrieveSessionCookie = async () => {
 	if (cookie) {
 		return decode({
 			token: cookie.value,
-			secret: getSecret("NEXTAUTH_SECRET") || "",
+			secret: process.env.NEXTAUTH_SECRET || "",
 		});
 	}
 	//If the cookie is not found, we need to see if there is a chunked cookie
@@ -51,7 +50,7 @@ const manuallyRetrieveSessionCookie = async () => {
 	if (cookieValues.length) {
 		return decode({
 			token: cookieValues.join(""),
-			secret: getSecret("NEXTAUTH_SECRET") || "",
+			secret: process.env.NEXTAUTH_SECRET || "",
 		});
 	}
 
@@ -75,7 +74,7 @@ const manuallySetSessionCookie = async (token: JWT | ExtendedJwtToken) => {
 	// Set the cookie with the name __Secure-next-auth.session-token
 	const value = await encode({
 		token,
-		secret: getSecret("NEXTAUTH_SECRET") || "",
+		secret: process.env.NEXTAUTH_SECRET || "",
 	});
 	cookieStore.set({
 		name: `${SECURE_COOKIE_PREFIX}${NEXT_AUTH_COOKIE_NAME}`,

package/src/auth/refresh-token.ts

@@ -1,9 +1,8 @@
 "use server";
-import { JWT } from "next-auth/jwt";
-// TODO: what is going on here?
-import { AuthorizationEndpointHandler, OAuthConfig } from "next-auth/providers";
 import jwt from "jsonwebtoken";
-import { ExtendedJwtToken } from "@/auth/auth-options";
+import type { JWT } from "next-auth/jwt";
+import type { AuthorizationEndpointHandler } from "next-auth/providers";
+import type { ExtendedJwtToken } from "@/auth/auth-options";
 import { getProviders } from "@/auth/providers";
 
 type TokenResponse = {
@@ -20,8 +19,7 @@ const checkAccessTokenExpiry = async (
 		token.error = "Token Invalid";
 		return { token, isRefreshed: false };
 	}
-	// console.log('Token Expires:', new Date(decryptedToken.exp! * 1000).toLocaleString());
-	// console.log('Time now', new Date(Date.now()).toLocaleString());
+
 	if (!decryptedToken.exp) {
 		token.error = "noExpiryOnToken";
 		return {
@@ -54,7 +52,7 @@ const checkAccessTokenExpiry = async (
 	//Find the provider that matches the provider cookie
 	const matchedProvider = providers.find(
 		(p) => p.id.toLowerCase() === token.provider.toLowerCase(),
-	) as OAuthConfig<Record<string, unknown>> | undefined;
+	);
 	if (!matchedProvider) {
 		token.error = "NoProviderMatch";
 		return {

package/src/auth/signout.ts

@@ -37,7 +37,7 @@ const signOut = async (): Promise<void> => {
 			throw new Error(`Failed to sign out: ${response.statusText}`);
 		}
 
-		window.location.href = "/";
+		globalThis.location.href = "/";
 	} catch (error) {
 		console.error(error);
 	}

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

@@ -1,20 +1,20 @@
 import { Box } from "@mui/material";
+import type { Block } from "@/cms/blocks/interfaces";
 import {
-	Hero,
-	FeaturePill,
-	FeaturedProducts,
-	FeaturedCategories,
 	BrandLogosScroller,
-	HeroCarousel,
-	Services,
-	ProductCarousel,
-	ProductSectionFullWidth,
 	CategoryCarousel,
+	FeaturedCategories,
+	FeaturedProducts,
+	FeaturePill,
 	Footer,
+	Hero,
+	HeroCarousel,
 	Image,
+	ProductCarousel,
+	ProductSectionFullWidth,
 	RichText,
-} from "@/cms/blocks/index";
-import { Block } from "@/cms/blocks/interfaces";
+	Services,
+} from "../blocks/index";
 
 const componentMap = {
 	"blocks.hero-section": Hero,
@@ -37,11 +37,11 @@ const componentMap = {
 const getBlockComponent: <B extends Block>(
 	block: B,
 	idx: number,
-) => JSX.Element | null = (block: Block, idx: number) => {
+) => JSX.Element | null = (block: Block) => {
 	const Component = componentMap[
 		block.__component as keyof typeof componentMap
 	] as React.ComponentType<Block>;
-	return <Component key={`block-${idx}`} {...block} />;
+	return <Component key={`block-${block.id}`} {...block} />;
 };
 
 interface BlockManagerProps {
@@ -55,7 +55,7 @@ const BlockManager: React.FC<BlockManagerProps> = ({ blocks }) => {
 			{blocks.map((block, idx) => {
 				const isLast = idx === blocks.length - 1;
 				return (
-					<Box key={`block-wrapper-${idx}`} mb={isLast ? 0 : 6}>
+					<Box key={`block-wrapper-${block.id}`} mb={isLast ? 0 : 6}>
 						{getBlockComponent(block, idx)}
 					</Box>
 				);

package/src/cms/blocks/components/brand-logos-scroller.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import React from "react";
-import Image from "next/image";
-import { Box, Container } from "@mui/material";
 import { keyframes } from "@emotion/react";
+import { Box, Container } from "@mui/material";
+import Image from "next/image";
+import React from "react";
+import type { LogoScrollerBlock } from "@/cms/blocks/interfaces";
 import cmsEndPoints from "@/cms/endpoints";
-import { LogoScrollerBlock } from "@/cms/blocks/interfaces";
 
 const bounce = keyframes`
   from {

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

@@ -1,8 +1,8 @@
-import React from "react";
-import Card from "@mui/material/Card";
 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";
 
@@ -11,7 +11,7 @@ interface Props {
 	imgUrl: string;
 }
 
-export default function CategoryCard({ name, imgUrl }: Props) {
+export default function CategoryCard({ name, imgUrl }: Readonly<Props>) {
 	return (
 		<Card sx={{ width: "100%", boxShadow: 10 }}>
 			<Box

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

@@ -1,23 +1,21 @@
 "use client";
 
-import React from "react";
-import NextLink from "next/link";
-
-// CUSTOM ICON COMPONENT
-import CategoryIcon from "@/cms/blocks/icons/components/category";
-
 // 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 NextLink from "next/link";
+import React from "react";
 // LOCAL CUSTOM COMPONENT
 import TopCategoriesCard from "@/cms/blocks/components/shared/top-categories-card";
+// CUSTOM ICON COMPONENT
+import CategoryIcon from "@/cms/blocks/icons/components/category";
+import type { CategoryCarouselBlock } from "@/cms/blocks/interfaces";
 import { getImageUrl } from "@/cms/endpoints";
 
-import { CategoryCarouselBlock } from "@/cms/blocks/interfaces";
-
-export default function CategoryCarousel(data: CategoryCarouselBlock) {
+export default function CategoryCarousel(
+	data: Readonly<CategoryCarouselBlock>,
+) {
 	const responsive = [
 		{ breakpoint: 959, settings: { slidesToShow: 2 } },
 		{ breakpoint: 650, settings: { slidesToShow: 1 } },

package/src/cms/blocks/components/feature-pill.tsx

@@ -1,12 +1,13 @@
-import { Box, Container, Typography, Divider, Paper } from "@mui/material";
+import { Box, Container, Divider, Paper, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import {
-	MdLocalOffer as LocalOffer,
-	MdShoppingBag as ShoppingBag,
 	MdAddLocation as AddLocation,
+	MdLocalOffer as LocalOffer,
 	MdMonetizationOn as MonetizationOn,
+	MdShoppingBag as ShoppingBag,
 } from "react-icons/md";
-import { FeaturesPillBlock } from "@/cms/blocks/interfaces";
+import type { FeaturesPillBlock } from "@/cms/blocks/interfaces";
+
 const FeaturePill = (featurePillData: FeaturesPillBlock) => {
 	return (
 		<Box

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

@@ -1,10 +1,13 @@
-import React from "react";
 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";
-import { Category, FeaturedCategoriesBlock } from "@/cms/blocks/interfaces";
+import type {
+	Category,
+	FeaturedCategoriesBlock,
+} from "@/cms/blocks/interfaces";
 
 const FeaturedCategories = (categoriesData: FeaturedCategoriesBlock) => {
 	return (

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

@@ -1,10 +1,10 @@
-import React from "react";
 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";
-import { FeaturedProductsBlock, Product } from "@/cms/blocks/interfaces";
+import type { FeaturedProductsBlock, Product } from "@/cms/blocks/interfaces";
 
 const FeaturedProducts = (productsData: FeaturedProductsBlock) => {
 	return (

package/src/cms/blocks/components/footer/data/index.ts

@@ -1,8 +1,11 @@
 // CUSTOM ICON COMPONENTS
+
+import {
+	FaGoogle as Google,
+	FaInstagram as Instagram,
+	FaTwitter as Twitter,
+} from "react-icons/fa";
 import { MdFacebook as Facebook } from "react-icons/md";
-import { FaGoogle as Google } from "react-icons/fa";
-import { FaTwitter as Twitter } from "react-icons/fa";
-import { FaInstagram as Instagram } from "react-icons/fa";
 
 export const ABOUT_LINKS = [
 	"Careers",

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

@@ -1,20 +1,16 @@
-import React from "react";
-
 // MUI
 import { Box, Container } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-
-// Local Custom Components
-import Logo from "@/cms/blocks/components/footer/sections/footer-logo";
-import Links from "@/cms/blocks/components/footer/sections/footer-links";
-import Contact from "@/cms/blocks/components/footer/sections/footer-contact";
-
-import cms from "@/cms/endpoints";
-
-import {
+import React from "react";
+import type {
 	FooterBlock,
 	FooterResponse,
 } from "@/cms/blocks/components/footer/interfaces";
+import Contact from "@/cms/blocks/components/footer/sections/footer-contact";
+import Links from "@/cms/blocks/components/footer/sections/footer-links";
+// Local Custom Components
+import Logo from "@/cms/blocks/components/footer/sections/footer-logo";
+import cms from "@/cms/endpoints";
 
 const getBlockComponent = (block: FooterBlock, index: number) => {
 	let Block;
@@ -63,7 +59,7 @@ const Footer = async () => {
 	const data = await fetchFooterData();
 	const sections = data?.data?.sections;
 
-	if (!(sections && sections.length)) {
+	if (!sections?.length) {
 		return null;
 	}
 
@@ -81,7 +77,7 @@ const Footer = async () => {
 				py={{ sm: 10, xs: 4 }}
 			>
 				<Grid container spacing={6}>
-					{sections.map(getBlockComponent)}
+					{sections.map((block, index) => getBlockComponent(block, index))}
 				</Grid>
 			</Box>
 		</Box>

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

@@ -1,8 +1,8 @@
-import React, { Fragment } from "react";
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import { Box } from "@mui/material";
+import React, { Fragment } from "react";
 import { MdFacebook as Facebook } from "react-icons/md";
 import { Link } from "react-router-dom";
-import { Box } from "@mui/material";
 
 export const PLAY_APP_STORE_DATA = [
 	{ url: "/", icon: Facebook, title: "Google Play", subtitle: "Get it on" },

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

@@ -1,9 +1,9 @@
-import React from "react";
-import { Heading } from "@/cms/blocks/components/footer/styles/index";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/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 { SocialLink } from "@/cms/blocks/components/footer/interfaces";
+import { Heading } from "@/cms/blocks/components/footer/styles/index";
 
 interface Props {
 	isDark?: boolean;

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

@@ -1,11 +1,11 @@
+import { Box } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import React, { Fragment } from "react";
+import type { Link } from "@/cms/blocks/components/footer/interfaces";
 import {
 	Heading,
 	StyledLink,
 } from "@/cms/blocks/components/footer/styles/index";
-import { Box } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import { Link } from "@/cms/blocks/components/footer/interfaces";
 
 interface Props {
 	isDark?: boolean;
@@ -18,8 +18,8 @@ const Links = (props: Props) => {
 		<Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
 			<Heading>{props.title}</Heading>
 			<Box>
-				{props?.links?.map((item, ind) => (
-					<Fragment key={ind}>
+				{props?.links?.map((item) => (
+					<Fragment key={item.slug}>
 						<StyledLink isDark={props.isDark} href={`pages/${item.slug}`}>
 							{item.title}
 						</StyledLink>

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

@@ -1,17 +1,17 @@
 "use client";
 
-import React from "react";
-import Grid from "@mui/material/Grid2";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/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;
 }
 
-export default function LogoSection(props: Props) {
+export default function LogoSection(props: Readonly<Props>) {
 	const theme = useTheme();
 	const downMd = useMediaQuery(theme.breakpoints.down(1150)); // same like in header
 	return (

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

@@ -1,18 +1,18 @@
 "use client";
 
-import React from "react";
+// Custom Components
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/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,
+	FaTwitter as Twitter,
+} from "react-icons/fa";
 // Social Icons
 import { MdFacebook as Facebook } from "react-icons/md";
-import { FaGoogle as Google } from "react-icons/fa";
-import { FaTwitter as Twitter } from "react-icons/fa";
-import { FaInstagram as Instagram } from "react-icons/fa";
-
-// Custom Components
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-import { SocialLink } from "@/cms/blocks/components/footer/interfaces";
+import type { SocialLink } from "@/cms/blocks/components/footer/interfaces";
 
 // Styled Components
 const StyledIconButton = styled(IconButton, {
@@ -36,7 +36,10 @@ interface Props {
 	socials?: SocialLink[];
 }
 
-export default function SocialLinks({ variant = "light", socials }: Props) {
+export default function SocialLinks({
+	variant = "light",
+	socials,
+}: Readonly<Props>) {
 	return (
 		<FlexBox className="flex" mx={-0.625}>
 			{socials?.map(({ name, link }, i) => {
@@ -58,7 +61,12 @@ export default function SocialLinks({ variant = "light", socials }: Props) {
 				}
 
 				return (
-					<a href={link} target="_blank" rel="noreferrer noopenner" key={i}>
+					<a
+						href={link}
+						target="_blank"
+						rel="noreferrer noopenner"
+						key={name + i}
+					>
 						<StyledIconButton variant={variant}>
 							{Icon && <Icon fontSize="inherit" className="icon" />}
 						</StyledIconButton>

package/src/cms/blocks/components/footer/styles/index.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import NextLink from "next/link";
 import styled from "@mui/material/styles/styled";
+import NextLink from "next/link";
 
 type LinkProps = { isDark?: boolean };
 

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

@@ -1,15 +1,15 @@
 "use client";
 
-import React from "react";
 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,
 	MdPhone as Phone,
-	MdEmail as Email,
 } from "react-icons/md";
-import { useTheme } from "@mui/material/styles";
-import { FooterBlock } from "@/cms/blocks/interfaces";
+import type { FooterBlock } from "@/cms/blocks/interfaces";
 
 const contactItemSx = {
 	display: "flex",