@moneylion/react-native-offer-carousel 1.0.0

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+import Skeleton from "./Skeleton";
+export default Skeleton;

package/src/components/Text/index.tsx

@@ -0,0 +1,209 @@
+// Text.tsx
+import React from "react";
+import {
+	Text as RNText,
+	StyleSheet,
+	type TextStyle,
+	type StyleProp,
+	type TextProps as RNTextProps,
+} from "react-native";
+import { useTheme } from "../../context/ThemeProvider";
+
+// Define the variant types
+export type Variant =
+	| "title-1"
+	| "title-2"
+	| "title-3"
+	| "title-4"
+	| "title-5"
+	| "title-6"
+	| "featured-1"
+	| "featured-2" // Vertical stat content
+	| "featured-3"
+	| "body-1"
+	| "body-2" // CTA Text
+	| "body-3" // Vertical Stat label , Horizontal Stat label and content, See Details.
+	| "caption-1"
+	| "caption-2"; // Credit Card Offer Card Tip
+
+// 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 = "regular" | "medium" | "bold";
+
+// // Define wrap options
+// export type TextWrap = "balance";
+
+// Define props
+export interface TextProps extends Omit<RNTextProps, "style"> {
+	variant?: Variant;
+	weight?: TextWeight;
+	color?: TextColor;
+	decoration?: TextDecoration;
+	children?: React.ReactNode;
+	style?: StyleProp<TextStyle>;
+}
+
+const Text: React.FC<TextProps> = ({
+	variant,
+	weight,
+	color,
+	decoration,
+	children,
+	style,
+	...restProps
+}) => {
+	const { fontFamily } = useTheme();
+
+	// 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 || "regular"] });
+
+	// Add weight styles
+	styleArray.push({ fontWeight: weight === "medium" ? "500" : weight });
+
+	// Add color styles
+	if (color) {
+		styleArray.push(styles[`color-${color}`]);
+	}
+
+	// Add decoration styles
+	if (decoration === "line-through") {
+		styleArray.push({ textDecorationLine: "line-through" });
+	}
+
+	// Add custom styles
+	if (style) {
+		styleArray.push(style);
+	}
+
+	return (
+		<RNText style={styleArray} ellipsizeMode={"tail"} {...restProps}>
+			{children}
+		</RNText>
+	);
+};
+
+// Define styles
+// Note: In a real implementation, these would be derived from a theme or design system
+const styles = StyleSheet.create({
+	"base": {
+		fontFamily: "System",
+	},
+	// Variants
+	"title-1": {
+		fontSize: 32,
+		fontWeight: "bold",
+		lineHeight: 40,
+	},
+	"title-2": {
+		fontSize: 28,
+		fontWeight: "bold",
+		lineHeight: 36,
+	},
+	"title-3": {
+		fontSize: 24,
+		fontWeight: "bold",
+		lineHeight: 32,
+	},
+	"title-4": {
+		fontSize: 20,
+		fontWeight: "bold",
+		lineHeight: 28,
+	},
+	"title-5": {
+		fontSize: 18,
+		fontWeight: "bold",
+		lineHeight: 24,
+	},
+	"title-6": {
+		fontSize: 16,
+		fontWeight: "bold",
+		lineHeight: 22,
+	},
+	"featured-1": {
+		fontSize: 24,
+		lineHeight: 32,
+	},
+	"featured-2": {
+		fontSize: 24,
+		lineHeight: 32,
+	},
+	"featured-3": {
+		fontSize: 18,
+		lineHeight: 24,
+	},
+	"body-1": {
+		fontSize: 18,
+		lineHeight: 24,
+	},
+	"body-2": {
+		fontSize: 16,
+		lineHeight: 24,
+	},
+	"body-3": {
+		fontSize: 14,
+		lineHeight: 20,
+	},
+	"caption-1": {
+		fontSize: 12,
+		lineHeight: 16,
+	},
+	"caption-2": {
+		fontSize: 12,
+		lineHeight: 16,
+	},
+	// Weights
+	"weight-regular": {
+		fontWeight: "normal",
+	},
+	"weight-medium": {
+		fontWeight: "500",
+	},
+	"weight-bold": {
+		fontWeight: "bold",
+	},
+	// 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

@@ -0,0 +1,144 @@
+import React from "react";
+import { View as RNView, type ViewStyle, StyleSheet } from "react-native";
+
+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;
+	direction?: "row" | "row-reverse" | "column" | "column-reverse";
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+	width?: number | string;
+	maxWidth?: number | string;
+	minWidth?: number | string;
+	gap?: number;
+	attributes?: { [key: string]: any };
+	testID?: string;
+}
+
+const View: React.FC<ViewProps> = ({
+	children,
+	style,
+	backgroundColor,
+	borderColor,
+	direction,
+	height,
+	maxHeight,
+	minHeight,
+	width,
+	maxWidth,
+	minWidth,
+	gap,
+	attributes,
+	testID,
+	...rest
+}) => {
+	// Create a single style object directly - faster than array.filter(Boolean)
+	const containerStyles: Record<string, any> = {
+		// Background color handling
+		...(backgroundColor && {
+			backgroundColor:
+				styles[`bg${backgroundColor}`]?.backgroundColor || backgroundColor,
+		}),
+
+		// Border color handling
+		...(borderColor && {
+			borderColor:
+				(borderColor in
+				["neutral", "positive", "warning", "critical", "primary"]
+					? styles[
+							`border${borderColor as "neutral" | "positive" | "warning" | "critical" | "primary"}`
+						]?.borderColor
+					: undefined) || borderColor,
+		}),
+
+		// Direction handling
+		...(direction && styles[`direction${direction}`]),
+
+		// Dimension styles - applied only when provided
+		...(height !== undefined && { height }),
+		...(maxHeight !== undefined && { maxHeight }),
+		...(minHeight !== undefined && { minHeight }),
+		...(width !== undefined && { width }),
+		...(maxWidth !== undefined && { maxWidth }),
+		...(minWidth !== undefined && { minWidth }),
+
+		// Spacing
+		...(gap !== undefined && { gap }),
+
+		// User-provided styles (highest priority)
+		...(style || {}),
+	};
+
+	return (
+		<RNView
+			style={containerStyles}
+			testID={attributes?.["data-testid"] || testID}
+			{...rest}
+		>
+			{children}
+		</RNView>
+	);
+};
+
+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/context/EventHandlerProvider.tsx

@@ -0,0 +1,89 @@
+import React, { createContext, useContext } from "react";
+import type { ResultType } from "../services/getProductTypes";
+import type { BaseOffer } from "../../capabilities/offer-catalog/src";
+
+interface onInitializeProps {
+	timestamp: string;
+}
+
+export interface onRateTableSubmitProps {
+	timestamp: string;
+	productTypes: string[];
+	resultType: ResultType;
+	defaultProductType: string;
+}
+
+interface onRateTableResponseProps {
+	timestamp: string;
+	isError: boolean;
+	offers: BaseOffer[];
+	rateTableUuid: string;
+	leadUuid: string;
+}
+
+interface onOfferDisplayInViewportProps {
+	timestamp: string;
+	offerUuid: string;
+	rateTableUuid: string;
+	leadUuid: string;
+	offer: BaseOffer;
+	offerIndex: number;
+}
+
+interface onOfferClickProps {
+	timestamp: string;
+	offerUuid: string;
+	rateTableUuid: string;
+	leadUuid: string;
+	offer: BaseOffer;
+	offerIndex: number;
+	context: "offer" | "offer_details";
+}
+
+interface onOfferDetailsPageOpenProps {
+	timestamp: string;
+	offerUuid: string;
+	rateTableUuid: string;
+	leadUuid: string;
+	offer: BaseOffer;
+	offerIndex: number;
+}
+
+interface onOfferDetailsPageCloseProps {
+	timestamp: string;
+	offerUuid: string;
+	rateTableUuid: string;
+	leadUuid: string;
+	offer: BaseOffer;
+	offerIndex: number;
+}
+
+export interface EventHandlerContextType {
+	onInitialize?: (props: onInitializeProps) => void;
+	onRateTableSubmit?: (props: onRateTableSubmitProps) => void;
+	onRateTableResponse?: (props: onRateTableResponseProps) => void;
+	onOfferDisplayInViewport?: (props: onOfferDisplayInViewportProps) => void;
+	onOfferClick?: (props: onOfferClickProps) => void;
+	onOfferDetailsPageOpen?: (props: onOfferDetailsPageOpenProps) => void;
+	onOfferDetailsPageClose?: (props: onOfferDetailsPageCloseProps) => void;
+	rateTableUuid: string;
+	leadUuid: string;
+}
+
+export const EventHandlerContext = createContext<EventHandlerContextType>({
+	rateTableUuid: "",
+	leadUuid: "",
+});
+
+export const EventHandlerProvider: React.FC<{
+	children: React.ReactNode;
+	eventHandlers: EventHandlerContextType;
+}> = ({ children, eventHandlers }) => {
+	return (
+		<EventHandlerContext.Provider value={eventHandlers}>
+			{children}
+		</EventHandlerContext.Provider>
+	);
+};
+
+export const useEventHandler = () => useContext(EventHandlerContext);

package/src/context/ThemeProvider.tsx

@@ -0,0 +1,91 @@
+import React, {
+	createContext,
+	type FC,
+	type ReactNode,
+	useContext,
+	useState,
+} from "react";
+import { Platform } from "react-native";
+
+export interface ThemePalette {
+	promotional?: string;
+	generation?: ("generate" | "provided") | null;
+	colorScheme?: ("balanced" | "light" | "dark") | null;
+	positive: string;
+	critical?: string;
+	highlight?: string;
+	neutral?: string;
+}
+export interface FontFamily {
+	regular?: string;
+	medium?: string;
+	bold?: string;
+}
+
+const defaultFontFamily: FontFamily = {
+	regular: Platform.OS === "android" ? "sans-serif" : "System",
+	medium: Platform.OS === "android" ? "sans-serif-medium" : "System",
+	bold: Platform.OS === "android" ? "sans-serif-bold" : "System",
+};
+
+interface ThemeContextType {
+	theme: ThemePalette;
+	fontFamily: FontFamily;
+	updateTheme: (newTheme: Partial<ThemePalette>) => void;
+	updateFontFamily: (newFontFamily: Partial<FontFamily>) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType | null>(null);
+
+export const useTheme = () => {
+	const context = useContext(ThemeContext);
+	if (!context) {
+		throw new Error("useTheme must be used within a ThemeProvider");
+	}
+	return context;
+};
+
+interface ThemeProviderProps {
+	palette?: ThemePalette;
+	fontFamily?: Partial<FontFamily>;
+	children: ReactNode;
+}
+
+export const ThemeProvider: FC<ThemeProviderProps> = ({
+	palette = {} as ThemePalette, // should be safe to assert as ThemePalette since the fallback colors are already handled by the consumers of ThemeProvider
+	fontFamily = {},
+	children,
+}) => {
+	const [theme, setTheme] = useState<ThemePalette>(palette);
+	const [fonts, setFonts] = useState<FontFamily>({
+		...defaultFontFamily,
+		...fontFamily,
+	});
+
+	const updateTheme = (newTheme: Partial<ThemePalette>) => {
+		setTheme((prevTheme) => ({
+			...prevTheme,
+			...newTheme,
+		}));
+	};
+
+	const updateFontFamily = (newFontFamily: Partial<FontFamily>) => {
+		setFonts((prevFonts) => ({
+			...prevFonts,
+			...newFontFamily,
+		}));
+	};
+
+	const contextValue = {
+		theme,
+		fontFamily: fonts,
+		updateTheme,
+		updateFontFamily,
+	};
+
+	return (
+		<ThemeContext.Provider value={contextValue}>
+			{children}
+		</ThemeContext.Provider>
+	);
+};

package/src/index.tsx

@@ -0,0 +1 @@
+export * from "./components/MoneyLionOfferCarousel";

package/src/pageData.ts

@@ -0,0 +1,98 @@
+import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
+import { getIsDevEnvironment } from "../capabilities/offer-catalog/src/utils/contextUtil";
+import type { MoneyLionOfferCarouselProps } from "./components/MoneyLionOfferCarousel";
+import type { onRateTableSubmitProps } from "./context/EventHandlerProvider";
+import { getDynamicOffers } from "./services/getDynamicOffers";
+// import { getDynamicOffers } from "./services/getDynamicOffers";
+import {
+	getDefaultProductType,
+	getLayout,
+	getProductTypesDefinition,
+	resolveProductTypes,
+} from "./utils";
+import { getEnableUseCachedOffers } from "./utils/getEnableUseCachedOffers";
+
+type GetPageDataProps = {
+	context: CnfContext;
+	params: MoneyLionOfferCarouselProps;
+	onRateTableSubmit?: (props: onRateTableSubmitProps) => void;
+};
+
+export async function getPageData({
+	context,
+	params,
+	onRateTableSubmit,
+}: GetPageDataProps) {
+	const {
+		productType,
+		query,
+		tags,
+		displayLayout,
+		searchAPIToken,
+		showProductTypeLabel,
+	} = params;
+
+	// Resolve Tags
+	const resolvedTags = `${tags?.trim()}`;
+
+	const enableUseCachedOffers = getEnableUseCachedOffers(context);
+
+	const defaultProductType = getDefaultProductType(context);
+
+	// TODO: Check if this is needed or if we can remove it
+	// const parsedStaticProductTypes = parseStringProductTypes(staticProductTypes);
+
+	const isDev = getIsDevEnvironment(context);
+
+	const { productTypesDefinition, partnersOverrideDefinition } =
+		getProductTypesDefinition(context);
+
+	const currentCountry = context.signals.deviceSignals.country;
+
+	const safeTags = encodeURI(resolvedTags);
+
+	const safeDisplayLayout = getLayout(displayLayout);
+
+	// Get product types and result type
+	const { productTypes, resultType } = await resolveProductTypes({
+		defaultProductType,
+		productType,
+		query,
+		searchAPIToken,
+		isDev,
+	});
+
+	onRateTableSubmit?.({
+		timestamp: new Date().toISOString(),
+		productTypes,
+		resultType,
+		defaultProductType,
+	});
+
+	// Get offers
+	const { offers, isError, leadUuid, rateTableUuid } = await getDynamicOffers({
+		tags: safeTags,
+		displayLayout: safeDisplayLayout,
+		productTypes,
+		resultType,
+		enableUseCachedOffers,
+		productTypesDefinition: [...productTypesDefinition],
+		partnersOverrideDefinition: [...partnersOverrideDefinition],
+		context,
+		defaultProductType,
+	});
+
+	return {
+		isError,
+		leadUuid,
+		rateTableUuid,
+		// title,
+		offers,
+		currentCountry,
+		// videosContent,
+		// showBorder,
+		// shouldHideFooter,
+		showProductTypeLabel,
+		displayLayout: safeDisplayLayout,
+	};
+}