feat: 🌐 localize storyly (#7923)

.changeset/witty-bugs-add.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+storyly stories localization

apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx

@@ -3,11 +3,12 @@ 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 { useDispatch, useSelector } from "react-redux";
 import { openURL } from "~/renderer/linking";
 import { Feature_Storyly, StorylyInstanceType } from "@ledgerhq/types-live";
 
 import { StorylyRef, Story } from "storyly-web";
+import { languageSelector } from "~/renderer/reducers/settings";
 interface StorylyProviderProps {
  children: ReactNode;
 }
@@ -37,6 +38,9 @@ const StorylyProvider: React.FC<StorylyProviderProps> = ({ children }) => {
  const storylyRef = useRef<StorylyRef>(null);
 
  const { params } = useFeature("storyly") || {};
+
+ const language = useSelector(languageSelector);
+
  const stories = params?.stories;
 
  useEffect(() => {
@@ -60,6 +64,12 @@ const StorylyProvider: React.FC<StorylyProviderProps> = ({ children }) => {
  storylyRef.current?.openStory({ group: query?.g, story: query?.s, playMode: query?.play });
  }, [params, token, query, dispatch, setDrawer]);
 
+ useEffect(() => {
+ if (language) {
+ storylyRef.current?.setLang({ language });
+ }
+ }, [language]);
+
  useEffect(() => {
  if (url) {
  const storylyUrl = new URL(`ledgerlive://${url}`);

apps/ledger-live-desktop/src/storyly/useStoryly.tsx

@@ -37,7 +37,6 @@ export const useStoryly = (
  ref.current?.init({
  layout: "classic",
  token: storyly.params?.stories[instanceId].token || "",
- lang: language,
  segments: [`lang_${language}`],
  props: { ...props, ...options?.styleProps },
  });
@@ -59,7 +58,7 @@ export const useStoryly = (
  * Change `lang` and `segments` based on the app language
  */
  useLayoutEffect(() => {
- ref.current?.setLang({ language: language });
+ ref.current?.setLang({ language });
  ref.current?.setSegments([`lang_${language}`]);
  }, [language]);
 

apps/ledger-live-desktop/src/types/storyly-web.d.ts

@@ -29,7 +29,7 @@ declare module "storyly-web" {
  interface StorylyOptions {
  layout: "classic" | "modern";
  token: string;
- lang?: Language /* TODO: delete it in LIVE-14102 and replace it with locale*/;
+ locale?: LanguagePrefixed;
  segments?: string[];
  props?: StorylyStyleProps;
  }