Adrienne / Quick Add Modal and integrating new payment method dropdow…

…n component for buy ads in the modal (#7308) * saved draft * refactor: added quick add modal and new dropdown component * chore: refactored out unusesd files * chore: reverted merge conflict issues * chore: removed old merge conflicts * chore: fixed merge conflicts and added 2 new modals * chore: reverted refactor and used error modal instead
binary-com · Jan 10, 2023 · 18b73d3 · 18b73d3
1 parent e574b10
commit 18b73d3
Show file tree

Hide file tree

Showing 19 changed files with 474 additions and 639 deletions.
diff --git a/packages/p2p/src/components/modal-manager/modal-manager-context-provider.jsx b/packages/p2p/src/components/modal-manager/modal-manager-context-provider.jsx
@@ -23,27 +23,27 @@ const ModalManagerContextProvider = props => {
      * @param {Object|Object[]} modals - list of object modals to set props, each modal object must contain a 'key' attribute and 'props' attribute
      */
     const useRegisterModalProps = modals => {
-        const registered_modals = [];
+        const registered_modals = React.useRef([]);
 
         const registerModals = React.useCallback(() => {
             if (Array.isArray(modals)) {
                 modals.forEach(modal => {
-                    registered_modals.push(modal);
+                    registered_modals.current.push(modal);
                     setModalProps(modal_props.set(modal.key, modal.props));
                 });
             } else {
-                registered_modals.push(modals);
+                registered_modals.current.push(modals);
                 setModalProps(modal_props.set(modals.key, modals.props));
             }
         }, [modals]);
 
         React.useEffect(() => {
             registerModals();
             return () => {
-                registered_modals.forEach(registered_modal => {
+                registered_modals.current.forEach(registered_modal => {
                     modal_props.delete(registered_modal.key);
                 });
-                registered_modals.current = []
+                registered_modals.current = [];
             };
         }, [modals]);
     };
@@ -72,16 +72,15 @@ const ModalManagerContextProvider = props => {
      */
     const hideModal = (options = {}) => {
         const { should_save_form_history = false, should_hide_all_modals = false } = options;
-
-        modal_props.delete(active_modal.key);
-        if (isDesktop()) {
-            if (should_save_form_history) {
-                general_store.saveFormState();
-            } else {
-                general_store.setSavedFormState(null);
-                general_store.setFormikRef(null);
-            }
 
+        if (should_save_form_history) {
+            general_store.saveFormState();
+        } else {
+            general_store.setSavedFormState(null);
+            general_store.setFormikRef(null);
+        }
+
+        if (isDesktop()) {
             if (should_hide_all_modals) {
                 setPreviousModal({});
                 setActiveModal({});

diff --git a/packages/p2p/src/components/modal-manager/modals/cancel-add-payment-method-modal.jsx b/packages/p2p/src/components/modal-manager/modals/cancel-add-payment-method-modal.jsx
@@ -5,7 +5,7 @@ import { useStores } from 'Stores';
 import { Localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
-const CancelAddPaymentMethodModal = () => {
+const CancelAddPaymentMethodModal = ({ onCancel, should_hide_all_modals_on_cancel }) => {
     const { my_ads_store, my_profile_store } = useStores();
     const { hideModal, is_modal_open } = useModalManagerContext();
 
@@ -30,10 +30,12 @@ const CancelAddPaymentMethodModal = () => {
                     large
                     onClick={() => {
                         my_profile_store.hideAddPaymentMethodForm();
-                        my_profile_store.setIsCancelEditPaymentMethodModalOpen(false);
                         my_profile_store.setSelectedPaymentMethod('');
+                        my_ads_store.setShouldShowAddPaymentMethod(false);
+                        onCancel?.();
                         hideModal({
-                            should_hide_all_modals: my_ads_store.show_ad_form || my_ads_store.show_edit_ad_form,
+                            should_save_form_history: false,
+                            should_hide_all_modals: should_hide_all_modals_on_cancel ?? false,
                         });
                     }}
                     secondary

diff --git a/...-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.jsx b/...-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.jsx
@@ -16,6 +16,9 @@ const CreateAdAddPaymentMethodModal = () => {
         if (my_profile_store.selected_payment_method.length > 0 || general_store.is_form_modified) {
             showModal({
                 key: 'CancelAddPaymentMethodModal',
+                props: {
+                    should_hide_all_modals_on_cancel: true,
+                },
             });
         } else {
             hideModal({

diff --git a/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx b/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx
@@ -5,8 +5,8 @@ import { Button, Modal } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
-const ErrorModal = ({ error_message, error_modal_title, has_close_icon, setIsErrorModalOpen, width }) => {
-    const { is_modal_open } = useModalManagerContext();
+const ErrorModal = ({ error_message, error_modal_title, has_close_icon, width }) => {
+    const { hideModal, is_modal_open } = useModalManagerContext();
 
     return (
         <Modal
@@ -18,7 +18,7 @@ const ErrorModal = ({ error_message, error_modal_title, has_close_icon, setIsErr
         >
             <Modal.Body className='error-modal__body'>{error_message}</Modal.Body>
             <Modal.Footer>
-                <Button large primary onClick={() => setIsErrorModalOpen(false)}>
+                <Button large primary onClick={hideModal}>
                     <Localize i18n_default_text='Ok' />
                 </Button>
             </Modal.Footer>

diff --git a/packages/p2p/src/components/modal-manager/modals/quick-add-modal/index.js b/packages/p2p/src/components/modal-manager/modals/quick-add-modal/index.js
@@ -0,0 +1,4 @@
+import QuickAddModal from './quick-add-modal.jsx';
+import './quick-add-modal.scss';
+
+export default QuickAddModal;