Feature/waitlist (#281)

* feat: waitlist

* fix rendering

apps/console/src/app.tsx

@@ -38,6 +38,7 @@ import { Suspense } from "react";
 import { FullScreenLoader } from "./components/common/FullScreenLoader";
 import { OrgPage } from "./pages/projects/OrgPage";
 import { useCurrentOrganization } from "./lib/hooks/useCurrentOrganization";
+import { WaitlistWrapper } from "~/pages/WaitlistWrapper";
 
 initSuperTokens();
 
@@ -101,7 +102,9 @@ export function App() {
                 path="/onboarding"
                 element={
                   <LayoutWrapper withSideNav={false}>
-                    <OnboardingPage />
+                    <WaitlistWrapper>
+                      <OnboardingPage />
+                    </WaitlistWrapper>
                   </LayoutWrapper>
                 }
               />
@@ -112,7 +115,9 @@ export function App() {
                 element={
                   <LayoutWrapper withSideNav={false} withOrgSubHeader={true}>
                     <Suspense fallback={<FullScreenLoader />}>
-                      <Outlet />
+                      <WaitlistWrapper>
+                        <Outlet />
+                      </WaitlistWrapper>
                     </Suspense>
                   </LayoutWrapper>
                 }
@@ -131,7 +136,9 @@ export function App() {
                     <CurrentPromptProvider>
                       <RequiredProviderApiKeyModalProvider>
                         <LayoutWrapper withSideNav={true}>
-                          <Outlet />
+                          <WaitlistWrapper>
+                            <Outlet />
+                          </WaitlistWrapper>
                         </LayoutWrapper>
                       </RequiredProviderApiKeyModalProvider>
                     </CurrentPromptProvider>

apps/console/src/components/layout/OrgSubHeader.tsx

@@ -8,9 +8,9 @@ const isActive = (href: string) => {
 
 export const OrgSubHeader = () => {
   const navigate = useNavigate();
-  const { organization } = useCurrentOrganization();
+  const { organization, waitlisted } = useCurrentOrganization();
 
-  if (!organization) {
+  if (!organization || waitlisted) {
     return;
   }
 

apps/console/src/graphql/definitions/queries/organizations.tsx

@@ -18,6 +18,7 @@ export const GET_ORGANIZATION = graphql(/* GraphQL */ `
     organization(data: $data) {
       id
       name
+      waitlisted
       members @include(if: $includeMembers) {
         id
         role

apps/console/src/lib/hooks/useCurrentOrganization.tsx

@@ -59,5 +59,6 @@ export const useCurrentOrganization = ({
     error,
     currentOrgId,
     selectOrg,
+    waitlisted: data?.organization?.waitlisted,
   };
 };

apps/console/src/lib/hooks/useWaitlist.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useCurrentOrganization } from "./useCurrentOrganization";
+
+export const useWaitlist = () => {
+  const { isSuccess, currentOrgId, waitlisted } = useCurrentOrganization();
+
+  const shouldRenderWaitlistNotice = useMemo(() => {
+    return isSuccess && currentOrgId && waitlisted;
+  }, [isSuccess, currentOrgId, waitlisted]);
+
+  return {
+    shouldRenderWaitlistNotice,
+  };
+};

apps/console/src/pages/WaitlistWrapper.tsx

@@ -0,0 +1,36 @@
+import { useGetCurrentUser } from "~/graphql/hooks/queries";
+import { useWaitlist } from "~/lib/hooks/useWaitlist";
+
+export const WaitlistWrapper = ({ children }) => {
+  const { shouldRenderWaitlistNotice } = useWaitlist();
+  const { data: currentUserData } = useGetCurrentUser();
+
+  if (shouldRenderWaitlistNotice) {
+    return (
+      <div className="container mx-auto p-8 text-center">
+        <h1 className="mb-4 font-heading font-medium">
+          You're on the waitlist!
+        </h1>
+        <div className="space-y-4 text-neutral-400">
+          <p>Thank you for signing up for Pezzo Cloud.</p>
+          <p>
+            You will receive an invitation at{" "}
+            <span className="font-semibold">{currentUserData.me.email}</span>{" "}
+            soon.
+          </p>
+          <p>
+            Need access sooner? Email us at{" "}
+            <a
+              className="font-semibold text-primary underline"
+              href="mailto:[email protected]"
+            >
+              [email protected]
+            </a>
+          </p>
+        </div>
+      </div>
+    );
+  } else {
+    return children;
+  }
+};

apps/server/prisma/migrations/20240105073154_add_organization_waitlisted_and_default_to_false/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Organization" ADD COLUMN     "waitlisted" BOOLEAN NOT NULL DEFAULT false;

apps/server/prisma/schema.prisma

@@ -83,6 +83,7 @@ model Organization {
   apiKeys         ApiKey[]
   providerApiKeys ProviderApiKey[]
   invitations     Invitation[]
+  waitlisted      Boolean              @default(false)
 }
 
 model OrganizationMember {

apps/server/src/app/config/common-config-schema.ts

@@ -22,6 +22,7 @@ const commonConfigSchema = {
   KMS_KEY_ARN: Joi.string().default(
     "arn:aws:kms:us-east-1:111122223333:key/demo-master-key"
   ),
+  WAITLIST_ENABLED: Joi.boolean().default(false),
 };
 
 const cloudConfigSchema = {

apps/server/src/app/identity/organizations.service.ts

@@ -1,10 +1,14 @@
 import { Injectable } from "@nestjs/common";
 import { PrismaService } from "../prisma.service";
 import { OrgRole } from "@prisma/client";
+import { ConfigService } from "@nestjs/config";
 
 @Injectable()
 export class OrganizationsService {
-  constructor(private readonly prisma: PrismaService) {}
+  constructor(
+    private readonly prisma: PrismaService,
+    private config: ConfigService
+  ) {}
 
   async getById(id: string) {
     return await this.prisma.organization.findUnique({ where: { id } });
@@ -108,9 +112,12 @@ export class OrganizationsService {
   }
 
   async createOrg(name: string, creatorUserId: string) {
+    const waitlisted = this.config.get("WAITLIST_ENABLED");
+
     return await this.prisma.organization.create({
       data: {
         name,
+        waitlisted,
         members: {
           create: {
             userId: creatorUserId,

apps/server/src/app/identity/users.service.ts

@@ -6,14 +6,18 @@ import { ExtendedUser } from "./models/extended-user.model";
 import UserMetadata from "supertokens-node/recipe/usermetadata";
 import { SupertokensMetadata } from "../auth/auth.types";
 import { randomBytes } from "crypto";
+import { ConfigService } from "@nestjs/config";
 
 export type UserWithOrgMemberships = User & {
   orgMemberships: OrganizationMember[];
 };
 
 @Injectable()
 export class UsersService {
-  constructor(private readonly prisma: PrismaService) {}
+  constructor(
+    private readonly prisma: PrismaService,
+    private config: ConfigService
+  ) {}
 
   async createUser(
     userCreateRequest: UserCreateRequest
@@ -28,9 +32,12 @@ export class UsersService {
       },
     });
 
+    const waitlisted = this.config.get("WAITLIST_ENABLED");
+
     const organization = await this.prisma.organization.create({
       data: {
         name: `${userCreateRequest.name}'s Organization`,
+        waitlisted,
         members: {
           create: {
             userId: userCreateRequest.id,