diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index e4a795d1..3d58c86d 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -357,5 +357,15 @@ "unlocked_at": "Unlocked at:", "subscription_needed": "A Hydra Cloud subscription is needed to see this content", "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games" + }, + "tour": { + "subscription_tour_title": "Hydra Cloud Subscription", + "subscribe_now": "Subscribe now", + "cloud_saving": "Cloud saving (up to {{gameCount}} games)", + "cloud_achievements": "Save your achievements on the cloud", + "animated_profile_picture": "Animated profile pictures", + "premium_support": "Premium Support", + "show_and_compare_achievements": "Show and compare your achievements to other users", + "animated_profile_banner": "Animated profile banner" } } diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 32d1ca26..c79c0847 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -359,5 +359,14 @@ "unlocked_at": "Desbloqueado em:", "subscription_needed": "Você precisa de uma assinatura Hydra Cloud para visualizar este conteúdo", "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos" + }, + "tour": { + "subscription_tour_title": "Assinatura Hydra Cloud", + "subscribe_now": "Inscreva-se agora", + "cloud_achievements": "Salvamento de conquistas em nuvem", + "animated_profile_picture": "Fotos de perfil animadas", + "premium_support": "Suporte Premium", + "show_and_compare_achievements": "Exiba e compare suas conquistas com outros usuários", + "animated_profile_banner": "Banner animado no perfil" } } diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx index 7c572a56..941fb75d 100644 --- a/src/renderer/src/app.tsx +++ b/src/renderer/src/app.tsx @@ -1,4 +1,4 @@ -import { useCallback, useContext, useEffect, useRef } from "react"; +import { useCallback, useContext, useEffect, useRef, useState } from "react"; import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components"; @@ -29,6 +29,11 @@ import { UserFriendModal } from "./pages/shared-modals/user-friend-modal"; import { downloadSourcesWorker } from "./workers"; import { repacksContext } from "./context"; import { logger } from "./logger"; +import { SubscriptionTourModal } from "./pages/shared-modals/subscription-tour-modal"; + +interface TourModals { + subscriptionModal?: boolean; +} export interface AppProps { children: React.ReactNode; @@ -72,6 +77,9 @@ export function App() { const { showSuccessToast } = useToast(); + const [showSubscritionTourModal, setShowSubscritionTourModal] = + useState(false); + useEffect(() => { Promise.all([window.electron.getUserPreferences(), updateLibrary()]).then( ([preferences]) => { @@ -117,6 +125,16 @@ export function App() { }); }, [fetchUserDetails, syncFriendRequests, updateUserDetails, dispatch]); + useEffect(() => { + const tourModalsString = window.localStorage.getItem("tourModals") || "{}"; + + const tourModals = JSON.parse(tourModalsString) as TourModals; + + if (!tourModals.subscriptionModal) { + setShowSubscritionTourModal(true); + } + }, []); + const onSignIn = useCallback(() => { fetchUserDetails().then((response) => { if (response) { @@ -262,6 +280,14 @@ export function App() { }); }, [indexRepacks]); + const handleCloseSubscriptionTourModal = () => { + setShowSubscritionTourModal(false); + window.localStorage.setItem( + "tourModals", + JSON.stringify({ subscriptionModal: true } as TourModals) + ); + }; + const handleToastClose = useCallback(() => { dispatch(closeToast()); }, [dispatch]); @@ -281,6 +307,13 @@ export function App() { onClose={handleToastClose} /> + {showSubscritionTourModal && ( + + )} + {userDetails && ( void; +} + +export const SubscriptionTourModal = ({ + visible, + onClose, +}: UserFriendsModalProps) => { + const { t } = useTranslation("tour"); + + const handleSubscribeClick = () => { + window.electron.openCheckout().finally(onClose); + }; + + return ( + +
+
+
+

Hydra Cloud

+
    +
  • + {t("cloud_saving", { gameCount: 15 })} +
  • +
  • + {t("cloud_achievements")} +
  • +
  • + {t("show_and_compare_achievements")} +
  • +
  • + {t("animated_profile_picture")} +
  • +
  • + {t("premium_support")} +
  • +
+
+ +
+

Hydra Cloud+

+
    +
  • + {t("cloud_saving", { gameCount: 30 })} +
  • +
  • + {t("cloud_achievements")} +
  • +
  • + {t("show_and_compare_achievements")} +
  • +
  • + {t("animated_profile_banner")} +
  • +
  • + {t("animated_profile_picture")} +
  • +
  • + {t("premium_support")} +
  • +
+
+
+ +
+
+ ); +};