feat: add contextual referral and review prompts#6027
Open
tsahimatsliah wants to merge 10 commits into
Open
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…nline widgets The previous panel embedded ContextualReferralLink directly inside the panel box, which is a raw sub-component, not the real user experience. Now the panel: - Forces GrowthBook feature flags (referral_growth_loops, extension_store_review_prompt) so invite sections appear inside the real modals - Opens the actual NewStreakModal (7-day / new record variants) via useLazyModal - Renders the real Chrome Web Store review banner full-width at the top of the viewport using fixed positioning — exactly as extension users see it - Provides navigation links to DevCard settings, Squad, Brief, Invite pages Co-authored-by: Cursor <cursoragent@cursor.com>
ContextualReferralLink: - Gradient card (onion/cabbage) with glow decoration so it feels like a moment, not a form field - UserShareIcon in a coloured icon pill sets context instantly - URL displayed inline in a pill row — users see exactly what they're sharing before clicking - Inline XSmall copy button replaces full-width secondary button - Copy success state: VIcon + "Copied!" in Primary variant with avocado colour ExtensionStoreReviewPrompt: - Five StarIcons (outline → filled gold on step 2) establish the review context without any copy - Warm cheese gradient on the positive step creates a celebratory, differentiated state vs the neutral first question - "Yes, loving it!" / "Not yet" copy is more honest and conversational - Replaced "Not now" text button with a compact MiniCloseIcon dismiss at the far right — same affordance, cleaner layout - 300ms colour transition between the two steps QA panel: - Banner preview JSX kept in sync with the redesigned component so the panel always shows the exact experience users will see Co-authored-by: Cursor <cursoragent@cursor.com>
Picked the streak milestone as the focus surface for deep design — it has the highest invite-conversion potential (peak emotional charge, recurring touchpoints, naturally challenge-able number). New `StreakShareCallout` replaces the generic `ContextualReferralLink` inside `NewStreakModal`: - Bacon/cheese gradient continues the streak fire visual into the share block instead of feeling tacked on - Pre-written, streak-specific message with the user's actual count baked in. Tone adapts to milestone size (friendly at 7, cocky at 30, dominant at 100) - Chat-bubble preview shows users exactly what their friend will receive before they click anything — biggest trust signal in invite flows - Five channel buttons in a horizontal row (WhatsApp, X, Telegram, Email, Copy) — the channels devs actually use for 1:1 invites. Skipped FB, LinkedIn, Reddit (wrong tone for a personal challenge) - Per-channel share URLs include both message text AND link, working around getWhatsappShareLink only encoding the URL - Native Web Share API button surfaces on mobile when supported - Per-channel logging via ShareProvider so we can measure conversion by channel QA panel redesign: - New hero card highlights the streak invite as the focus design - Single primary button forces the flag and opens the modal in one click - Three streak variants (7-day / 30-day / 100-day) demonstrate adaptive copy - Other surfaces moved into a collapsed "Other referral surfaces" details drawer to reduce noise Co-authored-by: Cursor <cursoragent@cursor.com>
…demo
The previous design used hardcoded hex colours (#25D366, #229ED9) and
text-text-primary opacity tricks that broke in dark/light mode. The
"challenge me / beat me" copy was also dishonest because the link goes
to the inviter's profile page, not a challenge mechanism.
StreakShareCallout — full rewrite as a Trophy Card:
- The streak achievement IS the share asset. A polished gradient card
(bacon → cheese) with the streak count, username, and milestone label
("Building the habit", "Week strong", "On fire", "Streak royalty"). It
looks like the kind of card people screenshot from Strava or Spotify
Wrapped, not a UI element
- Channel buttons use design system btn-primary-* classes
(btn-primary-whatsapp, btn-primary-twitter, etc.) — proper brand colours
that adapt to dark/light mode automatically. No more invisible blobs
- Honest, accurate pre-written message: "🔥 N-day reading streak on
daily.dev. Read with me:" — matches what the recipient actually sees
when they tap the link (your profile + your streak)
- Tone scales by milestone: friendly under 30, confident at 30+, casual
flex at 100+
- Inline "Preview the message" disclosure shows the actual outgoing text
in a chat bubble before they click
- Adds copied confirmation via VIcon and StatusSuccess colour token
- Native Web Share API surfaces on mobile
StreakShareFlowDemo (new) — visual mock of the full WhatsApp flow:
- 3-step walkthrough: you send → friend receives → friend lands on your
profile streak
- Mock WhatsApp UI with the actual outgoing message in an avocado-green
bubble
- Recipient inbox view with the link
- Mock landing page showing the inviter's streak with "Start your own
streak" CTA — makes the value prop tangible
- Step indicator + Back/Next buttons for browsing the flow
QA panel:
- Hero card now includes a "👁 Preview the WhatsApp flow" toggle that
expands the StreakShareFlowDemo inline, so reviewers can see exactly
what the friend will receive without leaving the panel
Co-authored-by: Cursor <cursoragent@cursor.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.
Summary
Policy and rollout notes
ActionType.ChromeStoreReviewPrompt.referral_growth_loops; review prompt is gated byextension_store_review_prompt.Test plan
node ./scripts/typecheck-strict-changed.jspnpm --filter shared lintpnpm --filter webapp lintMade with Cursor
Preview domain
https://feat-referral-review-growth-pr.preview.app.daily.dev