Updated simplified design for subscription dialog#8744
Merged
Conversation
Read the simplified subscription dialog content (titles, taglines, bullet points, store badges) from the backend `simplifiedFeatures` of each plan, so it can be translated server-side. "Upgrade to […]" stays a client-side translation, using the backend-provided plan name. Fetch the subscription dialog A/B test configuration from the backend and use it to decide, per placement, which dialog variant and featured plan to show (weighted random). Degrades gracefully: unknown variant types, unconfigured placements or a missing config fall back to the standard dialog. The simplified (upsell) dialog is also skipped when the user already has the featured plan or a higher one. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Parse a minimal markdown-ish "**...**" syntax in the backend-provided simplified features and render the wrapped words in bold, using the gold accent color in the featured plan column. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
The A/B test config is now served with the user limits instead of a dedicated endpoint, so read it from `authenticatedUser.limits` when opening the subscription dialog rather than fetching it separately at startup. Falls back to the standard dialog for anonymous users or older backends. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Drop a few explanatory comments and replace the `SubscriptionDialogVariant` type alias with a plain string. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Use the featured plan's `upgradeOverlineByLocale` and `upgradeTitleByLocale` for the dialog header (overline and title), falling back to client-side text when not provided. The CTA button stays a client-side translation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Use the featured plan's `upgradeButtonLabelByLocale` for the CTA button, keeping the arrow outside the translation. Falls back to the client-side label when not provided. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Render the "Not for now" dismiss action as a real button so it is keyboard-focusable and operable (Enter/Space), with visible hover and focus states. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Darken the gold accent text (tagline and emphasized words) on light themes so it stays readable, and give the store badges a dark-tinted chip background on light themes so they remain visible. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Use dark-tinted borders on light themes for the Free (OSS) column outline and the price/content separator, which were white-based and invisible. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
Owner
Author
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0bc56abd93
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| return ( | ||
| <I18n> | ||
| {({ i18n }) => ( | ||
| <Dialog title={null} open maxWidth="md" flexColumnBody noPadding> |
There was a problem hiding this comment.
Because this Dialog omits onRequestClose, the simplified variant has no close button and Escape/backdrop dismissal do nothing; users must discover and click the small “Not for now” CTA instead. The shared Dialog only enables those standard dismissal paths when onRequestClose is provided, so pass onRequestClose={onClose} here like the standard subscription dialog does.
Useful? React with 👍 / 👎.
Apple/Google Play subscriptions cannot be managed from the web checkout. The standard dialog blocks these users with a dedicated message, but the simplified dialog does not. Include the app-store subscription state in the variant resolution so these users fall back to the standard dialog instead of being sent into the cancel/change flow. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SE1tavFh7qJRq7hfMimbVa
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
3 participants
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.
No description provided.