CHAL-9 #done Migrate the challenger welcome page

[MazharulIslam-Naim]

Checklist

• Include the corresponding Jira issue key and #done in the PR title, like so: "JRA-123 #done Migrate Election Reminders"
• Verify that the code compiles
• Verify that all tests pass
• Verify that unit tests cover 100% of the code
• Create Storybook stories for visual components
• Verify that any visual components match the Figma
• Test with a screen reader (if applicable)
• Document your code with TSDoc comments
• Format your code with Prettier

Overview

This PR creates the challengerwelcome page and the rewards context. There is also an npm package added, next-router-mock, for testing router changes caused by a button click.

Test Plan

There are snapshot tests for the challengerwelcome page and unit tests for the buttons on the page. The reward context is also tested.

Follow ups

[MazharulIslam-Naim]

Hey @dvorakjt I made the changes I wanted to make. Feel free to review it when you get a chance.

[dvorakjt]

Thanks @MazharulIslam-Naim! I will review it tomorrow

[dvorakjt]

Hi Naim,

Looks good so far, thanks for your hard work on this. There are a number of changes I need to request. Thanks in advance for implementing them!

1. Please ensure your fork of the repo is up-to-date with the development branch of the 8by8 repo so that your changes can be merged once they are ready.
2. The storybook story for this page is broken. You need to add some parameters to the meta object to instruct Storybook to use the Next.js app router. For more information, see this. At minimum, you will need to add the following:

const meta: Meta = {
  component: ChallengerWelcome,
  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },
};

3. Once you do this, you will instead see a NullContextError. This is because the component has not been wrapped in a UserContext provider in the Storybook file. The UserContext is available throughout the app because it is included in the layout.tsx file at the root of the app directory. But for stories and tests, you should add it manually if your component depends on it. In this case, that's probably not actually necessary because we are going to remove all references to the UserContext from your component, but I wanted you to be aware of this.
4. After reviewing the Figma, it's clear that this page is not rendered while the user is signed in. Therefore, we can remove all references to the UserContext from within the page. Once we have higher order AuthGuard components, we'll just wrap the entire thing in one of those. This will mean that the component doesn't need to be wrapped in a UserContext provider, and that your tests can be updated to reflect that.
5. There is no need to set the user type in session storage, this can be removed entirely. We will need to perform some such operation when we get to player stories, but even that operation will not occur directly in a presentation-layer component such as this.
6. Please use createNamedContext together with useContextSafely for the RewardsContext for consistency. This will mean that in testing, you will need to wrap the component in a RewardsContext provider.
7. The call to useState to set rewardsAvailable is unnecessary. This can simply be declared like this: const rewardsAvailable = rewards.some(r => r.rewardAvailable);
8. In order to make the RewardsContext available to the application, please add its provider to the layout.tsx component in the app directory, after the UserContextProvider.
9. There is probably no need to test the RewardsContext for now, as it doesn't really do anything except provide an empty array. You should be able to safely add it to the coveragePathIgnorePatterns array in the jest.config.mjs file and remove your test file. Consider updating the comment to reflect that in the future, once it has some actual behavior, it should be removed from this array.
10. Check the styles against the Figma and try to use the spacing variables found in partials. Review the design guide portion of the Figma. Examine the page with a fine-toothed comb. In general, treat existing styles skeptically. Can they more closely match the Figma? In most cases, this is likely. A few things I noticed were:
    a. margin between "see why others are doing it" and "How it works" should be the
    same as the margin between "sign in" and "how it works" in the figma. The margin is too large
    b. by default, most links have a font size of xs, this particular signin link seems to be xxs in the figma, note the difference in font size between the text before the link and after it
11. No need to import useRouter in the test or snapshot files.
12. Please use camelCase for image imports, as per the style guide.
13. When I installed the dependencies for this PR, I got a security warning. Please run npm audit and if necessary, npm audit fix to fix this vulnerability.

Keep up the great work, and thanks for your patience with my detailed code reviews. Thank you!

[MazharulIslam-Naim]

Fixed merge conflicts and redid rewards context. Let me know if there is anything I need to fix.

[dvorakjt]

Approved.