@moneylion/react-native-offer-carousel 1.0.0

package/src/components/DynamicOffers/Render/index.ts

@@ -0,0 +1,2 @@
+export { DynamicOffersRender } from "./DynamicOffersRender";
+export { FallbackOfferTemplate } from "./FallbackOfferTemplate";

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

@@ -0,0 +1,96 @@
+import { get } from "radash";
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+
+import React from "react";
+
+import type { CreditCardOfferCard as CreditCardOfferCardBuilderProps } from "../../../../builder";
+import { makeCreditCardOfferStats } from "./statsBuilder";
+import { BaseOfferCard, SeeMore } from "../../Common";
+import Divider from "../../Divider";
+import Text from "../../Text";
+import { CallToAction } from "../../Common/DynamicOfferCard/CallToAction";
+import { StyleSheet } from "react-native";
+
+type CreditCardOfferCardProps = {
+	productTypeBuilder: CreditCardOfferCardBuilderProps;
+	offer: BaseOffer;
+	showBorder: boolean;
+	showProductTypeLabel?: boolean;
+	offerIndex: number;
+};
+
+export const CreditCardOfferCard = ({
+	offer,
+	productTypeBuilder,
+	// showBorder, TODO: this is unused in the cnf-app as well
+	showProductTypeLabel,
+	offerIndex,
+}: CreditCardOfferCardProps) => {
+	const { stats } = makeCreditCardOfferStats(productTypeBuilder)(offer);
+	const descriptionPoints = get(offer, "descriptionPoints", []);
+	const legalLanguage = get(offer, "legalLanguage", "");
+	const showMoreInfo = descriptionPoints.length > 0 || !!legalLanguage;
+	const badges = get(offer, "badges", []);
+	const showBadge = badges.length > 0;
+
+	return (
+		<BaseOfferCard showBorder={showBadge}>
+			{showProductTypeLabel && (
+				<BaseOfferCard.TopBar>
+					<BaseOfferCard.ProductType>
+						{offer.productDisplayName}
+					</BaseOfferCard.ProductType>
+				</BaseOfferCard.TopBar>
+			)}
+			<BaseOfferCard.Container>
+				<BaseOfferCard.CreditCardContainer>
+					{showBadge && <BaseOfferCard.Tip>{badges[0]}</BaseOfferCard.Tip>}
+					<BaseOfferCard.CreditCardImage
+						src={offer.financialInstitutionImageUrl}
+						// imageAttributes={{ title: offer.financialInstitutionDisplayName }}
+						alt={offer.financialInstitutionDisplayName}
+					/>
+					<Text variant="body-2" color="neutral" weight="bold">
+						{offer.financialInstitutionDisplayName}
+					</Text>
+
+					<BaseOfferCard.Content>
+						<Divider />
+						<BaseOfferCard.Stats>
+							{stats.map((stat) => (
+								<BaseOfferCard.Stat
+									key={stat.label}
+									label={stat.label}
+									content={stat.content}
+									isHighlighted={stat.isHighlighted}
+									isNull={stat.isNull}
+								/>
+							))}
+							{showMoreInfo && (
+								<SeeMore offer={offer} offerIndex={offerIndex} />
+							)}
+						</BaseOfferCard.Stats>
+					</BaseOfferCard.Content>
+				</BaseOfferCard.CreditCardContainer>
+
+				<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 */}
+					{/* <BaseOfferCard.ChosenBy>300</BaseOfferCard.ChosenBy> */}
+				</BaseOfferCard.BottomBar>
+			</BaseOfferCard.Container>
+		</BaseOfferCard>
+	);
+};
+
+const styles = StyleSheet.create({
+	cta: { marginTop: 20 },
+});

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

@@ -0,0 +1,10 @@
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+import type { CreditCardOfferCard } from "../../../../builder";
+import { statsToElementPropsBuilder } from "../../../../capabilities/offer-catalog/src/utils/stats";
+
+export const makeCreditCardOfferStats =
+	(productTypeBuilder: CreditCardOfferCard) => (offer: BaseOffer) => {
+		const stats = statsToElementPropsBuilder(productTypeBuilder.stats, offer);
+
+		return { stats };
+	};

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

