@moneylion/react-native-offer-carousel 1.0.9 → 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

@@ -37,7 +37,7 @@ export async function getPageData({
 	// Resolve Tags
 	const resolvedTags = `${tags?.trim()}`;
 
-	const enableUseCachedOffers = getEnableUseCachedOffers(context);
+	const isCachedOffersRequest = getEnableUseCachedOffers(context);
 
 	const defaultProductType = getDefaultProductType(context);
 
@@ -72,20 +72,22 @@ export async function getPageData({
 	});
 
 	// Get offers
-	const { offers, isError, leadUuid, rateTableUuid } = await getDynamicOffers({
-		tags: safeTags,
-		displayLayout: safeDisplayLayout,
-		productTypes,
-		resultType,
-		enableUseCachedOffers,
-		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

@@ -24,7 +24,7 @@ export type GetDynamicOffersProps = {
 	displayLayout: Layout;
 	productTypes: string[];
 	resultType: ProductTypesResult["resultType"];
-	enableUseCachedOffers: boolean;
+	isCachedOffersRequest: boolean;
 	productTypesDefinition: ProductTypeDefinition[];
 	partnersOverrideDefinition: PartnerOverride[];
 	context: CnfContext;
@@ -50,49 +50,53 @@ export const getDynamicOffers = async ({
 	defaultProductType,
 	productTypes,
 	resultType,
-	enableUseCachedOffers,
+	isCachedOffersRequest,
 	productTypesDefinition,
 	partnersOverrideDefinition,
 	context,
 }: Omit<GetDynamicOffersProps, "isDev">) => {
 	// Get the initial offers
-	const initialOffersData = await getOffersByProductTypes({
-		enableUseCachedOffers,
-		productTypes,
-		tags,
-		context,
-	});
+	let { offers, rateTableUuid, isError, leadUuid, errorCode } =
+		await getOffersByProductTypes({
+			isCachedOffersRequest,
+			productTypes,
+			tags,
+			context,
+		});
 
-	// if no offers are returned, we need to get the offers for the default product type
-	if (isEmpty(initialOffersData?.offers)) {
-		// Set the productTypes to be defaultProductType
+	// If no offers found, fall back to the default product type
+	if (isEmpty(offers)) {
+		const fallbackResult = await getOffersByProductTypes({
+			isCachedOffersRequest,
+			productTypes: [defaultProductType],
+			tags,
+			context,
+		});
+
+		// Update the offers, rateTableUuid, isError, leafUuid and productTypes
+		offers = fallbackResult.offers;
+		rateTableUuid = fallbackResult.rateTableUuid;
+		isError = fallbackResult.isError;
+		leadUuid = fallbackResult.leadUuid;
 		productTypes = [defaultProductType];
+		errorCode = fallbackResult.errorCode;
 	}
 
-	// if initial offers are returned, return them
-	const offersData = isEmpty(initialOffersData?.offers)
-		? await getOffersByProductTypes({
-				enableUseCachedOffers,
-				productTypes,
-				tags,
-				context,
-			})
-		: initialOffersData;
-
 	const sortedOffers =
 		resultType === "QUERY"
-			? selectDynamicOffers(offersData.offers, productTypes)
-			: sortOffersByRecommendationScore(offersData.offers);
+			? selectDynamicOffers(offers, productTypes)
+			: sortOffersByRecommendationScore(offers);
 
 	return {
 		offers: pipe(
 			sortedOffers,
 			formatOfferUrl(productTypesDefinition, partnersOverrideDefinition),
-			addClientTagsToOfferLinks(enableUseCachedOffers, tags),
+			addClientTagsToOfferLinks(isCachedOffersRequest, tags),
 			getOffersBasedOnLayout(displayLayout)
 		),
-		isError: offersData.isError,
-		leadUuid: offersData.leadUuid,
-		rateTableUuid: offersData.uuid,
+		isError,
+		errorCode,
+		leadUuid: leadUuid,
+		rateTableUuid,
 	};
 };

package/src/utils/getOffersByProductTypes.ts

@@ -9,29 +9,34 @@ import { parseClientTags } from "../capabilities/offer-catalog/src/utils/context
  * Retrieves offers by product types.
  *
  * @param {Object} params - The parameters for retrieving offers by product types.
- * @param {boolean} params.enableUseCachedOffers - Indicates if the offers should be retrieved from the cache.
+ * @param {boolean} params.isCachedOffersRequest - Indicates if the offers should be retrieved from the cache.
  * @param {string[]} params.productTypes - The product types to retrieve offers for.
  * @param {string} params.tags - The tags to use for retrieving offers.
  * @returns {Promise<OffersData>} A promise that resolves to an array of offers or undefined if no offers are found.
  */
 export const getOffersByProductTypes = async ({
-	enableUseCachedOffers,
+	isCachedOffersRequest,
 	productTypes,
 	tags,
 	context,
 }: {
-	enableUseCachedOffers: boolean;
+	isCachedOffersRequest: boolean;
 	productTypes: string[];
 	tags: string;
 	context: CnfContext;
 }) => {
-	// TODO it should be just enableUseCachedOffers and not !enableUseCachedOffers
-	if (enableUseCachedOffers) {
-		return await getCachedOffersByProductTypes(context)(productTypes);
+	if (isCachedOffersRequest) {
+		const { offers, uuid, isError, leadUuid, errorCode } =
+			await getCachedOffersByProductTypes(context)(productTypes);
+
+		return { offers, rateTableUuid: uuid, isError, leadUuid, errorCode };
 	}
 
-	return await getOffersForProductTypes(context)(
-		productTypes,
-		parseClientTags(tags)
-	);
+	const { offers, uuid, isError, leadUuid, errorCode } =
+		await getOffersForProductTypes(context)(
+			productTypes,
+			parseClientTags(tags)
+		);
+
+	return { offers, rateTableUuid: uuid, isError, leadUuid, errorCode };
 };