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

package/src/components/MoneyLionOfferCarousel.tsx

@@ -32,6 +32,12 @@ export type MoneyLionOfferCarouselProps = {
 	isDev: boolean;
 	showCardBorder?: boolean;
 	showDescriptionPoints?: boolean;
+	onError?: (error: {
+		code?: number;
+		message: string;
+		timestamp: string;
+	}) => void;
+	onLoad?: (numOffers: number) => void;
 };
 
 const getConfiguration = async ({
@@ -39,9 +45,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 +58,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 +100,8 @@ export const MoneyLionOfferCarousel = (
 		fontFamily,
 		isDev,
 		showDescriptionPoints = true,
+		onError,
+		onLoad,
 	} = props;
 
 	const {
@@ -109,21 +138,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 +173,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 +232,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) {

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