Merge pull request #2020 from candela97/fix-waitlist-dropdown-addtowi…

…shlist Fix waitlist dropdown add-to-wishlist option
IsThereAnyDeal · Aug 24, 2024 · 57e4407 · 57e4407
2 parents 897bdee + b8a3e74
commit 57e4407
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 47 deletions.
diff --git a/src/css/augmentedsteam.css b/src/css/augmentedsteam.css
@@ -951,6 +951,11 @@ video.highlight_movie:hover + .html5_video_overlay {
 .queue_btn_menu.on_waitlist #queue_menu_option_on_waitlist .queue_ignore_menu_option_image.selected {
   display: inline-block;
 }
+.es-loading-wl {
+  width: 16px;
+  /* Makes the image more consistent with others */
+  filter: brightness(350%);
+}
 .queue_actions_ctn:not(.loading) .as_btn_wishlist a:hover img.es-remove-wl {
   display: inline !important;
 }

diff --git a/src/js/Content/Features/Common/FSkipAgecheck.ts b/src/js/Content/Features/Common/FSkipAgecheck.ts
@@ -1,5 +1,5 @@
 import Feature from "@Content/Modules/Context/Feature";
-import type CApp from "@Content/Features/Store/App/CApp";
+import type CApp from "@Content/Features/Community/App/CApp";
 import type CAgeCheck from "@Content/Features/Store/AgeCheck/CAgecheck";
 import Settings from "@Options/Data/Settings";
 import ContextType from "@Content/Modules/Context/ContextType";

