feat(monetization): Merge pull request #184 from AlbericoD/feature/ba…

…sic-features

feat(monetization): add overwolf ads and subscriptions.

README.md

@@ -9,8 +9,8 @@
   <a href="#contribution">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
   </a>
-   <a href="https://github.com/AlbericoD/overwolf-modern-react-boilerplate/actions/workflows/publish-npm-package.yml">
-    <img src="https://github.com/AlbericoD/overwolf-modern-react-boilerplate/actions/workflows/publish-npm-package.yml/badge.svg?branch=master" alt="Publish NPM Package" />
+   <a href="https://github.com/AlbericoD/overwolf-modern-react-boilerplate/actions/workflows/ci.yml">
+    <img src="https://github.com/AlbericoD/overwolf-modern-react-boilerplate/actions/workflows/ci.yml/badge.svg?branch=master" alt="Publish NPM Package" />
   </a>
 </p>
 
@@ -235,3 +235,21 @@ About [ CI/CD File.yml](https://raw.githubusercontent.com/AlbericoD/overwolf-mod
 ![label](./doc/ci-2.png)
 
 ![label](./doc/ci-3.png)
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!
+
+## Projects using OMRB
+
+> If you are using OMRB in your project, please let me know! I'll be happy to list it here.
+
+- [Fortmapp](https://www.overwolf.com/app/Alberico_Dias_Barreto_Filho-Fortmapp)
+
+  > A map for Fortnite Battle Royale.
+  > ![ForFortmapptm preview](./doc/projects/fortmapp.png)
+
+- [Economy Tool](https://www.overwolf.com/app/Alberico_Dias_Barreto_Filho-Economy_Tool)
+
+  > A tool to help you manage economy in the cs2.
+  > ![Economy Tool preview](./doc/projects/economy-tool.png)

template/README.md

@@ -9,8 +9,8 @@
   <a href="#contribution">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
   </a>
-   <a href="https://github.com/AlbericoD/overwolf-modern-react-boilerplate/actions/workflows/publish-npm-package.yml">
-    <img src="https://github.com/AlbericoD/overwolf-modern-react-boilerplate/actions/workflows/publish-npm-package.yml/badge.svg?branch=master" alt="Publish NPM Package" />
+   <a href="https://github.com/AlbericoD/overwolf-modern-react-boilerplate/actions/workflows/ci.yml">
+    <img src="https://github.com/AlbericoD/overwolf-modern-react-boilerplate/actions/workflows/ci.yml/badge.svg?branch=master" alt="Publish NPM Package" />
   </a>
 </p>
 
@@ -235,3 +235,21 @@ About [ CI/CD File.yml](https://raw.githubusercontent.com/AlbericoD/overwolf-mod
 ![label](./doc/ci-2.png)
 
 ![label](./doc/ci-3.png)
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!
+
+## Projects using OMRB
+
+> If you are using OMRB in your project, please let me know! I'll be happy to list it here.
+
+- [Fortmapp](https://www.overwolf.com/app/Alberico_Dias_Barreto_Filho-Fortmapp)
+
+  > A map for Fortnite Battle Royale.
+  > ![ForFortmapptm preview](./doc/projects/fortmapp.png)
+
+- [Economy Tool](https://www.overwolf.com/app/Alberico_Dias_Barreto_Filho-Economy_Tool)
+
+  > A tool to help you manage economy in the cs2.
+  > ![Economy Tool preview](./doc/projects/economy-tool.png)

template/public/manifest.json

@@ -3,7 +3,7 @@
   "type": "WebApp",
   "meta": {
     "name": "Overwolf Modern React Boilerplate-v4",
-    "version": "4.0.0",
+    "version": "0.1.0",
     "minimum-overwolf-version": "0.120.0",
     "author": "Albérico Dias Barreto Filho",
     "icon": "IconMouseOver.png",
@@ -12,30 +12,22 @@
     "window_icon": "TaskbarIcon.png",
     "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
   },
-  "permissions": [
-    "GameInfo"
-  ],
+  "permissions": ["Extensions", "Streaming", "Profile", "GameInfo"],
   "data": {
     "game_targeting": {
       "type": "dedicated",
-      "game_ids": [
-        9898
-      ]
+      "game_ids": [9898]
     },
     "launch_events": [
       {
         "event": "GameLaunch",
         "event_data": {
-          "game_ids": [
-            9898
-          ]
+          "game_ids": [9898]
         },
         "start_minimized": true
       }
     ],
-    "game_events": [
-      9898
-    ],
+    "game_events": [9898],
     "start_window": "background",
     "windows": {
       "background": {
@@ -60,7 +52,10 @@
           "width": 1920,
           "height": 1080
         },
-        "desktop_only": true
+        "desktop_only": true,
+        "block_top_window_navigation": true,
+        "popup_blocker": true,
+        "mute": true
       },
       "in_game": {
         "file": "Files/index.html",
@@ -87,14 +82,11 @@
         }
       }
     },
-    "block_top_window_navigation": true,
-    "popup_blocker": true,
-    "mute": true,
     "force_browser": "user",
     "developer": {
       "enable_auto_refresh": true,
       "reload_delay": 1000,
       "filter": "*.*"
     }
   }
-}
+}

template/src/app/components/App.tsx

@@ -18,7 +18,7 @@ export const App = () => {
       log(
         `Request screen: ${currentWindow}`,
         "src/app/components/App.tsx",
-        "useEffect"
+        "useEffect",
       );
     })();
   }, []);

