@moneylion/react-native-offer-carousel 1.0.5 → 1.0.7

package/src/components/View/index.tsx

@@ -1,37 +1,14 @@
 import React from "react";
-import { View as RNView, type ViewStyle, StyleSheet } from "react-native";
+import { View as RNView, type ViewStyle } from "react-native";
+import { useTheme, type ThemeColors } from "../../context/ThemeProvider";
+
+type Colors = keyof ThemeColors;
 
 export interface ViewProps {
 	children?: React.ReactNode;
 	style?: ViewStyle;
-	backgroundColor?:
-		| "neutral"
-		| "neutral-faded"
-		| "critical"
-		| "critical-faded"
-		| "positive"
-		| "positive-faded"
-		| "warning"
-		| "warning-faded"
-		| "primary"
-		| "primary-faded"
-		| "elevation-base"
-		| "elevation-raised"
-		| "elevation-overlay"
-		| "page"
-		| "page-faded"
-		| "disabled"
-		| "disabled-faded"
-		| "brand"
-		| "white"
-		| "black";
-	borderColor?:
-		| "neutral"
-		| "positive"
-		| "warning"
-		| "critical"
-		| "primary"
-		| string;
+	backgroundColor?: Colors;
+	borderColor?: Colors;
 	direction?: "row" | "row-reverse" | "column" | "column-reverse";
 	height?: number | string;
 	maxHeight?: number | string;
@@ -61,27 +38,24 @@ const View: React.FC<ViewProps> = ({
 	testID,
 	...rest
 }) => {
-	// Create a single style object directly - faster than array.filter(Boolean)
+	const themeContext = useTheme();
+	const theme = themeContext?.theme || {};
+
+	// Create a single style object directly
 	const containerStyles: Record<string, any> = {
 		// Background color handling
 		...(backgroundColor && {
-			backgroundColor:
-				styles[`bg${backgroundColor}`]?.backgroundColor || backgroundColor,
+			backgroundColor: theme[backgroundColor] || backgroundColor,
 		}),
 
 		// Border color handling
 		...(borderColor && {
-			borderColor:
-				(borderColor in
-				["neutral", "positive", "warning", "critical", "primary"]
-					? styles[
-							`border${borderColor as "neutral" | "positive" | "warning" | "critical" | "primary"}`
-						]?.borderColor
-					: undefined) || borderColor,
+			borderWidth: 1,
+			borderColor: theme[borderColor],
 		}),
 
 		// Direction handling
-		...(direction && styles[`direction${direction}`]),
+		...(direction && { flexDirection: direction }),
 
 		// Dimension styles - applied only when provided
 		...(height !== undefined && { height }),
@@ -109,36 +83,4 @@ const View: React.FC<ViewProps> = ({
 	);
 };
 
-const styles = StyleSheet.create({
-	"bgneutral": { backgroundColor: "#e0e0e0" },
-	"bgneutral-faded": { backgroundColor: "#f5f5f5" },
-	"bgcritical": { backgroundColor: "#f44336" },
-	"bgcritical-faded": { backgroundColor: "#ffebee" },
-	"bgpositive": { backgroundColor: "#4caf50" },
-	"bgpositive-faded": { backgroundColor: "#e8f5e9" },
-	"bgwarning": { backgroundColor: "#ff9800" },
-	"bgwarning-faded": { backgroundColor: "#fff3e0" },
-	"bgprimary": { backgroundColor: "#2196f3" },
-	"bgprimary-faded": { backgroundColor: "#ebfff9" },
-	"bgelevation-base": { backgroundColor: "#fafafa" },
-	"bgelevation-raised": { backgroundColor: "#eeeeee" },
-	"bgelevation-overlay": { backgroundColor: "#bdbdbd" },
-	"bgpage": { backgroundColor: "#ffffff" },
-	"bgpage-faded": { backgroundColor: "#f5f5f5" },
-	"bgdisabled": { backgroundColor: "#bdbdbd" },
-	"bgdisabled-faded": { backgroundColor: "#e0e0e0" },
-	"bgbrand": { backgroundColor: "#6200ea" },
-	"bgwhite": { backgroundColor: "#ffffff" },
-	"bgblack": { backgroundColor: "#000000" },
-	"borderneutral": { borderColor: "#bdbdbd" },
-	"borderpositive": { borderColor: "#388e3c" },
-	"borderwarning": { borderColor: "#f57c00" },
-	"bordercritical": { borderColor: "#d32f2f" },
-	"borderprimary": { borderColor: "#1976d2" },
-	"directionrow": { flexDirection: "row" },
-	"directionrow-reverse": { flexDirection: "row-reverse" },
-	"directioncolumn": { flexDirection: "column" },
-	"directioncolumn-reverse": { flexDirection: "column-reverse" },
-});
-
 export default View;

package/src/config/mocks/cnfContext.ts

@@ -36,14 +36,50 @@ export const localCnfContext: CnfContext = {
 			icon: null,
 		},
 		type: "business",
-		palette: {
-			promotional: "#592b86",
-			generation: "provided",
-			colorScheme: "balanced",
-			positive: "#ec8a07",
-			critical: "#ce0202",
-			highlight: "#ec8a07",
-			neutral: "#14181f",
+		themeColors: {
+			backgroundCritical: "#ff7200",
+			backgroundCriticalFaded: "#fff2e8",
+			backgroundCriticalHighlighted: "#ee6a00",
+			backgroundDisabled: "#eeeeee",
+			backgroundDisabledFaded: "#f6f6f6",
+			backgroundElevationBase: "#ffffff",
+			backgroundElevationOverlay: "#ffffff",
+			backgroundElevationRaised: "#ffffff",
+			backgroundNeutral: "#e2e2e2",
+			backgroundNeutralFaded: "#f5f5f5",
+			backgroundNeutralHighlighted: "#d7d7d7",
+			backgroundPage: "#ffffff",
+			backgroundPageFaded: "#f9f9f9",
+			backgroundPositive: "#00e5c4",
+			backgroundPositiveFaded: "#e8fffc",
+			backgroundPositiveHighlighted: "#00d9b9",
+			backgroundPrimary: "#00e5c4",
+			backgroundPrimaryFaded: "#e8fffc",
+			backgroundPrimaryHighlighted: "#00d9b9",
+			backgroundWarning: "#facc15",
+			backgroundWarningFaded: "#fffae9",
+			backgroundWarningHighlighted: "#edc113",
+			black: "#000000",
+			borderCritical: "#d35d00",
+			borderCriticalFaded: "#fce3ce",
+			borderDisabled: "#e2e2e2",
+			borderNeutral: "#bbbbbb",
+			borderNeutralFaded: "#e1e1e1",
+			borderPositive: "#00bfa3",
+			borderPositiveFaded: "#b8faf2",
+			borderPrimary: "#00bfa3",
+			borderPrimaryFaded: "#b8faf2",
+			borderWarning: "#cfa90f",
+			borderWarningFaded: "#faedbb",
+			brand: "#00e5c4",
+			foregroundCritical: "#a94900",
+			foregroundDisabled: "#cccccc",
+			foregroundNeutral: "#181818",
+			foregroundNeutralFaded: "#666666",
+			foregroundPositive: "#007362",
+			foregroundPrimary: "#007362",
+			foregroundWarning: "#7b6305",
+			white: "#ffffff",
 		},
 		isLicensed: true,
 		allowedMarks: { logo: true, name: true },

package/src/context/EventHandlerProvider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from "react";
 import type { ResultType } from "../services/getProductTypes";
-import type { BaseOffer } from "../../src/capabilities/offer-catalog/src";
+import type { BaseOffer } from "../capabilities/offer-catalog/src";
 
 interface onInitializeProps {
 	timestamp: string;

package/src/context/ThemeProvider.tsx

@@ -7,15 +7,52 @@ import React, {
 } from "react";
 import { Platform } from "react-native";
 
-export interface ThemePalette {
-	promotional?: string;
-	generation?: ("generate" | "provided") | null;
-	colorScheme?: ("balanced" | "light" | "dark") | null;
-	positive: string;
-	critical?: string;
-	highlight?: string;
-	neutral?: string;
+export interface ThemeColors {
+	backgroundPrimary: string;
+	backgroundPrimaryFaded: string;
+	backgroundPrimaryHighlighted: string;
+	backgroundCritical: string;
+	backgroundCriticalFaded: string;
+	backgroundCriticalHighlighted: string;
+	backgroundWarning: string;
+	backgroundWarningFaded: string;
+	backgroundWarningHighlighted: string;
+	backgroundPositive: string;
+	backgroundPositiveFaded: string;
+	backgroundPositiveHighlighted: string;
+	backgroundNeutral: string;
+	backgroundNeutralFaded: string;
+	backgroundNeutralHighlighted: string;
+	backgroundDisabled: string;
+	backgroundDisabledFaded: string;
+	backgroundElevationBase: string;
+	backgroundElevationRaised: string;
+	backgroundElevationOverlay: string;
+	backgroundPage: string;
+	backgroundPageFaded: string;
+	borderPrimary: string;
+	borderPrimaryFaded: string;
+	borderCritical: string;
+	borderCriticalFaded: string;
+	borderWarning: string;
+	borderWarningFaded: string;
+	borderPositive: string;
+	borderPositiveFaded: string;
+	borderNeutral: string;
+	borderNeutralFaded: string;
+	borderDisabled: string;
+	foregroundPrimary: string;
+	foregroundCritical: string;
+	foregroundWarning: string;
+	foregroundPositive: string;
+	foregroundNeutral: string;
+	foregroundNeutralFaded: string;
+	foregroundDisabled: string;
+	brand: string;
+	white: string;
+	black: string;
 }
+
 export interface FontFamily {
 	normal?: string;
 	medium?: string;
@@ -29,9 +66,9 @@ const defaultFontFamily: FontFamily = {
 };
 
 interface ThemeContextType {
-	theme: ThemePalette;
+	theme: ThemeColors;
 	fontFamily: FontFamily;
-	updateTheme: (newTheme: Partial<ThemePalette>) => void;
+	updateTheme: (newTheme: Partial<ThemeColors>) => void;
 	updateFontFamily: (newFontFamily: Partial<FontFamily>) => void;
 }
 
@@ -46,23 +83,23 @@ export const useTheme = () => {
 };
 
 interface ThemeProviderProps {
-	palette?: ThemePalette;
+	themeColors?: ThemeColors;
 	fontFamily?: Partial<FontFamily>;
 	children: ReactNode;
 }
 
 export const ThemeProvider: FC<ThemeProviderProps> = ({
-	palette = {} as ThemePalette, // should be safe to assert as ThemePalette since the fallback colors are already handled by the consumers of ThemeProvider
+	themeColors = {} as ThemeColors, // should be safe to assert as ThemePalette since the fallback colors are already handled by the consumers of ThemeProvider
 	fontFamily = {},
 	children,
 }) => {
-	const [theme, setTheme] = useState<ThemePalette>(palette);
+	const [theme, setTheme] = useState<ThemeColors>(themeColors);
 	const [fonts, setFonts] = useState<FontFamily>({
 		...defaultFontFamily,
 		...fontFamily,
 	});
 
-	const updateTheme = (newTheme: Partial<ThemePalette>) => {
+	const updateTheme = (newTheme: Partial<ThemeColors>) => {
 		setTheme((prevTheme) => ({
 			...prevTheme,
 			...newTheme,

package/src/pageData.ts

@@ -1,5 +1,6 @@
-import type { CnfContext } from "../src/capabilities/core/src/system/cnfContext/CnfContext";
-import { getIsDevEnvironment } from "../src/capabilities/offer-catalog/src/utils/contextUtil";
+import type { CnfContext } from "./capabilities/core/src/system/cnfContext/CnfContext";
+import { getIsDevEnvironment } from "./capabilities/offer-catalog/src/utils/contextUtil";
+
 import type { MoneyLionOfferCarouselProps } from "./components/MoneyLionOfferCarousel";
 import type { onRateTableSubmitProps } from "./context/EventHandlerProvider";
 import { getDynamicOffers } from "./services/getDynamicOffers";
@@ -30,6 +31,7 @@ export async function getPageData({
 		displayLayout,
 		searchAPIToken,
 		showProductTypeLabel,
+		showCardBorder,
 	} = params;
 
 	// Resolve Tags
@@ -90,7 +92,7 @@ export async function getPageData({
 		offers,
 		currentCountry,
 		// videosContent,
-		// showBorder,
+		showCardBorder,
 		// shouldHideFooter,
 		showProductTypeLabel,
 		displayLayout: safeDisplayLayout,

package/src/services/getDynamicOffers.ts

@@ -1,9 +1,4 @@
 import { isEmpty } from "radash";
-import type { CnfContext } from "../../src/capabilities/core/src/system/cnfContext/CnfContext";
-import type {
-	PartnerOverride,
-	ProductTypeDefinition,
-} from "../../src/capabilities/offer-catalog/src";
 import {
 	addClientTagsToOfferLinks,
 	getOffersByProductTypes,
@@ -18,6 +13,11 @@ import { sortOffersByRecommendationScore } from "../utils/sortOffersByRecommenda
 import { pipe } from "effect";
 import { formatOfferUrl } from "../utils/formatOfferUrl";
 import { getOffersBasedOnLayout } from "../utils/getOffersBasedOnLayout";
+import type {
+	PartnerOverride,
+	ProductTypeDefinition,
+} from "../capabilities/offer-catalog/src";
+import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
 
 export type GetDynamicOffersProps = {
 	tags: string;

package/src/services/getProductTypesByQuery.ts

@@ -1,6 +1,6 @@
 import { pipe } from "effect";
-import { orderProductTypesByRank } from "../../src/capabilities/core/src/domain/third-party-search";
 import { getEwsSearchApiBaseUrl } from "../apiEnvironment";
+import { orderProductTypesByRank } from "../capabilities/core/src/domain/third-party-search";
 
 type GetProductTypesByQueryProps = {
 	query: string;

package/src/utils/addClientTagsToOfferLinks.ts

@@ -1,4 +1,4 @@
-import type { BaseOffer } from "../../src/capabilities/offer-catalog/src";
+import type { BaseOffer } from "../capabilities/offer-catalog/src";
 
 /**
  * Add client tags to offer links

package/src/utils/formatOfferUrl.ts

@@ -3,7 +3,7 @@ import {
 	type BaseOffer,
 	type PartnerOverride,
 	type ProductTypeDefinition,
-} from "../../src/capabilities/offer-catalog/src";
+} from "../capabilities/offer-catalog/src";
 
 /**
  * Format the offer URL

package/src/utils/getDefaultProductType.ts

@@ -1,4 +1,4 @@
-import type { CnfContext } from "../../src/capabilities/core/src/system/cnfContext/CnfContext";
+import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
 
 export const getDefaultProductType = (context: CnfContext) =>
 	context.configuration.configuration.defaultProductTypeSlug;

package/src/utils/getEnableUseCachedOffers.ts

@@ -1,4 +1,4 @@
-import type { CnfContext } from "../../src/capabilities/core/src/system/cnfContext/CnfContext";
+import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
 
 /**
  * Get enabled cache offers request

package/src/utils/getOffersBasedOnLayout.ts

@@ -1,7 +1,7 @@
 import { pipe } from "effect";
 import type { Layout } from "./layouts";
 import { sortOffersByRecommendationScore } from "./sortOffersByRecommendationScore";
-import type { BaseOffer } from "../../src/capabilities/offer-catalog/src";
+import type { BaseOffer } from "../capabilities/offer-catalog/src";
 
 const MAX_OFFERS_TO_DISPLAY = 3;
 

package/src/utils/getOffersByProductTypes.ts

@@ -1,9 +1,10 @@
-import type { CnfContext } from "../../src/capabilities/core/src/system/cnfContext/CnfContext";
+import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
 import {
 	getCachedOffersByProductTypes,
 	getOffersForProductTypes,
-} from "../../src/capabilities/offer-catalog/src/api/offerCatalogApi";
-import { parseClientTags } from "../../src/capabilities/offer-catalog/src/utils/contextUtil";
+} from "../capabilities/offer-catalog/src/api/offerCatalogApi";
+import { parseClientTags } from "../capabilities/offer-catalog/src/utils/contextUtil";
+
 /**
  * Retrieves offers by product types.
  *

package/src/utils/getProductTypesDefinition.ts

@@ -1,4 +1,4 @@
-import type { CnfContext } from "../../src/capabilities/core/src/system/cnfContext/CnfContext";
+import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
 
 export const getProductTypesDefinition = (context: CnfContext) => {
 	const offersConfig = context.configuration.configuration;

package/src/utils/selectDynamicOffers.ts

@@ -1,7 +1,6 @@
-import type { BaseOffer } from "../../src/capabilities/offer-catalog/src";
+import type { BaseOffer } from "../capabilities/offer-catalog/src";
 import { sortOffersByRecommendationScore } from "./sortOffersByRecommendationScore";
 
-
 export const selectDynamicOffers = (
 	offers: BaseOffer[],
 	productTypes: string[]

package/src/utils/sortOffersByRecommendationScore.ts

@@ -1,5 +1,5 @@
 import { sort } from "radash";
-import type { BaseOffer } from "../../src/capabilities/offer-catalog/src";
+import type { BaseOffer } from "../capabilities/offer-catalog/src";
 
 export const sortOffersByRecommendationScore = (offers: BaseOffer[]) => {
 	return sort(offers, (offer) => offer.recommendationScore, true);

package/lib/commonjs/utils/getDefaultPaletteColor.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDefaultPaletteColor = void 0;
-const getDefaultPaletteColor = colorKey => {
-  const defaultColors = {
-    positive: "#00E5C4"
-    // promotional: "#FFD700",
-    // generation: "#4CAF50",
-    // colorScheme: "#9E9E9E",
-    // critical: "#FF0000",
-    // highlight: "#FFA500",
-    // neutral: "#808080",
-  };
-  return defaultColors[colorKey] ?? "#000000"; // subject to change
-};
-exports.getDefaultPaletteColor = getDefaultPaletteColor;
-//# sourceMappingURL=getDefaultPaletteColor.js.map

package/lib/commonjs/utils/getDefaultPaletteColor.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getDefaultPaletteColor","colorKey","defaultColors","positive","exports"],"sourceRoot":"../../../src","sources":["utils/getDefaultPaletteColor.ts"],"mappings":";;;;;;AAEO,MAAMA,sBAAsB,GAAIC,QAAgB,IAAa;EACnE,MAAMC,aAA8C,GAAG;IACtDC,QAAQ,EAAE;IACV;IACA;IACA;IACA;IACA;IACA;EACD,CAAC;EAED,OAAOD,aAAa,CAACD,QAAQ,CAAC,IAAI,SAAS,CAAC,CAAC;AAC9C,CAAC;AAACG,OAAA,CAAAJ,sBAAA,GAAAA,sBAAA","ignoreList":[]}

package/lib/module/utils/getDefaultPaletteColor.js

@@ -1,13 +0,0 @@
-export const getDefaultPaletteColor = colorKey => {
-  const defaultColors = {
-    positive: "#00E5C4"
-    // promotional: "#FFD700",
-    // generation: "#4CAF50",
-    // colorScheme: "#9E9E9E",
-    // critical: "#FF0000",
-    // highlight: "#FFA500",
-    // neutral: "#808080",
-  };
-  return defaultColors[colorKey] ?? "#000000"; // subject to change
-};
-//# sourceMappingURL=getDefaultPaletteColor.js.map

package/lib/module/utils/getDefaultPaletteColor.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getDefaultPaletteColor","colorKey","defaultColors","positive"],"sourceRoot":"../../../src","sources":["utils/getDefaultPaletteColor.ts"],"mappings":"AAEA,OAAO,MAAMA,sBAAsB,GAAIC,QAAgB,IAAa;EACnE,MAAMC,aAA8C,GAAG;IACtDC,QAAQ,EAAE;IACV;IACA;IACA;IACA;IACA;IACA;EACD,CAAC;EAED,OAAOD,aAAa,CAACD,QAAQ,CAAC,IAAI,SAAS,CAAC,CAAC;AAC9C,CAAC","ignoreList":[]}

package/lib/typescript/src/utils/getDefaultPaletteColor.d.ts

@@ -1,3 +0,0 @@
-import type { Colors } from "../components/Button";
-export declare const getDefaultPaletteColor: (colorKey: Colors) => string;
-//# sourceMappingURL=getDefaultPaletteColor.d.ts.map

package/lib/typescript/src/utils/getDefaultPaletteColor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getDefaultPaletteColor.d.ts","sourceRoot":"","sources":["../../../../src/utils/getDefaultPaletteColor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,MAYzD,CAAC"}

package/src/utils/getDefaultPaletteColor.ts

@@ -1,15 +0,0 @@
-import type { Colors } from "../components/Button";
-
-export const getDefaultPaletteColor = (colorKey: Colors): string => {
-	const defaultColors: Partial<Record<Colors, string>> = {
-		positive: "#00E5C4",
-		// promotional: "#FFD700",
-		// generation: "#4CAF50",
-		// colorScheme: "#9E9E9E",
-		// critical: "#FF0000",
-		// highlight: "#FFA500",
-		// neutral: "#808080",
-	};
-
-	return defaultColors[colorKey] ?? "#000000"; // subject to change
-};