From 6733cdadde9e0c2a4a5a354e4f84a96a5a3f03d0 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Mon, 7 Oct 2024 15:31:53 +0800 Subject: [PATCH 01/15] chore: previous fixes --- packages/core/src/Constants/form-error-messages.js | 1 + .../utils/validation/declarative-validation-rules.ts | 10 +++++++++- .../src/utils/validation/form-error-messages-types.ts | 1 + 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/core/src/Constants/form-error-messages.js b/packages/core/src/Constants/form-error-messages.js index 491d4095bca5..98143033983d 100644 --- a/packages/core/src/Constants/form-error-messages.js +++ b/packages/core/src/Constants/form-error-messages.js @@ -3,6 +3,7 @@ import { address_permitted_special_characters_message } from '@deriv/shared'; export const FORM_ERROR_MESSAGES = { empty_address: () => localize('This field is required'), + empty_barrier: () => localize('Barrier is a required field.'), address: () => localize('Use only the following special characters: {{permitted_characters}}', { permitted_characters: address_permitted_special_characters_message, diff --git a/packages/shared/src/utils/validation/declarative-validation-rules.ts b/packages/shared/src/utils/validation/declarative-validation-rules.ts index 0fc8148ea6d9..0964c8dab13b 100644 --- a/packages/shared/src/utils/validation/declarative-validation-rules.ts +++ b/packages/shared/src/utils/validation/declarative-validation-rules.ts @@ -64,7 +64,15 @@ export const validLength = (value = '', options: TOptions) => (options.max ? value.length <= Number(options.max) : true); export const validPassword = (value: string) => /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])[!-~]{8,25}$/.test(value); export const validEmail = (value: string) => /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,63}$/.test(value); -const validBarrier = (value: string) => /^[+-]?\d+\.?\d*$/.test(value); +const validBarrier = (value: string) => { + if (value === '+' || value === '-') { + return { + is_ok: false, + message: form_error_messages?.empty_barrier(), + }; + } + return { is_ok: /^[+-]?\d+(\.\d+)?$/.test(value) }; +}; const validGeneral = (value: string) => !/[`~!@#$%^&*)(_=+[}{\]\\/";:?><|]+/.test(value); const validRegular = (value: string, options: TOptions) => options.regex?.test(value); const confirmRequired = (value: string) => !!value; diff --git a/packages/shared/src/utils/validation/form-error-messages-types.ts b/packages/shared/src/utils/validation/form-error-messages-types.ts index b04937dbb60d..12414417f8c5 100644 --- a/packages/shared/src/utils/validation/form-error-messages-types.ts +++ b/packages/shared/src/utils/validation/form-error-messages-types.ts @@ -3,6 +3,7 @@ type TParameter = string | number; export type TFormErrorMessagesTypes = Record< | 'empty_address' + | 'empty_barrier' | 'address' | 'barrier' | 'email' From f8b54f9c14f6753154fcd41265e03c70a20ece7b Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Mon, 7 Oct 2024 15:32:45 +0800 Subject: [PATCH 02/15] feat: add decimal places --- .../Components/TradeParameters/Barrier/barrier-input.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx index 1cb20555cbaf..e1d4cc413ee7 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx @@ -28,6 +28,7 @@ const BarrierInput = observer( }) => { const { barrier_1, onChange, validation_errors, tick_data, setV2ParamsInitialValues } = useTraderStore(); const [option, setOption] = React.useState(0); + const { pip_size } = tick_data ?? {}; React.useEffect(() => { setInitialBarrierValue(barrier_1); @@ -39,6 +40,7 @@ const BarrierInput = observer( } else { setOption(2); } + onChange({ target: { name: 'barrier_1', value: barrier_1 } }); }, []); const handleChipSelect = (index: number) => { @@ -100,6 +102,7 @@ const BarrierInput = observer( } value={barrier_1} allowDecimals + decimals={pip_size} allowSign={false} inputMode='decimal' regex={/[^0-9.,]/g} @@ -116,6 +119,7 @@ const BarrierInput = observer( name='barrier_1' noStatusIcon addonLabel={option == 0 ? '+' : '-'} + decimals={pip_size} value={barrier_1.replace(/[+-]/g, '')} allowDecimals inputMode='decimal' From 675c4c9a1b60d9ee98a7d93a92709859cf693dc5 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Mon, 7 Oct 2024 15:34:02 +0800 Subject: [PATCH 03/15] chore: previous stake fixes --- .../TradeParameters/Stake/__tests__/stake.spec.tsx | 4 ++-- .../src/AppV2/Components/TradeParameters/Stake/stake.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Stake/__tests__/stake.spec.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Stake/__tests__/stake.spec.tsx index 2ecad971ce7f..853c9eab201c 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Stake/__tests__/stake.spec.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Stake/__tests__/stake.spec.tsx @@ -251,8 +251,8 @@ describe('Stake', () => { const error_text_rise = 'Minimum stake of 0.35 and maximum payout of 50000.00. Current payout is 50631.97.'; const error_text_fall = 'Minimum stake of 0.35 and maximum payout of 50000.00. Current payout is 50513.21.'; default_mock_store.modules.trade.proposal_info = { - CALL: { id: '', has_error: true, message: error_text_rise }, - PUT: { id: '', has_error: true, message: error_text_fall }, + CALL: { id: '', has_error: true, message: error_text_rise, error_field: 'amount' }, + PUT: { id: '', has_error: true, message: error_text_fall, error_field: 'amount' }, }; default_mock_store.modules.trade.validation_errors.amount = [error_text_fall]; default_mock_store.modules.trade.amount = '26500'; diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Stake/stake.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Stake/stake.tsx index 84d12d25bdf0..0070590ce984 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Stake/stake.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Stake/stake.tsx @@ -43,6 +43,7 @@ const Stake = observer(({ is_minimized }: TStakeProps) => { id: id_1, message: message_1 = '', payout: payout_1 = 0, + error_field: error_field_1, } = proposal_info[contract_types[0]] ?? {}; // second contract type data: const { @@ -50,10 +51,11 @@ const Stake = observer(({ is_minimized }: TStakeProps) => { id: id_2, message: message_2 = '', payout: payout_2 = 0, + error_field: error_field_2, } = proposal_info[contract_types[1]] ?? {}; const is_loading_proposal = !has_error_1 && !has_error_2 && (!id_1 || (!!contract_types[1] && !id_2)); - const proposal_error_message_1 = has_error_1 ? message_1 : ''; - const proposal_error_message_2 = has_error_2 ? message_2 : ''; + const proposal_error_message_1 = has_error_1 && error_field_1 === 'amount' ? message_1 : ''; + const proposal_error_message_2 = has_error_2 && error_field_2 === 'amount' ? message_2 : ''; const proposal_error_message = proposal_error_message_1 || proposal_error_message_2 || validation_errors?.amount?.[0]; /* TODO: stop using Max payout from error text as a default max payout and stop using error text for is_max_payout_exceeded after validation_params are added to proposal API (both success & error response): From 4c5402aa38f66e8c33c00bc220be26e05a9fe186 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 8 Oct 2024 11:52:07 +0800 Subject: [PATCH 04/15] feat: add snackbar on trade page for barrier --- .../TradeParameters/Barrier/barrier.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index 4661616f8c86..0e3597240782 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -8,16 +8,20 @@ import Carousel from 'AppV2/Components/Carousel'; import BarrierDescription from './barrier-description'; import BarrierInput from './barrier-input'; import CarouselHeader from 'AppV2/Components/Carousel/carousel-header'; +import { useSnackbar } from '@deriv-com/quill-ui'; type TDurationProps = { is_minimized?: boolean; }; const Barrier = observer(({ is_minimized }: TDurationProps) => { - const { barrier_1, onChange, duration_unit, setV2ParamsInitialValues, v2_params_initial_values } = useTraderStore(); + const { barrier_1, onChange, duration_unit, setV2ParamsInitialValues, v2_params_initial_values, validation_errors, proposal_info, trade_type_tab } = useTraderStore(); const [is_open, setIsOpen] = React.useState(false); const [initialBarrierValue, setInitialBarrierValue] = React.useState(''); const isDays = duration_unit == 'd'; + const has_error = validation_errors.barrier_1.length > 0 || proposal_info?.[trade_type_tab]?.has_error; + const { addSnackbar } = useSnackbar(); + const [barrier_error_shown, setBarrierErrorShown] = React.useState(false); const onClose = (is_saved = false) => { if (is_open) { @@ -29,6 +33,21 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { } }; + React.useEffect(() => { + const has_error = proposal_info?.[trade_type_tab]?.has_error; + const error_field = proposal_info?.[trade_type_tab]?.error_field; + const message = proposal_info?.[trade_type_tab]?.message; + + if (has_error && error_field === 'barrier' && !barrier_error_shown && !is_open && !is_minimized) { + addSnackbar({ + message: message, + hasCloseButton: true, + status: 'fail', + }); + setBarrierErrorShown(true); + } + }, [proposal_info]); + const barrier_carousel_pages = [ { id: 1, @@ -51,6 +70,7 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { value={v2_params_initial_values.barrier_1 || barrier_1} onClick={() => setIsOpen(true)} className={clsx('trade-params__option', is_minimized && 'trade-params__option--minimized')} + status={has_error && !is_open ? 'error' : undefined} /> onClose(false)} position='left' expandable={false}> From ac71b7900bc8378d1d084e43696e6a3fc028cdc0 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 8 Oct 2024 13:03:14 +0800 Subject: [PATCH 05/15] feat: fix formatting --- .../Components/TradeParameters/Barrier/barrier.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index 0e3597240782..e016c517f9d2 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -15,7 +15,16 @@ type TDurationProps = { }; const Barrier = observer(({ is_minimized }: TDurationProps) => { - const { barrier_1, onChange, duration_unit, setV2ParamsInitialValues, v2_params_initial_values, validation_errors, proposal_info, trade_type_tab } = useTraderStore(); + const { + barrier_1, + onChange, + duration_unit, + setV2ParamsInitialValues, + v2_params_initial_values, + validation_errors, + proposal_info, + trade_type_tab, + } = useTraderStore(); const [is_open, setIsOpen] = React.useState(false); const [initialBarrierValue, setInitialBarrierValue] = React.useState(''); const isDays = duration_unit == 'd'; From d18f6cf76a8679bb8532a13390273181a19853c5 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 8 Oct 2024 15:30:03 +0800 Subject: [PATCH 06/15] fix: do not save value when switching tabs --- .../AppV2/Components/TradeParameters/Barrier/barrier-input.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx index e1d4cc413ee7..8761efb22d86 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx @@ -59,7 +59,6 @@ const BarrierInput = observer( newValue = `0${newValue}`; } - setV2ParamsInitialValues({ name: 'barrier_1', value: newValue }); onChange({ target: { name: 'barrier_1', value: newValue } }); }; From bbf3f1855e27817a4d87daf681b8fcc55ad7efec Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 8 Oct 2024 15:30:44 +0800 Subject: [PATCH 07/15] fix: change label color --- .../src/AppV2/Components/TradeParameters/Barrier/barrier.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.scss b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.scss index 8e302869cb9f..734abca569bd 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.scss +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.scss @@ -40,5 +40,9 @@ margin-top: var(--core-spacing-400); display: flex; justify-content: space-between; + + p:first-child { + color: var(--component-textIcon-normal-subtle); + } } } From 1cb1cb713125bcd25f2ccceab890ce5b82175d72 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 8 Oct 2024 15:31:37 +0800 Subject: [PATCH 08/15] feat: reset snackbar after resetting the barrier --- .../AppV2/Components/TradeParameters/Barrier/barrier.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index e016c517f9d2..b6d490644fb6 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -57,6 +57,12 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { } }, [proposal_info]); + React.useEffect(() => { + if (is_open) { + setBarrierErrorShown(false); + } + }, [is_open]); + const barrier_carousel_pages = [ { id: 1, From 34ad9c9f65a572d6f1b8020ccd012a060ad650f4 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 8 Oct 2024 15:55:56 +0800 Subject: [PATCH 09/15] fix: declare in one line --- .../src/AppV2/Components/TradeParameters/Barrier/barrier.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index b6d490644fb6..08cb12bcb58d 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -1,14 +1,13 @@ import React from 'react'; import clsx from 'clsx'; import { observer } from 'mobx-react'; -import { ActionSheet, TextField } from '@deriv-com/quill-ui'; +import { ActionSheet, TextField, useSnackbar } from '@deriv-com/quill-ui'; import { Localize } from '@deriv/translations'; import { useTraderStore } from 'Stores/useTraderStores'; import Carousel from 'AppV2/Components/Carousel'; import BarrierDescription from './barrier-description'; import BarrierInput from './barrier-input'; import CarouselHeader from 'AppV2/Components/Carousel/carousel-header'; -import { useSnackbar } from '@deriv-com/quill-ui'; type TDurationProps = { is_minimized?: boolean; From df927149dbf1d30506d80f9ebb165c6c3a0f28c2 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 8 Oct 2024 16:19:39 +0800 Subject: [PATCH 10/15] fix: apply shorthand --- .../src/AppV2/Components/TradeParameters/Barrier/barrier.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index 08cb12bcb58d..6935779f50e0 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -48,7 +48,7 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { if (has_error && error_field === 'barrier' && !barrier_error_shown && !is_open && !is_minimized) { addSnackbar({ - message: message, + message, hasCloseButton: true, status: 'fail', }); From 9dbbbdba90f95ffe36be6db55493032c6cfb9733 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 8 Oct 2024 17:46:27 +0800 Subject: [PATCH 11/15] feat: apply new improvements --- .../AppV2/Components/TradeParameters/Barrier/barrier-input.tsx | 2 +- .../src/AppV2/Components/TradeParameters/Barrier/barrier.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx index 8761efb22d86..370191f388b9 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx @@ -107,7 +107,7 @@ const BarrierInput = observer( regex={/[^0-9.,]/g} textAlignment='center' onChange={handleOnChange} - placeholder={localize('Distance to spot')} + placeholder={localize('Price')} variant='fill' message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''} /> diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index 6935779f50e0..90ad341e3b62 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -51,6 +51,7 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { message, hasCloseButton: true, status: 'fail', + style: { marginBottom: '48px' }, }); setBarrierErrorShown(true); } @@ -80,6 +81,7 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { } value={v2_params_initial_values.barrier_1 || barrier_1} onClick={() => setIsOpen(true)} From 0eb5c3cf14527b89415b0c6fb1ab364c36a8ee29 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Thu, 17 Oct 2024 15:36:12 +0800 Subject: [PATCH 12/15] fix: fixes batch 1 --- .../Barrier/barrier-description.tsx | 4 +- .../TradeParameters/Barrier/barrier-input.tsx | 50 +++++++++++++------ .../TradeParameters/Barrier/barrier.tsx | 4 +- 3 files changed, 41 insertions(+), 17 deletions(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx index 9c089b66a683..b68b15f34353 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx @@ -8,7 +8,7 @@ const BarrierDescription = ({ isDays }: { isDays: boolean }) => { {isDays ? (
- + @@ -34,7 +34,7 @@ const BarrierDescription = ({ isDays }: { isDays: boolean }) => {
- + diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx index 370191f388b9..74f91a193e49 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx @@ -13,7 +13,7 @@ const chips_options = [ name: , }, { - name: , + name: , }, ]; const BarrierInput = observer( @@ -28,7 +28,13 @@ const BarrierInput = observer( }) => { const { barrier_1, onChange, validation_errors, tick_data, setV2ParamsInitialValues } = useTraderStore(); const [option, setOption] = React.useState(0); + const [should_show_error, setShouldShowError] = React.useState(false); + const [is_focused, setIsFocused] = React.useState(false); const { pip_size } = tick_data ?? {}; + const barrier_ref = React.useRef(null); + const show_hidden_error = + validation_errors?.barrier_1.length > 0 && + ((barrier_1 && !['+', '-'].includes(barrier_1)) || should_show_error); React.useEffect(() => { setInitialBarrierValue(barrier_1); @@ -43,6 +49,26 @@ const BarrierInput = observer( onChange({ target: { name: 'barrier_1', value: barrier_1 } }); }, []); + React.useEffect(() => { + const barrier_element = barrier_ref.current; + const checkFocus = () => { + setIsFocused(!!(barrier_element && barrier_element.contains(document.activeElement))); + }; + document.addEventListener('focusin', checkFocus); + document.addEventListener('focusout', checkFocus); + + return () => { + document.removeEventListener('focusin', checkFocus); + document.removeEventListener('focusout', checkFocus); + }; + }); + + React.useEffect(() => { + if (is_focused) { + setShouldShowError(false); + } + }, [is_focused]); + const handleChipSelect = (index: number) => { setOption(index); let newValue = barrier_1.replace(/^[+-]/, ''); @@ -94,11 +120,7 @@ const BarrierInput = observer( customType='commaRemoval' name='barrier_1' noStatusIcon - status={ - validation_errors?.barrier_1.length > 0 && barrier_1 !== '' - ? 'error' - : 'neutral' - } + status={show_hidden_error ? 'error' : 'neutral'} value={barrier_1} allowDecimals decimals={pip_size} @@ -109,7 +131,8 @@ const BarrierInput = observer( onChange={handleOnChange} placeholder={localize('Price')} variant='fill' - message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''} + message={show_hidden_error ? validation_errors?.barrier_1[0] : ''} + ref={barrier_ref} /> ) : ( 0 && barrier_1 !== '' - ? 'error' - : 'neutral' - } + status={show_hidden_error ? 'error' : 'neutral'} onChange={handleOnChange} placeholder={localize('Distance to spot')} regex={/[^0-9.,]/g} variant='fill' - message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''} + message={show_hidden_error ? validation_errors?.barrier_1[0] : ''} + ref={barrier_ref} /> )} - {(validation_errors?.barrier_1.length == 0 || barrier_1 === '') && ( + {(validation_errors?.barrier_1.length == 0 || !show_hidden_error) && (
)}
@@ -155,6 +175,8 @@ const BarrierInput = observer( onAction: () => { if (validation_errors.barrier_1.length === 0) { onClose(true); + } else { + setShouldShowError(true); } }, }} diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index 90ad341e3b62..2290661d42e7 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -27,7 +27,9 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { const [is_open, setIsOpen] = React.useState(false); const [initialBarrierValue, setInitialBarrierValue] = React.useState(''); const isDays = duration_unit == 'd'; - const has_error = validation_errors.barrier_1.length > 0 || proposal_info?.[trade_type_tab]?.has_error; + const has_error = + validation_errors.barrier_1.length > 0 || + (proposal_info?.[trade_type_tab]?.has_error && proposal_info?.[trade_type_tab]?.error_field === 'barrier'); const { addSnackbar } = useSnackbar(); const [barrier_error_shown, setBarrierErrorShown] = React.useState(false); From 912ade0c6979a978623d4fa23dfd751687d7eb95 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Fri, 18 Oct 2024 12:59:19 +0800 Subject: [PATCH 13/15] fix: fixes for barrier batch 2 --- .../AppV2/Components/TradeParameters/Barrier/barrier.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index 2290661d42e7..58a66cbc7119 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -43,6 +43,12 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { } }; + React.useEffect(() => { + if (v2_params_initial_values.barrier_1?.toString() !== barrier_1) { + setV2ParamsInitialValues({ value: barrier_1, name: 'barrier_1' }); + } + }, []); + React.useEffect(() => { const has_error = proposal_info?.[trade_type_tab]?.has_error; const error_field = proposal_info?.[trade_type_tab]?.error_field; From 3b3050a61308f4c842ac9bed16dd2cb13e122d1d Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Fri, 18 Oct 2024 13:29:21 +0800 Subject: [PATCH 14/15] fix: update test cases --- .../Barrier/__tests__/barrier-input.spec.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx index 1d8ee3dd9419..b6f1eb530f9e 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx @@ -38,7 +38,7 @@ describe('BarrierInput', () => { mockBarrierInput(mockStore(default_trade_store)); expect(screen.getByText('Above spot')).toBeInTheDocument(); expect(screen.getByText('Below spot')).toBeInTheDocument(); - expect(screen.getByText('Fixed price')).toBeInTheDocument(); + expect(screen.getByText('Fixed barrier')).toBeInTheDocument(); expect(screen.getByPlaceholderText('Distance to spot')).toBeInTheDocument(); expect(screen.getByText('Current spot')).toBeInTheDocument(); }); @@ -61,7 +61,7 @@ describe('BarrierInput', () => { mockBarrierInput(mockStore(default_trade_store)); const aboveSpotChip = screen.getByText('Above spot'); const belowSpotChip = screen.getByText('Below spot'); - const fixedPriceChip = screen.getByText('Fixed price'); + const fixedPriceChip = screen.getByText('Fixed barrier'); userEvent.click(belowSpotChip); expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '-10' } }); @@ -139,11 +139,11 @@ describe('BarrierInput', () => { expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '-0.6' } }); }); - it('handles chip selection correctly for Fixed price', () => { + it('handles chip selection correctly for Fixed barrier', () => { default_trade_store.modules.trade.barrier_1 = '+.6'; mockBarrierInput(mockStore(default_trade_store)); - const fixedPriceChip = screen.getByText('Fixed price'); + const fixedPriceChip = screen.getByText('Fixed barrier'); userEvent.click(fixedPriceChip); expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '0.6' } }); From 61ff51920a8446fa7c9ad191153e01ddc5735abd Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Tue, 22 Oct 2024 13:31:27 +0800 Subject: [PATCH 15/15] fix: ensure initial barrier gets updated whenever barrier changes --- .../src/AppV2/Components/TradeParameters/Barrier/barrier.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index 58a66cbc7119..02d9833b01ca 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -47,7 +47,7 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { if (v2_params_initial_values.barrier_1?.toString() !== barrier_1) { setV2ParamsInitialValues({ value: barrier_1, name: 'barrier_1' }); } - }, []); + }, [barrier_1]); React.useEffect(() => { const has_error = proposal_info?.[trade_type_tab]?.has_error;