@evenicanpm/storefront-core 2.2.0 → 2.3.1

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

@@ -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/footer/footer-content.tsx

@@ -0,0 +1,61 @@
+import type { FooterBlock } from "@evenicanpm/cms/src/content/footer/types";
+import { Box, Container } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import Contact from "@/cms/blocks/components/footer/sections/footer-contact";
+import Links from "@/cms/blocks/components/footer/sections/footer-links";
+import Logo from "@/cms/blocks/components/footer/sections/footer-logo";
+
+const getBlockComponent = (block: FooterBlock, index: number) => {
+	switch (block.__component) {
+		case "footer.links":
+			return (
+				<Links key={`index-${index}`} title={block.title} links={block.links} />
+			);
+		case "footer.logo":
+			return (
+				<Logo
+					key={`index-${index}`}
+					logoImage={block.logoImage}
+					description={block.description}
+				/>
+			);
+		case "footer.contact":
+			return (
+				<Contact
+					key={`index-${index}`}
+					address={block.address}
+					email={block.email}
+					phoneNumber={block.phoneNumber}
+					social={block.social}
+				/>
+			);
+		default:
+			return null;
+	}
+};
+
+const FooterContent = ({ sections }: { sections: FooterBlock[] }) => {
+	if (!sections?.length) return null;
+
+	return (
+		<Box
+			component="footer"
+			bgcolor="#222935"
+			mt={{ xs: 7 }}
+			mb={{ sm: 0, xs: 7 }}
+		>
+			<Box
+				component={Container}
+				color="white"
+				overflow="hidden"
+				py={{ sm: 10, xs: 4 }}
+			>
+				<Grid container spacing={6}>
+					{sections.map((block, index) => getBlockComponent(block, index))}
+				</Grid>
+			</Box>
+		</Box>
+	);
+};
+
+export default FooterContent;

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

@@ -1,86 +1,24 @@
 // MUI
-import { Box, Container } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-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";
+import { cms } from "@evenicanpm/cms";
+import type { FooterBlock } from "@evenicanpm/cms/src/content/footer/types";
+import FooterContent from "@/cms/blocks/components/footer/footer-content";
 
-const getBlockComponent = (block: FooterBlock, index: number) => {
-	let Block: typeof Links | typeof Logo | typeof Contact;
-
-	switch (block.__component) {
-		case "footer.links":
-			Block = Links;
-			return (
-				<Block key={`index-${index}`} title={block.title} links={block.links} />
-			);
-		case "footer.logo":
-			Block = Logo;
-			return <Block key={`index-${index}`} description={block.description} />;
-		case "footer.contact":
-			Block = Contact;
-			return <Block key={`index-${index}`} social={block.social} />;
-		default:
-			return null;
-	}
-};
-
-const fetchFooterData = async (): Promise<FooterResponse | null> => {
+const Footer = async () => {
+	let sections: FooterBlock[] | undefined;
 	try {
-		const response = await fetch(cms.getCmsApiUrl("footer"), {
-			cache: "no-store", // Ensure server-side fetching
-		});
-
-		if (!response.ok) {
-			return null;
-		}
-
-		const text = await response.text();
-
-		if (!text) {
-			return null;
-		}
-
-		return JSON.parse(text) as FooterResponse;
+		const response = await cms.footer.getFooter();
+		sections = (response as { data?: { sections?: FooterBlock[] } })?.data
+			?.sections;
 	} catch (error) {
 		console.error("Error fetching footer data:", error);
 		return null;
 	}
-};
-
-const Footer = async () => {
-	const data = await fetchFooterData();
-	const sections = data?.data?.sections;
 
 	if (!sections?.length) {
 		return null;
 	}
 
-	return (
-		<Box
-			component="footer"
-			bgcolor="#222935"
-			mt={{ xs: 7 }}
-			mb={{ sm: 0, xs: 7 }}
-		>
-			<Box
-				component={Container}
-				color="white"
-				overflow="hidden"
-				py={{ sm: 10, xs: 4 }}
-			>
-				<Grid container spacing={6}>
-					{sections.map((block, index) => getBlockComponent(block, index))}
-				</Grid>
-			</Box>
-		</Box>
-	);
+	return <FooterContent sections={sections} />;
 };
 
 export default Footer;

package/src/cms/blocks/components/footer/interfaces.ts

@@ -9,6 +9,7 @@ export interface SocialLink {
 interface FooterLogoBlock {
 	id: number;
 	__component: "footer.logo";
+	logoImage?: { url: string; alternativeText?: string };
 	description: string;
 }
 
@@ -22,6 +23,9 @@ interface FooterLinksBlock {
 interface FooterContactBlock {
 	id: number;
 	__component: "footer.contact";
+	address?: string;
+	email?: string;
+	phoneNumber?: string;
 	social: SocialLink[];
 }
 

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

@@ -7,6 +7,9 @@ import { Heading } from "@/cms/blocks/components/footer/styles/index";
 interface Props {
 	isDark?: boolean;
 	title?: string;
+	address?: string;
+	email?: string;
+	phoneNumber?: string;
 	social?: SocialLink[];
 }
 
@@ -15,17 +18,23 @@ const AboutLinks = (props: Props) => {
 		<Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
 			<Heading>Contact Us</Heading>
 
-			<Paragraph py={0.6} color="grey.500">
-				70 Washington Square South, New York, NY 10012, United States
-			</Paragraph>
+			{props.address && (
+				<Paragraph py={0.6} color="grey.500">
+					{props.address}
+				</Paragraph>
+			)}
 
-			<Paragraph py={0.6} color="grey.500">
-				Email: evenica@example.org
-			</Paragraph>
+			{props.email && (
+				<Paragraph py={0.6} color="grey.500">
+					Email: {props.email}
+				</Paragraph>
+			)}
 
-			<Paragraph py={0.6} mb={2} color="grey.500">
-				Phone: +1 1123 456 780
-			</Paragraph>
+			{props.phoneNumber && (
+				<Paragraph py={0.6} mb={2} color="grey.500">
+					Phone: {props.phoneNumber}
+				</Paragraph>
+			)}
 
 			<SocialLinks socials={props.social} />
 		</Grid>

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

@@ -2,20 +2,35 @@
 
 import SiteLogo from "@evenicanpm/storefront-core/src/components/site-logo";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components/Typography";
+import { Box } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import cmsEndPoints from "@/cms/endpoints";
 
 interface Props {
+	logoImage?: { url: string; alternativeText?: string };
 	description: string;
 }
 
 export default function LogoSection(props: Readonly<Props>) {
 	const theme = useTheme();
-	const downMd = useMediaQuery(theme.breakpoints.down(1150)); // same like in header
+	const downMd = useMediaQuery(theme.breakpoints.down(1150));
+	const logoHeight = downMd ? "2.125rem" : "3rem";
+
 	return (
 		<Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
-			<SiteLogo {...(downMd ? { height: "2.125rem" } : {})} />
+			{props.logoImage?.url ? (
+				<Box mb={1}>
+					<img
+						src={cmsEndPoints.buildCmsMediaUrl(props.logoImage.url)}
+						alt={props.logoImage.alternativeText || "Logo"}
+						style={{ height: logoHeight, width: "auto" }}
+					/>
+				</Box>
+			) : (
+				<SiteLogo {...(downMd ? { height: "2.125rem" } : {})} />
+			)}
 
 			<Paragraph mb={2.5} color="grey.500">
 				{props.description}

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>
+	);
+}