Skip to content

feat(funnels): enable funnels on onboarding #4489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 87 commits into
base: main
Choose a base branch
from

Conversation

ilasw
Copy link
Contributor

@ilasw ilasw commented May 14, 2025

Changes

  • Cleaned reorder experiment (won)
  • Moved intro screen to OrganicRegistration component
  • Cleaned Onboarding page logic and convert into a funnel page
  • Fixed tabled/desktop layout for old onboarding steps
  • Added action query string to onboarding page for force rendering of one AuthOptions's component

Events

Did you introduce any new tracking events?

Experiment

  • Removed onboarding_reorder
  • Removed feature.onboardingVisual as is not required anymore (now onboarding is fully configurable as a funnel)

Manual Testing

Caution

Please make sure existing components are not breaking/affected by this PR

You can test it using this funnel configuration locally and adding in URL ?id=onboarding:

{"id": "onboarding", "version": 3, "chapters": [{"id": "a", "steps": [{"id": "e1104432-d1ce-47b2-be76-c5ea7133c1ef", "name": "Organic Registration 5", "type": "organicRegistration", "parameters": {"image": "https://media.daily.dev/image/upload/s--r2ffZPB4--/f_auto/v1716969841/dailydev_where_developers_suffer_together_sfvfog", "headline": "Where developers suffer together", "explainer": "We know how hard it is to be a developer. It doesn't have to be. Personalized news feed, dev community and search, much better than what's out there. Maybe ;)", "imageMobile": "https://media.daily.dev/image/upload/s--EwsBTBt6--/f_auto/v1716969841/dailydev_where_developers_suffer_together_mobile_shkn1w", "formHeadline": "Join daily.dev"}, "transitions": [{"on": "complete", "destination": "d4fe1239-0649-497b-b8c7-cd8eb150f468"}, {"on": "skip", "destination": ""}]}, {"id": "d4fe1239-0649-497b-b8c7-cd8eb150f468", "name": "Edit Tags", "type": "editTags", "parameters": {"cta": "", "headline": "Pick tags that are relevant to you", "minimumRequirement": 5}, "transitions": [{"on": "complete", "destination": "90f8dac6-3385-4b78-b5ae-670e9d199029"}, {"on": "skip", "destination": ""}]}, {"id": "90f8dac6-3385-4b78-b5ae-670e9d199029", "name": "Content Types", "type": "contentTypes", "parameters": {"cta": "", "headline": "What kind of posts would you like to see on your feed?"}, "transitions": [{"on": "complete", "destination": "pricing"}, {"on": "skip", "destination": ""}]}], "title": "Register and profile"}, {"id": "d", "steps": [{"id": "pricing", "name": "Pricing", "type": "pricing", "parameters": {"cta": "Proceed to checkout →", "faq": [{"answer": "Yes. You can cancel your plan at any point from your account settings. You'll keep access until the end of your billing cycle.", "question": "Can I cancel anytime?"}, {"answer": "We'll send personalized nudges to help you stay consistent, and your feed will always be waiting. No FOMO required.", "question": "What happens if I forget to use it?"}, {"answer": "Absolutely. daily.dev is built for anyone in tech. From junior devs to DevOps, PMs, and hobbyists. If you want to stay sharp, it's for you.", "question": "Is this useful if I'm not a full-time developer?"}], "perks": ["30-day refund, no questions asked", "Cancel anytime, no strings attached", "Works across all your devices"], "plans": [{"badge": {"text": "Popular", "background": "#CE3DF3"}, "label": "Monthly", "priceId": "pri_01jbsccbdbcwyhdy8hy3c2etyn"}, {"badge": {"text": "Save 50%", "background": "#39E58C"}, "label": "Annual", "priceId": "pri_01jbscda57910yvwjtyapnrrzc", "variation": "best_value"}], "refund": {"image": "https://media.daily.dev/image/upload/s--QHvr7zBd--/f_auto/v1743491782/public/approved", "title": "100% money back guarantee", "content": "We're confident in the quality of our plan. More than a million developers around the world use daily.dev to grow professionally. To get the most out of it, use daily.dev daily. Consume content, explore, and interact with the community. If you still don't love it after 30 days, contact us. We guarantee a full hassle-free refund. No questions asked."}, "review": {"image": "https://media.daily.dev/image/upload/s--ZOzmj3AB--/f_auto/v1743939472/public/Review", "authorInfo": "Dave N., Senior Software Engineer", "reviewText": "This is the only tool I’ve stuck with for more than a month. It fits naturally into my routine and keeps me sharp.", "authorImage": "https://media.daily.dev/image/upload/s--FgjC22Px--/f_auto/v1743491782/public/image"}, "discount": {"message": "Get <b>additional 20% discount</b> if you subscribe in the next 15 minutes", "duration": 15}, "headline": "Choose your plan", "defaultPlan": "pri_01jbscda57910yvwjtyapnrrzc", "featuresList": {"items": ["Curated tech content from all over the web", "Personalized feed based on your interests", "AI assistant to explain complex topics", "Distraction-free reading mode", "Save posts for later and organize with folders", "Discover trending tools early", "Engage with like-minded professionals", "Exclusive content from top creators"], "title": "Your new abilities"}}, "transitions": [{"on": "complete", "destination": "checkout"}]}, {"id": "checkout", "name": "Checkout", "type": "checkout", "parameters": {"discountCode": "dsc_01jr577nnphy2mgckh0r56yjf2"}, "transitions": [{"on": "complete", "destination": "payment_successful"}]}, {"id": "payment_successful", "name": "Payment Successful", "type": "paymentSuccessful", "parameters": {}, "transitions": [{"on": "complete", "destination": "finish"}]}], "title": "Plus"}], "parameters": {}, "entry_point": "e1104432-d1ce-47b2-be76-c5ea7133c1ef"}

Jira ticket

MI-890

Preview domain

https://mi-890-feat-onboarding-funnel.preview.app.daily.dev

Copy link

vercel bot commented May 14, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
daily-webapp ✅ Ready (Inspect) Visit Preview May 28, 2025 3:34pm
storybook 🔄 Building (Inspect) Visit Preview May 28, 2025 3:34pm

Comment on lines +38 to +71
export const getCookiesAndHeadersFromRequest = (
req: GetServerSidePropsContext['req'],
): {
cookies: string;
forwardedHeaders: Record<string, string>;
} => {
const allCookies = req.headers.cookie || '';

// Extract forwarded headers
const forwardedHeaders: Record<string, string> = {};
['x-forwarded-for', 'x-forwarded-proto', 'x-forwarded-host'].forEach(
(header) => {
const value = req.headers[header] as string;
if (value) {
forwardedHeaders[header] = value;
}
},
);
if (!forwardedHeaders['x-forwarded-for']) {
forwardedHeaders['x-forwarded-for'] = req.socket.remoteAddress;
}

return { cookies: allCookies, forwardedHeaders };
};

export function setResponseHeaderFromBoot(
boot: FunnelBootResponse,
res: GetServerSidePropsContext['res'],
) {
const setCookieHeader = boot.response.headers.get('set-cookie');
if (setCookieHeader) {
res.setHeader('Set-Cookie', setCookieHeader);
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only added those 2 functions and moved the file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants