LLM - Growth Landing Pages (#7224)

feat(llm): Added landing pages and deeplinks that uses braze cards

.changeset/metal-buses-judge.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+LLM - Added growth landing pages and deelinks that leverages Braze cards

apps/ledger-live-mobile/src/components/RootNavigator/BaseNavigator.tsx

@@ -83,6 +83,7 @@ import { RootDrawer } from "../RootDrawer/RootDrawer";
 import EditTransactionNavigator from "~/families/evm/EditTransactionFlow/EditTransactionNavigator";
 import { DrawerProps } from "../RootDrawer/types";
 import AnalyticsOptInPromptNavigator from "./AnalyticsOptInPromptNavigator";
+import LandingPagesNavigator from "./LandingPagesNavigator";
 import FirmwareUpdateScreen from "~/screens/FirmwareUpdate";
 import EditCurrencyUnits from "~/screens/Settings/CryptoAssets/Currencies/EditCurrencyUnits";
 import WalletSyncNavigator from "LLM/features/WalletSync/Navigator";
@@ -530,6 +531,11 @@ export default function BaseNavigator() {
           options={{ headerShown: false }}
           component={AnalyticsOptInPromptNavigator}
         />
+        <Stack.Screen
+          name={NavigatorName.LandingPages}
+          options={{ headerShown: false }}
+          component={LandingPagesNavigator}
+        />
         <Stack.Screen
           name={ScreenName.FirmwareUpdate}
           component={FirmwareUpdateScreen}

apps/ledger-live-mobile/src/components/RootNavigator/LandingPagesNavigator.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import { useTheme } from "styled-components/native";
+import { ScreenName } from "~/const";
+import { getStackNavigatorConfig } from "~/navigation/navigatorConfig";
+import { LandingPagesNavigatorParamList } from "./types/LandingPagesNavigator";
+import GenericLandingPage from "~/newArch/features/LandingPages/screens/GenericLandingPage";
+import { NavigationHeaderCloseButton } from "../NavigationHeaderCloseButton";
+
+const Stack = createStackNavigator<LandingPagesNavigatorParamList>();
+
+export default function LandingPagesNavigator() {
+  const { colors } = useTheme();
+  const stackNavigationConfig = useMemo(() => getStackNavigatorConfig(colors), [colors]);
+
+  const navigationOptions = {
+    title: "",
+    headerLeft: () => null,
+    headerRight: () => <NavigationHeaderCloseButton />,
+  };
+
+  return (
+    <Stack.Navigator screenOptions={stackNavigationConfig}>
+      <Stack.Screen
+        name={ScreenName.GenericLandingPage}
+        component={GenericLandingPage}
+        options={navigationOptions}
+      />
+    </Stack.Navigator>
+  );
+}

apps/ledger-live-mobile/src/components/RootNavigator/types/BaseNavigator.ts

@@ -70,6 +70,7 @@ import type { NoFundsNavigatorParamList } from "./NoFundsNavigator";
 import type { StakeNavigatorParamList } from "./StakeNavigator";
 import type { ExploreTabNavigatorStackParamList } from "./ExploreTabNavigator";
 import { AnalyticsOptInPromptNavigatorParamList } from "./AnalyticsOptInPromptNavigator";
+import { LandingPagesNavigatorParamList } from "./LandingPagesNavigator";
 
 export type NavigateInput<
   ParamList extends ParamListBase = ParamListBase,
@@ -308,4 +309,5 @@ export type BaseNavigatorStackParamList = {
     onBackFromUpdate: FirmwareUpdateProps["onBackFromUpdate"];
     isBeforeOnboarding?: boolean;
   };
+  [NavigatorName.LandingPages]: NavigatorScreenParams<LandingPagesNavigatorParamList>;
 };

apps/ledger-live-mobile/src/components/RootNavigator/types/LandingPagesNavigator.ts

@@ -0,0 +1,6 @@
+import { ScreenName } from "~/const";
+import { LandingPageUseCase } from "~/dynamicContent/types";
+
+export type LandingPagesNavigatorParamList = {
+  [ScreenName.GenericLandingPage]: { useCase: LandingPageUseCase };
+};

apps/ledger-live-mobile/src/const/navigation.ts

@@ -509,6 +509,7 @@ export enum ScreenName {
 
   WalletSyncActivationSettings = "WalletSyncActivationSettings",
   MockedAddAssetButton = "MockedAddAssetButton",
+  GenericLandingPage = "GenericLandingPage",
 }
 
 export enum NavigatorName {
@@ -618,4 +619,5 @@ export enum NavigatorName {
 
   AnalyticsOptInPrompt = "AnalyticsOptInPrompt",
   WalletSyncActivationSettings = "WalletSyncActivationSettings",
+  LandingPages = "LandingPages",
 }

apps/ledger-live-mobile/src/dynamicContent/ContentCardsLocation.tsx

@@ -3,7 +3,7 @@ import { FlatList, ListRenderItem } from "react-native";
 import { Flex } from "@ledgerhq/native-ui";
 import type { FlexBoxProps } from "@ledgerhq/native-ui/components/Layout/Flex/index";
 import useDynamicContent from "./useDynamicContent";
-import { BrazeContentCard, CategoryContentCard, ContentCardLocation } from "./types";
+import { AllLocations, BrazeContentCard, CategoryContentCard } from "./types";
 import ContentCardsCategory from "./ContentCardsCategory";
 import { FeatureToggle } from "@ledgerhq/live-common/featureFlags/index";
 import { filterCategoriesByLocation, formatCategories } from "./utils";
@@ -13,15 +13,15 @@ const Category: ListRenderItem<CategoriesWithCards> = ({ item }) => (
 );
 
 type Props = FlexBoxProps & {
-  locationId: ContentCardLocation;
+  locationId: AllLocations;
 };
 
 type CategoriesWithCards = {
   category: CategoryContentCard;
   cards: BrazeContentCard[];
 };
 
-const ContentCardsLocation = ({ locationId, ...containerProps }: Props) => {
+const ContentCardsLocationComponent = ({ locationId, ...containerProps }: Props) => {
   const { categoriesCards, mobileCards } = useDynamicContent();
 
   const categoriesToDisplay = filterCategoriesByLocation(categoriesCards, locationId);
@@ -42,10 +42,10 @@ const ContentCardsLocation = ({ locationId, ...containerProps }: Props) => {
   );
 };
 
-const ContentCardsLocationFeatureFlagged = (props: Props) => (
+const ContentCardsLocation = (props: Props) => (
   <FeatureToggle featureId="flexibleContentCards">
-    <ContentCardsLocation {...props} />
+    <ContentCardsLocationComponent {...props} />
   </FeatureToggle>
 );
 
-export default ContentCardsLocationFeatureFlagged;
+export default ContentCardsLocation;

apps/ledger-live-mobile/src/dynamicContent/types.ts

@@ -17,6 +17,24 @@ enum ContentCardsLayout {
   grid = "grid",
 }
 
+enum LandingPageUseCase {
+  LP_Recover = "LP_Recover",
+  LP_Buy = "LP_Buy",
+  LP_Receive = "LP_Receive",
+  LP_Swap = "LP_Swap",
+  LP_Stake = "LP_Stake",
+  LP_Earn = "LP_Earn",
+  LP_Referral = "LP_Referral",
+  LP_Shop = "LP_Shop",
+  LP_Website_Promo = "LP_Website_Promo",
+  LP_Discover_1 = "LP_Discover_1",
+  LP_Discover_2 = "LP_Discover_2",
+  LP_Discover_3 = "LP_Discover_3",
+  LP_Wallet_Connect = "LP_Wallet_Connect",
+  LP_Security_Key = "LP_Security_Key",
+  LP_Generic = "LP_Generic",
+}
+
 enum ContentCardLocation {
   TopWallet = "top_wallet",
   Wallet = "wallet",
@@ -26,6 +44,8 @@ enum ContentCardLocation {
   NotificationCenter = "notification_center",
 }
 
+type AllLocations = ContentCardLocation | LandingPageUseCase;
+
 enum Background {
   purple = "purple",
   red = "red",
@@ -34,7 +54,7 @@ enum Background {
 type ContentCardCommonProperties = {
   id: string;
   categoryId?: string;
-  location?: ContentCardLocation;
+  location?: AllLocations;
   createdAt: number;
   viewed: boolean;
   order?: number;
@@ -139,5 +159,12 @@ export type {
   VerticalContentCard,
   BrazeContentCard,
   AnyContentCard,
+  AllLocations,
+};
+export {
+  ContentCardLocation,
+  LandingPageUseCase,
+  Background,
+  ContentCardsLayout,
+  ContentCardsType,
 };
-export { ContentCardLocation, Background, ContentCardsLayout, ContentCardsType };

apps/ledger-live-mobile/src/dynamicContent/utils.tsx

@@ -15,6 +15,7 @@ import {
   ContentCardsLayout,
   VerticalContentCard,
   HeroContentCard,
+  AllLocations,
 } from "~/dynamicContent/types";
 
 export const getMobileContentCards = (array: BrazeContentCard[]) =>
@@ -41,7 +42,7 @@ export const compareCards = (a: ContentCardCommonProperties, b: ContentCardCommo
 
 export const filterCategoriesByLocation = (
   categories: CategoryContentCard[],
-  locationId: ContentCardLocation,
+  locationId: AllLocations,
 ) => {
   const categoriesToDisplay = categories.filter(category => category.location === locationId);
 

apps/ledger-live-mobile/src/navigation/DeeplinksProvider.tsx

@@ -352,6 +352,16 @@ const linkingOptions = () => ({
               [ScreenName.ScanAccounts]: "scan-accounts",
             },
           },
+          [NavigatorName.LandingPages]: {
+            screens: {
+              /**
+               * @params ?useCase: LandingPageUseCase
+               * ie: "ledgerlive://landing-page?useCase=LP_Generic" will open the landing page screen with the use case LP_Generic
+               *
+               */
+              [ScreenName.GenericLandingPage]: "landing-page",
+            },
+          },
         },
       },
     },

apps/ledger-live-mobile/src/newArch/features/LandingPages/screens/GenericLandingPage/index.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from "react";
+import { Flex } from "@ledgerhq/native-ui";
+import { LandingPagesNavigatorParamList } from "~/components/RootNavigator/types/LandingPagesNavigator";
+import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/types/helpers";
+import { ScreenName } from "~/const";
+import ContentCardsLocation from "~/dynamicContent/ContentCardsLocation";
+import { TrackScreen } from "~/analytics";
+import { LandingPageUseCase } from "~/dynamicContent/types";
+import useDynamicContent from "~/dynamicContent/useDynamicContent";
+import { filterCategoriesByLocation } from "~/dynamicContent/utils";
+
+type NavigationProps = BaseComposite<
+  StackNavigatorProps<LandingPagesNavigatorParamList, ScreenName.GenericLandingPage>
+>;
+
+const GenericLandingPage = (props: NavigationProps) => {
+  const useCase = props.route.params?.useCase;
+  const { categoriesCards } = useDynamicContent();
+
+  useEffect(() => {
+    if (!useCase || !Object.values(LandingPageUseCase).includes(useCase)) {
+      props.navigation.goBack();
+    }
+    const categoriesToDisplay = filterCategoriesByLocation(categoriesCards, useCase);
+    if (categoriesToDisplay.length === 0) {
+      props.navigation.goBack();
+    }
+  }, [categoriesCards, props.navigation, useCase]);
+
+  return (
+    <Flex>
+      <TrackScreen name="Landing Page" useCase={useCase} />
+      <ContentCardsLocation locationId={props.route.params?.useCase} />
+    </Flex>
+  );
+};
+
+export default GenericLandingPage;