Migrate Challenger welcome to Next.js (#235)

* add challenger welcome

* challenger welcome test

* finished testing

* finished partner context testing

* Ported over challengerwelcome. Missing Rewards context.

* Added rewards context and tests for it.

---------

Co-authored-by: “erhaneth” <[email protected]>

src/__tests__/contexts/rewards-context.spec.tsx

@@ -0,0 +1,25 @@
+import { RewardsContext, RewardsContextProvider } from '@/contexts/rewards-context';
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+
+function MockChildComponent() {
+  const {rewards} = useContext(RewardsContext);
+  return (
+    <div data-testid="test">{rewards.length > 0 ? rewards[0].name : "your friend"}</div>
+  );
+}
+
+describe('RewardsContextProvider', () => {
+  afterEach(cleanup);
+
+  it('defaults to an rewardsInfo value of an empty array.', () => {
+    render(
+      <RewardsContextProvider>
+        <MockChildComponent />
+      </RewardsContextProvider>
+    );
+    const noRewards = screen.queryByTestId('test');
+    expect(noRewards).toHaveTextContent('your friend');
+  });
+});

src/__tests__/pages/challenger-welcome/__snapshots__/challenger-welcome.snapshot.tsx.snap

@@ -0,0 +1,198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChallengerWelcome renders challenger-welcome page unchanged 1`] = `
+<div>
+  <div
+    class="outer_container"
+  >
+    <div
+      class="inner_container"
+    >
+      <section
+        class="section_1"
+      >
+        <img
+          alt="background"
+          class="background"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <div
+          class="container"
+        >
+          <img
+            alt="8by8 Logo"
+            class="logo"
+            data-nimg="1"
+            decoding="async"
+            height="40"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+            style="color: transparent;"
+            width="40"
+          />
+        </div>
+      </section>
+      <section
+        class="section_2"
+      >
+        <h1
+          class="underline"
+        >
+          Welcome!
+        </h1>
+        <p
+          class="content"
+        >
+          Closing the voter registration gap has to be a community effort, so we're asking everyone to join us in taking the #8by8Challenge—register 8 friends to register to vote in 8 days!
+        </p>
+        <button
+          class="get_started_btn"
+          type="button"
+        >
+          Get Started
+        </button>
+        <p
+          class="signin_line"
+        >
+          Already have an account?
+           
+          <a
+            href="/signin"
+          >
+            Sign in
+          </a>
+        </p>
+        <a
+          class="teal_link"
+          href="/why8by8"
+        >
+          See why others are doing it
+        </a>
+      </section>
+      <section
+        class="content_3"
+      >
+        <h2
+          class="underline"
+        >
+          Here's How it Works
+        </h2>
+        <h3
+          class="step_header"
+        >
+          1. Sign Up
+        </h3>
+        <p
+          class="step_text"
+        >
+          Sign up with your name and email address to get started.
+        </p>
+        <img
+          alt="sign up"
+          class="image"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <h3
+          class="step_header"
+        >
+          2. Invite your friends
+        </h3>
+        <p
+          class="step_text"
+        >
+          Get 8 friends via social media or messaging apps to join your challenge.
+        </p>
+        <img
+          alt="invite your friends"
+          class="image"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <h3
+          class="step_header"
+        >
+          3. Friends take action
+        </h3>
+        <p
+          class="step_text"
+        >
+          Your friends can support your challenge by taking 1 of 3 actions: register to vote, set up election reminders, or take the challenge themselves. You'll earn 1 badge per friend who takes action!
+        </p>
+        <img
+          alt="friends take action"
+          class="image"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <h3
+          class="step_header"
+        >
+          4. Win the challenge, get a reward!
+        </h3>
+        <p
+          class="step_text"
+        >
+          When you get 8 badges in 8 days, you win the challenge! Most importantly, you helped the community move closer to greater AAPI representation!
+        </p>
+        <img
+          alt="earn 8 badges in 8 days"
+          class="image"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <button
+          class="get_started_btn"
+          type="button"
+        >
+          Get Started
+        </button>
+        <p
+          class="signin_line"
+        >
+          Already have an account?
+           
+          <a
+            class="signin_link_black"
+            href="/signin"
+          >
+            Sign in
+          </a>
+        </p>
+      </section>
+    </div>
+  </div>
+</div>
+`;

src/__tests__/pages/challenger-welcome/challenger-welcome.snapshot.tsx

@@ -0,0 +1,17 @@
+import ChallengerWelcome from '@/pages/challenger-welcome';
+import { cleanup, render } from '@testing-library/react';
+
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn()
+}))
+
+describe('ChallengerWelcome', () => {
+  afterEach(cleanup);
+
+  it('renders challenger-welcome page unchanged', () => {
+    const { container } = render(<ChallengerWelcome />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx

@@ -0,0 +1,71 @@
+import { RewardsContext, RewardsContextType } from '@/contexts/rewards-context';
+import { RewardInfo } from "@/models/RewardInfo";
+import ChallengerWelcome from '@/pages/challenger-welcome';
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Builder } from 'builder-pattern';
+import mockRouter from 'next-router-mock';
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => require('next-router-mock'));
+
+describe('ChallengerWelcome', () => {
+    afterEach(cleanup);
+    it('opens the signup page when the first button is clicked', async () => {
+      mockRouter.push("/initial-path");
+      const user = userEvent.setup();
+
+      render (
+        <ChallengerWelcome />
+      );
+
+      const fgetStartedbtn = screen.getAllByRole('button')[0];
+      await user.click(fgetStartedbtn);
+      expect(mockRouter).toMatchObject({asPath: "/signup"});
+    });
+
+    it('opens the signup page when the second button is clicked', async () => {
+      mockRouter.push("/initial-path");
+      const user = userEvent.setup();
+
+      render (
+        <ChallengerWelcome />
+      );
+
+      const sgetStartedbtn = screen.getAllByRole('button')[1];
+      await user.click(sgetStartedbtn); 
+      expect(mockRouter).toMatchObject({asPath: "/signup"});
+    });
+
+    it("Displays different text for step four if there are rewards available", async () => {
+      const rewardsArray: Array<RewardInfo> = [{
+        businessDescription:"At Chefus, everything we do is to bring a chef-made meal with fresh ingredients to your table at an incredible price.",
+        businessLink:"https://www.chefus.com/",
+        businessType:"Online deliveries",
+        locationDescription:"Online",
+        locationType:"Online",
+        logo:"/assets/partner-logos/chefus.png",
+        name:"Chefus",
+        redemptionDescription:"Use code CHEFUS8BY8 at checkout.",
+        rewardAvailable:true,
+        rewardConditions:"CHEFUS8BY8",
+        rewardDescription:"Get $10 off on orders of $20+.",
+        rewardEndDate: new Date("2050-09-01"),
+        rewardLink:"https://www.chefus.com/",
+        rewardStartDate:new Date("2022-08-01"),
+        rewardType:"Online",
+      }];
+      const rewardsCtxValue = Builder<RewardsContextType>().rewards(rewardsArray).build();
+
+      render(
+        <RewardsContext.Provider value={rewardsCtxValue}>
+          <ChallengerWelcome />
+        </RewardsContext.Provider>
+      );
+
+      const stepFourInstruction = screen.queryByText("When all 8 of your friends took action in your challenge within 8 days, and you win! Then select and enjoy a reward from one of our amazing partners.");
+      expect(stepFourInstruction).toBeInTheDocument();
+    });
+
+  });

src/contexts/rewards-context.tsx

@@ -0,0 +1,14 @@
+import { RewardInfo } from "@/models/RewardInfo";
+import { createContext, PropsWithChildren, useState } from "react";
+
+export type RewardsContextType = {
+  rewards: Array<RewardInfo>;
+}
+
+export const RewardsContext = createContext<RewardsContextType>({rewards: []});
+
+export function RewardsContextProvider({children}:PropsWithChildren) {
+  const [rewardsArray,setRewardsArray] = useState<Array<RewardInfo>>([]);
+
+  return <RewardsContext.Provider value={{rewards: rewardsArray}}>{children}</RewardsContext.Provider>
+}

src/models/RewardInfo.ts

@@ -0,0 +1,17 @@
+export interface RewardInfo {
+    businessDescription:string;
+    businessLink:string;
+    businessType:string;
+    locationDescription:"Online" | "In Person";
+    locationType:"Online" | "In Person";
+    logo:string;
+    name:string;
+    redemptionDescription:string;
+    rewardAvailable:boolean;
+    rewardConditions:string;
+    rewardDescription:string;
+    rewardEndDate:Date | undefined;
+    rewardLink:string;
+    rewardStartDate:Date;
+    rewardType:"Online" | "In Person";
+  }