feat(lld): 🐦‍🔥 revamp the portfolio content cards

.changeset/honest-trainers-shake.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": minor
+"@ledgerhq/react-ui": minor
+---
+
+Re-implement the portfolio content cards with UI components

apps/ledger-live-desktop/src/newArch/features/DynamicContent/__integrations__/PortfolioContentCards.test.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+
+import { act, render, screen } from "tests/testUtils";
+import PortfolioContentCards from "../components/PortfolioContentCards";
+
+// Mocked functions
+import { logCardDismissal, logContentCardClick } from "@braze/web-sdk";
+import { track } from "~/renderer/analytics/segment";
+
+jest.mock("@braze/web-sdk", () => ({
+  getCachedContentCards: jest.fn(() => ({
+    cards: Cards.map(({ id, ...extras }) => ({ id, extras })),
+  })),
+  logCardDismissal: jest.fn(),
+  logContentCardClick: jest.fn(),
+}));
+
+jest.mock("~/renderer/analytics/segment", () => ({
+  ...jest.requireActual("~/renderer/analytics/segment"),
+  track: jest.fn(),
+}));
+
+const Cards = [
+  {
+    id: "0",
+    title: "Foo",
+    description: "Lorem ipsum dolor sit amet.",
+    cta: "Click me",
+    tag: "New",
+    path: "ledger-live://deep-link",
+  },
+  {
+    id: "1",
+    title: "Bar",
+    description: "Consectetur adipiscing elit.",
+    path: "ledger-live://deep-link",
+  },
+];
+
+describe("PortfolioContentCards", () => {
+  test("render slides", async () => {
+    render(<PortfolioContentCards />, {
+      initialState: {
+        dynamicContent: { portfolioCards: Cards },
+        settings: { shareAnalytics: true, sharePersonalizedRecommandations: true },
+      },
+    });
+
+    // I'm not sure how to properly test logContentCardImpressions and track("contentcard_impression")
+    // because IntersectionObserver is not available in JSDOM and mocking it would defeat the purpose IMO.
+
+    const title0 = await screen.findByText("Foo");
+    const description0 = screen.getByText("Lorem ipsum dolor sit amet.");
+    const cta0 = screen.getByText("Click me");
+    const tag0 = screen.getByText("New");
+    const title1 = screen.getByText("Bar");
+    const description1 = screen.getByText("Consectetur adipiscing elit.");
+
+    // Due to the styling not being applied in the test all slides are visible from the start.
+    expect(title0).toBeVisible();
+    expect(description0).toBeVisible();
+    expect(cta0).toBeVisible();
+    expect(tag0).toBeVisible();
+    expect(title1).toBeVisible();
+    expect(description1).toBeVisible();
+
+    // Test next and prev buttons
+    expect(track).not.toHaveBeenCalledWith("contentcard_slide", {
+      button: "prev",
+      page: "Portfolio",
+      type: "portfolio_carousel",
+    });
+    expect(track).not.toHaveBeenCalledWith("contentcard_slide", {
+      button: "next",
+      page: "Portfolio",
+      type: "portfolio_carousel",
+    });
+
+    act(() => screen.getByTestId("carousel-arrow-next").click());
+    expect(track).toHaveBeenCalledWith("contentcards_slide", {
+      button: "next",
+      page: "Portfolio",
+      type: "portfolio_carousel",
+    });
+    act(() => screen.getByTestId("carousel-arrow-prev").click());
+    expect(track).toHaveBeenCalledWith("contentcards_slide", {
+      button: "prev",
+      page: "Portfolio",
+      type: "portfolio_carousel",
+    });
+
+    // Test dismiss button
+    expect(logCardDismissal).not.toHaveBeenCalled();
+    expect(track).not.toHaveBeenCalledWith("contentcard_dismissed", expect.any(Object));
+    act(() => screen.getAllByTestId("portfolio-card-close-button")[1].click());
+    expect(logCardDismissal).toHaveBeenCalledWith(asBrazeCard(Cards[1]));
+    expect(track).toHaveBeenCalledWith("contentcard_dismissed", {
+      card: "1",
+      page: "Portfolio",
+      type: "portfolio_carousel",
+    });
+    expect(title1).not.toBeInTheDocument();
+    expect(description1).not.toBeInTheDocument();
+
+    // Test click button
+    expect(logContentCardClick).not.toHaveBeenCalled();
+    expect(track).not.toHaveBeenCalledWith("contentcard_clicked", expect.any(Object));
+    act(() => cta0.click());
+    expect(logContentCardClick).toHaveBeenCalledWith(asBrazeCard(Cards[0]));
+    expect(track).toHaveBeenCalledWith("contentcard_clicked", {
+      contentcard: "Foo",
+      link: "ledger-live://deep-link",
+      campaign: "0",
+      page: "Portfolio",
+      type: "portfolio_carousel",
+    });
+  });
+});
+
+function asBrazeCard({ id, ...extras }: (typeof Cards)[number]) {
+  return { id, extras };
+}

apps/ledger-live-desktop/src/newArch/features/DynamicContent/components/PortfolioContentCards/Slide.tsx

