feat: cloud modal

src/locales/ar/translation.json

@@ -309,7 +309,7 @@
     "last_time_played": "لعبت آخر مرة {{period}}",
     "activity": "النشاط الأخير",
     "library": "مكتبة",
-    "total_play_time": "إجمالي وقت اللعب: {{amount}}",
+    "total_play_time": "إجمالي وقت اللعب",
     "no_recent_activity_title": "هممم... لا شيء هنا",
     "no_recent_activity_description": "لم تلعب أي مباراة مؤخرًا. ",
     "display_name": "اسم العرض",
@@ -389,7 +389,7 @@
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} الإنجازات",
     "achievements_unlocked_for_game": "مفتوح {{achievementCount}} انجازات جديدة ل {{gameTitle}}"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "اشتراك Hydra كلاود",
     "subscribe_now": "اشترك الآن",
     "cloud_saving": "الحفظ السحابي",

src/locales/bg/translation.json

@@ -293,7 +293,7 @@
     "last_time_played": "Последно играно {{period}}",
     "activity": "Скорошна активност",
     "library": "Библиотека",
-    "total_play_time": "Общо време за игра: {{amount}}",
+    "total_play_time": "Общо време за игра",
     "no_recent_activity_title": "Хмм… няма нищо тук",
     "no_recent_activity_description": "Не сте играли игри напоследък. Време е да промените това.!",
     "display_name": "Показване на името",
@@ -368,7 +368,7 @@
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} постижения",
     "achievements_unlocked_for_game": "Отключени {{achievementCount}} нови постижения за {{gameTitle}}"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Hydra Cloud Абонамент",
     "subscribe_now": "Абонирай се сега",
     "cloud_saving": "Запазване в облака",

src/locales/ca/translation.json

@@ -224,7 +224,7 @@
     "last_time_played": "Última partida {{period}}",
     "activity": "Activitat recent",
     "library": "Biblioteca",
-    "total_play_time": "Temps total de joc:{{amount}}",
+    "total_play_time": "Temps total de joc",
     "no_recent_activity_title": "Hmmm… encara no res",
     "no_recent_activity_description": "No has jugat a cap joc recentment. És el moment de canviar-ho!",
     "display_name": "Nom de visualització",

src/locales/cs/translation.json

@@ -293,7 +293,7 @@
     "last_time_played": "Naposledy hráno {{period}}",
     "activity": "Nedávná aktivita",
     "library": "Knihovna",
-    "total_play_time": "Celkový odehraný čas: {{amount}}",
+    "total_play_time": "Celkový odehraný čas",
     "no_recent_activity_title": "Hmmm… nic tu není",
     "no_recent_activity_description": "V poslední době si nehrál žádnout hru, můžeš to ale napravit!",
     "display_name": "Zobrazované jméno",
@@ -368,7 +368,7 @@
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} achievementů",
     "achievements_unlocked_for_game": "Odemčeno {{achievementCount}} nových achievementů pro {{gameTitle}}"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Předplatné Hydra Cloud",
     "subscribe_now": "Připojit se",
     "cloud_saving": "Ukládání v cloudu",

src/locales/da/translation.json

@@ -251,7 +251,7 @@
     "last_time_played": "Sidst spillet {{period}}",
     "activity": "Seneste aktivitet",
     "library": "Bibliotek",
-    "total_play_time": "Samlet spiltid: {{amount}}",
+    "total_play_time": "Samlet spiltid",
     "no_recent_activity_title": "Hmmm… ikke noget her",
     "no_recent_activity_description": "Du har ikke spillet nogen spil for nyligt. Dét er det på tide at lave om på!",
     "display_name": "Brugernavn",

src/locales/de/translation.json

@@ -224,7 +224,7 @@
     "last_time_played": "Zuletzt gespielt {{period}}",
     "activity": "Letzte Aktivität",
     "library": "Bibliothek",
