feat(ui): Add phone, delete phone dialogs and set primary action

.changeset/heavy-pears-smile.md

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

packages/swingset/src/lib/registry.ts

@@ -188,6 +188,7 @@ import {
   Overlay as UserProfileOverlay,
 } from '../stories/user-profile.stories';
 import {
+  AddPhoneFails as UserProfileAccountSectionAddPhoneFails,
   Default as UserProfileAccountSectionDefault,
   meta as userProfileAccountSectionMeta,
   MultipleAccounts as UserProfileAccountSectionMultipleAccounts,
@@ -467,6 +468,7 @@ const userProfileAccountSectionModule: StoryModule = {
   meta: userProfileAccountSectionMeta,
   Default: UserProfileAccountSectionDefault,
   MultipleAccounts: UserProfileAccountSectionMultipleAccounts,
+  AddPhoneFails: UserProfileAccountSectionAddPhoneFails,
 };
 const userProfileProfilePanelModule: StoryModule = {
   meta: userProfileProfilePanelMeta,

packages/swingset/src/stories/fixtures/user-profile-add-phone.ts

@@ -0,0 +1,28 @@
+import type { UserProfileAccountSectionViewProps } from '@clerk/ui/mosaic/user-profile/user-profile-account-section/user-profile-account-section.view';
+import type { UserProfileAddPhoneViewProps } from '@clerk/ui/mosaic/user-profile/user-profile-add-phone.view';
+
+interface FixtureOptions {
+  failAt?: UserProfileAddPhoneViewProps['step'];
+  onVerified?: (phoneNumber: string) => void;
+}
+
+export function createUserProfileAddPhoneFixture({ failAt, onVerified }: FixtureOptions = {}): Pick<
+  UserProfileAccountSectionViewProps,
+  'onSendPhoneCode' | 'onVerifyPhoneCode'
+> {
+  return {
+    onSendPhoneCode: async () => {
+      await new Promise(resolve => setTimeout(resolve, 700));
+      if (failAt === 'phone') {
+        throw new Error('We couldn’t send a code. Try again.');
+      }
+    },
+    onVerifyPhoneCode: async (phoneNumber, code) => {
+      await new Promise(resolve => setTimeout(resolve, 700));
+      if (failAt === 'verify' || code === '000000') {
+        throw new Error('That code is incorrect. Try again.');
+      }
+      onVerified?.(phoneNumber);
+    },
+  };
+}

packages/swingset/src/stories/fixtures/user-profile.ts

@@ -13,6 +13,7 @@ import type {
 import { useMemo, useState } from 'react';
 
 import { usePreviewImage } from './use-preview-image';
+import { createUserProfileAddPhoneFixture } from './user-profile-add-phone';
 import { useUserProfileEditNameFixture } from './user-profile-edit-name';
 
 export interface UserProfileFixtureOptions {
@@ -119,15 +120,9 @@ export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions
       emails,
       phones,
       onAddEmail: onAddEmail ?? (() => addEmail(`preston+${emails.length}@clerk.dev`)),
-      onAddPhone: () =>
-        setPhones(current => [
-          ...current,
-          {
-            id: `phone_${Date.now()}`,
-            value: `+1 801-555-${String(current.length + 1).padStart(4, '0')}`,
-            isVerified: true,
-          },
-        ]),
+      ...createUserProfileAddPhoneFixture({
+        onVerified: value => setPhones(current => [...current, { id: `phone_${Date.now()}`, value, isVerified: true }]),
+      }),
       onDeleteAccount: () => Promise.resolve(),
       onManageEmail: () => undefined,
       onManagePhone: () => undefined,

packages/swingset/src/stories/user-profile-account-section.mdx

@@ -5,6 +5,9 @@ import * as Stories from './user-profile-account-section.stories';
 Account details, profile image, email addresses, and phone numbers composed with `Section`. The
 `allowMultipleAccounts` flag controls whether contact methods appear inline or in dedicated sections.
 
+In the multiple-account example, Add phone opens the flow using local state and simulated requests.
+Entering or pasting six digits submits automatically. Use `000000` to see an incorrect-code error.
+
 ## Single account
 
 <Story
@@ -29,3 +32,9 @@ Account details, profile image, email addresses, and phone numbers composed with
     { name: 'Icon', href: '/components/icon', layer: 'Components' },
   ]}
 />
+
+## Add phone failure
+
+Add a phone number to see a failed send request while keeping the entered number.
+
+<Story name='AddPhoneFails' storyModule={Stories} />

packages/swingset/src/stories/user-profile-account-section.stories.tsx

@@ -4,11 +4,13 @@ import type {
   UserProfilePhone,
 } from '@clerk/ui/mosaic/user-profile/user-profile-account-section/user-profile-account-section.view';
 import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-account-section/user-profile-account-section.view';
+import type { UserProfileAddPhoneViewProps } from '@clerk/ui/mosaic/user-profile/user-profile-add-phone.view';
 import { useState } from 'react';
 
 import type { StoryMeta } from '@/lib/types';
 
 import { usePreviewImage } from './fixtures/use-preview-image';
+import { createUserProfileAddPhoneFixture } from './fixtures/user-profile-add-phone';
 import { useUserProfileEditNameFixture } from './fixtures/user-profile-edit-name';
 
 export { default as __source } from './user-profile-account-section.stories?raw';
@@ -24,9 +26,11 @@ export const meta: StoryMeta = {
 
 function AccountSection({
   allowMultipleAccounts,
+  failAt,
   failWith,
 }: {
   allowMultipleAccounts: boolean;
+  failAt?: UserProfileAddPhoneViewProps['step'];
   failWith?: UserProfileFormError;
 }) {
   const editName = useUserProfileEditNameFixture({ failWith });
@@ -40,8 +44,13 @@ function AccountSection({
   );
   const [phones, setPhones] = useState<UserProfilePhone[]>([
     { id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true },
+    ...(allowMultipleAccounts ? [{ id: 'phone_2', value: '+18015550100', isVerified: true }] : []),
   ]);
   const { imageUrl, showFile, clearImage } = usePreviewImage('https://avatars.githubusercontent.com/u/51144033?v=4');
+  const addPhone = createUserProfileAddPhoneFixture({
+    failAt,
+    onVerified: value => setPhones(current => [...current, { id: `phone_${Date.now()}`, value, isVerified: true }]),
+  });
 
   return (
     <UserProfileAccountSectionView
@@ -58,22 +67,14 @@ function AccountSection({
           { id: `email_${Date.now()}`, value: `item${current.length + 1}@clerk.dev`, isVerified: true },
         ])
       }
-      onAddPhone={() =>
-        setPhones(current => [
-          ...current,
-          {
-            id: `phone_${Date.now()}`,
-            value: `+1 801-555-${String(current.length + 1).padStart(4, '0')}`,
-            isVerified: true,
-          },
-        ])
-      }
+      {...addPhone}
+      onProfilePictureChange={showFile}
+      onRemoveProfilePicture={clearImage}
       onManageEmail={() => undefined}
       onManagePhone={() => undefined}
-      onProfilePictureChange={showFile}
       onRemoveEmail={id => setEmails(current => current.filter(email => email.id !== id))}
       onRemovePhone={id => setPhones(current => current.filter(phone => phone.id !== id))}
-      onRemoveProfilePicture={clearImage}
+      onSetPrimaryPhone={id => setPhones(current => current.map(phone => ({ ...phone, isDefault: phone.id === id })))}
       onUsernameChange={() => undefined}
     />
   );
@@ -87,6 +88,15 @@ export function MultipleAccounts() {
   return <AccountSection allowMultipleAccounts />;
 }
 
+export function AddPhoneFails() {
+  return (
+    <AccountSection
+      allowMultipleAccounts
+      failAt='phone'
+    />
+  );
+}
+
 /** Every save is rejected, so the dialog shows both halves of a failure at once. */
 export function EditNameFails() {
   return (

packages/swingset/src/stories/user-profile-profile-panel.stories.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import type { StoryMeta } from '@/lib/types';
 
 import { usePreviewImage } from './fixtures/use-preview-image';
+import { createUserProfileAddPhoneFixture } from './fixtures/user-profile-add-phone';
 import { useUserProfileEditNameFixture } from './fixtures/user-profile-edit-name';
 
 const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
@@ -73,16 +74,9 @@ export function Default(_args: Record<string, unknown>) {
           { id: `email_${Date.now()}`, value: `item${current.length + 1}@clerk.dev`, isVerified: true },
         ])
       }
-      onAddPhone={() =>
-        setPhones(current => [
-          ...current,
-          {
-            id: `phone_${Date.now()}`,
-            value: `+1 801-555-${String(current.length + 1).padStart(4, '0')}`,
-            isVerified: true,
-          },
-        ])
-      }
+      {...createUserProfileAddPhoneFixture({
+        onVerified: value => setPhones(current => [...current, { id: `phone_${Date.now()}`, value, isVerified: true }]),
+      })}
       onConnectAccount={() => undefined}
       onDeleteAccount={() => Promise.resolve()}
       onManageEmail={() => undefined}
@@ -96,7 +90,7 @@ export function Default(_args: Record<string, unknown>) {
       onRemoveWeb3Wallet={() => undefined}
       onSetPrimaryWeb3Wallet={() => undefined}
       onSetPrimaryEmail={() => undefined}
-      onSetPrimaryPhone={() => undefined}
+      onSetPrimaryPhone={id => setPhones(current => current.map(phone => ({ ...phone, isDefault: phone.id === id })))}
       onVerifyEmail={() => undefined}
       onVerifyPhone={() => undefined}
       onUsernameChange={() => undefined}

packages/ui/src/mosaic/user-profile/__tests__/user-profile-add-phone.integration.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../MosaicProvider';
+import { UserProfileProfilePanelView } from '../user-profile-profile-panel.view';
+
+describe('profile add phone', () => {
+  it.each([false, true])(
+    'owns the dialog and returns focus with multiple accounts = %s',
+    async allowMultipleAccounts => {
+      const user = userEvent.setup();
+      const onSend = vi.fn(() => Promise.resolve());
+      const onVerify = vi.fn(() => Promise.resolve());
+      render(
+        <MosaicProvider>
+          <UserProfileProfilePanelView
+            allowMultipleAccounts={allowMultipleAccounts}
+            name='Test'
+            username='test'
+            emails={[]}
+            phones={[]}
+            onSendPhoneCode={onSend}
+            onVerifyPhoneCode={onVerify}
+          />
+        </MosaicProvider>,
+      );
+      const trigger = screen.getByRole('button', { name: 'Add phone number' });
+      await user.click(trigger);
+      expect(screen.getByRole('dialog', { name: 'Add phone number' })).toBeInTheDocument();
+      await user.type(screen.getByRole('textbox', { name: 'Phone' }), '8015550100');
+      await user.click(screen.getByRole('button', { name: 'Send code' }));
+      await waitFor(() => expect(screen.getByRole('textbox', { name: 'Verification code' })).toHaveFocus());
+      await user.keyboard('123456');
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+      expect(onSend).toHaveBeenCalledExactlyOnceWith('+18015550100');
+      expect(onVerify).toHaveBeenCalledExactlyOnceWith('+18015550100', '123456');
+      await waitFor(() => expect(trigger).toHaveFocus());
+    },
+  );
+});