enhance(signup): replace "Get MDN Plus" with "Sign up for free" (mdn#…

…9357) * enhance(signup): replace "Get MDN Plus" with "Sign up for free" Also replaces "Upgrade to MDN Plus" with "Log in to MDN Plus". * fix(playground): remove space Co-authored-by: Leo McArdle <[email protected]> * refactor(client): extract PlusLoginBanner * refactor(client): rename/inline old login-banner.tsx * chore(login-banner): revert to "Upgrade to MDN Plus" * chore(login-banner): add "[Upgrade to MDN Plus] for free" The Playground banner already had this. * enhance(login-banner): improve responsiveness * chore(telemetry): mark unused constants as deprecated * fixup! refactor(client): extract PlusLoginBanner * chore(telemetry): update login/signup constants * chore(telemetry): remove unused constants + mention in JSDoc * refactor(client): rename SignInLink to LogInLink * update class on LogInLink component from signin-link to login-link * simplify responsive css on login banner * adjust site header so it doesn't overflow just prior to breakpoint --------- Co-authored-by: Leo McArdle <[email protected]>
mfuji09 · Jul 25, 2023 · 2abbeba · 2abbeba
1 parent f9d6129
commit 2abbeba
Show file tree

Hide file tree

Showing 21 changed files with 140 additions and 151 deletions.
diff --git a/client/src/playground/forms.tsx b/client/src/playground/forms.tsx
@@ -3,10 +3,9 @@ import { Button } from "../ui/atoms/button";
 import { EditorContent, codeToMarkdown } from "./utils";
 import { Loading } from "../ui/atoms/loading";
 import { useUserData } from "../user-context";
-import { usePlusUrl } from "../plus/utils";
 import { useGleanClick } from "../telemetry/glean-context";
-import { AuthContainer } from "../ui/molecules/auth-container";
 import { PLAYGROUND } from "../telemetry/constants";
