Update NPS widget to collect use cases

Created by: gitstart-sourcegraph

Description

We recently introduced use cases at the company level and are now seeking to operationalize them. One gap to achieve that is tying customer feedback to use cases. RFC 600: Add use cases to the NPS widget, that just got reviewed, proposes to introduce collecting them. This involves (proposal 1 in the RFC) updating the NPS widget to collect use cases mockups

Urgency: It's important to start collecting use cases data. While this is not an emergency, it will have an immediate impact on the business.

https://user-images.githubusercontent.com/9516420/172616427-4be5c7bd-896a-4463-b9da-d554d1ba084e.mp4

Refs

Sourcegraph Issue GitStart Ticket

How to replicate current behavior:

• Open Sourcegraph.com in new incognito tab
• Run localStorage.setItem('temporarySettings', '{"user.daysActiveCount":2}') in the browser console
• Reload the page and the survey toast should appear. Relevant component SurveyToast
• Click on "10" it will then load SurveyPage at https://sourcegraph.com/survey/10

Desired behavior:

• Click a number in toast
• Click "Continue" in toast
• Toast updates to show form shown in Figma mockups

Implementation Plan

• Create a 4 Mutli-step form to compliment the SurveyToast.ts
• Modify unit tests accordingly.
• Fix integration tests for failing accessibility audits.

Test Plan

• If How to replicate current behavior section steps does not work, add prop forceVisible={true} on L216 (changed to 214) client/web/src/Layout.tsx
• Ensure the UI matches the figma design.
• Ensure unit and integration test pass.

Time Estimate

• 15 to 20 hours to create the new UI and functionalities, update unit tests as some old ones will become obsolete.

App preview:

• Web
• Storybook

Check out the client app preview documentation to learn more.