From 4a9d0d76acddae0e87b9e7ac6e71c0f1ff9883a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cerhaneth=E2=80=9D?=
 <98863443+erhaneth@users.noreply.github.com>
Date: Fri, 16 Jun 2023 18:07:24 -0700
Subject: [PATCH 1/6] add challenger welcome

---
 src/contexts/partner-context.tsx              |  19 +++
 .../ChallengerWelcome/challenger-welcome.tsx  | 121 ++++++++++++++++++
 2 files changed, 140 insertions(+)
 create mode 100644 src/contexts/partner-context.tsx
 create mode 100644 src/pages/ChallengerWelcome/challenger-welcome.tsx

diff --git a/src/contexts/partner-context.tsx b/src/contexts/partner-context.tsx
new file mode 100644
index 0000000..2e90aa3
--- /dev/null
+++ b/src/contexts/partner-context.tsx
@@ -0,0 +1,19 @@
+import { createContext, PropsWithChildren, useState } from "react";
+
+export type PartnerContextType = {
+  partnersExist: boolean;
+};
+
+//setting the default context to {partnersExist:false} allows for testing unwrapped components
+export const PartnerContext = createContext<PartnerContextType>({
+  partnersExist: false,
+});
+
+export function PartnerContextProvider({ children }: PropsWithChildren) {
+  const [partnersExist, setPartnersExist] = useState(false);
+  return (
+    <PartnerContext.Provider value={{ partnersExist }}>
+      {children}
+    </PartnerContext.Provider>
+  );
+}
diff --git a/src/pages/ChallengerWelcome/challenger-welcome.tsx b/src/pages/ChallengerWelcome/challenger-welcome.tsx
new file mode 100644
index 0000000..e0ea9a6
--- /dev/null
+++ b/src/pages/ChallengerWelcome/challenger-welcome.tsx
@@ -0,0 +1,121 @@
+import React, { use } from "react";
+import { useContext } from "react";
+import { useRouter } from "next/router";
+import { UserContext } from "@/contexts/user-context";
+import { PartnerContext } from "@/contexts/partner-context";
+import Image from "next/image";
+import "./ChallengerWelcome.scss";
+import Top from "../../../assets/images/ChallengerWelcome/Top.png";
+import Logo from "../../../assets/logos/white-logo.svg";
+import StepOne from "../../../assets/images/ChallengerWelcome/StepOne.png";
+import StepTwo from "../../../assets/images/ChallengerWelcome/StepTwo.png";
+import StepThree from "../../../assets/images/ChallengerWelcome/StepThree.png";
+import StepFour from "../../../assets/images/ChallengerWelcome/StepFour.png";
+
+function ChallengerWelcome() {
+  const router = useRouter();
+  sessionStorage.setItem("UserType", "Challenger");
+
+  const { activeUser } = useContext(UserContext);
+  const { partnersExist } = useContext(PartnerContext);
+
+  return (
+    <div className="challenger-welcome">
+      <div className="content-1">
+        <Image className="background" src={Top} alt="background" />
+        <div className="container">
+          <Image className="logo" src={Logo} alt="8by8 Logo" />
+        </div>
+      </div>
+
+      <div className="content-2">
+        <div className="normal-title">Welcome!</div>
+        <p className="normal-text">
+          Closing the voter registration gap has to be a community effort, so
+          we&apos;re asking everyone to join us in taking the
+          #8by8Challenge—register 8 friends to register to vote in 8 days!
+        </p>
+        <button
+          onClick={() => {
+            console.log("This is firing.");
+            router.push("/signup");
+          }}
+          className="gradient-button"
+        >
+          Get Started
+        </button>
+        {!activeUser && (
+          <p className="small-text">
+            Already have an account?{" "}
+            <span className="link" onClick={() => router.push("/signin")}>
+              Sign in
+            </span>
+          </p>
+        )}
+        <p className="link link-2" onClick={() => router.push("/why8by8")}>
+          See why others are doing it
+        </p>
+      </div>
+
+      <div className="content-3">
+        <div className="small-title">Here&apos;s How it Works</div>
+
+        <div className="normal-heading">1. Sign Up</div>
+        <p className="normal-text">
+          Sign up with your name and email address to get started.
+        </p>
+        <Image src={StepOne} alt="sign up" className="center-img" />
+
+        <div className="normal-heading">2. Invite your friends</div>
+        <p className="normal-text">
+          Get 8 friends via social media or messaging apps to join your
+          challenge.
+        </p>
+        <Image src={StepTwo} alt="invite your friends" className="center-img" />
+
+        <div className="normal-heading">3. Friends take action</div>
+        <p className="normal-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&apos;ll earn 1 badge per friend who takes action!
+        </p>
+        <Image
+          src={StepThree}
+          alt="friends take action"
+          className="center-img"
+        />
+
+        <div className="normal-heading">
+          4. Win the challenge, get a reward!
+        </div>
+        <p className="normal-text">
+          {partnersExist
+            ? "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."
+            : "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>
+        <Image
+          src={StepFour}
+          alt="earn 8 badges in 8 days"
+          className="center-img"
+        />
+
+        <button
+          onClick={() => router.push("/signup")}
+          className="gradient-button"
+        >
+          Get Started
+        </button>
+        {!activeUser && (
+          <p className="small-text">
+            Already have an account?{" "}
+            <span className="link" onClick={() => router.push("/signin")}>
+              Sign in
+            </span>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ChallengerWelcome;

From e46cd83ce647f6d2a0acd9971a3ab283f931c5db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cerhaneth=E2=80=9D?=
 <98863443+erhaneth@users.noreply.github.com>
Date: Sat, 24 Jun 2023 09:55:18 -0700
Subject: [PATCH 2/6] challenger welcome test

---
 package-lock.json                             | 336 +++++++++---------
 .../challenger-welcome.spec.tsx.snap          | 190 ++++++++++
 .../challenger-welcome.spec.tsx               |  14 +
 3 files changed, 372 insertions(+), 168 deletions(-)
 create mode 100644 src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
 create mode 100644 src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx

diff --git a/package-lock.json b/package-lock.json
index ba3e73b..c30971d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1242,6 +1242,126 @@
         "glob": "7.1.7"
       }
     },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.1.tgz",
+      "integrity": "sha512-UXPtriEc/pBP8luSLSCZBcbzPeVv+SSjs9cH/KygTbhmACye8/OOXRZO13Z2Wq1G0gLmEAIHQAOuF+vafPd2lw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.1.tgz",
+      "integrity": "sha512-lT36yYxosCfLtplFzJWgo0hrPu6/do8+msgM7oQkPeohDNdhjtjFUgOOwdSnPublLR6Mo2Ym4P/wl5OANuD2bw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.1.tgz",
+      "integrity": "sha512-wRb76nLWJhonH8s3kxC/1tFguEkeOPayIwe9mkaz1G/yeS3OrjeyKMJsb4+Kdg0zbTo53bNCOl59NNtDM7yyyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.1.tgz",
+      "integrity": "sha512-qz3BzjJRZ16Iq/jrp+pjiYOc0jTjHlfmxQmZk9x/+5uhRP6/eWQSTAPVJ33BMo6oK5O5N4644OgTAbzXzorecg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.1.tgz",
+      "integrity": "sha512-6mgkLmwlyWlomQmpl21I3hxgqE5INoW4owTlcLpNsd1V4wP+J46BlI/5zV5KWWbzjfncIqzXoeGs5Eg+1GHODA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.1.tgz",
+      "integrity": "sha512-uqm5sielhQmKJM+qayIhgZv1KlS5pqTdQ99b+Z7hMWryXS96qE0DftTmMZowBcUL6x7s2vSXyH5wPtO1ON7LBg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.1.tgz",
+      "integrity": "sha512-WomIiTj/v3LevltlibNQKmvrOymNRYL+a0dp5R73IwPWN5FvXWwSELN/kiNALig/+T3luc4qHNTyvMCp9L6U5Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.1.tgz",
+      "integrity": "sha512-M+PoH+0+q658wRUbs285RIaSTYnGBSTdweH/0CdzDgA6Q4rBM0sQs4DHmO3BPP0ltCO/vViIoyG7ks66XmCA5g==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-win32-x64-msvc": {
       "version": "13.3.1",
       "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.3.1.tgz",
@@ -7378,126 +7498,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.1.tgz",
-      "integrity": "sha512-UXPtriEc/pBP8luSLSCZBcbzPeVv+SSjs9cH/KygTbhmACye8/OOXRZO13Z2Wq1G0gLmEAIHQAOuF+vafPd2lw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.1.tgz",
-      "integrity": "sha512-lT36yYxosCfLtplFzJWgo0hrPu6/do8+msgM7oQkPeohDNdhjtjFUgOOwdSnPublLR6Mo2Ym4P/wl5OANuD2bw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.1.tgz",
-      "integrity": "sha512-wRb76nLWJhonH8s3kxC/1tFguEkeOPayIwe9mkaz1G/yeS3OrjeyKMJsb4+Kdg0zbTo53bNCOl59NNtDM7yyyw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.1.tgz",
-      "integrity": "sha512-qz3BzjJRZ16Iq/jrp+pjiYOc0jTjHlfmxQmZk9x/+5uhRP6/eWQSTAPVJ33BMo6oK5O5N4644OgTAbzXzorecg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.1.tgz",
-      "integrity": "sha512-6mgkLmwlyWlomQmpl21I3hxgqE5INoW4owTlcLpNsd1V4wP+J46BlI/5zV5KWWbzjfncIqzXoeGs5Eg+1GHODA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.1.tgz",
-      "integrity": "sha512-uqm5sielhQmKJM+qayIhgZv1KlS5pqTdQ99b+Z7hMWryXS96qE0DftTmMZowBcUL6x7s2vSXyH5wPtO1ON7LBg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.1.tgz",
-      "integrity": "sha512-WomIiTj/v3LevltlibNQKmvrOymNRYL+a0dp5R73IwPWN5FvXWwSELN/kiNALig/+T3luc4qHNTyvMCp9L6U5Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.1.tgz",
-      "integrity": "sha512-M+PoH+0+q658wRUbs285RIaSTYnGBSTdweH/0CdzDgA6Q4rBM0sQs4DHmO3BPP0ltCO/vViIoyG7ks66XmCA5g==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   },
   "dependencies": {
@@ -8431,6 +8431,54 @@
         "glob": "7.1.7"
       }
     },
+    "@next/swc-darwin-arm64": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.1.tgz",
+      "integrity": "sha512-UXPtriEc/pBP8luSLSCZBcbzPeVv+SSjs9cH/KygTbhmACye8/OOXRZO13Z2Wq1G0gLmEAIHQAOuF+vafPd2lw==",
+      "optional": true
+    },
+    "@next/swc-darwin-x64": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.1.tgz",
+      "integrity": "sha512-lT36yYxosCfLtplFzJWgo0hrPu6/do8+msgM7oQkPeohDNdhjtjFUgOOwdSnPublLR6Mo2Ym4P/wl5OANuD2bw==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.1.tgz",
+      "integrity": "sha512-wRb76nLWJhonH8s3kxC/1tFguEkeOPayIwe9mkaz1G/yeS3OrjeyKMJsb4+Kdg0zbTo53bNCOl59NNtDM7yyyw==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.1.tgz",
+      "integrity": "sha512-qz3BzjJRZ16Iq/jrp+pjiYOc0jTjHlfmxQmZk9x/+5uhRP6/eWQSTAPVJ33BMo6oK5O5N4644OgTAbzXzorecg==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.1.tgz",
+      "integrity": "sha512-6mgkLmwlyWlomQmpl21I3hxgqE5INoW4owTlcLpNsd1V4wP+J46BlI/5zV5KWWbzjfncIqzXoeGs5Eg+1GHODA==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.1.tgz",
+      "integrity": "sha512-uqm5sielhQmKJM+qayIhgZv1KlS5pqTdQ99b+Z7hMWryXS96qE0DftTmMZowBcUL6x7s2vSXyH5wPtO1ON7LBg==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.1.tgz",
+      "integrity": "sha512-WomIiTj/v3LevltlibNQKmvrOymNRYL+a0dp5R73IwPWN5FvXWwSELN/kiNALig/+T3luc4qHNTyvMCp9L6U5Q==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.1.tgz",
+      "integrity": "sha512-M+PoH+0+q658wRUbs285RIaSTYnGBSTdweH/0CdzDgA6Q4rBM0sQs4DHmO3BPP0ltCO/vViIoyG7ks66XmCA5g==",
+      "optional": true
+    },
     "@next/swc-win32-x64-msvc": {
       "version": "13.3.1",
       "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.3.1.tgz",
@@ -12905,54 +12953,6 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
-    },
-    "@next/swc-darwin-arm64": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.1.tgz",
-      "integrity": "sha512-UXPtriEc/pBP8luSLSCZBcbzPeVv+SSjs9cH/KygTbhmACye8/OOXRZO13Z2Wq1G0gLmEAIHQAOuF+vafPd2lw==",
-      "optional": true
-    },
-    "@next/swc-darwin-x64": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.1.tgz",
-      "integrity": "sha512-lT36yYxosCfLtplFzJWgo0hrPu6/do8+msgM7oQkPeohDNdhjtjFUgOOwdSnPublLR6Mo2Ym4P/wl5OANuD2bw==",
-      "optional": true
-    },
-    "@next/swc-linux-arm64-gnu": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.1.tgz",
-      "integrity": "sha512-wRb76nLWJhonH8s3kxC/1tFguEkeOPayIwe9mkaz1G/yeS3OrjeyKMJsb4+Kdg0zbTo53bNCOl59NNtDM7yyyw==",
-      "optional": true
-    },
-    "@next/swc-linux-arm64-musl": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.1.tgz",
-      "integrity": "sha512-qz3BzjJRZ16Iq/jrp+pjiYOc0jTjHlfmxQmZk9x/+5uhRP6/eWQSTAPVJ33BMo6oK5O5N4644OgTAbzXzorecg==",
-      "optional": true
-    },
-    "@next/swc-linux-x64-gnu": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.1.tgz",
-      "integrity": "sha512-6mgkLmwlyWlomQmpl21I3hxgqE5INoW4owTlcLpNsd1V4wP+J46BlI/5zV5KWWbzjfncIqzXoeGs5Eg+1GHODA==",
-      "optional": true
-    },
-    "@next/swc-linux-x64-musl": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.1.tgz",
-      "integrity": "sha512-uqm5sielhQmKJM+qayIhgZv1KlS5pqTdQ99b+Z7hMWryXS96qE0DftTmMZowBcUL6x7s2vSXyH5wPtO1ON7LBg==",
-      "optional": true
-    },
-    "@next/swc-win32-arm64-msvc": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.1.tgz",
-      "integrity": "sha512-WomIiTj/v3LevltlibNQKmvrOymNRYL+a0dp5R73IwPWN5FvXWwSELN/kiNALig/+T3luc4qHNTyvMCp9L6U5Q==",
-      "optional": true
-    },
-    "@next/swc-win32-ia32-msvc": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.1.tgz",
-      "integrity": "sha512-M+PoH+0+q658wRUbs285RIaSTYnGBSTdweH/0CdzDgA6Q4rBM0sQs4DHmO3BPP0ltCO/vViIoyG7ks66XmCA5g==",
-      "optional": true
     }
   }
 }