-    "total_play_time": "Gesamtspielzeit: {{amount}}",
+    "total_play_time": "Gesamtspielzeit",
     "no_recent_activity_title": "Hmmm… hier ist nichts",
     "no_recent_activity_description": "Du hast in letzter Zeit keine Spiele gespielt. Es wird Zeit das zu ändern!",
     "display_name": "Anzeigename",

src/locales/en/translation.json

@@ -163,7 +163,7 @@
     "no_download_option_info": "No information available",
     "backup_deletion_failed": "Failed to delete backup",
     "max_number_of_artifacts_reached": "Maximum number of backups reached for this game",
-    "achievements_not_sync": "Your achievements are not synchronized",
+    "achievements_not_sync": "See how to synchronize your achievements",
     "manage_files_description": "Manage which files will be backed up and restored",
     "select_folder": "Select folder",
     "backup_from": "Backup from {{date}}",
@@ -302,7 +302,7 @@
     "last_time_played": "Last played {{period}}",
     "activity": "Recent Activity",
     "library": "Library",
-    "total_play_time": "Total playtime: {{amount}}",
+    "total_play_time": "Total playtime",
     "no_recent_activity_title": "Hmmm… nothing here",
     "no_recent_activity_description": "You haven't played any games recently. It's time to change that!",
     "display_name": "Display name",
@@ -383,9 +383,9 @@
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} achievements",
     "achievements_unlocked_for_game": "Unlocked {{achievementCount}} new achievements for {{gameTitle}}",
     "hidden_achievement_tooltip": "This is a hidden achievement",
-    "achievement_earn_points": "Earn {{points}} with this achievement"
+    "achievement_earn_points": "Earn {{points}} points with this achievement"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Hydra Cloud Subscription",
     "subscribe_now": "Subscribe now",
     "cloud_saving": "Cloud saving",

src/locales/es/translation.json

@@ -295,7 +295,7 @@
     "last_time_played": "Última vez jugado: {{period}}",
     "activity": "Actividad reciente",
     "library": "Biblioteca",
-    "total_play_time": "Total de tiempo jugado: {{amount}}",
+    "total_play_time": "Has jugado",
     "no_recent_activity_title": "Que raro, no hay nada por acá...",
     "no_recent_activity_description": "No has jugado ningún juego recientemente, ¡vamos a cambiar eso ahora!",
     "display_name": "Nombre en pantalla",
@@ -358,7 +358,8 @@
     "your_friend_code": "Tu código de amigo:",
     "upload_banner": "Subir un banner",
     "uploading_banner": "Subiendo banner…",
-    "background_image_updated": "Imagen de fondo actualizada"
+    "background_image_updated": "Imagen de fondo actualizada",
+    "playing": "Jugando {{game}}"
   },
   "achievement": {
     "achievement_unlocked": "Logro desbloqueado",
@@ -370,7 +371,7 @@
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} logros",
     "achievements_unlocked_for_game": "Se han desbloqueado {{achievementCount}} nuevos logros de {{gameTitle}}"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Suscripción Hydra Cloud",
     "subscribe_now": "Suscribirse ahora",
     "cloud_saving": "Guardado en la nube",

src/locales/et/translation.json

@@ -290,7 +290,7 @@
     "last_time_played": "Viimati mängitud {{period}}",
     "activity": "Hiljutine aktiivsus",
     "library": "Kogu",
-    "total_play_time": "Kogu mängitud aeg: {{amount}}",
+    "total_play_time": "Kogu mängitud aeg",
     "no_recent_activity_title": "Hmmm… siin pole midagi",
     "no_recent_activity_description": "Sa pole hiljuti ühtegi mängu mänginud. On aeg seda muuta!",
     "display_name": "Kuvatav nimi",
@@ -363,7 +363,7 @@
     "subscription_needed": "Selle sisu nägemiseks on vaja Hydra Cloud tellimust",
     "new_achievements_unlocked": "Avatud {{achievementCount}} uut saavutust {{gameCount}} mängust"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Hydra Cloud Tellimus",
     "subscribe_now": "Telli kohe",
     "cloud_saving": "Pilvesalvestus",

