@moneylion/react-native-offer-carousel 1.0.0

package/src/components/Common/DynamicOfferCard/CallToAction.tsx

@@ -0,0 +1,47 @@
+import React, { type ComponentProps } from "react";
+import { BaseOfferCard } from "../BaseOfferCard";
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+import type Button from "../../Button";
+import { Linking } from "react-native";
+import { useEventHandler } from "../../../context/EventHandlerProvider";
+
+export type CTAProps = ComponentProps<typeof Button & { href: string }> & {
+	overrideUrl?: string;
+	offer: BaseOffer;
+	context: "offer" | "offer_details";
+	offerIndex: number;
+	// trackEvent: EventServerAction;
+};
+
+export const CallToAction = ({
+	children,
+	offer,
+	context,
+	offerIndex,
+	...rest
+}: CTAProps) => {
+	const { onOfferClick, rateTableUuid, leadUuid } = useEventHandler();
+	return (
+		<BaseOfferCard.CallToAction
+			onPress={() => {
+				onOfferClick?.({
+					timestamp: new Date().toISOString(),
+					offerUuid: offer.uuid,
+					rateTableUuid,
+					leadUuid,
+					offer,
+					offerIndex,
+					context,
+				});
+				Linking.canOpenURL(offer.url).then((supported) => {
+					if (supported) {
+						Linking.openURL(offer.url);
+					}
+				});
+			}}
+			{...rest}
+		>
+			{children}
+		</BaseOfferCard.CallToAction>
+	);
+};

package/src/components/Common/DynamicOfferCard/SeeMore.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useState } from "react";
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+import Text from "../../Text";
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { OfferDetailsModal } from "../../Modal/OfferDetailsModal";
+import { useEventHandler } from "../../../context/EventHandlerProvider";
+
+export type SeeMoreProps = {
+	offer: BaseOffer;
+	offerIndex: number;
+};
+
+export const SeeMore = ({ offer, offerIndex }: SeeMoreProps) => {
+	const [modalVisible, setModalVisible] = useState(false);
+	const {
+		onOfferDetailsPageOpen,
+		onOfferDetailsPageClose,
+		rateTableUuid,
+		leadUuid,
+	} = useEventHandler();
+
+	const handleMoreInfoClick = useCallback(() => {
+		onOfferDetailsPageOpen?.({
+			timestamp: new Date().toISOString(),
+			offerUuid: offer.uuid,
+			leadUuid: leadUuid,
+			offer,
+			offerIndex,
+			rateTableUuid,
+		});
+		setModalVisible(true);
+	}, [leadUuid, offer, offerIndex, onOfferDetailsPageOpen, rateTableUuid]);
+
+	const handleCloseModal = useCallback(() => {
+		onOfferDetailsPageClose?.({
+			timestamp: new Date().toISOString(),
+			offerUuid: offer.uuid,
+			leadUuid: leadUuid,
+			offer,
+			offerIndex,
+			rateTableUuid,
+		});
+		setModalVisible(false);
+	}, [leadUuid, offer, offerIndex, onOfferDetailsPageClose, rateTableUuid]);
+
+	return (
+		<>
+			<TouchableOpacity onPress={handleMoreInfoClick} style={styles.container}>
+				<Text
+					variant={"body-3"}
+					color={"neutral"}
+					weight={"medium"}
+					style={styles.text}
+				>
+					See details
+				</Text>
+			</TouchableOpacity>
+
+			<OfferDetailsModal
+				offerIndex={offerIndex}
+				visible={modalVisible}
+				offer={offer}
+				onClose={handleCloseModal}
+			/>
+		</>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		marginTop: 12,
+	},
+	text: {
+		textDecorationLine: "underline",
+	},
+});

package/src/components/Common/DynamicOfferCard/index.tsx

@@ -0,0 +1,64 @@
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+import React from "react";
+import { BaseOfferCard } from "../BaseOfferCard";
+import { CallToAction } from "./CallToAction";
+import { StyleSheet } from "react-native";
+
+type DefaultOfferCatalogOfferType = {
+	children: React.ReactNode;
+	offer: BaseOffer;
+	offerIndex: number;
+	showBorder: boolean;
+	showProductTypeLabel?: boolean;
+};
+
+function DynamicOfferCard({
+	children,
+	offer,
+	offerIndex,
+	showBorder,
+	showProductTypeLabel,
+}: DefaultOfferCatalogOfferType) {
+	return (
+		<BaseOfferCard showBorder={showBorder}>
+			{showProductTypeLabel && (
+				<BaseOfferCard.TopBar>
+					<BaseOfferCard.ProductType>
+						{offer.productDisplayName}
+					</BaseOfferCard.ProductType>
+				</BaseOfferCard.TopBar>
+			)}
+			<BaseOfferCard.Container>
+				<BaseOfferCard.PartnerContainer>
+					<BaseOfferCard.PartnerImage
+						src={offer.financialInstitutionImageUrl}
+						alt={offer.financialInstitutionDisplayName}
+					/>
+					<BaseOfferCard.Content>{children}</BaseOfferCard.Content>
+				</BaseOfferCard.PartnerContainer>
+
+				<BaseOfferCard.BottomBar>
+					<CallToAction
+						offer={offer}
+						overrideUrl={offer.overrideUrl}
+						style={styles.cta}
+						context="offer"
+						offerIndex={offerIndex}
+					>
+						{"Continue"}
+					</CallToAction>
+					{/* Move this back when we have mocked or api data ready */}
+					{/* <Hidden hide={socialProof === "none"}>
+						<BaseOfferCard.ChosenBy>300</BaseOfferCard.ChosenBy>
+					</Hidden> */}
+				</BaseOfferCard.BottomBar>
+			</BaseOfferCard.Container>
+		</BaseOfferCard>
+	);
+}
+
+export { DynamicOfferCard };
+
+const styles = StyleSheet.create({
+	cta: { marginTop: 20 },
+});

package/src/components/Common/index.ts

@@ -0,0 +1,3 @@
+export { SeeMore } from "./DynamicOfferCard/SeeMore";
+export { DynamicOfferCard } from "./DynamicOfferCard";
+export { BaseOfferCard } from "./BaseOfferCard";

package/src/components/Divider/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+
+/**
+ * A simple horizontal divider component for React Native.
+ * @param {Object} props - Component props
+ * @param {string} [props.color] - Optional color for the divider (defaults to a neutral border color)
+ * @param {Object} [props.style] - Optional additional styles
+ * @returns {JSX.Element} - Rendered divider
+ */
+
+export interface DividerProps {
+	color?: string;
+	style?: StyleProp<ViewStyle>;
+}
+
+const Divider = ({ color, style }: DividerProps) => {
+	return (
+		<View
+			style={[styles.divider, color ? { backgroundColor: color } : null, style]}
+			accessible={true}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	divider: {
+		height: 1,
+		width: "100%",
+		backgroundColor: "#E0E0E0", // Default neutral border color
+		marginVertical: 12,
+	},
+});
+
+export default Divider;

package/src/components/DynamicOffers/DynamicOffers.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { productTypeBuilder } from "../../../builder/builder";
+import { DynamicOffersRender, FallbackOfferTemplate } from "./Render";
+import type { DynamicOffersRenderProps } from "./Render/DynamicOffersRender";
+import type { Layout } from "../../utils";
+import { View } from "react-native";
+
+export type DynamicOfferProps = {
+	title: string;
+	displayLayout: Layout;
+	showBorder: boolean;
+	showProductTypeLabel?: boolean;
+	shouldHideFooter: boolean;
+} & Pick<DynamicOffersRenderProps, "offers">;
+
+export const DynamicOffers = ({
+	title,
+	displayLayout,
+	showBorder,
+	showProductTypeLabel,
+	// shouldHideFooter,
+	offers,
+}: DynamicOfferProps): React.JSX.Element => {
+	if (offers.length === 0) return <></>;
+
+	return (
+		<View>
+			{/* TODO: Need to check what is this used for?? */}
+			{/*
+			<ListDisplayedEventTracker
+				offerUuids={offers.map((offer) => offer.uuid as OfferUuid)}
+			/>
+			*/}
+			<DynamicOffersRender
+				title={title}
+				offers={offers}
+				displayLayout={displayLayout}
+				fallbackTemplate={FallbackOfferTemplate}
+				productTypeBuilder={productTypeBuilder}
+				showBorder={showBorder}
+				showProductTypeLabel={showProductTypeLabel}
+			/>
+			{/* {!shouldHideFooter && <Footer offers={offers} />} */}
+		</View>
+	);
+};

