feat: add congratulatory modal when pro trial begins #2880
Merged
Conversation
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
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for howto-fix-macos-audio-selection canceled.
|
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Give more space inside the trial start and trial end modals and allow clicking the overlay to dismiss the trial start modal. This increases the close button offset and enlarges the inner spacing (gap and padding) so content has better breathing room, and removes the preventClose prop on the trial-begin modal so overlay clicks close it. Changes: - Removed preventClose from trial-begin modal to enable overlay dismissal. - Adjusted close button position from right-4/top-4 to right-6/top-6 in both modals. - Increased inner spacing from gap-8/p-6 to gap-10/p-10 for both modals to provide more space around content.
Increase z-index for modal overlay and dialog to ensure the overlay appears above the chat trigger button. This prevents the chat trigger from showing through the modal background and guarantees the modal and its backdrop visually cover interactive controls underneath.
The shared Modal component caused layout overflow on narrow windows. Replace usage in trial-begin-modal and trial-expired-modal with a custom, fixed-position modal implementation that: - Renders nothing when closed (avoid hidden overflow issues) - Adds an overlay/backdrop that closes on click - Centers a constrained, scrollable dialog (max-w-lg, max-h-full, overflow-auto) - Moves the close button into the dialog header and supports Escape key to close This prevents the previous modal from overflowing on small window sizes and keeps dialog content scrollable while preserving focus/close behavior.
Raise the z-index of trial modals so the chat trigger no longer appears above them. The backdrop and modal container z-index values were changed from z-[100] to z-[9999] in both trial-begin-modal.tsx and trial-expired-modal.tsx to ensure the modals fully overlay interactive UI such as the chat trigger.
Avoid z-index/stacking issues by mounting the trial begin and trial expired modals into document.body using React portals. Import createPortal from react-dom and wrap the modal JSX with createPortal(..., document.body) so the z-10 trigger no longer appears beneath other UI layers.
The trial expiry modal was being dismissed when the user clicked the dimmed overlay because the overlay div had an onClick handler calling close. Remove the click handler so clicks on the overlay do not unintentionally close the modal. This keeps the modal modal and requires explicit dismissal actions, matching intended UX for expired trials.
Increase the maximum width of the subtitle container in the trial-begin modal so the subtitle has more horizontal space and matches the layout needs compared to the end modal. This adds a max-w-sm class to the subtitle wrapper to prevent overly narrow wrapping and improve readability.
Clarify modal messaging and include a generic "and more" item in both the trial-begin and trial-expired modals so the feature lists don't appear exhaustive. Also guard icon rendering for the new list item (icon may be null) and adjust the lead paragraph text to better reflect gained/lost access.
ComputelessComputer
force-pushed
the
devin/1767794288-pro-trial-begin-modal
branch
from
e338d80 to
f5a6407
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Adds a congratulatory modal that appears when a user starts their Pro trial. Previously, nothing was shown to the user when their trial began. The modal follows the same pattern as the existing
TrialExpiredModal.Changes:
TrialBeginModalcomponent with "Welcome to Pro!" message and feature highlightslogin.tsx)account.tsx)Review & Testing Checklist for Human
Notes
onSuccesscallbacks, so it should only appear after the trial has successfully startedTrialExpiredModal