@moneylion/react-native-offer-carousel 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@moneylion/react-native-offer-carousel",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"description": "React Native components for the Engine by MoneyLion Mobile SDK",
 	"main": "lib/commonjs/index",
 	"module": "lib/module/index",

package/src/capabilities/offer-catalog/src/api/offerCatalogApi.ts

@@ -1,5 +1,4 @@
 import { isEmpty } from "radash";
-import type { CnfContext } from "../../../core/src/system/cnfContext/CnfContext";
 import type { OffersData } from "../types/offerCatalogSchema";
 import {
 	getIsDevEnvironment,
@@ -12,6 +11,7 @@ import errorUtil from "../utils/errorUtil";
 import type { State } from "../../../offers/pipeline/src/sources/ratetables/types";
 import { withDeviceSignals } from "../../../offers/pipeline/src/sources/ratetables/withDeviceSignals";
 import { getOfferCatalogApiBaseUrl } from "../../../../apiEnvironment";
+import type { CnfContext } from "../../../core/src/system/cnfContext/CnfContext";
 
 export const getCachedOffersByProductTypes =
 	(context: CnfContext) => async (productTypes: string[]) => {

package/src/components/Cards/VideosCard/VideosCard.tsx

@@ -13,19 +13,19 @@
 
 // export type VideosCardProps = {
 // 	videosContent: VideosContent;
-// 	showBorder: boolean;
+// 	showCardBorder: boolean;
 // };
 
 // export const VideosCard = memo(
 // 	({
 // 		videosContent: { title, subtitle, videos },
-// 		showBorder,
+// 		showCardBorder,
 // 	}: VideosCardProps) => {
 // 		const renderVideos = () =>
 // 			videos.map((video) => <VideoContent key={video.muxId} {...video} />);
 
 // 		return (
-// 			<GenericOfferVertical showBorder={showBorder}>
+// 			<GenericOfferVertical showCardBorder={showCardBorder}>
 // 				<GenericOfferVertical.Container>
 // 					<View style={styles.textContainer}>
 // 						<Text variant="featured-2" weight="bold">

package/src/components/Common/BaseOfferCard/index.tsx

@@ -1,8 +1,5 @@
 import React, { type ComponentProps } from "react";
 
-import { ThumborImage } from "../../../../src/capabilities/ui/elements/src";
-import { MarkdownText } from "../../../../src/capabilities/ui/elements/src/components/MarkdownText";
-import { arrayToMarkdownList } from "../../../../src/capabilities/offer-catalog/src";
 import { StatsContainer } from "./StatsContainer";
 import { Content } from "./Content";
 import { Stat } from "./Stat";
@@ -11,16 +8,19 @@ import Divider from "../../Divider";
 import Text, { type TextProps } from "../../Text";
 import View, { type ViewProps } from "../../View";
 import { StyleSheet } from "react-native";
+import { ThumborImage } from "../../../capabilities/ui/elements/src";
+import { arrayToMarkdownList } from "../../../capabilities/offer-catalog/src";
+import { MarkdownText } from "../../../capabilities/ui/elements/src/components/MarkdownText";
 
 const CardWidth = 282;
 
 const BaseOfferCard = ({
 	children,
-	showBorder = true,
+	showCardBorder = true,
 	...rest
-}: ViewProps & { showBorder: boolean }) => (
+}: ViewProps & { showCardBorder: boolean }) => (
 	<View
-		borderColor={showBorder ? "neutral" : undefined}
+		borderColor={showCardBorder ? "neutral" : undefined}
 		direction={"column"}
 		backgroundColor={"white"}
 		width={CardWidth}

package/src/components/Common/DynamicOfferCard/CallToAction.tsx

@@ -1,9 +1,9 @@
 import React, { type ComponentProps } from "react";
 import { BaseOfferCard } from "../BaseOfferCard";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import type Button from "../../Button";
 import { Linking } from "react-native";
 import { useEventHandler } from "../../../context/EventHandlerProvider";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 export type CTAProps = ComponentProps<typeof Button & { href: string }> & {
 	overrideUrl?: string;

package/src/components/Common/DynamicOfferCard/SeeMore.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useState } from "react";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import Text from "../../Text";
 import { TouchableOpacity, StyleSheet } from "react-native";
 import { OfferDetailsModal } from "../../Modal/OfferDetailsModal";
 import { useEventHandler } from "../../../context/EventHandlerProvider";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 export type SeeMoreProps = {
 	offer: BaseOffer;

package/src/components/Common/DynamicOfferCard/index.tsx

@@ -1,14 +1,14 @@
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import React from "react";
 import { BaseOfferCard } from "../BaseOfferCard";
 import { CallToAction } from "./CallToAction";
 import { StyleSheet } from "react-native";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type DefaultOfferCatalogOfferType = {
 	children: React.ReactNode;
 	offer: BaseOffer;
 	offerIndex: number;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 };
 
@@ -16,11 +16,11 @@ function DynamicOfferCard({
 	children,
 	offer,
 	offerIndex,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 }: DefaultOfferCatalogOfferType) {
 	return (
-		<BaseOfferCard showBorder={showBorder}>
+		<BaseOfferCard showCardBorder={showCardBorder}>
 			{showProductTypeLabel && (
 				<BaseOfferCard.TopBar>
 					<BaseOfferCard.ProductType>

package/src/components/DynamicOffers/DynamicOffers.tsx

@@ -8,7 +8,7 @@ import { View } from "react-native";
 export type DynamicOfferProps = {
 	title: string;
 	displayLayout: Layout;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 	shouldHideFooter: boolean;
 } & Pick<DynamicOffersRenderProps, "offers">;
@@ -16,7 +16,7 @@ export type DynamicOfferProps = {
 export const DynamicOffers = ({
 	title,
 	displayLayout,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 	// shouldHideFooter,
 	offers,
@@ -37,7 +37,7 @@ export const DynamicOffers = ({
 				displayLayout={displayLayout}
 				fallbackTemplate={FallbackOfferTemplate}
 				productTypeBuilder={productTypeBuilder}
-				showBorder={showBorder}
+				showCardBorder={showCardBorder}
 				showProductTypeLabel={showProductTypeLabel}
 			/>
 			{/* {!shouldHideFooter && <Footer offers={offers} />} */}

package/src/components/DynamicOffers/DynamicOffersContainer.tsx

@@ -28,7 +28,7 @@ export const DynamicOffersContainer = React.memo(
 					title={config.title}
 					showProductTypeLabel={config.showProductTypeLabel}
 					displayLayout={config.displayLayout}
-					showBorder={config.showBorder}
+					showCardBorder={config.showCardBorder}
 					shouldHideFooter={config.shouldHideFooter}
 				/>
 			</Suspense>

package/src/components/DynamicOffers/Render/DynamicOffersRender.tsx

@@ -5,7 +5,6 @@ import React, {
 	useRef,
 	useState,
 } from "react";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src/types/offerCatalogSchema";
 import type { Layout } from "../../../utils";
 import { productTypeBuilder as builder } from "../../../builder/builder";
 import { Offer } from "./Offer";
@@ -19,6 +18,7 @@ import {
 	type NativeSyntheticEvent,
 } from "react-native";
 import { useEventHandler } from "../../../context/EventHandlerProvider";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 export type DynamicOffersRenderProps = {
 	title: string;
@@ -30,7 +30,7 @@ export type DynamicOffersRenderProps = {
 		offerIndex: number;
 	}>;
 	productTypeBuilder: typeof builder;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 };
 
@@ -40,7 +40,7 @@ export const DynamicOffersRender = ({
 	displayLayout,
 	productTypeBuilder = builder,
 	fallbackTemplate,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 }: DynamicOffersRenderProps) => {
 	// Performance optimization: store card measurements
@@ -178,13 +178,13 @@ export const DynamicOffersRender = ({
 		// Create offer components
 		return displayLayout === "fixed"
 			? [
-					// <VideosCard key="videos-card" videosContent={videosContent} showBorder={showBorder} />,
+					// <VideosCard key="videos-card" videosContent={videosContent} showCardBorder={showCardBorder} />,
 					...Offer({
 						productTypeBuilder,
 						offers,
 						showProductTypeLabel,
 						fallbackTemplate,
-						showBorder,
+						showCardBorder,
 					}),
 				]
 			: Offer({
@@ -192,7 +192,7 @@ export const DynamicOffersRender = ({
 					offers,
 					showProductTypeLabel,
 					fallbackTemplate,
-					showBorder,
+					showCardBorder,
 				});
 	}, [
 		displayLayout,
@@ -200,7 +200,7 @@ export const DynamicOffersRender = ({
 		offers,
 		showProductTypeLabel,
 		fallbackTemplate,
-		showBorder,
+		showCardBorder,
 	]);
 
 	// Wrapped offer components with layout measurement

package/src/components/DynamicOffers/Render/FallbackOfferTemplate.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { HeadlineWithDescriptionCard } from "../../Layouts/HeadlineWithDescriptionCard";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 export function FallbackOfferTemplate({
 	offer,
 	offerIndex,
-	showBorder = true,
+	showCardBorder = true,
 	showProductTypeLabel = true,
 }: {
 	offer: BaseOffer;
 	offerIndex: number;
-	showBorder?: boolean;
+	showCardBorder?: boolean;
 	showProductTypeLabel?: boolean;
 }) {
 	return (
@@ -22,7 +22,7 @@ export function FallbackOfferTemplate({
 				productTypes: [],
 				layout: "headlineWithDescriptionCard",
 			}}
-			showBorder={showBorder}
+			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
 		/>
 	);

package/src/components/DynamicOffers/Render/Offer.tsx

@@ -3,12 +3,12 @@ import React, { Fragment } from "react";
 import { match } from "ts-pattern";
 
 import type { ProductTypeBuilder } from "../../../builder";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import {
 	DefaultOfferCard,
 	CreditCardOfferCard,
 	HeadlineWithDescriptionCard,
 } from "../../Layouts";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type RenderOfferListProps = {
 	productTypeBuilder: ProductTypeBuilder;
@@ -17,12 +17,14 @@ type RenderOfferListProps = {
 		offer,
 		offerIndex,
 		showProductTypeLabel,
+		showCardBorder,
 	}: {
 		offer: BaseOffer;
 		offerIndex: number;
 		showProductTypeLabel?: boolean;
+		showCardBorder?: boolean;
 	}) => React.ReactNode;
-	showBorder?: boolean;
+	showCardBorder?: boolean;
 	showProductTypeLabel?: boolean;
 	// featureClient?: CnfFeatureClient; TODO: this is the like split on cnf side it uses growthbook
 };
@@ -32,7 +34,7 @@ export const Offer = ({
 	offers,
 	showProductTypeLabel = true,
 	fallbackTemplate,
-	showBorder = true,
+	showCardBorder = true,
 }: RenderOfferListProps) =>
 	offers.map((offer: BaseOffer, offerIndex: number) => {
 		const builder = productTypeBuilder.find(({ productTypes }) =>
@@ -56,7 +58,7 @@ export const Offer = ({
 							key={`${offerIndex}-${offer.uuid}`}
 							offer={offer}
 							productTypeBuilder={layout}
-							showBorder={showBorder}
+							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
 						/>
 					))
@@ -66,7 +68,7 @@ export const Offer = ({
 							key={`${offerIndex}-${offer.uuid}`}
 							offer={offer}
 							productTypeBuilder={layout}
-							showBorder={showBorder}
+							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
 						/>
 					))
@@ -76,7 +78,7 @@ export const Offer = ({
 							key={`${offerIndex}-${offer.uuid}`}
 							offer={offer}
 							productTypeBuilder={layout}
-							showBorder={showBorder}
+							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
 						/>
 					))
@@ -87,6 +89,7 @@ export const Offer = ({
 						const FallbackTemplate = fallbackTemplate;
 						return (
 							<FallbackTemplate
+								showCardBorder={showCardBorder}
 								offerIndex={offerIndex}
 								key={`${offerIndex}-${offer.uuid}`}
 								offer={offer}

package/src/components/Layouts/CreditCardOfferCard/index.tsx

@@ -1,6 +1,4 @@
 import { get } from "radash";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
-
 import React from "react";
 
 import type { CreditCardOfferCard as CreditCardOfferCardBuilderProps } from "../../../builder";
@@ -10,11 +8,12 @@ import Divider from "../../Divider";
 import Text from "../../Text";
 import { CallToAction } from "../../Common/DynamicOfferCard/CallToAction";
 import { StyleSheet } from "react-native";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type CreditCardOfferCardProps = {
 	productTypeBuilder: CreditCardOfferCardBuilderProps;
 	offer: BaseOffer;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 	offerIndex: number;
 };
@@ -22,7 +21,7 @@ type CreditCardOfferCardProps = {
 export const CreditCardOfferCard = ({
 	offer,
 	productTypeBuilder,
-	// showBorder, TODO: this is unused in the cnf-app as well
+	showCardBorder,
 	showProductTypeLabel,
 	offerIndex,
 }: CreditCardOfferCardProps) => {
@@ -34,7 +33,7 @@ export const CreditCardOfferCard = ({
 	const showBadge = badges.length > 0;
 
 	return (
-		<BaseOfferCard showBorder={showBadge}>
+		<BaseOfferCard showCardBorder={showCardBorder}>
 			{showProductTypeLabel && (
 				<BaseOfferCard.TopBar>
 					<BaseOfferCard.ProductType>

package/src/components/Layouts/CreditCardOfferCard/statsBuilder.tsx

@@ -1,6 +1,6 @@
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import type { CreditCardOfferCard } from "../../../builder";
-import { statsToElementPropsBuilder } from "../../../../src/capabilities/offer-catalog/src/utils/stats";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
+import { statsToElementPropsBuilder } from "../../../capabilities/offer-catalog/src/utils/stats";
 
 export const makeCreditCardOfferStats =
 	(productTypeBuilder: CreditCardOfferCard) => (offer: BaseOffer) => {

package/src/components/Layouts/DefaultOfferCard/index.tsx

@@ -1,17 +1,17 @@
 import { get } from "radash";
-
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import React from "react";
 
 import { makeDefaultOfferCardStats } from "./statsBuilder";
 import type { DefaultOfferCard as DefaultOfferCardBuilderProps } from "../../../builder";
 import { BaseOfferCard, DynamicOfferCard, SeeMore } from "../../Common";
+import { useConfiguration } from "../../../context/ConfigurationProvider";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type DefaultOfferCardProps = {
 	productTypeBuilder: DefaultOfferCardBuilderProps;
 	offer: BaseOffer;
 	offerIndex: number;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 };
 
@@ -19,7 +19,7 @@ export const DefaultOfferCard = ({
 	offer,
 	productTypeBuilder,
 	offerIndex,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 }: DefaultOfferCardProps) => {
 	const { stats, topStats } =
@@ -32,12 +32,14 @@ export const DefaultOfferCard = ({
 
 	const contentDescription = description || legalInformation;
 
+	const { showDescriptionPoints } = useConfiguration();
+
 	return (
 		<DynamicOfferCard
 			key={`${offerIndex}-${offer.uuid}`}
 			offer={offer}
 			offerIndex={offerIndex}
-			showBorder={showBorder}
+			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
 		>
 			<BaseOfferCard.TopContainer>
@@ -59,12 +61,12 @@ export const DefaultOfferCard = ({
 						content={stat.content}
 					/>
 				))}
-
-				<BaseOfferCard.DescriptionHandler
-					descriptionPoints={descriptionPoints}
-					contentDescription={contentDescription}
-				/>
-
+				{showDescriptionPoints && (
+					<BaseOfferCard.DescriptionHandler
+						descriptionPoints={descriptionPoints}
+						contentDescription={contentDescription}
+					/>
+				)}
 				{showMoreInfo && <SeeMore offer={offer} offerIndex={offerIndex} />}
 			</BaseOfferCard.Stats>
 		</DynamicOfferCard>

package/src/components/Layouts/DefaultOfferCard/statsBuilder.tsx

@@ -1,6 +1,6 @@
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import type { DefaultOfferCard } from "../../../builder";
-import { statsToElementPropsBuilder } from "../../../../src/capabilities/offer-catalog/src/utils/stats";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
+import { statsToElementPropsBuilder } from "../../../capabilities/offer-catalog/src/utils/stats";
 
 export const makeDefaultOfferCardStats =
 	(productTypeBuilder: DefaultOfferCard) => (offer: BaseOffer) => {

package/src/components/Layouts/HeadlineWithDescriptionCard/index.tsx

@@ -2,22 +2,23 @@ import { get } from "radash";
 
 import React from "react";
 import { SeeMore } from "../../Common/DynamicOfferCard/SeeMore";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import type { HeadlineWithDescriptionCard as HeadlineWithDescriptionCardBuilderProps } from "../../../builder";
 import { BaseOfferCard, DynamicOfferCard } from "../../Common";
+import { useConfiguration } from "../../../context/ConfigurationProvider";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type HeadlineWithDescriptionCardProps = {
 	productTypeBuilder: HeadlineWithDescriptionCardBuilderProps;
 	offer: BaseOffer;
 	offerIndex: number;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 };
 export const HeadlineWithDescriptionCard = ({
 	offer,
 	productTypeBuilder,
 	offerIndex,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 }: HeadlineWithDescriptionCardProps) => {
 	const {
@@ -35,24 +36,26 @@ export const HeadlineWithDescriptionCard = ({
 
 	const contentDescription = description || legalInformation;
 
+	const { showDescriptionPoints } = useConfiguration();
+
 	return (
 		<DynamicOfferCard
 			key={`${offerIndex}-${offer.uuid}`}
 			offer={offer}
 			offerIndex={offerIndex}
-			showBorder={showBorder}
+			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
 		>
 			<BaseOfferCard.TopContainer>
 				<BaseOfferCard.Headline>{headline}</BaseOfferCard.Headline>
 			</BaseOfferCard.TopContainer>
-
-			<BaseOfferCard.DescriptionHandler
-				descriptionPoints={descriptionPoints}
-				contentDescription={contentDescription}
-				hasDivider={false}
-			/>
-
+			{showDescriptionPoints && (
+				<BaseOfferCard.DescriptionHandler
+					descriptionPoints={descriptionPoints}
+					contentDescription={contentDescription}
+					hasDivider={false}
+				/>
+			)}
 			{showMoreInfo && <SeeMore offer={offer} offerIndex={offerIndex} />}
 		</DynamicOfferCard>
 	);

package/src/components/Modal/OfferDetailsModal.tsx

@@ -10,11 +10,11 @@ import {
 	Platform,
 } from "react-native";
 import Text from "../Text";
-import type { BaseOffer } from "../../../src/capabilities/offer-catalog/src";
 import { DescriptionPoints } from "./DescriptionPoints";
 import { Disclaimer } from "./Disclaimer";
 import { CallToAction } from "../Common/DynamicOfferCard/CallToAction";
 import Divider from "../Divider";
+import type { BaseOffer } from "../../capabilities/offer-catalog/src";
 
 type OfferDetailsModalProps = {
 	visible: boolean;

package/src/components/MoneyLionOfferCarousel.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { localCnfContext } from "../config/mocks/cnfContext";
 import { Text } from "react-native";
-import type { CnfContext } from "../../src/capabilities/core/src/system/cnfContext/CnfContext";
 import { getPageData } from "../pageData";
 import type { Layout } from "../utils";
 import {
@@ -15,6 +14,8 @@ import {
 	type EventHandlerContextType,
 } from "../context/EventHandlerProvider";
 import { getConfigApiBaseUrl } from "../apiEnvironment";
+import { ConfigurationProvider } from "../context/ConfigurationProvider";
+import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
 import { getDefaultPaletteColor } from "../utils/getDefaultPaletteColor";
 
 export type MoneyLionOfferCarouselProps = {
@@ -30,6 +31,7 @@ export type MoneyLionOfferCarouselProps = {
 	fontFamily?: Partial<FontFamily>;
 	showProductTypeLabel?: boolean;
 	isDev: boolean;
+	showCardBorder?: boolean;
 };
 
 const getConfiguration = async ({
@@ -164,7 +166,7 @@ export const MoneyLionOfferCarousel = (
 		shouldHideFooter,
 		displayLayout,
 		showProductTypeLabel,
-		showBorder,
+		showCardBorder,
 		title,
 		offers,
 		rateTableUuid,
@@ -176,7 +178,7 @@ export const MoneyLionOfferCarousel = (
 		shouldHideFooter,
 		displayLayout,
 		showProductTypeLabel,
-		showBorder,
+		showCardBorder,
 		title,
 	};
 
@@ -195,7 +197,9 @@ export const MoneyLionOfferCarousel = (
 					leadUuid,
 				}}
 			>
-				<DynamicOffersContainer config={config} />
+				<ConfigurationProvider showDescriptionPoints={false}>
+					<DynamicOffersContainer config={config} />
+				</ConfigurationProvider>
 			</EventHandlerProvider>
 		</ThemeProvider>
 	);

package/src/components/View/index.tsx

@@ -71,13 +71,8 @@ const View: React.FC<ViewProps> = ({
 
 		// Border color handling
 		...(borderColor && {
-			borderColor:
-				(borderColor in
-				["neutral", "positive", "warning", "critical", "primary"]
-					? styles[
-							`border${borderColor as "neutral" | "positive" | "warning" | "critical" | "primary"}`
-						]?.borderColor
-					: undefined) || borderColor,
+			borderWidth: 1,
+			borderColor: "#bbbbbb", // This will get update in follow up one using themeColors
 		}),
 
 		// Direction handling

package/src/context/ConfigurationProvider.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, type ReactNode } from "react";
+
+interface ConfigurationContextProps {
+	showDescriptionPoints: boolean;
+}
+
+const ConfigurationContext = createContext<
+	ConfigurationContextProps | undefined
+>(undefined);
+
+interface ConfigurationProviderProps {
+	children: ReactNode;
+	showDescriptionPoints: boolean;
+}
+
+export const ConfigurationProvider = ({
+	children,
+	showDescriptionPoints,
+}: ConfigurationProviderProps) => {
+	return (
+		<ConfigurationContext.Provider value={{ showDescriptionPoints }}>
+			{children}
+		</ConfigurationContext.Provider>
+	);
+};
+
+export const useConfiguration = () => {
+	const context = useContext(ConfigurationContext);
+	if (!context) {
+		throw new Error(
+			"useConfiguration must be used within a ConfigurationProvider"
+		);
+	}
+	return context;
+};

package/src/context/EventHandlerProvider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from "react";
 import type { ResultType } from "../services/getProductTypes";
-import type { BaseOffer } from "../../src/capabilities/offer-catalog/src";
+import type { BaseOffer } from "../capabilities/offer-catalog/src";
 
 interface onInitializeProps {
 	timestamp: string;