feat: hydra cloud modal

src/locales/en/translation.json

@@ -373,7 +373,8 @@
     "playing": "Playing {{game}}",
     "achievements_unlocked": "Achievements Unlocked",
     "earned_points": "Earned points",
-    "show_achievements_on_profile": "Show your achievements and earned points on your profile"
+    "show_achievements_on_profile": "Show your achievements on your profile",
+    "show_points_on_profile": "Show your earned points on your profile"
   },
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",
@@ -400,6 +401,7 @@
     "show_and_compare_achievements": "Show and compare your achievements to other users",
     "animated_profile_banner": "Animated profile banner",
     "hydra_cloud": "Hydra Cloud",
-    "hydra_cloud_feature_found": "You've just discovered a Hydra Cloud feature!"
+    "hydra_cloud_feature_found": "You've just discovered a Hydra Cloud feature!",
+    "learn_more": "Learn More"
   }
 }

src/locales/pt-BR/translation.json

@@ -373,7 +373,8 @@
     "playing": "Jogando {{game}}",
     "achievements_unlocked": "Conquistas desbloqueadas",
     "earned_points": "Pontos ganhos",
-    "show_achievements_on_profile": "Exiba suas conquistas e pontos no perfil"
+    "show_achievements_on_profile": "Exiba suas conquistas no perfil",
+    "show_points_on_profile": "Exiba seus pontos ganhos no perfil"
   },
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",
@@ -400,6 +401,7 @@
     "show_and_compare_achievements": "Exiba e compare suas conquistas com outros usuários",
     "animated_profile_banner": "Banner animado no perfil",
     "cloud_saving": "Saves de jogos em nuvem",
-    "hydra_cloud_feature_found": "Você descobriu uma funcionalidade Hydra Cloud!"
+    "hydra_cloud_feature_found": "Você descobriu uma funcionalidade Hydra Cloud!",
+    "learn_more": "Saiba mais"
   }
 }

src/renderer/src/app.tsx

@@ -58,7 +58,8 @@ export function App() {
     clearUserDetails,
   } = useUserDetails();
 
-  const { hideHydraCloudModal, isHydraCloudModalVisible } = useSubscription();
+  const { hideHydraCloudModal, isHydraCloudModalVisible, hydraCloudFeature } =
+    useSubscription();
 
   const dispatch = useAppDispatch();
 
