Merge pull request binary-com#30 from adrienne-deriv/p2ps-1110/modal-…

…manager-refactoring

Adrienne / Refactor modal manager and modal form

packages/p2p/src/components/modal-manager/__mocks__/mock-modal-manager-context-provider.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { useModalManagerContext } from '../modal-manager-context';
+import { Modal } from '@deriv/components';
+
+type TMockBuySellModalProps = {
+    title?: string;
+    subtitle?: string;
+};
+
+type TMockMyAdsDeleteModalProps = {
+    title?: string;
+};
+
+export function MockBuySellModal({ title, subtitle }: TMockBuySellModalProps) {
+    const { is_modal_open, hideModal, showModal, useRegisterModalProps } = useModalManagerContext();
+
+    useRegisterModalProps({
+        key: 'MyAdsDeleteModal',
+        props: {
+            title: 'Title from BuySellModal',
+        } as unknown as Record<string, never>,
+    });
+
+    const showMyAdsDeleteModal = () => {
+        showModal({
+            key: 'MyAdsDeleteModal',
+            props: {},
+        });
+    };
+
+    return (
+        <Modal is_open={is_modal_open}>
+            {title && <div>BuySellModal with {title}</div>}
+            {title && subtitle && (
+                <div>
+                    BuySellModal with {title} and {subtitle}
+                </div>
+            )}
+            {!title && !subtitle && <div>BuySellModal</div>}
+            <button onClick={() => hideModal()}>Cancel</button>
+            <button onClick={showMyAdsDeleteModal}>Apply</button>
+        </Modal>
+    );
+}
+
+export function MockMyAdsDeleteModal({ title }: TMockMyAdsDeleteModalProps) {
+    const { is_modal_open, hideModal } = useModalManagerContext();
+    return (
+        <Modal is_open={is_modal_open}>
+            {title && <h1>{title}</h1>}
+            <h1>MyAdsDeleteModal</h1>
+            <button onClick={() => hideModal()}>Cancel</button>
+        </Modal>
+    );
+}
+
+export function MockEditAdCancelModal() {
+    const { hideModal, showModal, useRegisterModalProps } = useModalManagerContext();
+
+    const showBuySellModal = () =>
+        showModal({
+            key: 'BuySellModal',
+            props: {},
+        });
+
+    const onSubmit = () => {
+        hideModal({
+            should_save_form_history: true,
+        });
+    };
+
+    useRegisterModalProps([
+        {
+            key: 'BuySellModal',
+            props: {
+                title: 'my title',
+                subtitle: 'my subtitle',
+            },
+        },
+    ]);
+
+    return (
+        <div>
+            <button onClick={showBuySellModal}>Go to BuySellModal</button>
+            <button onClick={onSubmit}>Submit</button>
+        </div>
+    );
+}
+
+export function MockPage() {
+    const { isCurrentModal, showModal, hideModal } = useModalManagerContext();
+
+    const showBuySellModal = () =>
+        showModal({
+            key: 'BuySellModal',
+            props: {},
+        });
+
+    const showMyAdsDeleteModal = () => {
+        showModal({
+            key: 'MyAdsDeleteModal',
+            props: {},
+        });
+    };
+
+    const showEditAdCancelModal = () => {
+        showModal({
+            key: 'EditAdCancelModal',
+            props: {},
+        });
+    };
+
+    const hideModals = () => {
+        hideModal({ should_hide_all_modals: true });
+    };
+
+    return (
+        <div>
+            {isCurrentModal('MyAdsDeleteModal') && <h1>Delete Ads</h1>}
+            <button onClick={showBuySellModal}>Show BuySellModal</button>
+            <button onClick={showMyAdsDeleteModal}>Show MyAdsDeleteModal</button>
+            <button onClick={showEditAdCancelModal}>Show EditAdCancelModal</button>
+            <button onClick={() => hideModal()}>Hide Modal</button>
+            <button onClick={hideModals}>Hide All Modals</button>
+        </div>
+    );
+}

packages/p2p/src/components/modal-manager/__mocks__/mock-modal-manager.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+type TMockBuySellModalProps = {
+    title?: string;
+    subtitle?: string;
+};
+
+export function MockModal({ title, subtitle }: TMockBuySellModalProps) {
+    if (title && subtitle) {
+        return (
+            <div>
+                BuySellModal with {title} and {subtitle}
+            </div>
+        );
+    } else if (title) {
+        return <div>BuySellModal with {title}</div>;
+    }
+    return <div>BuySellModal</div>;
+}