chore: unify rendering of Recover Banner

[gre]

📝 Description

This makes sure that only one banner at a time is displayed, before this fix, the recover banner could appear on top of the content card banner, instead we have made it so the recover banner is first displayed before the second. This is implemented with a "passthrough" pattern (the RecoverBanner will render any children that is passed if it doesn't need to render anything, that way RecoverBanner remains decoupled from ContentCards)

On top of this, we have fixed inconsistencies in the UI of the Recover Banner that was fixed on this PR by making RecoverBanner renders an ActionCard. a leftContent generic prop was introduced to allow to inject custom left content instead of an image.

⚠️ I have only tested by modifying directly into the code to force enable recover banner because I couldn't properly access the dev environment of recover. Another QA / dev will need to take over to confirm the banner still works as attended, and notably in combination with Braze banners.

    //const storage = await getStoreValue("SUBSCRIPTION_STATE", protectID);
    //const displayBanner = await getStoreValue("DISPLAY_BANNER", protectID);
    const storage = "STARGATE_SUBSCRIBE";
    const displayBanner = "true";

out.mov

❓ Context

• JIRA or GitHub link: LIVE-11239

✅ Checklist

Pull Requests must pass the CI and be code reviewed. Set as Draft if the PR is not ready.

• npx changeset was attached.
• Covered by automatic tests. we are far from being able to automate test for this unfortunately. but we should plan this – cc @KVNLS
• Impact of the changes:
  • the Recover Banner and its behaviour when there is also content cards banner

---

🧐 Checklist for the PR Reviewers

• The code aligns with the requirements described in the linked JIRA or GitHub issue.
• The PR description clearly documents the changes made and explains any technical trade-offs or design decisions.
• There are no undocumented trade-offs, technical debt, or maintainability issues.
• The PR has been tested thoroughly, and any potential edge cases have been considered and handled.
• Any new dependencies have been justified and documented.
• Performance considerations have been taken into account. (changes have been profiled or benchmarked if necessary)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

5 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
ledger-live-docs	⬜️ Ignored (Inspect)	Visit Preview		Apr 3, 2024 2:50pm
ledger-live-github-bot	⬜️ Ignored (Inspect)	Visit Preview		Apr 3, 2024 2:50pm
native-ui-storybook	⬜️ Ignored (Inspect)	Visit Preview		Apr 3, 2024 2:50pm
react-ui-storybook	⬜️ Ignored (Inspect)	Visit Preview		Apr 3, 2024 2:50pm
web-tools	⬜️ Ignored (Inspect)	Visit Preview		Apr 3, 2024 2:50pm

[cgrellard-ledger]

Is it expected that we don't have the purple background in the recover card now ?

[gre]

fixed

[cgrellard-ledger]

Can we make sure with @Anthony-Ledger that we want to hide the action cards and the portfolio carousel when the recover banner is displayed ?

[gre]

@cgrellard-ledger it's what the spec says. "Recover takes the lead (depends what’s easier technically)"
i think we can discuss this indeed (NB: my next working day is Monday)

[cgrellard-ledger]

@cgrellard-ledger it's what the spec says. "Recover takes the lead (depends what’s easier technically)" i think we can discuss this indeed (NB: my next working day is Monday)

Yep let's discuss this, I'm not sure how to understand the "takes the lead". It will an impact on the growth team if we do it this way. I'll get Anthony's input just to confirm

[cgrellard-ledger]

Anthony is fine with this solution ✅

[github-actions]

There as been no activity on this PR for the last 14 days. Please consider closing this PR.

[live-github-bot]

Desktop Bundle Checks

Comparing c1b60c0 against b6bae9e.

✅ Previous issues have all been fixed.

[Justkant]

LGTM just a small suggestion if you want to use it

[Justkant]

You can use this type too if you want

Suggested change

	export default function RecoverBanner({ children }: { children?: React.ReactNode }) {
	export default function RecoverBanner({ children }: React.PropsWithChildren) {