Use rest-of-world version on public pages

Author: Vinnl

src/app/(proper_react)/(redesign)/(public)/PublicShell.tsx

@@ -91,7 +91,11 @@ export const PublicShell = (props: Props) => {
           <SignInButton variant="secondary" />
         </nav>
         <div className={styles.content}>{props.children}</div>
-        <Footer l10n={props.l10n} countryCode={props.countryCode} />
+        <Footer
+          l10n={props.l10n}
+          countryCode={props.countryCode}
+          enabledFeatureFlags={props.enabledFeatureFlags}
+        />
       </div>
     </PublicMobileShell>
   );

src/app/(proper_react)/(redesign)/(public)/how-it-works/page.tsx

@@ -22,17 +22,17 @@ export default async function Page() {
   const headersList = await headers();
   const countryCode = getCountryCode(headersList);
 
-  if (countryCode !== "us") {
+  const enabledFeatureFlags = await getEnabledFeatureFlags({
+    isSignedOut: true,
+  });
+
+  if (countryCode !== "us" || enabledFeatureFlags.includes("FreeOnly")) {
     return redirect("/");
   }
 
   const eligibleForPremium = isEligibleForPremium(countryCode);
   const l10n = getL10n(await getAcceptLangHeaderInServerComponents());
 
-  const enabledFeatureFlags = await getEnabledFeatureFlags({
-    isSignedOut: true,
-  });
-
   // request the profile stats for the last 30 days
   const profileStats = await getProfilesStats(
     new Date(Date.now() - 30 * CONST_DAY_MILLISECONDS),

src/app/(proper_react)/(redesign)/(public)/page.tsx

@@ -114,7 +114,9 @@ export default async function Page() {
         />
       ) : (
         <LandingView
-          eligibleForPremium={eligibleForPremium}
+          eligibleForPremium={
+            eligibleForPremium && !enabledFeatureFlags.includes("FreeOnly")
+          }
           l10n={l10n}
           countryCode={countryCode}
           scanLimitReached={scanLimitReached}

src/app/(proper_react)/(redesign)/(public)/subscription-plans/page.tsx

@@ -30,13 +30,6 @@ export default async function Page() {
   const session = await getServerSession();
   const headersList = await headers();
   const countryCode = getCountryCode(headersList);
-
-  if (countryCode !== "us") {
-    return redirect("/");
-  }
-
-  const l10n = getL10n(await getAcceptLangHeaderInServerComponents());
-  const eligibleForPremium = isEligibleForPremium(countryCode);
   const enabledFeatureFlags = await getEnabledFeatureFlags(
     typeof session?.user.subscriber?.fxa_uid === "string"
       ? {
@@ -46,6 +39,13 @@ export default async function Page() {
       : { isSignedOut: true },
   );
 
+  if (countryCode !== "us" || enabledFeatureFlags.includes("FreeOnly")) {
+    return redirect("/");
+  }
+
+  const l10n = getL10n(await getAcceptLangHeaderInServerComponents());
+  const eligibleForPremium = isEligibleForPremium(countryCode);
+
   if (!eligibleForPremium) {
     return redirect("/");
   }

src/app/(proper_react)/(redesign)/Footer.tsx

@@ -15,15 +15,18 @@ import {
 } from "../../../constants";
 import { Session } from "next-auth";
 import { TelemetryLink } from "../../components/client/TelemetryLink";
+import { FeatureFlagName } from "../../../db/tables/featureFlags";
 
 export const Footer = ({
   l10n,
   session,
   countryCode,
+  enabledFeatureFlags,
 }: {
   l10n: ExtendedReactLocalization;
   session?: Session;
   countryCode: string;
+  enabledFeatureFlags: FeatureFlagName[];
 }) => {
   return (
     <footer className={styles.footer}>
@@ -45,19 +48,21 @@ export const Footer = ({
             {l10n.getString("footer-nav-recent-breaches")}
           </TelemetryLink>
         </li>
-        {countryCode === "us" && !session && (
-          <li>
-            <TelemetryLink
-              href="/how-it-works"
-              target="_blank"
-              eventData={{
-                link_id: "how_it_works_footer",
-              }}
-            >
-              {l10n.getString("footer-external-link-how-it-works-label")}
-            </TelemetryLink>
-          </li>
-        )}
+        {countryCode === "us" &&
+          !enabledFeatureFlags.includes("FreeOnly") &&
+          !session && (
+            <li>
+              <TelemetryLink
+                href="/how-it-works"
+                target="_blank"
+                eventData={{
+                  link_id: "how_it_works_footer",
+                }}
+              >
+                {l10n.getString("footer-external-link-how-it-works-label")}
+              </TelemetryLink>
+            </li>
+          )}
         <li>
           <TelemetryLink
             href={CONST_URL_SUMO_MONITOR_FAQ}

src/app/(proper_react)/(redesign)/Shell/Shell.tsx

@@ -137,6 +137,7 @@ export const Shell = (props: Props) => {
                 l10n={props.l10n}
                 session={props.session}
                 countryCode={props.countryCode}
+                enabledFeatureFlags={props.enabledFeatureFlags}
               />
             </div>
           </div>

src/app/(proper_react)/(redesign)/Shell/ShellRedesign.tsx

@@ -70,6 +70,7 @@ export const ShellRedesign = (props: Props) => {
           l10n={props.l10n}
           session={props.session}
           countryCode={props.countryCode}
+          enabledFeatureFlags={props.enabledFeatureFlags}
         />
       </div>
     </MobileShell>

src/db/tables/featureFlags.ts

@@ -72,6 +72,7 @@ export const featureFlagNames = [
   "DisableLandingToDashboardRedirect",
   "MaskDataBrokerCount",
   "IncreasedFreeMaxBreachEmails",
+  "FreeOnly",
 ] as const;
 
 export const adminOnlyFlags: FeatureFlagName[] = [