Merge pull request #114 from thisyahlen-deriv/thisyahlen/ctradersuccess

chore: add cTrader Success

src/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx

@@ -0,0 +1,68 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { PlatformDetails } from '@cfd/constants';
+import { CFDSuccess } from '@cfd/screens';
+import { Button, Modal } from '@deriv-com/ui';
+
+import { useQueryParams } from '@/hooks';
+import { useUIContext } from '@/providers';
+
+export const CTraderSuccessModal = () => {
+    const navigate = useNavigate();
+    const { uiState } = useUIContext();
+    const { isModalOpen, closeModal } = useQueryParams();
+
+    const isDemo = uiState.accountType === 'demo';
+
+    const renderButtons = useCallback(
+        () =>
+            isDemo ? (
+                <Button className='rounded-xs' onClick={closeModal}>
+                    Continue
+                </Button>
+            ) : (
+                <div className='space-x-10'>
+                    <Button
+                        className='border-2 rounded-xs border-system-light-less-prominent'
+                        color='black'
+                        onClick={closeModal}
+                        variant='outlined'
+                    >
+                        Maybe later
+                    </Button>
+                    <Button
+                        className='rounded-xs'
+                        onClick={() => {
+                            closeModal();
+                            navigate('/cashier/transfer');
+                        }}
+                    >
+                        Transfer funds
+                    </Button>
+                </div>
+            ),
+        [closeModal, isDemo, navigate]
+    );
+
+    const description = isDemo
+        ? `Congratulations, you have successfully created your demo ${PlatformDetails.ctrader.title} CFDs account.`
+        : `Congratulations, you have successfully created your real ${PlatformDetails.ctrader.title} CFDs account. To start trading, transfer funds from your Deriv account into this account.`;
+
+    return (
+        <Modal
+            isOpen={isModalOpen('CTraderSuccessModal')}
+            onRequestClose={closeModal}
+            ariaHideApp={false}
+            className='max-w-[440px] rounded-sm h-auto'
+        >
+            <Modal.Body>
+                <CFDSuccess
+                    description={description}
+                    platform={PlatformDetails.ctrader.platform}
+                    renderButtons={renderButtons}
+                />
+            </Modal.Body>
+        </Modal>
+    );
+};

src/cfd/modals/CTraderSuccessModal/index.ts

@@ -0,0 +1 @@
+export { CTraderSuccessModal } from './CTraderSuccessModal';

src/cfd/modals/index.ts

@@ -3,3 +3,4 @@ export * from './MT5PasswordModal';
 export * from './MT5SuccessModal';
 export * from './TradeModal';
 export * from './DxtradeSuccessModal';
+export * from './CTraderSuccessModal';

src/modals/Modals.tsx

@@ -1,6 +1,13 @@
 import { Fragment } from 'react/jsx-runtime';
 
-import { DxtradePasswordModal, DxtradeSuccessModal, MT5PasswordModal, MT5SuccessModal, TradeModal } from '@/cfd/modals';
+import {
+    CTraderSuccessModal,
+    DxtradePasswordModal,
+    DxtradeSuccessModal,
+    MT5PasswordModal,
+    MT5SuccessModal,
+    TradeModal,
+} from '@/cfd/modals';
 import { RealAccountCreation } from '@/flows';
 
 import { JurisdictionModal } from './JurisdictionModal';
@@ -17,6 +24,7 @@ export const Modals = () => {
             {/* PLS DO NOT ADD ANY PROPS TO ANY MODALS HERE.💥 */}
             <AccountSelector />
             <AccountOpeningSuccessModal />
+            <CTraderSuccessModal />
             <DxtradePasswordModal />
             <DxtradeSuccessModal />
             <JurisdictionModal />

src/modals/__tests__/Modals.spec.tsx

@@ -68,6 +68,12 @@ jest.mock('@/cfd/modals/DxtradeSuccessModal', () => {
     return { DxtradeSuccessModal };
 });
 
+jest.mock('@/cfd/modals/CTraderSuccessModal', () => {
+    const CTraderSuccessModal = () => <div>CTraderSuccessModal</div>;
+    CTraderSuccessModal.displayName = 'CTraderSuccessModal';
+    return { CTraderSuccessModal };
+});
+
 describe('Modals', () => {
     it('should render all modals', () => {
         render(<Modals />);
@@ -81,5 +87,6 @@ describe('Modals', () => {
         expect(screen.getByText('TradeModal')).toBeInTheDocument();
         expect(screen.getByText('DxtradePasswordModal')).toBeInTheDocument();
         expect(screen.getByText('DxtradeSuccessModal')).toBeInTheDocument();
+        expect(screen.getByText('CTraderSuccessModal')).toBeInTheDocument();
     });
 });