[FEQ] P2P feat: added daily limit modal (#13017)

* feat: added daily limit modal

* fix: updated package json

* fix: updated package json

* fix: changed param values

* fix: renamed the modal files, pr comments resolved

* fix: change in styles

* fix: remove commented out lines

* fix: updated deriv-com/ui version

* fix: replaced loading with loader component from @deriv-com/ui

* fix: removed todo for loader

* fix: updated package.json

* fix: removed default size

packages/p2p-v2/package.json

@@ -32,6 +32,7 @@
     "devDependencies": {
         "@testing-library/react": "^12.0.0",
         "@types/react-dom": "^18.0.0",
+        "@types/react-modal": "^3.16.3",
         "@typescript-eslint/eslint-plugin": "5.45.0",
         "@typescript-eslint/parser": "5.45.0",
         "eslint-plugin-local-rules": "2.0.0",

packages/p2p-v2/src/components/Modals/DailyLimitModal/DailyLimitModal.scss

@@ -0,0 +1,33 @@
+.p2p-v2-daily-limit-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+    width: 44rem;
+    padding: 2.4rem;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
+
+    @include mobile {
+        padding: 1.6rem;
+        width: 32.8rem;
+    }
+
+    &__text {
+        margin: 2.4rem 0;
+
+        @include mobile {
+            margin: 1.6rem 0;
+        }
+    }
+
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 1rem;
+    }
+}

packages/p2p-v2/src/components/Modals/DailyLimitModal/DailyLimitModal.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from 'react';
+import Modal from 'react-modal';
+import { p2p } from '@deriv/api';
+import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Loader } from '@deriv-com/ui/dist/components/Loader';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { useDevice } from '../../../hooks';
+import { customStyles } from '../helpers';
+import './DailyLimitModal.scss';
+
+type TDailyLimitModalProps = {
+    currency: string;
+    isModalOpen: boolean;
+    onRequestClose: () => void;
+};
+
+const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitModalProps) => {
+    const { data, error, isLoading, isSuccess, mutate } = p2p.advertiser.useUpdate();
+    const { daily_buy_limit, daily_sell_limit } = data ?? {};
+    const { isMobile } = useDevice();
+    useEffect(() => {
+        Modal.setAppElement('#v2_modal_root');
+    }, []);
+
+    const getModalContent = () => {
+        //TODO: modal header title to be moved out if needed according to implementation, can be moved to a separate getheader, getcontent, getfooter functions
+        if (isLoading) {
+            return <Loader />;
+        } else if (isSuccess) {
+            return (
+                <>
+                    <Text color='prominent' weight='bold'>
+                        Success!
+                    </Text>
+                    <Text as='p' className='p2p-v2-daily-limit-modal__text' color='prominent' size='sm'>
+                        {`Your daily limits have been increased to ${daily_buy_limit} ${currency} (buy) and ${daily_sell_limit} ${currency} (sell).`}
+                    </Text>
+                    <div className='p2p-v2-daily-limit-modal__footer'>
+                        <Button onClick={onRequestClose} size='lg' textSize='sm'>
+                            Ok
+                        </Button>
+                    </div>
+                </>
+            );
+        } else if (error) {
+            return (
+                <>
+                    <Text color='prominent' weight='bold'>
+                        An internal error occured
+                    </Text>
+                    <Text as='p' className='p2p-v2-daily-limit-modal__text' color='prominent' size='sm'>
+                        {`Sorry, we're unable to increase your limits right now. Please try again in a few minutes.`}
+                    </Text>
+                    <div className='p2p-v2-daily-limit-modal__footer'>
+                        <Button onClick={onRequestClose} size='lg' textSize='sm'>
+                            Ok
+                        </Button>
+                    </div>
+                </>
+            );
+        }
+        return (
+            <>
+                <Text color='prominent' weight='bold'>
+                    Are you sure?
+                </Text>
+                <Text as='p' className='p2p-v2-daily-limit-modal__text' color='prominent' size={isMobile ? 'md' : 'sm'}>
+                    You won’t be able to change your buy and sell limits again after this. Do you want to continue?
+                </Text>
+                <div className='p2p-v2-daily-limit-modal__footer'>
+                    <Button onClick={onRequestClose} size='lg' textSize='sm' variant='outlined'>
+                        No
+                    </Button>
+                    <Button onClick={() => mutate({ upgrade_limits: 1 })} size='lg' textSize='sm'>
+                        Yes, continue
+                    </Button>
+                </div>
+            </>
+        );
+    };
+
+    return (
+        // TODO: below modal will be rewritten to use @deriv/ui modal
+        <Modal
+            className='p2p-v2-daily-limit-modal'
+            isOpen={isModalOpen}
+            onRequestClose={onRequestClose}
+            style={customStyles}
+        >
+            {getModalContent()}
+        </Modal>
+    );
+};
+
+export default DailyLimitModal;

packages/p2p-v2/src/components/Modals/DailyLimitModal/index.ts

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

packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/MyProfileDailyLimit.scss

@@ -0,0 +1,10 @@
+.p2p-v2-my-profile-daily-limit {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1.4rem;
+
+    & span {
+        flex: 1;
+    }
+}

packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/MyProfileDailyLimit.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import DailyLimitModal from '../../../../components/Modals/DailyLimitModal/DailyLimitModal';
+import { useDevice } from '../../../../hooks';
+import './MyProfileDailyLimit.scss';
+
+type TMyProfileDailyLimitProps = {
+    buyLimit: number;
+    currency: string;
+    sellLimit: number;
+};
+
+const MyProfileDailyLimit = ({ buyLimit, currency, sellLimit }: TMyProfileDailyLimitProps) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { isMobile } = useDevice();
+
+    return (
+        <>
+            <div className='p2p-v2-my-profile-daily-limit'>
+                <Text color='less-prominent' lineHeight='sm' size='xs'>
+                    Want to increase your daily limits to{' '}
+                    <Text color='less-prominent' lineHeight='sm' size='xs' weight='bold'>
+                        {buyLimit} {currency}{' '}
+                    </Text>{' '}
+                    (buy) and{' '}
+                    <Text color='less-prominent' lineHeight='sm' size='xs' weight='bold'>
+                        {sellLimit} {currency}{' '}
+                    </Text>{' '}
+                    (sell)?
+                </Text>
+                <Button
+                    onClick={() => setIsModalOpen(true)}
+                    size='xs'
+                    textSize={isMobile ? 'sm' : 'xs'}
+                    variant='ghost'
+                >
+                    Increase my limits
+                </Button>
+            </div>
+            {/* TODO: to move the below to parent */}
+            <DailyLimitModal
+                currency={currency}
+                isModalOpen={isModalOpen}
+                onRequestClose={() => setIsModalOpen(false)}
+            />
+        </>
+    );
+};
+
+export default MyProfileDailyLimit;

packages/p2p-v2/src/pages/my-profile/screens/MyProfileDailyLimit/index.ts

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