feat: cloud ui

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);
-
-  return (
-    <>
+  if (!hasActiveSubscription) {
+    return (
       <div className={styles.panel}>
         <div className={styles.content}>
           {t("earned_points")} <HydraIcon width={20} height={20} />
-          {achievementsPointsEarnedSum} / {achievementsPointsTotal}
+          ??? / ???
         </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
-      visible={visible}
-      title={t("subscription_tour_title")}
-      onClose={onClose}
-    >
+    <Modal visible={visible} title={t("hydra_cloud")} 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>