template/src/app/shared/store.ts

@@ -7,9 +7,7 @@ const reduxStore = configureStore({
   reducer,
   devTools: false,
   enhancers: (getDefaultEnchancers) =>
-    getDefaultEnchancers().concat(
-      devToolsEnhancer({  port: 8081 })
-    ),
+    getDefaultEnchancers().concat(devToolsEnhancer({ port: 8081 })),
 });
 
 declare global {

template/src/components/Feed/index.ts

@@ -1 +1 @@
-export * from './Feed'
+export * from "./Feed";

template/src/components/Loading/Loading.tsx

@@ -1 +1 @@
-export const Loading = () => <p>Loading ...</p>
+export const Loading = () => <p>Loading ...</p>;

template/src/components/Loading/index.ts

@@ -1 +1 @@
-export * from './Loading'
+export * from "./Loading";

template/src/components/Title/index.ts

@@ -1 +1 @@
-export * from './Title'
+export * from "./Title";

template/src/features/monetization/components/AdsSlot.tsx

@@ -0,0 +1,43 @@
+import { useOverwolfAds, type UseOverwolfAds } from "../hooks/useOverwolfAds";
+import "./styles/AdsSlot.css";
+
+/**
+ * Renders an ads slot component.
+ * @see https://overwolf.github.io/start/monetize-your-app/advertising/working-with-ads#list-of-ad-sizes
+ * A simple, one Container layout
+ * Dimensions: 400x300
+ * Revenue: Baseline
+ * Show Video Ads: Yes
+ * Design Constraints: Minimal
+ * User Friction: Minimal
+ * Policies:
+ * As such, you must also keep in mind the following:
+ * Do not create Ad experiences that are actively intrusive/clash with the app's basic usage.
+ * No more than one video Ad container may be placed on a single page at any moment.
+ * Any manipulation of or interference with the ads integration is not allowed - Bots, auto clickers, constant page reloading, faking impressions, etc.
+ * Ads may not be placed on dead end/empty screens. This includes: "Thank You" pages, "Login" pages, "Dialogue/Error/Notification", pages Etc
+ * @test How to test: https://overwolf.github.io/start/test-your-app/how-to-test-your-app#testing-ad-visibility
+ * @returns The rendered ads slot component.
+ */
+export function AdsSlot(size: UseOverwolfAds) {
+  const { containerRef, isPlaying } = useOverwolfAds(size);
+  return (
+    <div
+      className='ads-slot'
+      ref={containerRef}
+      style={{
+        minWidth: size.width,
+        minHeight: size.height,
+        maxWidth: size.width,
+        maxHeight: size.height,
+      }}
+    >
+      {isPlaying ? null : (
+        <>
+          <div className='ads-slot__placeholder' />
+          <h1>Ads Slot 400x300</h1>
+        </>
+      )}
+    </div>
+  );
+}

template/src/features/monetization/components/GetPremium.tsx

@@ -0,0 +1,12 @@
+import { openSubscribeWindow } from "../hooks/useAdRemoval";
+import "./styles/GetPremium.css";
+
+export function GetPremium() {
+  return (
+    <div className='get-premium'>
+      <button className='get-premium__button' onClick={openSubscribeWindow}>
+        Get Premium: Remove Ads!
+      </button>
+    </div>
+  );
+}

template/src/features/monetization/components/styles/AdsSlot.css

@@ -0,0 +1,12 @@
+.ads-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: var(--secondary-color-dark);
+  padding: 20px;
+}
+.ads-slot__placeholder {
+  padding: 10px;
+}

