@moneylion/react-native-offer-carousel 1.0.0

package/src/components/Button/index.tsx

@@ -0,0 +1,140 @@
+import React, { forwardRef, type ReactNode } from "react";
+import {
+	TouchableOpacity,
+	View,
+	StyleSheet,
+	ActivityIndicator,
+	type StyleProp,
+	type ViewStyle,
+	type TouchableOpacityProps,
+} from "react-native";
+import { useTheme, type ThemePalette } from "../../context/ThemeProvider";
+import Text from "../Text";
+
+// Helper function to determine text color based on background color
+const getContrastColor = (hexColor: string): string => {
+	// Remove the hash if it exists
+	const color = hexColor.replace("#", "");
+
+	// Convert to RGB
+	const r = parseInt(color.substring(0, 2), 16) || 0;
+	const g = parseInt(color.substring(2, 4), 16) || 0;
+	const b = parseInt(color.substring(4, 6), 16) || 0;
+
+	// Calculate luminance using the perceived brightness formula
+	// (0.299*R + 0.587*G + 0.114*B)
+	const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+	// Return white for dark backgrounds, black for light backgrounds
+	return luminance > 0.5 ? "#000000" : "#FFFFFF";
+};
+
+export type Colors = keyof Omit<ThemePalette, "generation" | "colorScheme">;
+
+export interface ButtonProps extends TouchableOpacityProps {
+	color?: Colors;
+	loading?: boolean;
+	highlighted?: boolean;
+	disabled?: boolean;
+	children?: ReactNode;
+	style?: StyleProp<ViewStyle>;
+}
+
+const Button = forwardRef<TouchableOpacity, ButtonProps>((props, ref) => {
+	const {
+		color = "neutral",
+		highlighted = false,
+		loading = false,
+		disabled = false,
+		children,
+		onPress,
+		style,
+		...rest
+	} = props;
+
+	const themeContext = useTheme();
+
+	const theme = themeContext?.theme || {};
+
+	// Convert palette colors to actual styles
+	const getPaletteColor = (colorKey: Colors) => {
+		switch (colorKey) {
+			case "promotional":
+				return theme.promotional || "#007AFF"; // TODO: remove fallback color
+			case "positive":
+				return theme.positive;
+			case "critical":
+				return theme.critical || "#FF3B30"; // TODO: remove fallback color
+			case "highlight":
+				return theme.highlight || "#FF9500"; // TODO: remove fallback color
+			case "neutral":
+				return theme.neutral || "#8E8E93"; // TODO: remove fallback color
+			default:
+				return "#8E8E93";
+		}
+	};
+
+	const backgroundColor = getPaletteColor(color);
+	const textColor = getContrastColor(backgroundColor);
+
+	return (
+		<TouchableOpacity
+			ref={ref}
+			style={[
+				styles.container,
+				{ backgroundColor },
+				highlighted && { opacity: 0.8 },
+				style,
+			]}
+			onPress={onPress}
+			disabled={disabled || loading}
+			activeOpacity={0.7}
+			{...rest}
+		>
+			{loading && (
+				<View style={styles.loaderContainer}>
+					<ActivityIndicator size="small" color={textColor} />
+				</View>
+			)}
+
+			{children && (
+				<Text
+					variant={"body-2"}
+					weight={"medium"}
+					style={[loading && styles.hiddenChildren, { color: textColor }]}
+					numberOfLines={1}
+				>
+					{children}
+				</Text>
+			)}
+		</TouchableOpacity>
+	);
+});
+
+const styles = StyleSheet.create({
+	container: {
+		height: 48,
+		paddingHorizontal: 20,
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: 24,
+	},
+	buttonGroup: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	loaderContainer: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	hiddenChildren: {
+		opacity: 0,
+	},
+});
+
+export default Button;

