feat(app): add InitialWelcome and WelcomeWrapper component

Author: tim-schultz

app/__tests__/components/InitialWelcome.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { InitialWelcome } from "../../components/InitialWelcome";
+import { useNavigate } from "react-router-dom";
+
+jest.mock("react-router-dom", () => ({
+  useNavigate: jest.fn(),
+}));
+
+const defaultProps = {
+  onBoardFinished: jest.fn(),
+};
+
+describe("InitialWelcome", () => {
+  it("renders the component and displays the first step", () => {
+    render(<InitialWelcome {...defaultProps} />);
+
+    expect(screen.getByText("Welcome to Gitcoin Passport!")).toBeInTheDocument();
+    expect(screen.getByText("Privacy-First Verification")).toBeInTheDocument();
+  });
+
+  it("navigates through the steps and calls onBoardFinished when completed", () => {
+    render(<InitialWelcome {...defaultProps} />);
+
+    const nextButton = screen.getByText("Next");
+
+    // Click "Next" to go to step 2
+    fireEvent.click(nextButton);
+    expect(screen.getByText("Introducing Passport Scoring")).toBeInTheDocument();
+    expect(screen.getByText("Get Your Unique Humanity Score")).toBeInTheDocument();
+
+    // Click "Next" to go to step 3
+    fireEvent.click(nextButton);
+    expect(screen.getByText("Get Started")).toBeInTheDocument();
+    expect(screen.getByText("One-Click Verification")).toBeInTheDocument();
+
+    // Click "Next" to finish the steps
+    fireEvent.click(nextButton);
+    expect(defaultProps.onBoardFinished).toHaveBeenCalledTimes(1);
+  });
+
+  it("skips the last step, resets the step, and navigates to the dashboard", () => {
+    const navigateMock = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(navigateMock);
+
+    render(<InitialWelcome {...defaultProps} />);
+
+    const nextButton = screen.getByText("Next");
+
+    // Click "Next" to go to step 2
+    fireEvent.click(nextButton);
+    // Click "Next" to go to step 3
+    fireEvent.click(nextButton);
+
+    const skipButton = screen.getByText("Skip For Now");
+
+    // Click "Skip For Now" to reset the step and navigate to the dashboard
+    fireEvent.click(skipButton);
+    expect(navigateMock).toHaveBeenCalledWith("/dashboard");
+  });
+});

app/components/InitialWelcome.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { WelcomeWrapper } from "./WelcomeWrapper";
+import { useNavigate } from "react-router-dom";
+
+const welcomeSteps = [
+  {
+    header: "Welcome to Gitcoin Passport!",
+    subHeader: "Privacy-First Verification",
+    body: "The non-doxxing identity aggregator that combines multiple sybil prevention mechanisms to prove your unique humanity and build your reputation.",
+    imgSrc: "",
+  },
+  {
+    header: "Introducing Passport Scoring",
+    subHeader: "Get Your Unique Humanity Score",
+    body: "Think of your score as a trampoline that launches you to your destination. As your score increases, communities more easily trust that you are a unique human.",
+    imgSrc: "",
+  },
+  {
+    header: "Get Started",
+    subHeader: "One-Click Verification",
+    body: "You can now verify most web3 stamps with one-click verification! Verifying Web2 apps will come after this step, and we encourage you to collect as many stamps as possible.",
+    imgSrc: "",
+  },
+];
+
+const stepIndicator = (step: number) => {
+  const steps = welcomeSteps.map((_, i) => {
+    const active = i === step ? "border-4 border-muted h-4 w-4" : "w-2.5 h-2.5 mt-0.5";
+    return <div key={i} className={`mx-4 rounded-full bg-accent ${active}`} />;
+  });
+  return <div className="ml-3 flex justify-center">{steps}</div>;
+};
+
+export const InitialWelcome = ({ onBoardFinished }: { onBoardFinished: () => void }) => {
+  const [step, setStep] = useState(0);
+  const navigate = useNavigate();
+
+  return (
+    <WelcomeWrapper content={welcomeSteps[step]}>
+      <div className="flex w-full flex-col">
+        <div className="mb-5 flex w-full items-center justify-center">
+          Step {step + 1} of {welcomeSteps.length} {stepIndicator(step)}
+        </div>
+        <div className="flex w-full justify-end">
+          {step === 2 && (
+            <button
+              className="secondary-btn mr-2  w-1/2 rounded-sm py-2 px-6"
+              onClick={() => {
+                setStep(0);
+                navigate("/dashboard");
+              }}
+            >
+              Skip For Now
+            </button>
+          )}
+          <button
+            className="ml-2 w-1/2 rounded-sm bg-accent py-2 px-6"
+            onClick={() => {
+              if (step + 1 === welcomeSteps.length) {
+                onBoardFinished();
+              } else {
+                setStep(step + 1);
+              }
+            }}
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </WelcomeWrapper>
+  );
+};

