feat: show buttons to open checkout

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",

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",

src/renderer/src/context/game-details/game-details.context.tsx

@@ -53,6 +53,7 @@ export const gameDetailsContext = createContext<GameDetailsContext>({
   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}

src/renderer/src/context/game-details/game-details.context.types.ts

@@ -29,4 +29,5 @@ export interface GameDetailsContext {
   setShowRepacksModal: React.Dispatch<React.SetStateAction<boolean>>;
   setShowGameOptionsModal: React.Dispatch<React.SetStateAction<boolean>>;
   setHasNSFWContentBlocked: React.Dispatch<React.SetStateAction<boolean>>;
+  handleClickOpenCheckout: () => void;
 }

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

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",
+  },
+});

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<keyof SteamAppDetails["pc_requirements"]>("minimum");
 
-  const { gameTitle, shopDetails, objectId, shop, stats, achievements } =
+  const {
-    useContext(gameDetailsContext);
+    gameTitle,
+    shopDetails,
+    objectId,
+    shop,
+    stats,
+    achievements,
+    handleClickOpenCheckout,
+  } = useContext(gameDetailsContext);
 
   const { t } = useTranslation("game_details");
   const { formatDateTime } = useDate();
@@ -162,6 +174,16 @@ export function Sidebar() {
           })}
         >
           <ul className={styles.list}>
+            {!hasActiveSubscription && (
+              <button
+                className={styles.subscriptionRequiredButton}
+                onClick={handleClickOpenCheckout}
+              >
+                <CloudOfflineIcon size={16} />
+                <span>{t("achievements_not_sync")}</span>
+              </button>
+            )}
+
             {achievements.slice(0, 4).map((achievement, index) => (
               <li key={index}>
                 <Link