@moneylion/react-native-offer-carousel 1.0.0 → 1.0.1

package/src/capabilities/offers/pipeline/src/sources/ratetables/types/index.ts

@@ -0,0 +1,5 @@
+import type { Simplify } from "type-fest";
+import type { components } from "./PublicApi.js";
+
+export type LeadCreateData = Simplify<components["schemas"]["LeadCreateData"]>;
+export type State = Simplify<components["schemas"]["State"]>;

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

@@ -0,0 +1,83 @@
+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";
+
+import type { LeadCreateData } from "./types";
+import type { LeadRequestOfferCatalog } from "./offer-catalog/types";
+import type { Brand } from "../../../../../../../builder";
+
+const UUID_V4_REGEX =
+	/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+/**
+ * Checks if a value is a string that matches the UUIDv4 format
+ *
+ * @param x some unknown value
+ * @returns true iff x is a string that matches the UUIDv4 format
+ */
+export const isUUIDv4 = (x: unknown) =>
+	typeof x === "string" && UUID_V4_REGEX.test(x);
+
+const removePrefixFromAppName = (appName: string) => {
+	if (appName.startsWith("@")) {
+		return appName.substring(1);
+	}
+	return appName;
+};
+
+const getBrand = (context: CnfContext): Brand => {
+	try {
+		return context.brand as Brand;
+	} catch (e) {
+		console.log(e);
+	}
+	throw new Error("Brand not found");
+};
+
+export function withDeviceSignals<
+	TData extends LeadCreateData | LeadRequestOfferCatalog,
+>(context: CnfContext, payload: TData) {
+	const maybeDeviceId = get(context, "signals.deviceSignals.id", undefined);
+	const ipAddress = get(context, "signals.deviceSignals.ipAddress", undefined);
+	const os = get(context, "signals.deviceSignals.os", "");
+	const isMobile = get(context, "signals.deviceSignals.isMobile", false);
+	const evReferrer = get(context, "request.referer", "");
+	const cnfEnvironment = get(process, "env.ENVIRONMENT", "local");
+	const [licensedBrand] = createDerivedBrands(getBrand(context));
+	const consumerBrand = get(licensedBrand, "domain", undefined);
+	const userAgent = get(context, "signals.deviceSignals.userAgent", undefined);
+
+	const system = "cnf-apps";
+	const app = removePrefixFromAppName(
+		get(context, "configuration.app.name", "unknown")
+	);
+	const clientTags = {
+		...get(context, "signals.partnerSignals.clientTags", {}),
+		os,
+		isMobile,
+		evReferrer,
+		consumerBrand,
+		app,
+		system,
+		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.
+		 */
+		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)])
+		),
+	});
+}

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

@@ -0,0 +1,66 @@
+// Abbreviation.tsx
+import React, { useState, type PropsWithChildren } from "react";
+import {
+	StyleSheet,
+	TouchableWithoutFeedback,
+	Modal,
+	View,
+} from "react-native";
+import Text from "../../../../../../components/Text";
+
+export const Abbreviation = ({
+	children,
+	title,
+}: PropsWithChildren<{ title?: string }>) => {
+	const [visible, setVisible] = useState(false);
+
+	// Since React Native doesn't have hover, we'll use a modal or tooltip
+	// This is a simplified version - you might want to use a more sophisticated
+	// tooltip library for a better UI experience
+
+	return (
+		<>
+			<TouchableWithoutFeedback onPress={() => setVisible(true)}>
+				<>
+					{/* <Link color="inherit" variant="plain" style={styles.abbreviation}> */}
+					{children}
+					{/* </Link> */}
+				</>
+			</TouchableWithoutFeedback>
+
+			<Modal
+				transparent
+				visible={visible}
+				animationType="fade"
+				onRequestClose={() => setVisible(false)}
+			>
+				<TouchableWithoutFeedback onPress={() => setVisible(false)}>
+					<View style={styles.modalOverlay}>
+						<View style={styles.tooltipContainer}>
+							<Text variant="body-3">{title}</Text>
+						</View>
+					</View>
+				</TouchableWithoutFeedback>
+			</Modal>
+		</>
+	);
+};
+
+const styles = StyleSheet.create({
+	abbreviation: {
+		textDecorationLine: "underline",
+		textDecorationStyle: "dashed",
+	},
+	modalOverlay: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		backgroundColor: "rgba(0, 0, 0, 0.5)",
+	},
+	tooltipContainer: {
+		backgroundColor: "white",
+		padding: 16,
+		borderRadius: 8,
+		maxWidth: "80%",
+	},
+});

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

