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 index 551ceefd8aae..f401644073e5 100644 --- 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 ( - + {img &&
} {title} diff --git a/apps/ledger-live-desktop/src/renderer/components/Page.tsx b/apps/ledger-live-desktop/src/renderer/components/Page.tsx index cb289d2ccf6c..6c8bbd053435 100644 --- 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) => { > + {/* Only on dashboard page */} + {pathname === "/" && } ); }; diff --git a/apps/ledger-live-desktop/src/renderer/hooks/usePortfolioCards.tsx b/apps/ledger-live-desktop/src/renderer/hooks/usePortfolioCards.tsx index e0637f47dc32..6ca00185519b 100644 --- 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 index 82f07e1e71fd..b92e163c2dd7 100644 --- 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) => ( + + {children} + +); + +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 ? ( - + if (!showCarousel) return null; + + if ( + lldPortfolioCarousel?.params?.variant === ABTestingVariants.variantA && + variant === ABTestingVariants.variantA + ) + return ( + - - ) : ( -
+ + ); + + if ( + lldPortfolioCarousel?.params?.variant === ABTestingVariants.variantB && + variant === ABTestingVariants.variantB + ) + return ( + -
- ) - ) : null; + + ); + + 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 index cb100b97865a..86c4289b6594 100644 --- 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() { - + {isPostOnboardingBannerVisible && }