@@ -0,0 +1,72 @@
+import { get } from "radash";
+
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+import React from "react";
+
+import { makeDefaultOfferCardStats } from "./statsBuilder";
+import type { DefaultOfferCard as DefaultOfferCardBuilderProps } from "../../../../builder";
+import { BaseOfferCard, DynamicOfferCard, SeeMore } from "../../Common";
+
+type DefaultOfferCardProps = {
+	productTypeBuilder: DefaultOfferCardBuilderProps;
+	offer: BaseOffer;
+	offerIndex: number;
+	showBorder: boolean;
+	showProductTypeLabel?: boolean;
+};
+
+export const DefaultOfferCard = ({
+	offer,
+	productTypeBuilder,
+	offerIndex,
+	showBorder,
+	showProductTypeLabel,
+}: DefaultOfferCardProps) => {
+	const { stats, topStats } =
+		makeDefaultOfferCardStats(productTypeBuilder)(offer);
+	const descriptionPoints = get(offer, "descriptionPoints", []);
+	const description = get(offer, "description", "");
+	const legalInformation = get(offer, "legalInformation", "");
+	const legalLanguage = get(offer, "legalLanguage", "");
+	const showMoreInfo = descriptionPoints.length > 0 || !!legalLanguage;
+
+	const contentDescription = description || legalInformation;
+
+	return (
+		<DynamicOfferCard
+			key={`${offerIndex}-${offer.uuid}`}
+			offer={offer}
+			offerIndex={offerIndex}
+			showBorder={showBorder}
+			showProductTypeLabel={showProductTypeLabel}
+		>
+			<BaseOfferCard.TopContainer>
+				{topStats.map((stat) => (
+					<BaseOfferCard.Stat
+						key={`${offerIndex}-${stat.label}`}
+						label={stat.label}
+						content={stat.content}
+						isVertical
+					/>
+				))}
+			</BaseOfferCard.TopContainer>
+
+			<BaseOfferCard.Stats>
+				{stats.map((stat) => (
+					<BaseOfferCard.Stat
+						key={`${offerIndex}-${stat.label}`}
+						label={stat.label}
+						content={stat.content}
+					/>
+				))}
+
+				<BaseOfferCard.DescriptionHandler
+					descriptionPoints={descriptionPoints}
+					contentDescription={contentDescription}
+				/>
+
+				{showMoreInfo && <SeeMore offer={offer} offerIndex={offerIndex} />}
+			</BaseOfferCard.Stats>
+		</DynamicOfferCard>
+	);
+};

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

@@ -0,0 +1,14 @@
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+import type { DefaultOfferCard } from "../../../../builder";
+import { statsToElementPropsBuilder } from "../../../../capabilities/offer-catalog/src/utils/stats";
+
+export const makeDefaultOfferCardStats =
+	(productTypeBuilder: DefaultOfferCard) => (offer: BaseOffer) => {
+		const stats = statsToElementPropsBuilder(productTypeBuilder.stats, offer);
+		const topStats = statsToElementPropsBuilder(
+			productTypeBuilder.topStats,
+			offer
+		);
+
+		return { stats, topStats };
+	};

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

@@ -0,0 +1,59 @@
+import { get } from "radash";
+
+import React from "react";
+import { SeeMore } from "../../Common/DynamicOfferCard/SeeMore";
+import type { BaseOffer } from "../../../../capabilities/offer-catalog/src";
+import type { HeadlineWithDescriptionCard as HeadlineWithDescriptionCardBuilderProps } from "../../../../builder";
+import { BaseOfferCard, DynamicOfferCard } from "../../Common";
+
+type HeadlineWithDescriptionCardProps = {
+	productTypeBuilder: HeadlineWithDescriptionCardBuilderProps;
+	offer: BaseOffer;
+	offerIndex: number;
+	showBorder: boolean;
+	showProductTypeLabel?: boolean;
+};
+export const HeadlineWithDescriptionCard = ({
+	offer,
+	productTypeBuilder,
+	offerIndex,
+	showBorder,
+	showProductTypeLabel,
+}: HeadlineWithDescriptionCardProps) => {
+	const {
+		headlineField = "headline",
+		descriptionField = "description",
+		descriptionPointsField = "descriptionPoints",
+	} = productTypeBuilder;
+
+	const headline = get<string>(offer, headlineField, "");
+	const description = get<string>(offer, descriptionField, "");
+	const descriptionPoints = get<string[]>(offer, descriptionPointsField, []);
+	const legalInformation = get(offer, "legalInformation", "");
+	const legalLanguage = get(offer, "legalLanguage", "");
+	const showMoreInfo = descriptionPoints.length > 0 || !!legalLanguage;
+
+	const contentDescription = description || legalInformation;
+
+	return (
+		<DynamicOfferCard
+			key={`${offerIndex}-${offer.uuid}`}
+			offer={offer}
+			offerIndex={offerIndex}
+			showBorder={showBorder}
+			showProductTypeLabel={showProductTypeLabel}
+		>
+			<BaseOfferCard.TopContainer>
+				<BaseOfferCard.Headline>{headline}</BaseOfferCard.Headline>
+			</BaseOfferCard.TopContainer>
+
+			<BaseOfferCard.DescriptionHandler
+				descriptionPoints={descriptionPoints}
+				contentDescription={contentDescription}
+				hasDivider={false}
+			/>
+
+			{showMoreInfo && <SeeMore offer={offer} offerIndex={offerIndex} />}
+		</DynamicOfferCard>
+	);
+};

