feat: adding background image upload

src/renderer/src/hooks/use-user-details.ts

@@ -70,7 +70,7 @@ export function useUserDetails() {
         subscription: userDetails?.subscription || null,
       });
     },
-    [updateUserDetails, userDetails?.username]
+    [updateUserDetails, userDetails?.username, userDetails?.subscription]
   );
 
   const syncFriendRequests = useCallback(async () => {
@@ -127,9 +127,9 @@ export function useUserDetails() {
 
   const blockUser = (userId: string) => window.electron.blockUser(userId);
 
-  const unblockUser = (userId: string) => {
-    return window.electron.unblockUser(userId);
-  };
+  const unblockUser = (userId: string) => window.electron.unblockUser(userId);
+
+  const hasActiveSubscription = userDetails?.subscription?.status === "active";
 
   return {
     userDetails,
@@ -139,6 +139,7 @@ export function useUserDetails() {
     friendRequetsModalTab,
     isFriendsModalVisible,
     friendModalUserId,
+    hasActiveSubscription,
     showFriendsModal,
     hideFriendsModal,
     fetchUserDetails,

src/renderer/src/main.tsx

@@ -19,11 +19,10 @@ import { App } from "./app";
 import { store } from "./store";
 
 import resources from "@locales";
-import { AchievementNotification } from "./pages/achievement/notification/achievement-notification";
+import { AchievementNotification } from "./pages/achievements/notification/achievement-notification";
 
 import "./workers";
 import { RepacksContextProvider } from "./context";
-import { Achievement } from "./pages/achievement/achievements";
 import { SuspenseWrapper } from "./components";
 
 const Home = React.lazy(() => import("./pages/home/home"));
@@ -35,6 +34,9 @@ const SearchResults = React.lazy(() => import("./pages/home/search-results"));
 const Settings = React.lazy(() => import("./pages/settings/settings"));
 const Catalogue = React.lazy(() => import("./pages/catalogue/catalogue"));
 const Profile = React.lazy(() => import("./pages/profile/profile"));
+const Achievements = React.lazy(
+  () => import("./pages/achievements/achievements")
+);
 
 Sentry.init({});
 
@@ -90,7 +92,10 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
                 path="/profile/:userId"
                 element={<SuspenseWrapper Component={Profile} />}
               />
-              <Route path="/achievements" Component={Achievement} />
+              <Route
+                path="/achievements"
+                element={<SuspenseWrapper Component={Achievements} />}
+              />
             </Route>
             <Route
               path="/achievement-notification"

src/renderer/src/pages/achievements/achievements.tsx

@@ -12,7 +12,7 @@ import { SkeletonTheme } from "react-loading-skeleton";
 import { AchievementsSkeleton } from "./achievements-skeleton";
 import { AchievementsContent } from "./achievements-content";
 
-export function Achievement() {
+export default function Achievements() {
   const [searchParams] = useSearchParams();
   const objectId = searchParams.get("objectId");
   const shop = searchParams.get("shop");
@@ -51,8 +51,6 @@ export function Achievement() {
     }
   }, [objectId, shop, userId]);
 
-  if (!objectId || !shop || !title) return null;
-
   const otherUserId = userDetails?.id === userId ? null : userId;
 
   const otherUser = otherUserId
@@ -66,9 +64,9 @@ export function Achievement() {
 
   return (
     <GameDetailsContextProvider
-      gameTitle={title}
+      gameTitle={title!}
       shop={shop as GameShop}
-      objectId={objectId}
+      objectId={objectId!}
     >
       <GameDetailsContextConsumer>
         {({ isLoading, achievements }) => {

src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx

@@ -11,7 +11,7 @@ import {
   ModalProps,
   TextField,
 } from "@renderer/components";
-import { useAppSelector, useToast, useUserDetails } from "@renderer/hooks";
+import { useToast, useUserDetails } from "@renderer/hooks";
 
 import { SPACING_UNIT } from "@renderer/theme.css";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -51,8 +51,8 @@ export function EditProfileModal(
 
   const { getUserProfile } = useContext(userProfileContext);
 
-  const { userDetails } = useAppSelector((state) => state.userDetails);
-  const { fetchUserDetails } = useUserDetails();
+  const { userDetails, fetchUserDetails, hasActiveSubscription } =
+    useUserDetails();
 
   useEffect(() => {
     if (userDetails) {
@@ -112,14 +112,18 @@ export function EditProfileModal(
                 if (filePaths && filePaths.length > 0) {
                   const path = filePaths[0];
 
-                  // const { imagePath } = await window.electron
-                  //   .processProfileImage(path)
-                  //   .catch(() => {
-                  //     showErrorToast(t("image_process_failure"));
-                  //     return { imagePath: null };
-                  //   });
+                  if (!hasActiveSubscription) {
+                    const { imagePath } = await window.electron
+                      .processProfileImage(path)
+                      .catch(() => {
+                        showErrorToast(t("image_process_failure"));
+                        return { imagePath: null };
+                      });
 
-                  onChange(path);
+                    onChange(imagePath);
+                  } else {
+                    onChange(path);
+                  }
                 }
               };
 

src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.tsx

@@ -9,6 +9,7 @@ import { useToast, useUserDetails } from "@renderer/hooks";
 export function UploadBackgroundImageButton() {
   const [isUploadingBackgroundImage, setIsUploadingBackgorundImage] =
     useState(false);
+  const { hasActiveSubscription } = useUserDetails();
 
   const { isMe, setSelectedBackgroundImage } = useContext(userProfileContext);
   const { patchUser } = useUserDetails();
@@ -42,7 +43,7 @@ export function UploadBackgroundImageButton() {
     }
   };
 
-  if (!isMe) return null;
+  if (!isMe || !hasActiveSubscription) return null;
 
   return (
     <Button