@moneylion/react-native-offer-carousel 1.7.1 → 1.8.0

package/src/components/MoneyLionOfferCarousel.tsx

@@ -1,4 +1,11 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+	type Dispatch,
+	type SetStateAction,
+} from "react";
 import { localCnfContext } from "../config/mocks/cnfContext";
 import { Text } from "react-native";
 import { getPageData, type GetPageDataParams } from "../pageData";
@@ -19,6 +26,15 @@ import { getThemeColors } from "../utils/getThemeColors";
 import type { UserData } from "../capabilities/configuration/src/userData/types";
 import type { ReshapedThemeColors } from "../capabilities/core/src";
 import ErrorBoundary from "./ErrorBoundary";
+import { VERSION } from "../version";
+import type {
+	ApiError,
+	InternalMoneyLionOfferCarouselError,
+	InternalOnErrorCallback,
+	OnErrorCallback,
+} from "../capabilities/errors/types";
+import { ErrorCodes } from "../capabilities/errors/types";
+import { getApiErrorLogProperties } from "./utils/errorUtils";
 
 export type CustomError = {
 	code?: number;
@@ -44,10 +60,19 @@ export type MoneyLionOfferCarouselProps = {
 	subtitle?: string;
 	isDarkTheme?: boolean;
 	fallbackUI?: React.ReactNode;
-	onError?: (error: CustomError) => void;
+	onError?: OnErrorCallback;
 	onLoad?: (numOffers: number) => void;
 	userData?: UserData;
-};
+} & Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">;
+
+export interface InternalMoneyLionOfferCarouselProps
+	extends Omit<MoneyLionOfferCarouselProps, "fallbackUI"> {
+	context: CnfContext | null;
+	pageData: any;
+	setContext: Dispatch<SetStateAction<CnfContext | null>>;
+	setPageData: Dispatch<SetStateAction<any>>;
+	onError?: InternalOnErrorCallback;
+}
 
 const getConfiguration = async ({
 	channel,
@@ -56,7 +81,7 @@ const getConfiguration = async ({
 	isDev,
 	onError,
 }: Pick<
-	MoneyLionOfferCarouselProps,
+	InternalMoneyLionOfferCarouselProps,
 	"channel" | "zone" | "subAccountToken" | "isDev" | "onError"
 >) => {
 	const url = `${getConfigApiBaseUrl(isDev)}/network/${channel}/${zone}/api/configuration`;
@@ -67,17 +92,11 @@ const getConfiguration = async ({
 	try {
 		const response = await fetch(url, { headers });
 		if (!response.ok) {
-			const errorCode = response.status;
-
-			onError?.({
-				code: errorCode,
-				message: `Configuration request failed with status: ${response.status}`,
-				timestamp: new Date().toISOString(),
-			});
-
-			throw new Error(
+			const error = new Error(
 				`Configuration request failed with status: ${response.status}`
-			);
+			) as ApiError;
+			error.code = response.status;
+			throw error;
 		}
 
 		const data = await response.json();
@@ -86,21 +105,26 @@ const getConfiguration = async ({
 	} 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(),
-			});
-		}
+		onError?.({
+			message: "Failed to fetch configuration",
+			error,
+			additionalInfo: {
+				channel,
+				zone,
+				isDev,
+			},
+			...(getApiErrorLogProperties(error) || {
+				code: ErrorCodes.FLOW_ERROR,
+				severity: "error",
+			}),
+		});
 
 		return localCnfContext;
 	}
 };
 
 const InternalMoneyLionOfferCarousel = (
-	props: Omit<MoneyLionOfferCarouselProps, "fallbackUI"> &
-		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
+	props: InternalMoneyLionOfferCarouselProps
 ) => {
 	const {
 		channel,
@@ -121,6 +145,10 @@ const InternalMoneyLionOfferCarousel = (
 		showProductTypeLabel: _showProductTypeLabel,
 		showCardBorder: _showCardBorder,
 		userData,
+		context,
+		setContext,
+		pageData,
+		setPageData,
 	} = props;
 
 	const {
@@ -166,11 +194,9 @@ const InternalMoneyLionOfferCarousel = (
 		]
 	);
 
-	const [context, setContext] = useState<CnfContext | null>(null);
 	const [isFetchingData, setIsFetchingData] = useState(true);
 	const [isFetchingConfig, setIsFetchingConfig] = useState(true);
 	const [error, setError] = useState<Error | null>(null);
-	const [pageData, setPageData] = useState<any>(null);
 
 	const isLoading = isFetchingData || isFetchingConfig;
 
@@ -194,13 +220,19 @@ const InternalMoneyLionOfferCarousel = (
 
 				setError(errorObj);
 
-				// Only call onError if not already called in getConfiguration
-				if (!errorObj.message.includes("status")) {
-					onError?.({
-						message: errorObj.message,
-						timestamp: new Date().toISOString(),
-					});
-				}
+				onError?.({
+					message: "Failed to fetch configuration",
+					error: errorObj,
+					additionalInfo: {
+						channel,
+						zone,
+						isDev,
+					},
+					...(getApiErrorLogProperties(errorObj) || {
+						code: ErrorCodes.FLOW_ERROR,
+						severity: "error",
+					}),
+				});
 			} finally {
 				setIsFetchingConfig(false);
 			}
@@ -221,6 +253,23 @@ const InternalMoneyLionOfferCarousel = (
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isFetchingConfig]);
 
+	useEffect(() => {
+		if (!channel || !zone || !subAccountToken || !searchAPIToken) {
+			const missingParams: string[] = [];
+			if (!channel) missingParams.push("channel");
+			if (!zone) missingParams.push("zone");
+			if (!subAccountToken) missingParams.push("subAccountToken");
+			if (!searchAPIToken) missingParams.push("searchAPIToken");
+
+			onError?.({
+				code: ErrorCodes.MISSING_CONFIG,
+				message: `Missing required parameters: ${missingParams.join(", ")}`,
+				severity: "error",
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [channel, zone, subAccountToken, searchAPIToken]);
+
 	useEffect(() => {
 		const fetchPageData = async () => {
 			// Should only fetch data if context is done fetching
@@ -231,17 +280,9 @@ const InternalMoneyLionOfferCarousel = (
 						context: { ...context, isDev },
 						params: getPageDataParams,
 						onRateTableSubmit,
+						onError,
 					});
 
-					// 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),
@@ -257,8 +298,16 @@ const InternalMoneyLionOfferCarousel = (
 						err instanceof Error ? err : new Error("Failed to fetch page data");
 
 					onError?.({
-						message: errorObj.message,
-						timestamp: new Date().toISOString(),
+						message: "Failed to fetch page data",
+						error: errorObj,
+						additionalInfo: {
+							context,
+							pageDataParams: getPageDataParams,
+						},
+						...(getApiErrorLogProperties(errorObj) || {
+							code: ErrorCodes.FLOW_ERROR,
+							severity: "error",
+						}),
 					});
 				} finally {
 					setIsFetchingData(false);
@@ -343,15 +392,47 @@ export const MoneyLionOfferCarousel = (
 	props: MoneyLionOfferCarouselProps &
 		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
 ) => {
-	const { fallbackUI, onError } = props;
+	const { fallbackUI, onError: _onError } = props;
+	const [context, setContext] = useState<CnfContext | null>(null);
+	const [pageData, setPageData] = useState<any>(null);
 
-	const handleError = (err: CustomError): void => {
-		onError?.(err);
-	};
+	const onError = useCallback(
+		(err: InternalMoneyLionOfferCarouselError): void => {
+			_onError?.({
+				timestamp: new Date().toISOString(),
+				sdkVersion: VERSION,
+				...err,
+			});
+		},
+		[_onError]
+	);
+
+	const logErrorBoundary = useCallback(
+		(error: Error) => {
+			onError?.({
+				code: ErrorCodes.UI_CRASH,
+				severity: "error",
+				message: "Error boundary crash",
+				error,
+				additionalInfo: {
+					context,
+					pageData,
+				},
+			});
+		},
+		[onError, pageData, context]
+	);
 
 	return (
-		<ErrorBoundary fallbackUI={fallbackUI} onError={handleError}>
-			<InternalMoneyLionOfferCarousel {...props} />
+		<ErrorBoundary fallbackUI={fallbackUI} onError={logErrorBoundary}>
+			<InternalMoneyLionOfferCarousel
+				{...props}
+				context={context}
+				setContext={setContext}
+				pageData={pageData}
+				setPageData={setPageData}
+				onError={onError}
+			/>
 		</ErrorBoundary>
 	);
 };

package/src/components/utils/errorUtils.ts

@@ -0,0 +1,70 @@
+import { ErrorCodes } from "../../capabilities/errors/types";
+import type { InternalMoneyLionOfferCarouselError } from "../../capabilities/errors/types";
+
+/**
+ * Extracts HTTP status code from the custom Api Error object.
+ * Api Error object contains code field which is the HTTP status code.
+ *
+ * @param error - The error object (can be any type)
+ * @returns The HTTP status code if available, null otherwise
+ */
+export const getCustomApiErrorStatusCode = (error: unknown): number | null => {
+	// Check if error is an object with code property (custom ApiError pattern)
+	if (error && typeof error === "object") {
+		if ("code" in error && typeof (error as any).code === "number") {
+			return (error as any).code;
+		}
+	}
+	return null;
+};
+
+/**
+ * Builds API error log properties from an error object.
+ * Checks if the error is a network error, and categorizes it as:
+ * - Client-side error (4xx status codes)
+ * - Server-side error (5xx status codes)
+ * - Other network error
+ *
+ * @param error - The error object (can be any type)
+ * @param message - The error message to include in the log properties
+ * @returns InternalMoneyLionOfferCarouselError object if it's a network error, null otherwise
+ */
+export const getApiErrorLogProperties = (
+	error: Error | unknown
+): Omit<InternalMoneyLionOfferCarouselError, "message"> | null => {
+	const statusCode = getCustomApiErrorStatusCode(error);
+	const logProperties: Omit<
+		InternalMoneyLionOfferCarouselError,
+		"code" | "message"
+	> = {
+		severity: "error",
+		error,
+	};
+
+	if (statusCode) {
+		if (statusCode >= 400 && statusCode < 500) {
+			// 4xx - Request error (client-side)
+			return {
+				...logProperties,
+				statusCode,
+				code: ErrorCodes.NETWORK_REQUEST_ERROR,
+			};
+		} else if (statusCode >= 500 && statusCode < 600) {
+			// 5xx - Server error
+			return {
+				...logProperties,
+				statusCode,
+				code: ErrorCodes.NETWORK_SERVER_ERROR,
+			};
+		}
+		// Other status codes
+		return {
+			...logProperties,
+			statusCode,
+			code: ErrorCodes.NETWORK_OTHER_ERROR,
+		};
+	}
+
+	// Not a network error (no status code and not a timeout)
+	return null;
+};

package/src/context/ThemeProvider.tsx

@@ -3,7 +3,7 @@ import React, {
 	type FC,
 	type ReactNode,
 	useContext,
-	useState,
+	useMemo,
 } from "react";
 import { Platform } from "react-native";
 
@@ -69,9 +69,6 @@ interface ThemeContextType {
 	theme: ThemeColors;
 	fontFamily: FontFamily;
 	isDarkTheme: boolean;
-	updateTheme: (newTheme: Partial<ThemeColors>) => void;
-	updateFontFamily: (newFontFamily: Partial<FontFamily>) => void;
-	setIsDarkTheme: (isDark: boolean) => void;
 }
 
 export const ThemeContext = createContext<ThemeContextType | null>(null);
@@ -97,39 +94,22 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({
 	isDarkTheme = false,
 	children,
 }) => {
-	const [theme, setTheme] = useState<ThemeColors>(themeColors);
-	const [fonts, setFonts] = useState<FontFamily>({
-		...defaultFontFamily,
-		...fontFamily,
-	});
-	const [darkTheme, setDarkTheme] = useState<boolean>(isDarkTheme);
-
-	const updateTheme = (newTheme: Partial<ThemeColors>) => {
-		setTheme((prevTheme) => ({
-			...prevTheme,
-			...newTheme,
-		}));
-	};
-
-	const updateFontFamily = (newFontFamily: Partial<FontFamily>) => {
-		setFonts((prevFonts) => ({
-			...prevFonts,
-			...newFontFamily,
-		}));
-	};
-
-	const setIsDarkTheme = (isDark: boolean) => {
-		setDarkTheme(isDark);
-	};
+	const fonts = useMemo<FontFamily>(
+		() => ({
+			...defaultFontFamily,
+			...fontFamily,
+		}),
+		[fontFamily]
+	);
 
-	const contextValue = {
-		theme,
-		fontFamily: fonts,
-		isDarkTheme: darkTheme,
-		updateTheme,
-		updateFontFamily,
-		setIsDarkTheme,
-	};
+	const contextValue = useMemo<ThemeContextType>(
+		() => ({
+			theme: themeColors,
+			fontFamily: fonts,
+			isDarkTheme,
+		}),
+		[themeColors, fonts, isDarkTheme]
+	);
 
 	return (
 		<ThemeContext.Provider value={contextValue}>

package/src/pageData.ts

@@ -1,5 +1,6 @@
 import type { UserData } from "./capabilities/configuration/src/userData/types";
 import type { CnfContext } from "./capabilities/core/src/system/cnfContext/CnfContext";
+import type { InternalOnErrorCallback } from "./capabilities/errors/types";
 import { getIsDevEnvironment } from "./capabilities/offer-catalog/src/utils/contextUtil";
 
 import type { onRateTableSubmitProps } from "./context/EventHandlerProvider";
@@ -26,12 +27,14 @@ type GetPageDataProps = {
 	context: CnfContext;
 	params: GetPageDataParams;
 	onRateTableSubmit?: (props: onRateTableSubmitProps) => void;
+	onError?: InternalOnErrorCallback;
 };
 
 export async function getPageData({
 	context,
 	params,
 	onRateTableSubmit,
+	onError,
 }: GetPageDataProps) {
 	const {
 		productType,
@@ -69,6 +72,7 @@ export async function getPageData({
 		query,
 		searchAPIToken,
 		isDev,
+		onError,
 	});
 
 	onRateTableSubmit?.({
@@ -90,6 +94,7 @@ export async function getPageData({
 			context,
 			defaultProductType,
 			userData,
+			onError,
 		});
 
 	return {

package/src/services/getDynamicOffers.ts

@@ -17,6 +17,7 @@ import type {
 } from "../capabilities/offer-catalog/src";
 import type { UserData } from "../capabilities/configuration/src/userData/types";
 import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
+import type { InternalOnErrorCallback } from "../capabilities/errors/types";
 
 export type GetDynamicOffersProps = {
 	tags: string;
@@ -27,6 +28,7 @@ export type GetDynamicOffersProps = {
 	partnersOverrideDefinition: PartnerOverride[];
 	context: CnfContext;
 	userData?: UserData;
+	onError?: InternalOnErrorCallback;
 } & Omit<
 	GetProductTypesProps,
 	| "context"
@@ -53,6 +55,7 @@ export const getDynamicOffers = async ({
 	partnersOverrideDefinition,
 	context,
 	userData,
+	onError,
 }: Omit<GetDynamicOffersProps, "isDev">) => {
 	// Get the initial offers
 	let { offers, rateTableUuid, isError, leadUuid, errorCode } =
@@ -63,6 +66,7 @@ export const getDynamicOffers = async ({
 			context,
 			userData,
 			enablePolling: true,
+			onError,
 		});
 
 	// If no offers found, fall back to the default product type
@@ -73,6 +77,7 @@ export const getDynamicOffers = async ({
 			tags,
 			context,
 			userData,
+			onError,
 		});
 
 		// Update the offers, rateTableUuid, isError, leafUuid and productTypes

package/src/services/getProductTypes.ts

@@ -1,3 +1,4 @@
+import type { InternalOnErrorCallback } from "../capabilities/errors/types";
 import { getProductTypesByQuery } from "./getProductTypesByQuery";
 
 export type GetProductTypesProps = {
@@ -6,6 +7,7 @@ export type GetProductTypesProps = {
 	defaultProductType: string;
 	searchAPIToken: string;
 	isDev: boolean;
+	onError?: InternalOnErrorCallback;
 };
 
 export type ResultType = "STATIC" | "QUERY" | "PRODUCT_TYPE" | "DEFAULT";
@@ -32,12 +34,14 @@ export const getProductTypes = async ({
 	query,
 	searchAPIToken,
 	isDev,
+	onError,
 }: GetProductTypesProps): Promise<ProductTypesResult> => {
 	if (query && query.trim().length > 0) {
 		const productTypes = await getProductTypesByQuery({
 			query,
 			searchAPIToken,
 			isDev,
+			onError,
 		});
 
 		return { productTypes, resultType: "QUERY" };

package/src/services/getProductTypesByQuery.ts

@@ -1,11 +1,18 @@
 import { pipe } from "effect";
 import { getEwsSearchApiBaseUrl } from "../apiEnvironment";
 import { orderProductTypesByRank } from "../capabilities/core/src/domain/third-party-search";
+import {
+	ErrorCodes,
+	type ApiError,
+	type InternalOnErrorCallback,
+} from "../capabilities/errors/types";
+import { getApiErrorLogProperties } from "../components/utils/errorUtils";
 
 type GetProductTypesByQueryProps = {
 	query: string;
 	searchAPIToken: string;
 	isDev: boolean;
+	onError?: InternalOnErrorCallback;
 };
 
 /**
@@ -33,6 +40,7 @@ export const getProductTypesByQuery = async ({
 	query,
 	searchAPIToken,
 	isDev,
+	onError,
 }: GetProductTypesByQueryProps) => {
 	const url = `${getEwsSearchApiBaseUrl(isDev)}/search/product-types?query=${encodeURIComponent(query)}`;
 	const headers = {
@@ -41,13 +49,28 @@ export const getProductTypesByQuery = async ({
 	try {
 		const response = await fetch(url, { headers });
 		if (!response.ok) {
-			throw new Error();
+			const error = new Error() as ApiError;
+			error.code = response.status;
+			throw error;
 		}
 		const productTypes = await response.json();
 
 		return pipe(productTypes, orderProductTypesByRank);
 	} catch (error) {
 		console.error("Error fetching ProductTypesByQuery", JSON.stringify(error));
+		onError?.({
+			message: "Failed to fetch product types by query",
+			error,
+			additionalInfo: {
+				query,
+				isDev,
+			},
+			...(getApiErrorLogProperties(error) || {
+				code: ErrorCodes.FLOW_ERROR,
+				severity: "error",
+			}),
+		});
+
 		return [];
 	}
 };

package/src/utils/getOffersByProductTypes.ts

@@ -1,5 +1,6 @@
 import type { UserData } from "../capabilities/configuration/src/userData/types";
 import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
+import type { InternalOnErrorCallback } from "../capabilities/errors/types";
 import {
 	getCachedOffersByProductTypes,
 	getOffersForProductTypes,
@@ -23,6 +24,7 @@ export const getOffersByProductTypes = async ({
 	context,
 	userData,
 	enablePolling = false,
+	onError,
 }: {
 	isCachedOffersRequest: boolean;
 	productTypes: string[];
@@ -30,10 +32,11 @@ export const getOffersByProductTypes = async ({
 	context: CnfContext;
 	userData?: UserData;
 	enablePolling?: boolean;
+	onError?: InternalOnErrorCallback;
 }) => {
 	if (isCachedOffersRequest) {
 		const { offers, uuid, isError, leadUuid, errorCode } =
-			await getCachedOffersByProductTypes(context)(productTypes);
+			await getCachedOffersByProductTypes(context)(productTypes, onError);
 
 		return { offers, rateTableUuid: uuid, isError, leadUuid, errorCode };
 	}
@@ -43,7 +46,8 @@ export const getOffersByProductTypes = async ({
 			productTypes,
 			parseClientTags(tags),
 			userData,
-			enablePolling
+			enablePolling,
+			onError
 		);
 
 	return { offers, rateTableUuid: uuid, isError, leadUuid, errorCode };

package/src/utils/resolveProductTypes.ts

@@ -1,3 +1,4 @@
+import type { InternalOnErrorCallback } from "../capabilities/errors/types";
 import { getProductTypes, type ResultType } from "../services/getProductTypes";
 
 type ResolveProductTypesProps = {
@@ -6,6 +7,7 @@ type ResolveProductTypesProps = {
 	defaultProductType: string;
 	searchAPIToken: string;
 	isDev: boolean;
+	onError?: InternalOnErrorCallback;
 };
 
 export const resolveProductTypes = async (