Merge pull request #183 from ameerul-deriv/FEQ-2382-keep-the-filter-options-in-buy-sell-page

Ameerul / FEQ-2382 keep the filter options in buy sell page

Author: farrah-deriv

package-lock.json

@@ -51,7 +51,8 @@
         "use-query-params": "^2.2.1",
         "usehooks-ts": "^2.16.0",
         "vite": "^5.1.4",
-        "vite-plugin-svgr": "^4.2.0"
+        "vite-plugin-svgr": "^4.2.0",
+        "zustand": "^4.5.2"
     },
     "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",

package.json

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
 import clsx from 'clsx';
+import { useShallow } from 'zustand/react/shallow';
 import { FullPageMobileWrapper, PageReturn } from '@/components';
 import { api, useModalManager } from '@/hooks';
+import { useBuySellFiltersStore } from '@/stores';
 import { LabelPairedChevronRightLgRegularIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
 import { Modal, Text, ToggleSwitch, useDevice } from '@deriv-com/ui';
@@ -12,29 +14,28 @@ import './FilterModal.scss';
 
 type TFilterModalProps = {
     isModalOpen: boolean;
-    isToggled: boolean;
     onRequestClose: () => void;
-    onToggle: (value: boolean) => void;
-    selectedPaymentMethods: string[];
-    setSelectedPaymentMethods: (value: string[]) => void;
 };
 
-const FilterModal = ({
-    isModalOpen,
-    isToggled,
-    onRequestClose,
-    onToggle,
-    selectedPaymentMethods,
-    setSelectedPaymentMethods,
-}: TFilterModalProps) => {
+const FilterModal = ({ isModalOpen, onRequestClose }: TFilterModalProps) => {
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
     const { data } = api.paymentMethods.useGet();
     const { localize } = useTranslations();
-    const [showPaymentMethods, setShowPaymentMethods] = useState<boolean>(false);
-    const [isMatching, setIsMatching] = useState<boolean>(isToggled);
-    const [paymentMethods, setPaymentMethods] = useState<string[]>(selectedPaymentMethods);
-    const [paymentMethodNames, setPaymentMethodNames] = useState<string>('All');
     const { isMobile } = useDevice();
+    const { selectedPaymentMethods, setSelectedPaymentMethods, setShouldUseClientLimits, shouldUseClientLimits } =
+        useBuySellFiltersStore(
+            useShallow(state => ({
+                selectedPaymentMethods: state.selectedPaymentMethods,
+                setSelectedPaymentMethods: state.setSelectedPaymentMethods,
+                setShouldUseClientLimits: state.setShouldUseClientLimits,
+                shouldUseClientLimits: state.shouldUseClientLimits,
+            }))
+        );
+
+    const [showPaymentMethods, setShowPaymentMethods] = useState(false);
+    const [isMatching, setIsMatching] = useState(shouldUseClientLimits);
+    const [paymentMethods, setPaymentMethods] = useState<string[]>(selectedPaymentMethods);
+    const [paymentMethodNames, setPaymentMethodNames] = useState('All');
     const [isHidden, setIsHidden] = useState(false);
 
     const filterOptions = [
@@ -54,7 +55,7 @@ const FilterModal = ({
     const sortedSelectedPaymentMethods = [...selectedPaymentMethods].sort((a, b) => a.localeCompare(b));
     const sortedPaymentMethods = [...paymentMethods].sort((a, b) => a.localeCompare(b));
     const hasSamePaymentMethods = JSON.stringify(sortedSelectedPaymentMethods) === JSON.stringify(sortedPaymentMethods);
-    const hasSameMatching = isToggled === isMatching;
+    const hasSameMatching = shouldUseClientLimits === isMatching;
     const hasSameFilters = hasSamePaymentMethods && hasSameMatching;
     const headerText = showPaymentMethods ? localize('Payment methods') : localize('Filter');
 
@@ -63,7 +64,7 @@ const FilterModal = ({
             setShowPaymentMethods(false);
         } else {
             setSelectedPaymentMethods(paymentMethods);
-            onToggle(isMatching);
+            setShouldUseClientLimits(isMatching);
             onRequestClose();
         }
     };

src/components/Modals/FilterModal/FilterModal.tsx

@@ -5,11 +5,7 @@ import FilterModal from '../FilterModal';
 
 const mockProps = {
     isModalOpen: true,
-    isToggled: true,
     onRequestClose: jest.fn(),
-    onToggle: jest.fn(),
-    selectedPaymentMethods: [],
-    setSelectedPaymentMethods: jest.fn(),
 };
 
 let mockData: { display_name: string; id: string }[] | undefined = [
@@ -40,6 +36,17 @@ jest.mock('@/hooks', () => ({
     useModalManager: jest.fn(() => mockModalManager),
 }));
 
+const mockStore = {
+    selectedPaymentMethods: [],
+    setSelectedPaymentMethods: jest.fn(),
+    setShouldUseClientLimits: jest.fn(),
+    shouldUseClientLimits: true,
+};
+
+jest.mock('@/stores', () => ({
+    useBuySellFiltersStore: jest.fn(() => mockStore),
+}));
+
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: jest.fn().mockReturnValue({
@@ -99,8 +106,8 @@ describe('<FilterModal />', () => {
         await user.click(toggleSwitch);
         await user.click(applyButton);
 
-        expect(mockProps.setSelectedPaymentMethods).toHaveBeenCalled();
-        expect(mockProps.onToggle).toHaveBeenCalled();
+        expect(mockStore.setSelectedPaymentMethods).toHaveBeenCalled();
+        expect(mockStore.setShouldUseClientLimits).toHaveBeenCalled();
         expect(mockProps.onRequestClose).toHaveBeenCalled();
     });
 
@@ -115,7 +122,7 @@ describe('<FilterModal />', () => {
 
         await user.click(resetButton);
 
-        expect(mockProps.setSelectedPaymentMethods).toHaveBeenCalled();
+        expect(mockStore.setSelectedPaymentMethods).toHaveBeenCalled();
         expect(toggleSwitch).toBeChecked();
     });
 
@@ -259,7 +266,7 @@ describe('<FilterModal />', () => {
         await user.click(alipayCheckbox);
         await user.click(alipayCheckbox);
 
-        expect(mockProps.setSelectedPaymentMethods).toHaveBeenCalled();
+        expect(mockStore.setSelectedPaymentMethods).toHaveBeenCalled();
     });
 
     it('should populate the payment methods list with the data from the API', async () => {

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

@@ -7,7 +7,7 @@ type TRadioGroupFilterModalProps = {
     list: readonly { text: string; value: string }[];
     onRequestClose: () => void;
     onToggle: (value: string) => void;
-    selected: string;
+    selected?: string;
 };
 
 const RadioGroupFilterModal = ({

src/components/Modals/RadioGroupFilterModal/RadioGroupFilterModal.tsx

@@ -19,7 +19,7 @@ type TRadioGroup = TItemWrapper & {
     name: string;
     onToggle: (e: ChangeEvent<HTMLInputElement>) => void;
     required?: boolean;
-    selected: string;
+    selected?: string;
     textSize?: ComponentProps<typeof Text>['size'];
 };
 

src/components/RadioGroup/RadioGroup.tsx

@@ -38,6 +38,9 @@ jest.mock('@deriv-com/api-hooks', () => ({
 jest.mock('@/hooks', () => ({
     api: {
         account: {
+            useActiveAccount: jest.fn(() => ({
+                data: { currency: 'USD' },
+            })),
             useAuthentication: jest.fn(() => mockUseAuthentication),
         },
         advertiser: {

src/hooks/custom-hooks/__tests__/useAdvertiserStats.spec.ts

@@ -22,17 +22,18 @@ const toAdvertiserMinutes = (duration?: number | null) => {
  * @param advertiserId - ID of the advertiser stats to reveal. If not provided, by default it will return the user's own stats.
  */
 const useAdvertiserStats = (advertiserId?: string) => {
-    const { data, subscribe, unsubscribe } = api.advertiser.useGetInfo(advertiserId);
+    const { data, isLoading: isLoadingInfo, subscribe, unsubscribe } = api.advertiser.useGetInfo(advertiserId);
     const { data: settings, isSuccess: isSuccessSettings } = useGetSettings();
     const { data: authenticationStatus, isSuccess: isSuccessAuthenticationStatus } = api.account.useAuthentication();
+    const { data: activeAccountData } = api.account.useActiveAccount();
     const { error, isIdle, isLoading, isSubscribed } = useAdvertiserInfoState();
 
     useEffect(() => {
-        if (advertiserId) {
+        if (advertiserId && activeAccountData) {
             subscribe({ id: advertiserId });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [advertiserId]);
+    }, [advertiserId, activeAccountData]);
 
     useEffect(() => {
         return () => {
@@ -129,7 +130,7 @@ const useAdvertiserStats = (advertiserId?: string) => {
         data: transformedData,
         error,
         isIdle,
-        isLoading,
+        isLoading: advertiserId ? isLoadingInfo : isLoading,
         isSubscribed,
         unsubscribe,
     };

src/hooks/custom-hooks/useAdvertiserStats.ts

@@ -5,7 +5,7 @@ import BlockDropdown from '@/components/AdvertiserName/BlockDropdown';
 import { BUY_SELL_URL, MY_PROFILE_URL } from '@/constants';
 import { api, useAdvertiserStats, useModalManager } from '@/hooks';
 import { useTranslations } from '@deriv-com/translations';
-import { useDevice } from '@deriv-com/ui';
+import { Loader, useDevice } from '@deriv-com/ui';
 import { AdvertiserAdvertsTable } from '../AdvertiserAdvertsTable';
 import { AdvertiserBlockOverlay } from '../AdvertiserBlockOverlay';
 import './Advertiser.scss';
@@ -25,7 +25,7 @@ const Advertiser = () => {
     const history = useHistory();
     const location = useLocation();
 
-    const { data, unsubscribe } = useAdvertiserStats(id);
+    const { data, isLoading, unsubscribe } = useAdvertiserStats(id);
 
     return (
         <div className='advertiser'>
@@ -54,16 +54,20 @@ const Advertiser = () => {
                 size={isMobile ? 'lg' : 'md'}
                 weight='bold'
             />
-            <AdvertiserBlockOverlay
-                advertiserName={advertiserName}
-                id={id}
-                isOverlayVisible={showOverlay}
-                onClickUnblock={() => showModal('BlockUnblockUserModal')}
-                setShowOverlay={setShowOverlay}
-            >
-                <ProfileContent data={data} setAdvertiserName={setAdvertiserName} setShowOverlay={setShowOverlay} />
-                <AdvertiserAdvertsTable advertiserId={advertiserId} />
-            </AdvertiserBlockOverlay>
+            {isLoading ? (
+                <Loader className='mt-0 lg:mt-80' />
+            ) : (
+                <AdvertiserBlockOverlay
+                    advertiserName={advertiserName}
+                    id={id}
+                    isOverlayVisible={showOverlay}
+                    onClickUnblock={() => showModal('BlockUnblockUserModal')}
+                    setShowOverlay={setShowOverlay}
+                >
+                    <ProfileContent data={data} setAdvertiserName={setAdvertiserName} setShowOverlay={setShowOverlay} />
+                    <AdvertiserAdvertsTable advertiserId={advertiserId} />
+                </AdvertiserBlockOverlay>
+            )}
         </div>
     );
 };