src/locales/id/translation.json

@@ -224,7 +224,7 @@
     "last_time_played": "Terakhir dimainkan {{period}}",
     "activity": "Aktivitas terbaru",
     "library": "Perpustakaan",
-    "total_play_time": "Total waktu bermain: {{amount}}",
+    "total_play_time": "Total waktu bermain",
     "no_recent_activity_title": "Hmm… kosong di sini",
     "no_recent_activity_description": "Kamu belum main game baru-baru ini. Yuk, mulai main!",
     "display_name": "Nama tampilan",

src/locales/kk/translation.json

@@ -220,7 +220,7 @@
     "last_time_played": "Соңғы ойын {{period}}",
     "activity": "Соңғы әрекет",
     "library": "Кітапхана",
-    "total_play_time": "Барлығы ойнаған: {{amount}}",
+    "total_play_time": "Барлығы ойнаған",
     "no_recent_activity_title": "Хммм... Мұнда ештеңе жоқ",
     "no_recent_activity_description": "Сіз ұзақ уақыт бойы ештеңе ойнаған жоқсыз. Мұны өзгерту керек!",
     "display_name": "Көрсету аты",

src/locales/nb/translation.json

@@ -251,7 +251,7 @@
     "last_time_played": "Sist spilt {{period}}",
     "activity": "Seneste aktivitet",
     "library": "Bibliotek",
-    "total_play_time": "Samlet spilltid: {{amount}}",
+    "total_play_time": "Samlet spilltid",
     "no_recent_activity_title": "Hmmm… ikke noe her",
     "no_recent_activity_description": "Du har ikke spilt noen spill for på det seneste. Det er det på tide at endre på!",
     "display_name": "Brukernavn",

src/locales/pt-BR/translation.json

@@ -158,7 +158,7 @@
     "no_download_option_info": "Sem informações disponíveis",
     "backup_deletion_failed": "Falha ao apagar backup",
     "max_number_of_artifacts_reached": "Número máximo de backups atingido para este jogo",
-    "achievements_not_sync": "Suas conquistas não estão sincronizadas",
+    "achievements_not_sync": "Veja como exibir suas conquistas no perfil",
     "backup_from": "Backup de {{date}}",
     "custom_backup_location_set": "Localização customizada selecionada",
     "select_folder": "Selecione a pasta",
@@ -300,7 +300,7 @@
     "last_time_played": "Última sessão {{period}}",
     "activity": "Atividades recentes",
     "library": "Biblioteca",
-    "total_play_time": "Tempo de jogo: {{amount}}",
+    "total_play_time": "Tempo total de jogo",
     "no_recent_activity_title": "Hmmm… nada por aqui",
     "no_recent_activity_description": "Parece que você não jogou nada recentemente. Que tal começar agora?",
     "display_name": "Nome de exibição",
@@ -367,7 +367,8 @@
     "stats": "Estatísticas",
     "achievements": "Conquistas",
     "games": "Jogos",
-    "ranking_updated_weekly": "Ranking é atualizado semanalmente"
+    "ranking_updated_weekly": "Ranking é atualizado semanalmente",
+    "playing": "Jogando {{game}}"
   },
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",
@@ -379,9 +380,9 @@
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} conquistas",
     "achievements_unlocked_for_game": "Desbloqueadas {{achievementCount}} novas conquistas em {{gameTitle}}",
     "hidden_achievement_tooltip": "Está é uma conquista oculta",
-    "achievement_earn_points": "Ganhe {{points}} com essa conquista"
+    "achievement_earn_points": "Ganhe {{points}} pontos com essa conquista"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Assinatura Hydra Cloud",
     "subscribe_now": "Inscreva-se agora",
     "cloud_achievements": "Salvamento de conquistas em nuvem",

