feat(user): remove Age Range from profile, add upgrade-to-paid link

client/src/app/features/user/components/UserProfileView.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import type { FormEvent } from "react";
+import { Link } from "react-router-dom";
 import Dialog from "@mui/material/Dialog";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
@@ -143,8 +144,17 @@ export function UserProfileView({
           saveLabel={text.userUpdateSubmit}
           cancelLabel={text.userUpdateCancel}
         />
-        <ProfileRow label={text.userAgeRange} value={profile.ageRange} />
         <ProfileRow label={text.userSubscriptionTier} value={profile.subscriptionTier} />
+        {profile.subscriptionTier === "free" && (
+          <div className="px-6 py-4">
+            <Link
+              to="/subscription/upgrade"
+              className="text-sm font-semibold text-indigo-600 hover:text-indigo-800"
+            >
+              {text.userUpgradeToPaid}
+            </Link>
+          </div>
+        )}
       </div>
 
       {deleteError != null && <ErrorPanel message={text.userDeleteError} />}

client/src/app/features/user/components/__tests__/UserProfileView.test.tsx

@@ -56,18 +56,32 @@ describe("UserProfileView", () => {
 
     expect(screen.getByText("First Name")).toBeInTheDocument();
     expect(screen.getByText("Last Name")).toBeInTheDocument();
-    expect(screen.getByText("Age Range")).toBeInTheDocument();
-    expect(screen.getByText("teens")).toBeInTheDocument();
     expect(screen.getByText("Subscription")).toBeInTheDocument();
     expect(screen.getByText("free")).toBeInTheDocument();
+    expect(screen.queryByText("Age Range")).not.toBeInTheDocument();
+    expect(screen.queryByText("teens")).not.toBeInTheDocument();
 
     expect(screen.getByRole("button", { name: "Edit First Name" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Edit Last Name" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Edit Email" })).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Edit Age Range" })).not.toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Edit Subscription" })).not.toBeInTheDocument();
   });
 
+  it("shows an upgrade-to-paid link when the subscription tier is free", () => {
+    renderView();
+
+    expect(screen.getByRole("link", { name: "Upgrade to Paid" })).toHaveAttribute(
+      "href",
+      "/subscription/upgrade",
+    );
+  });
+
+  it("does not show the upgrade-to-paid link when the subscription tier is paid", () => {
+    renderView({ profile: { ...profile, subscriptionTier: "paid" } });
+
+    expect(screen.queryByRole("link", { name: "Upgrade to Paid" })).not.toBeInTheDocument();
+  });
+
   it("turns only the selected field into an input, pre-filled with its current value", () => {
     renderView();
 

client/src/locals/en/ui.json

@@ -86,5 +86,6 @@
   "userDeleteError": "Failed to delete user.",
   "login": "Login",
   "loginError": "Failed to log in.",
-  "logout": "Log out"
+  "logout": "Log out",
+  "userUpgradeToPaid": "Upgrade to Paid"
 }

client/src/locals/ja/ui.json

@@ -86,5 +86,6 @@
   "userDeleteError": "ユーザーの削除に失敗しました。",
   "login": "ログイン",
   "loginError": "ログインに失敗しました。",
-  "logout": "ログアウト"
+  "logout": "ログアウト",
+  "userUpgradeToPaid": "有料プランへアップグレード"
 }