@@ -0,0 +1,53 @@
+import React, { memo } from "react";
+import { useHistory } from "react-router-dom";
+
+import { PortfolioContentCard as Card } from "@ledgerhq/react-ui";
+import { openURL } from "~/renderer/linking";
+import type { PortfolioContentCard } from "~/types/dynamicContent";
+import type { CarouselActions } from "../../types";
+import LogContentCardWrapper from "../LogContentCardWrapper";
+
+export default memo(Slide);
+
+type Props = PortfolioContentCard & CarouselActions & { index: number };
+
+function Slide({
+  id,
+  path,
+  url,
+  title,
+  cta,
+  description,
+  tag,
+  image,
+  index,
+  logSlideClick,
+  dismissCard,
+}: Props) {
+  const history = useHistory();
+
+  const handleClose = () => dismissCard(index);
+  const handleClick = () => {
+    logSlideClick(id);
+
+    if (path) {
+      history.push({ pathname: path, state: { source: "banner" } });
+    } else if (url) {
+      openURL(url);
+    }
+  };
+
+  return (
+    <LogContentCardWrapper id={id}>
+      <Card
+        title={title}
+        cta={cta}
+        description={description}
+        tag={tag}
+        image={image}
+        onClick={handleClick}
+        onClose={handleClose}
+      />
+    </LogContentCardWrapper>
+  );
+}

apps/ledger-live-desktop/src/newArch/features/DynamicContent/components/PortfolioContentCards/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Carousel } from "@ledgerhq/react-ui";
+import { track } from "~/renderer/analytics/segment";
+import { usePortfolioCards } from "../../hooks/usePortfolioCards";
+import Slide from "./Slide";
+
+export default PortfolioContentCards;
+
+function PortfolioContentCards() {
+  const { portfolioCards, logSlideClick, dismissCard } = usePortfolioCards();
+  const handlePrevButton = () => trackSlide("prev");
+  const handleNextButton = () => trackSlide("next");
+
+  return (
+    <Carousel autoPlay={6000} onPrev={handlePrevButton} onNext={handleNextButton}>
+      {portfolioCards.map((card, index) => (
+        <Slide
+          key={card.id}
+          {...card}
+          index={index}
+          logSlideClick={logSlideClick}
+          dismissCard={dismissCard}
+        />
+      ))}
+    </Carousel>
+  );
+}
+
+function trackSlide(button: "prev" | "next") {
+  track("contentcards_slide", { button, page: "Portfolio", type: "portfolio_carousel" });
+}

apps/ledger-live-desktop/src/newArch/features/DynamicContent/hooks/usePortfolioCards.ts

@@ -0,0 +1,77 @@
+import * as braze from "@braze/web-sdk";
+import { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { track } from "~/renderer/analytics/segment";
+import { setPortfolioCards } from "~/renderer/actions/dynamicContent";
+import { setDismissedContentCards } from "~/renderer/actions/settings";
+import { portfolioContentCardSelector } from "~/renderer/reducers/dynamicContent";
+import { trackingEnabledSelector } from "~/renderer/reducers/settings";
+import type { PortfolioContentCard } from "~/types/dynamicContent";
+import type { CarouselActions } from "../types";
+
+type UsePortfolioCards = { portfolioCards: PortfolioContentCard[] } & CarouselActions;
+
+export function usePortfolioCards(): UsePortfolioCards {
+  const [cachedContentCards, setCachedContentCards] = useState<braze.Card[]>([]);
+  const portfolioCards = useSelector(portfolioContentCardSelector);
+  const isTrackedUser = useSelector(trackingEnabledSelector);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const cards = braze.getCachedContentCards().cards;
+    setCachedContentCards(cards);
+  }, []);
+
+  const dismissCard = useCallback<CarouselActions["dismissCard"]>(
+    index => {
+      const slide = portfolioCards[index];
+      if (!slide?.id) return;
+
+      if (isTrackedUser) {
+        track("contentcard_dismissed", {
+          card: slide.id,
+          page: "Portfolio",
+          type: "portfolio_carousel",
+        });
+      }
+
+      const currentCard = cachedContentCards.find(card => card.id === slide.id);
+      if (currentCard) {
+        if (isTrackedUser) {
+          braze.logCardDismissal(currentCard);
+        } else if (currentCard.id) {
+          dispatch(setDismissedContentCards({ id: currentCard.id, timestamp: Date.now() }));
+        }
+        setCachedContentCards(cachedContentCards.filter(n => n.id !== currentCard.id));
+      }
+      dispatch(setPortfolioCards(portfolioCards.filter(n => n.id !== slide.id)));
+    },
+    [portfolioCards, cachedContentCards, isTrackedUser, dispatch],
+  );
+
+  const logSlideClick = useCallback<CarouselActions["logSlideClick"]>(
+    cardId => {
+      if (!isTrackedUser) return;
+
+      const slide = portfolioCards.find(card => card.id === cardId);
+      if (!slide) return;
+
+      track("contentcard_clicked", {
+        contentcard: slide.title,
+        link: slide.path || slide.url,
+        campaign: cardId,
+        page: "Portfolio",
+        type: "portfolio_carousel",
+      });
+
+      const currentCard = cachedContentCards.find(card => card.id === cardId);
+      if (!currentCard) return;
+
+      braze.logContentCardClick(currentCard);
+    },
+    [portfolioCards, cachedContentCards, isTrackedUser],
+  );
+
+  return { portfolioCards, logSlideClick, dismissCard };
+}

apps/ledger-live-desktop/src/newArch/features/DynamicContent/types.ts

@@ -0,0 +1,4 @@
+export type CarouselActions = {
+  logSlideClick: (cardId: string) => void;
+  dismissCard: (index: number) => void;
+};