From b1ffbe67a6cd1291197fe9a48016b4100df0f099 Mon Sep 17 00:00:00 2001
From: Nada <nada.ajinas@deriv.com>
Date: Wed, 15 May 2024 13:54:58 +0400
Subject: [PATCH] fix: use dropdown instead of custom componnet

---
 .../AdvertiserName/BlockDropdown.scss         | 50 +++++++-----------
 .../AdvertiserName/BlockDropdown.tsx          | 51 +++++++------------
 src/hooks/custom-hooks/useAdvertiserStats.ts  |  1 +
 3 files changed, 36 insertions(+), 66 deletions(-)

diff --git a/src/components/AdvertiserName/BlockDropdown.scss b/src/components/AdvertiserName/BlockDropdown.scss
index 241b6585..9c189257 100644
--- a/src/components/AdvertiserName/BlockDropdown.scss
+++ b/src/components/AdvertiserName/BlockDropdown.scss
@@ -2,43 +2,29 @@
     display: flex;
     flex-direction: column;
     position: relative;
+    .deriv-dropdown {
+        width: 3.2rem;
 
-    &__icon {
-        margin-left: 1rem;
-    }
-
-    & .deriv-tooltip {
-        @include mobile {
-            display: none;
+        & .deriv-dropdown__button {
+            transform: none;
+            transition: none;
         }
-    }
-    &__list {
-        display: flex;
-        flex-direction: column;
-        border-radius: 0.4rem;
-        width: 15rem;
-        box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
-        z-index: 1;
-        top: 2.8rem;
-        position: absolute;
-        background: #fff;
-        right: 2rem;
 
-        &-item {
-            padding: 1rem 1.6rem;
-            height: inherit;
-            justify-content: start;
-            border-radius: unset;
+        &__items {
+            width: 12.8rem;
+            border: 0;
+            padding: 0;
+            top: 3rem;
+            right: 1rem;
+        }
 
-            // TODO: remove this once hover styles can be removed from the button component
-            &:hover {
-                // stylelint-disable-next-line declaration-no-important
-                background-color: #e6e9e9 !important;
+        .deriv-input {
+            border: 0;
+            padding: 0;
 
-                & span {
-                    // stylelint-disable-next-line declaration-no-important
-                    color: #333 !important;
-                }
+            &__field,
+            &__helper-message {
+                display: none;
             }
         }
     }
diff --git a/src/components/AdvertiserName/BlockDropdown.tsx b/src/components/AdvertiserName/BlockDropdown.tsx
index ef927dfb..1f4c3bdf 100644
--- a/src/components/AdvertiserName/BlockDropdown.tsx
+++ b/src/components/AdvertiserName/BlockDropdown.tsx
@@ -1,10 +1,8 @@
-import { useRef, useState } from 'react';
-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 { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { Dropdown } from '@deriv-com/ui';
 import './BlockDropdown.scss';
 
 type TBlockDropdownProps = {
@@ -13,39 +11,24 @@ type TBlockDropdownProps = {
 };
 
 const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
-    const [visible, setVisible] = useState(false);
+    const { localize } = useTranslations();
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
     const { data } = useAdvertiserStats(id);
     const { is_blocked: isBlocked, name = '' } = data ?? {};
-    const ref = useRef(null);
-    useOnClickOutside(ref, () => setVisible(false));
-    const { isMobile } = useDevice();
-
     return (
-        <div className='block-dropdown' ref={ref}>
-            <Button color='white' variant='outlined'>
-                <LabelPairedEllipsisVerticalMdRegularIcon
-                    data-testid='dt_block_dropdown_icon'
-                    onClick={() => setVisible(prevState => !prevState)}
-                />
-            </Button>
-            {visible && (
-                <div className='block-dropdown__list'>
-                    <Button
-                        className='block-dropdown__list-item'
-                        color='black'
-                        onClick={() => {
-                            showModal('BlockUnblockUserModal');
-                            setVisible(false);
-                        }}
-                        variant='ghost'
-                    >
-                        <Text className='block-dropdown__list-item__label' size={isMobile ? 'md' : 'sm'}>
-                            <Localize i18n_default_text='Block' />
-                        </Text>
-                    </Button>
-                </div>
-            )}
+        <div className='block-dropdown'>
+            <Dropdown
+                className='block-dropdown__header-dropdown'
+                dropdownIcon={<LabelPairedEllipsisVerticalXlRegularIcon data-testid='dt_block_dropdown_icon' />}
+                list={[
+                    {
+                        text: localize('Block'),
+                        value: 'block',
+                    },
+                ]}
+                name='block-user-dropdown'
+                onSelect={() => showModal('BlockUnblockUserModal')}
+            />
             {isModalOpenFor('BlockUnblockUserModal') && (
                 <BlockUnblockUserModal
                     advertiserName={name}
diff --git a/src/hooks/custom-hooks/useAdvertiserStats.ts b/src/hooks/custom-hooks/useAdvertiserStats.ts
index 502c9d1d..4380f8c2 100644
--- a/src/hooks/custom-hooks/useAdvertiserStats.ts
+++ b/src/hooks/custom-hooks/useAdvertiserStats.ts
@@ -38,6 +38,7 @@ const useAdvertiserStats = (advertiserId?: string) => {
             localStorage.removeItem(`p2p_advertiser_info_${advertiserId}`);
             unsubscribe();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const transformedData = useMemo(() => {