Waitlist

Adding the Waitlist Modal

To implement the waitlist feature, use the pre-built Waitlist Modal component. This modal is located at:

/src/features/waitlist/components/waitlist-modal.tsx

The modal allows users to enter their email addresses, which are then stored in the waitlist table in Supabase. Additionally, it creates a contact in a Resend audience for email marketing or notifications.

Steps to Integrate the Waitlist Modal

To fully integrate the Waitlist Modal into your saas, you will need to modify a few key components and sections in the application. This guide will show how to:

1. Replace existing buttons with the Waitlist Modal in different components.
2. Update the middleware to block access to specific routes.

Replace Buttons with Waitlist Modal

You can replace the "Get Started" button functionality in the navigation bar with the Waitlist Modal.

Similarly, you can replace the "Let's Get Started" button in the hero section with the Waitlist Modal.

To replace the "Choose Plan" button in the pricing section with the Waitlist Modal, follow similar steps.

Middleware

Add the following code to middleware to ensure that access to /, /docs, and /blog (and any subroutes) is allowed, while all other routes are blocked.

const onlyAccessibleWhenJoinWaitList = ["/", "/docs", "/blog", "/sitemap.xml", "/robots.txt"];
 
const canAccessPath = onlyAccessibleWhenJoinWaitList.some((path) => {
  if (pathnameIsMissingLocale) {
    return pathname === path || pathname.startsWith(`${path}/`);
  }
 
  return (
    pathname === `/${locale}${path === "/" ? "" : path}` ||
    pathname.startsWith(`/${locale}${path}/`)
  );
});
 
if (!canAccessPath) {
  return NextResponse.redirect(new URL(`/${locale}`, request.url));
}