package/src/components/DynamicOffers/DynamicOffersContainer.tsx

@@ -0,0 +1,41 @@
+import React, { Suspense } from "react";
+import { match } from "ts-pattern";
+import type { Layout } from "../../utils";
+import { DynamicOffers, type DynamicOfferProps } from "./DynamicOffers";
+import Skeleton from "../Skeleton";
+import { View, StyleSheet } from "react-native";
+
+export const DynamicOfferSkeleton = React.memo(
+	({ displayLayout = "carousel" }: { displayLayout?: Layout }) =>
+		match(displayLayout)
+			.with("fixed", () => <Skeleton height={300} />)
+			.otherwise(() => (
+				<View style={styles.skeletonContainer}>
+					<Skeleton height={10} width={73} />
+					<Skeleton height={300} />
+				</View>
+			))
+);
+
+export const DynamicOffersContainer = React.memo(
+	({ config }: { config: DynamicOfferProps }) => {
+		return (
+			<Suspense
+				fallback={<DynamicOfferSkeleton displayLayout={config.displayLayout} />}
+			>
+				<DynamicOffers
+					offers={config.offers}
+					title={config.title}
+					showProductTypeLabel={config.showProductTypeLabel}
+					displayLayout={config.displayLayout}
+					showBorder={config.showBorder}
+					shouldHideFooter={config.shouldHideFooter}
+				/>
+			</Suspense>
+		);
+	}
+);
+
+const styles = StyleSheet.create({
+	skeletonContainer: { gap: 2, width: "100%" },
+});

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

