FAT-128 FAT-120 FAT-121 Prompt language change after live language ch…

…ange (#1531)

.changeset/mighty-seahorses-chew.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Adds prompts suggesting the user to update their device language according to a few set of conditions

apps/ledger-live-desktop/src/config/languages.ts

@@ -0,0 +1,89 @@
+import { getEnv } from "@ledgerhq/live-common/env";
+import { Language } from "@ledgerhq/types-live";
+
+export type Locale =
+  | "de"
+  | "el"
+  | "en"
+  | "es"
+  | "fi"
+  | "fr"
+  | "hu"
+  | "it"
+  | "ja"
+  | "ko"
+  | "nl"
+  | "no"
+  | "pl"
+  | "pt"
+  | "ru"
+  | "sr"
+  | "sv"
+  | "tr"
+  | "zh";
+
+/**
+ * This maps the supported locales from live to theiur equivalent languages on the device.
+ * It is to be used for suggesting the user to change their device language according to their Live
+ * language.
+ */
+export const localeIdToDeviceLanguage: { [key in Locale]?: Language } = {
+  en: "english",
+  fr: "french",
+  es: "spanish",
+};
+
+export const allLanguages: Locale[] = [
+  "de",
+  "el",
+  "en",
+  "es",
+  "fi",
+  "fr",
+  "hu",
+  "it",
+  "ja",
+  "ko",
+  "nl",
+  "no",
+  "pl",
+  "pt",
+  "ru",
+  "sr",
+  "sv",
+  "tr",
+  "zh",
+];
+
+export const prodStableLanguages: Locale[] = ["en", "fr", "es", "ru", "zh", "de", "tr", "ja", "ko"];
+
+/**
+ * List of languages that should be prompted to existing users once if they are
+ * using LL in english.
+ * */
+export const pushedLanguages: Locale[] = ["fr", "es", "ru", "zh", "de", "tr", "ja", "ko", "pt"];
+
+export const getLanguages = () =>
+  getEnv("EXPERIMENTAL_LANGUAGES") ? allLanguages : prodStableLanguages;
+
+export const defaultLocaleForLanguage = {
+  de: "de-DE",
+  el: "el-GR",
+  en: "en-US",
+  es: "es-ES",
+  fi: "fi-FI",
+  fr: "fr-FR",
+  hu: "hu-HU",
+  it: "it-IT",
+  ja: "ja-JP",
+  ko: "ko-KR",
+  nl: "nl-NL",
+  no: "no-NO",
+  pl: "pl-PL",
+  pt: "pt-PT",
+  ru: "ru-RU",
+  sr: "sr-SR",
+  sv: "sv-SV",
+  tr: "tr-TR",
+  zh: "zh-CN",
+};

apps/ledger-live-desktop/src/internal/commands/getDeviceInfo.ts

@@ -0,0 +1,13 @@
+import { from, Observable } from "rxjs";
+import { withDevice } from "@ledgerhq/live-common/hw/deviceAccess";
+import { DeviceInfo } from "@ledgerhq/types-live";
+import getDeviceInfo from "@ledgerhq/live-common/hw/getDeviceInfo";
+
+type Input = {
+  deviceId: string;
+};
+
+const cmd = ({ deviceId }: Input): Observable<DeviceInfo> =>
+  withDevice(deviceId)(transport => from(getDeviceInfo(transport)));
+
+export default cmd;

apps/ledger-live-desktop/src/internal/commands/index.js

@@ -26,6 +26,7 @@ import getTransactionId from "./getTransactionId";
 import scanDescriptors from "./scanDescriptors";
 import installLanguage from "./installLanguage";
 import getAppAndVersion from "./getAppAndVersion";
+import getDeviceInfo from "./getDeviceInfo";
 import { commands as bridgeProxyCommands } from "~/renderer/bridge/proxy-commands";
 
 export const commandsById = {
@@ -57,6 +58,7 @@ export const commandsById = {
   installLanguage,
   signMessage,
   getAppAndVersion,
+  getDeviceInfo,
 };
 
 export type Commands = typeof commandsById;

apps/ledger-live-desktop/src/renderer/actions/settings.js

@@ -175,6 +175,11 @@ export const setLastSeenDeviceInfo = ({
   payload: { lastSeenDevice, latestFirmware },
 });
 
+export const setLastSeenDevice = ({ deviceInfo }: { deviceInfo: DeviceInfo }) => ({
+  type: "LAST_SEEN_DEVICE",
+  payload: { deviceInfo },
+});
+
 export const setDeepLinkUrl = (url: ?string) => ({
   type: "SET_DEEPLINK_URL",
   payload: url,

apps/ledger-live-desktop/src/renderer/analytics/segment.js

@@ -15,6 +15,7 @@ import {
   languageSelector,
 } from "~/renderer/reducers/settings";
 import type { State } from "~/renderer/reducers";
+import { idsToLanguage } from "@ledgerhq/types-live";
 
 invariant(typeof window !== "undefined", "analytics/segment must be called on renderer thread");
 
@@ -45,6 +46,10 @@ const extraProperties = store => {
     ? {
         modelId: device.modelId,
         deviceVersion: device.deviceInfo.version,
+        deviceLanguage:
+          device.deviceInfo?.languageId !== undefined
+            ? idsToLanguage[device.deviceInfo.languageId]
+            : undefined,
         appLength: device.apps?.length,
       }
     : {};

apps/ledger-live-desktop/src/renderer/components/ChangeDeviceLanguageAction.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+import { command } from "~/renderer/commands";
+import { createAction } from "@ledgerhq/live-common/hw/actions/installLanguage";
+import { getEnv } from "@ledgerhq/live-common/env";
+import { mockedEventEmitter } from "~/renderer/components/debug/DebugMock";
+import DeviceAction from "./DeviceAction";
+import { Language } from "@ledgerhq/types-live";
+import { useTranslation } from "react-i18next";
+import { BoxedIcon, Flex, Icons, Text } from "@ledgerhq/react-ui";
+import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";
+
+const installLanguageExec = command("installLanguage");
+const action = createAction(getEnv("MOCK") ? mockedEventEmitter : installLanguageExec);
+
+const DeviceLanguageInstalled = ({ language }: { language: Language }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex
+      flex={1}
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      data-test-id="language-installed"
+    >
+      <BoxedIcon Icon={Icons.CheckAloneMedium} iconColor="success.c100" size={64} iconSize={24} />
+      <Text variant="large" alignSelf="stretch" mx={16} mt={10} textAlign="center" fontSize={24}>
+        {t("deviceLocalization.languageInstalled", {
+          language: t(`deviceLocalization.languages.${language}`),
+        })}
+      </Text>
+    </Flex>
+  );
+};
+
+type Props = {
+  language: Language;
+  onResult?: () => void;
+  onError?: (error: Error) => void;
+  onSuccess: () => void;
+};
+
+const ChangeDeviceLanguageAction: React.FC<Props> = ({ language, onError, onSuccess }) => {
+  return (
+    <DeviceAction
+      action={action}
+      request={language}
+      onResult={onSuccess}
+      Result={() => <DeviceLanguageInstalled language={language} />}
+      onError={onError}
+    />
+  );
+};
+
+export default withV3StyleProvider(ChangeDeviceLanguageAction);

apps/ledger-live-desktop/src/renderer/components/ChangeDeviceLanguagePrompt.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { withV3StyleProvider } from "../styles/StyleProviderV3";
+import { Flex, Text, Button, Divider } from "@ledgerhq/react-ui";
+
+import { useTranslation } from "react-i18next";
+import { DeviceModelId } from "@ledgerhq/devices";
+import DeviceIllustration from "./DeviceIllustration";
+
+type Props = {
+  onSkip: () => void;
+  onConfirm: () => void;
+  descriptionWording: string;
+  titleWording: string;
+  deviceModelId: DeviceModelId;
+};
+
+const ChangeDeviceLanguagePrompt: React.FC<Props> = ({
+  onSkip,
+  onConfirm,
+  titleWording,
+  descriptionWording,
+  deviceModelId,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDirection="column" flex={1} alignSelf="stretch">
+      <Flex alignItems="center" justifyContent="center" flexDirection="column" flex={1} px={12}>
+        <DeviceIllustration width={251} height={200} deviceId={deviceModelId} />
+        <Text variant="large" fontSize={20} mt={12}>
+          {titleWording}
+        </Text>
+        <Text variant="body" textAlign="center" color="neutral.c80" mt={2}>
+          {descriptionWording}
+        </Text>
+      </Flex>
+      <Divider variant="light" />
+      <Flex alignSelf="flex-end" justifySelf="flex-end" columnGap={5} py={8} px={12}>
+        <Button onClick={onSkip}>{t("common.cancel")}</Button>
+        <Button data-test-id="install-language-button" variant="main" onClick={onConfirm}>
+          {t("deviceLocalization.changeLanguage")}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default withV3StyleProvider(ChangeDeviceLanguagePrompt);

apps/ledger-live-desktop/src/renderer/components/DeviceAction/index.jsx

@@ -42,6 +42,7 @@ type OwnProps<R, H, P> = {
   overridesPreferredDeviceModel?: DeviceModelId,
   Result?: React$ComponentType<P>,
   onResult?: P => void,
+  onError?: () => void,
   action: Action<R, H, P>,
   request: R,
 };
@@ -78,6 +79,7 @@ const DeviceAction = <R, H, P>({
   request,
   Result,
   onResult,
+  onError,
   // $FlowFixMe god of flow help me
   reduxDevice,
   overridesPreferredDeviceModel,
@@ -138,6 +140,12 @@ const DeviceAction = <R, H, P>({
 
   const { t } = useTranslation();
 
+  useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+
   useEffect(() => {
     if (deviceInfo) {
       const lastSeenDevice = {

apps/ledger-live-desktop/src/renderer/components/DeviceAction/rendering.tsx

@@ -331,28 +331,26 @@ export const InstallingApp = ({
   );
 };
 
-export const renderInstallingLanguage = withV3StyleProvider(
-  ({ progress, t }: { progress: number; t: TFunction }) => {
-    const cleanProgress = Math.round(progress * 100);
-
-    return (
-      <Flex
-        flex={1}
-        alignItems="center"
-        justifyContent="center"
-        flexDirection="column"
-        data-test-id="installing-language-progress"
-      >
-        <ProgressWrapper>
-          <ProgressLoader progress={cleanProgress} />
-        </ProgressWrapper>
-        <Log extraTextProps={{ fontSize: 20 }} alignSelf="stretch" mx="115px" mt={30}>
-          {t("deviceLocalization.installingLanguage")}
-        </Log>
-      </Flex>
-    );
-  },
-);
+export const renderInstallingLanguage = ({ progress, t }: { progress: number; t: TFunction }) => {
+  const cleanProgress = Math.round(progress * 100);
+
+  return (
+    <Flex
+      flex={1}
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      data-test-id="installing-language-progress"
+    >
+      <ProgressWrapper>
+        <ProgressLoader progress={cleanProgress} />
+      </ProgressWrapper>
+      <Log extraTextProps={{ fontSize: 20 }} alignSelf="stretch" mx="115px" mt={30}>
+        {t("deviceLocalization.installingLanguage")}
+      </Log>
+    </Flex>
+  );
+};
 
 export const renderListingApps = () => (
   <Wrapper data-test-id="device-action-loader">