app/components/WelcomeBack.tsx

@@ -12,6 +12,7 @@ import { UserContext } from "../context/userContext";
 
 // --- UI Components
 import { Spinner } from "@chakra-ui/react";
+import { WelcomeWrapper } from "./WelcomeWrapper";
 
 export interface WelcomeBackProps {
   onOpen: () => void;
@@ -30,14 +31,15 @@ export const WelcomeBack = ({
   const [isLoading, setLoading] = useState(false);
 
   return (
-    <>
-      <div className="top-[113px] mt-10 text-3xl">Welcome Back!</div>
-      <div className="top-[209px] mt-10 h-[240px] w-[295px] border border-accent-2 bg-background lg:h-[333.56px] lg:w-[410px]"></div>
-      <p className="top-[113px] mt-10 text-2xl text-muted">One-Click Verification</p>
-      <p className="mt-2 mb-10 w-[343px] text-gray-300 lg:w-[410px]">
-        You can now verify most web3 stamps and return to your destination faster with one-click verification!
-      </p>
-      <div className="absolute bottom-10 mb-auto flex w-[295px] items-center justify-between md:relative md:mt-16 lg:w-[410px]">
+    <WelcomeWrapper
+      content={{
+        header: "Welcome Back!",
+        subHeader: "One-Click Verification",
+        body: "You can now verify most web3 stamps and return to your destination faster with one-click verification!",
+        imgSrc: "",
+      }}
+    >
+      <>
         <button
           data-testid="skip-for-now-button"
           className="secondary-btn mr-2 flex w-full items-center justify-center rounded-sm py-2 px-6"
@@ -61,7 +63,7 @@ export const WelcomeBack = ({
         >
           Refresh My Stamps
         </button>
-      </div>
-    </>
+      </>
+    </WelcomeWrapper>
   );
 };

app/components/WelcomeWrapper.tsx

@@ -0,0 +1,25 @@
+export type Content = {
+  header: string;
+  subHeader: string;
+  body: string;
+  imgSrc: string;
+};
+
+export type WelcomeWrapperProps = {
+  content: Content;
+  children: React.ReactNode;
+};
+
+export const WelcomeWrapper = ({ content, children }: WelcomeWrapperProps) => {
+  return (
+    <>
+      <div className="top-[113px] mt-10 text-3xl">{content.header}</div>
+      <div className="top-[209px] mt-10 h-[240px] w-[295px] border border-accent-2 bg-background lg:h-[333.56px] lg:w-[410px]"></div>
+      <p className="top-[113px] mt-10 text-2xl text-muted">{content.subHeader}</p>
+      <p className="mt-2 mb-10 w-[343px] text-gray-300 lg:w-[410px]">{content.body}</p>
+      <div className="absolute bottom-10 mb-auto flex w-[295px] items-center justify-between md:relative md:mt-16 lg:w-[410px]">
+        {children}
+      </div>
+    </>
+  );
+};