@@ -0,0 +1,261 @@
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src/types/offerCatalogSchema";
+import type { Layout } from "../../../utils";
+import { productTypeBuilder as builder } from "../../../../builder/builder";
+import { Offer } from "./Offer";
+import {
+	InteractionManager,
+	ScrollView,
+	StyleSheet,
+	View,
+	type LayoutChangeEvent,
+	type NativeScrollEvent,
+	type NativeSyntheticEvent,
+} from "react-native";
+import { useEventHandler } from "../../../context/EventHandlerProvider";
+
+export type DynamicOffersRenderProps = {
+	title: string;
+	offers: BaseOffer[];
+	displayLayout: Layout;
+	fallbackTemplate?: React.FC<{
+		offer: BaseOffer;
+		showProductTypeLabel?: boolean;
+		offerIndex: number;
+	}>;
+	productTypeBuilder: typeof builder;
+	showBorder: boolean;
+	showProductTypeLabel?: boolean;
+};
+
+export const DynamicOffersRender = ({
+	title,
+	offers,
+	displayLayout,
+	productTypeBuilder = builder,
+	fallbackTemplate,
+	showBorder,
+	showProductTypeLabel,
+}: DynamicOffersRenderProps) => {
+	// Performance optimization: store card measurements
+	const [cardLayouts, setCardLayouts] = useState<
+		Record<string, { x: number; width: number }>
+	>({});
+	const [scrollViewWidth, setScrollViewWidth] = useState(0);
+	const [scrollOffset, setScrollOffset] = useState(0);
+
+	// Callback to fire when offer is displayed in viewport
+	const { onOfferDisplayInViewport, leadUuid, rateTableUuid } =
+		useEventHandler();
+
+	// Track which offers have been viewed
+	const viewedOffers = useRef<Set<string>>(new Set());
+
+	// Track if initial visibility check has been done
+	const initialCheckDone = useRef(false);
+
+	// Reset tracking when offers change
+	useEffect(() => {
+		viewedOffers.current = new Set();
+		initialCheckDone.current = false;
+		setCardLayouts({});
+	}, [offers]);
+
+	// Handle card layout measurements
+	const handleCardLayout = useCallback(
+		(offerId: string, event: LayoutChangeEvent) => {
+			const { x, width } = event.nativeEvent.layout;
+
+			setCardLayouts((prev) => {
+				// Only update if measurements changed
+				if (
+					prev[offerId] &&
+					prev[offerId]?.x === x &&
+					prev[offerId]?.width === width
+				) {
+					return prev;
+				}
+				return { ...prev, [offerId]: { x, width } };
+			});
+		},
+		[]
+	);
+
+	// 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;
+			}
+
+			// 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,
+				});
+			}
+		});
+	}, [
+		cardLayouts,
+		leadUuid,
+		offers,
+		onOfferDisplayInViewport,
+		rateTableUuid,
+		scrollOffset,
+		scrollViewWidth,
+	]);
+
+	// Handle ScrollView layout
+	const handleScrollViewLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			const { width } = event.nativeEvent.layout;
+			setScrollViewWidth(width);
+
+			// Do an initial visibility check after layout
+			InteractionManager.runAfterInteractions(() => {
+				checkVisibleOffers();
+				initialCheckDone.current = true;
+			});
+		},
+		[checkVisibleOffers]
+	);
+
+	// Handle scroll events
+	const handleScroll = useCallback(
+		(event: NativeSyntheticEvent<NativeScrollEvent>) => {
+			const offsetX = event.nativeEvent.contentOffset.x;
+			setScrollOffset(offsetX);
+		},
+		[]
+	);
+
+	// Memoize offer components to prevent unnecessary re-renders
+	const offerComponents = useMemo(() => {
+		// Create offer components
+		return displayLayout === "fixed"
+			? [
+					// <VideosCard key="videos-card" videosContent={videosContent} showBorder={showBorder} />,
+					...Offer({
+						productTypeBuilder,
+						offers,
+						showProductTypeLabel,
+						fallbackTemplate,
+						showBorder,
+					}),
+				]
+			: Offer({
+					productTypeBuilder,
+					offers,
+					showProductTypeLabel,
+					fallbackTemplate,
+					showBorder,
+				});
+	}, [
+		displayLayout,
+		productTypeBuilder,
+		offers,
+		showProductTypeLabel,
+		fallbackTemplate,
+		showBorder,
+	]);
+
+	// Wrapped offer components with layout measurement
+	const wrappedOfferComponents = useMemo(() => {
+		return offerComponents.map((component, index) => {
+			// Skip non-offer items
+			if (index >= offers.length) return component;
+
+			const offer = offers[index];
+			if (!offer) return component;
+
+			return (
+				<View
+					key={`offer-wrapper-${index}-${offer.uuid}`}
+					onLayout={(e) => handleCardLayout(offer.uuid, e)}
+				>
+					{component}
+				</View>
+			);
+		});
+	}, [offerComponents, offers, handleCardLayout]);
+
+	// Check visibility whenever relevant values change
+	useEffect(() => {
+		if (!initialCheckDone.current || Object.keys(cardLayouts).length === 0)
+			return;
+
+		// Debounce the visibility check slightly for performance
+		const timeoutId = setTimeout(checkVisibleOffers, 100);
+		return () => clearTimeout(timeoutId);
+	}, [checkVisibleOffers, scrollOffset, scrollViewWidth, cardLayouts]);
+
+	return (
+		// <OffersCarousel title={title} displayLayout={displayLayout}>
+		<>
+			{title}
+			<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>
+		</>
+
+		// </OffersCarousel>
+	);
+};
+
+const styles = StyleSheet.create({
+	contentContainer: {
+		columnGap: 20,
+		paddingHorizontal: 16,
+	},
+});

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { HeadlineWithDescriptionCard } from "../../Layouts/HeadlineWithDescriptionCard";
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+
+export function FallbackOfferTemplate({
+	offer,
+	offerIndex,
+	showBorder = true,
+	showProductTypeLabel = true,
+}: {
+	offer: BaseOffer;
+	offerIndex: number;
+	showBorder?: boolean;
+	showProductTypeLabel?: boolean;
+}) {
+	return (
+		<HeadlineWithDescriptionCard
+			key={`${offerIndex}-${offer.uuid}`}
+			offer={offer}
+			offerIndex={offerIndex}
+			productTypeBuilder={{
+				productTypes: [],
+				layout: "headlineWithDescriptionCard",
+			}}
+			showBorder={showBorder}
+			showProductTypeLabel={showProductTypeLabel}
+		/>
+	);
+}

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