@@ -252,6 +253,7 @@ export function App() {
       <HydraCloudModal
         visible={isHydraCloudModalVisible}
         onClose={hideHydraCloudModal}
+        feature={hydraCloudFeature}
       />
 
       {userDetails && (

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

@@ -1,19 +1,26 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import type { HydraCloudFeature } from "@types";
 
 export interface SubscriptionState {
   isHydraCloudModalVisible: boolean;
+  feature: HydraCloudFeature | "";
 }
 
 const initialState: SubscriptionState = {
   isHydraCloudModalVisible: false,
+  feature: "",
 };
 
 export const subscriptionSlice = createSlice({
   name: "subscription",
   initialState,
   reducers: {
-    setHydraCloudModalVisible: (state) => {
+    setHydraCloudModalVisible: (
+      state,
+      action: PayloadAction<HydraCloudFeature>
+    ) => {
       state.isHydraCloudModalVisible = true;
+      state.feature = action.payload;
     },
     setHydraCloudModalHidden: (state) => {
       state.isHydraCloudModalVisible = false;

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

@@ -4,17 +4,21 @@ import {
   setHydraCloudModalVisible,
   setHydraCloudModalHidden,
 } from "@renderer/features";
+import { HydraCloudFeature } from "@types";
 
 export function useSubscription() {
   const dispatch = useAppDispatch();
 
-  const { isHydraCloudModalVisible } = useAppSelector(
+  const { isHydraCloudModalVisible, feature } = useAppSelector(
     (state) => state.subscription
   );
 
-  const showHydraCloudModal = useCallback(() => {
+  const showHydraCloudModal = useCallback(
-    dispatch(setHydraCloudModalVisible());
+    (feature: HydraCloudFeature) => {
-  }, [dispatch]);
+      dispatch(setHydraCloudModalVisible(feature));
+    },
+    [dispatch]
+  );
 
   const hideHydraCloudModal = useCallback(() => {
     dispatch(setHydraCloudModalHidden());
@@ -22,6 +26,7 @@ export function useSubscription() {
 
   return {
     isHydraCloudModalVisible,
+    hydraCloudFeature: feature,
     showHydraCloudModal,
     hideHydraCloudModal,
   };

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

@@ -56,7 +56,7 @@ export function AchievementList({ achievements }: AchievementListProps) {
               </div>
             ) : (
               <button
-                onClick={showHydraCloudModal}
+                onClick={() => showHydraCloudModal("achievements")}
                 style={{
                   display: "flex",
                   alignItems: "center",

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

@@ -35,7 +35,7 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
         </div>
         <button
           type="button"
-          onClick={showHydraCloudModal}
+          onClick={() => showHydraCloudModal("achievements-points")}
           className={styles.link}
         >
           <small style={{ color: vars.color.warning }}>

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

@@ -106,7 +106,7 @@ export function GameDetailsContent() {
     }
 
     if (!hasActiveSubscription) {
-      showHydraCloudModal();
+      showHydraCloudModal("backup");
       return;
     }
 

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

@@ -175,7 +175,7 @@ export function Sidebar() {
             {!hasActiveSubscription && (
               <button
                 className={styles.subscriptionRequiredButton}
-                onClick={showHydraCloudModal}
+                onClick={() => showHydraCloudModal("achievements")}
               >
                 <CloudOfflineIcon size={16} />
                 <span>{t("achievements_not_sync")}</span>

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

@@ -59,7 +59,7 @@ export function UserStatsBox() {
               ) : (
                 <button
                   type="button"
-                  onClick={showHydraCloudModal}
+                  onClick={() => showHydraCloudModal("achievements")}
                   className={styles.link}
                 >
                   <small style={{ color: vars.color.warning }}>
@@ -93,11 +93,11 @@ export function UserStatsBox() {
               ) : (
                 <button
                   type="button"
-                  onClick={showHydraCloudModal}
+                  onClick={() => showHydraCloudModal("achievements-points")}
                   className={styles.link}
                 >
                   <small style={{ color: vars.color.warning }}>
-                    {t("show_achievements_on_profile")}
+                    {t("show_points_on_profile")}
                   </small>
                 </button>
               )}

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

@@ -3,11 +3,16 @@ import { SPACING_UNIT } from "@renderer/theme.css";
 import { useTranslation } from "react-i18next";
 
 export interface HydraCloudModalProps {
+  feature: string;
   visible: boolean;
   onClose: () => void;
 }
 
-export const HydraCloudModal = ({ visible, onClose }: HydraCloudModalProps) => {
+export const HydraCloudModal = ({
+  feature,
+  visible,
+  onClose,
+}: HydraCloudModalProps) => {
   const { t } = useTranslation("hydra_cloud");
 
   const handleClickOpenCheckout = () => {
@@ -17,6 +22,7 @@ export const HydraCloudModal = ({ visible, onClose }: HydraCloudModalProps) => {
   return (
     <Modal visible={visible} title={t("hydra_cloud")} onClose={onClose}>
       <div
+        data-hydra-cloud-feature={feature}
         style={{
           display: "flex",
           width: "500px",
@@ -25,7 +31,7 @@ export const HydraCloudModal = ({ visible, onClose }: HydraCloudModalProps) => {
         }}
       >
         {t("hydra_cloud_feature_found")}
-        <Button onClick={handleClickOpenCheckout}>Saiba mais</Button>
+        <Button onClick={handleClickOpenCheckout}>{t("learn_more")}</Button>
       </div>
     </Modal>
   );

src/types/index.ts

@@ -14,6 +14,11 @@ export type GameShop = "steam" | "epic";
 
 export type FriendRequestAction = "ACCEPTED" | "REFUSED" | "CANCEL";
 
+export type HydraCloudFeature =
+  | "achievements"
+  | "backup"
+  | "achievements-points";
+
 export interface GameRepack {
   id: number;
   title: string;