package/src/components/Cards/VideosCard/VideoContent.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { memo } from "react";
+import { Actionable, Tooltip, View } from "reshaped";
+// TODO: import VideoPlayer from "../../VideoPlayer/VideoPlayer";
+import React from "react";
+import Text from "../../Text";
+
+type Video = {
+	muxId: string;
+	subtitle: string;
+};
+
+export type VideoContentProps = Video;
+
+export const VideoContent = memo(({ muxId, subtitle }: VideoContentProps) => (
+	<View gap={2} direction="column" width={27}>
+		<View width={27} height={48} borderRadius="large">
+			{/* TODO: Add the video player logic  */}
+			<View key={`${muxId}`} />
+			{/* <VideoPlayer playbackId={muxId} /> */}
+		</View>
+		<Tooltip text={subtitle}>
+			{(attributes) => (
+				<Actionable attributes={attributes} as="div">
+					<Text
+						variant="caption-2"
+						weight="medium"
+						color="neutral-faded"
+						numberOfLines={2}
+					>
+						{subtitle}
+					</Text>
+				</Actionable>
+			)}
+		</Tooltip>
+	</View>
+));

package/src/components/Cards/VideosCard/VideosCard.tsx

@@ -0,0 +1,54 @@
+// import { memo } from "react";
+// import { VideoContent, type VideoContentProps } from "./VideoContent";
+// import { GenericOfferVertical } from "../../../../capabilities/ui/elements/src";
+// import React from "react";
+// import Text from "../../Text";
+// import { View, StyleSheet } from "react-native";
+
+// type VideosContent = {
+// 	title: string;
+// 	subtitle: string;
+// 	videos: VideoContentProps[];
+// };
+
+// export type VideosCardProps = {
+// 	videosContent: VideosContent;
+// 	showBorder: boolean;
+// };
+
+// export const VideosCard = memo(
+// 	({
+// 		videosContent: { title, subtitle, videos },
+// 		showBorder,
+// 	}: VideosCardProps) => {
+// 		const renderVideos = () =>
+// 			videos.map((video) => <VideoContent key={video.muxId} {...video} />);
+
+// 		return (
+// 			<GenericOfferVertical showBorder={showBorder}>
+// 				<GenericOfferVertical.Container>
+// 					<View style={styles.textContainer}>
+// 						<Text variant="featured-2" weight="bold">
+// 							{title}
+// 						</Text>
+// 						<Text variant="body-3" weight="regular">
+// 							{subtitle}
+// 						</Text>
+// 					</View>
+// 					<View style={styles.videoContainer}>{renderVideos()}</View>
+// 				</GenericOfferVertical.Container>
+// 			</GenericOfferVertical>
+// 		);
+// 	}
+// );
+
+// const styles = StyleSheet.create({
+// 	textContainer: {
+// 		gap: 1,
+// 	},
+// 	videoContainer: {
+// 		flexDirection: "row",
+// 		gap: 3,
+// 		justifyContent: "space-between",
+// 	},
+// });

package/src/components/Cards/index.ts

@@ -0,0 +1 @@
+// export * from "./VideosCard/VideosCard";

package/src/components/Common/BaseOfferCard/Content/Content.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import View, { type ViewProps } from "../../../View";
+
+export function Content({ children, ...rest }: ViewProps) {
+	return (
+		<View gap={4} width={"100%"} {...rest}>
+			{children}
+		</View>
+	);
+}

package/src/components/Common/BaseOfferCard/Content/index.tsx

@@ -0,0 +1 @@
+export * from "./Content";

