diff --git a/src/website/packages/fakeyou.com/src/components/common/AdBanner/AdBanner.tsx b/src/website/packages/fakeyou.com/src/components/common/AdBanner/AdBanner.tsx index 310ed3584f..7dd4fabff8 100644 --- a/src/website/packages/fakeyou.com/src/components/common/AdBanner/AdBanner.tsx +++ b/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(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 ( -
- {
Ad failed to load
} -
+ //
+ // {
Ad failed to load
} + //
+ null ); } } diff --git a/src/website/packages/fakeyou.com/src/components/common/AdBanner/AdHorizontal.tsx b/src/website/packages/fakeyou.com/src/components/common/AdBanner/AdHorizontal.tsx new file mode 100644 index 0000000000..715d96dfc0 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/src/website/packages/fakeyou.com/src/components/common/AdBanner/index.tsx b/src/website/packages/fakeyou.com/src/components/common/AdBanner/index.tsx new file mode 100644 index 0000000000..ce79ca1ac1 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/AdBanner/index.tsx @@ -0,0 +1,2 @@ +export { AdBanner } from "./AdBanner"; +export { AdHorizontal } from "./AdHorizontal"; diff --git a/src/website/packages/fakeyou.com/src/data/PriceTiers.js b/src/website/packages/fakeyou.com/src/data/PriceTiers.js index 1c50930aed..8e39c18a9b 100644 --- a/src/website/packages/fakeyou.com/src/data/PriceTiers.js +++ b/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: [ diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx index 5c05dfb46d..22c3e88efe 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/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() && ( )} + + + {!isLoggedIn && ( diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx index eae8a158e1..832b78e893 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx @@ -282,6 +282,19 @@ export default function PricingPage() { ); })} +
  • {FYP.plus.ads.title}
  • + {FYP.plus.ads.features.map((e: any) => { + return ( +
  • + + {e} +
  • + ); + })} + {isVideoToolsEnabled() && ( <> {(FYP.plus as any).lipsync && ( @@ -474,11 +487,26 @@ export default function PricingPage() { )} )} + +
  • + {FYP.pro.storyteller.title} +
  • + {FYP.pro.storyteller.features.map((e: any) => { + return ( +
  • + + {e} +
  • + ); + })} )} -
  • {FYP.pro.storyteller.title}
  • - {FYP.pro.storyteller.features.map((e: any) => { +
  • {FYP.pro.ads.title}
  • + {FYP.pro.ads.features.map((e: any) => { return (
  • )} + +
  • + {FYP.elite.storyteller.title} +
  • + {FYP.elite.storyteller.features.map((e: any) => { + return ( +
  • + + {e} +
  • + ); + })} )} @@ -630,8 +673,9 @@ export default function PricingPage() { ); })} -
  • {FYP.elite.storyteller.title}
  • - {FYP.elite.storyteller.features.map((e: any) => { + +
  • {FYP.elite.ads.title}
  • + {FYP.elite.ads.features.map((e: any) => { return (
  • - +