fix: achievement panel when owner does not have the game

This commit is contained in:
Zamitto 2024-12-23 00:00:10 -03:00
parent b8c456eb71
commit 8f169ee113

View File

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