Merge pull request #156 from nada-deriv/nada/FEQ-2381/leave-filter-modal

Nada/FEQ-2381/feat: add cancel modal for filter

Author: farrah-deriv

src/components/Modals/FilterModal/FilterModal.scss

@@ -9,4 +9,13 @@
         z-index: 1;
         height: calc(100vh - 8rem);
     }
+
+    & .mobile-wrapper {
+        &__header {
+            gap: 0;
+            span {
+                margin: 0 auto;
+            }
+        }
+    }
 }

src/components/Modals/FilterModal/FilterModal.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
+import clsx from 'clsx';
 import { FullPageMobileWrapper, PageReturn } from '@/components';
-import { api } from '@/hooks';
+import { api, useModalManager } from '@/hooks';
 import { LabelPairedChevronRightLgRegularIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
 import { Modal, Text, ToggleSwitch, useDevice } from '@deriv-com/ui';
+import { LeaveFilterModal } from '../LeaveFilterModal';
 import { FilterModalContent } from './FilterModalContent';
 import { FilterModalFooter } from './FilterModalFooter';
 import './FilterModal.scss';
@@ -25,13 +27,15 @@ const FilterModal = ({
     selectedPaymentMethods,
     setSelectedPaymentMethods,
 }: 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 [isHidden, setIsHidden] = useState(false);
 
     const filterOptions = [
         {
@@ -83,11 +87,28 @@ const FilterModal = ({
         }
     }, [data, paymentMethods]);
 
+    const closeCancelModal = (hideAll = false) => {
+        hideModal({ shouldHideAllModals: hideAll });
+        if (!hideAll) {
+            setIsHidden(false);
+        }
+    };
+
+    const onClickClose = () => {
+        const isValid = (showPaymentMethods && hasSamePaymentMethods) || (!showPaymentMethods && hasSameFilters);
+        if (isValid) {
+            onRequestClose();
+        } else {
+            setIsHidden(true);
+            showModal('LeaveFilterModal');
+        }
+    };
+
     if (isMobile && isModalOpen) {
         return (
             <FullPageMobileWrapper
                 className='filter-modal'
-                onBack={showPaymentMethods ? () => setShowPaymentMethods(false) : onRequestClose}
+                onBack={showPaymentMethods ? () => setShowPaymentMethods(false) : onClickClose}
                 renderFooter={() => (
                     <FilterModalFooter
                         hasSameFilters={hasSameFilters}
@@ -103,46 +124,60 @@ const FilterModal = ({
                         {headerText}
                     </Text>
                 )}
+                shouldShowBackIcon={showPaymentMethods}
+                shouldShowCloseIcon
             >
                 <FilterModalContent
                     filterOptions={filterOptions}
                     paymentMethods={paymentMethods}
                     setPaymentMethods={setPaymentMethods}
                     showPaymentMethods={showPaymentMethods}
                 />
+                {isModalOpenFor('LeaveFilterModal') && (
+                    <LeaveFilterModal isModalOpen onRequestClose={closeCancelModal} />
+                )}
             </FullPageMobileWrapper>
         );
     }
 
     return (
-        <Modal ariaHideApp={false} className='filter-modal' isOpen={isModalOpen} onRequestClose={onRequestClose}>
-            <Modal.Header onRequestClose={onRequestClose}>
-                <PageReturn
-                    onClick={() => setShowPaymentMethods(false)}
-                    pageTitle={headerText}
-                    shouldHideBackButton={!showPaymentMethods}
-                    weight='bold'
-                />
-            </Modal.Header>
-            <Modal.Body>
-                <FilterModalContent
-                    filterOptions={filterOptions}
-                    paymentMethods={paymentMethods}
-                    setPaymentMethods={setPaymentMethods}
-                    showPaymentMethods={showPaymentMethods}
-                />
-            </Modal.Body>
-            <Modal.Footer className='p-0'>
-                <FilterModalFooter
-                    hasSameFilters={hasSameFilters}
-                    hasSamePaymentMethods={hasSamePaymentMethods}
-                    onApplyConfirm={onApplyConfirm}
-                    onResetClear={onResetClear}
-                    paymentMethods={paymentMethods}
-                    showPaymentMethods={showPaymentMethods}
-                />
-            </Modal.Footer>
-        </Modal>
+        <>
+            <Modal
+                ariaHideApp={false}
+                className={clsx('filter-modal', { hidden: isHidden })}
+                isOpen={isModalOpen}
+                onRequestClose={onClickClose}
+                style={{ overlay: { background: isHidden ? 'transparent' : 'rgba(0, 0, 0, 0.72)', zIndex: 9999 } }}
+            >
+                <Modal.Header onRequestClose={onClickClose}>
+                    <PageReturn
+                        onClick={() => setShowPaymentMethods(false)}
+                        pageTitle={headerText}
+                        shouldHideBackButton={!showPaymentMethods}
+                        weight='bold'
+                    />
+                </Modal.Header>
+                <Modal.Body>
+                    <FilterModalContent
+                        filterOptions={filterOptions}
+                        paymentMethods={paymentMethods}
+                        setPaymentMethods={setPaymentMethods}
+                        showPaymentMethods={showPaymentMethods}
+                    />
+                </Modal.Body>
+                <Modal.Footer className='p-0'>
+                    <FilterModalFooter
+                        hasSameFilters={hasSameFilters}
+                        hasSamePaymentMethods={hasSamePaymentMethods}
+                        onApplyConfirm={onApplyConfirm}
+                        onResetClear={onResetClear}
+                        paymentMethods={paymentMethods}
+                        showPaymentMethods={showPaymentMethods}
+                    />
+                </Modal.Footer>
+            </Modal>
+            {isModalOpenFor('LeaveFilterModal') && <LeaveFilterModal isModalOpen onRequestClose={closeCancelModal} />}
+        </>
     );
 };
 

src/components/Modals/FilterModal/FilterModalContent/FilterModalContent.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Text } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import { FilterModalPaymentMethods } from '../FilterModalPaymentMethods';
 
 type TFilterModalContentProps = {
@@ -20,6 +20,8 @@ const FilterModalContent = ({
     setPaymentMethods,
     showPaymentMethods,
 }: TFilterModalContentProps) => {
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'md' : 'sm';
     return (
         <>
             {showPaymentMethods ? (
@@ -41,8 +43,8 @@ const FilterModalContent = ({
                             onClick={option.onClick}
                         >
                             <div className='flex flex-col'>
-                                <Text size='sm'>{option.text}</Text>
-                                <Text color='less-prominent' size='sm'>
+                                <Text size={textSize}>{option.text}</Text>
+                                <Text color='less-prominent' size={textSize}>
                                     {option.subtext}
                                 </Text>
                             </div>

src/components/Modals/FilterModal/FilterModalPaymentMethods/FilterModalPaymentMethods.scss

@@ -1,7 +1,7 @@
 .filter-modal-payment-methods {
     .deriv-input {
         border: none;
-        border-bottom: 1px solid #f2f3f4;
+        border-bottom: 1px solid #d6dadb;
         border-radius: 0;
         // stylelint-disable-next-line declaration-no-important
         padding: 1.5rem !important;
@@ -15,5 +15,15 @@
             // stylelint-disable-next-line declaration-no-important
             left: 4rem !important;
         }
+
+        &--general {
+            &:hover {
+                &:not(:disabled) {
+                    &:not(:focus-within) {
+                        border-bottom: 1px solid #d6dadb;
+                    }
+                }
+            }
+        }
     }
 }

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

@@ -23,6 +23,12 @@ let mockData: { display_name: string; id: string }[] | undefined = [
     },
 ];
 
+const mockModalManager = {
+    hideModal: jest.fn(),
+    isModalOpenFor: jest.fn().mockReturnValue(false),
+    showModal: jest.fn(),
+};
+
 jest.mock('@/hooks', () => ({
     api: {
         paymentMethods: {
@@ -31,6 +37,7 @@ jest.mock('@/hooks', () => ({
             })),
         },
     },
+    useModalManager: jest.fn(() => mockModalManager),
 }));
 
 jest.mock('@deriv-com/ui', () => ({
@@ -307,7 +314,7 @@ describe('<FilterModal />', () => {
         const paymentMethodsText = screen.getByText('Payment methods');
         await user.click(paymentMethodsText);
 
-        const backButton = screen.getByTestId('dt_mobile_wrapper_button');
+        const backButton = screen.getAllByTestId('dt_mobile_wrapper_button')[0];
         await user.click(backButton);
 
         expect(screen.getByText('Filter')).toBeInTheDocument();

src/components/Modals/LeaveFilterModal/LeaveFilterModal.scss

@@ -0,0 +1,17 @@
+.leave-filter-modal {
+    @include default-modal;
+
+    &__header {
+        @include mobile {
+            padding-left: 1.6rem;
+        }
+    }
+
+    &__body {
+        padding: 1rem 2.4rem;
+    }
+
+    &__footer {
+        gap: 0.8rem;
+    }
+}

src/components/Modals/LeaveFilterModal/LeaveFilterModal.tsx

@@ -0,0 +1,50 @@
+import { Localize } from '@deriv-com/translations';
+import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
+import './LeaveFilterModal.scss';
+
+type TLeaveFilterModalProps = {
+    isModalOpen: boolean;
+    onRequestClose: (shouldHide?: boolean) => void;
+};
+
+const LeaveFilterModal = ({ isModalOpen, onRequestClose }: TLeaveFilterModalProps) => {
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'md' : 'sm';
+    return (
+        <Modal
+            ariaHideApp={false}
+            className='leave-filter-modal'
+            isOpen={isModalOpen}
+            shouldCloseOnOverlayClick={false}
+        >
+            <Modal.Header className='leave-filter-modal__header' hideBorder hideCloseIcon>
+                <Text size={isMobile ? 'lg' : 'md'} weight='bold'>
+                    <Localize i18n_default_text='Leave page?' />
+                </Text>
+            </Modal.Header>
+
+            <Modal.Body className='leave-filter-modal__body'>
+                <Text size={textSize}>
+                    <Localize i18n_default_text='Are you sure you want to leave this page? Changes made will not be saved.' />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer className='leave-filter-modal__footer' hideBorder>
+                <Button
+                    className='border-2'
+                    color='black'
+                    onClick={() => onRequestClose(false)}
+                    size='lg'
+                    textSize={textSize}
+                    variant='outlined'
+                >
+                    <Localize i18n_default_text='Cancel' />
+                </Button>
+                <Button onClick={() => onRequestClose(true)} size='lg' textSize={textSize}>
+                    <Localize i18n_default_text='Leave page' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default LeaveFilterModal;

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

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import LeaveFilterModal from '../LeaveFilterModal';
+
+const mockProps = {
+    isModalOpen: true,
+    onRequestClose: jest.fn(),
+};
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+describe('LeaveFilterModal', () => {
+    it('should render the modal as expected', () => {
+        render(<LeaveFilterModal {...mockProps} />);
+        expect(screen.getByText('Leave page?')).toBeInTheDocument();
+    });
+
+    it('should call onRequestClose with false when cancel button is clicked', async () => {
+        render(<LeaveFilterModal {...mockProps} />);
+        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+        expect(mockProps.onRequestClose).toHaveBeenCalledWith(false);
+    });
+
+    it('should call onRequestClose with true when leave page button is clicked', async () => {
+        render(<LeaveFilterModal {...mockProps} />);
+        await userEvent.click(screen.getByRole('button', { name: 'Leave page' }));
+        expect(mockProps.onRequestClose).toHaveBeenCalledWith(true);
+    });
+});

src/components/Modals/LeaveFilterModal/index.ts

@@ -0,0 +1 @@
+export { default as LeaveFilterModal } from './LeaveFilterModal';

src/components/Modals/index.ts

@@ -17,6 +17,7 @@ export * from './EmailVerificationModal';
 export * from './ErrorModal';
 export * from './FilterModal';
 export * from './InvalidVerificationLinkModal';
+export * from './LeaveFilterModal';
 export * from './LoadingModal';
 export * from './MyAdsDeleteModal';
 export * from './NicknameModal';