Skip to content

Commit f5cfecb

Browse files
Dhruv-derivDhruv-deriv
committed
Merge branch 'dhruv/stylebranch' of https://github.com/Dhruv-deriv/deriv-app into dhruv/TRAH-3963/Refactored-styling-MT5-PasswordModal
2 parents 904bdfb + c75fa3d commit f5cfecb

File tree

478 files changed

+8831
-5964
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

478 files changed

+8831
-5964
lines changed

‎packages/account/src/Components/network-status-toast-popup/network-status-toast-popup.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useLayoutEffect, useState } from 'react';
1+
import { useEffect, useState } from 'react';
22
import { createPortal } from 'react-dom';
33
import { observer, useStore } from '@deriv/stores';
44
import { useDevice } from '@deriv-com/ui';

‎packages/account/src/Styles/account.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1689,7 +1689,6 @@ $MIN_HEIGHT_FLOATING: calc(
16891689
color: var(--text-prominent);
16901690
font-size: var(--text-size-xs);
16911691
line-height: 1.43;
1692-
font-weight: bold;
16931692

16941693
&__title {
16951694
margin-bottom: 18px;

‎packages/appstore/src/components/account-transfer-modal/__tests__/account-transfer-modal.spec.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import AccountTransferModal from '../account-transfer-modal';
33
import { render, screen } from '@testing-library/react';
44
import { StoreProvider, mockStore } from '@deriv/stores';
5+
import { MemoryRouter } from 'react-router-dom';
56

67
jest.mock('@deriv/cashier/src/pages/account-transfer', () => jest.fn(() => <div>AccountTransfer</div>));
78

@@ -24,6 +25,7 @@ describe('AccountTransferModal', () => {
2425
account_transfer: {
2526
is_transfer_confirm: false,
2627
should_switch_account: false,
28+
error: '',
2729
},
2830
general_store: { setActiveTab: jest.fn() },
2931
},
@@ -50,6 +52,7 @@ describe('AccountTransferModal', () => {
5052
account_transfer: {
5153
is_transfer_confirm: false,
5254
should_switch_account: false,
55+
error: '',
5356
},
5457
general_store: { setActiveTab: jest.fn() },
5558
},
@@ -77,6 +80,7 @@ describe('AccountTransferModal', () => {
7780
account_transfer: {
7881
is_transfer_confirm: false,
7982
should_switch_account: true,
83+
error: '',
8084
},
8185
general_store: { setActiveTab: jest.fn() },
8286
},
@@ -99,4 +103,38 @@ describe('AccountTransferModal', () => {
99103
'dc-modal-header__title--account-transfer-modal'
100104
);
101105
});
106+
107+
it('should open error dialog when financial assessment error is present', async () => {
108+
const mock = mockStore({
109+
modules: {
110+
cashier: {
111+
account_transfer: {
112+
is_transfer_confirm: false,
113+
should_switch_account: true,
114+
error: {
115+
code: 'FinancialAssessmentRequired',
116+
message: 'Please complete your financial assessment.',
117+
},
118+
},
119+
general_store: { setActiveTab: jest.fn() },
120+
},
121+
},
122+
});
123+
124+
const wrapper = ({ children }: { children: JSX.Element }) => (
125+
<StoreProvider store={mock}>
126+
<MemoryRouter>{children}</MemoryRouter>
127+
</StoreProvider>
128+
);
129+
130+
render(
131+
<AccountTransferModal is_modal_open={true} toggleModal={mock.traders_hub.toggleAccountTransferModal} />,
132+
{
133+
wrapper,
134+
}
135+
);
136+
137+
expect(screen.getByText('Cashier Error')).toBeInTheDocument();
138+
expect(screen.getByText(/financial assessment/i)).toBeInTheDocument();
139+
});
102140
});

‎packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2-
import { useHistory } from 'react-router-dom';
3-
import { Modal } from '@deriv/components';
2+
import { Link, useHistory } from 'react-router-dom';
3+
import { Modal, Dialog } from '@deriv/components';
44
import { routes } from '@deriv/shared';
55
import { useStore, observer } from '@deriv/stores';
6-
import { Localize } from '@deriv/translations';
6+
import { Localize, localize } from '@deriv/translations';
77
import AccountTransfer from '@deriv/cashier/src/pages/account-transfer';
88
import './account-transfer-modal.scss';
99

@@ -16,17 +16,19 @@ const AccountTransferModal = observer(({ is_modal_open, toggleModal }: TAccountT
1616
const {
1717
modules: {
1818
cashier: {
19-
account_transfer: { is_transfer_confirm, should_switch_account, setShouldSwitchAccount },
19+
account_transfer: { is_transfer_confirm, should_switch_account, setShouldSwitchAccount, error },
2020
general_store: { setActiveTab },
2121
},
2222
},
2323
traders_hub: { closeModal, setSelectedAccount },
2424
} = useStore();
25+
const [is_error_dialog_open, setIsErrorDialogOpen] = React.useState(false);
2526

2627
const history = useHistory();
2728

2829
React.useEffect(() => {
2930
if (is_modal_open) setActiveTab('account_transfer');
31+
if (error.code === 'FinancialAssessmentRequired') setIsErrorDialogOpen(true);
3032

3133
return () => {
3234
if (is_modal_open) {
@@ -35,9 +37,10 @@ const AccountTransferModal = observer(({ is_modal_open, toggleModal }: TAccountT
3537
setActiveTab('deposit');
3638
closeModal();
3739
}
40+
if (error.code === 'FinancialAssessmentRequired') setIsErrorDialogOpen(false);
3841
};
3942
// eslint-disable-next-line react-hooks/exhaustive-deps
40-
}, [is_modal_open]);
43+
}, [is_modal_open, error.code]);
4144

4245
const modal_title = !is_transfer_confirm && <Localize i18n_default_text={'Transfer funds to your accounts'} />;
4346

@@ -51,6 +54,32 @@ const AccountTransferModal = observer(({ is_modal_open, toggleModal }: TAccountT
5154
history.push(routes.cashier_acc_transfer);
5255
};
5356

57+
const dismissError = () => {
58+
toggleModal();
59+
setIsErrorDialogOpen(false);
60+
error.setErrorMessage({ code: '', message: '' }, null, false);
61+
};
62+
63+
if (is_error_dialog_open) {
64+
return (
65+
<Dialog
66+
title={localize('Cashier Error')}
67+
confirm_button_text={localize('OK')}
68+
onConfirm={dismissError}
69+
is_visible={is_error_dialog_open}
70+
has_close_icon={false}
71+
dismissable={false}
72+
>
73+
<Localize
74+
i18n_default_text='Please complete your <0>financial assessment</0>.'
75+
components={[
76+
<Link to={routes.financial_assessment} key={0} className='link' onClick={dismissError} />,
77+
]}
78+
/>
79+
</Dialog>
80+
);
81+
}
82+
5483
return (
5584
<Modal
5685
className={should_switch_account ? 'account-transfer-modal' : ''}

‎packages/bot-web-ui/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
"react-router-dom": "^5.2.0",
105105
"react-toastify": "^9.1.3",
106106
"react-transition-group": "4.4.2",
107+
"html-react-parser": "5.1.12",
107108
"yup": "^0.32.11"
108109
}
109110
}

‎packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import classNames from 'classnames';
33
import { Text } from '@deriv/components';
44
import { observer, useStore } from '@deriv/stores';
55
import { TStrategyDescription } from '../types';
6+
import parse from 'html-react-parser';
67

78
const StrategyDescription = observer(({ item, font_size }: TStrategyDescription) => {
89
const { ui } = useStore();
@@ -13,23 +14,29 @@ const StrategyDescription = observer(({ item, font_size }: TStrategyDescription)
1314
const class_names = classNames(`qs__description__content ${class_name}`);
1415
return (
1516
<>
16-
{item?.content?.map((text: string) => (
17-
<div className={class_names} key={text}>
18-
<Text size={font_size} dangerouslySetInnerHTML={{ __html: text }} />
19-
</div>
20-
))}
17+
{item?.content?.map((text: string) => {
18+
const parsed_text = parse(text);
19+
return (
20+
<div className={class_names} key={text}>
21+
<Text size={font_size}>{parsed_text}</Text>
22+
</div>
23+
);
24+
})}
2125
</>
2226
);
2327
}
2428
case 'text_italic': {
2529
const class_names = classNames(`qs__description__content italic ${class_name}`);
2630
return (
2731
<>
28-
{item?.content?.map((text: string) => (
29-
<div className={class_names} key={text}>
30-
<Text size={font_size} dangerouslySetInnerHTML={{ __html: text }} />
31-
</div>
32-
))}
32+
{item?.content?.map((text: string) => {
33+
const parsed_text = parse(text);
34+
return (
35+
<div className={class_names} key={text}>
36+
<Text size={font_size}>{parsed_text}</Text>
37+
</div>
38+
);
39+
})}
3340
</>
3441
);
3542
}

‎packages/bot-web-ui/src/pages/bot-builder/quick-strategy/inputs/qs-input.tsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,27 @@ const QSInput: React.FC<TQSInput> = observer(
3838
const [has_focus, setFocus] = React.useState(false);
3939
const { setFieldValue, setFieldTouched } = useFormikContext();
4040
const is_number = type === 'number';
41-
const max_value = 999999999999;
41+
const max_value = Number.MAX_SAFE_INTEGER;
42+
const input_ref = React.useRef<HTMLInputElement>(null);
43+
44+
React.useEffect(() => {
45+
const handleWheel = (event: WheelEvent) => {
46+
if (document.activeElement === input_ref.current) {
47+
event.preventDefault();
48+
}
49+
};
50+
51+
const el_input = input_ref.current;
52+
if (el_input) {
53+
el_input.addEventListener('wheel', handleWheel, { passive: false });
54+
}
55+
56+
return () => {
57+
if (el_input) {
58+
el_input.removeEventListener('wheel', handleWheel);
59+
}
60+
};
61+
}, []);
4262

4363
const handleButtonInputChange = (e: MouseEvent<HTMLButtonElement>, value: string) => {
4464
e?.preventDefault();
@@ -140,6 +160,7 @@ const QSInput: React.FC<TQSInput> = observer(
140160
bottom_label={is_exclusive_field ? currency : ''}
141161
max_characters={2}
142162
maxLength={2}
163+
ref={input_ref}
143164
/>
144165
</Popover>
145166
</div>

‎packages/bot-web-ui/src/pages/server-side-bot/add-bot/add-bot.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import DesktopFormWrapper from './form-wrappers/desktop-form-wrapper';
1010
import MobileFormWrapper from './form-wrappers/mobile-form-wrapper';
1111
import LossThresholdWarningDialog from './parts/loss-threshold-warning-dialog';
1212
import { STRATEGIES } from './config';
13+
import { SERVER_BOT_FIELDS } from './constants';
1314
import Form from './form';
1415
import { TConfigItem, TFormData } from './types';
1516
import './add-bot.scss';
@@ -51,11 +52,7 @@ export const FormikWrapper: React.FC<TFormikWrapper> = observer(({ children, set
5152
const getSavedValues = () => {
5253
let data: TFormData | null = null;
5354
try {
54-
const data = JSON.parse(localStorage.getItem('server-form-fields') || '{}');
55-
Object.keys(data).forEach(key => {
56-
initial_value[key as keyof TFormData] = data[key];
57-
setValue(key, data[key]);
58-
});
55+
data = JSON.parse(localStorage.getItem(SERVER_BOT_FIELDS) || '{}');
5956
} catch {
6057
data = null;
6158
}
@@ -75,18 +72,17 @@ export const FormikWrapper: React.FC<TFormikWrapper> = observer(({ children, set
7572
loss: data?.loss ?? '',
7673
profit: data?.profit ?? '',
7774
size: data?.size ?? String(qs_config.QUICK_STRATEGY.DEFAULT.size),
75+
max_stake: data?.max_stake ?? 10,
7876
};
7977
return initial_value;
8078
};
8179

8280
React.useEffect(() => {
81+
initializeLossThresholdWarningData();
82+
8383
return () => {
8484
is_mounted.current = false;
8585
};
86-
}, []);
87-
88-
React.useEffect(() => {
89-
initializeLossThresholdWarningData();
9086
// eslint-disable-next-line react-hooks/exhaustive-deps
9187
}, []);
9288

@@ -179,6 +175,7 @@ export const FormikWrapper: React.FC<TFormikWrapper> = observer(({ children, set
179175

180176
const handleSubmit = (form_data: TFormData) => {
181177
setFormVisibility(false);
178+
localStorage?.setItem(SERVER_BOT_FIELDS, JSON.stringify(form_data));
182179
createBot(form_data);
183180
};
184181

‎packages/bot-web-ui/src/pages/server-side-bot/add-bot/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const SERVER_BOT_FIELDS = 'server-form-fields';

‎packages/bot-web-ui/src/pages/server-side-bot/add-bot/form.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import React, { useCallback } from 'react';
1+
import React from 'react';
22
import { useFormikContext } from 'formik';
33
import { observer, useStore } from '@deriv/stores';
44
import { useDBotStore } from 'Stores/useDBotStore';
5-
import QSInput from './inputs/qs-input';
6-
import QSInputLabel from './inputs/qs-input-label';
7-
import QsTextInput from './inputs/qs-text-input';
8-
import QSCheckbox from './inputs/qs-toggle-switch';
5+
import QSInput from './inputs/add-input';
6+
import QSInputLabel from './inputs/add-input-label';
7+
import QsTextInput from './inputs/add-text-input';
8+
import QSCheckbox from './inputs/add-toggle-switch';
99
import ContractTypeSelect from './selects/contract-type';
1010
import DurationTypeSelect from './selects/duration-type';
1111
import SymbolSelect from './selects/symbol';
1212
import TradeTypeSelect from './selects/trade-type';
1313
import { STRATEGIES } from './config';
14+
import { SERVER_BOT_FIELDS } from './constants';
1415
import { TConfigItem, TFormData, TShouldHave } from './types';
1516
import './add-bot.scss';
1617

@@ -29,7 +30,7 @@ const QuickStrategyForm = observer(() => {
2930
window.addEventListener('keydown', handleEnter);
3031
let data: TFormData | null = null;
3132
try {
32-
data = JSON.parse(localStorage.getItem('server-form-fields') ?? '{}');
33+
data = JSON.parse(localStorage.getItem(SERVER_BOT_FIELDS) ?? '{}');
3334
} catch {
3435
data = null;
3536
}
@@ -82,7 +83,9 @@ const QuickStrategyForm = observer(() => {
8283
switch (field.type) {
8384
// Generic or common fields
8485
case 'text': {
85-
if (field.name === 'name') return <QsTextInput field={field} name={field.name} />;
86+
if (field.name === 'name') {
87+
return <QsTextInput key={key} field={field} name={field.name} />;
88+
}
8689
return (
8790
<QSInput
8891
{...field}

‎packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/__tests__/qs-input-label.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
55
import { mock_ws } from 'Utils/mock';
66
import RootStore from 'Stores/root-store';
77
import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
8-
import QSInputLabel from '../qs-input-label';
8+
import QSInputLabel from '../add-input-label';
99

1010
jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
1111

‎packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/__tests__/qs-input.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
66
import { mock_ws } from 'Utils/mock';
77
import RootStore from 'Stores/root-store';
88
import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
9-
import QSInput from '../qs-input';
9+
import QSInput from '../add-input';
1010

1111
jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
1212

‎packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/__tests__/qs-toggle-switch.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
77
import { mock_ws } from 'Utils/mock';
88
import RootStore from 'Stores/root-store';
99
import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
10-
import QSToggleSwitch from '../qs-toggle-switch';
10+
import QSToggleSwitch from '../add-toggle-switch';
1111

1212
jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
1313
jest.mock('formik', () => ({

‎packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/qs-input-label.tsx renamed to ‎packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/add-input-label.tsx

File renamed without changes.

0 commit comments

Comments
 (0)