diff --git a/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap b/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
new file mode 100644
index 0000000..e44c563
--- /dev/null
+++ b/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
@@ -0,0 +1,190 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChallengerWelcome Matches DOM Snapshot 1`] = `
+<div>
+  <div
+    class="challenger-welcome"
+  >
+    <div
+      class="content-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>
+    </div>
+    <div
+      class="content-2"
+    >
+      <div
+        class="normal-title"
+      >
+        Welcome!
+      </div>
+      <p
+        class="normal-text"
+      >
+        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="gradient-button"
+      >
+        Get Started
+      </button>
+      <p
+        class="small-text"
+      >
+        Already have an account?
+         
+        <span
+          class="link"
+        >
+          Sign in
+        </span>
+      </p>
+      <p
+        class="link link-2"
+      >
+        See why others are doing it
+      </p>
+    </div>
+    <div
+      class="content-3"
+    >
+      <div
+        class="small-title"
+      >
+        Here's How it Works
+      </div>
+      <div
+        class="normal-heading"
+      >
+        1. Sign Up
+      </div>
+      <p
+        class="normal-text"
+      >
+        Sign up with your name and email address to get started.
+      </p>
+      <img
+        alt="sign up"
+        class="center-img"
+        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="normal-heading"
+      >
+        2. Invite your friends
+      </div>
+      <p
+        class="normal-text"
+      >
+        Get 8 friends via social media or messaging apps to join your challenge.
+      </p>
+      <img
+        alt="invite your friends"
+        class="center-img"
+        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="normal-heading"
+      >
+        3. Friends take action
+      </div>
+      <p
+        class="normal-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="center-img"
+        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="normal-heading"
+      >
+        4. Win the challenge, get a reward!
+      </div>
+      <p
+        class="normal-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="center-img"
+        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="gradient-button"
+      >
+        Get Started
+      </button>
+      <p
+        class="small-text"
+      >
+        Already have an account?
+         
+        <span
+          class="link"
+        >
+          Sign in
+        </span>
+      </p>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx b/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx
new file mode 100644
index 0000000..1043239
--- /dev/null
+++ b/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx
@@ -0,0 +1,14 @@
+import { render, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ChallengerWelcome from "@/pages/ChallengerWelcome/challenger-welcome";
+
+describe("ChallengerWelcome", () => {
+  afterEach(cleanup);
+  it("Matches DOM Snapshot", () => {
+    const { container } = render(<ChallengerWelcome />);
+    expect(container).toMatchSnapshot();
+  });
+});
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));

