Ameerul / FEQ-2088 Show the NicknameModal for non-advertisers on Buy/Sell and My ads pages

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -3,9 +3,10 @@ import clsx from 'clsx';
 import { useHistory } from 'react-router-dom';
 import { TAdvertsTableRowRenderer, TCurrency, TExchangeRate } from 'types';
 import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components';
+import { NicknameModal } from '@/components/Modals';
 import { ADVERTISER_URL, BUY_SELL } from '@/constants';
 import { api } from '@/hooks';
-import { useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks';
+import { useIsAdvertiser, useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks';
 import { generateEffectiveRate, getCurrentRoute } from '@/utils';
 import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
 import { useExchangeRates } from '@deriv-com/api-hooks';
@@ -21,6 +22,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
     const history = useHistory();
     const isBuySellPage = getCurrentRoute() === 'buy-sell';
     const isAdvertiserBarred = useIsAdvertiserBarred();
+    const isAdvertiser = useIsAdvertiser();
 
     const { data } = api.advertiser.useGetInfo() || {};
 
@@ -179,7 +181,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
                     <Button
                         className='lg:w-[7.5rem]'
                         disabled={isAdvertiserBarred}
-                        onClick={() => showModal('BuySellForm')}
+                        onClick={() => showModal(isAdvertiser ? 'BuySellForm' : 'NicknameModal')}
                         size={isMobile ? 'md' : 'sm'}
                         textSize={isMobile ? 'md' : 'xs'}
                     >
@@ -194,6 +196,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
                     onRequestClose={hideModal}
                 />
             )}
+            {isModalOpenFor('NicknameModal') && <NicknameModal isModalOpen onRequestClose={hideModal} />}
         </div>
     );
 });

src/components/AppHeader/AppHeader.tsx

@@ -79,12 +79,14 @@ const AppHeader = () => {
             {activeLoginid ? (
                 <Button onClick={logout}>Logout</Button>
             ) : (
-                <a
-                    className='bg-solid-coral-800 text-body-sm text-opacity-white-800 rounded-200 px-800 py-300 font-bold'
-                    href={oauthUrl}
+                <Button
+                    className='w-36'
+                    color='primary-light'
+                    onClick={() => window.open(oauthUrl, '_self')}
+                    variant='ghost'
                 >
-                    <Text>Log in</Text>
-                </a>
+                    <Text weight='bold'>Log in</Text>
+                </Button>
             )}
         </Header>
     );

src/components/AppHeader/__tests__/AppHeader.spec.tsx

