Adrienne / Implemented new navigation flow for filtering payment methods in buy/sell page

packages/p2p/src/components/buy-sell/buy-sell-header.jsx

@@ -98,12 +98,20 @@ const BuySellHeader = ({ table_type }) => {
                         placeholder={isDesktop() ? localize('Search by nickname') : localize('Search')}
                     />
                     <SortDropdown />
-                    <Icon
-                        className='buy-sell__header-row--filter'
-                        icon='IcFilter'
-                        onClick={() => general_store.showModal({ key: 'FilterModal', props: {} })}
-                        size={40}
-                    />
+                    <div style={{ position: 'relative' }} className='buy-sell__header-row--filter'>
+                        <div
+                            className={classNames('buy-sell__header-row--filter-status', {
+                                'buy-sell__header-row--filter-status--disabled':
+                                    buy_sell_store.selected_payment_method_value.length === 0,
+                            })}
+                        />
+                        <Icon
+                            icon='IcFilter'
+                            className='buy-sell__header-row--filter-icon'
+                            onClick={() => general_store.showModal({ key: 'FilterModal', props: {} })}
+                            size={40}
+                        />
+                    </div>
                 </div>
             </div>
         </div>

packages/p2p/src/components/buy-sell/buy-sell-header.scss

@@ -79,7 +79,26 @@
             border-radius: 4px;
             display: flex;
             margin-left: 0.8rem;
-            padding: 1.3rem;
+
+            &-icon {
+                align-self: center;
+                display: flex;
+                padding: 1.3rem;
+            }
+
+            &-status {
+                position: absolute;
+                border-radius: 50px;
+                background: #ff444f;
+                width: 7px;
+                height: 7px;
+                top: 4px;
+                right: 4px;
+
+                &--disabled {
+                    display: none;
+                }
+            }
 
             @include mobile {
                 justify-self: center;

packages/p2p/src/components/modal-manager/modal-manager-context-provider.jsx

@@ -11,6 +11,46 @@ const ModalManagerContextProvider = props => {
     const [is_modal_open, setIsModalOpen] = React.useState(false);
     const [modal_props, setModalProps] = React.useState(new Map());
     const { general_store } = useStores();
+    const persisted_states = React.useRef({});
+
+    /**
+     * A `useState` wrapper that allows the local state to be persisted and restored if the modal is unmounted in place of another modal.
+     * By default the local states are not saved when modal is unmounted using hideModal, but once `hideModal` is called with the setting `should_restore_local_state` to `true`,
+     * local states will be saved and automatically restored when the modal is mounted back.
+     *
+     * @param {key} string - the key to specify when persisting the local state, by default you should specify the local state name
+     * @param {default_state} - the value you want the state to be initially
+     */
+    const useSavedState = (key, default_state) => {
+        const [saved_state, setSavedState] = React.useState(default_state);
+        const saved_state_ref = React.useRef(saved_state);
+
+        React.useEffect(() => {
+            const persisted_state = persisted_states.current[active_modal.key];
+
+            if (persisted_state) {
+                if (persisted_state[key]) {
+                    setSavedState(persisted_state[key]);
+                }
+            } else {
+                persisted_states.current[active_modal.key] = {
+                    [key]: default_state,
+                };
+            }
+
+            return () => {
+                if (persisted_states.current[active_modal.key]) {
+                    persisted_states.current[active_modal.key][key] = saved_state_ref.current;
+                }
+            };
+        }, []);
+
+        React.useEffect(() => {
+            saved_state_ref.current = saved_state;
+        }, [saved_state]);
+
+        return [saved_state, setSavedState];
+    };
 
     /**
      * Sets the specified modals' props on mount or when the props passed to the hook has changed.
@@ -76,10 +116,15 @@ const ModalManagerContextProvider = props => {
      * @param {Object} options - list of supported settings to tweak how modals should be hidden:
      * - **should_hide_all_modals**: `false` by default. If set to `true`, previous modal will not be shown and all modals are hidden.
      * - **should_save_form_history**: `false` by default. If set to `true`, form values in modals that has a form with `ModalForm` component
+     * - **should_restore_local_state**: `false` by default. If set to `true`, local states declared with `useSavedState` will be persisted and restored once the modal is mounted.
      * will be saved when the modal is hidden and restored when modal is shown again.
      */
     const hideModal = (options = {}) => {
-        const { should_save_form_history = false, should_hide_all_modals = false } = options;
+        const {
+            should_save_form_history = false,
+            should_hide_all_modals = false,
+            should_restore_local_state = false,
+        } = options;
 
         if (should_save_form_history) {
             general_store.saveFormState();
@@ -88,6 +133,8 @@ const ModalManagerContextProvider = props => {
             general_store.setFormikRef(null);
         }
 
+        if (!should_restore_local_state) persisted_states.current = {};
+
         if (isDesktop()) {
             if (should_hide_all_modals) {
                 setPreviousModal({});
@@ -127,6 +174,7 @@ const ModalManagerContextProvider = props => {
         stacked_modal,
         showModal,
         useRegisterModalProps,
+        useSavedState,
     };
 
     general_store.showModal = showModal;

packages/p2p/src/components/modal-manager/modals/cancel-add-payment-method-modal.jsx

@@ -36,6 +36,7 @@ const CancelAddPaymentMethodModal = ({ onCancel, should_hide_all_modals_on_cance
                         hideModal({
                             should_save_form_history: false,
                             should_hide_all_modals: should_hide_all_modals_on_cancel ?? false,
+                            should_restore_local_state: false,
                         });
                     }}
                     secondary
@@ -47,6 +48,7 @@ const CancelAddPaymentMethodModal = ({ onCancel, should_hide_all_modals_on_cance
                     onClick={() => {
                         hideModal({
                             should_save_form_history: true,
+                            should_restore_local_state: true,
                         });
                     }}
                     primary

packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-header.jsx

@@ -3,24 +3,42 @@ import { observer } from 'mobx-react-lite';
 import { localize, Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
 import PageReturn from 'Components/page-return/page-return.jsx';
+import { DesktopWrapper, Icon, MobileWrapper, Text } from '@deriv/components';
+import PropTypes from 'prop-types';
 
-const FilterModalHeader = () => {
-    const { buy_sell_store, my_profile_store } = useStores();
+const FilterModalHeader = ({ pageHeaderReturnFn }) => {
+    const { buy_sell_store } = useStores();
 
     if (buy_sell_store.show_filter_payment_methods) {
         return (
-            <PageReturn
-                onClick={() => {
-                    buy_sell_store.setShowFilterPaymentMethods(false);
-                    my_profile_store.setSearchTerm('');
-                    my_profile_store.setSearchResults([]);
-                }}
-                page_title={localize('Payment methods')}
-            />
+            <React.Fragment>
+                <DesktopWrapper>
+                    <PageReturn
+                        className='filter-modal__header'
+                        onClick={pageHeaderReturnFn}
+                        page_title={localize('Payment methods')}
+                    />
+                </DesktopWrapper>
+                <MobileWrapper>
+                    <Text align='center' weight='bold'>
+                        <Icon
+                            className='filter-modal__header-return-button'
+                            icon='IcArrowLeftBold'
+                            onClick={pageHeaderReturnFn}
+                            size={16}
+                        />
+                        <Localize i18n_default_text='Payment methods' />
+                    </Text>
+                </MobileWrapper>
+            </React.Fragment>
         );
     }
 
     return <Localize i18n_default_text='Filter' />;
 };
 
+FilterModalHeader.propTypes = {
+    pageHeaderReturnFn: PropTypes.func,
+};
+
 export default observer(FilterModalHeader);

packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-search.scss

@@ -7,7 +7,7 @@
     }
 
     @include mobile {
-        margin: 0.8rem 1.6rem 1rem;
+        padding: 0.8rem 1rem;
         min-width: 25rem;
 
         .dc-input {
@@ -31,7 +31,6 @@
 
             &__container {
                 border: none;
-                padding: 0;
                 height: 6rem;
             }
             &__field {