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

package/src/components/Modal/AllOffersModal.tsx

@@ -0,0 +1,213 @@
+import React, { useCallback, useMemo, useState } from "react";
+import {
+	Modal,
+	View,
+	SafeAreaView,
+	ScrollView,
+	TouchableOpacity,
+	StyleSheet,
+	Linking,
+	type LayoutChangeEvent,
+	type NativeScrollEvent,
+	type NativeSyntheticEvent,
+} from "react-native";
+import Text from "../Text";
+import { DynamicOffersContainer } from "../DynamicOffers/DynamicOffersContainer";
+import type { DynamicOfferProps } from "../DynamicOffers/DynamicOffers";
+
+type AllOffersModalProps = {
+	visible: boolean;
+	onClose: () => void;
+	config: DynamicOfferProps;
+};
+
+const FooterLink = ({ text, url }: { text: string; url?: string }) => {
+	const onPress = () => {
+		if (!url) return;
+
+		Linking.canOpenURL(url).then((supported) => {
+			if (supported) {
+				Linking.openURL(url);
+			}
+		});
+	};
+
+	return (
+		<TouchableOpacity onPress={onPress}>
+			<Text
+				variant="caption-1"
+				color="foregroundNeutralFaded"
+				style={styles.footerText}
+			>
+				{text}
+			</Text>
+		</TouchableOpacity>
+	);
+};
+
+export const AllOffersModal = ({
+	visible,
+	onClose,
+	config,
+}: AllOffersModalProps) => {
+	const { brand, title } = config;
+	const footerLinks = brand.links;
+
+	const [scrollOffset, setScrollOffset] = useState(0);
+	const [scrollViewHeight, setScrollViewHeight] = useState(0);
+
+	const handleScroll = useCallback(
+		(event: NativeSyntheticEvent<NativeScrollEvent>) => {
+			setScrollOffset(event.nativeEvent.contentOffset.y);
+		},
+		[]
+	);
+
+	const handleScrollViewLayout = useCallback((event: LayoutChangeEvent) => {
+		setScrollViewHeight(event.nativeEvent.layout.height);
+	}, []);
+
+	const footerConfig = useMemo(
+		() => [
+			{
+				text: "Engine by Moneylion",
+				url: footerLinks?.home,
+			},
+			{
+				text: "Terms",
+				url: footerLinks?.terms,
+			},
+			{
+				text: "Privacy",
+				url: footerLinks?.privacy,
+			},
+			{
+				text: "Disclosures",
+				url: "https://www.engine.tech/resources/legal#licenses",
+			},
+			{
+				text: "NMLS# 1475872",
+				url: "https://www.nmlsconsumeraccess.org/",
+			},
+		],
+		[footerLinks]
+	);
+
+	return (
+		<Modal
+			animationType="slide"
+			transparent={false}
+			visible={visible}
+			onRequestClose={onClose}
+		>
+			<SafeAreaView style={styles.modalContainer}>
+				<View style={styles.modalHeader}>
+					<TouchableOpacity
+						onPress={onClose}
+						style={styles.closeXButton}
+						hitSlop={{ top: 15, right: 15, bottom: 15, left: 15 }}
+					>
+						<Text style={styles.closeXText}>✕</Text>
+					</TouchableOpacity>
+					<Text variant="title-3" weight="bold" style={styles.headerTitle}>
+						{title}
+					</Text>
+				</View>
+
+				<View style={styles.contentWrapper}>
+					<ScrollView
+						style={styles.scrollView}
+						contentContainerStyle={styles.contentContainer}
+						onScroll={handleScroll}
+						onLayout={handleScrollViewLayout}
+						scrollEventThrottle={16} // For accurate tracking
+					>
+						<View style={styles.mainContent}>
+							<Text
+								variant={"caption-1"}
+								color={"foregroundNeutralFaded"}
+								weight={"normal"}
+								style={styles.offerOrderDisclaimer}
+							>
+								{
+									"Offer order is based on compensation from our partners, and other factors."
+								}
+							</Text>
+							<DynamicOffersContainer
+								config={{
+									isHorizontalScroll: false,
+									...config,
+									parentScrollOffset: scrollOffset,
+									parentScrollViewHeight: scrollViewHeight,
+								}}
+							/>
+						</View>
+						<View style={styles.footer}>
+							{footerConfig.map((item) => (
+								<FooterLink key={item.text} text={item.text} url={item.url} />
+							))}
+						</View>
+					</ScrollView>
+				</View>
+			</SafeAreaView>
+		</Modal>
+	);
+};
+
+const styles = StyleSheet.create({
+	modalContainer: {
+		flex: 1,
+		backgroundColor: "#EEEEEE",
+	},
+	modalHeader: {
+		flexDirection: "row",
+		padding: 16,
+		position: "relative",
+		justifyContent: "center",
+	},
+	closeXButton: {
+		position: "absolute",
+		left: 16,
+		top: 16,
+		zIndex: 10,
+	},
+	closeXText: {
+		fontSize: 20,
+		color: "#000000",
+	},
+	headerTitle: {
+		textAlign: "center",
+		alignSelf: "center",
+	},
+	contentWrapper: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+	},
+	scrollView: {
+		flex: 1,
+	},
+	contentContainer: {
+		flexGrow: 1,
+	},
+	mainContent: {
+		flexGrow: 1,
+	},
+	offerOrderDisclaimer: {
+		textAlign: "center",
+		marginHorizontal: 40,
+		marginBottom: 16,
+	},
+	footer: {
+		marginVertical: 24,
+		justifyContent: "center",
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: 8,
+		paddingHorizontal: 16,
+		paddingVertical: 8,
+	},
+	footerText: {
+		textDecorationLine: "underline",
+	},
+});

