feat(app): incldue new users flow

spy625 · Apr 18, 2023 · e622060 · e622060
1 parent 23d448f
commit e622060
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/app/__tests__/pages/Welcome.test.tsx b/app/__tests__/pages/Welcome.test.tsx
@@ -10,8 +10,8 @@ import {
   makeTestUserContext,
   renderWithContext,
 } from "../../__test-fixtures__/contextTestHelpers";
-import { RefreshMyStampsModal } from "../../components/RefreshMyStampsModal";
 import { CeramicContextState } from "../../context/ceramicContext";
+import { Stamp } from "@gitcoin/passport-types";
 
 jest.mock("../../utils/onboard.ts");
 
@@ -30,10 +30,19 @@ jest.mock("@self.id/framework", () => {
 const mockUserContext: UserContextState = makeTestUserContext();
 const mockCeramicContext: CeramicContextState = makeTestCeramicContext();
 
+const ceramicWithPassport = {
+  ...mockCeramicContext,
+  passport: { stamps: [{} as Stamp] },
+} as unknown as CeramicContextState;
+
 jest.mock("../../components/RefreshMyStampsModal.tsx", () => ({
   RefreshMyStampsModal: () => <div data-testid="refresh-my-stamps-modal" />,
 }));
 
+jest.mock("../../components/InitialWelcome.tsx", () => ({
+  InitialWelcome: () => <div data-testid="initial-welcome" />,
+}));
+
 beforeEach(() => {
   jest.clearAllMocks();
   (framework.useViewerConnection as jest.Mock).mockImplementation(() => [
@@ -49,7 +58,7 @@ describe("Welcome", () => {
   it("renders the page", () => {
     renderWithContext(
       mockUserContext,
-      mockCeramicContext,
+      ceramicWithPassport,
       <Router>
         <Welcome />
       </Router>
@@ -69,7 +78,7 @@ describe("when the user is navigated to the Welcome page", () => {
   it("should render the Skip for Now button", () => {
     renderWithContext(
       mockUserContext,
-      mockCeramicContext,
+      ceramicWithPassport,
       <Router>
         <Welcome />
       </Router>
@@ -81,7 +90,7 @@ describe("when the user is navigated to the Welcome page", () => {
   it("should render the Refresh My Stamps button", () => {
     renderWithContext(
       mockUserContext,
-      mockCeramicContext,
+      ceramicWithPassport,
       <Router>
         <Welcome />
       </Router>
@@ -121,7 +130,7 @@ describe("when the user clicks the Refresh My Stamps button it launches the Refr
   it("should render the refresh stamps modal", () => {
     renderWithContext(
       mockUserContext,
-      mockCeramicContext,
+      ceramicWithPassport,
       <Router>
         <Welcome />
       </Router>
@@ -137,3 +146,17 @@ describe("when the user clicks the Refresh My Stamps button it launches the Refr
     expect(screen.getByTestId("refresh-my-stamps-modal")).toBeInTheDocument();
   });
 });
+
+describe("when a new use visits the Welcome page", () => {
+  it("should render the Skip for Now button", () => {
+    renderWithContext(
+      mockUserContext,
+      { ...mockCeramicContext, passport: undefined },
+      <Router>
+        <Welcome />
+      </Router>
+    );
+
+    expect(screen.getByTestId("initial-welcome")).toBeInTheDocument();
+  });
+});
diff --git a/app/pages/Welcome.tsx b/app/pages/Welcome.tsx
@@ -24,8 +24,7 @@ import { useDisclosure } from "@chakra-ui/react";
 // --- Contexts
 import { CeramicContext } from "../context/ceramicContext";
 import { UserContext } from "../context/userContext";
-import { PROVIDER_ID } from "@gitcoin/passport-types";
-import { platform } from "os";
+import { InitialWelcome } from "../components/InitialWelcome";
 
 export default function Welcome() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -192,13 +191,20 @@ export default function Welcome() {
         </div>
         <PageWidthGrid>
           <div className="col-span-4 flex flex-col items-center text-center md:col-start-2 lg:col-start-3 xl:col-span-6 xl:col-start-4">
-            {/* if connected wallet address has a passport, show the Welcome Back component */}
-            <WelcomeBack
-              handleFetchPossibleEVMStamps={handleFetchPossibleEVMStamps}
-              onOpen={onOpen}
-              resetStampsAndProgressState={resetStampsAndProgressState}
-            />
-            {/* otherwise, show the First Time Welcome component */}
+            {passport && passport.stamps.length > 0 ? (
+              <WelcomeBack
+                handleFetchPossibleEVMStamps={handleFetchPossibleEVMStamps}
+                onOpen={onOpen}
+                resetStampsAndProgressState={resetStampsAndProgressState}
+              />
+            ) : (
+              <InitialWelcome
+                onBoardFinished={() => {
+                  resetStampsAndProgressState();
+                  onOpen();
+                }}
+              />
+            )}
           </div>
         </PageWidthGrid>
       </HeaderContentFooterGrid>