Feat(web): add simple mobile onboarding#1096
Merged
tyler-dane merged 12 commits intomainfrom Oct 11, 2025
Merged
Conversation
…ast notifications
…ail validation and user feedback
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds a mobile-specific onboarding flow for the Compass calendar application. The implementation includes mobile detection, waitlist checking, and simplified onboarding steps tailored for mobile devices.
- Mobile flow with 3 steps: waitlist check, mobile warning message, and sign-in
- Waitlist status validation with appropriate user messaging and actions
- Mobile viewport detection hook with responsive breakpoint at 768px
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
packages/web/src/views/Onboarding/util/waitlist.check.ts |
Adds waitlist status parsing logic and user flow determination |
packages/web/src/views/Onboarding/steps/welcome/Welcome.tsx |
Removes unused styled components from welcome step |
packages/web/src/views/Onboarding/steps/waitlist/WaitlistCheck.tsx |
Updates waitlist URL to use centralized constant |
packages/web/src/views/Onboarding/steps/mobile/MobileWarning.tsx |
Creates mobile warning component with desktop experience message |
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/ |
Implements mobile waitlist check with email validation and status handling |
packages/web/src/views/Onboarding/steps/mobile/MobileSignIn.tsx |
Creates mobile sign-in component with Google OAuth integration |
packages/web/src/views/Onboarding/OnboardingFlow.tsx |
Adds mobile detection and conditional rendering of mobile flow |
packages/web/src/common/hooks/useIsMobile.ts |
Implements responsive mobile detection hook |
packages/web/src/common/constants/ |
Adds centralized waitlist URL constant and mobile route |
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/WaitlistButton.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/MobileWaitlistCheck.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/WaitlistButton.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Onboarding/steps/mobile/MobileSignIn.tsx
Outdated
Show resolved
Hide resolved
tyler-dane
force-pushed
the
feat/786-mobile-onboarding
branch
from
3db2941 to
2be10a2
Compare
Set nextAction to "NOTHING" instead of "NEXT_BTN" when waitlist API errors occur. This shows the BYPASS WAITLIST button which allows users to retry the request, instead of showing a disabled Continue button. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove email validation check from Continue button when nextAction is NEXT_BTN. This prevents UX dead-ends where users can't retry after errors. The button is now only disabled during loading state. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Move onNext() call to be conditional on new users only, preventing it from being called after navigate() for existing users. This avoids React warnings about state updates on unmounted components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Extract the media query string to a constant and create the MediaQueryList object once, eliminating duplication between the initial check and the event listener setup. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/WaitlistButton.tsx
Show resolved
Hide resolved
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/MobileWaitlistCheck.test.tsx
Show resolved
Hide resolved
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/MobileWaitlistCheck.test.tsx
Show resolved
Hide resolved
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/MobileWaitlistCheck.test.tsx
Show resolved
Hide resolved
packages/web/src/views/Onboarding/steps/mobile/MobileWaitlistCheck/MobileWaitlistCheck.test.tsx
Show resolved
Hide resolved
victor-enogwe
pushed a commit
that referenced
this pull request
Oct 24, 2025
* refactor(web): simplify Welcome component by removing unused styled components * feat(web): add mobile onboarding flow with responsive hooks and components * feat(web): add mobile waitlist check component and tests * feat(web): enhance mobile waitlist check with email validation and toast notifications * feat(web): centralize waitlist URL in constants for consistent usage * feat(web): implement mobile waitlist check component with enhanced email validation and user feedback * feat: udpate warning msg * refactor(web): remove mobile route from constants and router * fix(web): show BYPASS WAITLIST button on error for retry Set nextAction to "NOTHING" instead of "NEXT_BTN" when waitlist API errors occur. This shows the BYPASS WAITLIST button which allows users to retry the request, instead of showing a disabled Continue button. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(web): remove email validation from Continue button disabled state Remove email validation check from Continue button when nextAction is NEXT_BTN. This prevents UX dead-ends where users can't retry after errors. The button is now only disabled during loading state. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(web): call onNext only for new users before navigation Move onNext() call to be conditional on new users only, preventing it from being called after navigate() for existing users. This avoids React warnings about state updates on unmounted components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor(web): extract duplicate media query in useIsMobile Extract the media query string to a constant and create the MediaQueryList object once, eliminating duplication between the initial check and the event listener setup. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a mobile-specific onboarding flow for the web application, including new React components and hooks to detect mobile devices and guide users through a tailored onboarding experience. Key changes include the addition of a
useIsMobilehook (with tests), new onboarding steps for mobile users (waitlist check, warning, and sign-in), and supporting UI components. The onboarding flow now automatically switches to the mobile-specific steps when accessed from a mobile device.Mobile Onboarding Flow Implementation:
useIsMobileReact hook to detect mobile viewport size usingwindow.matchMedia, along with comprehensive unit tests to ensure correct behavior and responsiveness. [1] [2]OnboardingFlow.tsxto use theuseIsMobilehook and render a dedicated sequence of mobile onboarding steps (MobileWaitlistCheck,MobileWarning,MobileSignIn) when accessed on mobile devices. [1] [2] [3] [4]New Mobile Onboarding Step Components:
MobileWaitlistCheck, a component that checks if a user's email is on the waitlist, provides feedback, and conditionally shows a button to sign up for the waitlist or proceed. Includes supporting UI components and styling. [1] [2] [3]MobileSignIn, a component for Google sign-in during mobile onboarding, with background Google Calendar import for new users. Includes a full test suite to validate user journeys and integration. [1] [2]Constants and Integration:
WAITLIST_URLconstant and updated all usages to reference it, improving maintainability. [1] [2] [3]These changes ensure that mobile users receive a streamlined and touch-friendly onboarding experience, with robust validation and clear integration points for authentication and waitlist management.
Closes #786