feat(premium): add "Remove Ads" feature with localization support and integrate into the header component

Author: Snouzy

locales/en.ts

@@ -1813,6 +1813,7 @@ export default {
     subscription: "Subscription",
     manage_subscription: "Manage subscription",
     become_premium: "Become Premium",
+    remove_ads: "Remove Ads",
     extremely_dissatisfied: "Extremely dissatisfied",
     somewhat_dissatisfied: "Somewhat dissatisfied",
     neutral: "Neutral",

locales/es.ts

@@ -949,6 +949,7 @@ export default {
     subscription: "Suscripción",
     manage_subscription: "Gestionar suscripción",
     become_premium: "Torne-se Premium",
+    remove_ads: "Eliminar anuncios",
     in_progress: "En progreso",
     close: "Cerrar",
     premium: "Premium",

locales/fr.ts

@@ -1839,6 +1839,7 @@ export default {
     subscription: "Abonnement",
     manage_subscription: "Gérer abonnement",
     become_premium: "Devenir Premium",
+    remove_ads: "Supprimer les pubs",
     coming_soon: "Bientôt disponible",
     extremely_dissatisfied: "Très insatisfait",
     somewhat_dissatisfied: "Insatisfait",

locales/pt.ts

@@ -1825,6 +1825,7 @@ export default {
     subscription: "Abonamento",
     manage_subscription: "Gerir abonamento",
     become_premium: "Torne-se Premium",
+    remove_ads: "Remover anúncios",
     coming_soon: "Em breve",
     free: "Gratuito",
     new: "Novo",

locales/ru.ts

@@ -1815,6 +1815,7 @@ export default {
     subscription: "Подписка",
     manage_subscription: "Управление подпиской",
     become_premium: "Стань Премиум",
+    remove_ads: "Убрать рекламу",
     coming_soon: "Скоро",
     premium: "Премиум",
     free: "Бесплатно",

locales/zh-CN.ts

@@ -944,6 +944,7 @@ export default {
     subscription: "订阅",
     manage_subscription: "管理订阅",
     become_premium: "成为高级",
+    remove_ads: "移除广告",
     coming_soon: "即将推出",
     in_progress: "进行中",
     close: "关闭",

src/components/premium/RemoveAdsText.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Ban } from "lucide-react";
+
+import { useI18n } from "locales/client";
+
+export function RemoveAdsText() {
+  const router = useRouter();
+  const t = useI18n();
+
+  const handleClick = () => {
+    router.push("/premium");
+  };
+
+  return (
+    <button
+      className="flex items-center gap-0 text-[11px] sm:text-xs md:font-medium text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-full transition-all duration-200 hover:scale-105 whitespace-nowrap hover:underline"
+      onClick={handleClick}
+    >
+      <Ban className="w-3 h-3 flex-shrink-0 mr-1" />
+      <span className="whitespace-nowrap">{t("commons.remove_ads")}</span>
+    </button>
+  );
+}

src/features/layout/Header.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { LogIn, UserPlus, LogOut, User, Crown, CreditCard } from "lucide-react";
+import { LogIn, UserPlus, LogOut, User, Crown, Sparkles } from "lucide-react";
 
 import { useI18n } from "locales/client";
 import Logo from "@public/logo.png";
@@ -12,7 +12,9 @@ import { ReleaseNotesDialog } from "@/features/release-notes";
 import WorkoutStreakHeader from "@/features/layout/workout-streak-header";
 import { useLogout } from "@/features/auth/model/useLogout";
 import { useSession } from "@/features/auth/lib/auth-client";
+import { env } from "@/env";
 import { Link } from "@/components/ui/link";
+import { RemoveAdsText } from "@/components/premium/RemoveAdsText";
 
 export const Header = () => {
   const session = useSession();
@@ -22,7 +24,10 @@ export const Header = () => {
 
   // Get user initials for avatar
   const userAvatar = session.data?.user?.email?.substring(0, 2).toUpperCase() || "";
+
   const isPremium = premiumStatus?.isPremium ?? false;
+  const showAds = env.NEXT_PUBLIC_SHOW_ADS === true;
+  const hasAdProvider = env.NEXT_PUBLIC_AD_CLIENT || env.NEXT_PUBLIC_AD_PROVIDER === "ezoic";
 
   const handleSignOut = () => {
     logout.mutate();
@@ -35,134 +40,136 @@ export const Header = () => {
   };
 
   return (
-    <div className="navbar bg-base-100 dark:bg-black dark:text-gray-200 px-2 sm:px-4 rounded-tl-lg rounded-tr-lg">
-      {/* Logo and Title */}
-      <div className="navbar-start flex items-center gap-2">
-        <Link
-          className="group flex items-center space-x-3 rounded-xl bg-gradient-to-r px-2 sm:px-4 py-2 transition-all duration-200 dark:text-gray-200 dark:bg-gray-800"
-          href="/"
-        >
-          <div className="relative flex-none">
-            <Image
-              alt="workout cool logo"
-              className="h-10 w-10 sm:h-8 sm:w-8 transition-transform duration-200 group-hover:rotate-[20deg] group-hover:scale-110"
-              height={32}
-              priority
-              src={Logo}
-              width={32}
-            />
-            <div className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-emerald-400 opacity-0 transition-opacity duration-200 group-hover:opacity-100"></div>
-          </div>
-          <div className="flex-col hidden sm:flex">
-            <span className="font-bold transition-colors duration-200 group-hover:text-blue-400">Workout.cool</span>
-          </div>
-        </Link>
-      </div>
+    <>
+      <div className="navbar bg-base-100 dark:bg-black dark:text-gray-200 px-2 sm:px-4 rounded-tl-lg rounded-tr-lg">
+        {/* Logo and Title */}
+        <div className="navbar-start flex items-center gap-2">
+          <Link
+            className="group flex items-center space-x-3 rounded-xl bg-gradient-to-r px-2 sm:px-4 py-2 transition-all duration-200 dark:text-gray-200 dark:bg-gray-800"
+            href="/"
+          >
+            <div className="relative flex-none">
+              <Image
+                alt="workout cool logo"
+                className="h-10 w-10 sm:h-8 sm:w-8 transition-transform duration-200 group-hover:rotate-[20deg] group-hover:scale-110"
+                height={32}
+                priority
+                src={Logo}
+                width={32}
+              />
+              <div className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-emerald-400 opacity-0 transition-opacity duration-200 group-hover:opacity-100"></div>
+            </div>
+            <div className="flex-col hidden sm:flex">
+              <span className="font-bold transition-colors duration-200 group-hover:text-blue-400">Workout.cool</span>
+            </div>
+          </Link>
+        </div>
 
-      {/* User Menu */}
-      <div className="navbar-end">
-        <WorkoutStreakHeader />
-        <ReleaseNotesDialog />
-        <ThemeToggle />
-        <LanguageSelector />
+        {/* User Menu */}
+        <div className="navbar-end">
+          {isPremium || !showAds || !hasAdProvider ? <WorkoutStreakHeader /> : <RemoveAdsText />}
+          <ReleaseNotesDialog />
+          <ThemeToggle />
+          <LanguageSelector />
 
-        <div className="dropdown dropdown-end ml-1">
-          <div className="tooltip tooltip-bottom" data-tip={t("commons.profile")}>
-            <div className="btn btn-ghost btn-circle avatar relative" role="button" tabIndex={0}>
-              <div className="w-8 rounded-full bg-primary text-primary-content !flex items-center justify-center text-sm font-medium">
-                {userAvatar || <User className="w-4 h-4" />}
-              </div>
-              {isPremium && (
-                <div className="absolute -top-1 -right-1 w-4 h-4 bg-amber-400 rounded-full !flex items-center justify-center">
-                  <Crown className="w-2.5 h-2.5 text-amber-900" />
+          <div className="dropdown dropdown-end ml-1">
+            <div className="tooltip tooltip-bottom" data-tip={t("commons.profile")}>
+              <div className="btn btn-ghost btn-circle avatar relative" role="button" tabIndex={0}>
+                <div className="w-8 rounded-full bg-primary text-primary-content !flex items-center justify-center text-sm font-medium">
+                  {userAvatar || <User className="w-4 h-4" />}
                 </div>
-              )}
+                {isPremium && (
+                  <div className="absolute -top-1 -right-1 w-4 h-4 bg-amber-400 rounded-full !flex items-center justify-center">
+                    <Crown className="w-2.5 h-2.5 text-amber-900" />
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
 
-          <ul
-            className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 dark:bg-black dark:text-gray-200 rounded-box w-52 border border-slate-200 dark:border-gray-800"
-            onClick={handleCloseDropdown}
-            tabIndex={0}
-          >
-            <li>
-              <Link className="!no-underline" href="/profile" size="base" variant="nav">
-                <User className="w-4 h-4 text-gray-700 dark:text-gray-300" />
-                {t("commons.profile")}
-              </Link>
-            </li>
+            <ul
+              className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 dark:bg-black dark:text-gray-200 rounded-box w-52 border border-slate-200 dark:border-gray-800"
+              onClick={handleCloseDropdown}
+              tabIndex={0}
+            >
+              <li>
+                <Link className="!no-underline" href="/profile" size="base" variant="nav">
+                  <User className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+                  {t("commons.profile")}
+                </Link>
+              </li>
 
-            {/* Subscription Menu Item */}
-            <li>
-              <Link
-                className="!no-underline"
-                href={isPremium ? "/api/premium/billing-portal" : "/premium"}
-                size="base"
-                variant="nav"
-                {...(isPremium && {
-                  onClick: async (e) => {
-                    e.preventDefault();
-                    try {
-                      const response = await fetch("/api/premium/billing-portal", {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ returnUrl: window.location.origin + "/profile" }),
-                      });
-                      const data = await response.json();
-                      if (data.success && data.url) {
-                        window.location.href = data.url;
+              {/* Subscription Menu Item */}
+              <li>
+                <Link
+                  className="!no-underline"
+                  href={isPremium ? "/api/premium/billing-portal" : "/premium"}
+                  size="base"
+                  variant="nav"
+                  {...(isPremium && {
+                    onClick: async (e) => {
+                      e.preventDefault();
+                      try {
+                        const response = await fetch("/api/premium/billing-portal", {
+                          method: "POST",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({ returnUrl: window.location.origin + "/profile" }),
+                        });
+                        const data = await response.json();
+                        if (data.success && data.url) {
+                          window.location.href = data.url;
+                        }
+                      } catch (error) {
+                        console.error("Error opening billing portal:", error);
                       }
-                    } catch (error) {
-                      console.error("Error opening billing portal:", error);
-                    }
-                  },
-                })}
-              >
-                {isPremium ? (
-                  <>
-                    <Crown className="w-4 h-4 text-amber-500" />
-                    {t("commons.manage_subscription")}
-                  </>
-                ) : (
-                  <>
-                    <CreditCard className="w-4 h-4 text-blue-500" />
-                    {t("commons.become_premium")}
-                  </>
-                )}
-              </Link>
-            </li>
+                    },
+                  })}
+                >
+                  {isPremium ? (
+                    <>
+                      <Crown className="w-4 h-4 text-amber-500" />
+                      {t("commons.manage_subscription")}
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles className="w-4 h-4 text-purple-500" />
+                      {t("commons.remove_ads")}
+                    </>
+                  )}
+                </Link>
+              </li>
 
-            <hr className="my-1 border-slate-200 dark:border-gray-800" />
+              <hr className="my-1 border-slate-200 dark:border-gray-800" />
 
-            {!session.data && !session.isPending ? (
-              <>
+              {!session.data && !session.isPending ? (
+                <>
+                  <li>
+                    <Link className="!no-underline" href="/auth/signin" size="base" variant="nav">
+                      <LogIn className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+                      {t("commons.login")}
+                    </Link>
+                  </li>
+                  <li>
+                    <Link className="!no-underline" href="/auth/signup" size="base" variant="nav">
+                      <UserPlus className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+                      {t("commons.register")}
+                    </Link>
+                  </li>
+                </>
+              ) : (
                 <li>
-                  <Link className="!no-underline" href="/auth/signin" size="base" variant="nav">
-                    <LogIn className="w-4 h-4 text-gray-700 dark:text-gray-300" />
-                    {t("commons.login")}
-                  </Link>
+                  <button
+                    className="flex items-center gap-2 text-base text-gray-700 dark:text-gray-300 hover:bg-slate-200 dark:hover:bg-gray-800 rounded-lg px-3 py-2 transition-colors"
+                    onClick={handleSignOut}
+                  >
+                    <LogOut className="w-4 h-4" />
+                    {t("commons.logout")}
+                  </button>
                 </li>
-                <li>
-                  <Link className="!no-underline" href="/auth/signup" size="base" variant="nav">
-                    <UserPlus className="w-4 h-4 text-gray-700 dark:text-gray-300" />
-                    {t("commons.register")}
-                  </Link>
-                </li>
-              </>
-            ) : (
-              <li>
-                <button
-                  className="flex items-center gap-2 text-base text-gray-700 dark:text-gray-300 hover:bg-slate-200 dark:hover:bg-gray-800 rounded-lg px-3 py-2 transition-colors"
-                  onClick={handleSignOut}
-                >
-                  <LogOut className="w-4 h-4" />
-                  {t("commons.logout")}
-                </button>
-              </li>
-            )}
-          </ul>
+              )}
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };