MNTOR-5143 - Remove countryCode guard for How it works page

src/app/(proper_react)/(redesign)/(public)/LandingView.stories.tsx

@@ -17,8 +17,6 @@ const meta: Meta<typeof View> = {
     return (
       <PublicShell
         l10n={getL10n("en")}
-        countryCode={props.countryCode}
-        enabledFeatureFlags={enabledFeatureFlags}
         experimentData={defaultExperimentData["Features"]}
       >
         <View

src/app/(proper_react)/(redesign)/(public)/PublicShell.stories.ts

@@ -16,8 +16,6 @@ type Story = StoryObj<typeof PublicShell>;
 
 export const PublicShellStory: Story = {
   args: {
-    countryCode: "us",
     l10n: getL10n("en"),
-    enabledFeatureFlags: [],
   },
 };

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

@@ -10,14 +10,11 @@ import MonitorLogo from "../../images/monitor-logo.svg";
 import { ExtendedReactLocalization } from "../../../functions/l10n";
 import { SignInButton } from "../../../components/client/SignInButton";
 import { Footer } from "../Footer";
-import { FeatureFlagName } from "../../../../db/tables/featureFlags";
 import { ExperimentData } from "../../../../telemetry/generated/nimbus/experiments";
 
 export type Props = {
   children: ReactNode;
   l10n: ExtendedReactLocalization;
-  countryCode: string;
-  enabledFeatureFlags: FeatureFlagName[];
   experimentData: ExperimentData["Features"];
 };
 
@@ -37,11 +34,7 @@ export const PublicShell = (props: Props) => {
         <SignInButton variant="secondary" />
       </nav>
       <div className={styles.content}>{props.children}</div>
-      <Footer
-        l10n={props.l10n}
-        countryCode={props.countryCode}
-        enabledFeatureFlags={props.enabledFeatureFlags}
-      />
+      <Footer l10n={props.l10n} />
     </div>
   );
 };

src/app/(proper_react)/(redesign)/(public)/breach-details/[breachName]/BreachDetailView.stories.tsx

@@ -14,8 +14,6 @@ const meta: Meta<typeof BreachDetailsView> = {
   component: (props: ViewProps) => (
     <PublicShell
       l10n={getL10n("en")}
-      countryCode="us"
-      enabledFeatureFlags={[]}
       experimentData={defaultExperimentData["Features"]}
     >
       <BreachDetailsView {...props} />

src/app/(proper_react)/(redesign)/(public)/breaches/BreachIndexView.stories.tsx

@@ -15,8 +15,6 @@ const meta: Meta<typeof BreachIndexView> = {
   component: (props: ViewProps) => (
     <PublicShell
       l10n={getL10n("en")}
-      countryCode="us"
-      enabledFeatureFlags={[]}
       experimentData={defaultExperimentData["Features"]}
     >
       <BreachIndexView {...props} />

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

@@ -13,11 +13,9 @@ const meta: Meta<typeof HowItWorksView> = {
   component: () => (
     <PublicShell
       l10n={getL10n("en")}
-      countryCode="us"
-      enabledFeatureFlags={[]}
       experimentData={defaultExperimentData["Features"]}
     >
-      <HowItWorksView l10n={getL10n()} enabledFeatureFlags={[]} />
+      <HowItWorksView l10n={getL10n()} />
     </PublicShell>
   ),
   args: {

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

@@ -7,11 +7,9 @@ import { ExtendedReactLocalization } from "../../../../functions/l10n";
 import { Header } from "./components/Header";
 import { DataBreaches } from "./components/DataBreaches";
 import { FooterSection } from "./components/FooterSection";
-import { FeatureFlagName } from "../../../../../db/tables/featureFlags";
 
 export type Props = {
   l10n: ExtendedReactLocalization;
-  enabledFeatureFlags: FeatureFlagName[];
 };
 
 export const HowItWorksView = (props: Props) => {

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

@@ -8,16 +8,9 @@ import {
   getAcceptLangHeaderInServerComponents,
   getL10n,
 } from "../../../../functions/l10n/serverComponents";
-import { getEnabledFeatureFlags } from "../../../../../db/tables/featureFlags";
 
 export default async function Page() {
-  const enabledFeatureFlags = await getEnabledFeatureFlags({
-    isSignedOut: true,
-  });
-
   const l10n = getL10n(await getAcceptLangHeaderInServerComponents());
 
-  return (
-    <HowItWorksView l10n={l10n} enabledFeatureFlags={enabledFeatureFlags} />
-  );
+  return <HowItWorksView l10n={l10n} />;
 }

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

@@ -13,14 +13,10 @@ import { getCountryCode } from "../../../functions/server/getCountryCode";
 import { getLocale } from "../../../functions/universal/getLocale";
 import { getExperiments } from "../../../functions/server/getExperiments";
 import { getExperimentationIdFromUserSession } from "../../../functions/server/getExperimentationId";
-import { getEnabledFeatureFlags } from "../../../../db/tables/featureFlags";
 import { getServerSession } from "../../../functions/server/getServerSession";
 import * as Sentry from "@sentry/nextjs";
 
 export default async function Layout(props: { children: ReactNode }) {
-  const enabledFeatureFlags = await getEnabledFeatureFlags({
-    isSignedOut: true,
-  });
   const l10n = getL10n(await getAcceptLangHeaderInServerComponents());
   const currentLocale = getLocale(l10n);
   const session = await getServerSession();
@@ -52,12 +48,7 @@ export default async function Layout(props: { children: ReactNode }) {
   }
 
   return (
-    <PublicShell
-      l10n={l10n}
-      countryCode={countryCode}
-      enabledFeatureFlags={enabledFeatureFlags}
-      experimentData={experimentData["Features"]}
-    >
+    <PublicShell l10n={l10n} experimentData={experimentData["Features"]}>
       {props.children}
     </PublicShell>
   );

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

@@ -15,18 +15,12 @@ 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}>
@@ -48,21 +42,17 @@ export const Footer = ({
             {l10n.getString("footer-nav-recent-breaches")}
           </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="/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)/MobileShell.tsx

@@ -132,10 +132,7 @@ export const MobileShell = (props: Props) => {
           {props.session &&
           props.enabledFeatureFlags.includes("SidebarNavigationRedesign") ? (
             <div className={styles.navbarListWrapper}>
-              <NavbarListAuthenticated
-                countryCode={props.countryCode}
-                enabledFeatureFlags={props.enabledFeatureFlags}
-              />
+              <NavbarListAuthenticated />
             </div>
           ) : (
             <div className={styles.mainMenu}>

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

@@ -5,7 +5,6 @@
 "use client";
 
 import { PageLink } from "../PageLink";
-import { FeatureFlagName } from "../../../../db/tables/featureFlags";
 import {
   DashboardIcon,
   NotificationIcon,
@@ -18,10 +17,7 @@ import styles from "./ShellNavbarList.module.scss";
 import { usePathname } from "next/navigation";
 import { useL10n } from "../../../hooks/l10n";
 
-export const NavbarList = (props: {
-  countryCode: string;
-  enabledFeatureFlags: FeatureFlagName[];
-}) => {
+export const NavbarList = () => {
   const l10n = useL10n();
   const pathname = usePathname();
   const hideSidebar = pathname === "/user/settings/edit-profile";
@@ -80,21 +76,18 @@ export const NavbarList = (props: {
         </ul>
         <hr />
         <ul className="noList">
-          {props.countryCode === "us" && (
-            <li key="how-it-works">
-              <PageLink
-                href="/how-it-works"
-                activeClassName={styles.isActive}
-                target="_blank"
-                hasTelemetry={{ link_id: "navigation_how_it_works" }}
-              >
-                <TipIcon alt="" />
-                {l10n.getString(
-                  "landing-premium-hero-navbar-link-how-it-works",
-                )}
-              </PageLink>
-            </li>
-          )}
+          <li key="how-it-works">
+            <PageLink
+              href="/how-it-works"
+              activeClassName={styles.isActive}
+              target="_blank"
+              hasTelemetry={{ link_id: "navigation_how_it_works" }}
+            >
+              <TipIcon alt="" />
+              {l10n.getString("landing-premium-hero-navbar-link-how-it-works")}
+            </PageLink>
+          </li>
+
           <li key="faq">
             <PageLink
               href="https://support.mozilla.org/kb/firefox-monitor-faq"

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

@@ -48,21 +48,11 @@ export const ShellRedesign = (props: Props) => {
                 width={170}
               />
             </Link>
-            {!props.hideSidebar && (
-              <NavbarList
-                countryCode={props.countryCode}
-                enabledFeatureFlags={props.enabledFeatureFlags}
-              />
-            )}
+            {!props.hideSidebar && <NavbarList />}
           </nav>
           <div className={styles.page}>{props.children}</div>
         </div>
-        <Footer
-          l10n={props.l10n}
-          session={props.session}
-          countryCode={props.countryCode}
-          enabledFeatureFlags={props.enabledFeatureFlags}
-        />
+        <Footer l10n={props.l10n} />
       </div>
     </MobileShell>
   );