refactor(mosaic): apply review fixes to Waitlist (#10506)

Author: alexcarpenter

.changeset/mosaic-waitlist-review-fixes.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/features/waitlist/waitlist.controller.ts

@@ -1,8 +1,8 @@
-import type { UseFormResult } from '../../components/form';
 import { useForm } from '../../components/form';
 import { setup } from '../../machine/setup';
 import { useMachine } from '../../machine/use-machine';
-import type { WaitlistModel, WaitlistStep, WaitlistValues } from './waitlist.types';
+import type { WaitlistModel } from './waitlist.types';
+import type { WaitlistViewProps } from './waitlist.view';
 
 export const WAITLIST_REDIRECT_DELAY_MS = 2000;
 
@@ -25,27 +25,17 @@ const waitlistMachine = createMachine({
     joined: {
       after: {
         [WAITLIST_REDIRECT_DELAY_MS]: {
-          target: 'redirected',
           guard: context => context.onRedirect !== undefined,
           actions: context => context.onRedirect?.(),
         },
       },
     },
-    redirected: { type: 'final' },
   },
 });
 
 export type WaitlistReadyModel = Extract<WaitlistModel, { status: 'ready' }>;
 
-export interface WaitlistController {
-  step: WaitlistStep;
-  form: UseFormResult<WaitlistValues>;
-  renderBranding: boolean;
-  isRedirecting: boolean;
-  onSignIn: () => void;
-}
-
-export function useWaitlistController(model: WaitlistReadyModel): WaitlistController {
+export function useWaitlistController(model: WaitlistReadyModel): WaitlistViewProps {
   const { initialEmailAddress, renderBranding, onJoinWaitlist, onSignIn, onRedirect } = model;
   const [snapshot, send] = useMachine(waitlistMachine, { context: { onRedirect } });
   const form = useForm({

packages/mosaic/src/features/waitlist/waitlist.model.ts

@@ -10,10 +10,6 @@ export type WaitlistModelOptions = Pick<WaitlistProps, 'afterJoinWaitlistUrl' |
 
 const WAITLIST_FIELDS: readonly WaitlistField[] = ['emailAddress'];
 
-function emailAddressFromQuery(): string {
-  return new URLSearchParams(window.location.search).get('email_address') ?? '';
-}
-
 export function useWaitlistModel(options: WaitlistModelOptions = {}): WaitlistModel {
   const clerk = useClerk();
   const environment = useMosaicEnvironment();
@@ -29,7 +25,7 @@ export function useWaitlistModel(options: WaitlistModelOptions = {}): WaitlistMo
 
   return {
     status: 'ready',
-    initialEmailAddress: emailAddressFromQuery(),
+    initialEmailAddress: router.getSearchParams().get('email_address') ?? '',
     renderBranding: displayConfig.branded,
     onJoinWaitlist: emailAddress => save(() => clerk.joinWaitlist({ emailAddress }), WAITLIST_FIELDS),
     onSignIn: () => void router.navigate(clerk.buildUrlWithAuth(signInUrl)),

packages/swingset/src/app/(clerk)/live/live-overview.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useClerk, useUser } from '@clerk/nextjs';
-import type { EnvironmentResource } from '@clerk/shared/types';
+import { useMosaicEnvironment } from '@clerk/mosaic/hooks/use-mosaic-environment';
+import { useUser } from '@clerk/nextjs';
 import { ExternalLinkIcon } from 'lucide-react';
 import Link from 'next/link';
 
@@ -18,11 +18,8 @@ export function LiveOverview({
   dashboardUrl: string | null;
   deployment: { label: string; dashboardUrl: string | null } | null;
 }) {
-  const clerk = useClerk();
   const { isLoaded, isSignedIn, user } = useUser();
-  // The environment resource isn't part of the public Clerk interface; reach through the internal getter.
-  const environment = (clerk as unknown as { __internal_environment?: EnvironmentResource | null })
-    .__internal_environment;
+  const environment = useMosaicEnvironment();
   const applicationName = environment?.displayConfig.applicationName;
 
   return (

packages/swingset/src/app/(clerk)/live/misc/waitlist/page.tsx

@@ -2,9 +2,9 @@
 
 import { Button } from '@clerk/mosaic/components/button';
 import { Waitlist } from '@clerk/mosaic/features/waitlist/waitlist';
+import { useMosaicEnvironment } from '@clerk/mosaic/hooks/use-mosaic-environment';
 import { MosaicProvider } from '@clerk/mosaic/mosaic-provider';
 import { useClerk } from '@clerk/nextjs';
-import type { EnvironmentResource } from '@clerk/shared/types';
 import { useState } from 'react';
 
 import { LivePageHeader } from '../../../live-page-header';
@@ -13,8 +13,7 @@ export default function WaitlistLivePage() {
   const clerk = useClerk();
   const [redirect, setRedirect] = useState(false);
   const [demoKey, setDemoKey] = useState(0);
-  const environment = (clerk as unknown as { __internal_environment?: EnvironmentResource | null })
-    .__internal_environment;
+  const environment = useMosaicEnvironment();
   const signUpMode = environment?.userSettings.signUp.mode;
 
   return (