package/src/components/Modal/OfferDetailsModal.tsx

@@ -15,12 +15,14 @@ import { Disclaimer } from "./Disclaimer";
 import { CallToAction } from "../Common/DynamicOfferCard/CallToAction";
 import Divider from "../Divider";
 import type { BaseOffer } from "../../capabilities/offer-catalog/src";
+import { getEventCallbackContext } from "../../capabilities/offer-catalog/src/utils/getEventCallbackContext";
 
 type OfferDetailsModalProps = {
 	visible: boolean;
 	offer: BaseOffer;
 	offerIndex: number;
 	onClose: () => void;
+	isHorizontalScroll?: boolean;
 };
 
 const CTA_LABEL = "Continue";
@@ -30,6 +32,7 @@ export const OfferDetailsModal = ({
 	offer,
 	onClose,
 	offerIndex,
+	isHorizontalScroll = true,
 }: OfferDetailsModalProps) => {
 	const showDescriptionPoints = Boolean(offer?.descriptionPoints?.length);
 
@@ -79,7 +82,7 @@ export const OfferDetailsModal = ({
 					offer={offer}
 					overrideUrl={offer.overrideUrl}
 					style={styles.cta}
-					context="offer_details"
+					context={getEventCallbackContext(isHorizontalScroll)}
 				>
 					{CTA_LABEL}
 				</CallToAction>

package/src/components/MoneyLionOfferCarousel.tsx

@@ -261,6 +261,7 @@ export const MoneyLionOfferCarousel = (
 		showCardBorder,
 		title,
 		subtitle,
+		brand: context.brand,
 	};
 
 	const themeColor = {

package/src/context/EventHandlerProvider.tsx

@@ -28,6 +28,7 @@ interface onOfferDisplayInViewportProps {
 	leadUuid: string;
 	offer: BaseOffer;
 	offerIndex: number;
+	context: "horizontal_scroll" | "vertical_scroll";
 }
 
 interface onOfferClickProps {
@@ -37,7 +38,7 @@ interface onOfferClickProps {
 	leadUuid: string;
 	offer: BaseOffer;
 	offerIndex: number;
-	context: "offer" | "offer_details";
+	context: "horizontal_scroll" | "vertical_scroll";
 }
 
 interface onOfferDetailsPageOpenProps {
@@ -47,6 +48,7 @@ interface onOfferDetailsPageOpenProps {
 	leadUuid: string;
 	offer: BaseOffer;
 	offerIndex: number;
+	context: "horizontal_scroll" | "vertical_scroll";
 }
 
 interface onOfferDetailsPageCloseProps {