@@ -0,0 +1,175 @@
+// components.tsx
+import React from "react";
+import { StyleSheet } from "react-native";
+// import { Text, Link } from "reshaped/native"; // Assuming you have Reshaped for React Native
+import { Abbreviation } from "./Abbreviation";
+import {
+	openUrl,
+	type ASTNode,
+	type RenderRules,
+} from "react-native-markdown-display";
+import Text, {
+	type TextColor,
+	type TextWeight,
+	type Variant,
+} from "../../../../../../components/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,
+}: {
+	numberOfLines?: number;
+	variant?: Variant;
+	weight?: TextWeight;
+	color?: TextColor;
+}): 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) {
+				return (
+					<Abbreviation
+						key={node.key || `${node.type}-${node.index}`}
+						title={node.attributes.title}
+					>
+						{children}
+					</Abbreviation>
+				);
+			}
+
+			return (
+				<Text
+					key={node.key || `${node.type}-${node.index}`}
+					variant={variant}
+					weight={weight}
+					color={"primary"}
+					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 || "neutral-faded"}
+				>
+					<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/Bold text
+		strong: (node: ASTNode, children: React.ReactNode) => (
+			<Text
+				key={node.key || `${node.type}-${node.index}`}
+				variant={variant}
+				weight={"bold"}
+				color={color}
+			>
+				{children}
+			</Text>
+		),
+	};
+};
+
+const styles = StyleSheet.create({
+	bulletList: {
+		marginVertical: 8,
+		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

@@ -0,0 +1,52 @@
+import React from "react";
+import { createMarkdownComponents } from "./components";
+import { preprocessMarkdown } from "./markdownPreprocessor";
+import Markdown from "react-native-markdown-display";
+import type { TextProps } from "../../../../../../components/Text";
+
+export interface Props extends TextProps {
+	content: string;
+}
+
+export const MarkdownText = ({
+	content,
+	numberOfLines,
+	color,
+	weight,
+	variant,
+}: Props) => {
+	// Create style object for text properties
+	const textStyle = {
+		color: color,
+	};
+
+	// 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>
+	);
+};

package/src/capabilities/ui/elements/src/components/MarkdownText/markdownPreprocessor.ts

@@ -0,0 +1,124 @@
+const convertHtmlLinksToMarkdown = (inputString: string): string => {
+	// Regular expression to match HTML anchor tags
+	// This pattern captures the href attribute and the link text
+	const anchorTagRegex =
+		/<a\s+(?:[^>]*?\s+)?href="([^"]*)"(?:[^>]*?)>(.*?)<\/a>/g;
+
+	// Replace all anchor tags with markdown link format
+	const resultString = inputString.replace(
+		anchorTagRegex,
+		(_match, url, text) => {
+			return `[${text}](${url})`;
+		}
+	);
+
+	return resultString;
+};
+
+export const preprocessMarkdown = (markdown: string): string => {
+	// Convert <sup> tags to Unicode superscript equivalents
+	const supRegex = /<sup>([^<]+)<\/sup>/g;
+	let processed = markdown.replace(supRegex, (_match, text: string) => {
+		const superscriptMap: { [key: string]: string } = {
+			"1": "¹",
+			"2": "²",
+			"3": "³",
+			"4": "⁴",
+			"5": "⁵",
+			"6": "⁶",
+			"7": "⁷",
+			"8": "⁸",
+			"9": "⁹",
+			"0": "⁰",
+			"a": "ᵃ",
+			"b": "ᵇ",
+			"c": "ᶜ",
+			"d": "ᵈ",
+			"e": "ᵉ",
+			"f": "ᶠ",
+			"g": "ᵍ",
+			"h": "ʰ",
+			"i": "ⁱ",
+			"j": "ʲ",
+			"k": "ᵏ",
+			"l": "ˡ",
+			"m": "ᵐ",
+			"n": "ⁿ",
+			"o": "ᵒ",
+			"p": "ᵖ",
+			"q": "ᵠ",
+			"r": "ʳ",
+			"s": "ˢ",
+			"t": "ᵗ",
+			"u": "ᵘ",
+			"v": "ᵛ",
+			"w": "ʷ",
+			"x": "ˣ",
+			"y": "ʸ",
+			"z": "ᶻ",
+			"A": "ᴬ",
+			"B": "ᴮ",
+			"C": "ᶜ",
+			"D": "ᴰ",
+			"E": "ᴱ",
+			"F": "ᶠ",
+			"G": "ᴳ",
+			"H": "ᴴ",
+			"I": "ᴵ",
+			"J": "ᴶ",
+			"K": "ᴷ",
+			"L": "ᴸ",
+			"M": "ᴹ",
+			"N": "ᴺ",
+			"O": "ᴼ",
+			"P": "ᴾ",
+			"Q": "ᵠ",
+			"R": "ᴿ",
+			"S": "ˢ",
+			"T": "ᵀ",
+			"U": "ᵁ",
+			"V": "ⱽ",
+			"W": "ᵂ",
+			"X": "ˣ",
+			"Y": "ʸ",
+			"Z": "ᶻ",
+			"(": "⁽",
+			")": "⁾",
+			"+": "⁺",
+			"-": "⁻",
+			"=": "⁼",
+		};
+
+		return text
+			.split("")
+			.map((char: string) => superscriptMap[char] || char) // Use the map or fallback to the original character
+			.join("");
+	});
+
+	// Convert <b> tags to bold markdown
+	const boldRegex = /<b>([^<]+)<\/b>/g;
+	processed = processed.replace(boldRegex, (_match, text) => {
+		return `**${text}**`;
+	});
+
+	// Convert <p> tags to paragraphs
+	const pRegex = /<p>(.*?)<\/p>/gs;
+	processed = processed.replace(pRegex, (_match, text) => {
+		return `${text}\n\n`;
+	});
+
+	// Existing <abbr> tag conversion
+	const abbrRegex = /<abbr\s+title="([^"]+)">([^<]+)<\/abbr>/g;
+	processed = processed.replace(abbrRegex, (_match, title, text) => {
+		return `[${text}](abbr:${text} "${title}")`;
+	});
+
+	// Remove extra whitespace
+	const whitespaceRegex = /[^\S\r\n]+/g;
+	processed = processed.replace(whitespaceRegex, " ").trim();
+
+	// Convert HTML links to markdown
+	processed = convertHtmlLinksToMarkdown(processed);
+
+	return processed;
+};

