diff --git a/src/components/AdvertiserName/AdvertiserName.tsx b/src/components/AdvertiserName/AdvertiserName.tsx index aa172d5e..a9f08093 100644 --- a/src/components/AdvertiserName/AdvertiserName.tsx +++ b/src/components/AdvertiserName/AdvertiserName.tsx @@ -39,7 +39,7 @@ const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProp {isDesktop && isMyProfile && } - {isDesktop && !isMyProfile && !advertiserStats?.isBlocked && ( + {isDesktop && !isMyProfile && !advertiserStats?.is_blocked && ( )} diff --git a/src/components/AdvertiserName/BlockDropdown.tsx b/src/components/AdvertiserName/BlockDropdown.tsx index afafcd72..ef927dfb 100644 --- a/src/components/AdvertiserName/BlockDropdown.tsx +++ b/src/components/AdvertiserName/BlockDropdown.tsx @@ -3,6 +3,7 @@ import { useOnClickOutside } from 'usehooks-ts'; import { BlockUnblockUserModal } from '@/components/Modals'; import { useAdvertiserStats, useModalManager } from '@/hooks'; import { LabelPairedEllipsisVerticalMdRegularIcon } from '@deriv/quill-icons'; +import { Localize } from '@deriv-com/translations'; import { Button, Text, useDevice } from '@deriv-com/ui'; import './BlockDropdown.scss'; @@ -15,7 +16,7 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => { const [visible, setVisible] = useState(false); const { hideModal, isModalOpenFor, showModal } = useModalManager(); const { data } = useAdvertiserStats(id); - const { isBlocked, name = '' } = data ?? {}; + const { is_blocked: isBlocked, name = '' } = data ?? {}; const ref = useRef(null); useOnClickOutside(ref, () => setVisible(false)); const { isMobile } = useDevice(); @@ -24,8 +25,7 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
@@ -41,19 +41,21 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => { variant='ghost' > - Block +
)} - + {isModalOpenFor('BlockUnblockUserModal') && ( + + )} ); }; diff --git a/src/components/AdvertiserName/__tests__/BlockDropdown.spec.tsx b/src/components/AdvertiserName/__tests__/BlockDropdown.spec.tsx new file mode 100644 index 00000000..32f9170f --- /dev/null +++ b/src/components/AdvertiserName/__tests__/BlockDropdown.spec.tsx @@ -0,0 +1,46 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import BlockDropdown from '../BlockDropdown'; + +jest.mock('@/hooks/custom-hooks', () => ({ + useIsAdvertiserBarred: jest.fn().mockReturnValue(false), +})); + +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ + isMobile: false, + }), +})); + +const mockProps = { + id: '134', + onClickBlocked: jest.fn(), +}; + +const mockModalManager = { + hideModal: jest.fn(), + isModalOpenFor: jest.fn().mockReturnValue(false), + showModal: jest.fn(), +}; +jest.mock('@/hooks', () => ({ + useAdvertiserStats: jest.fn().mockReturnValue({ data: { is_blocked: false, name: 'test' } }), + useModalManager: jest.fn(() => mockModalManager), +})); +describe('BlockDropdown', () => { + it('should render', () => { + render(); + expect(screen.getByTestId('dt_block_dropdown_icon')).toBeInTheDocument(); + }); + it('should render the dropdown list on clicking on the icon', async () => { + render(); + await userEvent.click(screen.getByTestId('dt_block_dropdown_icon')); + expect(screen.getByText('Block')).toBeInTheDocument(); + }); + it('should handle the onclick event for clicking on the block button', async () => { + render(); + await userEvent.click(screen.getByTestId('dt_block_dropdown_icon')); + await userEvent.click(screen.getByText('Block')); + expect(mockModalManager.showModal).toHaveBeenCalledWith('BlockUnblockUserModal'); + }); +}); diff --git a/src/components/ProfileContent/ProfileContent.tsx b/src/components/ProfileContent/ProfileContent.tsx index 3ba6df8d..0cde5419 100644 --- a/src/components/ProfileContent/ProfileContent.tsx +++ b/src/components/ProfileContent/ProfileContent.tsx @@ -30,10 +30,7 @@ const ProfileContent = ({ id, setAdvertiserName, setShowOverlay }: TProfileConte return ( <>
- setShowOverlay?.((prevState: boolean) => !prevState)} - /> + setShowOverlay?.(true)} /> {isMyProfile ? : }
{isMobile && isMyProfile && } diff --git a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts index a12f616c..1638c74a 100644 --- a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts +++ b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts @@ -25,6 +25,7 @@ const useAdvertiserInfo = (id?: string) => { * Key removal is handled in useAdvertiserStats hook's useEffect. * */ const local_storage_key = id ? `p2p_advertiser_info_${id}` : 'p2p_advertiser_info'; + const [p2p_advertiser_info, setP2PAdvertiserInfo] = useLocalStorage>( local_storage_key, {} diff --git a/src/hooks/custom-hooks/useAdvertiserStats.ts b/src/hooks/custom-hooks/useAdvertiserStats.ts index 72654a60..502c9d1d 100644 --- a/src/hooks/custom-hooks/useAdvertiserStats.ts +++ b/src/hooks/custom-hooks/useAdvertiserStats.ts @@ -83,9 +83,6 @@ const useAdvertiserStats = (advertiserId?: string) => { /** Checks if the user is already an advertiser */ isAdvertiser, - /** Indicates that the advertiser is blocked by the current user. */ - isBlocked: !!data?.is_blocked, - /** Checks if the user is eligible to upgrade their daily limits */ isEligibleForLimitUpgrade: Boolean(data?.upgradable_daily_limits), diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx index 2dc8cb6f..f25ac611 100644 --- a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx +++ b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx @@ -50,8 +50,10 @@ const Advertiser = () => { /> showModal('BlockUnblockUserModal')} + setShowOverlay={setShowOverlay} > diff --git a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss index 869a2a94..ad483c76 100644 --- a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss +++ b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss @@ -4,6 +4,7 @@ &__wrapper { align-items: center; + gap: 2rem; background: #fff; border: 2px solid #f2f3f4; border-radius: 6px; @@ -32,8 +33,4 @@ margin-top: 2rem; } } - - .advertiser-page-adverts__table-body { - min-height: 20vh; - } } diff --git a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx index 5c44d223..b3dcd5f4 100644 --- a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx +++ b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx @@ -1,24 +1,32 @@ import { PropsWithChildren } from 'react'; +import { BlockUnblockUserModal } from '@/components/Modals'; +import { useModalManager } from '@/hooks'; +import { DerivLightIcBlockIcon } from '@deriv/quill-icons'; import { Localize } from '@deriv-com/translations'; import { Button, Text, useDevice } from '@deriv-com/ui'; import './AdvertiserBlockOverlay.scss'; type TAdvertiserBlockOverlayProps = { advertiserName: string; + id?: string; isOverlayVisible: boolean; onClickUnblock: () => void; + setShowOverlay: (showOverlay: boolean) => void; }; const AdvertiserBlockOverlay = ({ advertiserName, children, + id, isOverlayVisible, - onClickUnblock, + setShowOverlay, }: PropsWithChildren) => { const { isMobile } = useDevice(); + const { hideModal, isModalOpenFor, showModal } = useModalManager(); if (isOverlayVisible) { return (
+ showModal('BlockUnblockUserModal')} size='lg' textSize={isMobile ? 'md' : 'sm'} variant='outlined' > - Unblock +
{children} + setShowOverlay(false)} + onRequestClose={hideModal} + />
); }