@moneylion/react-native-offer-carousel 1.0.10 → 1.2.0

package/src/capabilities/offer-catalog/src/types/offerCatalogSchema.ts

@@ -99,6 +99,7 @@ export type ProductTypes =
 	| (string & {});
 
 export type OffersData = {
+	errorCode?: number;
 	isError?: boolean;
 	uuid: string;
 	leadUuid: string;

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

@@ -24,7 +24,7 @@ function smartCapitalize(text: string): string {
 const VerticalStat = (props: StatProps) => {
 	return (
 		<View style={styles.verticalStatContainer}>
-			<Text variant="featured-2" color={"foregroundNeutral"} weight={"bold"}>
+			<Text variant="title-4" color={"foregroundNeutral"} weight={"bold"}>
 				{String(props.content).trim()}
 			</Text>
 			<MarkdownText

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

@@ -108,6 +108,7 @@ const PartnerImage = (
 			resizeMode={"contain"}
 			height={32}
 			{...props}
+			style={styles.partnerImage}
 		/>
 	);
 };
@@ -297,4 +298,7 @@ const styles = StyleSheet.create({
 		marginTop: "auto",
 	},
 	chosenBy: { justifyContent: "center", alignItems: "center" },
+	partnerImage: {
+		marginBottom: 16,
+	},
 });

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

@@ -49,7 +49,7 @@ export const SeeMore = ({ offer, offerIndex }: SeeMoreProps) => {
 				<Text
 					variant={"body-3"}
 					color={"foregroundNeutral"}
-					weight={"medium"}
+					weight={"normal"}
 					style={styles.text}
 				>
 					See details
@@ -68,9 +68,10 @@ export const SeeMore = ({ offer, offerIndex }: SeeMoreProps) => {
 
 const styles = StyleSheet.create({
 	container: {
-		marginTop: 12,
+		marginTop: 16,
 	},
 	text: {
-		textDecorationLine: "underline",
+		alignSelf: "flex-start", // Makes container only as wide as text
+		borderBottomWidth: 1,
 	},
 });

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

@@ -61,5 +61,5 @@ function DynamicOfferCard({
 export { DynamicOfferCard };
 
 const styles = StyleSheet.create({
-	cta: { marginTop: 20 },
+	cta: { marginTop: 16 },
 });

package/src/components/DynamicOffers/DynamicOffers.tsx

@@ -6,7 +6,8 @@ import type { Layout } from "../../utils";
 import { View } from "react-native";
 
 export type DynamicOfferProps = {
-	title: string;
+	title?: string;
+	subtitle?: string;
 	displayLayout: Layout;
 	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
@@ -15,6 +16,7 @@ export type DynamicOfferProps = {
 
 export const DynamicOffers = ({
 	title,
+	subtitle,
 	displayLayout,
 	showCardBorder,
 	showProductTypeLabel,
@@ -33,6 +35,7 @@ export const DynamicOffers = ({
 			*/}
 			<DynamicOffersRender
 				title={title}
+				subtitle={subtitle}
 				offers={offers}
 				displayLayout={displayLayout}
 				fallbackTemplate={FallbackOfferTemplate}

package/src/components/DynamicOffers/DynamicOffersContainer.tsx

@@ -23,14 +23,7 @@ export const DynamicOffersContainer = React.memo(
 			<Suspense
 				fallback={<DynamicOfferSkeleton displayLayout={config.displayLayout} />}
 			>
-				<DynamicOffers
-					offers={config.offers}
-					title={config.title}
-					showProductTypeLabel={config.showProductTypeLabel}
-					displayLayout={config.displayLayout}
-					showCardBorder={config.showCardBorder}
-					shouldHideFooter={config.shouldHideFooter}
-				/>
+				<DynamicOffers {...config} />
 			</Suspense>
 		);
 	}

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

@@ -19,9 +19,11 @@ import {
 } from "react-native";
 import { useEventHandler } from "../../../context/EventHandlerProvider";
 import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
+import Text from "../../Text";
 
 export type DynamicOffersRenderProps = {
-	title: string;
+	title?: string;
+	subtitle?: string;
 	offers: BaseOffer[];
 	displayLayout: Layout;
 	fallbackTemplate?: React.FC<{
@@ -36,6 +38,7 @@ export type DynamicOffersRenderProps = {
 
 export const DynamicOffersRender = ({
 	title,
+	subtitle,
 	offers,
 	displayLayout,
 	productTypeBuilder = builder,
@@ -233,10 +236,24 @@ export const DynamicOffersRender = ({
 		return () => clearTimeout(timeoutId);
 	}, [checkVisibleOffers, scrollOffset, scrollViewWidth, cardLayouts]);
 
+	const showTitle = Boolean(title?.trim());
+	const showSubtitle = Boolean(subtitle?.trim());
+	const showHeaderText = showTitle || showSubtitle;
+
 	return (
-		// <OffersCarousel title={title} displayLayout={displayLayout}>
 		<>
-			{title}
+			<View style={styles.header}>
+				{showHeaderText && (
+					<View style={styles.headerTextContainer}>
+						{showTitle && (
+							<Text variant="featured-3" weight="bold">
+								{title}
+							</Text>
+						)}
+						{showSubtitle && <Text variant="body-3">{subtitle}</Text>}
+					</View>
+				)}
+			</View>
 			<ScrollView
 				horizontal={true}
 				showsHorizontalScrollIndicator={false}
@@ -248,8 +265,6 @@ export const DynamicOffersRender = ({
 				{wrappedOfferComponents}
 			</ScrollView>
 		</>
-
-		// </OffersCarousel>
 	);
 };
 
@@ -258,4 +273,15 @@ const styles = StyleSheet.create({
 		columnGap: 20,
 		paddingHorizontal: 16,
 	},
+	header: {
+		marginHorizontal: 16,
+		marginBottom: 16,
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+	},
+	headerTextContainer: {
+		flex: 1,
+		gap: 4,
+	},
 });

package/src/components/MoneyLionOfferCarousel.tsx

@@ -32,6 +32,14 @@ export type MoneyLionOfferCarouselProps = {
 	isDev: boolean;
 	showCardBorder?: boolean;
 	showDescriptionPoints?: boolean;
+	title?: string;
+	subtitle?: string;
+	onError?: (error: {
+		code?: number;
+		message: string;
+		timestamp: string;
+	}) => void;
+	onLoad?: (numOffers: number) => void;
 };
 
 const getConfiguration = async ({
@@ -39,9 +47,10 @@ const getConfiguration = async ({
 	zone,
 	subAccountToken,
 	isDev,
+	onError,
 }: Pick<
 	MoneyLionOfferCarouselProps,
-	"channel" | "zone" | "subAccountToken" | "isDev"
+	"channel" | "zone" | "subAccountToken" | "isDev" | "onError"
 >) => {
 	const url = `${getConfigApiBaseUrl(isDev)}/network/${channel}/${zone}/api/configuration`;
 
@@ -51,13 +60,33 @@ const getConfiguration = async ({
 	try {
 		const response = await fetch(url, { headers });
 		if (!response.ok) {
-			throw new Error();
+			const errorCode = response.status;
+
+			onError?.({
+				code: errorCode,
+				message: `Configuration request failed with status: ${response.status}`,
+				timestamp: new Date().toISOString(),
+			});
+
+			throw new Error(
+				`Configuration request failed with status: ${response.status}`
+			);
 		}
+
 		const data = await response.json();
 
 		return data;
 	} catch (error) {
 		console.error("Error fetching configuration", error);
+
+		if (!(error instanceof Error && error.message.includes("status"))) {
+			// Call if network error not already reported
+			onError?.({
+				message: "Network request failed",
+				timestamp: new Date().toISOString(),
+			});
+		}
+
 		return localCnfContext;
 	}
 };
@@ -73,6 +102,10 @@ export const MoneyLionOfferCarousel = (
 		fontFamily,
 		isDev,
 		showDescriptionPoints = true,
+		onError,
+		onLoad,
+		title,
+		subtitle,
 	} = props;
 
 	const {
@@ -109,21 +142,31 @@ export const MoneyLionOfferCarousel = (
 					zone,
 					subAccountToken,
 					isDev,
+					onError,
 				});
 				setContext(data.serializableContext as CnfContext);
 			} catch (err) {
-				setError(
+				const errorObj =
 					err instanceof Error
 						? err
-						: new Error("Failed to fetch configuration")
-				);
+						: new Error("Failed to fetch configuration");
+
+				setError(errorObj);
+
+				// Only call onError if not already called in getConfiguration
+				if (!errorObj.message.includes("status")) {
+					onError?.({
+						message: errorObj.message,
+						timestamp: new Date().toISOString(),
+					});
+				}
 			} finally {
 				setIsLoading(false);
 			}
 		};
 
 		fetchConfiguration();
-	}, [channel, zone, subAccountToken, isDev]);
+	}, [channel, zone, subAccountToken, isDev, onError]);
 
 	useEffect(() => {
 		if (isLoading) {
@@ -134,24 +177,55 @@ export const MoneyLionOfferCarousel = (
 	useEffect(() => {
 		const fetchPageData = async () => {
 			if (context) {
-				const data = await getPageData({
-					context: { ...context, isDev },
-					params: props,
-					onRateTableSubmit,
-				});
-				onRateTableResponse?.({
-					timestamp: new Date().toISOString(),
-					isError: Boolean(data.isError),
-					offers: data.offers,
-					rateTableUuid: data.rateTableUuid,
-					leadUuid: data.leadUuid,
-				});
-				setPageData(data);
+				try {
+					const data = await getPageData({
+						context: { ...context, isDev },
+						params: props,
+						onRateTableSubmit,
+					});
+
+					// Check for API errors in the response
+					if (data.isError) {
+						onError?.({
+							code: data.errorCode,
+							message: "Rate table error occurred",
+							timestamp: new Date().toISOString(),
+						});
+					}
+
+					onRateTableResponse?.({
+						timestamp: new Date().toISOString(),
+						isError: Boolean(data.isError),
+						offers: data.offers,
+						rateTableUuid: data.rateTableUuid,
+						leadUuid: data.leadUuid,
+					});
+
+					setPageData(data);
+					onLoad?.(data.offers.length);
+				} catch (err) {
+					const errorObj =
+						err instanceof Error ? err : new Error("Failed to fetch page data");
+
+					onError?.({
+						message: errorObj.message,
+						timestamp: new Date().toISOString(),
+					});
+				}
 			}
 		};
 
 		fetchPageData();
-	}, [context, isDev, onRateTableResponse, onRateTableSubmit, props]);
+	}, [
+		context,
+		isDev,
+		onRateTableResponse,
+		onRateTableSubmit,
+		props,
+		isLoading,
+		onError,
+		onLoad,
+	]);
 
 	if (isLoading) {
 		return <DynamicOfferSkeleton displayLayout={"fixed"} />;
@@ -162,7 +236,7 @@ export const MoneyLionOfferCarousel = (
 	}
 
 	if (!context) {
-		return <Text>{"Context is null"}</Text>; // Replace with your error component
+		return <Text>{"Context is null"}</Text>;
 	}
 
 	if (!pageData) {
@@ -174,7 +248,6 @@ export const MoneyLionOfferCarousel = (
 		displayLayout,
 		showProductTypeLabel,
 		showCardBorder,
-		title,
 		offers,
 		rateTableUuid,
 		leadUuid,
@@ -187,6 +260,7 @@ export const MoneyLionOfferCarousel = (
 		showProductTypeLabel,
 		showCardBorder,
 		title,
+		subtitle,
 	};
 
 	const themeColor = {

package/src/components/Text/index.tsx

@@ -18,10 +18,10 @@ export type Variant =
 	| "title-6"
 	| "featured-1"
 	| "featured-2" // Vertical stat content
-	| "featured-3"
+	| "featured-3" // Title for the horizontal scroll
 	| "body-1"
 	| "body-2" // CTA Text
-	| "body-3" // Vertical Stat label , Horizontal Stat label and content, See Details.
+	| "body-3" // Vertical Stat label , Horizontal Stat label and content, See Details., Subtitle for the horizontal scroll
 	| "caption-1"
 	| "caption-2"; // Credit Card Offer Card Tip
 
@@ -113,9 +113,9 @@ const styles = StyleSheet.create({
 		lineHeight: 32,
 	},
 	"title-4": {
-		fontSize: 20,
+		fontSize: 24,
 		fontWeight: "bold",
-		lineHeight: 28,
+		lineHeight: 32,
 	},
 	"title-5": {
 		fontSize: 18,
@@ -136,8 +136,8 @@ const styles = StyleSheet.create({
 		lineHeight: 32,
 	},
 	"featured-3": {
-		fontSize: 18,
-		lineHeight: 24,
+		fontSize: 20,
+		lineHeight: 28,
 	},
 	"body-1": {
 		fontSize: 18,

package/src/pageData.ts

@@ -72,20 +72,22 @@ export async function getPageData({
 	});
 
 	// Get offers
-	const { offers, isError, leadUuid, rateTableUuid } = await getDynamicOffers({
-		tags: safeTags,
-		displayLayout: safeDisplayLayout,
-		productTypes,
-		resultType,
-		isCachedOffersRequest,
-		productTypesDefinition: [...productTypesDefinition],
-		partnersOverrideDefinition: [...partnersOverrideDefinition],
-		context,
-		defaultProductType,
-	});
+	const { offers, isError, leadUuid, rateTableUuid, errorCode } =
+		await getDynamicOffers({
+			tags: safeTags,
+			displayLayout: safeDisplayLayout,
+			productTypes,
+			resultType,
+			isCachedOffersRequest,
+			productTypesDefinition: [...productTypesDefinition],
+			partnersOverrideDefinition: [...partnersOverrideDefinition],
+			context,
+			defaultProductType,
+		});
 
 	return {
 		isError,
+		errorCode,
 		leadUuid,
 		rateTableUuid,
 		// title,

package/src/services/getDynamicOffers.ts

@@ -56,7 +56,7 @@ export const getDynamicOffers = async ({
 	context,
 }: Omit<GetDynamicOffersProps, "isDev">) => {
 	// Get the initial offers
-	let { offers, rateTableUuid, isError, leadUuid } =
+	let { offers, rateTableUuid, isError, leadUuid, errorCode } =
 		await getOffersByProductTypes({
 			isCachedOffersRequest,
 			productTypes,
@@ -79,6 +79,7 @@ export const getDynamicOffers = async ({
 		isError = fallbackResult.isError;
 		leadUuid = fallbackResult.leadUuid;
 		productTypes = [defaultProductType];
+		errorCode = fallbackResult.errorCode;
 	}
 
 	const sortedOffers =
@@ -93,7 +94,8 @@ export const getDynamicOffers = async ({
 			addClientTagsToOfferLinks(isCachedOffersRequest, tags),
 			getOffersBasedOnLayout(displayLayout)
 		),
-		isError: isError,
+		isError,
+		errorCode,
 		leadUuid: leadUuid,
 		rateTableUuid,
 	};

package/src/utils/getOffersByProductTypes.ts

@@ -26,15 +26,17 @@ export const getOffersByProductTypes = async ({
 	context: CnfContext;
 }) => {
 	if (isCachedOffersRequest) {
-		const { offers, uuid, isError, leadUuid } =
+		const { offers, uuid, isError, leadUuid, errorCode } =
 			await getCachedOffersByProductTypes(context)(productTypes);
 
-		return { offers, rateTableUuid: uuid, isError, leadUuid };
+		return { offers, rateTableUuid: uuid, isError, leadUuid, errorCode };
 	}
 
-	const { offers, uuid, isError, leadUuid } = await getOffersForProductTypes(
-		context
-	)(productTypes, parseClientTags(tags));
+	const { offers, uuid, isError, leadUuid, errorCode } =
+		await getOffersForProductTypes(context)(
+			productTypes,
+			parseClientTags(tags)
+		);
 
-	return { offers, rateTableUuid: uuid, isError, leadUuid };
+	return { offers, rateTableUuid: uuid, isError, leadUuid, errorCode };
 };