package/src/capabilities/ui/elements/src/components/index.ts

@@ -0,0 +1 @@
+export { ThumborImage } from "./thumbor";

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

@@ -0,0 +1,115 @@
+import React from "react";
+import { Image, type ImageProps, StyleSheet } from "react-native";
+import { SvgUri } from "react-native-svg";
+import useSvgUriViewBox from "./useSvgUriViewBox";
+
+// Define props interface with required src, width, and height
+interface ThumborImageProps extends Omit<ImageProps, "source"> {
+	src: string;
+	width: number;
+	height: number;
+}
+
+// Helper to check if URL is an SVG
+const isSvgUrl = (url: string): boolean => {
+	return url.toLowerCase().endsWith(".svg");
+};
+
+// const removePrefixSlash = (path: string) => {
+// 	if (path.charAt(0) === "/") return path.substring(1);
+// 	return path;
+// };
+
+// const removeThumborPath = (path: string) => {
+// 	return path.replace(/^\/?cnf\/thumbor(\/unsafe)?/, "");
+// };
+// const normalizeUrl = chain(removeThumborPath, removePrefixSlash);
+
+// const shouldBypassThumbor = (url: URL, cnfBaseUrl: URL) => {
+// 	if (isSvgUrl(url.pathname)) return true;
+
+// 	// if props.offer.image.match('s3.amazonaws.com')
+// 	if (
+// 		url.hostname !== "s3.amazonaws.com" &&
+// 		url.hostname !== cnfBaseUrl.hostname
+// 	)
+// 		return true;
+
+// 	return false;
+// };
+
+//TODO(rauloaida): make thumbor always return exact dimensions and doing the fit itself
+// const generateThumborLink = (
+// 	url: string,
+// 	width?: number,
+// 	height?: number,
+// 	meta = false
+// ) => {
+// 	const { cnfBaseUrl } = { cnfBaseUrl: "https://www.moneylion.dev" }; // getCNFContext().use().context.request;
+// 	const parsedCnfBaseUrl = new URL(cnfBaseUrl);
+// 	const parsedUrl = new URL(url, cnfBaseUrl);
+// 	if (shouldBypassThumbor(parsedUrl, parsedCnfBaseUrl)) {
+// 		return url;
+// 	}
+// 	const imagePath = normalizeUrl(url);
+// 	const META = meta ? "meta" : undefined;
+// 	const trim = "trim:top-left:35";
+// 	const fit = `fit-in/${width ?? ""}x${height ?? ""}`;
+// 	const filters = "filters:format(webp):background_color(white)";
+
+// 	return sift([
+// 		cnfBaseUrl,
+// 		"cnf/thumbor/unsafe",
+// 		META,
+// 		trim,
+// 		fit,
+// 		filters,
+// 		imagePath,
+// 	]).join("/");
+// };
+
+export const ThumborImage = ({
+	src,
+	width,
+	height,
+	...props
+}: ThumborImageProps) => {
+	// Check if the image is an SVG
+	const isSvg = isSvgUrl(src);
+
+	const { viewBox, computedWidth } = useSvgUriViewBox(
+		src,
+		isSvg,
+		height,
+		width
+	);
+
+	if (isSvg) {
+		// For SVG images, use SvgUri component
+
+		return (
+			<SvgUri
+				uri={src}
+				width={computedWidth ?? width}
+				height={height}
+				style={[styles.svgStyle, props.style]}
+				viewBox={viewBox}
+			/>
+		);
+	}
+
+	return (
+		<Image
+			{...props}
+			width={computedWidth ?? width}
+			height={height}
+			source={{ uri: src }}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	svgStyle: {
+		alignSelf: "flex-start",
+	},
+});

