@moneylion/react-native-offer-carousel 1.10.1 → 1.11.0

package/src/capabilities/offer-catalog/src/utils/stats/formatters/recommendedCredit.ts

@@ -1,5 +1,4 @@
 import { get } from "radash";
-import { P, match } from "ts-pattern";
 import type { StatElementProps } from "../types";
 import { formatStringListWithAnd } from "../../formatUtils";
 import type { BaseOffer } from "../../../types/offerCatalogSchema";
@@ -28,13 +27,17 @@ export const recommendedCredit =
 	({ label, fieldName }: RecommendedCreditStat): StatElementProps => {
 		const recommendedCreditValue = get<string[]>(offer, fieldName);
 
-		const content = match(recommendedCreditValue)
-			.with(P.array(), (value) =>
-				hasAllRecommendedRatings(value)
-					? "Any"
-					: formatStringListWithAnd(orderRecommendedRatings(value))
-			)
-			.otherwise(() => "See Terms");
+		let content = "See Terms";
+
+		if (Array.isArray(recommendedCreditValue)) {
+			if (hasAllRecommendedRatings(recommendedCreditValue)) {
+				content = "Any";
+			} else {
+				content = formatStringListWithAnd(
+					orderRecommendedRatings(recommendedCreditValue)
+				);
+			}
+		}
 
 		return {
 			label,

package/src/capabilities/offer-catalog/src/utils/stats/index.ts

@@ -1,5 +1,3 @@
-import { match } from "ts-pattern";
-
 import {
 	annualFee,
 	creditBureaus,
@@ -29,113 +27,46 @@ export const statsToElementPropsBuilder = (
 	offer: BaseOffer
 ): StatElementProps[] =>
 	stats
-		.map((stat) =>
-			match(stat)
-				.with(
-					{
-						format: "rangeCurrency",
-					},
-					fromRangeCurrencyStat(offer)
-				)
-				.with(
-					{
-						format: "rangeCurrencyUnabbreviated",
-					},
-					fromRangeCurrencyUnabbreviatedStat(offer)
-				)
-				.with(
-					{
-						format: "BureausStat",
-					},
-					creditBureaus(offer)
-				)
-				.with(
-					{
-						format: "rangePercent",
-					},
-					fromRangePercentStat(offer)
-				)
-				.with(
-					{
-						format: "rangeCurrencyOrBasis",
-					},
-					fromRangeCurrencyOrBasisStat(offer)
-				)
-				.with(
-					{
-						format: "common",
-					},
-					fromCommonStat(offer)
-				)
-				.with(
-					{
-						format: "rangeCurrencyByTime",
-					},
-					fromRangeCurrencyByTimeStat(offer)
-				)
-				.with(
-					{
-						format: "freeTrial",
-					},
-					fromFreeTrialStat(offer)
-				)
-				.with(
-					{
-						format: "monthlyOrAnnualCurrency",
-					},
-					fromMonthlyOrAnnualCurrencyStat(offer)
-				)
-				.with(
-					{
-						format: "boolean",
-					},
-					fromBooleanStat(offer)
-				)
-				.with({ format: "rangeMonths" }, fromRangeMonthsStat(offer))
-				.with(
-					{
-						format: "listStringWithAnd",
-					},
-					fromListStringWithAnd(offer)
-				)
-				.with(
-					{
-						format: "currency",
-					},
-					fromCurrencyStat(offer)
-				)
-				.with(
-					{
-						format: "percentage",
-					},
-					fromPercentageStat(offer)
-				)
-				.with(
-					{
-						format: "recommendedCredit",
-					},
-					recommendedCredit(offer)
-				)
-				.with(
-					{
-						format: "rewardsDisplay",
-					},
-					rewardsDisplay(offer)
-				)
-				.with(
-					{
-						format: "purchaseApr",
-					},
-					purchaseApr(offer)
-				)
-				.with(
-					{
-						format: "annualFee",
-					},
-					annualFee(offer)
-				)
-				.exhaustive()
-		)
+		.map((stat): StatElementProps => {
+			switch (stat.format) {
+				case "rangeCurrency":
+					return fromRangeCurrencyStat(offer)(stat);
+				case "rangeCurrencyUnabbreviated":
+					return fromRangeCurrencyUnabbreviatedStat(offer)(stat);
+				case "BureausStat":
+					return creditBureaus(offer)(stat);
+				case "rangePercent":
+					return fromRangePercentStat(offer)(stat);
+				case "rangeCurrencyOrBasis":
+					return fromRangeCurrencyOrBasisStat(offer)(stat);
+				case "common":
+					return fromCommonStat(offer)(stat);
+				case "rangeCurrencyByTime":
+					return fromRangeCurrencyByTimeStat(offer)(stat);
+				case "freeTrial":
+					return fromFreeTrialStat(offer)(stat);
+				case "monthlyOrAnnualCurrency":
+					return fromMonthlyOrAnnualCurrencyStat(offer)(stat);
+				case "boolean":
+					return fromBooleanStat(offer)(stat);
+				case "rangeMonths":
+					return fromRangeMonthsStat(offer)(stat);
+				case "listStringWithAnd":
+					return fromListStringWithAnd(offer)(stat);
+				case "currency":
+					return fromCurrencyStat(offer)(stat);
+				case "percentage":
+					return fromPercentageStat(offer)(stat);
+				case "recommendedCredit":
+					return recommendedCredit(offer)(stat);
+				case "rewardsDisplay":
+					return rewardsDisplay(offer)(stat);
+				case "purchaseApr":
+					return purchaseApr(offer)(stat);
+				case "annualFee":
+					return annualFee(offer)(stat);
+			}
+		})
 		.filter((stat) => stat !== null);
 
 export type { Stat, StatElementProps } from "./types";

package/src/capabilities/offers/pipeline/src/sources/ratetables/withDeviceSignals.ts

@@ -1,4 +1,3 @@
-import defu from "defu";
 import { get, mapValues } from "radash";
 import { createDerivedBrands } from "../../../../../configuration/src/brands/createDerivedBrands";
 import type { CnfContext } from "../../../../../core/src/system/cnfContext/CnfContext";
@@ -63,21 +62,31 @@ export function withDeviceSignals<
 		cnfEnvironment,
 	};
 
-	return defu(payload, {
-		/**
-		 * The leads API required device ID's be in the UUID format. If the string
-		 * we receive here is not in the expected format, we will create an error
-		 * passing it to the API.
-		 */
+	// all clientTag values must be arrays of strings
+	const toStringArray = (value: unknown): string[] =>
+		Array.isArray(value) ? value.map(String) : [String(value)];
+
+	const defaultClientTags = mapValues(clientTags, toStringArray);
+	const payloadClientTags = mapValues(
+		(payload.clientTags ?? {}) as Record<string, unknown>,
+		toStringArray
+	);
+
+	const mergedClientTags: Record<string, string[]> = { ...defaultClientTags };
+	for (const [key, value] of Object.entries(payloadClientTags)) {
+		const existing = mergedClientTags[key];
+		mergedClientTags[key] = existing ? [...value, ...existing] : value;
+	}
+
+	/**
+	 * The leads API requires device IDs be in the UUID format. If the string
+	 * we receive here is not in the expected format, we omit it so the API can
+	 * reject the request explicitly.
+	 */
+	return {
 		deviceId: isUUIDv4(maybeDeviceId) ? maybeDeviceId : undefined,
-		sessionInformation: {
-			ipAddress,
-			userAgent,
-		},
-		clientTags: mapValues(
-			clientTags,
-			// all values must be arrays of strings
-			(value) => (Array.isArray(value) ? value.map(String) : [String(value)])
-		),
-	});
+		sessionInformation: { ipAddress, userAgent },
+		...payload,
+		clientTags: mergedClientTags,
+	};
 }

package/src/capabilities/ui/elements/src/components/MarkdownText/components.tsx

@@ -1,18 +1,21 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { Linking, StyleSheet } from "react-native";
 import { Abbreviation } from "./Abbreviation";
-import {
-	openUrl,
-	type ASTNode,
-	type RenderRules,
-} from "react-native-markdown-display";
+import { lexer } from "marked";
 import Text, {
+	type TextProps,
 	type TextWeight,
 	type Variant,
 } from "../../../../../../components/Text";
 import type { ThemeColors } from "../../../../../../context/ThemeProvider";
 
-const BoldText = ({ children }: { children: React.ReactNode }) => {
+const BoldText = ({
+	children,
+	testID,
+}: {
+	children: React.ReactNode;
+	testID: TextProps["testID"];
+}) => {
 	const processChildren = (_children: React.ReactNode) => {
 		return React.Children.map(_children, (child) => {
 			if (typeof child === "string") {
@@ -20,7 +23,6 @@ const BoldText = ({ children }: { children: React.ReactNode }) => {
 			}
 
 			if (React.isValidElement(child) && child.type === Text) {
-				// Use a properly typed props object
 				const newProps = {
 					weight: "bold" as TextWeight,
 					style: child.props.style,
@@ -30,140 +32,164 @@ const BoldText = ({ children }: { children: React.ReactNode }) => {
 			return child;
 		});
 	};
-	return <>{processChildren(children)}</>;
+	return <Text testID={testID}>{processChildren(children)}</Text>;
 };
 
-// Helper to create text variants
-const createTextVariant =
-	(props: any) => (_node: ASTNode, children: React.ReactNode) => {
-		return <Text {...props}>{children}</Text>;
-	};
-
-export const createMarkdownComponents = ({
-	numberOfLines,
-	variant,
-	weight,
-	color,
-}: {
+export type RenderProps = {
 	numberOfLines?: number;
 	variant?: Variant;
 	weight?: TextWeight;
 	color?: keyof ThemeColors;
-}): RenderRules => {
-	// Keep track of the first list item
-	let isFirstListItem = true;
-
-	return {
-		// Headings
-		heading1: createTextVariant({ variant: "title-1" }),
-		heading2: createTextVariant({ variant: "title-2" }),
-		heading3: createTextVariant({ variant: "title-3" }),
-		heading4: createTextVariant({ variant: "title-4" }),
-		heading5: createTextVariant({ variant: "title-5" }),
-
-		// Lists
-		bullet_list: (node: ASTNode, children: React.ReactNode) => {
-			// Reset the flag when a new list starts
-			isFirstListItem = true;
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant}
-					weight={weight}
-					color={color}
-					numberOfLines={numberOfLines}
-					style={styles.bulletList}
-				>
-					{children}
-				</Text>
-			);
-		},
-
-		// Links - Add detection for abbreviations in the text content
-		link: (node: ASTNode, children: React.ReactNode) => {
-			// Check if this link has a title attribute - if so, treat it as an abbreviation
-			if (node.attributes && node.attributes.title) {
+};
+
+// infer the type based on our entry point for rendering tokens
+type AssumedTokenType = ReturnType<typeof lexer>[number];
+
+/**
+ * Parses `content` and renders the marked token tree to React Native
+ * components.
+ *
+ * Recursively renders a marked token tree to React Native components. Other
+ * methods from marked are not suitable, as we need to build a component node
+ * and thread all the children into the parent element.
+ */
+export function renderMarkdown(
+	content: string,
+	{ numberOfLines, ...props }: RenderProps
+): React.ReactNode {
+	const tokens = lexer(content, { gfm: false });
+	let nodeIdx = 0;
+
+	function renderTokens(
+		tokenList: AssumedTokenType[] | undefined
+	): React.ReactNode {
+		if (!tokenList || tokenList.length === 0) {
+			return null;
+		}
+		return tokenList.map((token) => renderToken(token));
+	}
+
+	function renderToken(token: AssumedTokenType): React.ReactNode {
+		const id = nodeIdx++;
+		const key = `${token.type}-${id}`;
+
+		// general reference to child tokens for DRY-ness
+		const childTokens =
+			"tokens" in token && token.tokens ? token.tokens : undefined;
+
+		switch (token.type) {
+			case "heading": {
+				const variant = `title-${token.depth}` as Variant;
+
 				return (
-					<Abbreviation
-						key={node.key || `${node.type}-${node.index}`}
-						title={node.attributes.title}
+					<Text
+						key={key}
+						variant={variant}
+						testID={`heading${token.depth}-${id}`}
 					>
-						{children}
-					</Abbreviation>
+						{renderTokens(childTokens)}
+					</Text>
 				);
 			}
 
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant}
-					weight={weight}
-					color={color}
-					style={styles.linkText}
-					onPress={() => openUrl(node.attributes.href || "")}
-				>
-					{children}
-				</Text>
-			);
-		},
-
-		// Custom parser for text to find potential abbreviation patterns
-		text: (node: ASTNode) => {
-			// If this implementation doesn't catch abbreviations, we'll need to
-			// pre-process the markdown before passing it to the renderer
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant}
-					weight={weight}
-					color={color}
-				>
-					{node.content}
-				</Text>
-			);
-		},
-
-		// List items
-		list_item: (node: ASTNode, children: React.ReactNode) => {
-			// Only add \n if this is not the first item
-			const prefix = isFirstListItem ? "" : "\n";
-			// Set flag to false after the first item
-			isFirstListItem = false;
-
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant || "body-3"}
-					weight={weight}
-					color={color}
-				>
-					<Text variant={"body-1"}>{prefix}• </Text>
-					{children}
-				</Text>
-			);
-		},
-
-		// Paragraphs
-		paragraph: (node: ASTNode, children: React.ReactNode) => {
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant}
-					weight={weight}
-					color={color}
-				>
-					{children}
-				</Text>
-			);
-		},
-
-		strong: (node, children) => (
-			<BoldText key={node.key || `${node.type}-${node.index}`}>
-				{children}
-			</BoldText>
-		),
-	};
-};
+			case "paragraph":
+				return (
+					<Text key={key} {...props} testID={`paragraph-${id}`}>
+						{renderTokens(childTokens)}
+					</Text>
+				);
+
+			case "list": {
+				// attempt to assert child items as an array, since it is typed as any
+				const tokenItems: AssumedTokenType[] =
+					token.items && Array.isArray(token.items) ? token.items : [];
+
+				const renderedItems = tokenItems.map((item, i) => {
+					const itemId = nodeIdx++;
+					const prefix = i === 0 ? "" : "\n";
+
+					return (
+						<Text
+							key={`list_item-${itemId}`}
+							{...props}
+							variant={props.variant || "body-3"}
+							testID={`list_item-${itemId}`}
+						>
+							<Text variant="body-1">{prefix}• </Text>
+							{"tokens" in item ? renderTokens(item.tokens) : null}
+						</Text>
+					);
+				});
+
+				return (
+					<Text
+						key={key}
+						{...props}
+						numberOfLines={numberOfLines}
+						style={styles.bulletList}
+						testID={`bullet_list-${id}`}
+					>
+						{renderedItems}
+					</Text>
+				);
+			}
+
+			case "strong":
+				return (
+					<BoldText key={key} testID={`strong-${id}`}>
+						{renderTokens(childTokens)}
+					</BoldText>
+				);
+
+			case "text": {
+				const inlineChildren = renderTokens(childTokens);
+				if (inlineChildren) {
+					return <React.Fragment key={key}>{inlineChildren}</React.Fragment>;
+				}
+
+				return (
+					<Text key={key} {...props}>
+						{token.text}
+					</Text>
+				);
+			}
+
+			case "escape":
+				return (
+					<Text key={key} {...props}>
+						{token.text}
+					</Text>
+				);
+
+			case "link": {
+				if (token.title) {
+					return (
+						<Abbreviation key={key} title={token.title}>
+							{renderTokens(childTokens)}
+						</Abbreviation>
+					);
+				}
+
+				return (
+					<Text
+						key={key}
+						{...props}
+						style={styles.linkText}
+						onPress={() => Linking.openURL(token.href)}
+						testID={`link-${id}`}
+					>
+						{renderTokens(childTokens)}
+					</Text>
+				);
+			}
+
+			default:
+				return null;
+		}
+	}
+
+	return renderTokens(tokens);
+}
 
 const styles = StyleSheet.create({
 	bulletList: {
@@ -171,17 +197,6 @@ const styles = StyleSheet.create({
 		flexDirection: "column",
 		alignItems: "flex-start",
 	},
-	bulletPoint: {
-		width: 6,
-		height: 6,
-		borderRadius: 3,
-		backgroundColor: "black",
-		marginTop: 8,
-		marginRight: 8,
-	},
-	listItemText: {
-		marginBottom: 4,
-	},
 	linkText: {
 		textDecorationLine: "underline",
 	},

package/src/capabilities/ui/elements/src/components/MarkdownText/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { createMarkdownComponents } from "./components";
+import { View } from "react-native";
+import { renderMarkdown } from "./components";
 import { preprocessMarkdown } from "./markdownPreprocessor";
-import Markdown from "react-native-markdown-display";
 import type { TextProps } from "../../../../../../components/Text";
 
 export interface Props extends TextProps {
@@ -15,38 +15,16 @@ export const MarkdownText = ({
 	weight,
 	variant,
 }: Props) => {
-	// Create style object for text properties
-	const textStyle = {
-		color: color,
-	};
+	const preparedContent = preprocessMarkdown(content);
 
-	// Prepare styles for markdown
-	const markdownStyles = {
-		body: {
-			...textStyle,
-			flexShrink: 1,
-		},
-		paragraph: {
-			flexShrink: 1,
-		},
-		// Include styles for all markdown elements that need to respect text properties
-		text: {
-			...textStyle,
-		},
-	};
-
-	// Use the factory function to create components with numberOfLines support
-	const customRules = createMarkdownComponents({
-		numberOfLines,
-		variant,
-		weight,
-		color,
-	});
-	// Preprocess the markdown to handle abbreviations
-	const processedContent = preprocessMarkdown(content);
 	return (
-		<Markdown rules={customRules} style={markdownStyles}>
-			{processedContent}
-		</Markdown>
+		<View style={{ flexShrink: 1 }}>
+			{renderMarkdown(preparedContent, {
+				numberOfLines,
+				color,
+				weight,
+				variant,
+			})}
+		</View>
 	);
 };