Akmal / feat: barrier field improvements

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) => {
@@ -57,7 +59,6 @@ const BarrierInput = observer(
                 newValue = `0${newValue}`;
             }
 
-            setV2ParamsInitialValues({ name: 'barrier_1', value: newValue });
             onChange({ target: { name: 'barrier_1', value: newValue } });
         };
 
@@ -100,12 +101,13 @@ const BarrierInput = observer(
                                     }
                                     value={barrier_1}
                                     allowDecimals
+                                    decimals={pip_size}
                                     allowSign={false}
                                     inputMode='decimal'
                                     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] : ''}
                                 />
@@ -116,6 +118,7 @@ const BarrierInput = observer(
                                     name='barrier_1'
                                     noStatusIcon
                                     addonLabel={option == 0 ? '+' : '-'}
+                                    decimals={pip_size}
                                     value={barrier_1.replace(/[+-]/g, '')}
                                     allowDecimals
                                     inputMode='decimal'

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);
+        }
     }
 }

packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx

@@ -1,7 +1,7 @@
 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';
@@ -14,10 +14,22 @@ type TDurationProps = {
 };
 
 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 +41,28 @@ 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,
+                hasCloseButton: true,
+                status: 'fail',
+                style: { marginBottom: '48px' },
+            });
+            setBarrierErrorShown(true);
+        }
+    }, [proposal_info]);
+
+    React.useEffect(() => {
+        if (is_open) {
+            setBarrierErrorShown(false);
+        }
+    }, [is_open]);
+
     const barrier_carousel_pages = [
         {
             id: 1,
@@ -47,10 +81,12 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => {
             <TextField
                 variant='fill'
                 readOnly
+                noStatusIcon
                 label={<Localize i18n_default_text='Barrier' key={`barrier${is_minimized ? '-minimized' : ''}`} />}
                 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}
             />
             <ActionSheet.Root isOpen={is_open} onClose={() => onClose(false)} position='left' expandable={false}>
                 <ActionSheet.Portal shouldCloseOnDrag>