refactor(mosaic): split user profile account section into profile, username, email, phone

.changeset/mosaic-user-profile-split-account-section.md

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

packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts.feature.test.tsx

@@ -72,10 +72,6 @@ async function renderSection(accounts = [google], overrides: FakeFapiSeed = {})
   const titleRef = createRef<HTMLDivElement>();
   const view = await renderWithClerk(
     <UserProfileProfilePanelView
-      name='Jane Doe'
-      username=''
-      emails={[]}
-      phones={[]}
       titleRef={titleRef}
       connectedAccountsSlot={<UserProfileConnectedAccountsSection fallbackFocus={() => titleRef.current} />}
     />,

packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-list-row.view.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { UserProfileContactListRowView } from '../user-profile-account-section/user-profile-contact-list-row.view';
+import { UserProfileContactListRowView } from '../user-profile-contact-list-row.view';
 
 describe('UserProfileContactListRowView', () => {
   it.each(['email', 'phone'] as const)('hides the menu when no %s action applies', kind => {

packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-removal-focus.test.tsx

@@ -4,8 +4,8 @@ import { useState } from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { MosaicProvider } from '../../../mosaic-provider';
-import { UserProfileEmailRowView } from '../user-profile-account-section/user-profile-email-row.view';
-import { UserProfilePhoneRowView } from '../user-profile-account-section/user-profile-phone-row.view';
+import { UserProfileEmailSectionView } from '../user-profile-email-section/user-profile-email-section.view';
+import { UserProfilePhoneSectionView } from '../user-profile-phone-section/user-profile-phone-section.view';
 
 describe('contact removal focus', () => {
   it.each(['email', 'phone'] as const)('focuses the remaining %s menu and the empty group without Add', async kind => {
@@ -21,14 +21,12 @@ describe('contact removal focus', () => {
       return (
         <MosaicProvider>
           {kind === 'email' ? (
-            <UserProfileEmailRowView
-              allowMultipleAccounts
+            <UserProfileEmailSectionView
               emails={items}
               onRemoveEmail={remove}
             />
           ) : (
-            <UserProfilePhoneRowView
-              allowMultipleAccounts
+            <UserProfilePhoneSectionView
               phones={items}
               onRemovePhone={remove}
             />

packages/mosaic/src/features/user-profile/__tests__/user-profile-account-section.utils.test.ts → packages/mosaic/src/features/user-profile/__tests__/user-profile-contact.utils.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { toContacts } from '../user-profile-account-section/user-profile-account-section.utils';
+import { toContacts } from '../user-profile-contact.utils';
 
 type Contact = { id: string; verification: { status: 'verified' | 'unverified' | null; expireAt: Date | null } };
 

packages/mosaic/src/features/user-profile/__tests__/user-profile-enterprise-accounts-host.feature.test.tsx

@@ -12,10 +12,6 @@ it('places the connected enterprise section before Web3 wallets in the profile h
   serveFapi(enterpriseAccountSeed());
   await renderWithClerk(
     <UserProfileProfilePanelView
-      name='Jane Doe'
-      username=''
-      emails={[]}
-      phones={[]}
       enterpriseAccountsSlot={<UserProfileEnterpriseAccountsSection />}
       web3WalletsSlot={
         <UserProfileWeb3WalletsSectionView

packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx

@@ -8,7 +8,7 @@ import type { UserProfileViewProps } from '../user-profile.view';
 import { UserProfileView } from '../user-profile.view';
 
 const pages: UserProfileViewProps['pages'] = {
-  account: { name: 'Preston Booth', username: 'prestonxyz' },
+  account: {},
   security: {},
   billing: {
     subscription: {