feat: hydra cloud modal

This commit is contained in:
Zamitto 2024-12-22 22:25:20 -03:00
parent fb8682e88d
commit 6db6c14016
12 changed files with 49 additions and 20 deletions

View File

@ -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"
}
}

View File

@ -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"
}
}

View File

@ -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 && (

View File

@ -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;

View File

@ -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(() => {
dispatch(setHydraCloudModalVisible());
}, [dispatch]);
const showHydraCloudModal = useCallback(
(feature: HydraCloudFeature) => {
dispatch(setHydraCloudModalVisible(feature));
},
[dispatch]
);
const hideHydraCloudModal = useCallback(() => {
dispatch(setHydraCloudModalHidden());
@ -22,6 +26,7 @@ export function useSubscription() {
return {
isHydraCloudModalVisible,
hydraCloudFeature: feature,
showHydraCloudModal,
hideHydraCloudModal,
};

View File

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

View File

@ -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 }}>

View File

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

View File

@ -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>

View File

@ -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>
)}

View File

@ -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>
);

View File

@ -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;