From 60c92060a4e3274e1afeb0f39c8be7e8c6796123 Mon Sep 17 00:00:00 2001
From: Kevin Le Seigle <kevin.le-seigle@ledger.fr>
Date: Tue, 11 Jun 2024 14:39:33 +0200
Subject: [PATCH] fix: Storyly cta behavior with deeplinks on LLD

---
 .changeset/soft-hairs-try.md                   |  5 +++++
 .../InformationDrawer.tsx                      |  7 ++++++-
 .../src/storyly/StorylyProvider.tsx            | 18 +++++++++++++++++-
 .../src/storyly/useStoryly.tsx                 | 16 +++++++++++++++-
 .../src/types/storyly-web.d.ts                 | 13 +++++++++++++
 5 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/soft-hairs-try.md

diff --git a/.changeset/soft-hairs-try.md b/.changeset/soft-hairs-try.md
new file mode 100644
index 00000000000..7315e3c99df
--- /dev/null
+++ b/.changeset/soft-hairs-try.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Fix Storyly cta behavior with deeplinks
diff --git a/apps/ledger-live-desktop/src/renderer/components/TopBar/NotificationIndicator/InformationDrawer.tsx b/apps/ledger-live-desktop/src/renderer/components/TopBar/NotificationIndicator/InformationDrawer.tsx
index 1cab4fb238f..c77cd17af3b 100644
--- a/apps/ledger-live-desktop/src/renderer/components/TopBar/NotificationIndicator/InformationDrawer.tsx
+++ b/apps/ledger-live-desktop/src/renderer/components/TopBar/NotificationIndicator/InformationDrawer.tsx
@@ -77,7 +77,12 @@ export const InformationDrawer = ({
   const tabIndex = useMemo(() => tabs.findIndex(tab => tab.id === tabId), [tabId, tabs]);
   const CurrentPanel = tabs[tabIndex].Component;
   return (
-    <SideDrawer isOpen={isOpen} onRequestClose={onRequestClose} direction="left">
+    <SideDrawer
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      direction="left"
+      forceDisableFocusTrap
+    >
       <Box height="100%" px="40px">
         <TabBar
           fullWidth
diff --git a/apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx b/apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx
index a0ea88de5ad..067a8b51368 100644
--- a/apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx
+++ b/apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx
@@ -1,5 +1,10 @@
 import React, { createContext, useState, useContext, ReactNode, useRef, useEffect } from "react";
 import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
+import { closeAllModal } from "~/renderer/actions/modals";
+import { context } from "~/renderer/drawers/Provider";
+import { closeInformationCenter } from "~/renderer/actions/UI";
+import { useDispatch } from "react-redux";
+import { openURL } from "~/renderer/linking";
 import { Feature_Storyly, StorylyInstanceType } from "@ledgerhq/types-live";
 
 import { StorylyRef } from "storyly-web";
@@ -24,6 +29,8 @@ const getTokenForInstanceId = (stories: StoriesType, targetInstanceId: string):
 
 const StorylyProvider: React.FC<StorylyProviderProps> = ({ children }) => {
   const [url, setUrl] = useState<string | null>(null);
+  const dispatch = useDispatch();
+  const { setDrawer } = useContext(context);
   const [token, setToken] = useState<string | null>(null);
   const [query, setQuery] = useState<{ g?: string; s?: string; play?: string }>({});
 
@@ -39,10 +46,19 @@ const StorylyProvider: React.FC<StorylyProviderProps> = ({ children }) => {
       token: token,
       events: {
         closeStoryGroup: clear,
+        actionClicked: story => {
+          if (story?.media?.actionUrl) {
+            openURL(story.media.actionUrl);
+            storylyRef.current?.close?.();
+            dispatch(closeAllModal());
+            setDrawer();
+            dispatch(closeInformationCenter());
+          }
+        },
       },
     });
     storylyRef.current?.openStory({ group: query?.g, story: query?.s, playMode: query?.play });
-  }, [params, token, query]);
+  }, [params, token, query, dispatch, setDrawer]);
 
   useEffect(() => {
     if (url) {
diff --git a/apps/ledger-live-desktop/src/storyly/useStoryly.tsx b/apps/ledger-live-desktop/src/storyly/useStoryly.tsx
index c95a42fbae5..2e84f519e69 100644
--- a/apps/ledger-live-desktop/src/storyly/useStoryly.tsx
+++ b/apps/ledger-live-desktop/src/storyly/useStoryly.tsx
@@ -1,9 +1,13 @@
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { StorylyInstanceID } from "@ledgerhq/types-live";
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef, useContext } from "react";
 import { useSelector } from "react-redux";
+import { closeAllModal } from "~/renderer/actions/modals";
+import { context } from "~/renderer/drawers/Provider";
+import { useDispatch } from "react-redux";
 import { languageSelector } from "~/renderer/reducers/settings";
 import { StorylyStyleProps, useStorylyDefaultStyleProps } from "./style";
+import { openURL } from "~/renderer/linking";
 import { StorylyRef, StorylyData } from "storyly-web";
 
 /**
@@ -19,6 +23,8 @@ export const useStoryly = (
   instanceId: StorylyInstanceID,
   options?: { styleProps: StorylyStyleProps },
 ) => {
+  const dispatch = useDispatch();
+  const { setDrawer } = useContext(context);
   const ref = useRef<StorylyRef>();
   const dataRef = useRef<StorylyData>();
   const props = useStorylyDefaultStyleProps();
@@ -38,6 +44,14 @@ export const useStoryly = (
           dataRef.current = data;
           // Triggered when story is ready.
         },
+        actionClicked: story => {
+          if (story?.media?.actionUrl) {
+            openURL(story.media.actionUrl);
+            ref.current?.close?.();
+            dispatch(closeAllModal());
+            setDrawer();
+          }
+        },
       },
       props: { ...props, ...options?.styleProps },
     });
diff --git a/apps/ledger-live-desktop/src/types/storyly-web.d.ts b/apps/ledger-live-desktop/src/types/storyly-web.d.ts
index 9469cd8f2d0..26e98b1278b 100644
--- a/apps/ledger-live-desktop/src/types/storyly-web.d.ts
+++ b/apps/ledger-live-desktop/src/types/storyly-web.d.ts
@@ -6,6 +6,17 @@ declare module "storyly-web" {
     id: number;
   }>;
 
+  type Story = {
+    group_id: number;
+    id: number;
+    index: number;
+    media: {
+      actionUrl?: string;
+    };
+    seen: boolean;
+    title: string;
+  };
+
   /**
    * Storyly Options
    */
@@ -15,6 +26,7 @@ declare module "storyly-web" {
     events?: {
       closeStoryGroup?(): void;
       isReady?(data: StorylyData): void;
+      actionClicked?(story: Story): void;
     };
     lang?: Language;
     segments?: string[];
@@ -29,6 +41,7 @@ declare module "storyly-web" {
     setSegments: (options: StorylyOptions["segments"]) => void;
     setLang: (options: { language: StorylyOptions["lang"] }) => void;
     openStory: (props: openStoryParams) => void;
+    close: () => void;
   }
 
   interface openStoryParams {