From ed32a87457f957eaa2d5fbc1fd652ad926c00187 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cerhaneth=E2=80=9D?=
 <98863443+erhaneth@users.noreply.github.com>
Date: Mon, 10 Jul 2023 19:15:42 -0700
Subject: [PATCH 3/6] finished testing

---
 .../challenger-welcome.spec.tsx.snap          |  1 +
 .../challenger-welcome.spec.tsx               | 60 +++++++++++++++++--
 .../ChallengerWelcome/challenger-welcome.tsx  |  3 +-
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap b/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
index e44c563..6d2ea35 100644
--- a/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
+++ b/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
@@ -170,6 +170,7 @@ exports[`ChallengerWelcome Matches DOM Snapshot 1`] = `
       />
       <button
         class="gradient-button"
+        id="get-started"
       >
         Get Started
       </button>
diff --git a/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx b/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx
index 1043239..33dd25b 100644
--- a/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx
+++ b/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx
@@ -1,14 +1,66 @@
-import { render, cleanup } from "@testing-library/react";
+import { render, cleanup, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import ChallengerWelcome from "@/pages/ChallengerWelcome/challenger-welcome";
+import { useRouter } from "next/router";
+import { UserContext, UserContextProvider } from "@/contexts/user-context";
 
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));
 describe("ChallengerWelcome", () => {
   afterEach(cleanup);
+
   it("Matches DOM Snapshot", () => {
     const { container } = render(<ChallengerWelcome />);
     expect(container).toMatchSnapshot();
   });
+  it("Goes to the sign up page when the buttons are clicked", () => {
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockImplementation(() => ({
+      push,
+    }));
+    const { container } = render(<ChallengerWelcome />);
+    const buttons = container.querySelectorAll("button");
+    if (buttons[0]) {
+      fireEvent.click(buttons[0]);
+    }
+    if (buttons[1]) {
+      fireEvent.click(buttons[1]);
+    }
+    expect(push).toHaveBeenNthCalledWith(1, "/signup");
+    expect(push).toHaveBeenNthCalledWith(2, "/signup");
+  });
+  it("Goes to the sign in page when the spans are clicked", () => {
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockImplementation(() => ({
+      push,
+    }));
+    const { container } = render(
+      <UserContextProvider>
+        <ChallengerWelcome />
+      </UserContextProvider>
+    );
+
+    const spans = container.querySelectorAll("span");
+    if (spans[0]) {
+      fireEvent.click(spans[0]);
+    }
+    if (spans[1]) {
+      fireEvent.click(spans[1]);
+    }
+    expect(push).toHaveBeenNthCalledWith(1, "/signin");
+    expect(push).toHaveBeenNthCalledWith(2, "/signin");
+  });
+  it("Goes to why8by8 page when the paragraph link is clicked", () => {
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockImplementation(() => ({
+      push,
+    }));
+    const { container } = render(<ChallengerWelcome />);
+    const pLink = container.querySelector(".link-2");
+    if (pLink) {
+      fireEvent.click(pLink);
+    }
+    expect(push).toHaveBeenCalledWith("/why8by8");
+  });
 });
-jest.mock("next/router", () => ({
-  useRouter: jest.fn(),
-}));
diff --git a/src/pages/ChallengerWelcome/challenger-welcome.tsx b/src/pages/ChallengerWelcome/challenger-welcome.tsx
index e0ea9a6..57af138 100644
--- a/src/pages/ChallengerWelcome/challenger-welcome.tsx
+++ b/src/pages/ChallengerWelcome/challenger-welcome.tsx
@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import { useContext } from "react";
 import { useRouter } from "next/router";
 import { UserContext } from "@/contexts/user-context";
@@ -102,6 +102,7 @@ function ChallengerWelcome() {
         <button
           onClick={() => router.push("/signup")}
           className="gradient-button"
+          id="get-started"
         >
           Get Started
         </button>

From 4392f1424d339905b18ada6b35cbb83321fdb3fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cerhaneth=E2=80=9D?=
 <98863443+erhaneth@users.noreply.github.com>
Date: Mon, 10 Jul 2023 19:26:03 -0700
Subject: [PATCH 4/6] finished partner context testing

---
 .../contexts/partner-context.spec.tsx         | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/__tests__/contexts/partner-context.spec.tsx

diff --git a/src/__tests__/contexts/partner-context.spec.tsx b/src/__tests__/contexts/partner-context.spec.tsx
new file mode 100644
index 0000000..555b535
--- /dev/null
+++ b/src/__tests__/contexts/partner-context.spec.tsx
@@ -0,0 +1,27 @@
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { useContext } from "react";
+import {
+  PartnerContext,
+  PartnerContextProvider,
+} from "@/contexts/partner-context";
+
+function MockChildComponent() {
+  const { partnersExist } = useContext(PartnerContext);
+  return (
+    <div data-testid="test">{partnersExist ? "partners" : "no partners"}</div>
+  );
+}
+
+describe("PartnerContextProvider", () => {
+  afterEach(cleanup);
+  it("defaults to an partnersExist value of null.", () => {
+    render(
+      <PartnerContextProvider>
+        <MockChildComponent />
+      </PartnerContextProvider>
+    );
+    const signedOut = screen.queryByTestId("test");
+    expect(signedOut).toHaveTextContent("no partners");
+  });
+});

From a49c7f5b656822c6f2a40fd37b587bec06364610 Mon Sep 17 00:00:00 2001
From: Naim <islamm7541@gmail.com>
Date: Tue, 12 Mar 2024 20:27:08 -0400
Subject: [PATCH 5/6] Ported over challengerwelcome. Missing Rewards context.

---
 .../contexts/partner-context.spec.tsx         |  27 ---
 .../challenger-welcome.snapshot.tsx.snap      | 198 ++++++++++++++++++
 .../challenger-welcome.snapshot.tsx           |  17 ++
 .../challenger-welcome.spec.tsx               |  67 ++++++
 .../challenger-welcome.spec.tsx.snap          | 191 -----------------
 .../challenger-welcome.spec.tsx               |  66 ------
 src/contexts/partner-context.tsx              |  19 --
 .../ChallengerWelcome/challenger-welcome.tsx  | 122 -----------
 src/pages/challenger-welcome.tsx              | 129 ++++++++++++
 .../pages/challengerwelcome.module.scss       |  94 +++++++++
 10 files changed, 505 insertions(+), 425 deletions(-)
 delete mode 100644 src/__tests__/contexts/partner-context.spec.tsx
 create mode 100644 src/__tests__/pages/challenger-welcome/__snapshots__/challenger-welcome.snapshot.tsx.snap
 create mode 100644 src/__tests__/pages/challenger-welcome/challenger-welcome.snapshot.tsx
 create mode 100644 src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx
 delete mode 100644 src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
 delete mode 100644 src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx
 delete mode 100644 src/contexts/partner-context.tsx
 delete mode 100644 src/pages/ChallengerWelcome/challenger-welcome.tsx
 create mode 100644 src/pages/challenger-welcome.tsx
 create mode 100644 src/styles/modules/pages/challengerwelcome.module.scss

diff --git a/src/__tests__/contexts/partner-context.spec.tsx b/src/__tests__/contexts/partner-context.spec.tsx
deleted file mode 100644
index 555b535..0000000
--- a/src/__tests__/contexts/partner-context.spec.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { render, screen, cleanup } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import { useContext } from "react";
-import {
-  PartnerContext,
-  PartnerContextProvider,
-} from "@/contexts/partner-context";
-
-function MockChildComponent() {
-  const { partnersExist } = useContext(PartnerContext);
-  return (
-    <div data-testid="test">{partnersExist ? "partners" : "no partners"}</div>
-  );
-}
-
-describe("PartnerContextProvider", () => {
-  afterEach(cleanup);
-  it("defaults to an partnersExist value of null.", () => {
-    render(
-      <PartnerContextProvider>
-        <MockChildComponent />
-      </PartnerContextProvider>
-    );
-    const signedOut = screen.queryByTestId("test");
-    expect(signedOut).toHaveTextContent("no partners");
-  });
-});
diff --git a/src/__tests__/pages/challenger-welcome/__snapshots__/challenger-welcome.snapshot.tsx.snap b/src/__tests__/pages/challenger-welcome/__snapshots__/challenger-welcome.snapshot.tsx.snap
new file mode 100644
index 0000000..6c39f06
--- /dev/null
+++ b/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 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.
+        </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>
+`;
diff --git a/src/__tests__/pages/challenger-welcome/challenger-welcome.snapshot.tsx b/src/__tests__/pages/challenger-welcome/challenger-welcome.snapshot.tsx
new file mode 100644
index 0000000..197099e
--- /dev/null
+++ b/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();
+  });
+});
\ No newline at end of file
diff --git a/src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx b/src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx
new file mode 100644
index 0000000..5fa2578
--- /dev/null
+++ b/src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx
@@ -0,0 +1,67 @@
+import { RewardsContext, RewardsContextType } from '@/contexts/rewards-context';
+import { Rewards } from '@/models/Rewards';
+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 rewards = Builder<Rewards>([{
+        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",
+      }]).build();
+      const rewardsCtxValue = Builder<RewardsContextType>().rewardsInfo(rewards).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();
+    });
+
+  });
\ No newline at end of file
diff --git a/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap b/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
deleted file mode 100644
index 6d2ea35..0000000
--- a/src/__tests__/pages/challengerwelcome/__snapshots__/challenger-welcome.spec.tsx.snap
+++ /dev/null
@@ -1,191 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ChallengerWelcome Matches DOM Snapshot 1`] = `
-<div>
-  <div
-    class="challenger-welcome"
-  >
-    <div
-      class="content-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>
-    </div>
-    <div
-      class="content-2"
-    >
-      <div
-        class="normal-title"
-      >
-        Welcome!
-      </div>
-      <p
-        class="normal-text"
-      >
-        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="gradient-button"
-      >
-        Get Started
-      </button>
-      <p
-        class="small-text"
-      >
-        Already have an account?
-         
-        <span
-          class="link"
-        >
-          Sign in
-        </span>
-      </p>
-      <p
-        class="link link-2"
-      >
-        See why others are doing it
-      </p>
-    </div>
-    <div
-      class="content-3"
-    >
-      <div
-        class="small-title"
-      >
-        Here's How it Works
-      </div>
-      <div
-        class="normal-heading"
-      >
-        1. Sign Up
-      </div>
-      <p
-        class="normal-text"
-      >
-        Sign up with your name and email address to get started.
-      </p>
-      <img
-        alt="sign up"
-        class="center-img"
-        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="normal-heading"
-      >
-        2. Invite your friends
-      </div>
-      <p
-        class="normal-text"
-      >
-        Get 8 friends via social media or messaging apps to join your challenge.
-      </p>
-      <img
-        alt="invite your friends"
-        class="center-img"
-        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="normal-heading"
-      >
-        3. Friends take action
-      </div>
-      <p
-        class="normal-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="center-img"
-        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="normal-heading"
-      >
-        4. Win the challenge, get a reward!
-      </div>
-      <p
-        class="normal-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="center-img"
-        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="gradient-button"
-        id="get-started"
-      >
-        Get Started
-      </button>
-      <p
-        class="small-text"
-      >
-        Already have an account?
-         
-        <span
-          class="link"
-        >
-          Sign in
-        </span>
-      </p>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx b/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx
deleted file mode 100644
index 33dd25b..0000000
--- a/src/__tests__/pages/challengerwelcome/challenger-welcome.spec.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { render, cleanup, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import ChallengerWelcome from "@/pages/ChallengerWelcome/challenger-welcome";
-import { useRouter } from "next/router";
-import { UserContext, UserContextProvider } from "@/contexts/user-context";
-
-jest.mock("next/router", () => ({
-  useRouter: jest.fn(),
-}));
-describe("ChallengerWelcome", () => {
-  afterEach(cleanup);
-
-  it("Matches DOM Snapshot", () => {
-    const { container } = render(<ChallengerWelcome />);
-    expect(container).toMatchSnapshot();
-  });
-  it("Goes to the sign up page when the buttons are clicked", () => {
-    const push = jest.fn();
-    (useRouter as jest.Mock).mockImplementation(() => ({
-      push,
-    }));
-    const { container } = render(<ChallengerWelcome />);
-    const buttons = container.querySelectorAll("button");
-    if (buttons[0]) {
-      fireEvent.click(buttons[0]);
-    }
-    if (buttons[1]) {
-      fireEvent.click(buttons[1]);
-    }
-    expect(push).toHaveBeenNthCalledWith(1, "/signup");
-    expect(push).toHaveBeenNthCalledWith(2, "/signup");
-  });
-  it("Goes to the sign in page when the spans are clicked", () => {
-    const push = jest.fn();
-    (useRouter as jest.Mock).mockImplementation(() => ({
-      push,
-    }));
-    const { container } = render(
-      <UserContextProvider>
-        <ChallengerWelcome />
-      </UserContextProvider>
-    );
-
-    const spans = container.querySelectorAll("span");
-    if (spans[0]) {
-      fireEvent.click(spans[0]);
-    }
-    if (spans[1]) {
-      fireEvent.click(spans[1]);
-    }
-    expect(push).toHaveBeenNthCalledWith(1, "/signin");
-    expect(push).toHaveBeenNthCalledWith(2, "/signin");
-  });
-  it("Goes to why8by8 page when the paragraph link is clicked", () => {
-    const push = jest.fn();
-    (useRouter as jest.Mock).mockImplementation(() => ({
-      push,
-    }));
-    const { container } = render(<ChallengerWelcome />);
-    const pLink = container.querySelector(".link-2");
-    if (pLink) {
-      fireEvent.click(pLink);
-    }
-    expect(push).toHaveBeenCalledWith("/why8by8");
-  });
-});
diff --git a/src/contexts/partner-context.tsx b/src/contexts/partner-context.tsx
deleted file mode 100644
index 2e90aa3..0000000
--- a/src/contexts/partner-context.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createContext, PropsWithChildren, useState } from "react";
-
-export type PartnerContextType = {
-  partnersExist: boolean;
-};
-
-//setting the default context to {partnersExist:false} allows for testing unwrapped components
-export const PartnerContext = createContext<PartnerContextType>({
-  partnersExist: false,
-});
-
-export function PartnerContextProvider({ children }: PropsWithChildren) {
-  const [partnersExist, setPartnersExist] = useState(false);
-  return (
-    <PartnerContext.Provider value={{ partnersExist }}>
-      {children}
-    </PartnerContext.Provider>
-  );
-}
diff --git a/src/pages/ChallengerWelcome/challenger-welcome.tsx b/src/pages/ChallengerWelcome/challenger-welcome.tsx
deleted file mode 100644
index 57af138..0000000
--- a/src/pages/ChallengerWelcome/challenger-welcome.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from "react";
-import { useContext } from "react";
-import { useRouter } from "next/router";
-import { UserContext } from "@/contexts/user-context";
-import { PartnerContext } from "@/contexts/partner-context";
-import Image from "next/image";
-import "./ChallengerWelcome.scss";
-import Top from "../../../assets/images/ChallengerWelcome/Top.png";
-import Logo from "../../../assets/logos/white-logo.svg";
-import StepOne from "../../../assets/images/ChallengerWelcome/StepOne.png";
-import StepTwo from "../../../assets/images/ChallengerWelcome/StepTwo.png";
-import StepThree from "../../../assets/images/ChallengerWelcome/StepThree.png";
-import StepFour from "../../../assets/images/ChallengerWelcome/StepFour.png";
-
-function ChallengerWelcome() {
-  const router = useRouter();
-  sessionStorage.setItem("UserType", "Challenger");
-
-  const { activeUser } = useContext(UserContext);
-  const { partnersExist } = useContext(PartnerContext);
-
-  return (
-    <div className="challenger-welcome">
-      <div className="content-1">
-        <Image className="background" src={Top} alt="background" />
-        <div className="container">
-          <Image className="logo" src={Logo} alt="8by8 Logo" />
-        </div>
-      </div>
-
-      <div className="content-2">
-        <div className="normal-title">Welcome!</div>
-        <p className="normal-text">
-          Closing the voter registration gap has to be a community effort, so
-          we&apos;re asking everyone to join us in taking the
-          #8by8Challenge—register 8 friends to register to vote in 8 days!
-        </p>
-        <button
-          onClick={() => {
-            console.log("This is firing.");
-            router.push("/signup");
-          }}
-          className="gradient-button"
-        >
-          Get Started
-        </button>
-        {!activeUser && (
-          <p className="small-text">
-            Already have an account?{" "}
-            <span className="link" onClick={() => router.push("/signin")}>
-              Sign in
-            </span>
-          </p>
-        )}
-        <p className="link link-2" onClick={() => router.push("/why8by8")}>
-          See why others are doing it
-        </p>
-      </div>
-
-      <div className="content-3">
-        <div className="small-title">Here&apos;s How it Works</div>
-
-        <div className="normal-heading">1. Sign Up</div>
-        <p className="normal-text">
-          Sign up with your name and email address to get started.
-        </p>
-        <Image src={StepOne} alt="sign up" className="center-img" />
-
-        <div className="normal-heading">2. Invite your friends</div>
-        <p className="normal-text">
-          Get 8 friends via social media or messaging apps to join your
-          challenge.
-        </p>
-        <Image src={StepTwo} alt="invite your friends" className="center-img" />
-
-        <div className="normal-heading">3. Friends take action</div>
-        <p className="normal-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&apos;ll earn 1 badge per friend who takes action!
-        </p>
-        <Image
-          src={StepThree}
-          alt="friends take action"
-          className="center-img"
-        />
-
-        <div className="normal-heading">
-          4. Win the challenge, get a reward!
-        </div>
-        <p className="normal-text">
-          {partnersExist
-            ? "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."
-            : "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>
-        <Image
-          src={StepFour}
-          alt="earn 8 badges in 8 days"
-          className="center-img"
-        />
-
-        <button
-          onClick={() => router.push("/signup")}
-          className="gradient-button"
-          id="get-started"
-        >
-          Get Started
-        </button>
-        {!activeUser && (
-          <p className="small-text">
-            Already have an account?{" "}
-            <span className="link" onClick={() => router.push("/signin")}>
-              Sign in
-            </span>
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default ChallengerWelcome;
diff --git a/src/pages/challenger-welcome.tsx b/src/pages/challenger-welcome.tsx
new file mode 100644
index 0000000..969f778
--- /dev/null
+++ b/src/pages/challenger-welcome.tsx
@@ -0,0 +1,129 @@
+import PageContainer from "@/components/utils/page-container";
+import { RewardsContext } from "@/contexts/rewards-context";
+import { UserContext } from "@/contexts/user-context";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from 'next/router';
+import { useContext, useEffect, useState } from "react";
+import StepFour from "../../public/assets/images/ChallengerWelcome/StepFour.png";
+import StepOne from "../../public/assets/images/ChallengerWelcome/StepOne.png";
+import StepThree from "../../public/assets/images/ChallengerWelcome/StepThree.png";
+import StepTwo from "../../public/assets/images/ChallengerWelcome/StepTwo.png";
+import Top from "../../public/assets/images/ChallengerWelcome/Top.png";
+import Logo from "../../public/assets/logos/white-logo.svg";
+import styles from "../styles/modules/pages/challengerwelcome.module.scss";
+
+function ChallengerWelcome() {
+  const router = useRouter();
+  sessionStorage.setItem("UserType", "Challenger");
+
+  const [rewardsAvailable, setRewardsAvailable] = useState<boolean>(false);
+  const { activeUser } = useContext(UserContext);
+  const { rewardsInfo } = useContext(RewardsContext);
+
+  useEffect(() => {
+    if (rewardsInfo) {
+      for (let i in rewardsInfo) {
+        if (rewardsInfo[i].rewardAvailable) {
+          setRewardsAvailable(true);
+          break;
+        }
+      }
+    }
+  },[rewardsInfo]);
+
+  return (
+    <PageContainer>
+      <section className={styles.section_1}>
+        <Image className={styles.background} src={Top} alt="background" />
+
+        <div className={styles.container}>
+          <Image className={styles.logo} src={Logo} alt="8by8 Logo" />
+        </div>
+      </section>
+
+      <section className={styles.section_2}>
+        <h1 className={styles.underline}>Welcome!</h1>
+
+        <p className={styles.content}>
+          Closing the voter registration gap has to be a community effort, so
+          we&apos;re asking everyone to join us in taking the
+          #8by8Challenge—register 8 friends to register to vote in 8 days!
+        </p>
+
+        <button
+          type="button"
+          className={styles.get_started_btn}
+          onClick={() => router.push("/signup")}
+        >
+          Get Started
+        </button>
+
+        {!activeUser && (
+          <p className={styles.signin_line}>
+            Already have an account?{" "}
+            <Link href="/signin">
+              Sign in
+            </Link>
+          </p>
+        )}
+
+        <Link className={styles.teal_link} href="/why8by8">
+          See why others are doing it
+        </Link>
+      </section>
+
+      <section className={styles.content_3}>
+        <h2 className={styles.underline}>Here&apos;s How it Works</h2>
+
+        <h3 className={styles.step_header}>1. Sign Up</h3>
+        <p className={styles.step_text}>
+          Sign up with your name and email address to get started.
+        </p>
+        <Image src={StepOne} alt="sign up" className={styles.image} />
+
+        <h3 className={styles.step_header}>2. Invite your friends</h3>
+        <p className={styles.step_text}>
+          Get 8 friends via social media or messaging apps to join your
+          challenge.
+        </p>
+        <Image src={StepTwo} alt="invite your friends" className={styles.image} />
+
+        <h3 className={styles.step_header}>3. Friends take action</h3>
+        <p className={styles.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&apos;ll earn 1 badge per friend who takes action!
+        </p>
+        <Image src={StepThree} alt="friends take action" className={styles.image} />
+
+        <h3 className={styles.step_header}>4. Win the challenge, get a reward!</h3>
+        <p className={styles.step_text}>
+          {rewardsAvailable ?
+          "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." :
+          "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>
+        <Image src={StepFour} alt="earn 8 badges in 8 days" className={styles.image} />
+
+        <button
+          type="button"
+          className={styles.get_started_btn}
+          onClick={() => router.push("/signup")}
+        >
+          Get Started
+        </button>
+
+        {!activeUser && (
+          <p className={styles.signin_line}>
+            Already have an account?{" "}
+            <Link className={styles.signin_link_black} href="/signin">
+              Sign in
+            </Link>
+          </p>
+        )}
+      </section>
+    </PageContainer>
+  );
+}
+
+export default ChallengerWelcome;
diff --git a/src/styles/modules/pages/challengerwelcome.module.scss b/src/styles/modules/pages/challengerwelcome.module.scss
new file mode 100644
index 0000000..021639b
--- /dev/null
+++ b/src/styles/modules/pages/challengerwelcome.module.scss
@@ -0,0 +1,94 @@
+@use "../../partials";
+
+.get_started_btn {
+  @extend .btn_gradient;
+  @extend .btn_lg;
+  width: 70%;
+  margin: 30px 0px;
+}
+
+.signin_line {
+  @extend .b6;
+  letter-spacing: 0.28px;
+  margin-bottom: 24px;
+  a {
+    padding-left: 2px;
+    @extend .link;
+  }
+}
+
+.section_1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  .background {
+    width: 100%;
+    height: 300px;
+  }
+
+  .container {
+    height: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .logo {
+      position: relative;
+      bottom: 170px;
+    }
+  }
+}
+
+.section_2 {
+  padding: 35px 30px 0px;
+  text-align: center;
+
+  .content {
+    margin-top: 20px;
+    text-align: left;
+    @extend .b2;
+  }
+
+  .teal_link {
+    @extend .link;
+    @extend .b5;
+    width: -moz-fit-content;
+    width: fit-content;
+    letter-spacing: 0.28px;
+  }
+}
+
+.content_3 {
+  background-color: partials.$color-white;
+  color: partials.$color-black-text;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: left;
+  padding: 50px 30px;
+
+
+  h2 {
+    margin-bottom: 24px;
+    line-height: normal;
+    letter-spacing: 1.08px;
+  }
+
+  .step_header {
+    align-self: flex-start;
+    line-height: normal;
+    letter-spacing: 0.72px;
+  }
+
+  .step_text {
+    @extend .b2;
+    letter-spacing: 0.36px;
+  }
+
+  .image {
+    margin: 20px 0px;
+  }
+}

From a35058fa068da19c6a4670b498a3af33e3df45b8 Mon Sep 17 00:00:00 2001
From: Naim <islamm7541@gmail.com>
Date: Thu, 28 Mar 2024 04:55:35 -0400
Subject: [PATCH 6/6] Added rewards context and tests for it.

---
 .../contexts/rewards-context.spec.tsx         | 25 +++++++++++++++++++
 .../challenger-welcome.snapshot.tsx.snap      |  2 +-
 .../challenger-welcome.spec.tsx               | 12 ++++++---
 src/contexts/rewards-context.tsx              | 14 +++++++++++
 src/models/RewardInfo.ts                      | 17 +++++++++++++
 src/pages/challenger-welcome.tsx              | 17 +++----------
 6 files changed, 68 insertions(+), 19 deletions(-)
 create mode 100644 src/__tests__/contexts/rewards-context.spec.tsx
 create mode 100644 src/contexts/rewards-context.tsx
 create mode 100644 src/models/RewardInfo.ts

diff --git a/src/__tests__/contexts/rewards-context.spec.tsx b/src/__tests__/contexts/rewards-context.spec.tsx
new file mode 100644
index 0000000..1add78e
--- /dev/null
+++ b/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');
+  });
+});
\ No newline at end of file
diff --git a/src/__tests__/pages/challenger-welcome/__snapshots__/challenger-welcome.snapshot.tsx.snap b/src/__tests__/pages/challenger-welcome/__snapshots__/challenger-welcome.snapshot.tsx.snap
index 6c39f06..0896d3f 100644
--- a/src/__tests__/pages/challenger-welcome/__snapshots__/challenger-welcome.snapshot.tsx.snap
+++ b/src/__tests__/pages/challenger-welcome/__snapshots__/challenger-welcome.snapshot.tsx.snap
@@ -159,7 +159,7 @@ exports[`ChallengerWelcome renders challenger-welcome page unchanged 1`] = `
         <p
           class="step_text"
         >
-          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.
+          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"
diff --git a/src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx b/src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx
index 5fa2578..4f6cb0f 100644
--- a/src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx
+++ b/src/__tests__/pages/challenger-welcome/challenger-welcome.spec.tsx
@@ -1,5 +1,5 @@
 import { RewardsContext, RewardsContextType } from '@/contexts/rewards-context';
-import { Rewards } from '@/models/Rewards';
+import { RewardInfo } from "@/models/RewardInfo";
 import ChallengerWelcome from '@/pages/challenger-welcome';
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
@@ -15,9 +15,11 @@ describe('ChallengerWelcome', () => {
     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"});
@@ -26,16 +28,18 @@ describe('ChallengerWelcome', () => {
     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 rewards = Builder<Rewards>([{
+      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",
@@ -51,8 +55,8 @@ describe('ChallengerWelcome', () => {
         rewardLink:"https://www.chefus.com/",
         rewardStartDate:new Date("2022-08-01"),
         rewardType:"Online",
-      }]).build();
-      const rewardsCtxValue = Builder<RewardsContextType>().rewardsInfo(rewards).build();
+      }];
+      const rewardsCtxValue = Builder<RewardsContextType>().rewards(rewardsArray).build();
   
       render(
         <RewardsContext.Provider value={rewardsCtxValue}>
diff --git a/src/contexts/rewards-context.tsx b/src/contexts/rewards-context.tsx
new file mode 100644
index 0000000..1c59905
--- /dev/null
+++ b/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>
+}
\ No newline at end of file
diff --git a/src/models/RewardInfo.ts b/src/models/RewardInfo.ts
new file mode 100644
index 0000000..c8498b9
--- /dev/null
+++ b/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";
+  }
\ No newline at end of file
diff --git a/src/pages/challenger-welcome.tsx b/src/pages/challenger-welcome.tsx
index 969f778..3b1db1e 100644
--- a/src/pages/challenger-welcome.tsx
+++ b/src/pages/challenger-welcome.tsx
@@ -4,7 +4,7 @@ import { UserContext } from "@/contexts/user-context";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from 'next/router';
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
 import StepFour from "../../public/assets/images/ChallengerWelcome/StepFour.png";
 import StepOne from "../../public/assets/images/ChallengerWelcome/StepOne.png";
 import StepThree from "../../public/assets/images/ChallengerWelcome/StepThree.png";
@@ -17,20 +17,9 @@ function ChallengerWelcome() {
   const router = useRouter();
   sessionStorage.setItem("UserType", "Challenger");
 
-  const [rewardsAvailable, setRewardsAvailable] = useState<boolean>(false);
   const { activeUser } = useContext(UserContext);
-  const { rewardsInfo } = useContext(RewardsContext);
-
-  useEffect(() => {
-    if (rewardsInfo) {
-      for (let i in rewardsInfo) {
-        if (rewardsInfo[i].rewardAvailable) {
-          setRewardsAvailable(true);
-          break;
-        }
-      }
-    }
-  },[rewardsInfo]);
+  const { rewards } = useContext(RewardsContext);
+  const [rewardsAvailable, setRewardsAvailable] = useState<boolean>(rewards.some(r => r.rewardAvailable));
 
   return (
     <PageContainer>