feat(private-zone): default to albums tab

(cherry picked from commit a2cf62f78b)

e2e/specs/mock/multi-role-commercial.spec.ts

@@ -107,13 +107,14 @@ for (const character of characters) {
     await page.goto(`/characters/${character.slug}/private-zone`);
 
     await Promise.all([momentsRequest, albumRequest]);
-    await expect(
-      page.getByRole("heading", { name: "Private moments" }),
-    ).toBeVisible();
-    await page.getByRole("tab", { name: "Albums" }).click();
     await expect(
       page.getByRole("heading", { name: "Private albums" }),
     ).toBeVisible();
+    await expect(page.getByRole("tab")).toHaveText(["Albums", "Moments"]);
+    await expect(page.getByRole("tab", { name: "Albums" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
     await expect(page.getByText(character.displayName).last()).toBeVisible();
     const albumButton = page.getByRole("button", {
       name: `View locked collection with 8 images from ${character.displayName}`,
@@ -163,7 +164,6 @@ test("a real Private Zone request failure still offers Retry", async ({
 
   await page.goto("/characters/maya/private-zone");
 
-  await page.getByRole("tab", { name: "Albums" }).click();
   await expect(page.getByRole("button", { name: "Retry" })).toBeVisible();
   await expect(page.getByRole("button", { name: "Refresh" })).toHaveCount(0);
 });

e2e/specs/mock/private-zone-video.spec.ts

@@ -17,7 +17,7 @@ test.beforeEach(async ({ baseURL, context, page }) => {
   await registerPrivateZoneVideoMocks(page);
 });
 
-test("Private Zone defaults to Moments and reveals video only after one credit unlock", async ({
+test("Private Zone defaults to Albums and reveals video after switching to Moments", async ({
   page,
 }) => {
   await seedEmailSession(page);
@@ -32,6 +32,11 @@ test("Private Zone defaults to Moments and reveals video only after one credit u
   await page.goto("/characters/maya/private-zone");
   await listRequest;
 
+  await expect(
+    page.getByRole("heading", { name: "Private albums" }),
+  ).toBeVisible();
+  await expect(page.getByText("Maya archive")).toBeVisible();
+  await page.getByRole("tab", { name: "Moments" }).click();
   await expect(
     page.getByRole("heading", { name: "Private moments" }),
   ).toBeVisible();
@@ -53,16 +58,29 @@ test("Private Zone defaults to Moments and reveals video only after one credit u
   await expect(page.getByRole("alertdialog")).toHaveCount(0);
 });
 
-test("Albums remain available behind the second tab", async ({ page }) => {
+test("Albums render first and Moments remain available behind the second tab", async ({ page }) => {
   await seedEmailSession(page);
   await page.goto("/characters/maya/private-zone");
 
-  await page.getByRole("tab", { name: "Albums" }).click();
+  const tabs = page.getByRole("tab");
-
+  await expect(tabs).toHaveText(["Albums", "Moments"]);
+  await expect(page.getByRole("tab", { name: "Albums" })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
   await expect(
     page.getByRole("heading", { name: "Private albums" }),
   ).toBeVisible();
   await expect(page.getByText("Maya archive")).toBeVisible();
+
+  await page.getByRole("tab", { name: "Moments" }).click();
+  await expect(page.getByRole("tab", { name: "Moments" })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
+  await expect(
+    page.getByRole("heading", { name: "Private moments" }),
+  ).toBeVisible();
 });
 
 async function registerPrivateZoneVideoMocks(page: Page): Promise<void> {

src/app/private-zone/private-zone-screen.tsx

@@ -63,7 +63,7 @@ export function PrivateZoneScreen() {
   const dispatch = usePrivateZoneDispatch();
   const postState = usePrivateZonePostState();
   const postDispatch = usePrivateZonePostDispatch();
-  const [activeTab, setActiveTab] = useState<"moments" | "albums">("moments");
+  const [activeTab, setActiveTab] = useState<"moments" | "albums">("albums");
   const openedGalleryInPageRef = useRef(false);
   const previousPostLoginStatusRef = useRef(authState.loginStatus);
   const galleryState = useMemo(
@@ -313,15 +313,6 @@ export function PrivateZoneScreen() {
 
         <section className={styles.postsSection} aria-labelledby="posts-title">
           <div className={styles.contentTabs} role="tablist" aria-label="Private Zone content">
-            <button
-              type="button"
-              role="tab"
-              aria-selected={visibleTab === "moments"}
-              className={`${styles.contentTab} ${visibleTab === "moments" ? styles.contentTabActive : ""}`}
-              onClick={() => setActiveTab("moments")}
-            >
-              Moments
-            </button>
             <button
               type="button"
               role="tab"
@@ -331,6 +322,15 @@ export function PrivateZoneScreen() {
             >
               Albums
             </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={visibleTab === "moments"}
+              className={`${styles.contentTab} ${visibleTab === "moments" ? styles.contentTabActive : ""}`}
+              onClick={() => setActiveTab("moments")}
+            >
+              Moments
+            </button>
           </div>
 
           <div className={styles.sectionHeader}>