New scoutgame builders & scouts page layout (#5083)

* Initial scout page layout changes

* Sticky builder search bar

* Added info modal for tables

* Use camel case for query params

* Added gallery builders layout

* Support for mobile screen

* Fixed search input size

* Added today's hot builders typography for scout page

* Added recent activity and leaderboard

* Refactored home page components

* Initial partner carousel

* Carousel pagination

* Fixed responsiveness for small screen

* Added info icon for mobile view in scout page

* Added pagination bullets for partner rewards

* Partner rewards for mobile screen

* builder page invite card

* Mobile view builders page

* New homepage

* Added builder invite modal

* Added pagination for mobile screen

* Fixed friends tab fill color

* Fixed scout page e2e tests

* Fixed info page e2e tests

* Fixed login page e2e tests

* fixed onboarding page e2e tests

* fixed profile page e2e tests

* fixed signout e2e tests

* buy nft e2e tests fixed

* Made landing page ssr

* Fixed broken type issues

* Fixed links for builder rewards

* Fixed issues with sunnyawards type check

apps/scoutgame/__e2e__/buyNft.spec.ts

@@ -29,7 +29,7 @@ test.describe('Buy Nft', () => {
       currentBalance: 200
     });
 
-    const builderNft = await mockBuilderNft({
+    await mockBuilderNft({
       builderId: builder.id,
       chainId: 10,
       contractAddress: getBuilderContractAddress(),
@@ -45,8 +45,8 @@ test.describe('Buy Nft', () => {
     });
 
     await utils.loginAsUserId(builder.id);
-    await page.goto(`/home`);
-    await page.waitForURL('**/home');
+    await page.goto(`/scout`);
+    await page.waitForURL('**/scout');
 
     await page.goto(`/u/${builder.path}`);
     await page.waitForURL(`**/u/${builder.path}`);
@@ -102,7 +102,7 @@ test.describe('Buy Nft', () => {
       currentBalance: 200
     });
 
-    const builderNft = await mockBuilderNft({
+    await mockBuilderNft({
       builderId: builder.id,
       chainId: 10,
       contractAddress: getBuilderContractAddress(),
@@ -118,8 +118,8 @@ test.describe('Buy Nft', () => {
     });
 
     await utils.loginAsUserId(builder.id);
-    await page.goto(`/home`);
-    await page.waitForURL('**/home');
+    await page.goto(`/scout`);
+    await page.waitForURL('**/scout');
 
     await page.goto(`/u/${builder.path}`);
     await page.waitForURL(`**/u/${builder.path}`);
@@ -131,6 +131,6 @@ test.describe('Buy Nft', () => {
 
     // NFT buy button
     await expect(page.locator('data-test=purchase-button').first()).toBeDisabled();
-    expect(await page.locator('data-test=address-error')).toBeVisible();
+    expect(page.locator('data-test=address-error')).toBeVisible();
   });
 });

apps/scoutgame/__e2e__/infoPage.spec.ts

@@ -34,29 +34,29 @@ test.describe('Info page', () => {
 });
 
 test.describe('Info page partners', () => {
-  test('Open Optimism from the home page', async ({ page, homePage, infoPage, utils }) => {
+  test('Open Optimism from the scout page', async ({ page, scoutPage, infoPage, utils }) => {
     const newUser = await mockScout({
       onboardedAt: new Date(),
       agreedToTermsAt: new Date(),
       avatar: 'https://placehold.co/256'
     });
     await utils.loginAsUserId(newUser.id);
 
-    await page.goto('/home');
-    await homePage.optimismPromoCard.click();
+    await page.goto('/scout');
+    await scoutPage.optimismPromoCard.click();
 
     await expect(infoPage.optimismContainer).toBeVisible();
   });
-  test('Open Moxie from the home page', async ({ page, homePage, infoPage, utils }) => {
+  test('Open Moxie from the scout page', async ({ page, scoutPage, infoPage, utils }) => {
     const newUser = await mockScout({
       onboardedAt: new Date(),
       agreedToTermsAt: new Date(),
       avatar: 'https://placehold.co/256'
     });
     await utils.loginAsUserId(newUser.id);
 
-    await page.goto('/home');
-    await homePage.moxiePromoCard.click();
+    await page.goto('/scout');
+    await scoutPage.moxiePromoCard.click();
 
     await expect(infoPage.moxieContainer).toBeVisible();
   });

apps/scoutgame/__e2e__/loginPage.spec.ts

@@ -3,11 +3,11 @@ import { mockBuilder } from '@packages/scoutgame/testing/database';
 import { expect, test } from './test';
 
 test.describe('Login page', () => {
-  test('Should redirect logged-in users to home page', async ({ homePage, utils, page }) => {
+  test('Should redirect logged-in users to scout page', async ({ scoutPage, homePage, utils, page }) => {
     const builder = await mockBuilder({});
 
     await page.goto('/');
-    await page.waitForURL('**/home');
+    await page.waitForURL('**/');
     await expect(homePage.getStartedButton).toBeVisible();
 
     await homePage.getStartedButton.click();
@@ -22,9 +22,9 @@ test.describe('Login page', () => {
 
     await utils.loginAsUserId(builder.id);
 
-    await page.goto('/home');
-    await page.waitForURL('**/home');
-    await expect(homePage.container).toBeVisible();
+    await page.goto('/scout');
+    await page.waitForURL('**/scout');
+    await expect(scoutPage.container).toBeVisible();
 
     const userPill = page.locator('data-test=user-menu-pill');
     await expect(userPill).toBeVisible();

apps/scoutgame/__e2e__/onboarding.spec.ts

@@ -7,18 +7,13 @@ import { expect, test } from './test';
 test.describe('Onboarding flow', () => {
   test('Open the app to home page and go to Sign In', async ({ page, homePage, loginPage }) => {
     await page.goto('/');
-    // Logged in user should be redirected
-    await page.waitForURL('**/home');
-
     await expect(homePage.getStartedButton).toBeVisible();
-
     await homePage.getStartedButton.click();
-
     await page.waitForURL('**/login');
     await expect(loginPage.container).toBeVisible();
   });
 
-  test('Save new user preferences and get through onboarding', async ({ welcomePage, homePage, page, utils }) => {
+  test('Save new user preferences and get through onboarding', async ({ welcomePage, scoutPage, page, utils }) => {
     const newUser = await mockScout({
       onboardedAt: null,
       agreedToTermsAt: null,
@@ -67,9 +62,9 @@ test.describe('Onboarding flow', () => {
 
     await Promise.all([page.waitForURL('**/welcome/how-it-works'), welcomePage.continueButton.click()]);
 
-    await Promise.all([page.waitForURL('**/home', { waitUntil: 'load' }), welcomePage.continueButton.click()]);
+    await Promise.all([page.waitForURL('**/scout', { waitUntil: 'load' }), welcomePage.continueButton.click()]);
 
-    await expect(homePage.container).toBeVisible();
+    await expect(scoutPage.container).toBeVisible();
 
     // make sure we saved onboarding preferences
     const userAfterOnboarding = await prisma.scout.findFirstOrThrow({
@@ -97,7 +92,7 @@ test.describe('Onboarding flow', () => {
     await utils.loginAsUserId(onboardedUser.id);
 
     // Test redirect from home page
-    await page.goto('/home');
+    await page.goto('/scout');
     await page.waitForURL('**/welcome');
     await expect(welcomePage.container).toBeVisible();
   });
@@ -110,7 +105,7 @@ test.describe('Onboarding flow', () => {
     await utils.loginAsUserId(newUser.id);
 
     // Test redirect from home page
-    await page.goto('/home');
+    await page.goto('/');
     await page.waitForURL('**/welcome');
     await expect(welcomePage.container).toBeVisible();
 

apps/scoutgame/__e2e__/po/HomePage.po.ts

@@ -8,9 +8,7 @@ export class HomePage extends GeneralPageLayout {
   constructor(
     protected page: Page,
     public container = page.locator('data-test=home-page'),
-    public getStartedButton = page.locator('data-test=get-started-button'),
-    public optimismPromoCard = page.locator('data-test=promo-card-optimism'),
-    public moxiePromoCard = page.locator('data-test=promo-card-moxie')
+    public getStartedButton = page.locator('data-test=get-started-button')
   ) {
     super(page);
   }

apps/scoutgame/__e2e__/po/ScoutPage.po.ts

@@ -0,0 +1,14 @@
+import type { Page } from '@playwright/test';
+
+import { GeneralPageLayout } from './GeneralPageLayout.po';
+
+export class ScoutPage extends GeneralPageLayout {
+  constructor(
+    protected page: Page,
+    public container = page.locator('data-test=scout-page'),
+    public optimismPromoCard = page.locator('data-test=promo-card-optimism'),
+    public moxiePromoCard = page.locator('data-test=promo-card-moxie')
+  ) {
+    super(page);
+  }
+}

apps/scoutgame/__e2e__/profilePage.spec.ts

@@ -3,22 +3,22 @@ import { mockBuilder } from '@packages/scoutgame/testing/database';
 import { expect, test } from './test';
 
 test.describe('Profile page', () => {
-  test('Should redirect non-logged in users to login page', async ({ page, loginPage }) => {
+  test('Should redirect non-logged in users to login page', async ({ page }) => {
     await page.goto('/profile');
 
     await page.waitForURL('**/login');
     const container = page.locator('data-test=login-page');
     await expect(container).toBeVisible();
   });
 
-  test('An onboarded user can access the profile page', async ({ page, profilePage, utils }) => {
+  test('An onboarded user can access the profile page', async ({ page, utils }) => {
     const builder = await mockBuilder({
       agreedToTermsAt: new Date(),
       onboardedAt: new Date()
     });
     await utils.loginAsUserId(builder.id);
 
-    await page.goto('/home');
+    await page.goto('/scout');
     const link = page.locator(`data-test=site-navigation >> [href*="/profile"]`).first();
     await link.click();
 

apps/scoutgame/__e2e__/homePage.spec.ts → apps/scoutgame/__e2e__/scoutPage.spec.ts

@@ -8,8 +8,8 @@ async function mockLeaderboard() {
   return { builder, userWeeklyStats };
 }
 
-test.describe('Home page', () => {
-  test('Open the app and go to profile page as a public user', async ({ page, homePage, utils }) => {
+test.describe('Scout page', () => {
+  test('Open the app and go to profile page as a public user', async ({ page, scoutPage, utils }) => {
     const newUser = await mockScout({
       onboardedAt: null,
       agreedToTermsAt: null,
@@ -19,11 +19,11 @@ test.describe('Home page', () => {
 
     await page.goto('/');
     // Logged in user should be redirected
-    await page.waitForURL('**/home');
+    await page.waitForURL('**/scout');
 
-    await expect(homePage.container).toBeVisible();
+    await expect(scoutPage.container).toBeVisible();
   });
-  test('Can navigate to each tab', async ({ page, homePage, utils }) => {
+  test('Can navigate to each scouts table tab', async ({ page, scoutPage, utils }) => {
     // add some mock data
     await mockLeaderboard();
 
@@ -34,14 +34,20 @@ test.describe('Home page', () => {
     });
     await utils.loginAsUserId(newUser.id);
 
-    await page.goto('/home');
-    await expect(homePage.container).toBeVisible();
+    await page.goto('/scout');
+    await expect(scoutPage.container).toBeVisible();
 
-    for (const tab of homePage.tabs) {
-      await homePage.selectTab(tab);
-      await expect(homePage.tabView(tab)).toBeVisible();
-    }
-    await homePage.selectTab('leaderboard');
-    await expect(homePage.tabView('leaderboard')).toBeVisible();
+    // Find the first scouts tab which is not hidden
+    const scoutsTab = scoutPage.container.locator('data-test=tab-scouts').last();
+    await scoutsTab.click();
+
+    const scoutTable = scoutPage.container.locator('data-test=scouts-table').last();
+    await expect(scoutTable).toBeVisible();
+
+    const newScoutsTab = scoutPage.container.locator('data-test=tab-new-scouts').last();
+    await newScoutsTab.click();
+
+    const newScoutTable = scoutPage.container.locator('data-test=new-scouts-table').last();
+    await expect(newScoutTable).toBeVisible();
   });
 });

apps/scoutgame/__e2e__/signOut.spec.ts

@@ -3,12 +3,12 @@ import { mockBuilder } from '@packages/scoutgame/testing/database';
 import { expect, test } from './test';
 
 test.describe('Sign Out', () => {
-  test('Should be able to sign out', async ({ homePage, utils, page }) => {
+  test('Should be able to sign out', async ({ utils, page }) => {
     const builder = await mockBuilder({});
 
     await utils.loginAsUserId(builder.id);
-    await page.goto('/home');
-    await page.waitForURL('**/home');
+    await page.goto('/scout');
+    await page.waitForURL('**/scout');
 
     const userPill = page.locator('data-test=user-menu-pill');
     await expect(userPill).toBeVisible();

apps/scoutgame/__e2e__/test.ts

@@ -4,6 +4,7 @@ import { HomePage } from './po/HomePage.po';
 import { InfoPage } from './po/InfoPage.po';
 import { LoginPage } from './po/LoginPage.po';
 import { ProfilePage } from './po/ProfilePage.po';
+import { ScoutPage } from './po/ScoutPage.po';
 import { UserPage } from './po/UserPage.po';
 import { Utilities } from './po/Utilities.po';
 import { WelcomePage } from './po/WelcomePage.po';
@@ -16,6 +17,7 @@ type Fixtures = {
   utils: Utilities;
   infoPage: InfoPage;
   userPage: UserPage;
+  scoutPage: ScoutPage;
 };
 
 export const test = base.extend<Fixtures>({
@@ -46,7 +48,8 @@ export const test = base.extend<Fixtures>({
   welcomePage: ({ page }, use) => use(new WelcomePage(page)),
   utils: ({ page }, use) => use(new Utilities(page)),
   infoPage: ({ page }, use) => use(new InfoPage(page)),
-  userPage: ({ page }, use) => use(new UserPage(page))
+  userPage: ({ page }, use) => use(new UserPage(page)),
+  scoutPage: ({ page }, use) => use(new ScoutPage(page))
 });
 
 export { chromium, expect } from '@playwright/test';

apps/scoutgame/app/(general)/builders-you-know/page.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 export default async function BuildersYouKnow() {
   const user = await getUserFromSession();
 
-  const redirectPath = '/home';
+  const redirectPath = '/scout';
 
   if (!user?.farcasterId) {
     redirect(redirectPath);

apps/scoutgame/app/(general)/builders/page.tsx

@@ -0,0 +1,14 @@
+import { getCurrentWeek, validateISOWeek } from '@packages/scoutgame/dates';
+
+import { BuildersPage } from 'components/builders/BuildersPage';
+
+export default async function Builders({
+  searchParams
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const tab = (searchParams.tab as string) || 'leaderboard';
+  const week = searchParams.week as string | undefined;
+
+  return <BuildersPage tab={tab} week={week && validateISOWeek(week) ? week : getCurrentWeek()} />;
+}

apps/scoutgame/app/(general)/page.tsx

@@ -0,0 +1,5 @@
+import { LandingPage } from 'components/home/LandingPage';
+
+export default async function Home() {
+  return <LandingPage />;
+}

apps/scoutgame/app/(general)/scout/page.tsx

@@ -1,13 +1,27 @@
 import { ScoutPage } from 'components/scout/ScoutPage';
-import type { BuildersSort } from 'lib/builders/getSortedBuilders';
 
 export default async function Scout({
   searchParams
 }: {
   searchParams: { [key: string]: string | string[] | undefined };
 }) {
-  const sortParam = searchParams.tab;
-  const sort = (sortParam && typeof sortParam === 'string' ? sortParam : 'top') as BuildersSort;
+  const scoutSort = (searchParams.scoutSort as string) || 'points';
+  const builderSort = (searchParams.builderSort as string) || 'rank';
+  const builderOrder = (searchParams.builderOrder as string) || 'asc';
+  const scoutOrder = (searchParams.scoutOrder as string) || 'desc';
+  const scoutTab = (searchParams.scoutTab as string) || 'scouts';
+  const buildersLayout = (searchParams.buildersLayout as string) || 'table';
+  const tab = (searchParams.tab as string) || 'scouts';
 
-  return <ScoutPage sort={sort} />;
+  return (
+    <ScoutPage
+      scoutSort={scoutSort}
+      builderSort={builderSort}
+      scoutOrder={scoutOrder}
+      builderOrder={builderOrder}
+      scoutTab={scoutTab}
+      buildersLayout={buildersLayout}
+      tab={tab}
+    />
+  );
 }