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

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

@@ -18,11 +18,11 @@ const BaseOfferCard = ({
 	children,
 	showCardBorder = true,
 	...rest
-}: ViewProps & { showCardBorder: boolean }) => (
+}: ViewProps & { showCardBorder?: boolean }) => (
 	<View
-		borderColor={showCardBorder ? "neutral" : undefined}
+		borderColor={showCardBorder ? "borderNeutral" : undefined}
 		direction={"column"}
-		backgroundColor={"white"}
+		backgroundColor={"backgroundElevationBase"}
 		width={CardWidth}
 		gap={1}
 		style={styles.baseOfferCard}
@@ -45,7 +45,12 @@ const Container = ({ children, ...rest }: ViewProps) => (
 );
 
 const Tip = ({ children }: ViewProps) => (
-	<Text variant="caption-2" color="positive" weight="bold" style={styles.tip}>
+	<Text
+		variant="caption-2"
+		color="foregroundPositive"
+		weight="bold"
+		style={styles.tip}
+	>
 		{children}
 	</Text>
 );
@@ -118,7 +123,7 @@ const TopContainer = ({ children, ...viewProps }: ViewProps) => (
 const TopBar = ({ children, ...viewProps }: ViewProps) => (
 	<View
 		direction={"row"}
-		backgroundColor="primary-faded"
+		backgroundColor="backgroundPrimaryFaded"
 		{...viewProps}
 		style={styles.topBar}
 	>
@@ -127,7 +132,12 @@ const TopBar = ({ children, ...viewProps }: ViewProps) => (
 );
 
 const ProductType = ({ children, ...rest }: TextProps) => (
-	<Text weight={"bold"} variant={"caption-1"} color="primary" {...rest}>
+	<Text
+		weight={"bold"}
+		variant={"caption-1"}
+		color="foregroundPrimary"
+		{...rest}
+	>
 		{children}
 	</Text>
 );
@@ -153,7 +163,7 @@ const BottomBar = ({ children, ...viewProps }: ViewProps) => (
 const Headline = ({ children, ...rest }: TextProps) => (
 	<Text
 		variant="body-2"
-		color="neutral"
+		color="foregroundNeutral"
 		weight="bold"
 		numberOfLines={2}
 		{...rest}
@@ -163,7 +173,12 @@ const Headline = ({ children, ...rest }: TextProps) => (
 );
 
 const Description = ({ children, ...rest }: TextProps) => (
-	<Text variant="body-3" color="neutral-faded" numberOfLines={4} {...rest}>
+	<Text
+		variant="body-3"
+		color="foregroundNeutralFaded"
+		numberOfLines={4}
+		{...rest}
+	>
 		{children}
 	</Text>
 );
@@ -175,7 +190,7 @@ const DescriptionPoints = ({
 	descriptionPoints.length > 0 && (
 		<MarkdownText
 			content={arrayToMarkdownList(descriptionPoints)}
-			color="neutral-faded"
+			color="foregroundNeutralFaded"
 			variant="body-3"
 			{...rest}
 		/>
@@ -195,7 +210,7 @@ const DescriptionHandler = ({
 			return (
 				<DescriptionPoints
 					numberOfLines={4}
-					color={"neutral-faded"}
+					color="foregroundNeutralFaded"
 					variant={"body-3"}
 					descriptionPoints={descriptionPoints}
 				/>
@@ -204,7 +219,7 @@ const DescriptionHandler = ({
 
 		if (contentDescription) {
 			return (
-				<Description variant={"body-3"} color={"neutral-faded"}>
+				<Description variant={"body-3"} color="foregroundNeutralFaded">
 					{contentDescription}
 				</Description>
 			);
@@ -221,8 +236,12 @@ const DescriptionHandler = ({
 	);
 };
 
-const CallToAction = ({ children, ...rest }: ComponentProps<typeof Button>) => (
-	<Button color="positive" {...rest}>
+const CallToAction = ({
+	color,
+	children,
+	...rest
+}: ComponentProps<typeof Button>) => (
+	<Button color={color} {...rest}>
 		{children}
 	</Button>
 );

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

@@ -14,6 +14,7 @@ export type CTAProps = ComponentProps<typeof Button & { href: string }> & {
 };
 
 export const CallToAction = ({
+	color,
 	children,
 	offer,
 	context,
@@ -23,6 +24,7 @@ export const CallToAction = ({
 	const { onOfferClick, rateTableUuid, leadUuid } = useEventHandler();
 	return (
 		<BaseOfferCard.CallToAction
+			color={color}
 			onPress={() => {
 				onOfferClick?.({
 					timestamp: new Date().toISOString(),

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

@@ -48,7 +48,7 @@ export const SeeMore = ({ offer, offerIndex }: SeeMoreProps) => {
 			<TouchableOpacity onPress={handleMoreInfoClick} style={styles.container}>
 				<Text
 					variant={"body-3"}
-					color={"neutral"}
+					color={"foregroundNeutral"}
 					weight={"medium"}
 					style={styles.text}
 				>

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

@@ -39,6 +39,7 @@ function DynamicOfferCard({
 
 				<BaseOfferCard.BottomBar>
 					<CallToAction
+						color={"backgroundPositive"}
 						offer={offer}
 						overrideUrl={offer.overrideUrl}
 						style={styles.cta}

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

@@ -49,7 +49,7 @@ export const CreditCardOfferCard = ({
 						// imageAttributes={{ title: offer.financialInstitutionDisplayName }}
 						alt={offer.financialInstitutionDisplayName}
 					/>
-					<Text variant="body-2" color="neutral" weight="bold">
+					<Text variant="body-2" color="backgroundNeutral" weight="bold">
 						{offer.financialInstitutionDisplayName}
 					</Text>
 
@@ -74,6 +74,7 @@ export const CreditCardOfferCard = ({
 
 				<BaseOfferCard.BottomBar>
 					<CallToAction
+						color={"backgroundPositive"}
 						offer={offer}
 						overrideUrl={offer.overrideUrl}
 						style={styles.cta}

package/src/components/Modal/DescriptionPoints.tsx

@@ -11,12 +11,12 @@ export function DescriptionPoints({
 }) {
 	return (
 		<View gap={8}>
-			<Text variant={"body-3"} weight={"bold"} color={"neutral"}>
+			<Text variant={"body-3"} weight={"bold"} color={"foregroundNeutral"}>
 				Offer Details
 			</Text>
 			<MarkdownText
 				variant={"body-3"}
-				color={"neutral"}
+				color={"foregroundNeutral"}
 				content={arrayToMarkdownList(descriptionPoints)}
 			/>
 		</View>

package/src/components/Modal/Disclaimer.tsx

@@ -6,10 +6,14 @@ import { MarkdownText } from "../../capabilities/ui/elements/src/components/Mark
 export function Disclaimer({ disclaimer }: { disclaimer: string }) {
 	return (
 		<View gap={16}>
-			<Text variant={"body-3"} weight={"bold"} color={"neutral"}>
+			<Text variant={"body-3"} weight={"bold"} color={"foregroundNeutral"}>
 				Provider Disclaimer
 			</Text>
-			<MarkdownText variant={"body-3"} color={"neutral"} content={disclaimer} />
+			<MarkdownText
+				variant={"body-3"}
+				color={"foregroundNeutral"}
+				content={disclaimer}
+			/>
 		</View>
 	);
 }

package/src/components/Modal/OfferDetailsModal.tsx

@@ -31,6 +31,12 @@ export const OfferDetailsModal = ({
 	onClose,
 	offerIndex,
 }: OfferDetailsModalProps) => {
+	const showDescriptionPoints = Boolean(offer?.descriptionPoints?.length);
+
+	const showDisclaimer = Boolean(offer?.legalLanguage);
+
+	const showDivider = showDescriptionPoints && showDisclaimer;
+
 	return (
 		<Modal
 			animationType="slide"
@@ -61,15 +67,14 @@ export const OfferDetailsModal = ({
 					style={styles.modalContent}
 					contentContainerStyle={styles.scrollContent}
 				>
-					{offer?.descriptionPoints?.length && (
-						<DescriptionPoints descriptionPoints={offer?.descriptionPoints} />
-					)}
-					{offer?.descriptionPoints && offer?.legalLanguage && <Divider />}
-					{offer?.legalLanguage && (
-						<Disclaimer disclaimer={offer.legalLanguage} />
+					{showDescriptionPoints && (
+						<DescriptionPoints descriptionPoints={offer?.descriptionPoints!} />
 					)}
+					{showDivider && <Divider />}
+					{showDisclaimer && <Disclaimer disclaimer={offer.legalLanguage!} />}
 				</ScrollView>
 				<CallToAction
+					color={"backgroundPositive"}
 					offerIndex={offerIndex}
 					offer={offer}
 					overrideUrl={offer.overrideUrl}

package/src/components/MoneyLionOfferCarousel.tsx

@@ -16,7 +16,6 @@ import {
 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 = {
 	channel: string;
@@ -32,6 +31,7 @@ export type MoneyLionOfferCarouselProps = {
 	showProductTypeLabel?: boolean;
 	isDev: boolean;
 	showCardBorder?: boolean;
+	showDescriptionPoints?: boolean;
 };
 
 const getConfiguration = async ({
@@ -66,7 +66,14 @@ export const MoneyLionOfferCarousel = (
 	props: MoneyLionOfferCarouselProps &
 		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
 ) => {
-	const { channel, zone, subAccountToken, fontFamily, isDev } = props;
+	const {
+		channel,
+		zone,
+		subAccountToken,
+		fontFamily,
+		isDev,
+		showDescriptionPoints = true,
+	} = props;
 
 	const {
 		onInitialize,
@@ -103,7 +110,7 @@ export const MoneyLionOfferCarousel = (
 					subAccountToken,
 					isDev,
 				});
-				setContext({ ...(data.serializableContext as CnfContext), isDev });
+				setContext(data.serializableContext as CnfContext);
 			} catch (err) {
 				setError(
 					err instanceof Error
@@ -128,7 +135,7 @@ export const MoneyLionOfferCarousel = (
 		const fetchPageData = async () => {
 			if (context) {
 				const data = await getPageData({
-					context,
+					context: { ...context, isDev },
 					params: props,
 					onRateTableSubmit,
 				});
@@ -144,7 +151,7 @@ export const MoneyLionOfferCarousel = (
 		};
 
 		fetchPageData();
-	}, [context, onRateTableResponse, onRateTableSubmit, props]);
+	}, [context, isDev, onRateTableResponse, onRateTableSubmit, props]);
 
 	if (isLoading) {
 		return <DynamicOfferSkeleton displayLayout={"fixed"} />;
@@ -182,14 +189,12 @@ export const MoneyLionOfferCarousel = (
 		title,
 	};
 
-	const palette = {
-		...context.brand.palette,
-		positive:
-			context.brand.palette?.positive ?? getDefaultPaletteColor("positive"),
+	const themeColor = {
+		...context.brand.themeColors,
 	};
 
 	return (
-		<ThemeProvider palette={palette} fontFamily={fontFamily}>
+		<ThemeProvider themeColors={themeColor} fontFamily={fontFamily}>
 			<EventHandlerProvider
 				eventHandlers={{
 					...eventHandlers,
@@ -197,7 +202,7 @@ export const MoneyLionOfferCarousel = (
 					leadUuid,
 				}}
 			>
-				<ConfigurationProvider showDescriptionPoints={false}>
+				<ConfigurationProvider showDescriptionPoints={showDescriptionPoints}>
 					<DynamicOffersContainer config={config} />
 				</ConfigurationProvider>
 			</EventHandlerProvider>

package/src/components/Text/index.tsx

@@ -1,4 +1,3 @@
-// Text.tsx
 import React from "react";
 import {
 	Text as RNText,
@@ -7,7 +6,7 @@ import {
 	type StyleProp,
 	type TextProps as RNTextProps,
 } from "react-native";
-import { useTheme } from "../../context/ThemeProvider";
+import { useTheme, type ThemeColors } from "../../context/ThemeProvider";
 
 // Define the variant types
 export type Variant =
@@ -29,27 +28,14 @@ export type Variant =
 // Define text decoration
 export type TextDecoration = "line-through";
 
-// Define text color
-export type TextColor =
-	| "neutral"
-	| "neutral-faded"
-	| "critical"
-	| "warning"
-	| "positive"
-	| "primary"
-	| "disabled";
-
 // Define text weight
 export type TextWeight = "normal" | "medium" | "bold";
 
-// // Define wrap options
-// export type TextWrap = "balance";
-
 // Define props
 export interface TextProps extends Omit<RNTextProps, "style"> {
 	variant?: Variant;
 	weight?: TextWeight;
-	color?: TextColor;
+	color?: keyof ThemeColors;
 	decoration?: TextDecoration;
 	children?: React.ReactNode;
 	style?: StyleProp<TextStyle>;
@@ -64,26 +50,28 @@ const Text: React.FC<TextProps> = ({
 	style,
 	...restProps
 }) => {
-	const { fontFamily } = useTheme();
+	const themeContext = useTheme();
+	const { fontFamily, theme } = themeContext || { fontFamily: {}, theme: {} };
 
 	// Create style array
 	const styleArray: StyleProp<TextStyle>[] = [styles.base];
 
 	// Add variant styles
-
 	if (variant) {
 		styleArray.push(styles[variant]);
 	}
 
 	// Add font family styles
-	styleArray.push({ fontFamily: fontFamily[weight || "normal"] });
+	if (fontFamily && fontFamily[weight || "normal"]) {
+		styleArray.push({ fontFamily: fontFamily[weight || "normal"] });
+	}
 
 	// Add weight styles
 	styleArray.push({ fontWeight: weight === "medium" ? "500" : weight });
 
-	// Add color styles
-	if (color) {
-		styleArray.push(styles[`color-${color}`]);
+	// Add color styles from theme
+	if (color && theme[color]) {
+		styleArray.push({ color: theme[color] });
 	}
 
 	// Add decoration styles
@@ -104,7 +92,6 @@ const Text: React.FC<TextProps> = ({
 };
 
 // Define styles
-// Note: In a real implementation, these would be derived from a theme or design system
 const styles = StyleSheet.create({
 	"base": {
 		fontFamily: "System",
@@ -172,28 +159,6 @@ const styles = StyleSheet.create({
 		fontSize: 12,
 		lineHeight: 16,
 	},
-	// Colors
-	"color-neutral": {
-		color: "#2E2E2E",
-	},
-	"color-neutral-faded": {
-		color: "#6A6A6A",
-	},
-	"color-critical": {
-		color: "#D32F2F",
-	},
-	"color-warning": {
-		color: "#F57C00",
-	},
-	"color-positive": {
-		color: "#388E3C",
-	},
-	"color-primary": {
-		color: "#007c6a",
-	},
-	"color-disabled": {
-		color: "#AAAAAA",
-	},
 });
 
 export default Text;

package/src/components/View/index.tsx

@@ -1,37 +1,14 @@
 import React from "react";
-import { View as RNView, type ViewStyle, StyleSheet } from "react-native";
+import { View as RNView, type ViewStyle } from "react-native";
+import { useTheme, type ThemeColors } from "../../context/ThemeProvider";
+
+type Colors = keyof ThemeColors;
 
 export interface ViewProps {
 	children?: React.ReactNode;
 	style?: ViewStyle;
-	backgroundColor?:
-		| "neutral"
-		| "neutral-faded"
-		| "critical"
-		| "critical-faded"
-		| "positive"
-		| "positive-faded"
-		| "warning"
-		| "warning-faded"
-		| "primary"
-		| "primary-faded"
-		| "elevation-base"
-		| "elevation-raised"
-		| "elevation-overlay"
-		| "page"
-		| "page-faded"
-		| "disabled"
-		| "disabled-faded"
-		| "brand"
-		| "white"
-		| "black";
-	borderColor?:
-		| "neutral"
-		| "positive"
-		| "warning"
-		| "critical"
-		| "primary"
-		| string;
+	backgroundColor?: Colors;
+	borderColor?: Colors;
 	direction?: "row" | "row-reverse" | "column" | "column-reverse";
 	height?: number | string;
 	maxHeight?: number | string;
@@ -61,22 +38,24 @@ const View: React.FC<ViewProps> = ({
 	testID,
 	...rest
 }) => {
-	// Create a single style object directly - faster than array.filter(Boolean)
+	const themeContext = useTheme();
+	const theme = themeContext?.theme || {};
+
+	// Create a single style object directly
 	const containerStyles: Record<string, any> = {
 		// Background color handling
 		...(backgroundColor && {
-			backgroundColor:
-				styles[`bg${backgroundColor}`]?.backgroundColor || backgroundColor,
+			backgroundColor: theme[backgroundColor] || backgroundColor,
 		}),
 
 		// Border color handling
 		...(borderColor && {
 			borderWidth: 1,
-			borderColor: "#bbbbbb", // This will get update in follow up one using themeColors
+			borderColor: theme[borderColor],
 		}),
 
 		// Direction handling
-		...(direction && styles[`direction${direction}`]),
+		...(direction && { flexDirection: direction }),
 
 		// Dimension styles - applied only when provided
 		...(height !== undefined && { height }),
@@ -104,36 +83,4 @@ const View: React.FC<ViewProps> = ({
 	);
 };
 
-const styles = StyleSheet.create({
-	"bgneutral": { backgroundColor: "#e0e0e0" },
-	"bgneutral-faded": { backgroundColor: "#f5f5f5" },
-	"bgcritical": { backgroundColor: "#f44336" },
-	"bgcritical-faded": { backgroundColor: "#ffebee" },
-	"bgpositive": { backgroundColor: "#4caf50" },
-	"bgpositive-faded": { backgroundColor: "#e8f5e9" },
-	"bgwarning": { backgroundColor: "#ff9800" },
-	"bgwarning-faded": { backgroundColor: "#fff3e0" },
-	"bgprimary": { backgroundColor: "#2196f3" },
-	"bgprimary-faded": { backgroundColor: "#ebfff9" },
-	"bgelevation-base": { backgroundColor: "#fafafa" },
-	"bgelevation-raised": { backgroundColor: "#eeeeee" },
-	"bgelevation-overlay": { backgroundColor: "#bdbdbd" },
-	"bgpage": { backgroundColor: "#ffffff" },
-	"bgpage-faded": { backgroundColor: "#f5f5f5" },
-	"bgdisabled": { backgroundColor: "#bdbdbd" },
-	"bgdisabled-faded": { backgroundColor: "#e0e0e0" },
-	"bgbrand": { backgroundColor: "#6200ea" },
-	"bgwhite": { backgroundColor: "#ffffff" },
-	"bgblack": { backgroundColor: "#000000" },
-	"borderneutral": { borderColor: "#bdbdbd" },
-	"borderpositive": { borderColor: "#388e3c" },
-	"borderwarning": { borderColor: "#f57c00" },
-	"bordercritical": { borderColor: "#d32f2f" },
-	"borderprimary": { borderColor: "#1976d2" },
-	"directionrow": { flexDirection: "row" },
-	"directionrow-reverse": { flexDirection: "row-reverse" },
-	"directioncolumn": { flexDirection: "column" },
-	"directioncolumn-reverse": { flexDirection: "column-reverse" },
-});
-
 export default View;

package/src/config/mocks/cnfContext.ts

@@ -36,14 +36,50 @@ export const localCnfContext: CnfContext = {
 			icon: null,
 		},
 		type: "business",
-		palette: {
-			promotional: "#592b86",
-			generation: "provided",
-			colorScheme: "balanced",
-			positive: "#ec8a07",
-			critical: "#ce0202",
-			highlight: "#ec8a07",
-			neutral: "#14181f",
+		themeColors: {
+			backgroundCritical: "#ff7200",
+			backgroundCriticalFaded: "#fff2e8",
+			backgroundCriticalHighlighted: "#ee6a00",
+			backgroundDisabled: "#eeeeee",
+			backgroundDisabledFaded: "#f6f6f6",
+			backgroundElevationBase: "#ffffff",
+			backgroundElevationOverlay: "#ffffff",
+			backgroundElevationRaised: "#ffffff",
+			backgroundNeutral: "#e2e2e2",
+			backgroundNeutralFaded: "#f5f5f5",
+			backgroundNeutralHighlighted: "#d7d7d7",
+			backgroundPage: "#ffffff",
+			backgroundPageFaded: "#f9f9f9",
+			backgroundPositive: "#00e5c4",
+			backgroundPositiveFaded: "#e8fffc",
+			backgroundPositiveHighlighted: "#00d9b9",
+			backgroundPrimary: "#00e5c4",
+			backgroundPrimaryFaded: "#e8fffc",
+			backgroundPrimaryHighlighted: "#00d9b9",
+			backgroundWarning: "#facc15",
+			backgroundWarningFaded: "#fffae9",
+			backgroundWarningHighlighted: "#edc113",
+			black: "#000000",
+			borderCritical: "#d35d00",
+			borderCriticalFaded: "#fce3ce",
+			borderDisabled: "#e2e2e2",
+			borderNeutral: "#bbbbbb",
+			borderNeutralFaded: "#e1e1e1",
+			borderPositive: "#00bfa3",
+			borderPositiveFaded: "#b8faf2",
+			borderPrimary: "#00bfa3",
+			borderPrimaryFaded: "#b8faf2",
+			borderWarning: "#cfa90f",
+			borderWarningFaded: "#faedbb",
+			brand: "#00e5c4",
+			foregroundCritical: "#a94900",
+			foregroundDisabled: "#cccccc",
+			foregroundNeutral: "#181818",
+			foregroundNeutralFaded: "#666666",
+			foregroundPositive: "#007362",
+			foregroundPrimary: "#007362",
+			foregroundWarning: "#7b6305",
+			white: "#ffffff",
 		},
 		isLicensed: true,
 		allowedMarks: { logo: true, name: true },