feat(llm): postonboarding - added europa support, updated copy, added…

… recover entry point

.changeset/beige-otters-cheat.md

@@ -0,0 +1,6 @@
+---
+"@ledgerhq/types-live": minor
+"live-mobile": minor
+---
+
+LLM - Added europa support to post onboarding

apps/ledger-live-mobile/src/components/PostOnboarding/PostOnboardingActionRow.tsx

@@ -10,7 +10,7 @@ import { PostOnboardingNavigatorParamList } from "../RootNavigator/types/PostOnb
 import { DeviceModelId } from "@ledgerhq/types-devices";
 
 export type Props = PostOnboardingAction &
-  PostOnboardingActionState & { deviceModelId: DeviceModelId };
+  PostOnboardingActionState & { deviceModelId: DeviceModelId; productName: string };
 
 const PostOnboardingActionRow: React.FC<Props> = props => {
   const {
@@ -23,6 +23,7 @@ const PostOnboardingActionRow: React.FC<Props> = props => {
     disabled,
     buttonLabelForAnalyticsEvent,
     deviceModelId,
+    productName,
   } = props;
   const { t } = useTranslation();
   const navigation =
@@ -34,7 +35,10 @@ const PostOnboardingActionRow: React.FC<Props> = props => {
     if ("getNavigationParams" in props) {
       navigation.navigate(...props.getNavigationParams({ deviceModelId }));
       buttonLabelForAnalyticsEvent &&
-        track("button_clicked", { button: buttonLabelForAnalyticsEvent });
+        track("button_clicked", {
+          button: buttonLabelForAnalyticsEvent,
+          deviceModelId,
+        });
     }
   };
 
@@ -48,7 +52,7 @@ const PostOnboardingActionRow: React.FC<Props> = props => {
         opacity={disabled ? 0.5 : 1}
       >
         <Flex flexDirection="row" alignItems="flex-start" flexShrink={1}>
-          <Icon size={"M"} color={completed || disabled ? "neutral.c70" : "primary.c80"} />
+          <Icon size={"M"} color={"primary.c80"} />
           <Flex ml={6} flexDirection="column" justifyContent="center" flex={1}>
             <Flex flexDirection="row" alignItems="center">
               <Text
@@ -66,7 +70,7 @@ const PostOnboardingActionRow: React.FC<Props> = props => {
             </Flex>
             {completed ? null : (
               <Text variant="body" fontWeight="medium" color="neutral.c70">
-                {t(description)}
+                {t(description, { productName })}
               </Text>
             )}
           </Flex>

apps/ledger-live-mobile/src/components/PostOnboarding/PostOnboardingEntryPointCard.tsx

@@ -9,6 +9,7 @@ import { postOnboardingDeviceModelIdSelector } from "@ledgerhq/live-common/postO
 import { useNavigateToPostOnboardingHubCallback } from "~/logic/postOnboarding/useNavigateToPostOnboardingHubCallback";
 import Touchable from "../Touchable";
 import Button from "../wrappedUi/Button";
+import { track } from "~/analytics";
 
 const PostOnboardingEntryPointCard: React.FC<Record<string, never>> = () => {
   const { t } = useTranslation();
@@ -18,7 +19,11 @@ const PostOnboardingEntryPointCard: React.FC<Record<string, never>> = () => {
   const openHub = useNavigateToPostOnboardingHubCallback();
   const dismissCard = useCallback(() => {
     dispatch(hidePostOnboardingWalletEntryPoint());
-  }, [dispatch]);
+    track("button_clicked", {
+      button: "Dismiss post onboarding",
+      deviceModelId,
+    });
+  }, [dispatch, deviceModelId]);
   const visible = usePostOnboardingEntryPointVisibleOnWallet();
   if (!visible) return null;
   return (
@@ -43,7 +48,7 @@ const PostOnboardingEntryPointCard: React.FC<Record<string, never>> = () => {
           outline
           onPress={() => openHub()}
           event="button_clicked"
-          eventProperties={{ button: "Access" }}
+          eventProperties={{ button: "Access post onboarding", deviceModelId }}
         >
           {t("postOnboarding.entryPointCard.buttonLabel")}
         </Button>

apps/ledger-live-mobile/src/components/SelectDevice2/index.tsx

@@ -327,7 +327,7 @@ export default function SelectDevice({
       ) : (
         <Flex flex={1}>
           <ScrollContainer
-            my={4}
+            mb={4}
             contentContainerStyle={{
               flexGrow: 1,
               justifyContent: "space-between",
@@ -425,7 +425,7 @@ export default function SelectDevice({
                 {children}
               </Flex>
             </Flex>
-            <Flex alignItems="center" mt={10} mb={8}>
+            <Flex alignItems="center" mt={10}>
               <BuyDeviceCTA />
             </Flex>
           </ScrollContainer>

apps/ledger-live-mobile/src/locales/en/common.json

@@ -6379,34 +6379,40 @@
   },
   "postOnboarding": {
     "hub": {
-      "title": "Next up, use your {{productName}} to:",
-      "allDoneTitle": "and that’s a wrap!",
+      "title": "Next up, use your {{productName}} to...",
+      "allDoneTitle": "You're all set! Keep going and explore your portfolio",
       "skip": "I’ll do this later",
-      "viewWallet": "View my wallet"
+      "viewWallet": "Explore my portfolio"
     },
     "entryPointCard": {
       "title": "What's next for your {{productName}}?",
-      "description": "Claim the Infinity NFT, customize its lock screen, or transfer your assets from other exchanges.",
+      "description": "Transfer your assets from any exchange or wallet, buy crypto, customize its lock screen, or subscribe to Ledger Recover.",
       "buttonLabel": "See what's next"
     },
     "actions": {
-      "customImage": {
-        "title": "Set a lock screen picture",
-        "titleCompleted": "Lock screen picture set",
-        "description": "Choose any digital art or picture to set as the lock screen.",
-        "popupLabel": "Lockscreen set"
-      },
       "assetsTransfer": {
         "title": "Transfer your assets to Ledger",
         "titleCompleted": "Assets transferred to Ledger",
-        "description": "Easily transfer assets from Coinbase or any other exchange or wallet.",
+        "description": "From any exchange or wallet, directly to your Ledger.",
         "popupLabel": "Assets transferred"
       },
       "buyCrypto": {
         "title": "Buy Crypto",
-        "titleCompleted": "Assets transferred to Ledger",
-        "description": "Choose from 500+ coins and the best quotes from buy-providers, tailored to your preferences.",
+        "titleCompleted": "Crypto bought",
+        "description": "Choose from 500+ coins and the best quotes, tailored to your preferences.",
         "popupLabel": "Crypto bought"
+      },
+      "customImage": {
+        "title": "Customize the lock screen",
+        "titleCompleted": "Lock screen customized",
+        "description": "Choose any digital art or picture to set as your {{productName}}'s lock screen.",
+        "popupLabel": "Lock screen customized successfully"
+      },
+      "recover": {
+        "title": "Subscribe to Ledger Recover",
+        "titleCompleted": "Subscribed to Ledger Recover",
+        "description": "Restore access to your wallet without needing your Secret Recovery Phrase.",
+        "popupLabel": "Successfully subscribed to Ledger Recover"
       }
     }
   },

apps/ledger-live-mobile/src/locales/fr/common.json

@@ -6367,7 +6367,7 @@
     "commitRequested" : "C’est parfait ?\nValidez !",
     "confirmPicture" : "Confirmez sur votre {{productName}}",
     "landingPage" : {
-      "title" : "Choisissez une œuvre d’art numérique ou une image.\nPersonnalisez votre Ledger Stax.\nCréez votre style.",
+      "title" : "Choisissez une œuvre d’art numérique ou une image.\nPersonnalisez votre {{productName}}.\nCréez votre style.",
       "choosePicture" : "Choisissez une image"
     },
     "confirmCrop" : "Confirmer le recadrage",

apps/ledger-live-mobile/src/logic/postOnboarding/actions.ts

@@ -6,7 +6,7 @@ export const assetsTransferAction: PostOnboardingAction = {
   id: PostOnboardingActionId.assetsTransfer,
   disabled: false,
   featureFlagId: "postOnboardingAssetsTransfer",
-  Icon: Icons.ArrowDown,
+  Icon: Icons.Lock,
   title: "postOnboarding.actions.assetsTransfer.title",
   titleCompleted: "postOnboarding.actions.assetsTransfer.titleCompleted",
   description: "postOnboarding.actions.assetsTransfer.description",
@@ -26,7 +26,7 @@ export const assetsTransferAction: PostOnboardingAction = {
 export const buyCryptoAction: PostOnboardingAction = {
   id: PostOnboardingActionId.buyCrypto,
   disabled: false,
-  Icon: Icons.Plus,
+  Icon: Icons.Dollar,
   title: "postOnboarding.actions.buyCrypto.title",
   titleCompleted: "postOnboarding.actions.buyCrypto.titleCompleted",
   description: "postOnboarding.actions.buyCrypto.description",
@@ -50,6 +50,7 @@ export const customImageAction: PostOnboardingAction = {
   titleCompleted: "postOnboarding.actions.customImage.titleCompleted",
   description: "postOnboarding.actions.customImage.description",
   actionCompletedPopupLabel: "postOnboarding.actions.customImage.popupLabel",
+  buttonLabelForAnalyticsEvent: "Set lock screen picture",
   getNavigationParams: ({ deviceModelId }) => [
     NavigatorName.CustomImage,
     {
@@ -60,5 +61,24 @@ export const customImageAction: PostOnboardingAction = {
       },
     },
   ],
-  buttonLabelForAnalyticsEvent: "Set lock screen picture",
+};
+
+export const recoverAction: PostOnboardingAction = {
+  id: PostOnboardingActionId.recover,
+  Icon: Icons.ShieldCheck,
+  title: "postOnboarding.actions.recover.title",
+  titleCompleted: "postOnboarding.actions.recover.titleCompleted",
+  description: "postOnboarding.actions.recover.description",
+  actionCompletedPopupLabel: "postOnboarding.actions.recover.popupLabel",
+  buttonLabelForAnalyticsEvent: "Subscribe to Ledger Recover",
+  getNavigationParams: () => [
+    NavigatorName.Base,
+    {
+      screen: ScreenName.Recover,
+      params: {
+        platform: "protect-prod",
+        redirectTo: "upsell",
+      },
+    },
+  ],
 };

apps/ledger-live-mobile/src/logic/postOnboarding/index.tsx

@@ -1,7 +1,7 @@
 import { DeviceModelId } from "@ledgerhq/devices";
 import { PostOnboardingAction, PostOnboardingActionId } from "@ledgerhq/types-live";
-import { claimMock, migrateAssetsMock, personalizeMock } from "./mockActions";
-import { assetsTransferAction, customImageAction, buyCryptoAction } from "./actions";
+import { assetsTransferMock, buyCryptoMock, claimMock, customImageMock, migrateAssetsMock, personalizeMock, recoverMock } from "./mockActions";
+import { assetsTransferAction, customImageAction, buyCryptoAction, recoverAction } from "./actions";
 
 /**
  * All implemented post onboarding actions.
@@ -10,9 +10,14 @@ const postOnboardingActions: Record<PostOnboardingActionId, PostOnboardingAction
   claimMock,
   migrateAssetsMock,
   personalizeMock,
+  assetsTransferMock,
+  buyCryptoMock,
+  customImageMock,
+  recoverMock,
   customImage: customImageAction,
   assetsTransfer: assetsTransferAction,
   buyCrypto: buyCryptoAction,
+  recover: recoverAction,
 };
 
 /**
@@ -30,6 +35,23 @@ const staxPostOnboardingActions: PostOnboardingAction[] = [
   customImageAction,
 ];
 
+/**
+ * Mock of post onboarding actions for DeviceModelId.europa
+ */
+const europaPostOnboardingActionsMock: PostOnboardingAction[] = [
+  assetsTransferMock,
+  buyCryptoMock,
+  customImageMock,
+  recoverMock,
+];
+
+const europaPostOnboardingActions: PostOnboardingAction[] = [
+  assetsTransferAction,
+  buyCryptoAction,
+  customImageAction,
+  recoverAction,
+];
+
 export function getPostOnboardingAction(id: PostOnboardingActionId): PostOnboardingAction {
   return postOnboardingActions[id];
 }
@@ -56,6 +78,9 @@ export function getPostOnboardingActionsForDevice(
     case DeviceModelId.stax:
       if (mock) return staxPostOnboardingActionsMock;
       return staxPostOnboardingActions;
+    case DeviceModelId.europa:
+      if (mock) return europaPostOnboardingActionsMock;
+      return europaPostOnboardingActions;
     default:
       return [];
   }

apps/ledger-live-mobile/src/logic/postOnboarding/mockActions.ts

@@ -60,3 +60,82 @@ export const migrateAssetsMock: PostOnboardingAction = {
     },
   ],
 };
+
+export const assetsTransferMock: PostOnboardingAction = {
+  id: PostOnboardingActionId.assetsTransferMock,
+  disabled: false,
+  featureFlagId: "postOnboardingAssetsTransfer",
+  Icon: Icons.Lock,
+  title: "postOnboarding.actions.assetsTransfer.title",
+  titleCompleted: "postOnboarding.actions.assetsTransfer.titleCompleted",
+  description: "postOnboarding.actions.assetsTransfer.description",
+  actionCompletedPopupLabel: "postOnboarding.actions.assetsTransfer.popupLabel",
+  getNavigationParams: () => [
+    NavigatorName.PostOnboarding,
+    {
+      screen: ScreenName.PostOnboardingMockActionScreen,
+      params: {
+        id: PostOnboardingActionId.assetsTransferMock,
+        title: PostOnboardingActionId.assetsTransferMock,
+      },
+    },
+  ],
+};
+
+export const buyCryptoMock: PostOnboardingAction = {
+  id: PostOnboardingActionId.buyCryptoMock,
+  disabled: false,
+  Icon: Icons.Dollar,
+  title: "postOnboarding.actions.buyCrypto.title",
+  titleCompleted: "postOnboarding.actions.buyCrypto.titleCompleted",
+  description: "postOnboarding.actions.buyCrypto.description",
+  actionCompletedPopupLabel: "postOnboarding.actions.buyCrypto.popupLabel",
+  getNavigationParams: () => [
+    NavigatorName.PostOnboarding,
+    {
+      screen: ScreenName.PostOnboardingMockActionScreen,
+      params: {
+        id: PostOnboardingActionId.buyCryptoMock,
+        title: PostOnboardingActionId.buyCryptoMock,
+      },
+    },
+  ],
+};
+
+export const customImageMock: PostOnboardingAction = {
+  id: PostOnboardingActionId.customImageMock,
+  Icon: Icons.PictureImage,
+  title: "postOnboarding.actions.customImage.title",
+  titleCompleted: "postOnboarding.actions.customImage.titleCompleted",
+  description: "postOnboarding.actions.customImage.description",
+  actionCompletedPopupLabel: "postOnboarding.actions.customImage.popupLabel",
+  getNavigationParams: () => [
+    NavigatorName.PostOnboarding,
+    {
+      screen: ScreenName.PostOnboardingMockActionScreen,
+      params: {
+        id: PostOnboardingActionId.customImageMock,
+        title: PostOnboardingActionId.customImageMock,
+      },
+    },
+  ],
+};
+
+export const recoverMock: PostOnboardingAction = {
+  id: PostOnboardingActionId.recoverMock,
+  Icon: Icons.ShieldCheck,
+  title: "postOnboarding.actions.recover.title",
+  titleCompleted: "postOnboarding.actions.recover.titleCompleted",
+  description: "postOnboarding.actions.recover.description",
+  actionCompletedPopupLabel: "postOnboarding.actions.recover.popupLabel",
+  getNavigationParams: () => [
+    NavigatorName.PostOnboarding,
+    {
+      screen: ScreenName.PostOnboardingMockActionScreen,
+      params: {
+        id: PostOnboardingActionId.recoverMock,
+        title: PostOnboardingActionId.recoverMock,
+      },
+    },
+  ],
+};

apps/ledger-live-mobile/src/screens/MyLedgerChooseDevice/index.tsx

@@ -122,7 +122,7 @@ const ChooseDevice: React.FC<ChooseDeviceProps> = ({ isFocused }) => {
           </Text>
         </Flex>
       ) : null}
-      <Flex flex={1}>
+      <Flex flex={1} mb={8}>
         <SelectDevice2
           onSelect={onSelectDevice}
           stopBleScanning={!!device}

apps/ledger-live-mobile/src/screens/PostOnboarding/PostOnboardingDebugScreen.tsx

@@ -35,6 +35,16 @@ export default () => {
         desc="Pressing this should trigger navigation to the post onboarding hub populated with a list of actions."
         onPress={() => handleInitPostOnboardingHub(DeviceModelId.stax, false)}
       />
+      <SettingsRow
+        title="Start (mock) post onboarding for europa"
+        desc="Pressing this should trigger navigation to the post onboarding hub populated with a list of actions."
+        onPress={() => handleInitPostOnboardingHub(DeviceModelId.europa, true)}
+      />
+      <SettingsRow
+        title="Start post onboarding for europa"
+        desc="Pressing this should trigger navigation to the post onboarding hub populated with a list of actions."
+        onPress={() => handleInitPostOnboardingHub(DeviceModelId.europa, false)}
+      />
       <SettingsRow
         title="Start (mock) post onboarding for nanoX"
         desc="Pressing this should not do anything. (no actions configured for this device)."