diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 51aa7b7e..e4a795d1 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -160,7 +160,8 @@ "wine_prefix_description": "The Wine prefix used to run this game", "no_download_option_info": "No information available", "backup_deletion_failed": "Failed to delete backup", - "max_number_of_artifacts_reached": "Maximum number of backups reached for this game" + "max_number_of_artifacts_reached": "Maximum number of backups reached for this game", + "achievements_not_sync": "Your achievements are not synchronized" }, "activation": { "title": "Activate Hydra", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 839fd969..32d1ca26 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -156,7 +156,8 @@ "wine_prefix_description": "O prefixo Wine que foi utilizado para instalar o jogo", "no_download_option_info": "Sem informações disponíveis", "backup_deletion_failed": "Falha ao apagar backup", - "max_number_of_artifacts_reached": "Número máximo de backups atingido para este jogo" + "max_number_of_artifacts_reached": "Número máximo de backups atingido para este jogo", + "achievements_not_sync": "Suas conquistas não estão sincronizadas" }, "activation": { "title": "Ativação", diff --git a/src/renderer/src/context/game-details/game-details.context.tsx b/src/renderer/src/context/game-details/game-details.context.tsx index 1cd8a529..77aaab5d 100644 --- a/src/renderer/src/context/game-details/game-details.context.tsx +++ b/src/renderer/src/context/game-details/game-details.context.tsx @@ -53,6 +53,7 @@ export const gameDetailsContext = createContext({ setShowGameOptionsModal: () => {}, setShowRepacksModal: () => {}, setHasNSFWContentBlocked: () => {}, + handleClickOpenCheckout: () => {}, }); const { Provider } = gameDetailsContext; @@ -110,6 +111,11 @@ export function GameDetailsContextProvider({ (state) => state.userPreferences.value ); + const handleClickOpenCheckout = () => { + // TODO: show modal before redirecting to checkout page + window.electron.openCheckout(); + }; + const updateGame = useCallback(async () => { return window.electron .getGameByObjectId(objectId!) @@ -282,6 +288,7 @@ export function GameDetailsContextProvider({ updateGame, setShowRepacksModal, setShowGameOptionsModal, + handleClickOpenCheckout, }} > {children} diff --git a/src/renderer/src/context/game-details/game-details.context.types.ts b/src/renderer/src/context/game-details/game-details.context.types.ts index 49718430..842065cc 100644 --- a/src/renderer/src/context/game-details/game-details.context.types.ts +++ b/src/renderer/src/context/game-details/game-details.context.types.ts @@ -29,4 +29,5 @@ export interface GameDetailsContext { setShowRepacksModal: React.Dispatch>; setShowGameOptionsModal: React.Dispatch>; setHasNSFWContentBlocked: React.Dispatch>; + handleClickOpenCheckout: () => void; } diff --git a/src/renderer/src/pages/game-details/game-details-content.tsx b/src/renderer/src/pages/game-details/game-details-content.tsx index 6e26c5ca..28102854 100644 --- a/src/renderer/src/pages/game-details/game-details-content.tsx +++ b/src/renderer/src/pages/game-details/game-details-content.tsx @@ -32,6 +32,7 @@ export function GameDetailsContent() { gameColor, setGameColor, hasNSFWContentBlocked, + handleClickOpenCheckout, } = useContext(gameDetailsContext); const { userDetails, hasActiveSubscription } = useUserDetails(); @@ -104,7 +105,7 @@ export function GameDetailsContent() { } if (!hasActiveSubscription) { - window.electron.openCheckout(); + handleClickOpenCheckout(); return; } diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts index 1f0e0515..aa27cd42 100644 --- a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts +++ b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts @@ -154,3 +154,16 @@ export const listItemImage = recipe({ }, }, }); + +export const subscriptionRequiredButton = style({ + textDecoration: "none", + display: "flex", + justifyContent: "center", + width: "100%", + gap: `${SPACING_UNIT / 2}px`, + color: vars.color.warning, + cursor: "pointer", + ":hover": { + textDecoration: "underline", + }, +}); diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx index a6a24850..07443fee 100644 --- a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx +++ b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx @@ -10,12 +10,17 @@ import { Button, Link } from "@renderer/components"; import * as styles from "./sidebar.css"; import { gameDetailsContext } from "@renderer/context"; import { useDate, useFormat, useUserDetails } from "@renderer/hooks"; -import { DownloadIcon, LockIcon, PeopleIcon } from "@primer/octicons-react"; +import { + CloudOfflineIcon, + DownloadIcon, + LockIcon, + PeopleIcon, +} from "@primer/octicons-react"; import { HowLongToBeatSection } from "./how-long-to-beat-section"; import { howLongToBeatEntriesTable } from "@renderer/dexie"; import { SidebarSection } from "../sidebar-section/sidebar-section"; import { buildGameAchievementPath } from "@renderer/helpers"; -import { SPACING_UNIT } from "@renderer/theme.css"; +import { SPACING_UNIT, vars } from "@renderer/theme.css"; const fakeAchievements: UserAchievement[] = [ { @@ -57,13 +62,20 @@ export function Sidebar() { data: HowLongToBeatCategory[] | null; }>({ isLoading: true, data: null }); - const { userDetails } = useUserDetails(); + const { userDetails, hasActiveSubscription } = useUserDetails(); const [activeRequirement, setActiveRequirement] = useState("minimum"); - const { gameTitle, shopDetails, objectId, shop, stats, achievements } = - useContext(gameDetailsContext); + const { + gameTitle, + shopDetails, + objectId, + shop, + stats, + achievements, + handleClickOpenCheckout, + } = useContext(gameDetailsContext); const { t } = useTranslation("game_details"); const { formatDateTime } = useDate(); @@ -162,6 +174,16 @@ export function Sidebar() { })} >
    + {!hasActiveSubscription && ( + + )} + {achievements.slice(0, 4).map((achievement, index) => (