Merge pull request #6656 from LedgerHQ/feat/lld-europa-postonboarding

✨ LLD - Europa PostOnboarding

.changeset/thin-ducks-teach.md

@@ -0,0 +1,6 @@
+---
+"@ledgerhq/types-live": minor
+"ledger-live-desktop": minor
+---
+
+LLD - postonboarding - added europa support, updated copy, added recover entry point

apps/ledger-live-desktop/src/renderer/components/PostOnboardingHub/PostOnboardingActionRow.tsx

@@ -10,6 +10,7 @@ import { useDispatch } from "react-redux";
 import { openModal } from "~/renderer/actions/modals";
 import { AllModalNames } from "~/renderer/modals/types";
 import { useHistory } from "react-router";
+import { useCompleteActionCallback } from "./logic/useCompleteAction";
 
 export type Props = PostOnboardingAction &
   PostOnboardingActionState & {
@@ -30,27 +31,41 @@ const PostOnboardingActionRow: React.FC<Props> = props => {
     buttonLabelForAnalyticsEvent,
     completed,
     deviceModelId,
+    shouldCompleteOnStart,
   } = props;
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const history = useHistory();
+  const completeAction = useCompleteActionCallback();
 
   const handleStartAction = useCallback(() => {
     const openModalCallback = (modalName: AllModalNames) => {
       dispatch(openModal(modalName, undefined));
     };
-    const navigationCallback = (route: string) => {
-      history.push({
-        pathname: route,
-      });
+    const navigationCallback = (location: Record<string, unknown> | string) => {
+      history.push(location);
     };
 
     if ("startAction" in props && deviceModelId !== null) {
       props.startAction({ openModalCallback, navigationCallback, deviceModelId });
       buttonLabelForAnalyticsEvent &&
-        track("button_clicked2", { button: buttonLabelForAnalyticsEvent, flow: "post-onboarding" });
+        track("button_clicked2", {
+          button: buttonLabelForAnalyticsEvent,
+          deviceModelId,
+          flow: "post-onboarding",
+        });
     }
-  }, [props, dispatch, history, buttonLabelForAnalyticsEvent, deviceModelId]);
+    shouldCompleteOnStart && completeAction(id);
+  }, [
+    props,
+    dispatch,
+    history,
+    buttonLabelForAnalyticsEvent,
+    deviceModelId,
+    completeAction,
+    id,
+    shouldCompleteOnStart,
+  ]);
 
   return (
     <ActionRowWrapper
@@ -71,7 +86,7 @@ const PostOnboardingActionRow: React.FC<Props> = props => {
           })}
     >
       <Flex flexDirection="row" alignItems="flex-start" flexShrink={1}>
-        <Icon size="M" color={completed ? "neutral.c60" : "primary.c80"} />
+        <Icon size="M" color={"primary.c80"} />
         <Flex ml={6} flexDirection="column" justifyContent="center" flex={1}>
           <Text
             variant="largeLineHeight"

apps/ledger-live-desktop/src/renderer/components/PostOnboardingHub/PostOnboardingHubBanner.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
-import { Box, Flex, IconsLegacy, Link, Text } from "@ledgerhq/react-ui";
+import { Flex, Theme } from "@ledgerhq/react-ui";
 import { hidePostOnboardingWalletEntryPoint } from "@ledgerhq/live-common/postOnboarding/actions";
 import { getDeviceModel } from "@ledgerhq/devices";
 import { DeviceModelId } from "@ledgerhq/types-devices";
@@ -12,66 +12,77 @@ import Illustration from "~/renderer/components/Illustration";
 import bannerStaxLight from "./assets/bannerStaxLight.svg";
 import bannerStaxDark from "./assets/bannerStaxDark.svg";
 import { track } from "~/renderer/analytics/segment";
+import { Card } from "../Box";
+import ActionCard from "../ContentCards/ActionCard";
 
