Terms of use update popup (#2442)

* Add terms of use update pop-up

* Put text in proper translation file

* Remove useless logger

* Update terms of use

* Make the ToU update popup blocking for the user

* Remove old localized ToU from the repository

* Update settings ToU entry to open ToU in browser

* Remove old ToU implementation

Co-authored-by: Valentin D. Pinkman <valentin.d.pinkman@hey.com>

src/components/CheckTermOfUseUpdate.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode, useCallback } from "react";
+import { Linking } from "react-native";
+import { useTranslation } from "react-i18next";
+import { BottomDrawer, Flex, Icons, Link, Text } from "@ledgerhq/native-ui";
+import styled from "styled-components/native";
+
+import { useLocalizedTermsUrl, useTermsAccept } from "../logic/terms";
+import Button from "./Button";
+import Alert from "./Alert";
+
+const Description = styled(Text).attrs(() => ({
+  color: "neutral.c70",
+}))``;
+
+const Divider = styled(Flex).attrs(() => ({
+  my: 4,
+  height: 1,
+  backgroundColor: "neutral.c40",
+}))``;
+
+const Update = ({ children }: { children: ReactNode }) => (
+  <Flex flexDirection="row">
+    <Description mr={2}>{"•"}</Description>
+    <Description>{children}</Description>
+  </Flex>
+);
+
+const CheckTermOfUseUpdateModal = () => {
+  const { t } = useTranslation();
+  const [accepted, accept] = useTermsAccept();
+  const termsUrl = useLocalizedTermsUrl();
+
+  const handleLink = useCallback(() => {
+    Linking.openURL(termsUrl);
+  }, [termsUrl]);
+
+  return (
+    <BottomDrawer
+      id="TermOfUseUpdate"
+      noCloseButton={true}
+      title={t("updatedTerms.title")}
+      isOpen={!accepted}
+    >
+      <Flex mb={6}>
+        <Description>{t("updatedTerms.body.intro")}</Description>
+        <Flex my={4}>
+          <Update>{t("updatedTerms.body.bulletPoints.0")}</Update>
+          <Update>{t("updatedTerms.body.bulletPoints.1")}</Update>
+          <Update>{t("updatedTerms.body.bulletPoints.2")}</Update>
+        </Flex>
+        <Description>{t("updatedTerms.body.agreement")}</Description>
+      </Flex>
+      <Alert type="help" noIcon>
+        <Link type="color" onPress={handleLink} Icon={Icons.ExternalLinkMedium}>
+          {t("updatedTerms.link")}
+        </Link>
+      </Alert>
+      <Divider />
+      <Button type="main" outline={false} onPress={accept}>
+        {t("updatedTerms.cta")}
+      </Button>
+    </BottomDrawer>
+  );
+};
+
+export default CheckTermOfUseUpdateModal;

src/locales/en/common.json

@@ -3931,6 +3931,20 @@
     "service": "Terms of service",
     "subTitle": "Please take some time to review our Terms of service and Privacy Policy"
   },
+  "updatedTerms": {
+    "title": "Terms of Use Update",
+    "body": {
+      "intro": "Hi! We've updated our Ledger Live Terms of Use with the aim to make them clearer and to reflect Ledger Live's newly available services and features. Key updates are focused on:",
+      "bulletPoints": [
+        "Clarifying what services are available and how they work",
+        "Explaining how fees for Services work",
+        "Improving our notification process to make sure that you are properly informed of any new changes to our Terms of Use"
+      ],
+      "agreement": "By clicking on \"Continue\" you agree that you have read and accept the Terms of Use below."
+    },
+    "link": "Terms of Use",
+    "cta": "Continue"
+  },
   "exchange": {
     "buy": {
       "tabTitle": "Buy",