fix(tmp): open customize on profile menu settings (#4435)

Author: omBratteng

packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx

@@ -4,14 +4,19 @@ import type { ReactElement } from 'react';
 import { ProfileSection } from '../ProfileSection';
 import { CreditCardIcon, InviteIcon, SettingsIcon } from '../../icons';
 import { webappUrl } from '../../../lib/constants';
+import { useLazyModal } from '../../../hooks/useLazyModal';
+import { LazyModal } from '../../modals/common/types';
 
 export const AccountSection = (): ReactElement => {
+  const { openModal } = useLazyModal();
+
   return (
     <ProfileSection
       items={[
         {
           title: 'Settings',
-          href: `${webappUrl}account/profile`,
+          // href: `${webappUrl}account/profile`,
+          onClick: () => openModal({ type: LazyModal.UserSettings }),
           icon: <SettingsIcon />,
         },
         {

packages/shared/src/components/profile/ProfileButton.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { QueryClient } from '@tanstack/react-query';
 import type { RenderResult } from '@testing-library/react';
-import { waitFor, render, screen } from '@testing-library/react';
+import { waitFor, render, screen, act } from '@testing-library/react';
 import ProfileButton from './ProfileButton';
 import defaultUser from '../../../__tests__/fixture/loggedUser';
 import { TestBootProvider } from '../../../__tests__/helpers/boot';
@@ -32,21 +32,27 @@ const renderComponent = (): RenderResult => {
   );
 };
 
-it('account details should link to account profile page', async () => {
+it('should show settings option that opens modal', async () => {
   renderComponent();
 
   const profileBtn = await screen.findByLabelText('Profile settings');
-  profileBtn.click();
-
-  const accountLink = await screen.findByRole('link', { name: 'Settings' });
-  expect(accountLink).toHaveAttribute('href', '/account/profile');
+  await act(async () => {
+    profileBtn.click();
+  });
+
+  const settingsButton = await screen.findByRole('button', {
+    name: 'Settings',
+  });
+  expect(settingsButton).toBeInTheDocument();
 });
 
 it('should click the logout button and logout', async () => {
   renderComponent();
 
   const profileBtn = await screen.findByLabelText('Profile settings');
-  profileBtn.click();
+  await act(async () => {
+    profileBtn.click();
+  });
 
   const logoutBtn = await screen.findByText('Logout');
   logoutBtn.click();