Skip to content

Commit

Permalink
Merge pull request #114 from thisyahlen-deriv/thisyahlen/ctradersuccess
Browse files Browse the repository at this point in the history
chore: add cTrader Success
  • Loading branch information
thisyahlen-deriv authored Apr 19, 2024
2 parents 0a45e9f + 37c890c commit b74f364
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 1 deletion.
68 changes: 68 additions & 0 deletions src/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
1 change: 1 addition & 0 deletions src/cfd/modals/CTraderSuccessModal/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { CTraderSuccessModal } from './CTraderSuccessModal';
1 change: 1 addition & 0 deletions src/cfd/modals/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export * from './MT5PasswordModal';
export * from './MT5SuccessModal';
export * from './TradeModal';
export * from './DxtradeSuccessModal';
export * from './CTraderSuccessModal';
10 changes: 9 additions & 1 deletion src/modals/Modals.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -17,6 +24,7 @@ export const Modals = () => {
{/* PLS DO NOT ADD ANY PROPS TO ANY MODALS HERE.💥 */}
<AccountSelector />
<AccountOpeningSuccessModal />
<CTraderSuccessModal />
<DxtradePasswordModal />
<DxtradeSuccessModal />
<JurisdictionModal />
Expand Down
7 changes: 7 additions & 0 deletions src/modals/__tests__/Modals.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />);
Expand All @@ -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();
});
});

0 comments on commit b74f364

Please sign in to comment.