-const CloseButtonWrapper = styled(Box).attrs(() => ({
-  top: 4,
-  right: 4,
-  position: "absolute",
-}))`
-  cursor: pointer;
+const Wrapper = styled(Card)`
+  background-color: ${p => p.theme.colors.opacityPurple.c10};
+  margin: 20px 0px;
 `;
 
+const illustrations: { [key in DeviceModelId]: Record<Theme["theme"], unknown> | undefined } = {
+  stax: {
+    light: bannerStaxLight,
+    dark: bannerStaxDark,
+  },
+  europa: {
+    light: bannerStaxLight,
+    dark: bannerStaxDark,
+  },
+  nanoS: undefined,
+  nanoSP: undefined,
+  nanoX: undefined,
+  blue: undefined,
+};
+
 const PostOnboardingHubBanner = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const navigateToPostOnboardingHub = useNavigateToPostOnboardingHubCallback();
   const { deviceModelId } = usePostOnboardingHubState();
 
   const handleNavigateToPostOnboardingHub = useCallback(() => {
-    track("button_clicked2", { button: "What’s next for your device" });
+    track("button_clicked2", { button: "What’s next for your device", deviceModelId });
     navigateToPostOnboardingHub();
-  }, [navigateToPostOnboardingHub]);
+  }, [navigateToPostOnboardingHub, deviceModelId]);
 
   const handleHidePostOnboardingHubBanner = useCallback(() => {
+    track("button_clicked2", { button: "Dismiss post onboarding banner", deviceModelId });
     dispatch(hidePostOnboardingWalletEntryPoint());
-  }, [dispatch]);
+  }, [dispatch, deviceModelId]);
 
   return (
-    <Flex
-      backgroundColor="neutral.c100"
-      borderRadius={8}
-      justifyContent="space-between"
-      px={6}
-      mb={7}
-      position="relative"
-    >
-      <Flex flexDirection="column" justifyContent="center" alignItems="flex-start">
-        <Text color="neutral.c00" variant="paragraph" fontSize={6}>
-          {t("postOnboarding.postOnboardingBanner.title", {
-            productName: getDeviceModel(deviceModelId ?? DeviceModelId.stax).productName,
-          })}
-        </Text>
-        <Text mt={3} mb={4} color="neutral.c50" whiteSpace="pre-wrap" variant="h5Inter">
-          {t("postOnboarding.postOnboardingBanner.description")}
-        </Text>
-        <Link
-          color="neutral.c00"
-          onClick={handleNavigateToPostOnboardingHub}
-          data-test-id="postonboarding-banner-entry-point"
-        >
-          {t("postOnboarding.postOnboardingBanner.link")}
-        </Link>
-      </Flex>
-      <Flex>
-        <Illustration lightSource={bannerStaxLight} darkSource={bannerStaxDark} size={240} />
-      </Flex>
-      <CloseButtonWrapper
-        onClick={handleHidePostOnboardingHubBanner}
-        data-test-id="postonboarding-banner-entry-point-close-button"
-      >
-        <IconsLegacy.CloseMedium color="neutral.c00" size={30} />
-      </CloseButtonWrapper>
-    </Flex>
+    <Wrapper>
+      <ActionCard
+        leftContent={
+          deviceModelId && illustrations[deviceModelId] ? (
+            <Flex
+              alignItems="center"
+              justifyContent="center"
+              bg="neutral.c100"
+              borderRadius="100%"
+              p={1}
+            >
+              <Illustration lightSource={bannerStaxLight} darkSource={bannerStaxDark} size={30} />
+            </Flex>
+          ) : null
+        }
+        title={t("postOnboarding.postOnboardingBanner.title", {
+          productName: getDeviceModel(deviceModelId ?? DeviceModelId.stax).productName,
+        })}
+        description={t("postOnboarding.postOnboardingBanner.description")}
+        actions={{
+          primary: {
+            label: t("postOnboarding.postOnboardingBanner.link"),
+            action: handleNavigateToPostOnboardingHub,
+          },
+          dismiss: {
+            label: t("postOnboarding.postOnboardingBanner.dismiss"),
+            action: handleHidePostOnboardingHubBanner,
+          },
+        }}
+      />
+    </Wrapper>
   );
 };
 

apps/ledger-live-desktop/src/renderer/components/PostOnboardingHub/PostOnboardingHubContent.tsx

@@ -2,7 +2,10 @@ import React, { useCallback } from "react";
 import { Flex, Link } from "@ledgerhq/react-ui";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useAllPostOnboardingActionsCompleted } from "@ledgerhq/live-common/postOnboarding/hooks/index";
+import {
+  useAllPostOnboardingActionsCompleted,
+  usePostOnboardingHubState,
+} from "@ledgerhq/live-common/postOnboarding/hooks/index";
 import PostOnboardingHub from ".";
 import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";
 import { track } from "~/renderer/analytics/segment";
@@ -12,16 +15,21 @@ const PostOnboardingHubContent = () => {
   const { t } = useTranslation();
   const history = useHistory();
   const allDone = useAllPostOnboardingActionsCompleted();
+  const { deviceModelId } = usePostOnboardingHubState();
 
   const handleSkipButton = useCallback(() => {
-    track("button_clicked2", { button: "I'll do this later", flow: "post-onboarding" });
+    track("button_clicked2", {
+      button: "I'll do this later",
+      deviceModelId,
+      flow: "post-onboarding",
+    });
     history.push("/");
-  }, [history]);
+  }, [history, deviceModelId]);
 
   const handleOnboardingOver = useCallback(() => {
-    track("button_clicked2", { button: "Explore wallet", flow: "post-onboarding" });
+    track("button_clicked2", { button: "Explore wallet", deviceModelId, flow: "post-onboarding" });
     history.push("/");
-  }, [history]);
+  }, [history, deviceModelId]);
 
   return (
     <Flex

apps/ledger-live-desktop/src/renderer/components/PostOnboardingHub/PostOnboardingMockAction.tsx

@@ -1,31 +1,26 @@
 import React, { useCallback } from "react";
-import { useDispatch } from "react-redux";
 import { Button, Flex, Text } from "@ledgerhq/react-ui";
-import { setPostOnboardingActionCompleted } from "@ledgerhq/live-common/postOnboarding/actions";
 import { PostOnboardingActionId } from "@ledgerhq/types-live";
 import { getPostOnboardingAction } from "./logic";
 import { setDrawer } from "~/renderer/drawers/Provider";
 import { useNavigateToPostOnboardingHubCallback } from "./logic/useNavigateToPostOnboardingHubCallback";
+import { useCompleteActionCallback } from "./logic/useCompleteAction";
 
 type Props = {
   id: PostOnboardingActionId;
 };
 
 const PostOnboardingMockAction = ({ id }: Props) => {
-  const dispatch = useDispatch();
   const action = getPostOnboardingAction(id);
   const navigateToPostOnboardingHub = useNavigateToPostOnboardingHubCallback();
 
-  const completeAction = useCallback(
-    () => dispatch(setPostOnboardingActionCompleted({ actionId: id })),
-    [dispatch, id],
-  );
+  const completeAction = useCompleteActionCallback();
 
   const handleCompleteAndGoToHub = useCallback(() => {
-    completeAction();
+    completeAction(id);
     setDrawer();
     navigateToPostOnboardingHub();
-  }, [completeAction, navigateToPostOnboardingHub]);
+  }, [completeAction, navigateToPostOnboardingHub, id]);
 
   return (
     <Flex p={6} flexDirection="column" height="100%" justifyContent="center" alignItems="center">