hide in-site ads for users, landing page ad, pricing page update

src/website/packages/fakeyou.com/src/components/common/AdBanner/AdBanner.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
+import { SessionContext } from "context";
+import React, { useContext, useEffect, useRef, useState } from "react";
 
 interface AdBannerProps {
   dataAdSlot: string;
@@ -9,7 +10,7 @@ interface AdBannerProps {
   fallbackContent?: React.ReactNode;
 }
 
-export default function AdBanner({
+export function AdBanner({
   dataAdSlot,
   dataAdFormat,
   dataFullWidthResponsive,
@@ -19,6 +20,7 @@ export default function AdBanner({
 }: AdBannerProps) {
   const adRef = useRef<HTMLModElement>(null);
   const [adFailed, setAdFailed] = useState(false);
+  const { user, sessionSubscriptions } = useContext(SessionContext);
 
   useEffect(() => {
     // Check if adsbygoogle is blocked or not loaded
@@ -48,21 +50,26 @@ export default function AdBanner({
     return () => clearTimeout(timeoutId);
   }, []);
 
+  if (user && sessionSubscriptions?.hasPaidFeatures()) {
+    return null;
+  }
+
   if (adFailed) {
     if (fallbackContent) {
       return <>{fallbackContent}</>;
     } else {
       return (
-        <div
-          className="text-center p-3 d-flex justify-content-center align-items-center"
-          style={{
-            height: "100px",
-            backgroundColor: "#ffffff08",
-            width: "100%",
-          }}
-        >
-          {<div className="opacity-75">Ad failed to load</div>}
-        </div>
+        // <div
+        //   className="text-center p-3 d-flex justify-content-center align-items-center"
+        //   style={{
+        //     height: "100px",
+        //     backgroundColor: "#ffffff08",
+        //     width: "100%",
+        //   }}
+        // >
+        //   {<div className="opacity-75">Ad failed to load</div>}
+        // </div>
+        null
       );
     }
   }

src/website/packages/fakeyou.com/src/components/common/AdBanner/AdHorizontal.tsx

@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { Panel } from "..";
+import { AdBanner } from "./AdBanner";
+import { SessionContext } from "context";
+
+export function AdHorizontal() {
+  const { user, sessionSubscriptions } = useContext(SessionContext);
+
+  if (user && sessionSubscriptions?.hasPaidFeatures()) {
+    return null;
+  }
+
+  return (
+    <Panel
+      clear={true}
+      className="d-flex align-items-center justify-content-center"
+    >
+      <AdBanner
+        dataAdSlot="7558376102"
+        dataAdFormat="horizontal"
+        dataFullWidthResponsive={true}
+      />
+    </Panel>
+  );
+}

src/website/packages/fakeyou.com/src/components/common/AdBanner/index.tsx

@@ -0,0 +1,2 @@
+export { AdBanner } from "./AdBanner";
+export { AdHorizontal } from "./AdHorizontal";

src/website/packages/fakeyou.com/src/data/PriceTiers.js

@@ -67,6 +67,11 @@ const FAKEYOU_PRICES = {
       title: "Voice to Voice",
       features: ["Up to 4 minutes of audio"],
     },
+    ads: {
+      title: "Advertisements",
+      features: ["Remove all ads"],
+    },
+
     // vcweb: {
     //   title: "VC Web",
     //   features: ["Up to 30 seconds audio", "Push to play"],
@@ -127,6 +132,10 @@ const FAKEYOU_PRICES = {
       title: "Voice to Voice",
       features: ["Up to 5 minutes of audio", "Upload private models"],
     },
+    ads: {
+      title: "Advertisements",
+      features: ["Remove all ads"],
+    },
     // channels: {
     //   title: "Video Channels",
     //   features: [
@@ -216,6 +225,10 @@ const FAKEYOU_PRICES = {
         "Share private models",
       ],
     },
+    ads: {
+      title: "Advertisements",
+      features: ["Remove all ads"],
+    },
     // channels: {
     //   title: "Video Channels",
     //   features: [

src/website/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -13,6 +13,7 @@ import PostlaunchLanding from "./storyteller/PostlaunchLanding/PostlaunchLanding
 import MentionsSection from "components/common/MentionsSection";
 import { useSession } from "hooks";
 import { useFeatureFlags } from "hooks/useFeatureFlags";
+import { AdHorizontal } from "components/common/AdBanner";
 
 export default function LandingPage() {
   PosthogClient.recordPageview();
@@ -41,6 +42,9 @@ export default function LandingPage() {
             {!isVideoToolsEnabled() && !sessionWrapper.isLoggedIn() && (
               <FakeYouLandingHeader />
             )}
+
+            <AdHorizontal />
+
             <Dashboard />
           </Container>
           {!isLoggedIn && (

src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx

@@ -282,6 +282,19 @@ export default function PricingPage() {
                     );
                   })}
 
+                  <li className="fw-semibold">{FYP.plus.ads.title}</li>
+                  {FYP.plus.ads.features.map((e: any) => {
+                    return (
+                      <li key={e}>
+                        <FontAwesomeIcon
+                          icon={faCheck}
+                          className="text-red me-3"
+                        />
+                        {e}
+                      </li>
+                    );
+                  })}
+
                   {isVideoToolsEnabled() && (
                     <>
                       {(FYP.plus as any).lipsync && (
@@ -474,11 +487,26 @@ export default function PricingPage() {
                           )}
                         </>
                       )}
+
+                      <li className="fw-semibold">
+                        {FYP.pro.storyteller.title}
+                      </li>
+                      {FYP.pro.storyteller.features.map((e: any) => {
+                        return (
+                          <li key={e}>
+                            <FontAwesomeIcon
+                              icon={faCheck}
+                              className="text-red me-3"
+                            />
+                            {e}
+                          </li>
+                        );
+                      })}
                     </>
                   )}
 
-                  <li className="fw-semibold">{FYP.pro.storyteller.title}</li>
-                  {FYP.pro.storyteller.features.map((e: any) => {
+                  <li className="fw-semibold">{FYP.pro.ads.title}</li>
+                  {FYP.pro.ads.features.map((e: any) => {
                     return (
                       <li key={e}>
                         <FontAwesomeIcon
@@ -615,6 +643,21 @@ export default function PricingPage() {
                           )}
                         </>
                       )}
+
+                      <li className="fw-semibold">
+                        {FYP.elite.storyteller.title}
+                      </li>
+                      {FYP.elite.storyteller.features.map((e: any) => {
+                        return (
+                          <li key={e}>
+                            <FontAwesomeIcon
+                              icon={faCheck}
+                              className="text-red me-3"
+                            />
+                            {e}
+                          </li>
+                        );
+                      })}
                     </>
                   )}
 
@@ -630,8 +673,9 @@ export default function PricingPage() {
                       </li>
                     );
                   })}
-                  <li className="fw-semibold">{FYP.elite.storyteller.title}</li>
-                  {FYP.elite.storyteller.features.map((e: any) => {
+
+                  <li className="fw-semibold">{FYP.elite.ads.title}</li>
+                  {FYP.elite.ads.features.map((e: any) => {
                     return (
                       <li key={e}>
                         <FontAwesomeIcon

src/website/packages/fakeyou.com/src/v2/view/pages/tools_test/ToolsTestPage.tsx

@@ -1,11 +1,14 @@
 import { Container, Panel } from "components/common";
-import AdBanner from "components/common/AdBanner/AdBanner";
+import { AdBanner } from "components/common/AdBanner";
 import React from "react";
 
 export default function ToolsTestPage() {
   return (
     <Container type="panel" className="mt-5">
-      <Panel clear={true}>
+      <Panel
+        clear={true}
+        className="d-flex align-items-center justify-content-center"
+      >
         <AdBanner
           dataAdSlot="7558376102"
           dataAdFormat="horizontal"