remove ads cta and mobile navigation updates (#734)

* remove ads cta and mobile navigation updates

* remove ads shorten text on mobile fix cuz overflow

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

@@ -1,5 +1,5 @@
-import { SessionContext } from "context";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import { useSession } from "hooks";
+import React, { useEffect, useRef, useState } from "react";
 
 interface AdBannerProps {
   dataAdSlot: string;
@@ -20,7 +20,7 @@ export function AdBanner({
 }: AdBannerProps) {
   const adRef = useRef<HTMLModElement>(null);
   const [adFailed, setAdFailed] = useState(false);
-  const { user, sessionSubscriptions } = useContext(SessionContext);
+  const { loggedIn, sessionSubscriptions } = useSession();
 
   useEffect(() => {
     // Check if adsbygoogle is blocked or not loaded
@@ -50,7 +50,7 @@ export function AdBanner({
     return () => clearTimeout(timeoutId);
   }, []);
 
-  if (user && sessionSubscriptions?.hasPaidFeatures()) {
+  if (loggedIn && sessionSubscriptions?.hasPaidFeatures()) {
     return null;
   }
 

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

@@ -0,0 +1,31 @@
+import React from "react";
+import Button from "../Button";
+import { faBan } from "@fortawesome/pro-solid-svg-icons";
+import { usePageLocation, useSession } from "hooks";
+import { isMobile } from "react-device-detect";
+
+interface RemoveAdsButtonProps {
+  small?: boolean;
+}
+
+export default function RemoveAdsButton({ small }: RemoveAdsButtonProps) {
+  const { loggedIn, sessionSubscriptions } = useSession();
+  const { isOnLandingPage } = usePageLocation();
+  const text = isMobile && !isOnLandingPage ? "Ads" : "Remove Ads";
+
+  if (loggedIn && sessionSubscriptions?.hasPaidFeatures()) {
+    return null;
+  }
+
+  return (
+    <Button
+      iconClassName="text-red"
+      variant="secondary"
+      icon={faBan}
+      label={text}
+      to="/pricing"
+      className="border"
+      small={small}
+    />
+  );
+}

src/website/packages/fakeyou.com/src/components/common/RemoveAdsButton/index.ts

@@ -0,0 +1 @@
+export { default } from "./RemoveAdsButton";

src/website/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx

@@ -38,6 +38,8 @@ import {
   GetWebsite,
   Website,
 } from "@storyteller/components/src/env/GetWebsite";
+import RemoveAdsButton from "components/common/RemoveAdsButton";
+import { useFeatureFlags } from "hooks/useFeatureFlags";
 
 export default function TopNav() {
   const { queryAppState, sessionWrapper, user } = useSession();
@@ -48,6 +50,7 @@ export default function TopNav() {
   const [isFocused, setIsFocused] = useState(false);
   const [menuButtonIcon, setMenuButtonIcon] = useState(faBars);
   const { t } = useLocalize("SideNav");
+  const { isVideoToolsEnabled } = useFeatureFlags();
   const {
     isOnLandingPage,
     isOnLoginPage,
@@ -338,7 +341,10 @@ export default function TopNav() {
         className={`position-fixed ${
           domain.titlePart !== "FakeYou"
             ? "topbar-bg-transparent"
-            : !loggedIn && isOnLandingPage && !isScrolled
+            : !loggedIn &&
+                isOnLandingPage &&
+                !isScrolled &&
+                mobileMenu === "d-none"
               ? "topbar-bg-dark"
               : ""
         }`.trim()}
@@ -436,6 +442,10 @@ export default function TopNav() {
               )}
 
             <div className="d-flex align-items-center gap-2">
+              {domain.website === Website.FakeYou && (
+                <RemoveAdsButton small={true} />
+              )}
+
               <div className="d-none d-lg-flex gap-2">
                 {(domain.website === Website.FakeYou ||
                   (sessionWrapper.isLoggedIn() &&
@@ -566,53 +576,57 @@ export default function TopNav() {
               </NavLink>
             </li>
 
-            <li className="sidebar-heading">{t("videoTitle")}</li>
+            {isVideoToolsEnabled() && (
+              <>
+                <li className="sidebar-heading">{t("videoTitle")}</li>
 
-            <li>
-              <NavLink
-                to="/style-video"
-                activeClassName="active-link"
-                onClick={handleNavLinkClick}
-                className="d-flex align-items-center"
-              >
-                <FontAwesomeIcon
-                  icon={faFilms}
-                  className="sidebar-heading-icon"
-                />
-                {t("videoStyleTransfer")}
-                {newBadge}
-              </NavLink>
-            </li>
+                <li>
+                  <NavLink
+                    to="/style-video"
+                    activeClassName="active-link"
+                    onClick={handleNavLinkClick}
+                    className="d-flex align-items-center"
+                  >
+                    <FontAwesomeIcon
+                      icon={faFilms}
+                      className="sidebar-heading-icon"
+                    />
+                    {t("videoStyleTransfer")}
+                    {newBadge}
+                  </NavLink>
+                </li>
 
-            <li>
-              <NavLink
-                to="/ai-live-portrait"
-                activeClassName="active-link"
-                onClick={handleNavLinkClick}
-                className="d-flex align-items-center"
-              >
-                <FontAwesomeIcon
-                  icon={faImageUser}
-                  className="sidebar-heading-icon"
-                />
-                Live Portrait
-                {newBadge}
-              </NavLink>
-            </li>
+                <li>
+                  <NavLink
+                    to="/ai-live-portrait"
+                    activeClassName="active-link"
+                    onClick={handleNavLinkClick}
+                    className="d-flex align-items-center"
+                  >
+                    <FontAwesomeIcon
+                      icon={faImageUser}
+                      className="sidebar-heading-icon"
+                    />
+                    Live Portrait
+                    {newBadge}
+                  </NavLink>
+                </li>
 
-            <li>
-              <NavLink
-                to="/face-animator"
-                activeClassName="active-link"
-                onClick={handleNavLinkClick}
-              >
-                <FontAwesomeIcon
-                  icon={faFaceViewfinder}
-                  className="sidebar-heading-icon"
-                />
-                {t("lipsync")}
-              </NavLink>
-            </li>
+                <li>
+                  <NavLink
+                    to="/face-animator"
+                    activeClassName="active-link"
+                    onClick={handleNavLinkClick}
+                  >
+                    <FontAwesomeIcon
+                      icon={faFaceViewfinder}
+                      className="sidebar-heading-icon"
+                    />
+                    {t("lipsync")}
+                  </NavLink>
+                </li>
+              </>
+            )}
 
             <li className="sidebar-heading">{t("speechTitle")}</li>
 

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

@@ -4,6 +4,7 @@ import { useLocalize } from "hooks";
 import React from "react";
 import LandingDemo from "./LandingDemo/FakeYouLandingDemo";
 import { Button, Panel } from "components/common";
+import RemoveAdsButton from "components/common/RemoveAdsButton";
 
 export default function FakeYouLandingHeader() {
   const { t } = useLocalize("LandingPage");
@@ -27,13 +28,14 @@ export default function FakeYouLandingHeader() {
               <p className="lead opacity-75 pb-4 text-center text-lg-start px-md-5 px-lg-0 pe-lg-5">
                 {t("heroText")}
               </p>
-              <div className="d-flex justify-content-center justify-content-lg-start">
+              <div className="d-flex justify-content-center justify-content-lg-start gap-2 gap-lg-3">
                 <Button
                   label="Get Started Free"
                   to="/signup"
                   icon={faArrowRight}
                   iconFlip={true}
                 />
+                <RemoveAdsButton />
               </div>
             </Panel>
           </div>