package/src/components/Common/BaseOfferCard/Stat/Stat.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { MarkdownText } from "../../../../../capabilities/ui/elements/src/components/MarkdownText";
+import type { StatProps } from "../../../../../capabilities/offers/ux/src/elements/Stat";
+import Text from "../../../Text";
+import { StyleSheet, View } from "react-native";
+
+// Custom function to capitalize first letter but preserve other capitalization
+function smartCapitalize(text: string): string {
+	// For other words, capitalize first letter of each word
+	return text
+		.split(" ")
+		.map((word) => {
+			if (word.length === 0) return word;
+			return word.charAt(0).toUpperCase() + word.slice(1);
+		})
+		.join(" ");
+}
+
+const VerticalStat = (props: StatProps) => {
+	return (
+		<View style={styles.verticalStatContainer}>
+			<Text variant="featured-2" color="neutral" weight={"bold"}>
+				{String(props.content).trim()}
+			</Text>
+			<MarkdownText
+				variant={"body-3"}
+				weight={"regular"}
+				color={"neutral-faded"}
+				content={props.label.trim()}
+			/>
+		</View>
+	);
+};
+
+export const Stat = ({
+	content,
+	label,
+	isVertical,
+	isHighlighted,
+	isNull,
+}: StatProps & {
+	isVertical?: boolean;
+	isHighlighted?: boolean;
+	isNull?: boolean;
+}) => {
+	// Handle container layout change
+
+	if (isNull) {
+		return null;
+	}
+
+	if (isVertical) {
+		return <VerticalStat content={content} label={label} />;
+	}
+
+	return (
+		<View
+			style={[
+				styles.horizontalStatContainer,
+				isHighlighted ? styles.highlightedContainer : null,
+			]}
+		>
+			<MarkdownText
+				variant={"body-3"}
+				color={"neutral-faded"}
+				content={label.trim()}
+			/>
+			<Text variant="body-3" color="neutral" weight="bold">
+				{smartCapitalize(String(content).trim())}
+			</Text>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	verticalStatContainer: {
+		gap: 4,
+		flexDirection: "column",
+	},
+	horizontalStatContainer: {
+		gap: 1,
+		flexDirection: "row",
+		justifyContent: "space-between",
+		flexWrap: "wrap",
+	},
+	highlightedContainer: {
+		padding: 8,
+		backgroundColor: "#f4f4f4", // Light gray equivalent to neutral-faded
+		borderRadius: 8, // medium border radius
+	},
+});

package/src/components/Common/BaseOfferCard/Stat/index.tsx

@@ -0,0 +1 @@
+export * from "./Stat"

package/src/components/Common/BaseOfferCard/StatsContainer/StatsContainer.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import View, { type ViewProps } from "../../../View";
+
+export const StatsContainer = ({ children, ...viewProps }: ViewProps) => (
+	<View {...viewProps} gap={4}>
+		{children}
+	</View>
+);

package/src/components/Common/BaseOfferCard/StatsContainer/index.tsx

@@ -0,0 +1 @@
+export * from "./StatsContainer";

package/src/components/Common/BaseOfferCard/ThumbsUpIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export const ThumbsUpIcon = () => (
+	<svg
+		width="13"
+		height="12"
+		viewBox="0 0 13 12"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M12.8349 4.99359L12.0782 7.71044C11.9052 8.33122 11.4165 8.8054 10.8156 8.97501C10.5694 9.04451 10.3256 8.85546 10.3256 8.5996C10.3256 8.42574 10.4407 8.27334 10.6081 8.22597C10.9522 8.12787 11.2329 7.85591 11.3314 7.50307L12.0885 4.78622C12.1765 4.47516 12.109 4.13304 11.9122 3.87382C11.7151 3.61438 11.404 3.46421 11.0825 3.46421H7.93031C7.82148 3.46421 7.71779 3.41751 7.64517 3.33461C7.57254 3.2517 7.53634 3.14265 7.54662 3.03383L7.68137 1.63406C7.71266 1.32814 7.52093 1.043 7.22528 0.949597C7.14238 0.923675 7.07489 0.954737 7.04897 1.01708L6.5987 2.14802C6.51937 2.34713 6.31937 2.47718 6.10641 2.45484C5.94596 2.43808 5.84541 2.34042 5.813 2.15071C5.79021 2.01707 5.81122 1.87965 5.86641 1.75607L6.33345 0.711163C6.52004 0.291278 6.99177 0.0734024 7.42752 0.208373C8.09612 0.410383 8.51622 1.043 8.44874 1.71697L8.37388 2.49551C8.36405 2.59808 8.44449 2.68657 8.54729 2.68657H11.0773C11.6425 2.68657 12.1868 2.95606 12.5292 3.40723C12.8713 3.85818 12.9855 4.44924 12.8349 4.99359Z"
+			fill="black"
+			fillOpacity="0.6"
+		/>
+		<path
+			d="M9.76404 5.48096C9.42192 5.03001 8.87756 4.76029 8.31243 4.76029H5.59066L5.68384 3.79092C5.71982 3.4307 5.61681 3.08254 5.41077 2.80523C5.23133 2.56389 4.97391 2.37618 4.6624 2.2821C4.22687 2.14735 3.75514 2.36501 3.56833 2.78511L2.43292 5.36185H1.00723C0.509358 5.36185 0.0999756 5.77146 0.0999756 6.26911V9.28115C0.0999756 9.77903 0.509358 10.1889 1.00723 10.1889H2.56275L3.0966 10.5725C3.59447 10.9303 4.18039 11.1167 4.79201 11.1167H7.5607C8.37477 11.1167 9.09544 10.5674 9.31309 9.78439L10.07 7.06776C10.2203 6.52341 10.1064 5.93191 9.76404 5.48096ZM9.32337 6.86017L8.5665 9.57679C8.44204 10.0228 8.02751 10.339 7.5607 10.339H4.79201C4.34084 10.339 3.91045 10.1991 3.54777 9.93992L2.91515 9.48361C2.84766 9.43691 2.7699 9.41098 2.687 9.41098H1.00723C0.934606 9.41098 0.877623 9.354 0.877623 9.28138V6.26933C0.877623 6.19671 0.934606 6.13973 1.00723 6.13973V6.13459H2.687C2.75046 6.13459 2.81124 6.11917 2.86509 6.09101C2.94353 6.05056 3.00789 5.98397 3.04476 5.90107L4.28385 3.09103C4.30978 3.02891 4.37704 2.99785 4.46017 3.02377C4.60877 3.0707 4.731 3.16612 4.8119 3.28813C4.89257 3.40902 4.93212 3.55583 4.91648 3.70801L4.78173 5.10778C4.77122 5.21683 4.80743 5.32565 4.88027 5.40878C4.9196 5.4537 4.9681 5.48811 5.02195 5.51001C5.06687 5.52878 5.11558 5.53839 5.16564 5.53839H8.31757C8.63913 5.53839 8.95019 5.68856 9.14728 5.94777C9.34415 6.20699 9.41141 6.54888 9.32337 6.86017Z"
+			fill="black"
+			fillOpacity="0.6"
+		/>
+		<path
+			d="M3.03448 6.92743V8.52965C3.03448 8.74216 2.85817 8.91848 2.64565 8.91848C2.43314 8.91848 2.25661 8.74216 2.25661 8.52965V6.92743C2.25661 6.71492 2.43314 6.53861 2.64565 6.53861C2.72677 6.53861 2.80253 6.5643 2.86509 6.60788C2.96699 6.67849 3.03448 6.79603 3.03448 6.92743Z"
+			fill="black"
+			fillOpacity="0.6"
+		/>
+	</svg>
+);

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