src/locales/pt-PT/translation.json

@@ -287,7 +287,7 @@
     "last_time_played": "Última sessão {{period}}",
     "activity": "Atividade recente",
     "library": "Biblioteca",
-    "total_play_time": "Tempo total de jogo: {{amount}}",
+    "total_play_time": "Tempo total de jogo",
     "no_recent_activity_title": "Hmmm… não há nada por aqui",
     "no_recent_activity_description": "Parece que não jogaste nada recentemente. Que tal começar agora?",
     "display_name": "Nome de apresentação",
@@ -360,7 +360,7 @@
     "subscription_needed": "Precisas de uma subscrição Hydra Cloud para visualizar este conteúdo",
     "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Subscrição Hydra Cloud",
     "subscribe_now": "Subscreve agora",
     "cloud_achievements": "Gravação de conquistas na nuvem",

src/locales/ru/translation.json

@@ -294,7 +294,7 @@
     "last_time_played": "Последняя игра {{period}}",
     "activity": "Недавняя активность",
     "library": "Библиотека",
-    "total_play_time": "Всего сыграно: {{amount}}",
+    "total_play_time": "Всего сыграно",
     "no_recent_activity_title": "Хммм... Тут ничего нет",
     "no_recent_activity_description": "Вы давно ни во что не играли. Пора это изменить!",
     "display_name": "Отображаемое имя",
@@ -365,7 +365,7 @@
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} достижений",
     "achievements_unlocked_for_game": "Разблокировано {{achievementCount}} новых достижений для {{gameTitle}}"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Подписка Hydra Cloud",
     "subscribe_now": "Подпишитесь прямо сейчас",
     "cloud_saving": "Сохранение в облаке",

src/locales/uk/translation.json

@@ -231,7 +231,7 @@
     "sign_out_modal_text": "Ваша бібліотека пов'язана з поточним обліковим записом. При виході з системи ваша бібліотека буде недоступною, і прогрес не буде збережено. Продовжити вихід?",
     "sign_out_modal_title": "Ви впевнені?",
     "successfully_signed_out": "Успішний вихід з акаунту",
-    "total_play_time": "Всього зіграно: {{amount}}",
+    "total_play_time": "Всього зіграно",
     "try_again": "Будь ласка, попробуйте ще раз"
   }
 }

src/locales/zh/translation.json

@@ -290,7 +290,7 @@
     "last_time_played": "上次游玩时间 {{period}}",
     "activity": "近期活动",
     "library": "库",
-    "total_play_time": "总游戏时长: {{amount}}",
+    "total_play_time": "总游戏时长",
     "no_recent_activity_title": "Emmm… 这里暂时啥都没有",
     "no_recent_activity_description": "你最近没玩过任何游戏。是时候做出改变了!",
     "display_name": "昵称",
@@ -363,7 +363,7 @@
     "subscription_needed": "需要订阅 Hydra Cloud 才能看到此内容",
     "new_achievements_unlocked": "从 {{gameCount}} 游戏中解锁 {{achievementCount}} 新成就"
   },
