Ad: premium+ check (1589)

ui/effects/use-should-show-ads.js

@@ -15,11 +15,17 @@ export default function useShouldShowAds(
   const [shouldShowAds, setShouldShowAds] = React.useState(resolveAdVisibility());
 
   function resolveAdVisibility() {
-    // 'ad_blocker_detected' will be undefined at startup. Wait until we are
+    // 'ad_blocker_detected' and 'hasPremiumPlus' will be undefined until
-    // sure it is not blocked (i.e. === false) before showing the component.
+    // fetched. Only show when it is exactly 'false'.
-    return ad_blocker_detected === false && SHOW_ADS && !hasPremiumPlus && (NO_COUNTRY_CHECK || userCountry === 'US');
+    return (
+      SHOW_ADS &&
+      (NO_COUNTRY_CHECK || userCountry === 'US') &&
+      ad_blocker_detected === false &&
+      hasPremiumPlus === false
+    );
   }
 
+  // -- Check for ad-blockers
   React.useEffect(() => {
     if (ad_blocker_detected === undefined) {
       let mounted = true;
@@ -46,5 +52,10 @@ export default function useShouldShowAds(
     }
   }, []);
 
+  // --- Check for Premium+
+  React.useEffect(() => {
+    setShouldShowAds(resolveAdVisibility());
+  }, [hasPremiumPlus]);
+
   return shouldShowAds;
 }

ui/page/home/view.jsx

@@ -189,10 +189,8 @@ function HomePage(props: Props) {
                 label={__('View More')}
               />
             )}
-            {isMobileScreen && !hasPremiumPlus && <AdsBanner key={`${currentTheme}:${title}`} />}
+            {isMobileScreen && <AdsBanner key={`${currentTheme}:${title}`} />}
-            {!isMobileScreen && !hasPremiumPlus && (index === 0 || index % 2 === 0) && (
+            {!isMobileScreen && (index === 0 || index % 2 === 0) && <AdsBanner key={`${currentTheme}:${title}`} />}
-              <AdsBanner key={`${currentTheme}:${title}`} />
-            )}
           </>
         )}
       </div>