feat: cloud ui

src/locales/en/translation.json

@@ -387,7 +387,8 @@
     "hidden_achievement_tooltip": "This is a hidden achievement",
     "achievement_earn_points": "Earn {{points}} points with this achievement",
     "earned_points": "Earned points:",
-    "available_points": "Available points:"
+    "available_points": "Available points:",
+    "how_to_earn_achievements_points": "How to earn achievements points?"
   },
   "hydra_cloud": {
     "subscription_tour_title": "Hydra Cloud Subscription",
@@ -397,6 +398,8 @@
     "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"
+    "animated_profile_banner": "Animated profile banner",
+    "hydra_cloud": "Hydra Cloud",
+    "hydra_cloud_feature_found": "You've just discovered a Hydra Cloud feature!"
   }
 }

src/locales/pt-BR/translation.json

@@ -384,16 +384,19 @@
     "hidden_achievement_tooltip": "Está é uma conquista oculta",
     "achievement_earn_points": "Ganhe {{points}} pontos com essa conquista",
     "earned_points": "Pontos ganhos:",
-    "available_points": "Pontos disponíveis:"
+    "available_points": "Pontos disponíveis:",
+    "how_to_earn_achievements_points": "Como desbloquear pontos nas conquistas?"
   },
   "hydra_cloud": {
     "subscription_tour_title": "Assinatura Hydra Cloud",
+    "hydra_cloud": "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",
-    "cloud_saving": "Saves de jogos em nuvem"
+    "cloud_saving": "Saves de jogos em nuvem",
+    "hydra_cloud_feature_found": "Você descobriu uma funcionalidade Hydra Cloud!"
   }
 }

src/renderer/src/pages/achievements/achievement-panel.css.ts

@@ -8,7 +8,8 @@ export const panel = style({
   padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
   backgroundColor: vars.color.background,
   display: "flex",
-  alignItems: "center",
+  flexDirection: "column",
+  alignItems: "start",
   justifyContent: "space-between",
   borderBottom: `solid 1px ${vars.color.border}`,
 });
@@ -59,3 +60,12 @@ export const progressBar = recipe({
     },
   },
 });
+
+export const link = style({
+  textAlign: "start",
+  color: vars.color.body,
+  ":hover": {
+    textDecoration: "underline",
+    cursor: "pointer",
+  },
+});

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

@@ -1,10 +1,10 @@
-import { useContext } from "react";
 import { useTranslation } from "react-i18next";
-import { gameDetailsContext } from "@renderer/context";
-import * as styles from "./achievement-panel.css";
-
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { UserAchievement } from "@types";
+import { useSubscription } from "@renderer/hooks/use-subscription";
+import { useUserDetails } from "@renderer/hooks";
+import { vars } from "@renderer/theme.css";
+import * as styles from "./achievement-panel.css";
 
 export interface AchievementPanelProps {
   achievements: UserAchievement[];
@@ -12,6 +12,8 @@ export interface AchievementPanelProps {
 
 export function AchievementPanel({ achievements }: AchievementPanelProps) {
   const { t } = useTranslation("achievement");
+  const { hasActiveSubscription } = useUserDetails();
+  const { showHydraCloudModal } = useSubscription();
 
   const achievementsPointsTotal = achievements.reduce(
     (acc, achievement) => acc + (achievement.points ?? 0),
@@ -24,16 +26,32 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
     0
   );
 
-  const {} = useContext(gameDetailsContext);
+  if (!hasActiveSubscription) {
+    return (
+      <div className={styles.panel}>
+        <div className={styles.content}>
+          {t("earned_points")} <HydraIcon width={20} height={20} />
+          ??? / ???
+        </div>
+        <button
+          type="button"
+          onClick={showHydraCloudModal}
+          className={styles.link}
+        >
+          <small style={{ color: vars.color.warning }}>
+            {t("how_to_earn_achievements_points")}
+          </small>
+        </button>
+      </div>
+    );
+  }
 
   return (
-    <>
     <div className={styles.panel}>
       <div className={styles.content}>
         {t("earned_points")} <HydraIcon width={20} height={20} />
         {achievementsPointsEarnedSum} / {achievementsPointsTotal}
       </div>
     </div>
-    </>
   );
 }

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

@@ -15,11 +15,7 @@ export const HydraCloudModal = ({ visible, onClose }: HydraCloudModalProps) => {
   };
 
   return (
-    <Modal
+    <Modal visible={visible} title={t("hydra_cloud")} onClose={onClose}>
-      visible={visible}
-      title={t("subscription_tour_title")}
-      onClose={onClose}
-    >
       <div
         style={{
           display: "flex",
@@ -28,7 +24,7 @@ export const HydraCloudModal = ({ visible, onClose }: HydraCloudModalProps) => {
           gap: `${SPACING_UNIT * 2}px`,
         }}
       >
-        Você descobriu uma funcionalidade Hydra Cloud!
+        {t("hydra_cloud_feature_found")}
         <Button onClick={handleClickOpenCheckout}>Saiba mais</Button>
       </div>
     </Modal>