@@ -15,12 +15,20 @@ jest.mock('@deriv-com/ui', () => ({
     Button: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => (
         <button onClick={onClick}>{children}</button>
     ),
+    useDevice: jest.fn(() => ({ isDesktop: true })),
 }));
 
 describe('<AppHeader/>', () => {
-    it('should render the header', () => {
+    window.open = jest.fn();
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render the header', async () => {
         render(<AppHeader />);
-        expect(screen.getByRole('link', { name: 'Login' })).toHaveAttribute('href', URLUtils.getOauthURL());
+        await userEvent.click(screen.getByRole('button', { name: 'Log in' }));
+
+        expect(window.open).toHaveBeenCalledWith(URLUtils.getOauthURL(), '_self');
     });
     it('should handle the logout functionality if there is an active login id', async () => {
         mockUseAuthData.mockReturnValue({ activeLoginid: '12345', logout: jest.fn() });

src/components/Modals/ErrorModal/__tests__/ErrorModal.spec.tsx

@@ -20,7 +20,7 @@ describe('ErrorModal', () => {
     });
     it('should call onRequestClose when the close button is clicked', async () => {
         render(<ErrorModal {...mockProps} />);
-        await userEvent.click(screen.getByRole('button', { name: 'Ok' }));
+        await userEvent.click(screen.getByRole('button', { name: 'OK' }));
         expect(mockProps.onRequestClose).toHaveBeenCalledTimes(1);
     });
 });

src/components/Modals/FilterModal/FilterModal.tsx

@@ -114,7 +114,7 @@ const FilterModal = ({
 
     return (
         <Modal ariaHideApp={false} className='filter-modal' isOpen={isModalOpen} onRequestClose={onRequestClose}>
-            <Modal.Header className='border-2' onRequestClose={onRequestClose}>
+            <Modal.Header onRequestClose={onRequestClose}>
                 <PageReturn
                     onClick={() => setShowPaymentMethods(false)}
                     pageTitle={headerText}

src/components/Modals/NicknameModal/NicknameModal.tsx

@@ -5,6 +5,7 @@ import { useHistory } from 'react-router-dom';
 import { BUY_SELL_URL } from '@/constants';
 import { api } from '@/hooks';
 import { useAdvertiserInfoState } from '@/providers/AdvertiserInfoStateProvider';
+import { getCurrentRoute } from '@/utils';
 import { DerivLightIcCashierUserIcon } from '@deriv/quill-icons';
 import { Button, Input, Modal, Text, useDevice } from '@deriv-com/ui';
 import './NicknameModal.scss';
@@ -33,6 +34,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
     const { isMobile } = useDevice();
     const textSize = isMobile ? 'md' : 'sm';
     const debouncedReset = debounce(reset, 3000);
+    const currentRoute = getCurrentRoute();
 
     const onSubmit = () => {
         mutate({ name: getValues('nickname') });
@@ -90,7 +92,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
                         className='border-2 mr-[0.8rem]'
                         color='black'
                         onClick={() => {
-                            history.push(BUY_SELL_URL);
+                            if (currentRoute !== 'my-ads' && currentRoute !== 'advertiser') history.push(BUY_SELL_URL);
                             onRequestClose();
                         }}
                         size='lg'

src/components/Modals/RadioGroupFilterModal/RadioGroupFilterModal.scss

@@ -1,15 +1,7 @@
 .radio-group-filter-modal {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    right: auto;
-    bottom: auto;
-    margin-right: -50%;
-    transform: translate(-50%, -50%);
     border-radius: 8px;
-    background: #fff;
     width: 32.8rem;
-    box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
+    height: fit-content;
 
     &__text {
         margin: 2.4rem 0;

src/components/Modals/RadioGroupFilterModal/RadioGroupFilterModal.tsx

@@ -1,6 +1,5 @@
-import Modal from 'react-modal';
 import { RadioGroup } from '@/components';
-import { customStyles } from '../helpers';
+import { Modal } from '@deriv-com/ui';
 import './RadioGroupFilterModal.scss';
 
 type TRadioGroupFilterModalProps = {
@@ -20,10 +19,10 @@ const RadioGroupFilterModal = ({
 }: TRadioGroupFilterModalProps) => {
     return (
         <Modal
+            ariaHideApp={false}
             className='radio-group-filter-modal'
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}
-            style={customStyles}
         >
             <RadioGroup
                 className='sort-radiogroup'

src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx

@@ -7,7 +7,7 @@ import './SortDropdown.scss';
 type TSortDropdownProps = {
     list: readonly { text: string; value: string }[];
     onSelect: (value: TSortByValues) => void;
-    setIsFilterModalOpen: (value: boolean) => void;
+    setIsFilterModalOpen: () => void;
     value: TSortByValues;
 };
 
@@ -27,7 +27,7 @@ const SortDropdown = ({ list, onSelect, setIsFilterModalOpen, value }: TSortDrop
                         width={24}
                     />
                 }
-                onClick={() => setIsFilterModalOpen(true)}
+                onClick={setIsFilterModalOpen}
                 variant='outlined'
             />
         );

src/pages/buy-sell/screens/BuySellHeader/BuySellHeader.tsx

@@ -1,9 +1,8 @@
-import { useState } from 'react';
 import clsx from 'clsx';
 import { Search } from '@/components';
 import { FilterModal } from '@/components/Modals';
 import { SORT_BY_LIST } from '@/constants';
-import { useIsAdvertiserBarred } from '@/hooks/custom-hooks';
+import { useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks';
 import { TSortByValues } from '@/utils';
 import { LabelPairedBarsFilterMdBoldIcon, LabelPairedBarsFilterSmBoldIcon } from '@deriv/quill-icons';
 import { Button, Tab, Tabs, useDevice } from '@deriv-com/ui';
@@ -15,7 +14,7 @@ type TBuySellHeaderProps = {
     selectedCurrency: string;
     selectedPaymentMethods: string[];
     setActiveTab: (tab: number) => void;
-    setIsFilterModalOpen: (value: boolean) => void;
+    setIsFilterModalOpen: () => void;
     setSearchValue: (value: string) => void;
     setSelectedCurrency: (value: string) => void;
     setSelectedPaymentMethods: (value: string[]) => void;
@@ -39,9 +38,9 @@ const BuySellHeader = ({
     shouldUseClientLimits,
     sortDropdownValue,
 }: TBuySellHeaderProps) => {
+    const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false });
     const { isMobile } = useDevice();
     const isAdvertiserBarred = useIsAdvertiserBarred();
-    const [isModalOpen, setIsModalOpen] = useState(false);
 
     return (
         <div
@@ -90,18 +89,20 @@ const BuySellHeader = ({
                             <LabelPairedBarsFilterMdBoldIcon />
                         )
                     }
-                    onClick={() => setIsModalOpen(true)}
+                    onClick={() => showModal('FilterModal')}
                     variant='outlined'
                 />
             </div>
-            <FilterModal
-                isModalOpen={isModalOpen}
-                isToggled={shouldUseClientLimits}
-                onRequestClose={() => setIsModalOpen(false)}
-                onToggle={setShouldUseClientLimits}
-                selectedPaymentMethods={selectedPaymentMethods}
-                setSelectedPaymentMethods={setSelectedPaymentMethods}
-            />
+            {isModalOpenFor('FilterModal') && (
+                <FilterModal
+                    isModalOpen
+                    isToggled={shouldUseClientLimits}
+                    onRequestClose={hideModal}
+                    onToggle={setShouldUseClientLimits}
+                    selectedPaymentMethods={selectedPaymentMethods}
+                    setSelectedPaymentMethods={setSelectedPaymentMethods}
+                />
+            )}
         </div>
     );
 };

src/pages/buy-sell/screens/BuySellHeader/__tests__/BuySellHeader.spec.tsx

@@ -47,9 +47,16 @@ jest.mock('@/hooks', () => ({
     },
 }));
 
+const mockUseModalManager = {
+    hideModal: jest.fn(),
+    isModalOpenFor: jest.fn(),
+    showModal: jest.fn(),
+};
+
 jest.mock('@/hooks/custom-hooks', () => ({
     ...jest.requireActual('@/hooks/custom-hooks'),
     useIsAdvertiserBarred: jest.fn(() => false),
+    useModalManager: jest.fn(() => mockUseModalManager),
 }));
 
 jest.mock('../../../components/CurrencyDropdown/CurrencyDropdown', () => jest.fn(() => <div>CurrencyDropdown</div>));
@@ -110,19 +117,9 @@ describe('<BuySellHeader />', () => {
         expect(mockProps.setSortDropdownValue).toHaveBeenCalledWith('rating');
     });
 
-    it('should call setIsFilterModalOpen when the filter button is clicked on responsive', async () => {
-        mockUseDevice.mockReturnValue({ isMobile: true });
-
-        render(<BuySellHeader {...mockProps} />);
-
-        const filterButton = screen.getByTestId('dt_sort_dropdown_button');
-
-        await user.click(filterButton);
-
-        expect(mockProps.setIsFilterModalOpen).toHaveBeenCalledWith(true);
-    });
-
     it('should allow users to click on filter button', async () => {
+        mockUseDevice.mockReturnValue({ isMobile: true });
+        mockUseModalManager.isModalOpenFor.mockImplementation(modal_name => modal_name === 'FilterModal');
         render(<BuySellHeader {...mockProps} />);
 
         const filterButton = screen.getByTestId('dt_buy_sell_header_filter_button');

src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { RadioGroupFilterModal } from '@/components/Modals';
 import { ADVERT_TYPE, BUY_SELL, SORT_BY_LIST } from '@/constants';
 import { api } from '@/hooks';
-import { useQueryString } from '@/hooks/custom-hooks';
+import { useModalManager, useQueryString } from '@/hooks/custom-hooks';
 import { TSortByValues } from '@/utils';
 import { BuySellHeader } from '../BuySellHeader';
 import { BuySellTableRenderer } from './BuySellTableRenderer';
@@ -11,14 +11,14 @@ import './BuySellTable.scss';
 const TABS = [ADVERT_TYPE.BUY, ADVERT_TYPE.SELL];
 
 const BuySellTable = () => {
+    const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false });
     const { data: p2pSettingsData } = api.settings.useSettings();
     const { queryString, setQueryString } = useQueryString();
     const activeTab = queryString.tab || ADVERT_TYPE.BUY;
 
     const [selectedCurrency, setSelectedCurrency] = useState<string>(p2pSettingsData?.localCurrency || '');
     const [sortDropdownValue, setSortDropdownValue] = useState<TSortByValues>('rate');
     const [searchValue, setSearchValue] = useState<string>('');
-    const [isFilterModalOpen, setIsFilterModalOpen] = useState<boolean>(false);
     const [selectedPaymentMethods, setSelectedPaymentMethods] = useState<string[]>([]);
     const [shouldUseClientLimits, setShouldUseClientLimits] = useState<boolean>(true);
 
@@ -38,7 +38,7 @@ const BuySellTable = () => {
 
     const onToggle = (value: string) => {
         setSortDropdownValue(value as TSortByValues);
-        setIsFilterModalOpen(false);
+        hideModal();
     };
 
     const setActiveTab = (index: number) => {
@@ -58,7 +58,7 @@ const BuySellTable = () => {
                 selectedCurrency={selectedCurrency}
                 selectedPaymentMethods={selectedPaymentMethods}
                 setActiveTab={setActiveTab}
-                setIsFilterModalOpen={setIsFilterModalOpen}
+                setIsFilterModalOpen={() => showModal('RadioGroupFilterModal')}
                 setSearchValue={setSearchValue}
                 setSelectedCurrency={setSelectedCurrency}
                 setSelectedPaymentMethods={setSelectedPaymentMethods}
@@ -74,13 +74,15 @@ const BuySellTable = () => {
                 loadMoreAdverts={loadMoreAdverts}
                 searchValue={searchValue}
             />
-            <RadioGroupFilterModal
-                isModalOpen={isFilterModalOpen}
-                list={SORT_BY_LIST}
-                onRequestClose={() => setIsFilterModalOpen(false)}
-                onToggle={onToggle}
-                selected={sortDropdownValue as string}
-            />
+            {isModalOpenFor('RadioGroupFilterModal') && (
+                <RadioGroupFilterModal
+                    isModalOpen
+                    list={SORT_BY_LIST}
+                    onRequestClose={hideModal}
+                    onToggle={onToggle}
+                    selected={sortDropdownValue as string}
+                />
+            )}
         </div>
     );
 };