diff --git a/src/js/Content/Features/Store/App/FWaitlistDropdown.ts b/src/js/Content/Features/Store/App/FWaitlistDropdown.ts
@@ -100,8 +100,8 @@ export default class FWaitlistDropdown extends Feature<CApp> {
         // Check response of ajax calls before updating button status
         DOMHelper.insertScript("scriptlets/Store/App/wishlistHandlers.js");
 
-        let wishlisted = wishlistArea.style.display === "none";
-        let waitlisted = (await ITADApiFacade.inWaitlist([this.context.storeid]))[this.context.storeid] ?? false;
+        let wishlisted: boolean = wishlistArea.style.display === "none";
+        let waitlisted: boolean = (await ITADApiFacade.inWaitlist([this.context.storeid]))[this.context.storeid] ?? false;
 
         const menu = parent.querySelector(".as_btn_wishlist_menu")!;
         const menuArrow = menu.querySelector(".queue_menu_arrow")!;
@@ -115,7 +115,7 @@ export default class FWaitlistDropdown extends Feature<CApp> {
         function updateDiv() {
             parent!.classList.remove("loading");
 
-            const oneActive = Boolean(wishlisted) || Boolean(waitlisted);
+            const oneActive = wishlisted || waitlisted;
 
             menuArrow.classList.toggle("queue_btn_active", oneActive);
 
@@ -156,18 +156,18 @@ export default class FWaitlistDropdown extends Feature<CApp> {
             if (parent.classList.contains("loading")) { return; }
             parent.classList.add("loading");
 
-            const result = await (new Promise<boolean>(resolve => {
+            await new Promise<void>(resolve => {
                 // @ts-expect-error
-                document.addEventListener("addRemoveWishlist",
-                    (e: CustomEvent<boolean>) => resolve(e.detail)),
-                    {once: true}
-            }));
-            if (result) {
-                wishlisted = !wishlisted;
-                updateDiv();
-            } else {
-                parent.classList.remove("loading");
-            }
+                document.addEventListener("addRemoveWishlist", (e: CustomEvent<boolean>) => {
+                    if (e.detail) {
+                        wishlisted = !wishlisted;
+                        updateDiv();
+                    } else {
+                        parent.classList.remove("loading");
+                    }
+                    resolve();
+                }, {once: true});
+            });
         });
 
         // Click remove-from-wishlist, remove from both wishlist and waitlist
@@ -182,8 +182,11 @@ export default class FWaitlistDropdown extends Feature<CApp> {
 
             if (wishlisted) {
                 await new Promise<void>(resolve => {
-                    document.addEventListener("addRemoveWishlist", () => {
-                        wishlisted = !wishlisted;
+                    // @ts-expect-error
+                    document.addEventListener("addRemoveWishlist", (e: CustomEvent<boolean>) => {
+                        if (e.detail) {
+                            wishlisted = !wishlisted;
+                        }
                         resolve();
                     }, {once: true});
                 });
@@ -198,35 +201,43 @@ export default class FWaitlistDropdown extends Feature<CApp> {
         });
 
         wishlistOption.addEventListener("click", async() => {
-            if (wishlisted) {
-                if (parent.classList.contains("loading")) { return; }
-                parent.classList.add("loading");
+            if (parent.classList.contains("loading")) { return; }
+            parent.classList.add("loading");
 
-                await new Promise<void>(resolve => {
-                    // @ts-ignore
-                    document.addEventListener("addRemoveWishlist", (e: CustomEvent<boolean>) => {
-                        if (e.detail) {
-                            wishlisted = !wishlisted;
-                            updateDiv();
-                        } else {
-                            parent.classList.remove("loading");
-                        }
-                        resolve();
-                    }, {once: true});
+            /**
+             * For removing, use Steam's method so wishlist count is updated and dynamic store cache invalidated.
+             * For adding, dispatching a click event to execute the inline `javascript:` link in `addBtn` is a CSP violation under MV3,
+             * so call Steam's method directly.
+             */
 
-                    // Use Steam's method here so wishlist count is updated and dynamic store cache invalidated
+            await new Promise<void>(resolve => {
+                // @ts-expect-error
+                document.addEventListener("addRemoveWishlist", (e: CustomEvent<boolean>) => {
+                    if (e.detail) {
+                        wishlisted = !wishlisted;
+                        updateDiv();
+                    } else {
+                        parent.classList.remove("loading");
+                    }
+                    resolve();
+                }, {once: true});
+
+                if (wishlisted) {
                     SteamFacade.removeFromWishlist(
                         this.context.appid,
                         "add_to_wishlist_area_success",
                         "add_to_wishlist_area",
-                        "add_to_wishlist_area_fail",
-                        "1_store-navigation__",
-                        "add_to_wishlist_area2"
+                        "add_to_wishlist_area_fail"
                     );
-                });
-            } else {
-                addBtn.dispatchEvent(new MouseEvent("click"));
-            }
+                } else {
+                    SteamFacade.addToWishlist(
+                        this.context.appid,
+                        "add_to_wishlist_area",
+                        "add_to_wishlist_area_success",
+                        "add_to_wishlist_area_fail"
+                    );
+                }
+            });
         });
 
         waitlistOption.addEventListener("click", async() => {

diff --git a/src/js/Content/Modules/Facades/SteamFacade.ts b/src/js/Content/Modules/Facades/SteamFacade.ts
@@ -71,20 +71,32 @@ export default class SteamFacade {
         Messenger.call(MessageHandler.SteamFacade, "collapseLongStrings", [selector]);
     }
 
-    // @param appid required, rest is optional
     static removeFromWishlist(
         appid: number,
-        divToHide: string|undefined = undefined,
-        divToShowSuccess: string|undefined = undefined,
-        divToShowError: string|undefined = undefined,
-        navref: string|undefined = undefined,
-        divToHide2: string|undefined = undefined,
-    ) {
+        divToHide: string,
+        divToShowSuccess: string,
+        divToShowError: string,
+        navref?: string,
+        divToHide2?: string,
+    ): void {
         Messenger.call(MessageHandler.SteamFacade, "removeFromWishlist", [
             appid, divToHide, divToShowSuccess, divToShowError, navref, divToHide2
         ]);
     }
 
+    static addToWishlist(
+        appid: number,
+        divToHide: string,
+        divToShowSuccess: string,
+        divToShowError: string,
+        navref?: string,
+        divToHide2?: string,
+    ): void {
+        Messenger.call(MessageHandler.SteamFacade, "addToWishlist", [
+            appid, divToHide, divToShowSuccess, divToShowError, navref, divToHide2
+        ]);
+    }
+
     // events
 
     static bindAutoFlyoutEvents(): void {

diff --git a/src/scriptlets/SteamScriptlet.js b/src/scriptlets/SteamScriptlet.js
@@ -65,11 +65,14 @@
             CollapseLongStrings(selector);
         }
 
-        // @param appid required, rest is optional
         static removeFromWishlist(appid, divToHide, divToShowSuccess, divToShowError, navref, divToHide2) {
             RemoveFromWishlist(appid, divToHide, divToShowSuccess, divToShowError, navref, divToHide2);
         }
 
+        static addToWishlist(appid, divToHide, divToShowSuccess, divToShowError, navref, divToHide2) {
+            AddToWishlist(appid, divToHide, divToShowSuccess, divToShowError, navref, divToHide2);
+        }
+
         // events
 
         static bindAutoFlyoutEvents() {