Skip to content

Commit cd9eb4c

Browse files
davidleomaydavidleomay
authored
feat: moved phone/mail edit to account (#987)
1 parent 7b6244a commit cd9eb4c

5 files changed

Lines changed: 22 additions & 88 deletions

File tree

‎e2e/user-flows.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ test.describe('Account & Settings', () => {
140140
});
141141

142142
test('should load mail settings page', async ({ page }) => {
143-
await page.goto(`/settings/mail?session=${token}`);
143+
await page.goto(`/account/mail?session=${token}`);
144144
await page.waitForLoadState('networkidle');
145145
await expect(page.locator('body')).toBeVisible();
146146
});

‎src/App.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,12 @@ export const Routes = [
9494
element: withSuspense(<AccountScreen />),
9595
},
9696
{
97-
path: 'settings',
98-
element: withSuspense(<SettingsScreen />),
97+
path: 'account/mail',
98+
element: withSuspense(<EditMailScreen />),
9999
},
100100
{
101-
path: 'settings/mail',
102-
element: withSuspense(<EditMailScreen />),
101+
path: 'settings',
102+
element: withSuspense(<SettingsScreen />),
103103
},
104104
{
105105
path: 'login',

‎src/screens/account.screen.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,20 @@ export default function AccountScreen(): JSX.Element {
338338
minWidth={false}
339339
>
340340
{profile.mail && (
341-
<StyledDataTableRow label={translate('screens/home', 'Email')}>{profile.mail}</StyledDataTableRow>
341+
<StyledDataTableRow label={translate('screens/home', 'Email')}>
342+
<div className="flex items-center gap-2">
343+
{profile.mail}
344+
<StyledIconButton icon={IconVariant.EDIT} onClick={() => navigate('/account/mail', { setRedirect: true })} inline />
345+
</div>
346+
</StyledDataTableRow>
347+
)}
348+
{profile.phone && (
349+
<StyledDataTableRow label={translate('screens/kyc', 'Phone number')}>
350+
<div className="flex items-center gap-2">
351+
{profile.phone}
352+
<StyledIconButton icon={IconVariant.EDIT} onClick={() => setShowPhoneModal(true)} inline />
353+
</div>
354+
</StyledDataTableRow>
342355
)}
343356
{(profile.firstName || profile.lastName) && (
344357
<StyledDataTableRow label={translate('screens/home', 'Name')}>
@@ -350,14 +363,6 @@ export default function AccountScreen(): JSX.Element {
350363
{formatAddress(profile.address)}
351364
</StyledDataTableRow>
352365
)}
353-
{profile.phone && (
354-
<StyledDataTableRow label={translate('screens/home', 'Phone')}>
355-
<div className="flex items-center gap-2">
356-
{profile.phone}
357-
<StyledIconButton icon={IconVariant.EDIT} onClick={() => setShowPhoneModal(true)} inline />
358-
</div>
359-
</StyledDataTableRow>
360-
)}
361366
{profile.organizationName && (
362367
<StyledDataTableRow label={translate('screens/home', 'Organization')}>
363368
{profile.organizationName}

‎src/screens/edit-mail.screen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export default function EditMailScreen(): JSX.Element {
6767
setIsSubmitting(true);
6868

6969
verifyMail(data.token)
70-
.then(() => navigate('/settings'))
70+
.then(() => navigate('/account'))
7171
.catch((e: ApiError) =>
7272
e.statusCode === 403
7373
? setTokenInvalid(true)
@@ -112,7 +112,7 @@ export default function EditMailScreen(): JSX.Element {
112112
prefill={user?.mail}
113113
placeholder={translate('screens/kyc', 'Email address')}
114114
validation={Validations.Mail}
115-
onCancel={() => navigate('/settings')}
115+
onCancel={() => navigate('/account')}
116116
onEdit={onSubmit}
117117
/>
118118
) : (

‎src/screens/settings.screen.tsx‎

Lines changed: 1 addition & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,12 @@ import {
77
UserAddress,
88
useUserContext,
99
Utils,
10-
Validations,
1110
} from '@dfx.swiss/react';
1211
import {
13-
AlignContent,
14-
DfxIcon,
1512
Form,
16-
IconColor,
17-
IconSize,
18-
IconVariant,
1913
SpinnerSize,
2014
StyledButton,
2115
StyledButtonWidth,
22-
StyledDataTable,
23-
StyledDataTableRow,
2416
StyledDropdown,
2517
StyledLoadingSpinner,
2618
StyledVerticalStack,
@@ -54,8 +46,6 @@ enum OverlayType {
5446
DELETE_ADDRESS,
5547
DELETE_ACCOUNT,
5648
RENAME_ADDRESS,
57-
EDIT_EMAIL,
58-
EDIT_PHONE,
5949
EDIT_BANK_ACCOUNT,
6050
ADD_BANK_ACCOUNT,
6151
DELETE_BANK_ACCOUNT,
@@ -66,8 +56,6 @@ const OverlayHeader: { [key in OverlayType]: string } = {
6656
[OverlayType.DELETE_ADDRESS]: 'Delete address',
6757
[OverlayType.DELETE_ACCOUNT]: 'Delete account',
6858
[OverlayType.RENAME_ADDRESS]: 'Rename address',
69-
[OverlayType.EDIT_EMAIL]: 'Edit email',
70-
[OverlayType.EDIT_PHONE]: 'Edit phone number',
7159
[OverlayType.EDIT_BANK_ACCOUNT]: 'Edit bank account',
7260
[OverlayType.ADD_BANK_ACCOUNT]: 'Add bank account',
7361
[OverlayType.DELETE_BANK_ACCOUNT]: 'Delete bank account',
@@ -115,10 +103,6 @@ export default function SettingsScreen(): JSX.Element {
115103
}
116104
}, [selectedCurrency]);
117105

118-
useEffect(() => {
119-
if (overlayType === OverlayType.EDIT_EMAIL) navigate('/settings/mail', { setRedirect: true });
120-
}, [overlayType]);
121-
122106
function onCloseOverlay(): void {
123107
setOverlayType(OverlayType.NONE);
124108
setOverlayData(undefined);
@@ -167,46 +151,6 @@ export default function SettingsScreen(): JSX.Element {
167151
</Form>
168152
</StyledVerticalStack>
169153

170-
{!!(user?.mail || user?.phone) && (
171-
<StyledVerticalStack full gap={2}>
172-
<h1 className="text-dfxGray-800 font-semibold text-base flex justify-center">
173-
{translate('screens/kyc', 'Personal Information')}
174-
</h1>
175-
<StyledDataTable alignContent={AlignContent.BETWEEN}>
176-
{user?.mail && (
177-
<StyledDataTableRow>
178-
<div className="flex flex-col items-start gap-1">
179-
<div className="flex flex-row gap-2 font-semibold">
180-
{translate('screens/kyc', 'Email address')}
181-
</div>
182-
<div className="text-xs text-dfxGray-700">{user?.mail}</div>
183-
</div>
184-
<div className="relative flex items-center">
185-
<button onClick={() => setOverlayType(OverlayType.EDIT_EMAIL)}>
186-
<DfxIcon icon={IconVariant.EDIT} size={IconSize.SM} color={IconColor.BLACK} />
187-
</button>
188-
</div>
189-
</StyledDataTableRow>
190-
)}
191-
{user?.phone && (
192-
<StyledDataTableRow>
193-
<div className="flex flex-col items-start gap-1">
194-
<div className="flex flex-row gap-2 font-semibold">
195-
{translate('screens/kyc', 'Phone number')}
196-
</div>
197-
<div className="text-xs text-dfxGray-700">{user?.phone}</div>
198-
</div>
199-
<div className="relative flex items-center">
200-
<button onClick={() => setOverlayType(OverlayType.EDIT_PHONE)}>
201-
<DfxIcon icon={IconVariant.EDIT} size={IconSize.SM} color={IconColor.BLACK} />
202-
</button>
203-
</div>
204-
</StyledDataTableRow>
205-
)}
206-
</StyledDataTable>
207-
</StyledVerticalStack>
208-
)}
209-
210154
{isLoadingBankAccounts ? (
211155
<div className="flex mt-4 w-full justify-center items-center">
212156
<StyledLoadingSpinner size={SpinnerSize.LG} />
@@ -339,7 +283,7 @@ function SettingsOverlay({ type, data, onClose }: SettingsOverlayProps): JSX.Ele
339283
const { width } = useWindowContext();
340284
const { translate } = useSettingsContext();
341285
const { setWallet } = useWalletContext();
342-
const { deleteAddress, deleteAccount, renameAddress, updatePhone } = useUserContext();
286+
const { deleteAddress, deleteAccount, renameAddress } = useUserContext();
343287
const { updateAccount } = useBankAccountContext();
344288

345289
switch (type) {
@@ -401,21 +345,6 @@ function SettingsOverlay({ type, data, onClose }: SettingsOverlayProps): JSX.Ele
401345
}}
402346
/>
403347
);
404-
case OverlayType.EDIT_PHONE:
405-
return (
406-
<EditOverlay
407-
label={translate('screens/kyc', 'Phone number')}
408-
autocomplete="phone"
409-
prefill={user?.phone}
410-
placeholder={translate('screens/kyc', 'Phone number')}
411-
validation={Validations.Phone}
412-
onCancel={onClose}
413-
onEdit={async (result) => {
414-
await updatePhone(result);
415-
onClose();
416-
}}
417-
/>
418-
);
419348
case OverlayType.EDIT_BANK_ACCOUNT:
420349
return <EditBankAccount bankAccount={data as BankAccount} onClose={onClose} />;
421350
case OverlayType.ADD_BANK_ACCOUNT:

0 commit comments

Comments
 (0)