fix: achievement panel when owner does not have the game

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

@@ -4,6 +4,7 @@ import * as styles from "./achievement-panel.css";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { ComparedAchievements } from "@types";
 import { SPACING_UNIT } from "@renderer/theme.css";
+import { useUserDetails } from "@renderer/hooks";
 
 export interface ComparedAchievementPanelProps {
   achievements: ComparedAchievements;
@@ -13,16 +14,14 @@ export function ComparedAchievementPanel({
   achievements,
 }: ComparedAchievementPanelProps) {
   const { t } = useTranslation("achievement");
+  const { hasActiveSubscription } = useUserDetails();
 
   return (
     <div
       className={styles.panel}
       style={{
         display: "grid",
-        gridTemplateColumns:
-          achievements.owner.achievementsPointsEarnedSum !== undefined
-            ? "3fr 1fr 1fr"
-            : "3fr 2fr",
+        gridTemplateColumns: hasActiveSubscription ? "3fr 1fr 1fr" : "3fr 2fr",
         gap: `${SPACING_UNIT * 2}px`,
       }}
     >
@@ -30,10 +29,10 @@ export function ComparedAchievementPanel({
         {t("available_points")} <HydraIcon width={20} height={20} />{" "}
         {achievements.achievementsPointsTotal}
       </div>
-      {achievements.owner.achievementsPointsEarnedSum !== undefined && (
+      {hasActiveSubscription && (
         <div className={styles.content}>
           <HydraIcon width={20} height={20} />
-          {achievements.owner.achievementsPointsEarnedSum}
+          {achievements.owner.achievementsPointsEarnedSum ?? 0}
         </div>
       )}
       <div className={styles.content}>