-  "tour": {
+  "hydra_cloud": {
     "subscription_tour_title": "Hydra 云订阅",
     "subscribe_now": "现在订购",
     "cloud_saving": "云存档",

src/renderer/src/app.tsx

@@ -29,6 +29,8 @@ import { UserFriendModal } from "./pages/shared-modals/user-friend-modal";
 import { downloadSourcesWorker } from "./workers";
 import { repacksContext } from "./context";
 import { logger } from "./logger";
+import { useSubscription } from "./hooks/use-subscription";
+import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal";
 
 export interface AppProps {
   children: React.ReactNode;
@@ -47,21 +49,21 @@ export function App() {
   const { indexRepacks } = useContext(repacksContext);
 
   const {
+    userDetails,
+    hasActiveSubscription,
     isFriendsModalVisible,
     friendRequetsModalTab,
     friendModalUserId,
     syncFriendRequests,
     hideFriendsModal,
-  } = useUserDetails();
-
-  const {
-    userDetails,
-    hasActiveSubscription,
     fetchUserDetails,
     updateUserDetails,
     clearUserDetails,
   } = useUserDetails();
 
+  const { hideHydraCloudModal, showHydraCloudModal, isHydraCloudModalVisible } =
+    useSubscription();
+
   const dispatch = useAppDispatch();
 
   const navigate = useNavigate();
@@ -308,6 +310,11 @@ export function App() {
         onClose={handleToastClose}
       />
 
+      <HydraCloudModal
+        visible={isHydraCloudModalVisible}
+        onClose={hideHydraCloudModal}
+      />
+
       {userDetails && (
         <UserFriendModal
           visible={isFriendsModalVisible}

src/renderer/src/context/game-details/game-details.context.tsx

@@ -53,7 +53,6 @@ export const gameDetailsContext = createContext<GameDetailsContext>({
   setShowGameOptionsModal: () => {},
   setShowRepacksModal: () => {},
   setHasNSFWContentBlocked: () => {},
-  handleClickOpenCheckout: () => {},
 });
 
 const { Provider } = gameDetailsContext;
@@ -111,11 +110,6 @@ export function GameDetailsContextProvider({
     (state) => state.userPreferences.value
   );
 
-  const handleClickOpenCheckout = () => {
-    // TODO: show modal before redirecting to checkout page
-    window.electron.openCheckout();
-  };
-
   const updateGame = useCallback(async () => {
     return window.electron
       .getGameByObjectId(objectId!)
@@ -290,7 +284,6 @@ export function GameDetailsContextProvider({
         updateGame,
         setShowRepacksModal,
         setShowGameOptionsModal,
-        handleClickOpenCheckout,
       }}
     >
       {children}

src/renderer/src/context/game-details/game-details.context.types.ts

@@ -29,5 +29,4 @@ export interface GameDetailsContext {
   setShowRepacksModal: React.Dispatch<React.SetStateAction<boolean>>;
   setShowGameOptionsModal: React.Dispatch<React.SetStateAction<boolean>>;
   setHasNSFWContentBlocked: React.Dispatch<React.SetStateAction<boolean>>;
-  handleClickOpenCheckout: () => void;
 }

src/renderer/src/features/index.ts

@@ -6,3 +6,4 @@ export * from "./window-slice";
 export * from "./toast-slice";
 export * from "./user-details-slice";
 export * from "./running-game-slice";
+export * from "./subscription-slice";

src/renderer/src/features/subscription-slice.ts

@@ -0,0 +1,25 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface SubscriptionState {
+  isHydraCloudModalVisible: boolean;
+}
+
+const initialState: SubscriptionState = {
+  isHydraCloudModalVisible: false,
+};
+
+export const subscriptionSlice = createSlice({
+  name: "subscription",
+  initialState,
+  reducers: {
+    setHydraCloudModalVisible: (state) => {
+      state.isHydraCloudModalVisible = true;
+    },
+    setHydraCloudModalHidden: (state) => {
+      state.isHydraCloudModalVisible = false;
+    },
+  },
+});
+
+export const { setHydraCloudModalVisible, setHydraCloudModalHidden } =
+  subscriptionSlice.actions;

src/renderer/src/hooks/use-subscription.ts

@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+import { useAppDispatch, useAppSelector } from "./redux";
+import {
+  setHydraCloudModalVisible,
+  setHydraCloudModalHidden,
+} from "@renderer/features";
+
+export function useSubscription() {
+  const dispatch = useAppDispatch();
+
+  const { isHydraCloudModalVisible } = useAppSelector(
+    (state) => state.subscription
+  );
+
+  const showHydraCloudModal = useCallback(() => {
+    dispatch(setHydraCloudModalVisible());
+  }, [dispatch]);
+
+  const hideHydraCloudModal = useCallback(() => {
+    dispatch(setHydraCloudModalHidden());
+  }, [dispatch]);
+
+  return {
+    isHydraCloudModalVisible,
+    showHydraCloudModal,
+    hideHydraCloudModal,
+  };
+}

src/renderer/src/pages/achievements/achievement-list.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import * as styles from "./achievements.css";
 import { EyeClosedIcon } from "@primer/octicons-react";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
+import { useSubscription } from "@renderer/hooks/use-subscription";
+import { vars } from "@renderer/theme.css";
 
 interface AchievementListProps {
   achievements: UserAchievement[];
@@ -11,6 +13,7 @@ interface AchievementListProps {
 
 export function AchievementList({ achievements }: AchievementListProps) {
   const { t } = useTranslation("achievement");
+  const { showHydraCloudModal } = useSubscription();
   const { formatDateTime } = useDate();
 
   return (
@@ -41,7 +44,7 @@ export function AchievementList({ achievements }: AchievementListProps) {
             <p>{achievement.description}</p>
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-            {achievement.points && (
+            {achievement.points != undefined ? (
               <div
                 style={{ display: "flex", alignItems: "center", gap: "4px" }}
                 title={t("achievement_earn_points", {
@@ -51,6 +54,23 @@ export function AchievementList({ achievements }: AchievementListProps) {
                 <HydraIcon width={20} height={20} />
                 <p style={{ fontSize: "1.1em" }}>{achievement.points}</p>
               </div>
+            ) : (
+              <button
+                onClick={showHydraCloudModal}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  cursor: "pointer",
+                  color: vars.color.warning,
+                }}
+                title={t("achievement_earn_points", {
+                  points: "???",
+                })}
+              >
+                <HydraIcon width={20} height={20} />
+                <p style={{ fontSize: "1.1em" }}>???</p>
+              </button>
             )}
             {achievement.unlockTime && (
               <div

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -19,6 +19,7 @@ import * as styles from "./achievements.css";
 import { AchievementList } from "./achievement-list";
 import { AchievementPanel } from "./achievement-panel";
 import { ComparedAchievementPanel } from "./compared-achievement-panel";
+import { useSubscription } from "@renderer/hooks/use-subscription";
 
 interface UserInfo {
   id: string;
@@ -41,7 +42,7 @@ interface AchievementSummaryProps {
 function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
   const { t } = useTranslation("achievement");
   const { userDetails, hasActiveSubscription } = useUserDetails();
-  const { handleClickOpenCheckout } = useContext(gameDetailsContext);
+  const { showHydraCloudModal } = useSubscription();
 
   const getProfileImage = (
     user: Pick<UserInfo, "profileImageUrl" | "displayName">
@@ -92,7 +93,7 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
           <h3>
             <button
               className={styles.subscriptionRequiredButton}
-              onClick={handleClickOpenCheckout}
+              onClick={showHydraCloudModal}
             >
               {t("subscription_needed")}
             </button>

src/renderer/src/pages/game-details/game-details-content.tsx

@@ -14,6 +14,7 @@ import { steamUrlBuilder } from "@shared";
 
 import cloudIconAnimated from "@renderer/assets/icons/cloud-animated.gif";
 import { useUserDetails } from "@renderer/hooks";
+import { useSubscription } from "@renderer/hooks/use-subscription";
 
 const HERO_ANIMATION_THRESHOLD = 25;
 
@@ -31,9 +32,10 @@ export function GameDetailsContent() {
     gameColor,
     setGameColor,
     hasNSFWContentBlocked,
-    handleClickOpenCheckout,
   } = useContext(gameDetailsContext);
 
+  const { showHydraCloudModal } = useSubscription();
+
   const { userDetails, hasActiveSubscription } = useUserDetails();
 
   const { setShowCloudSyncModal, getGameArtifacts } =
@@ -104,7 +106,7 @@ export function GameDetailsContent() {
     }
 
     if (!hasActiveSubscription) {
-      handleClickOpenCheckout();
+      showHydraCloudModal();
       return;
     }
 

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -21,6 +21,8 @@ import { howLongToBeatEntriesTable } from "@renderer/dexie";
 import { SidebarSection } from "../sidebar-section/sidebar-section";
 import { buildGameAchievementPath } from "@renderer/helpers";
 import { SPACING_UNIT } from "@renderer/theme.css";
+import { useSubmit } from "react-router-dom";
+import { useSubscription } from "@renderer/hooks/use-subscription";
 
 const fakeAchievements: UserAchievement[] = [
   {
@@ -67,15 +69,10 @@ export function Sidebar() {
   const [activeRequirement, setActiveRequirement] =
     useState<keyof SteamAppDetails["pc_requirements"]>("minimum");
 
-  const {
+  const { gameTitle, shopDetails, objectId, shop, stats, achievements } =
-    gameTitle,
+    useContext(gameDetailsContext);
-    shopDetails,
+
-    objectId,
+  const { showHydraCloudModal } = useSubscription();
-    shop,
-    stats,
-    achievements,
-    handleClickOpenCheckout,
-  } = useContext(gameDetailsContext);
 
   const { t } = useTranslation("game_details");
   const { formatDateTime } = useDate();
@@ -179,7 +176,7 @@ export function Sidebar() {
             {!hasActiveSubscription && (
               <button
                 className={styles.subscriptionRequiredButton}
-                onClick={handleClickOpenCheckout}
+                onClick={showHydraCloudModal}
               >
                 <CloudOfflineIcon size={16} />
                 <span>{t("achievements_not_sync")}</span>

src/renderer/src/pages/profile/profile-content/profile-content.css.ts

@@ -203,3 +203,12 @@ export const achievementsProgressBar = style({
     borderRadius: "4px",
   },
 });
+
+export const link = style({
+  textAlign: "start",
+  color: vars.color.body,
+  ":hover": {
+    textDecoration: "underline",
+    cursor: "pointer",
+  },
+});

src/renderer/src/pages/profile/profile-content/user-stats-box.tsx

@@ -5,8 +5,11 @@ import { useTranslation } from "react-i18next";
 import { useFormat } from "@renderer/hooks";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
+import { useSubscription } from "@renderer/hooks/use-subscription";
 
 export function UserStatsBox() {
+  const { showHydraCloudModal } = useSubscription();
+
   const { userStats } = useContext(userProfileContext);
 
   const { t } = useTranslation("user_profile");
@@ -40,12 +43,19 @@ export function UserStatsBox() {
 
       <div className={styles.box}>
         <ul className={styles.list}>
-          {userStats.achievementsPointsEarnedSum && (
           <li>
             <h3 className={styles.listItemTitle}>{t("achievements")}</h3>
-              <div style={{ display: "flex", justifyContent: "space-between" }}>
+            {userStats.achievementsPointsEarnedSum !== undefined ? (
+              <>
+                <div
+                  style={{ display: "flex", justifyContent: "space-between" }}
+                >
                   <p
-                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px",
+                    }}
                   >
                     <HydraIcon width={20} height={20} />
                     {userStats.achievementsPointsEarnedSum.value}
@@ -58,19 +68,24 @@ export function UserStatsBox() {
                   </p>
                 </div>
                 <p>Unlock count: {userStats.unlockedAchievementSum}</p>
-            </li>
+              </>
+            ) : (
+              <button
+                type="button"
+                onClick={showHydraCloudModal}
+                className={styles.link}
+              >
+                <small>
+                  Saiba como exibir suas conquistas e pontos no perfil
+                </small>
+              </button>
             )}
+          </li>
 
           <li>
-            <h3 className={styles.listItemTitle}>{t("games")}</h3>
+            <h3 className={styles.listItemTitle}>{t("total_play_time")}</h3>
             <div style={{ display: "flex", justifyContent: "space-between" }}>
-              <p>
+              <p>{formatPlayTime(userStats.totalPlayTimeInSeconds.value)}</p>
-                {t("total_play_time", {
-                  amount: formatPlayTime(
-                    userStats.totalPlayTimeInSeconds.value
-                  ),
-                })}
-              </p>
               <p title={t("ranking_updated_weekly")}>
                 {t("top_percentile", {
                   percentile: userStats.totalPlayTimeInSeconds.topPercentile,

src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.css.ts

@@ -0,0 +1,79 @@
+import { SPACING_UNIT, vars } from "../../../theme.css";
+import { style } from "@vanilla-extract/css";
+
+export const friendListDisplayName = style({
+  fontWeight: "bold",
+  fontSize: vars.size.body,
+  textAlign: "left",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const friendListContainer = style({
+  display: "flex",
+  gap: `${SPACING_UNIT * 3}px`,
+  alignItems: "center",
+  borderRadius: "4px",
+  border: `solid 1px ${vars.color.border}`,
+  width: "100%",
+  height: "54px",
+  minHeight: "54px",
+  transition: "all ease 0.2s",
+  position: "relative",
+  ":hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+  },
+});
+
+export const friendListButton = style({
+  display: "flex",
+  alignItems: "center",
+  position: "absolute",
+  cursor: "pointer",
+  height: "100%",
+  width: "100%",
+  flexDirection: "row",
+  color: vars.color.body,
+  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
+  padding: `0 ${SPACING_UNIT}px`,
+});
+
+export const friendRequestItem = style({
+  color: vars.color.body,
+  ":hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+  },
+});
+
+export const acceptRequestButton = style({
+  cursor: "pointer",
+  color: vars.color.body,
+  width: "28px",
+  height: "28px",
+  ":hover": {
+    color: vars.color.success,
+  },
+});
+
+export const cancelRequestButton = style({
+  cursor: "pointer",
+  color: vars.color.body,
+  width: "28px",
+  height: "28px",
+  ":hover": {
+    color: vars.color.danger,
+  },
+});
+
+export const friendCodeButton = style({
+  color: vars.color.body,
+  cursor: "pointer",
+  display: "flex",
+  gap: `${SPACING_UNIT / 2}px`,
+  alignItems: "center",
+  transition: "all ease 0.2s",
+  ":hover": {
+    color: vars.color.muted,
+  },
+});

src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx

@@ -0,0 +1,36 @@
+import { Button, Modal } from "@renderer/components";
+import { SPACING_UNIT } from "@renderer/theme.css";
+import { useTranslation } from "react-i18next";
+
+export interface HydraCloudModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export const HydraCloudModal = ({ visible, onClose }: HydraCloudModalProps) => {
+  const { t } = useTranslation("hydra_cloud");
+
+  const handleClickOpenCheckout = () => {
+    window.electron.openCheckout();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={t("subscription_tour_title")}
+      onClose={onClose}
+    >
+      <div
+        style={{
+          display: "flex",
+          width: "500px",
+          flexDirection: "column",
+          gap: `${SPACING_UNIT * 2}px`,
+        }}
+      >
+        Você descobriu uma funcionalidade Hydra Cloud!
+        <Button onClick={handleClickOpenCheckout}>Saiba mais</Button>
+      </div>
+    </Modal>
+  );
+};

src/renderer/src/store.ts

@@ -8,6 +8,7 @@ import {
   toastSlice,
   userDetailsSlice,
   gameRunningSlice,
+  subscriptionSlice,
 } from "@renderer/features";
 
 export const store = configureStore({
@@ -20,6 +21,7 @@ export const store = configureStore({
     toast: toastSlice.reducer,
     userDetails: userDetailsSlice.reducer,
     gameRunning: gameRunningSlice.reducer,
+    subscription: subscriptionSlice.reducer,
   },
 });