@moneylion/react-native-offer-carousel 1.2.1 → 1.3.0

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

@@ -20,6 +20,10 @@ import {
 import { useEventHandler } from "../../../context/EventHandlerProvider";
 import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 import Text from "../../Text";
+import { SeeAllButton } from "../SeeAllButton";
+import type { CnfContext } from "../../../capabilities/core/src/system/cnfContext/CnfContext";
+import { AllOffersModal } from "../../Modal/AllOffersModal";
+import { getEventCallbackContext } from "../../../capabilities/offer-catalog/src/utils/getEventCallbackContext";
 
 export type DynamicOffersRenderProps = {
 	title?: string;
@@ -34,6 +38,12 @@ export type DynamicOffersRenderProps = {
 	productTypeBuilder: typeof builder;
 	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
+	isHorizontalScroll?: boolean;
+	/** Used for vertical scroll only */
+	parentScrollOffset?: number;
+	/** Used for vertical scroll only */
+	parentScrollViewHeight?: number;
+	brand: CnfContext["brand"];
 };
 
 export const DynamicOffersRender = ({
@@ -45,13 +55,18 @@ export const DynamicOffersRender = ({
 	fallbackTemplate,
 	showCardBorder,
 	showProductTypeLabel,
+	isHorizontalScroll = true,
+	parentScrollOffset = 0,
+	parentScrollViewHeight = 0,
+	brand,
 }: DynamicOffersRenderProps) => {
 	// Performance optimization: store card measurements
 	const [cardLayouts, setCardLayouts] = useState<
-		Record<string, { x: number; width: number }>
+		Record<string, { x: number; width: number; y: number; height: number }>
 	>({});
 	const [scrollViewWidth, setScrollViewWidth] = useState(0);
 	const [scrollOffset, setScrollOffset] = useState(0);
+	const [allOffersModalVisible, setAllOffersModalVisible] = useState(false);
 
 	// Callback to fire when offer is displayed in viewport
 	const { onOfferDisplayInViewport, leadUuid, rateTableUuid } =
@@ -70,86 +85,158 @@ export const DynamicOffersRender = ({
 		setCardLayouts({});
 	}, [offers]);
 
-	// Handle card layout measurements
 	const handleCardLayout = useCallback(
 		(offerId: string, event: LayoutChangeEvent) => {
-			const { x, width } = event.nativeEvent.layout;
+			const { x, y, width, height } = event.nativeEvent.layout;
 
 			setCardLayouts((prev) => {
+				const positionValue = isHorizontalScroll ? x : y;
+				const sizeValue = isHorizontalScroll ? width : height;
+
 				// Only update if measurements changed
 				if (
 					prev[offerId] &&
-					prev[offerId]?.x === x &&
-					prev[offerId]?.width === width
+					prev[offerId]?.x === positionValue &&
+					prev[offerId]?.width === sizeValue
 				) {
 					return prev;
 				}
-				return { ...prev, [offerId]: { x, width } };
+
+				return {
+					...prev,
+					[offerId]: {
+						x: positionValue,
+						width: sizeValue,
+						y: y,
+						height: height,
+					},
+				};
 			});
 		},
-		[]
+		[isHorizontalScroll]
 	);
 
 	// Check which offers are visible
 	const checkVisibleOffers = useCallback(() => {
-		if (!onOfferDisplayInViewport || !scrollViewWidth) return;
-
-		// Calculate visible range
-		const visibleLeft = scrollOffset;
-		const visibleRight = scrollOffset + scrollViewWidth;
-
-		// Check each offer's visibility
-		offers.forEach((offer, index) => {
-			// Skip if already tracked
-			if (viewedOffers.current.has(offer.uuid)) return;
-
-			const layout = cardLayouts[offer.uuid];
-			if (!layout) return;
-
-			// Calculate card position
-			const cardLeft = layout.x;
-			const cardRight = cardLeft + layout.width;
-			const cardWidth = layout.width;
-
-			// Calculate visibility
-			let visibleWidth = 0;
-
-			if (cardLeft >= visibleLeft && cardRight <= visibleRight) {
-				// Fully visible
-				visibleWidth = cardWidth;
-			} else if (cardLeft < visibleLeft && cardRight > visibleLeft) {
-				// Partly visible from left
-				visibleWidth = cardRight - visibleLeft;
-			} else if (cardLeft < visibleRight && cardRight > visibleRight) {
-				// Partly visible from right
-				visibleWidth = visibleRight - cardLeft;
-			}
+		if (!onOfferDisplayInViewport) return;
+
+		if (isHorizontalScroll) {
+			if (!scrollViewWidth) return;
+
+			// Calculate visible range for horizontal scrolling
+			const visibleLeft = scrollOffset;
+			const visibleRight = scrollOffset + scrollViewWidth;
+
+			// Check each offer's visibility
+			offers.forEach((offer, index) => {
+				// Skip if already tracked
+				if (viewedOffers.current.has(offer.uuid)) return;
+
+				const layout = cardLayouts[offer.uuid];
+				if (!layout) return;
+
+				// Calculate card position
+				const cardLeft = layout.x;
+				const cardRight = cardLeft + layout.width;
+				const cardWidth = layout.width;
+
+				// Calculate visibility
+				let visibleWidth = 0;
+
+				if (cardLeft >= visibleLeft && cardRight <= visibleRight) {
+					// Fully visible
+					visibleWidth = cardWidth;
+				} else if (cardLeft < visibleLeft && cardRight > visibleLeft) {
+					// Partly visible from left
+					visibleWidth = cardRight - visibleLeft;
+				} else if (cardLeft < visibleRight && cardRight > visibleRight) {
+					// Partly visible from right
+					visibleWidth = visibleRight - cardLeft;
+				}
+
+				// Calculate visibility percentage
+				const visibilityPercentage = (visibleWidth / cardWidth) * 100;
+
+				// If ≥50% visible, track it and fire callback
+				if (visibilityPercentage >= 50) {
+					viewedOffers.current.add(offer.uuid);
+
+					onOfferDisplayInViewport({
+						timestamp: new Date().toISOString(),
+						offerUuid: offer.uuid,
+						leadUuid,
+						offer,
+						offerIndex: index,
+						rateTableUuid,
+						context: getEventCallbackContext(isHorizontalScroll),
+					});
+				}
+			});
+		} else {
+			// For vertical scrolling with parent scroll view
+			if (parentScrollViewHeight > 0) {
+				// Calculate visible range for vertical scrolling
+				const visibleTop = parentScrollOffset;
+				const visibleBottom = parentScrollOffset + parentScrollViewHeight;
+
+				// Check each offer's visibility
+				offers.forEach((offer, index) => {
+					// Skip if already tracked
+					if (viewedOffers.current.has(offer.uuid)) return;
+
+					const layout = cardLayouts[offer.uuid];
+					if (!layout) return;
+
+					// Calculate card position
+					const cardTop = layout.y;
+					const cardHeight = layout.height;
+					const cardBottom = cardTop + cardHeight;
+
+					// Calculate visibility
+					let visibleHeight = 0;
 
-			// Calculate visibility percentage
-			const visibilityPercentage = (visibleWidth / cardWidth) * 100;
+					if (cardTop >= visibleTop && cardBottom <= visibleBottom) {
+						// Fully visible
+						visibleHeight = cardHeight;
+					} else if (cardTop < visibleTop && cardBottom > visibleTop) {
+						// Partly visible from top
+						visibleHeight = cardBottom - visibleTop;
+					} else if (cardTop < visibleBottom && cardBottom > visibleBottom) {
+						// Partly visible from bottom
+						visibleHeight = visibleBottom - cardTop;
+					}
 
-			// If ≥50% visible, track it and fire callback
-			if (visibilityPercentage >= 50) {
-				viewedOffers.current.add(offer.uuid);
+					// Calculate visibility percentage
+					const visibilityPercentage = (visibleHeight / cardHeight) * 100;
 
-				onOfferDisplayInViewport({
-					timestamp: new Date().toISOString(),
-					offerUuid: offer.uuid,
-					leadUuid,
-					offer,
-					offerIndex: index,
-					rateTableUuid,
+					// If ≥50% visible, track it and fire callback
+					if (visibilityPercentage >= 50) {
+						viewedOffers.current.add(offer.uuid);
+
+						onOfferDisplayInViewport({
+							timestamp: new Date().toISOString(),
+							offerUuid: offer.uuid,
+							leadUuid,
+							offer,
+							offerIndex: index,
+							rateTableUuid,
+							context: getEventCallbackContext(isHorizontalScroll),
+						});
+					}
 				});
 			}
-		});
+		}
 	}, [
 		cardLayouts,
+		isHorizontalScroll,
 		leadUuid,
 		offers,
 		onOfferDisplayInViewport,
 		rateTableUuid,
 		scrollOffset,
 		scrollViewWidth,
+		parentScrollOffset,
+		parentScrollViewHeight,
 	]);
 
 	// Handle ScrollView layout
@@ -178,6 +265,8 @@ export const DynamicOffersRender = ({
 
 	// Memoize offer components to prevent unnecessary re-renders
 	const offerComponents = useMemo(() => {
+		const fullCardWidth = offers.length === 1 || !isHorizontalScroll;
+
 		// Create offer components
 		return displayLayout === "fixed"
 			? [
@@ -188,6 +277,8 @@ export const DynamicOffersRender = ({
 						showProductTypeLabel,
 						fallbackTemplate,
 						showCardBorder,
+						fullCardWidth,
+						isHorizontalScroll,
 					}),
 				]
 			: Offer({
@@ -196,6 +287,8 @@ export const DynamicOffersRender = ({
 					showProductTypeLabel,
 					fallbackTemplate,
 					showCardBorder,
+					fullCardWidth,
+					isHorizontalScroll,
 				});
 	}, [
 		displayLayout,
@@ -204,6 +297,7 @@ export const DynamicOffersRender = ({
 		showProductTypeLabel,
 		fallbackTemplate,
 		showCardBorder,
+		isHorizontalScroll,
 	]);
 
 	// Wrapped offer components with layout measurement
@@ -236,49 +330,107 @@ export const DynamicOffersRender = ({
 		return () => clearTimeout(timeoutId);
 	}, [checkVisibleOffers, scrollOffset, scrollViewWidth, cardLayouts]);
 
+	useEffect(() => {
+		if (parentScrollOffset !== undefined) {
+			// Check visibility when parent scrolls
+			checkVisibleOffers();
+		}
+	}, [parentScrollOffset, checkVisibleOffers]);
+
 	const showTitle = Boolean(title?.trim());
 	const showSubtitle = Boolean(subtitle?.trim());
 	const showHeaderText = showTitle || showSubtitle;
+	const showHeader = isHorizontalScroll;
+
+	const onPressSeeAll = () => setAllOffersModalVisible(true);
+	const onCloseModal = () => setAllOffersModalVisible(false);
+
+	const config = {
+		title,
+		subtitle,
+		displayLayout,
+		showCardBorder,
+		showProductTypeLabel,
+		shouldHideFooter: false,
+		isHorizontalScroll: false,
+		offers,
+		brand,
+	};
 
 	return (
 		<>
-			<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}
-				contentContainerStyle={styles.contentContainer}
-				onLayout={handleScrollViewLayout}
-				onScroll={handleScroll}
-				scrollEventThrottle={16} // Lower number for more precision, higher for better performance
-			>
-				{wrappedOfferComponents}
-			</ScrollView>
+			{showHeader && (
+				<View
+					style={[
+						styles.header,
+						{ alignItems: showSubtitle ? "flex-start" : "center" },
+					]}
+				>
+					{showHeaderText && (
+						<View style={styles.headerTextContainer}>
+							{showTitle && (
+								<Text variant="featured-3" weight="bold">
+									{title}
+								</Text>
+							)}
+							{showSubtitle && (
+								<Text variant="body-3" color="foregroundNeutralFaded">
+									{subtitle}
+								</Text>
+							)}
+						</View>
+					)}
+					<SeeAllButton onPress={onPressSeeAll} />
+					<AllOffersModal
+						visible={allOffersModalVisible}
+						onClose={onCloseModal}
+						config={config}
+					/>
+				</View>
+			)}
+			{isHorizontalScroll ? (
+				<ScrollView
+					horizontal={true}
+					showsHorizontalScrollIndicator={false}
+					contentContainerStyle={styles.contentContainer}
+					style={styles.scrollView}
+					onLayout={handleScrollViewLayout}
+					onScroll={handleScroll}
+					scrollEventThrottle={16} // Lower number for more precision, higher for better performance
+				>
+					{wrappedOfferComponents}
+				</ScrollView>
+			) : (
+				// For vertical scroll, parent component will handle the scroll.
+				// Event callback triggers will happen in the parent component.
+				<View
+					style={[styles.contentContainer, { flex: 1 }]}
+					onLayout={handleScrollViewLayout}
+				>
+					{wrappedOfferComponents}
+				</View>
+			)}
 		</>
 	);
 };
 
 const styles = StyleSheet.create({
 	contentContainer: {
+		// for horizontal scroll
 		columnGap: 20,
 		paddingHorizontal: 16,
+
+		// for all offers vertical scroll
+		rowGap: 16,
+	},
+	scrollView: {
+		flex: 1,
 	},
 	header: {
 		marginHorizontal: 16,
 		marginBottom: 16,
 		flexDirection: "row",
 		justifyContent: "space-between",
-		alignItems: "center",
 	},
 	headerTextContainer: {
 		flex: 1,

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

@@ -7,11 +7,13 @@ export function FallbackOfferTemplate({
 	offerIndex,
 	showCardBorder = true,
 	showProductTypeLabel = true,
+	isHorizontalScroll = true,
 }: {
 	offer: BaseOffer;
 	offerIndex: number;
 	showCardBorder?: boolean;
 	showProductTypeLabel?: boolean;
+	isHorizontalScroll?: boolean;
 }) {
 	return (
 		<HeadlineWithDescriptionCard
@@ -24,6 +26,7 @@ export function FallbackOfferTemplate({
 			}}
 			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
+			isHorizontalScroll={isHorizontalScroll}
 		/>
 	);
 }

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

@@ -18,14 +18,21 @@ type RenderOfferListProps = {
 		offerIndex,
 		showProductTypeLabel,
 		showCardBorder,
+		fullCardWidth,
+		isHorizontalScroll,
 	}: {
 		offer: BaseOffer;
 		offerIndex: number;
 		showProductTypeLabel?: boolean;
 		showCardBorder?: boolean;
+		fullCardWidth?: boolean;
+		isHorizontalScroll?: boolean;
 	}) => React.ReactNode;
 	showCardBorder?: boolean;
 	showProductTypeLabel?: boolean;
+	/** Offer card should be full width when offers.length === 1 in horizontal scroll or offers are scrolled vertically (when !isHorizontalScroll is true) */
+	fullCardWidth?: boolean;
+	isHorizontalScroll?: boolean;
 	// featureClient?: CnfFeatureClient; TODO: this is the like split on cnf side it uses growthbook
 };
 
@@ -35,6 +42,8 @@ export const Offer = ({
 	showProductTypeLabel = true,
 	fallbackTemplate,
 	showCardBorder = true,
+	fullCardWidth = false,
+	isHorizontalScroll = true,
 }: RenderOfferListProps) =>
 	offers.map((offer: BaseOffer, offerIndex: number) => {
 		const builder = productTypeBuilder.find(({ productTypes }) =>
@@ -60,6 +69,8 @@ export const Offer = ({
 							productTypeBuilder={layout}
 							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
+							fullCardWidth={fullCardWidth}
+							isHorizontalScroll={isHorizontalScroll}
 						/>
 					))
 					.with({ layout: "creditCardOfferCard" }, (layout) => (
@@ -70,6 +81,8 @@ export const Offer = ({
 							productTypeBuilder={layout}
 							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
+							fullCardWidth={fullCardWidth}
+							isHorizontalScroll={isHorizontalScroll}
 						/>
 					))
 					.with({ layout: "headlineWithDescriptionCard" }, (layout) => (
@@ -80,6 +93,8 @@ export const Offer = ({
 							productTypeBuilder={layout}
 							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
+							fullCardWidth={fullCardWidth}
+							isHorizontalScroll={isHorizontalScroll}
 						/>
 					))
 					.with(undefined, () => {
@@ -94,6 +109,8 @@ export const Offer = ({
 								key={`${offerIndex}-${offer.uuid}`}
 								offer={offer}
 								showProductTypeLabel={showProductTypeLabel}
+								fullCardWidth={fullCardWidth}
+								isHorizontalScroll={isHorizontalScroll}
 							/>
 						);
 					})

package/src/components/DynamicOffers/SeeAllButton.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import Button from "../Button";
+
+interface SeeAllButtonProps {
+	onPress: () => void;
+}
+
+export const SeeAllButton = ({ onPress }: SeeAllButtonProps) => {
+	return (
+		<>
+			<Button
+				color={"backgroundNeutral"}
+				textVariant={"body-3"}
+				textFontWeight={"bold"}
+				style={styles.seeAllButton}
+				onPress={onPress}
+			>
+				{"See all"}
+			</Button>
+		</>
+	);
+};
+
+const styles = StyleSheet.create({
+	seeAllButton: {
+		height: "auto",
+		paddingVertical: 8,
+		paddingHorizontal: 12,
+	},
+});

package/src/components/Layouts/CreditCardOfferCard/index.tsx

@@ -9,6 +9,7 @@ import Text from "../../Text";
 import { CallToAction } from "../../Common/DynamicOfferCard/CallToAction";
 import { StyleSheet } from "react-native";
 import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
+import { getEventCallbackContext } from "../../../capabilities/offer-catalog/src/utils/getEventCallbackContext";
 
 type CreditCardOfferCardProps = {
 	productTypeBuilder: CreditCardOfferCardBuilderProps;
@@ -16,6 +17,8 @@ type CreditCardOfferCardProps = {
 	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 	offerIndex: number;
+	fullCardWidth?: boolean;
+	isHorizontalScroll?: boolean;
 };
 
 export const CreditCardOfferCard = ({
@@ -24,6 +27,8 @@ export const CreditCardOfferCard = ({
 	showCardBorder,
 	showProductTypeLabel,
 	offerIndex,
+	fullCardWidth = false,
+	isHorizontalScroll = true,
 }: CreditCardOfferCardProps) => {
 	const { stats } = makeCreditCardOfferStats(productTypeBuilder)(offer);
 	const descriptionPoints = get(offer, "descriptionPoints", []);
@@ -33,7 +38,10 @@ export const CreditCardOfferCard = ({
 	const showBadge = badges.length > 0;
 
 	return (
-		<BaseOfferCard showCardBorder={showCardBorder}>
+		<BaseOfferCard
+			showCardBorder={showCardBorder}
+			fullCardWidth={fullCardWidth}
+		>
 			{showProductTypeLabel && (
 				<BaseOfferCard.TopBar>
 					<BaseOfferCard.ProductType>
@@ -66,7 +74,11 @@ export const CreditCardOfferCard = ({
 								/>
 							))}
 							{showMoreInfo && (
-								<SeeMore offer={offer} offerIndex={offerIndex} />
+								<SeeMore
+									offer={offer}
+									offerIndex={offerIndex}
+									isHorizontalScroll={isHorizontalScroll}
+								/>
 							)}
 						</BaseOfferCard.Stats>
 					</BaseOfferCard.Content>
@@ -78,7 +90,7 @@ export const CreditCardOfferCard = ({
 						offer={offer}
 						overrideUrl={offer.overrideUrl}
 						style={styles.cta}
-						context="offer"
+						context={getEventCallbackContext(isHorizontalScroll)}
 						offerIndex={offerIndex}
 					>
 						Continue

package/src/components/Layouts/DefaultOfferCard/index.tsx

@@ -13,6 +13,8 @@ type DefaultOfferCardProps = {
 	offerIndex: number;
 	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
+	fullCardWidth?: boolean;
+	isHorizontalScroll?: boolean;
 };
 
 export const DefaultOfferCard = ({
@@ -21,6 +23,8 @@ export const DefaultOfferCard = ({
 	offerIndex,
 	showCardBorder,
 	showProductTypeLabel,
+	fullCardWidth = false,
+	isHorizontalScroll = true,
 }: DefaultOfferCardProps) => {
 	const { stats, topStats } =
 		makeDefaultOfferCardStats(productTypeBuilder)(offer);
@@ -41,6 +45,8 @@ export const DefaultOfferCard = ({
 			offerIndex={offerIndex}
 			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
+			fullCardWidth={fullCardWidth}
+			isHorizontalScroll={isHorizontalScroll}
 		>
 			<BaseOfferCard.TopContainer>
 				{topStats.map((stat) => (
@@ -67,7 +73,13 @@ export const DefaultOfferCard = ({
 						contentDescription={contentDescription}
 					/>
 				)}
-				{showMoreInfo && <SeeMore offer={offer} offerIndex={offerIndex} />}
+				{showMoreInfo && (
+					<SeeMore
+						offer={offer}
+						offerIndex={offerIndex}
+						isHorizontalScroll={isHorizontalScroll}
+					/>
+				)}
 			</BaseOfferCard.Stats>
 		</DynamicOfferCard>
 	);

package/src/components/Layouts/HeadlineWithDescriptionCard/index.tsx

@@ -13,6 +13,8 @@ type HeadlineWithDescriptionCardProps = {
 	offerIndex: number;
 	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
+	fullCardWidth?: boolean;
+	isHorizontalScroll?: boolean;
 };
 export const HeadlineWithDescriptionCard = ({
 	offer,
@@ -20,6 +22,8 @@ export const HeadlineWithDescriptionCard = ({
 	offerIndex,
 	showCardBorder,
 	showProductTypeLabel,
+	fullCardWidth = false,
+	isHorizontalScroll = true,
 }: HeadlineWithDescriptionCardProps) => {
 	const {
 		headlineField = "headline",
@@ -45,6 +49,8 @@ export const HeadlineWithDescriptionCard = ({
 			offerIndex={offerIndex}
 			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
+			fullCardWidth={fullCardWidth}
+			isHorizontalScroll={isHorizontalScroll}
 		>
 			<BaseOfferCard.TopContainer>
 				<BaseOfferCard.Headline>{headline}</BaseOfferCard.Headline>
@@ -56,7 +62,13 @@ export const HeadlineWithDescriptionCard = ({
 					hasDivider={false}
 				/>
 			)}
-			{showMoreInfo && <SeeMore offer={offer} offerIndex={offerIndex} />}
+			{showMoreInfo && (
+				<SeeMore
+					offer={offer}
+					offerIndex={offerIndex}
+					isHorizontalScroll={isHorizontalScroll}
+				/>
+			)}
 		</DynamicOfferCard>
 	);
 };