refactor(mosaic): require a controller for email reverification

Author: austincalvelage

packages/mosaic/src/features/user-profile/user-profile-email-section/__tests__/user-profile-add-email.dialog.test.tsx

@@ -7,7 +7,7 @@ import { MosaicProvider } from '../../../../mosaic-provider';
 import type { UserProfileAddEmailDialogProps } from '../user-profile-add-email.dialog';
 import { UserProfileAddEmailDialog } from '../user-profile-add-email.dialog';
 
-function renderView(overrides: Partial<UserProfileAddEmailDialogProps> = {}) {
+function renderView(overrides: Partial<Exclude<UserProfileAddEmailDialogProps, { step: 'reverify' }>> = {}) {
   const props: UserProfileAddEmailDialogProps = {
     open: true,
     onOpenChange: vi.fn(),

packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.controller.ts

@@ -26,11 +26,11 @@ export interface UserProfileAddEmailControllerOptions {
   reverification?: ReverificationController;
 }
 
-export interface UserProfileAddEmailController extends UserProfileAddEmailDialogProps {
+export type UserProfileAddEmailController = UserProfileAddEmailDialogProps & {
   handle: DialogHandle<unknown>;
   verifyingId: string | undefined;
   onVerifyEmail: (email: Pick<UserProfileEmail, 'id' | 'value'>, verifier: UserProfileEmailVerifier) => void;
-}
+};
 
 interface Context {
   verifyingId: string | undefined;
@@ -202,8 +202,7 @@ export function useUserProfileAddEmailController({
     return () => clearTimeout(timer);
   }, [open, resendSeconds, send]);
 
-  const isReverifying = emailForm.isSubmitting && Boolean(reverification?.visible);
-  const step = isReverifying ? 'reverify' : toStep(state, verification);
+  const isReverifying = emailForm.isSubmitting && reverification?.visible;
   const form = state === 'email' ? emailForm : codeForm;
   const formError = state === 'email' ? emailForm.fields.emailAddress.feedback : codeForm.fields.code.feedback;
   const machineError = error?.global ? errorText(error.global) : undefined;
@@ -213,8 +212,9 @@ export function useUserProfileAddEmailController({
     resendSeconds,
     isResending: state === 'sending',
     open,
-    step,
-    reverification,
+    ...(isReverifying
+      ? { step: 'reverify' as const, reverification }
+      : { step: toStep(state, verification), reverification }),
     emailAddress: state === 'email' ? emailForm.values.emailAddress : snapshot.context.emailAddress,
     canSubmitEmail: emailForm.canSubmit || emailForm.isSubmitting,
     code: codeForm.values.code,
@@ -266,7 +266,7 @@ export function useUserProfileAddEmailController({
 function toStep(
   state: string,
   verification: UserProfileEmailVerification | undefined,
-): UserProfileAddEmailDialogProps['step'] {
+): Exclude<UserProfileAddEmailDialogProps['step'], 'reverify'> {
   if (state === 'email') {
     return 'email';
   }

packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.dialog.test-d.ts

@@ -0,0 +1,27 @@
+import { describe, expectTypeOf, test } from 'vitest';
+
+import type { ReverificationController } from '../../reverification';
+import type { UserProfileAddEmailDialogProps } from './user-profile-add-email.dialog';
+
+type BaseProps = Omit<UserProfileAddEmailDialogProps, 'step' | 'reverification'>;
+
+describe('UserProfileAddEmailDialogProps', () => {
+  test('requires a controller for the reverification step', () => {
+    expectTypeOf<BaseProps & { step: 'reverify' }>().not.toExtend<UserProfileAddEmailDialogProps>();
+    expectTypeOf<
+      BaseProps & { step: 'reverify'; reverification: undefined }
+    >().not.toExtend<UserProfileAddEmailDialogProps>();
+  });
+
+  test('accepts a controller for the reverification step', () => {
+    expectTypeOf<
+      BaseProps & { step: 'reverify'; reverification: ReverificationController }
+    >().toExtend<UserProfileAddEmailDialogProps>();
+  });
+
+  test('allows the other steps without a controller', () => {
+    expectTypeOf<
+      BaseProps & { step: 'email' | 'verify' | 'link' | 'sso' }
+    >().toExtend<UserProfileAddEmailDialogProps>();
+  });
+});

packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.dialog.tsx

@@ -25,13 +25,11 @@ const styles = stylex.create({
   },
 });
 
-export interface UserProfileAddEmailDialogProps {
+export type UserProfileAddEmailDialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   handle?: DialogHandle<unknown>;
   finalFocus?: DialogFocusTarget;
-  step: 'email' | 'reverify' | 'verify' | 'link' | 'sso';
-  reverification?: ReverificationController;
   emailAddress: string;
   onEmailAddressChange: (value: string) => void;
   canSubmitEmail?: boolean;
@@ -44,7 +42,10 @@ export interface UserProfileAddEmailDialogProps {
   errorMessage?: string;
   isResending?: boolean;
   resendSeconds?: number;
-}
+} & (
+  | { step: 'reverify'; reverification: ReverificationController }
+  | { step: 'email' | 'verify' | 'link' | 'sso'; reverification?: ReverificationController }
+);
 
 export function UserProfileAddEmailDialog(props: UserProfileAddEmailDialogProps) {
   const emailRef = useRef<HTMLInputElement>(null);
@@ -85,7 +86,7 @@ export function UserProfileAddEmailDialog(props: UserProfileAddEmailDialogProps)
                   />
                 </Flow.Step>
                 <Flow.Step ids={['reverify']}>
-                  {current.reverification ? (
+                  {current.step === 'reverify' ? (
                     <ReverifyStep
                       controller={current.reverification}
                       onClose={() => current.onOpenChange(false)}