+import { PlusLoginBanner } from "../plus/common/login-banner";
 
 export function FlagForm({ gistId }: { gistId: string | null }) {
   return (
@@ -64,7 +63,6 @@ export function ShareForm({
   extraClasses?: string;
 }) {
   let userData = useUserData();
-  const href = usePlusUrl();
   const gleanClick = useGleanClick();
   let [loading, setLoading] = useState(false);
   return (
@@ -126,25 +124,10 @@ export function ShareForm({
             )}
           </>
         ) : (
-          <div className="share-get-plus">
-            <span>Want to share this playground via link?</span>
+          <PlusLoginBanner className="share-get-plus" gleanPrefix={PLAYGROUND}>
+            Want to share this playground via link?
             <br />
-            <strong>
-              Upgrade to{" "}
-              <a
-                className="plus-link"
-                href={href}
-                onClick={() => gleanClick(`${PLAYGROUND}: banner-link`)}
-              >
-                MDN Plus
-              </a>{" "}
-              for free.
-            </strong>
-            <AuthContainer
-              signInGleanContext={`${PLAYGROUND}: banner-login`}
-              subscribeGleanContext={`${PLAYGROUND}: banner-button`}
-            />
-          </div>
+          </PlusLoginBanner>
         )}
       </section>
     </form>

diff --git a/client/src/plus/ai-help/banners.tsx b/client/src/plus/ai-help/banners.tsx
@@ -0,0 +1,34 @@
+import { AI_HELP } from "../../telemetry/constants";
+import { SignUpLink } from "../../ui/atoms/signup-link";
+import { PlusLoginBanner } from "../common/login-banner";
+
+export function AiLoginBanner() {
+  return (
+    <PlusLoginBanner gleanPrefix={AI_HELP}>
+      Want to use AI Help?
+    </PlusLoginBanner>
+  );
+}
+
+export function AiUpsellBanner({ limit }: { limit: number }) {
+  return (
+    <div className="login-banner">
+      <span>
+        <span>You have reached the limit of {limit} questions per day.</span>
+        <br />
+        <span>
+          <strong>Want to ask more?</strong> Upgrade to MDN Plus 5 or MDN
+          Supporter 10.
+        </span>
+      </span>
+      <ul className="auth-container">
+        <li>
+          <SignUpLink
+            gleanContext={`${AI_HELP}: upsell-button`}
+            toPlans={true}
+          />
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import { Message, MessageRole, Quota, useAiChat } from "./use-ai";
-import { AiLoginBanner, AiUpsellBanner } from "./login-banner";
+import { AiLoginBanner, AiUpsellBanner } from "./banners";
 import { useUserData } from "../../user-context";
 import Container from "../../ui/atoms/container";
 import { FeatureId, MDN_PLUS_TITLE } from "../../constants";

diff --git a/client/src/plus/ai-help/login-banner.tsx b/client/src/plus/ai-help/login-banner.tsx
diff --git a/client/src/plus/app.tsx b/client/src/plus/app.tsx
@@ -1,6 +1,6 @@
 import { useSearchParams } from "react-router-dom";
 import Notification from "../ui/atoms/notification";
-import { SubscribeLink } from "../ui/atoms/subscribe-link";
+import { SignUpLink } from "../ui/atoms/signup-link";
 
 import "./index.scss";
 
@@ -16,7 +16,7 @@ export default function App() {
       )}
 
       <p>
-        <SubscribeLink />
+        <SignUpLink />
       </p>
     </div>
   );

diff --git a/client/src/plus/collections/new-edit-collection-modal.tsx b/client/src/plus/collections/new-edit-collection-modal.tsx
@@ -4,7 +4,7 @@ import { Button } from "../../ui/atoms/button";
 import MDNModal from "../../ui/atoms/modal";
 import NoteCard from "../../ui/molecules/notecards";
 import { SubscriptionType, useUserData } from "../../user-context";
-import { SubscribeLink } from "../../ui/atoms/subscribe-link";
+import { SignUpLink } from "../../ui/atoms/signup-link";
 import {
   Collection,
   NewCollection,
@@ -103,7 +103,7 @@ export default function NewEditCollectionModal({
               Upgrade now to receive unlimited access to collections, and more:
             </p>
             <div className="mdn-form-item is-button-row">
-              <SubscribeLink
+              <SignUpLink
                 toPlans={true}
                 gleanContext={NEW_COLLECTION_MODAL_UPGRADE_LINK}
               />

diff --git a/client/src/plus/common/index.tsx b/client/src/plus/common/index.tsx
@@ -1,12 +1,12 @@
-import SignInLink from "../../ui/atoms/signin-link";
+import LogInLink from "../../ui/atoms/login-link";
 import NoteCard from "../../ui/molecules/notecards";
 import { getCategoryByPathname } from "../../utils";
 
 export function NotSignedIn() {
   return (
     <div className="container">
       <h3>You have not signed in</h3>
-      <SignInLink />
+      <LogInLink />
     </div>
   );
 }
@@ -15,7 +15,7 @@ export function NotSubscriber() {
   return (
     <>
       <h2>You are signed in but not an active subscriber</h2>
-      <SignInLink />
+      <LogInLink />
     </>
   );
 }

diff --git a/client/src/plus/ai-help/login-banner.scss → client/src/plus/common/login-banner.scss b/client/src/plus/ai-help/login-banner.scss → client/src/plus/common/login-banner.scss
@@ -1,8 +1,12 @@
+@use "../../ui/vars" as *;
+
 .login-banner {
+  align-items: center;
   background-color: var(--background-success);
   border: 2px solid var(--background-success);
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
   padding: 1rem;
 
   .plus-link {
@@ -12,4 +16,12 @@
     text-decoration-thickness: 0.15rem;
     text-underline-offset: 0.1em;
   }
+
+  .auth-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 0;
+    margin-left: auto;
+  }
 }
diff --git a/client/src/plus/updates/login-banner.tsx → client/src/plus/common/login-banner.tsx b/client/src/plus/updates/login-banner.tsx → client/src/plus/common/login-banner.tsx
@@ -1,32 +1,39 @@
+import { useGleanClick } from "../../telemetry/glean-context";
 import { AuthContainer } from "../../ui/molecules/auth-container";
-import "./login-banner.scss";
 import { usePlusUrl } from "../utils";
-import { PLUS_UPDATES } from "../../telemetry/constants";
-import { useGleanClick } from "../../telemetry/glean-context";
+import "./login-banner.scss";
 
-export function LoginBanner() {
+export function PlusLoginBanner({
+  children,
+  className = "login-banner",
+  gleanPrefix,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  gleanPrefix: string;
+}) {
   const href = usePlusUrl();
   const gleanClick = useGleanClick();
 
   return (
-    <div className="login-banner">
+    <div className={className}>
       <span>
-        <span>Want to use filters?</span>{" "}
+        <span>{children}</span>{" "}
         <strong>
           Upgrade to{" "}
           <a
             className="plus-link"
             href={href}
-            onClick={() => gleanClick(`${PLUS_UPDATES.MDN_PLUS}: banner-link`)}
+            onClick={() => gleanClick(`${gleanPrefix}: banner-link`)}
           >
             MDN Plus
-          </a>
-          .
+          </a>{" "}
+          for free.
         </strong>
       </span>
       <AuthContainer
-        signInGleanContext={`${PLUS_UPDATES.MDN_PLUS}: banner-login`}
-        subscribeGleanContext={`${PLUS_UPDATES.MDN_PLUS}: banner-button`}
+        logInGleanContext={`${gleanPrefix}: banner-login`}
+        signUpGleanContext={`${gleanPrefix}: banner-signup`}
       />
     </div>
   );

diff --git a/client/src/plus/offer-overview/offer-overview-subscribe/index.tsx b/client/src/plus/offer-overview/offer-overview-subscribe/index.tsx
@@ -14,7 +14,7 @@ import { getStripePlans } from "../../common/api";
 import { useOnlineStatus } from "../../../hooks";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import { OFFER_OVERVIEW_CLICK } from "../../../telemetry/constants";
-import SignInLink from "../../../ui/atoms/signin-link";
+import LogInLink from "../../../ui/atoms/login-link";
 
 export enum Period {
   Month,
@@ -347,7 +347,7 @@ function OfferOverviewSubscribe() {
                 {!activeSubscription && (
                   <>
                     {" "}
-                    or <SignInLink cta="log in" />
+                    or <LogInLink cta="log in" />
                   </>
                 )}
               </h2>

diff --git a/client/src/plus/updates/index.tsx b/client/src/plus/updates/index.tsx
@@ -19,11 +19,11 @@ import "./index.scss";
 import { useGleanClick } from "../../telemetry/glean-context";
 import { PLUS_UPDATES } from "../../telemetry/constants";
 import SearchFilter, { AnyFilter, AnySort } from "../search-filter";
-import { LoginBanner } from "./login-banner";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { DataError } from "../common";
 import { useCollections } from "../collections/api";
+import { PlusLoginBanner } from "../common/login-banner";
 
 type EventWithStatus = Event & { status: Status };
 type Status = "added" | "removed";
@@ -201,7 +201,11 @@ function UpdatesLayout() {
           }
         />
 
-        {user && !user.isAuthenticated && <LoginBanner />}
+        {user && !user.isAuthenticated && (
+          <PlusLoginBanner gleanPrefix={PLUS_UPDATES.MDN_PLUS}>
+            Want to use filters?
+          </PlusLoginBanner>
+        )}
 
         {user && user.isAuthenticated && hasFilters && (
           <Button

diff --git a/client/src/plus/updates/login-banner.scss b/client/src/plus/updates/login-banner.scss
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
@@ -27,8 +27,10 @@ export const OFFER_OVERVIEW_CLICK = "offer_overview_click";
 export const SIDEBAR_CLICK = "sidebar_click";
 export const SIDEBAR_CLICK_WITH_FILTER = "sidebar_click_with_filter";
 export const SIDEBAR_FILTER_FOCUS = "sidebar_filter_focus";
-export const TOP_NAV_ALREADY_SUBSCRIBER = "top_nav_already_subscriber";
-export const TOP_NAV_GET_MDN_PLUS = "top_nav_get_mdn_plus";
+/** Replaced "top_nav_already_subscriber" in July 2023. */
+export const TOP_NAV_LOGIN = "top_nav: login";
+/** Replaced "top_nav_get_mdn_plus" in July 2023. */
+export const TOP_NAV_SIGNUP = "top_nav: signup";
 export const TOGGLE_PLUS_OFFLINE_DISABLED = "toggle_plus_offline_disabled";
 export const TOGGLE_PLUS_OFFLINE_ENABLED = "toggle_plus_offline_enabled";
 export const TOGGLE_PLUS_ADS_FREE_DISABLED = "toggle_plus_ads_free_disabled";

diff --git a/client/src/ui/atoms/signin-link/index.scss → client/src/ui/atoms/login-link/index.scss b/client/src/ui/atoms/signin-link/index.scss → client/src/ui/atoms/login-link/index.scss
@@ -1,7 +1,7 @@
 @use "../../vars" as *;
 
 .auth-container {
-  .signin-link {
+  .login-link {
     align-items: center;
     display: inline-flex;
     font-weight: var(--font-body-strong-weight);