Adrienne / Made block user count to be subscribed to updates (#6561)

* Moved blocked user count observable to general store's subscription to subscribe to block user count updates

* Destructure response

* Refactored code

packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx

@@ -7,28 +7,28 @@ import { isDesktop } from '@deriv/shared';
 import './block-user-count.scss';
 
 const BlockUserCount = () => {
-    const { my_profile_store } = useStores();
-    const { blocked_by_count } = my_profile_store.advertiser_info;
+    const { general_store } = useStores();
+    const { user_blocked_count } = general_store;
 
     const [is_block_user_count_modal_open, setIsBlockUserCountModalOpen] = React.useState(false);
 
     const getMessage = () => {
-        if (blocked_by_count === 0) {
-            return localize('Nobody has blocked you. Yay!');
-        } else if (blocked_by_count === 1) {
-            return localize('{{blocked_by_count}} person has blocked you', { blocked_by_count });
+        switch (user_blocked_count) {
+            case 0:
+                return localize('Nobody has blocked you. Yay!');
+            case 1:
+                return localize('{{user_blocked_count}} person has blocked you', {
+                    user_blocked_count,
+                });
+            default:
+                return localize('{{user_blocked_count}} people have blocked you', {
+                    user_blocked_count,
+                });
         }
-        return localize('{{blocked_by_count}} people have blocked you', { blocked_by_count });
     };
 
-    React.useEffect(() => {
-        my_profile_store.getAdvertiserInfo();
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     return (
-        <>
+        <React.Fragment>
             <MobileWrapper>
                 <Modal has_close_icon={false} is_open={is_block_user_count_modal_open} width='440px'>
                     <Modal.Body>
@@ -58,11 +58,11 @@ const BlockUserCount = () => {
                 >
                     <Icon className='block-user-count__container--icon' icon='IcUserBlockedOutline' size={16} />
                     <Text color='less-prominent' line_height='m' size={isDesktop() ? 'xs' : 14}>
-                        {blocked_by_count}
+                        {user_blocked_count}
                     </Text>
                 </Popover>
             </div>
-        </>
+        </React.Fragment>
     );
 };
 

packages/p2p/src/stores/general-store.js

@@ -36,6 +36,7 @@ export default class GeneralStore extends BaseStore {
     @observable review_period;
     @observable should_show_real_name = false;
     @observable should_show_popup = false;
+    @observable user_blocked_count = 0;
     @observable user_blocked_until = null;
     @observable is_high_risk_fully_authed_without_fa = false;
     @observable is_modal_open = false;
@@ -592,6 +593,11 @@ export default class GeneralStore extends BaseStore {
         this.should_show_popup = should_show_popup;
     }
 
+    @action.bound
+    setUserBlockedCount(user_blocked_count) {
+        this.user_blocked_count = user_blocked_count;
+    }
+
     @action.bound
     setUserBlockedUntil(user_blocked_until) {
         this.user_blocked_until = user_blocked_until;
@@ -610,14 +616,17 @@ export default class GeneralStore extends BaseStore {
 
     @action.bound
     updateAdvertiserInfo(response) {
-        const { p2p_advertiser_info } = response;
+        const { blocked_until, blocked_by_count, id, is_approved, is_blocked, is_listed, name } =
+            response?.p2p_advertiser_info || {};
+
         if (!response.error) {
-            this.setAdvertiserId(p2p_advertiser_info.id);
-            this.setIsAdvertiser(!!p2p_advertiser_info.is_approved);
-            this.setIsAdvertiserBlocked(!!p2p_advertiser_info.is_blocked);
-            this.setIsListed(!!p2p_advertiser_info.is_listed);
-            this.setNickname(p2p_advertiser_info.name);
-            this.setUserBlockedUntil(p2p_advertiser_info.blocked_until);
+            this.setAdvertiserId(id);
+            this.setIsAdvertiser(!!is_approved);
+            this.setIsAdvertiserBlocked(!!is_blocked);
+            this.setIsListed(!!is_listed);
+            this.setNickname(name);
+            this.setUserBlockedUntil(blocked_until);
+            this.setUserBlockedCount(blocked_by_count);
         } else {
             this.ws_subscriptions.advertiser_subscription.unsubscribe();
             if (response.error.code === 'RestrictedCountry') {