template/src/features/monetization/components/styles/GetPremium.css

@@ -0,0 +1,29 @@
+.get-premium {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+/* //create a beautiful button */
+.get-premium__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  width: 100%;
+  background-color: var(--neutral-1);
+  color: var(--primary-color-text);
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.get-premium__button:hover {
+  background-color: var(--neutral-2);
+}

template/src/features/monetization/constants.ts

@@ -0,0 +1,4 @@
+export const OWADS_URL =
+  "https://content.overwolf.com/libs/ads/latest/owads.min.js";
+export const INJECTED_OWADS_ID = "owads-injected";
+export const SUBSCRIPTION_ID = 123;

template/src/features/monetization/hooks/useAdRemoval.ts

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { SUBSCRIPTION_ID } from "../constants";
+import { isDev, sleep } from "lib/utils";
+import { log } from "lib/log";
+
+async function openSubscribeWindow() {
+  if (isDev) {
+    log(
+      "dev mode, not opening subscribe window",
+      "src/features/monetization/hooks/useAdRemoval.ts",
+      "openSubscribeWindow"
+    );
+    return;
+  }
+  const UID = await new Promise<string>((resolve, reject) => {
+    overwolf.extensions.current.getManifest((manifest) => {
+      if (manifest) {
+        resolve(manifest.UID);
+      } else {
+        reject(null);
+      }
+    });
+  });
+  overwolf.utils.openStore({
+    page: "SubscriptionPage" as overwolf.utils.enums.eStorePage.SubscriptionPage,
+    uid: UID,
+  });
+}
+
+const useAdRemoval = () => {
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  // Function to handle the subscription change event
+
+  const handleSubscriptionState = () => {
+    setIsSubscribed(true);
+  };
+
+  useEffect(() => {
+    if (isDev) {
+      setIsSubscribed(false);
+      setIsLoading(false);
+      return;
+    }
+    // console.log('plan', subscriptionId)
+    // Subscribe to the subscription change event
+    const handleSubscriptionChange = async (
+      info: overwolf.profile.subscriptions.SubscriptionChangedEvent
+    ) => {
+      setIsLoading(true);
+      console.log("Subscription changed", info);
+      if (Array.isArray(info?.plans) && info.plans.includes(SUBSCRIPTION_ID)) {
+        handleSubscriptionState();
+      }
+      await sleep(3_000);
+      setIsLoading(false);
+    };
+
+    overwolf.profile.subscriptions.getActivePlans(async (info) => {
+      console.log("Active plans", info);
+      if (
+        info.success &&
+        Array.isArray(info?.plans) &&
+        info.plans.includes(SUBSCRIPTION_ID)
+      ) {
+        handleSubscriptionState();
+      }
+      await sleep(3_000);
+      setIsLoading(false);
+    });
+    overwolf.profile.subscriptions.onSubscriptionChanged.addListener(
+      handleSubscriptionChange
+    );
+
+    // Unsubscribe from the event when the component unmounts
+    return () => {
+      overwolf.profile.subscriptions.onSubscriptionChanged.removeListener(
+        handleSubscriptionChange
+      );
+    };
+  }, []);
+
+  return { isSubscribed, isLoading };
+};
+
+export { useAdRemoval, openSubscribeWindow };