Feat/fat 533 - New device selection product feedback (#1720)

* FAT-533 Update wording for 'keep device nearby' string

* FAT-533 Invert order of set up new vs connect existing

* FAT-533 Move directly to device purchase iframe

* Add margin to buy button in MyLedger (#1638)

* improve changeset

* Changesets

Co-authored-by: Gabriel Soares <[email protected]>
Co-authored-by: Pierre-Louis Crescitz <[email protected]>

.changeset/breezy-pugs-tap.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+New device selection screen: Buy Ledger button direct redirection

.changeset/healthy-rivers-think.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+New device selection screen: invert 2 options "Connect an existing Ledger" and "Set up a new Ledger"

.changeset/heavy-ducks-hide.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+New device selection screen: pixel polish

.changeset/honest-tools-smile.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+New device selection screen: change banner wording

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

@@ -1,4 +1,5 @@
 import React, { useMemo, useCallback, useEffect, useState } from "react";
+import { Linking } from "react-native";
 import { Trans, useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { Platform } from "react-native";
@@ -7,7 +8,9 @@ import { CompositeScreenProps, useNavigation } from "@react-navigation/native";
 import { Text, Flex, Icons, BottomDrawer } from "@ledgerhq/native-ui";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { useBleDevicesScanning } from "@ledgerhq/live-common/ble/hooks/useBleDevicesScanning";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
+import { urls } from "../../config/urls";
 import TransportBLE from "../../react-native-hw-transport-ble";
 import { track } from "../../analytics";
 import { NavigatorName, ScreenName } from "../../const";
@@ -49,6 +52,7 @@ export default function SelectDevice({ onSelect }: Props) {
 
   const { t } = useTranslation();
 
+  const buyDeviceFromLive = useFeature("buyDeviceFromLive");
   const knownDevices = useSelector(knownDevicesSelector);
   const navigation = useNavigation<Navigation["navigation"]>();
   const { scannedDevices } = useBleDevicesScanning({
@@ -143,10 +147,14 @@ export default function SelectDevice({ onSelect }: Props) {
   const onAddNewPress = useCallback(() => setIsAddNewDrawerOpen(true), []);
 
   const onBuyDevicePress = useCallback(() => {
-    navigation.navigate(NavigatorName.BuyDevice, {
-      screen: ScreenName.GetDevice,
-    });
-  }, [navigation]);
+    if (buyDeviceFromLive?.enabled) {
+      navigation.navigate(NavigatorName.BuyDevice, {
+        screen: ScreenName.PurchaseDevice,
+      });
+    } else {
+      Linking.openURL(urls.buyNanoX);
+    }
+  }, [navigation, buyDeviceFromLive?.enabled]);
 
   const onPairDevices = useCallback(() => {
     const navigateInput: NavigateInput<
@@ -235,11 +243,9 @@ export default function SelectDevice({ onSelect }: Props) {
           </Touchable>
         )}
       </Flex>
-
       {deviceList.length === 0 && Platform.OS === "android" && (
         <Flex
           p={5}
-          mb={8}
           borderRadius={5}
           alignItems="center"
           flexDirection="row"
@@ -259,8 +265,7 @@ export default function SelectDevice({ onSelect }: Props) {
           </Text>
         </Flex>
       )}
-
-      <Flex alignItems="center">
+      <Flex alignItems="center" mt={8}>
         <Touchable onPress={onBuyDevicePress}>
           <Text color="primary.c90">
             <Trans i18nKey="manager.selectDevice.buyDeviceCTA" />
@@ -272,15 +277,21 @@ export default function SelectDevice({ onSelect }: Props) {
         onClose={() => setIsAddNewDrawerOpen(false)}
       >
         <Flex>
-          <Touchable onPress={onPairDevices}>
-            <Flex backgroundColor="neutral.c30" px={6} py={7} borderRadius={8}>
+          <Touchable onPress={onSetUpNewDevice}>
+            <Flex
+              backgroundColor="neutral.c30"
+              mb={4}
+              px={6}
+              py={7}
+              borderRadius={8}
+            >
               <Flex flexDirection="row">
                 <Flex flexShrink={1}>
                   <Text variant="large" fontWeight="semiBold" mb={3}>
-                    {t("manager.selectDevice.connectExistingLedger")}
+                    {t("manager.selectDevice.setUpNewLedger")}
                   </Text>
                   <Text variant="paragraph" color="neutral.c80">
-                    {t("manager.selectDevice.connectExistingLedgerDescription")}
+                    {t("manager.selectDevice.setUpNewLedgerDescription")}
                   </Text>
                 </Flex>
                 <Flex justifyContent="center" alignItems="center" ml={5} mr={2}>
@@ -289,27 +300,21 @@ export default function SelectDevice({ onSelect }: Props) {
                     backgroundColor="primary.c20"
                     p={4}
                   >
-                    <Icons.BluetoothMedium color="primary.c80" size={24} />
+                    <Icons.PlusMedium color="primary.c80" size={24} />
                   </Flex>
                 </Flex>
               </Flex>
             </Flex>
           </Touchable>
-          <Touchable onPress={onSetUpNewDevice}>
-            <Flex
-              backgroundColor="neutral.c30"
-              mt={4}
-              px={6}
-              py={7}
-              borderRadius={8}
-            >
+          <Touchable onPress={onPairDevices}>
+            <Flex backgroundColor="neutral.c30" px={6} py={7} borderRadius={8}>
               <Flex flexDirection="row">
                 <Flex flexShrink={1}>
                   <Text variant="large" fontWeight="semiBold" mb={3}>
-                    {t("manager.selectDevice.setUpNewLedger")}
+                    {t("manager.selectDevice.connectExistingLedger")}
                   </Text>
                   <Text variant="paragraph" color="neutral.c80">
-                    {t("manager.selectDevice.setUpNewLedgerDescription")}
+                    {t("manager.selectDevice.connectExistingLedgerDescription")}
                   </Text>
                 </Flex>
                 <Flex justifyContent="center" alignItems="center" ml={5} mr={2}>
@@ -318,7 +323,7 @@ export default function SelectDevice({ onSelect }: Props) {
                     backgroundColor="primary.c20"
                     p={4}
                   >
-                    <Icons.PlusMedium color="primary.c80" size={24} />
+                    <Icons.BluetoothMedium color="primary.c80" size={24} />
                   </Flex>
                 </Flex>
               </Flex>

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

@@ -3466,7 +3466,7 @@
     }
   },
   "DeviceAction": {
-    "stayInTheAppPlz": "Stay in the Ledger Live App and keep your Nano X nearby",
+    "stayInTheAppPlz": "Stay in the Ledger Live app and keep your Ledger nearby.",
     "allowAppPermission": "Open the {{wording}} app on your device",
     "allowAppPermissionSubtitleToken": "to manage your {{token}} tokens",
     "allowManagerPermission": "Allow {{wording}} on your device",