Add onView on ContentCard + add VariantB and VariantA functionnality …

…for Portfolio ContentCards
LedgerHQ · Feb 1, 2024 · 209779e · 209779e
1 parent d3365b4
commit 209779e
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 40 deletions.
diff --git a/apps/ledger-live-desktop/src/renderer/components/ContentCards/ActionCard/index.tsx b/apps/ledger-live-desktop/src/renderer/components/ContentCards/ActionCard/index.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ButtonV3 from "~/renderer/components/ButtonV3";
 import { Actions, Body, CardContainer, Header, Description, Title } from "./components";
 import { Link } from "@ledgerhq/react-ui";
-import { ContentCardBuilder } from "~/renderer/components/ContentCards/utils";
+import { useInView } from "react-intersection-observer";
 
 type Props = {
  img?: string;
@@ -16,15 +16,23 @@ type Props = {
  action: Function;
  };
  dismiss: {
- label: string;
+ label?: string;
  action: Function;
  };
  };
+
+ onView?: Function;
 };
 
-const ActionCard = ({ img, title, description, actions }: Props) => {
+const ActionCard = ({ img, title, description, actions, onView }: Props) => {
+ const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
+
+ useEffect(() => {
+ if (inView) onView?.();
+ }, [inView]);
+
  return (
- <CardContainer>
+ <CardContainer ref={ref}>
  {img && <Header src={img} />}
  <Body>
  <Title>{title}</Title>

diff --git a/apps/ledger-live-desktop/src/renderer/components/Page.tsx b/apps/ledger-live-desktop/src/renderer/components/Page.tsx
@@ -3,6 +3,8 @@ import { useLocation } from "react-router-dom";
 import styled, { DefaultTheme, ThemedStyledProps } from "styled-components";
 import AngleUp from "~/renderer/icons/AngleUp";
 import TopBar from "~/renderer/components/TopBar";
+import PortfolioContentCards from "~/renderer/screens/dashboard/PortfolioContentCards";
+import { ABTestingVariants } from "@ledgerhq/types-live";
 
 type Props = {
  children: React.ReactNode;
@@ -151,6 +153,8 @@ const Page = ({ children }: Props) => {
  >
  <AngleUp size={20} />
  </ScrollUpButton>
+ {/* Only on dashboard page */}
+ {pathname === "/" && <PortfolioContentCards variant={ABTestingVariants.variantB} />}
  </PageContainer>
  );
 };

diff --git a/apps/ledger-live-desktop/src/renderer/hooks/usePortfolioCards.tsx b/apps/ledger-live-desktop/src/renderer/hooks/usePortfolioCards.tsx
@@ -1,5 +1,5 @@
 import map from "lodash/map";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import ActionCard from "~/renderer/components/ContentCards/ActionCard";
 import { portfolioContentCardSelector } from "~/renderer/reducers/dynamicContent";
@@ -16,7 +16,6 @@ const usePortfolioCards = () => {
  setCachedContentCards(cards);
  }, []);
 
- // TODO
  const onImpression = (cardId: string) => {
  const currentCard = cachedContentCards.find(card => card.id === cardId);
 
@@ -29,7 +28,7 @@ const usePortfolioCards = () => {
  const currentCard = cachedContentCards.find(card => card.id === cardId);
 
  if (currentCard) {
- // braze.logCardDismissal(currentCard);
+ braze.logCardDismissal(currentCard);
  setCachedContentCards(cachedContentCards.filter(n => n.id !== currentCard.id));
  dispatch(setPortfolioCards(portfolioCards.filter(n => n.id !== currentCard.id)));
  }
@@ -57,15 +56,14 @@ const usePortfolioCards = () => {
  actions={{
  primary: {
  label: slide.cta,
- action: () => {
- onClick(slide.id);
- },
+ action: () => onClick(slide.id),
  },
  dismiss: {
- label: slide.dismissCta || "Maybe later", // TODO translate
+ label: slide.dismissCta,
  action: () => onDismiss(slide.id),
  },
  }}
+ onView={() => onImpression(slide.id)}
  />
  ));
 

diff --git a/apps/ledger-live-desktop/src/renderer/screens/dashboard/PortfolioContentCards.tsx b/apps/ledger-live-desktop/src/renderer/screens/dashboard/PortfolioContentCards.tsx
@@ -1,50 +1,75 @@
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { Carousel } from "@ledgerhq/react-ui";
 import { ABTestingVariants } from "@ledgerhq/types-live";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { useSelector } from "react-redux";
-import { useTheme } from "styled-components";
+import styled from "styled-components";
 import { useRefreshAccountsOrderingEffect } from "~/renderer/actions/general";
-import { Card } from "~/renderer/components/Box";
 import usePortfolioCards from "~/renderer/hooks/usePortfolioCards";
 import { accountsSelector } from "~/renderer/reducers/accounts";
 import { hasInstalledAppsSelector } from "~/renderer/reducers/settings";
 
-const PortfolioContentCards = () => {
- const theme = useTheme();
+const PortfolioVariantA = styled.div`
+ background-color: ${p => p.theme.colors.opacityPurple.c10};
+`;
+
+const PortfolioVariantBContainer = styled.div`
+ position: relative;
+ margin-left: 24px;
+ margin-right: 24px;
+`;
+
+const PortfolioVariantBC = styled.div`
+ position: absolute;
+ width: 100%;
+ bottom: 30px;
+ zindex: 10000;
+ backdrop-filter: blur(15px);
+ border-radius: 8px;
+ background-color: ${p => p.theme.colors.opacityPurple.c10};
+`;
+
+const PortfolioVariantB = ({ children }: PropsWithChildren) => (
+ <PortfolioVariantBContainer>
+ <PortfolioVariantBC>{children}</PortfolioVariantBC>
+ </PortfolioVariantBContainer>
+);
+
+const PortfolioContentCards = ({ variant }: { variant: ABTestingVariants }) => {
  const slides = usePortfolioCards();
  const lldPortfolioCarousel = useFeature("lldPortfolioCarousel");
  const accounts = useSelector(accountsSelector);
  const hasInstalledApps = useSelector(hasInstalledAppsSelector);
  const totalAccounts = accounts.length;
 
- const showCarousel = hasInstalledApps && totalAccounts >= 0;
+ const showCarousel = lldPortfolioCarousel?.enabled && hasInstalledApps && totalAccounts >= 0;
  useRefreshAccountsOrderingEffect({
  onMount: true,
  });
 
- return showCarousel && lldPortfolioCarousel?.enabled ? (
- lldPortfolioCarousel?.params?.variant === ABTestingVariants.variantA ? (
- <Card style={{ backgroundColor: theme.colors.opacityPurple.c10 }}>
+ if (!showCarousel) return null;
+
+ if (
+ lldPortfolioCarousel?.params?.variant === ABTestingVariants.variantA &&
+ variant === ABTestingVariants.variantA
+ )
+ return (
+ <PortfolioVariantA>
  <Carousel variant="content-card" children={slides} />
- </Card>
- ) : (
- <div
- style={{
- position: "fixed",
- bottom: "30px",
- left: "20px",
- width: "97.5%",
- zIndex: 10000,
- backdropFilter: "blur(15px)",
- borderRadius: "8px",
- backgroundColor: theme.colors.opacityPurple.c10,
- }}
- >
+ </PortfolioVariantA>
+ );
+
+ if (
+ lldPortfolioCarousel?.params?.variant === ABTestingVariants.variantB &&
+ variant === ABTestingVariants.variantB
+ )
+ return (
+ <PortfolioVariantB>
  <Carousel variant="content-card" children={slides} />
- </div>
- )
- ) : null;
+ </PortfolioVariantB>
+ );
+
+ return null;
 };
 
 export default PortfolioContentCards;
diff --git a/apps/ledger-live-desktop/src/renderer/screens/dashboard/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/dashboard/index.tsx
@@ -27,7 +27,7 @@ import EmptyStateAccounts from "~/renderer/screens/dashboard/EmptyStateAccounts"
 import CurrencyDownStatusAlert from "~/renderer/components/CurrencyDownStatusAlert";
 import PostOnboardingHubBanner from "~/renderer/components/PostOnboardingHub/PostOnboardingHubBanner";
 import FeaturedButtons from "~/renderer/screens/dashboard/FeaturedButtons";
-import { AccountLike, Operation } from "@ledgerhq/types-live";
+import { ABTestingVariants, AccountLike, Operation } from "@ledgerhq/types-live";
 import PortfolioContentCards from "~/renderer/screens/dashboard/PortfolioContentCards";
 
 // This forces only one visible top banner at a time
@@ -77,7 +77,7 @@ export default function DashboardPage() {
  <ClearCacheBanner />
  <CurrencyDownStatusAlert currencies={currencies} hideStatusIncidents />
  </TopBannerContainer>
- <PortfolioContentCards />
+ <PortfolioContentCards variant={ABTestingVariants.variantA} />
  <RecoverBanner />
  {isPostOnboardingBannerVisible && <PostOnboardingHubBanner />}
  <FeaturedButtons />