fix(mosaic): hold phone entry while sending the first code

Author: austincalvelage

.changeset/quiet-phones-wait.md

@@ -2,4 +2,4 @@
 '@clerk/mosaic': patch
 ---
 
-Disable Cancel while verifying or resending a phone verification code in `UserProfile`.
+Keep the phone entry screen pending until the first verification code is sent in `UserProfile`. Disable Cancel while verifying or resending a phone verification code.

packages/mosaic/src/features/user-profile/user-profile-phone-section/__tests__/user-profile-phone-section.feature.test.tsx

@@ -125,6 +125,55 @@ describe('the user profile phone section', () => {
     expect(screen.getByText('+49')).toBeInTheDocument();
   });
 
+  it('holds the phone entry step until the first code is sent', async () => {
+    const { actor, fapi } = await renderSection();
+    const prepare = holdRequests('post', '/v1/me/phone_numbers/:id/prepare_verification');
+
+    try {
+      await addPhone(actor, '8015550100');
+      await waitFor(() => expect(prepare.requests).toHaveLength(1));
+      expect(screen.getByRole('dialog', { name: 'Add phone number' })).toBeVisible();
+      expect(screen.getByRole('textbox', { name: 'Phone' })).toHaveAttribute('aria-disabled', 'true');
+      expect(screen.getByRole('button', { name: 'Send code' })).toHaveAttribute('aria-busy', 'true');
+      expect(screen.getByRole('button', { name: 'Send code' })).toHaveAttribute('aria-disabled', 'true');
+      expect(screen.queryByRole('textbox', { name: 'Verification code' })).toBeNull();
+      await actor.keyboard('{Escape}{Enter}');
+      expect(screen.getByRole('dialog', { name: 'Add phone number' })).toBeVisible();
+      expect(prepare.requests).toHaveLength(1);
+      expect(fapi.client.sessions[0]?.user.phone_numbers).toHaveLength(1);
+    } finally {
+      prepare.release();
+    }
+
+    await enterCode(actor, VERIFICATION_CODE);
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    expect(listed()).toEqual([HOME_LABEL]);
+  });
+
+  it('recovers from a failed first code without creating the phone again', async () => {
+    const { actor, fapi } = await renderSection();
+    const prepare = holdRequests('post', '/v1/me/phone_numbers/:id/prepare_verification');
+
+    try {
+      await addPhone(actor, '8015550100');
+      await waitFor(() => expect(prepare.requests).toHaveLength(1));
+      expect(screen.getByRole('dialog', { name: 'Add phone number' })).toBeVisible();
+      prepare.fail('phone_number_invalid', 'Unable to send a code.');
+    } finally {
+      prepare.release();
+    }
+
+    expect(await screen.findByText('Unable to send a code.')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeEnabled();
+    const retryFapi = serveFapi(fapi);
+    await actor.click(screen.getByRole('button', { name: 'Resend' }));
+    expect(await screen.findByRole('button', { name: /Resend \(\d+\)/ })).toBeDisabled();
+    await enterCode(actor, VERIFICATION_CODE);
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    expect(retryFapi.client.sessions[0]?.user.phone_numbers).toHaveLength(1);
+    expect(listed()).toEqual([HOME_LABEL]);
+  });
+
   it('keeps the dialog open and says the code was wrong', async () => {
     const { actor } = await renderSection();
 

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

@@ -54,7 +54,7 @@ const CODE_RESEND_SECONDS = 30;
 const tick = { actions: assign(context => ({ resendSeconds: Math.max(0, context.resendSeconds - 1) })) };
 const fail = assign<ErrorInvokeEvent>((_, event) => ({ error: toFormError(event.error) }));
 const start = {
-  target: 'sending',
+  target: 'sendingFirstCode',
   actions: assign<Extract<Event, { type: 'START' }>>((_, event) => ({
     verifyingId: event.id,
     phoneNumber: event.phoneNumber,
@@ -95,6 +95,7 @@ const machine = createMachine({
       on: { CANCEL: 'idle', START: start },
     },
     preparing: sendCode,
+    sendingFirstCode: sendCode,
     sending: sendCode,
     verify: {
       on: {
@@ -148,9 +149,10 @@ export function useUserProfileAddPhoneController({
   }, [open, resendSeconds, send]);
 
   const isReverifying = phoneForm.isSubmitting && Boolean(reverification?.visible);
-  const step = isReverifying ? 'reverify' : state === 'phone' ? 'phone' : 'verify';
-  const form = state === 'phone' ? phoneForm : codeForm;
-  const formError = state === 'phone' ? phoneForm.fields.phoneNumber.feedback : codeForm.fields.code.feedback;
+  const isPhoneStep = state === 'phone' || state === 'sendingFirstCode';
+  const step = isReverifying ? 'reverify' : isPhoneStep ? 'phone' : 'verify';
+  const form = isPhoneStep ? phoneForm : codeForm;
+  const formError = isPhoneStep ? phoneForm.fields.phoneNumber.feedback : codeForm.fields.code.feedback;
   const machineError = error?.global ? errorText(error.global) : undefined;
 
   return {
@@ -160,10 +162,10 @@ export function useUserProfileAddPhoneController({
     open,
     step,
     reverification,
-    phoneNumber: state === 'phone' ? phoneForm.values.phoneNumber : snapshot.context.phoneNumber,
+    phoneNumber: isPhoneStep ? phoneForm.values.phoneNumber : snapshot.context.phoneNumber,
     code: codeForm.values.code,
     errorMessage: formError?.message ?? form.error ?? machineError,
-    isPending: form.isSubmitting,
+    isPending: form.isSubmitting || state === 'sendingFirstCode',
     onOpenChange: open => {
       if (form.isSubmitting) {
         if (open || state !== 'phone' || !reverification?.onCancel) {