package/src/components/Layouts/index.ts

@@ -0,0 +1,3 @@
+export { DefaultOfferCard } from "./DefaultOfferCard";
+export { HeadlineWithDescriptionCard } from "./HeadlineWithDescriptionCard";
+export { CreditCardOfferCard } from "./CreditCardOfferCard";

package/src/components/Modal/DescriptionPoints.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { arrayToMarkdownList } from "../../../capabilities/offer-catalog/src/utils/arrayToMarkdownList";
+import View from "../View";
+import Text from "../Text";
+import { MarkdownText } from "../../../capabilities/ui/elements/src/components/MarkdownText";
+
+export function DescriptionPoints({
+	descriptionPoints,
+}: {
+	descriptionPoints: string[];
+}) {
+	return (
+		<View gap={8}>
+			<Text variant={"body-3"} weight={"bold"} color={"neutral"}>
+				Offer Details
+			</Text>
+			<MarkdownText
+				variant={"body-3"}
+				color={"neutral"}
+				content={arrayToMarkdownList(descriptionPoints)}
+			/>
+		</View>
+	);
+}

package/src/components/Modal/Disclaimer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { MarkdownText } from "../../../capabilities/ui/elements/src/components/MarkdownText";
+import Text from "../Text";
+import View from "../View";
+
+export function Disclaimer({ disclaimer }: { disclaimer: string }) {
+	return (
+		<View gap={16}>
+			<Text variant={"body-3"} weight={"bold"} color={"neutral"}>
+				Provider Disclaimer
+			</Text>
+			<MarkdownText variant={"body-3"} color={"neutral"} content={disclaimer} />
+		</View>
+	);
+}

package/src/components/Modal/OfferDetailsModal.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+	Modal,
+	View,
+	SafeAreaView,
+	ScrollView,
+	TouchableOpacity,
+	StyleSheet,
+} from "react-native";
+import Text from "../Text";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
+import { DescriptionPoints } from "./DescriptionPoints";
+import { Disclaimer } from "./Disclaimer";
+import { CallToAction } from "../Common/DynamicOfferCard/CallToAction";
+import Divider from "../Divider";
+
+type OfferDetailsModalProps = {
+	visible: boolean;
+	offer: BaseOffer;
+	offerIndex: number;
+	onClose: () => void;
+};
+
+const CTA_LABEL = "Continue";
+
+export const OfferDetailsModal = ({
+	visible,
+	offer,
+	onClose,
+	offerIndex,
+}: OfferDetailsModalProps) => {
+	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>
+				</View>
+
+				<ScrollView
+					style={styles.modalContent}
+					contentContainerStyle={styles.scrollContent}
+				>
+					{offer?.descriptionPoints?.length && (
+						<DescriptionPoints descriptionPoints={offer?.descriptionPoints} />
+					)}
+					{offer?.descriptionPoints && offer?.legalLanguage && <Divider />}
+					{offer?.legalLanguage && (
+						<Disclaimer disclaimer={offer.legalLanguage} />
+					)}
+				</ScrollView>
+				<CallToAction
+					offerIndex={offerIndex}
+					offer={offer}
+					overrideUrl={offer.overrideUrl}
+					style={styles.cta}
+					context="offer_details"
+				>
+					{CTA_LABEL}
+				</CallToAction>
+			</SafeAreaView>
+		</Modal>
+	);
+};
+
+const styles = StyleSheet.create({
+	modalContainer: {
+		flex: 1,
+		backgroundColor: "#ffffff",
+	},
+	modalHeader: {
+		flexDirection: "row",
+		paddingTop: 16,
+		paddingHorizontal: 16,
+		paddingBottom: 32,
+		borderBottomWidth: 1,
+		borderBottomColor: "#e0e0e0",
+		position: "relative",
+	},
+	closeXButton: {
+		position: "absolute",
+		left: 16,
+		top: 16,
+		zIndex: 10,
+	},
+	closeXText: {
+		fontSize: 20,
+		color: "#000000",
+	},
+	modalContent: {
+		flex: 1,
+	},
+	scrollContent: {
+		padding: 16,
+		paddingBottom: 64,
+	},
+	cta: {
+		marginHorizontal: 16,
+		marginBottom: 16,
+	},
+});