@@ -0,0 +1,282 @@
+import React, { type ComponentProps } from "react";
+
+import { ThumborImage } from "../../../../capabilities/ui/elements/src";
+// import { ThumbsUpIcon } from "./ThumbsUpIcon";
+import { MarkdownText } from "../../../../capabilities/ui/elements/src/components/MarkdownText";
+import { arrayToMarkdownList } from "../../../../capabilities/offer-catalog/src";
+import { StatsContainer } from "./StatsContainer";
+import { Content } from "./Content";
+import { Stat } from "./Stat";
+import Button from "../../Button";
+import Divider from "../../Divider";
+import Text, { type TextProps } from "../../Text";
+import View, { type ViewProps } from "../../View";
+import { StyleSheet } from "react-native";
+
+const CardWidth = 282;
+
+const BaseOfferCard = ({
+	children,
+	showBorder = true,
+	...rest
+}: ViewProps & { showBorder: boolean }) => (
+	<View
+		borderColor={showBorder ? "neutral" : undefined}
+		direction={"column"}
+		backgroundColor={"white"}
+		width={CardWidth}
+		gap={1}
+		style={styles.baseOfferCard}
+		{...rest}
+	>
+		{children}
+	</View>
+);
+
+const Container = ({ children, ...rest }: ViewProps) => (
+	<View
+		// height={"100%"}
+		maxHeight={"100%"}
+		// minHeight={100}
+		style={styles.container}
+		{...rest}
+	>
+		{children}
+	</View>
+);
+
+const Tip = ({ children }: ViewProps) => (
+	<Text variant="caption-2" color="positive" weight="bold" style={styles.tip}>
+		{children}
+	</Text>
+);
+
+const CreditCardImage = (
+	props: Omit<ComponentProps<typeof ThumborImage>, "width" | "height">
+) => {
+	const calculatedWidth = CardWidth - 50;
+	const cardImageAspectRatio = 230 / 145;
+	const calculatedHeight = calculatedWidth / cardImageAspectRatio;
+
+	return (
+		<ThumborImage
+			width={calculatedWidth}
+			height={calculatedHeight}
+			resizeMode={"contain"}
+			{...props}
+		/>
+	);
+};
+
+const CreditCardContainer = ({ children, ...rest }: ViewProps) => (
+	<View
+		width={"100%"}
+		direction={"column"}
+		gap={16}
+		style={styles.creditCardContainer}
+		{...rest}
+	>
+		{children}
+	</View>
+);
+
+const PartnerContainer = ({ children, ...rest }: ViewProps) => (
+	<View
+		width={"100%"}
+		direction={"column"}
+		gap={3}
+		{...rest}
+		style={styles.partnerContainer}
+	>
+		{children}
+	</View>
+);
+
+const PartnerImage = (
+	props: Omit<ComponentProps<typeof ThumborImage>, "width" | "height">
+) => {
+	// In the parent component that uses ThumborImage
+	// -32 is to account for the left + right margin of the image
+	const calculatedWidth = CardWidth - 32;
+	return (
+		<ThumborImage
+			width={calculatedWidth}
+			resizeMode={"contain"}
+			height={32}
+			{...props}
+		/>
+	);
+};
+
+const TopContainer = ({ children, ...viewProps }: ViewProps) => (
+	<View {...viewProps} gap={3} direction={"column"}>
+		{children}
+
+		<Divider />
+	</View>
+);
+
+const TopBar = ({ children, ...viewProps }: ViewProps) => (
+	<View
+		direction={"row"}
+		backgroundColor="primary-faded"
+		{...viewProps}
+		style={styles.topBar}
+	>
+		{children}
+	</View>
+);
+
+const ProductType = ({ children, ...rest }: TextProps) => (
+	<Text weight={"bold"} variant={"caption-1"} color="primary" {...rest}>
+		{children}
+	</Text>
+);
+
+const ChosenBy = ({ children, ...rest }: ViewProps) => (
+	<View width={"100%"} style={styles.chosenBy} {...rest}>
+		<View direction={"row"} style={{ alignItems: "center" }}>
+			{/* TODO Check this Icon Usage and move to reeact native version of same. */}
+			{/* <Icon svg={ThumbsUpIcon} attributes={{ style: { marginRight: "4px" } }} /> */}
+			<Text variant="caption-1" weight="bold">
+				Chosen by {children}
+			</Text>
+		</View>
+	</View>
+);
+
+const BottomBar = ({ children, ...viewProps }: ViewProps) => (
+	<View gap={5} {...viewProps} style={styles.bottomBar}>
+		{children}
+	</View>
+);
+
+const Headline = ({ children, ...rest }: TextProps) => (
+	<Text
+		variant="body-2"
+		color="neutral"
+		weight="bold"
+		numberOfLines={2}
+		{...rest}
+	>
+		{children}
+	</Text>
+);
+
+const Description = ({ children, ...rest }: TextProps) => (
+	<Text variant="body-3" color="neutral-faded" numberOfLines={4} {...rest}>
+		{children}
+	</Text>
+);
+
+const DescriptionPoints = ({
+	descriptionPoints,
+	...rest
+}: TextProps & { descriptionPoints: string[] }) =>
+	descriptionPoints.length > 0 && (
+		<MarkdownText
+			content={arrayToMarkdownList(descriptionPoints)}
+			color="neutral-faded"
+			variant="body-3"
+			{...rest}
+		/>
+	);
+
+const DescriptionHandler = ({
+	descriptionPoints,
+	contentDescription,
+	hasDivider = true,
+}: {
+	descriptionPoints: string[];
+	contentDescription?: string;
+	hasDivider?: boolean;
+}) => {
+	const renderContentDescription = () => {
+		if (descriptionPoints.length > 0) {
+			return (
+				<DescriptionPoints
+					numberOfLines={4}
+					color={"neutral-faded"}
+					variant={"body-3"}
+					descriptionPoints={descriptionPoints}
+				/>
+			);
+		}
+
+		if (contentDescription) {
+			return (
+				<Description variant={"body-3"} color={"neutral-faded"}>
+					{contentDescription}
+				</Description>
+			);
+		}
+
+		return null;
+	};
+
+	return (
+		<View gap={3} direction={"column"}>
+			{hasDivider && <Divider />}
+			{renderContentDescription()}
+		</View>
+	);
+};
+
+const CallToAction = ({ children, ...rest }: ComponentProps<typeof Button>) => (
+	<Button color="positive" {...rest}>
+		{children}
+	</Button>
+);
+
+BaseOfferCard.Container = Container;
+BaseOfferCard.TopContainer = TopContainer;
+BaseOfferCard.Stats = StatsContainer;
+BaseOfferCard.CallToAction = CallToAction;
+BaseOfferCard.ChosenBy = ChosenBy;
+BaseOfferCard.BottomBar = BottomBar;
+BaseOfferCard.Content = Content;
+BaseOfferCard.PartnerContainer = PartnerContainer;
+BaseOfferCard.PartnerImage = PartnerImage;
+BaseOfferCard.Headline = Headline;
+BaseOfferCard.Description = Description;
+BaseOfferCard.DescriptionPoints = DescriptionPoints;
+BaseOfferCard.DescriptionHandler = DescriptionHandler;
+BaseOfferCard.Stat = Stat;
+BaseOfferCard.Tip = Tip;
+BaseOfferCard.CreditCardImage = CreditCardImage;
+BaseOfferCard.CreditCardContainer = CreditCardContainer;
+BaseOfferCard.TopBar = TopBar;
+BaseOfferCard.ProductType = ProductType;
+
+export { BaseOfferCard };
+
+const styles = StyleSheet.create({
+	container: {
+		justifyContent: "space-between",
+		padding: 16,
+		flexDirection: "column",
+		display: "flex",
+		flexGrow: 1,
+	},
+	tip: { textAlign: "center" },
+	creditCardContainer: {
+		alignItems: "center",
+	},
+	partnerContainer: { alignItems: "flex-start" },
+	baseOfferCard: {
+		borderRadius: 16,
+		overflow: "hidden",
+		flex: 1,
+		display: "flex",
+	},
+	topBar: {
+		paddingHorizontal: 16,
+		paddingVertical: 8,
+		justifyContent: "space-between",
+		alignItems: "baseline",
+	},
+	bottomBar: {
+		marginTop: "auto",
+	},
+	chosenBy: { justifyContent: "center", alignItems: "center" },
+});