@@ -0,0 +1,100 @@
+import React, { Fragment } from "react";
+
+import { match } from "ts-pattern";
+
+import type { ProductTypeBuilder } from "../../../../builder";
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+import {
+	DefaultOfferCard,
+	CreditCardOfferCard,
+	HeadlineWithDescriptionCard,
+} from "../../Layouts";
+
+type RenderOfferListProps = {
+	productTypeBuilder: ProductTypeBuilder;
+	offers: BaseOffer[];
+	fallbackTemplate?: ({
+		offer,
+		offerIndex,
+		showProductTypeLabel,
+	}: {
+		offer: BaseOffer;
+		offerIndex: number;
+		showProductTypeLabel?: boolean;
+	}) => React.ReactNode;
+	showBorder?: boolean;
+	showProductTypeLabel?: boolean;
+	// featureClient?: CnfFeatureClient; TODO: this is the like split on cnf side it uses growthbook
+};
+
+export const Offer = ({
+	productTypeBuilder,
+	offers,
+	showProductTypeLabel = true,
+	fallbackTemplate,
+	showBorder = true,
+}: RenderOfferListProps) =>
+	offers.map((offer: BaseOffer, offerIndex: number) => {
+		const builder = productTypeBuilder.find(({ productTypes }) =>
+			productTypes.includes(offer.productType)
+		);
+
+		if (!builder && !fallbackTemplate) {
+			console.error(
+				`No builder or fallback template found for product type ${offer.productType},
+				 please add it to the productTypeBuilder or inform a fallback template`
+			);
+			return <></>;
+		}
+
+		return (
+			<Fragment key={`${offerIndex}-${offer.uuid}`}>
+				{match(builder)
+					.with({ layout: "defaultOfferCard" }, (layout) => (
+						<DefaultOfferCard
+							offerIndex={offerIndex}
+							key={`${offerIndex}-${offer.uuid}`}
+							offer={offer}
+							productTypeBuilder={layout}
+							showBorder={showBorder}
+							showProductTypeLabel={showProductTypeLabel}
+						/>
+					))
+					.with({ layout: "creditCardOfferCard" }, (layout) => (
+						<CreditCardOfferCard
+							offerIndex={offerIndex}
+							key={`${offerIndex}-${offer.uuid}`}
+							offer={offer}
+							productTypeBuilder={layout}
+							showBorder={showBorder}
+							showProductTypeLabel={showProductTypeLabel}
+						/>
+					))
+					.with({ layout: "headlineWithDescriptionCard" }, (layout) => (
+						<HeadlineWithDescriptionCard
+							offerIndex={offerIndex}
+							key={`${offerIndex}-${offer.uuid}`}
+							offer={offer}
+							productTypeBuilder={layout}
+							showBorder={showBorder}
+							showProductTypeLabel={showProductTypeLabel}
+						/>
+					))
+					.with(undefined, () => {
+						if (!fallbackTemplate) {
+							return <></>;
+						}
+						const FallbackTemplate = fallbackTemplate;
+						return (
+							<FallbackTemplate
+								offerIndex={offerIndex}
+								key={`${offerIndex}-${offer.uuid}`}
+								offer={offer}
+								showProductTypeLabel={showProductTypeLabel}
+							/>
+						);
+					})
+					.exhaustive()}
+			</Fragment>
+		);
+	});