package/src/components/MoneyLionOfferCarousel.tsx

@@ -0,0 +1,202 @@
+import React, { useEffect, useState } from "react";
+import { localCnfContext } from "../../config/mocks/cnfContext";
+import { Text } from "react-native";
+import type { CnfContext } from "../../capabilities/core/src/system/cnfContext/CnfContext";
+import { getPageData } from "../pageData";
+import type { Layout } from "../utils";
+import {
+	DynamicOffersContainer,
+	DynamicOfferSkeleton,
+} from "./DynamicOffers/DynamicOffersContainer";
+import type { DynamicOfferProps } from "./DynamicOffers/DynamicOffers";
+import { ThemeProvider, type FontFamily } from "../context/ThemeProvider";
+import {
+	EventHandlerProvider,
+	type EventHandlerContextType,
+} from "../context/EventHandlerProvider";
+import { getConfigApiBaseUrl } from "../apiEnvironment";
+import { getDefaultPaletteColor } from "../utils/getDefaultPaletteColor";
+
+export type MoneyLionOfferCarouselProps = {
+	channel: string;
+	zone: string;
+	subAccountToken: string;
+	searchAPIToken: string;
+	productType?: string;
+	query?: string;
+	tags?: string;
+	displayLayout?: Layout;
+	staticProductTypes?: string;
+	fontFamily?: Partial<FontFamily>;
+	showProductTypeLabel?: boolean;
+	isDev: boolean;
+};
+
+const getConfiguration = async ({
+	channel,
+	zone,
+	subAccountToken,
+	isDev,
+}: Pick<
+	MoneyLionOfferCarouselProps,
+	"channel" | "zone" | "subAccountToken" | "isDev"
+>) => {
+	const url = `${getConfigApiBaseUrl(isDev)}/network/${channel}/${zone}/api/configuration`;
+
+	const headers = {
+		Authorization: `Bearer ${subAccountToken}`,
+	};
+	try {
+		const response = await fetch(url, { headers });
+		if (!response.ok) {
+			throw new Error();
+		}
+		const data = await response.json();
+
+		return data;
+	} catch (error) {
+		console.error("Error fetching configuration", error);
+		return localCnfContext;
+	}
+};
+
+export const MoneyLionOfferCarousel = (
+	props: MoneyLionOfferCarouselProps &
+		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
+) => {
+	const { channel, zone, subAccountToken, fontFamily, isDev } = props;
+
+	const {
+		onInitialize,
+		onRateTableSubmit,
+		onRateTableResponse,
+		onOfferDisplayInViewport,
+		onOfferClick,
+		onOfferDetailsPageOpen,
+		onOfferDetailsPageClose,
+	} = props;
+
+	const eventHandlers = {
+		onInitialize,
+		onRateTableSubmit,
+		onRateTableResponse,
+		onOfferDisplayInViewport,
+		onOfferClick,
+		onOfferDetailsPageOpen,
+		onOfferDetailsPageClose,
+	};
+
+	const [context, setContext] = useState<CnfContext | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<Error | null>(null);
+	const [pageData, setPageData] = useState<any>(null);
+
+	useEffect(() => {
+		const fetchConfiguration = async () => {
+			try {
+				setIsLoading(true);
+				const data = await getConfiguration({
+					channel,
+					zone,
+					subAccountToken,
+					isDev,
+				});
+				setContext({ ...(data.serializableContext as CnfContext), isDev });
+			} catch (err) {
+				setError(
+					err instanceof Error
+						? err
+						: new Error("Failed to fetch configuration")
+				);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchConfiguration();
+	}, [channel, zone, subAccountToken, isDev]);
+
+	useEffect(() => {
+		if (isLoading) {
+			onInitialize?.({ timestamp: new Date().toISOString() });
+		}
+	}, [isLoading, onInitialize]);
+
+	useEffect(() => {
+		const fetchPageData = async () => {
+			if (context) {
+				const data = await getPageData({
+					context,
+					params: props,
+					onRateTableSubmit,
+				});
+				onRateTableResponse?.({
+					timestamp: new Date().toISOString(),
+					isError: Boolean(data.isError),
+					offers: data.offers,
+					rateTableUuid: data.rateTableUuid,
+					leadUuid: data.leadUuid,
+				});
+				setPageData(data);
+			}
+		};
+
+		fetchPageData();
+	}, [context, onRateTableResponse, onRateTableSubmit, props]);
+
+	if (isLoading) {
+		return <DynamicOfferSkeleton displayLayout={"fixed"} />;
+	}
+
+	if (error) {
+		return <Text>{`Error: ${error.message}`}</Text>; // Replace with your error component
+	}
+
+	if (!context) {
+		return <Text>{"Context is null"}</Text>; // Replace with your error component
+	}
+
+	if (!pageData) {
+		return <DynamicOfferSkeleton displayLayout={"fixed"} />;
+	}
+
+	const {
+		shouldHideFooter,
+		displayLayout,
+		showProductTypeLabel,
+		showBorder,
+		title,
+		offers,
+		rateTableUuid,
+		leadUuid,
+	} = pageData;
+
+	const config: DynamicOfferProps = {
+		offers,
+		shouldHideFooter,
+		displayLayout,
+		showProductTypeLabel,
+		showBorder,
+		title,
+	};
+
+	const palette = {
+		...context.brand.palette,
+		positive:
+			context.brand.palette?.positive ?? getDefaultPaletteColor("positive"),
+	};
+
+	return (
+		<ThemeProvider palette={palette} fontFamily={fontFamily}>
+			<EventHandlerProvider
+				eventHandlers={{
+					...eventHandlers,
+					rateTableUuid,
+					leadUuid,
+				}}
+			>
+				<DynamicOffersContainer config={config} />
+			</EventHandlerProvider>
+		</ThemeProvider>
+	);
+};

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet, Animated } from "react-native";
+
+type BorderRadius = "small" | "medium" | "large" | "circular";
+
+interface SkeletonProps {
+	width?: number | string;
+	height?: number | string;
+	borderRadius?: BorderRadius;
+	style?: any;
+	backgroundColor?: string;
+}
+
+const Skeleton = (props: SkeletonProps) => {
+	const {
+		width = "100%",
+		height = 20,
+		borderRadius = "small",
+		style = {},
+		backgroundColor = "#E1E9EE",
+	} = props;
+
+	const opacityValue = useRef(new Animated.Value(1)).current;
+
+	const getBorderRadius = (): number => {
+		switch (borderRadius) {
+			case "small":
+				return 4;
+			case "medium":
+				return 8;
+			case "large":
+				return 16;
+			case "circular":
+				return 9999;
+			default:
+				return 4;
+		}
+	};
+
+	useEffect(() => {
+		const animation = Animated.loop(
+			Animated.sequence([
+				Animated.timing(opacityValue, {
+					toValue: 0.6,
+					duration: 1200,
+					useNativeDriver: true,
+				}),
+				Animated.timing(opacityValue, {
+					toValue: 1,
+					duration: 1200,
+					useNativeDriver: true,
+				}),
+			])
+		);
+
+		animation.start();
+
+		return () => {
+			animation.stop();
+		};
+	}, [opacityValue]);
+
+	return (
+		<Animated.View
+			style={[
+				styles.skeleton,
+				{
+					width,
+					height,
+					borderRadius: getBorderRadius(),
+					backgroundColor,
+					opacity: opacityValue,
+				},
+				style,
+			]}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	skeleton: {
+		minHeight: 20,
+	},
+});
+
+export default Skeleton;