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")}
+
+
+
+
+
+
+
+ );
+};