mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-02 16:23:48 +03:00
feat: hydra cloud modal
This commit is contained in:
parent
fb8682e88d
commit
6db6c14016
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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 && (
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
};
|
||||
|
@ -56,7 +56,7 @@ export function AchievementList({ achievements }: AchievementListProps) {
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={showHydraCloudModal}
|
||||
onClick={() => showHydraCloudModal("achievements")}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
@ -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 }}>
|
||||
|
@ -106,7 +106,7 @@ export function GameDetailsContent() {
|
||||
}
|
||||
|
||||
if (!hasActiveSubscription) {
|
||||
showHydraCloudModal();
|
||||
showHydraCloudModal("backup");
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user