package/src/capabilities/ui/elements/src/components/thumbor/useSvgUriViewBox.test.ts

@@ -0,0 +1,42 @@
+// import { renderHook, waitFor } from "@testing-library/react-native";
+// import useSvgUriViewBox from "./useSvgUriViewBox";
+
+// describe("useSvgUriViewBox()", () => {
+// 	const MOCK_SVG_WITH_VIEWBOX = `<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none"></svg>`;
+// 	const MOCK_SVG_WITHOUT_VIEWBOX = `<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="none"></svg>`;
+
+// 	function arrangeMocks() {
+// 		const mockResponseTextFn = jest
+// 			.fn()
+// 			.mockResolvedValue(MOCK_SVG_WITHOUT_VIEWBOX);
+// 		jest
+// 			.spyOn(global, "fetch")
+// 			.mockResolvedValue({ text: mockResponseTextFn } as unknown as Response);
+
+// 		return { mockText: mockResponseTextFn };
+// 	}
+
+// 	it("should return view-box if svg if missing a view-box", async () => {
+// 		const { mockText } = arrangeMocks();
+// 		mockText.mockResolvedValueOnce(MOCK_SVG_WITHOUT_VIEWBOX);
+
+// 		const hook = renderHook(() => useSvgUriViewBox("URI", true));
+// 		await waitFor(() => expect(hook.result.current).toBeDefined());
+// 	});
+
+// 	it("should return view-box if svg already has view-box", async () => {
+// 		const { mockText } = arrangeMocks();
+// 		mockText.mockResolvedValueOnce(MOCK_SVG_WITH_VIEWBOX);
+
+// 		const hook = renderHook(() => useSvgUriViewBox("URI", true));
+// 		await waitFor(() => expect(hook.result.current).toBeDefined());
+// 	});
+
+// 	it("should not make async calls if image is not an svg", async () => {
+// 		const mocks = arrangeMocks();
+// 		const hook = renderHook(() => useSvgUriViewBox("URI", false));
+
+// 		await waitFor(() => expect(hook.result.current).toBeUndefined());
+// 		expect(mocks.mockText).not.toHaveBeenCalled();
+// 	});
+// });