Skip to content

Commit

Permalink
[DTRA]/DTRA-1467/Ahmad/Duration Params (deriv-com#16537)
Browse files Browse the repository at this point in the history
* chore: still goin

* chore: fix

* fix: type

* fix: fix

* chore: fixed

* chore: fixed ts error

* chore: remove unused thing

* fix: test case

* fix: test case

* chore: small height fix

* revert: extra non-aligned file from master

* revert: extra non-aligned file from master

* chore: review comments

* chore: review comments

* fix: barrier fix

* chore: review fix

* chore: test case fix
  • Loading branch information
ahmadtaimoor-deriv authored Sep 2, 2024
1 parent aa78845 commit a46d5c2
Show file tree
Hide file tree
Showing 20 changed files with 775 additions and 36 deletions.
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/account/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@deriv-com/utils": "^0.0.25",
"@deriv-com/ui": "1.29.10",
"@deriv/api": "^1.0.0",
"@deriv-com/quill-ui": "1.15.0",
"@deriv-com/quill-ui": "1.16.1",
"@deriv/components": "^1.0.0",
"@deriv/hooks": "^1.0.0",
"@deriv/integration": "1.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
"@datadog/browser-rum": "^5.11.0",
"@deriv-com/analytics": "1.12.1",
"@deriv-com/quill-tokens": "^2.0.4",
"@deriv-com/quill-ui": "1.15.0",
"@deriv-com/quill-ui": "1.16.1",
"@deriv-com/translations": "1.3.5",
"@deriv-com/ui": "1.29.10",
"@deriv-com/utils": "^0.0.25",
Expand Down
2 changes: 1 addition & 1 deletion packages/trader/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"dependencies": {
"@deriv-com/analytics": "1.12.1",
"@deriv-com/quill-tokens": "^2.0.4",
"@deriv-com/quill-ui": "1.15.0",
"@deriv-com/quill-ui": "1.16.1",
"@deriv-com/utils": "^0.0.25",
"@deriv-com/ui": "1.29.10",
"@deriv/api-types": "1.0.172",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@
&__stats {
display: flex;
padding: var(--core-spacing-600) var(--core-spacing-75);
justify-content: space-between;
justify-content: space-around;
border-bottom: var(--core-spacing-75) solid var(--core-color-opacity-black-100);
&__moving {
display: flex;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';
import { ActionSheet, Chip, Text, TextField, TextFieldAddon } from '@deriv-com/quill-ui';

import { localize, Localize } from '@deriv/translations';
Expand Down Expand Up @@ -26,13 +26,12 @@ const BarrierInput = observer(
isDays: boolean;
onClose: (val: boolean) => void;
}) => {
const { barrier_1, onChange, validation_errors, proposal_info } = useTraderStore();
const { barrier_1, onChange, validation_errors, tick_data, setV2ParamsInitialValues } = useTraderStore();
const [option, setOption] = React.useState(0);
const proposal = Object.values(proposal_info);
const spotPrice = proposal[1]?.spot ?? '';

React.useEffect(() => {
setInitialBarrierValue(barrier_1);
setV2ParamsInitialValues({ name: 'barrier_1', value: barrier_1 });
if (barrier_1.includes('-')) {
setOption(1);
} else if (barrier_1.includes('+')) {
Expand All @@ -58,14 +57,16 @@ const BarrierInput = observer(
newValue = `0${newValue}`;
}

setV2ParamsInitialValues({ name: 'barrier_1', value: newValue });
onChange({ target: { name: 'barrier_1', value: newValue } });
};

const handleOnChange = (e: { target: { name: string; value: unknown } }) => {
const handleOnChange = (e: { target: { name: string; value: string } }) => {
let value = e.target.value;
if (option === 0) value = `+${value}`;
if (option === 1) value = `-${value}`;
onChange({ target: { name: 'barrier_1', value } });
setV2ParamsInitialValues({ name: 'barrier_1', value });
};

return (
Expand All @@ -91,7 +92,11 @@ const BarrierInput = observer(
<TextField
type='number'
name='barrier_1'
status={validation_errors?.barrier_1.length > 0 ? 'error' : 'neutral'}
status={
validation_errors?.barrier_1.length > 0 && barrier_1 !== ''
? 'error'
: 'neutral'
}
value={barrier_1}
allowDecimals
allowSign={false}
Expand All @@ -100,7 +105,7 @@ const BarrierInput = observer(
onChange={handleOnChange}
placeholder={localize('Distance to spot')}
variant='fill'
message={validation_errors?.barrier_1[0]}
message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''}
/>
) : (
<TextFieldAddon
Expand All @@ -112,20 +117,26 @@ const BarrierInput = observer(
allowDecimals
inputMode='decimal'
allowSign={false}
status={validation_errors?.barrier_1.length > 0 ? 'error' : 'neutral'}
status={
validation_errors?.barrier_1.length > 0 && barrier_1 !== ''
? 'error'
: 'neutral'
}
onChange={handleOnChange}
placeholder={localize('Distance to spot')}
variant='fill'
message={validation_errors?.barrier_1[0]}
message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''}
/>
)}
{validation_errors?.barrier_1.length == 0 && <div style={{ height: '22px' }} />}
{(validation_errors?.barrier_1.length == 0 || barrier_1 === '') && (
<div className='barrier-params__error-area' />
)}
</div>
<div className='barrier-params__current-spot-wrapper'>
<Text size='sm'>
<Localize i18n_default_text='Current spot' />
</Text>
<Text size='sm'>{spotPrice}</Text>
<Text size='sm'>{tick_data?.quote}</Text>
</div>
</div>
</ActionSheet.Content>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ type TDurationProps = {
};

const Barrier = observer(({ is_minimized }: TDurationProps) => {
const { barrier_1, onChange, duration_unit } = useTraderStore();
const { barrier_1, onChange, duration_unit, setV2ParamsInitialValues, v2_params_initial_values } = useTraderStore();
const [is_open, setIsOpen] = React.useState(false);
const [initialBarrierValue, setInitialBarrierValue] = React.useState('');
const isDays = duration_unit == 'd';
Expand All @@ -24,6 +24,7 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => {
if (!is_saved) {
onChange({ target: { name: 'barrier_1', value: initialBarrierValue } });
}
setV2ParamsInitialValues({ value: '', name: 'barrier_1' });
setIsOpen(false);
}
};
Expand All @@ -47,7 +48,7 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => {
variant='fill'
readOnly
label={<Localize i18n_default_text='Barrier' key={`barrier${is_minimized ? '-minimized' : ''}`} />}
value={barrier_1}
value={v2_params_initial_values.barrier_1 || barrier_1}
onClick={() => setIsOpen(true)}
className={clsx('trade-params__option', is_minimized && 'trade-params__option--minimized')}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import Duration from '../index';
import TraderProviders from '../../../../../trader-providers';
import { mockStore } from '@deriv/stores';
import { TCoreStores } from '@deriv/stores/types';
import userEvent from '@testing-library/user-event';

global.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
unobserve: jest.fn(),
disconnect: jest.fn(),
}));

global.ResizeObserver = ResizeObserver;

describe('Duration', () => {
const default_trade_store = mockStore({
modules: {
trade: {
onChange: jest.fn(),
validation_errors: { barrier_1: [] },
duration: 10,
duration_unit: 'm',
expiry_type: 'duration',
},
},
});

const mockDuration = (mocked_store: TCoreStores) => {
render(
<TraderProviders store={mocked_store}>
<Duration />
</TraderProviders>
);
};

it('should render the Duration component with default values', () => {
default_trade_store.modules.trade.duration = 30;

mockDuration(default_trade_store);
expect(screen.getByLabelText('Duration')).toBeInTheDocument();
expect(screen.getByDisplayValue('30 minutes')).toBeInTheDocument();
});

it('should render the correct value for duration in hours and minutes', () => {
default_trade_store.modules.trade.duration = 125;
mockDuration(default_trade_store);
expect(screen.getByLabelText('Duration')).toBeInTheDocument();
expect(screen.getByDisplayValue('2 hours 5 minutes')).toBeInTheDocument();
});

it('should open the ActionSheet when the text field is clicked', () => {
default_trade_store.modules.trade.duration = 30;
default_trade_store.modules.trade.expiry_time = '12:30';
mockDuration(default_trade_store);
const textField = screen.getByLabelText('Duration');
expect(textField).toBeInTheDocument();
userEvent.click(textField);

expect(screen.getByRole('dialog')).toBeInTheDocument();
});

it('should display expiry time in GMT when expiry_type is "time"', () => {
default_trade_store.modules.trade.duration = 30;
default_trade_store.modules.trade.expiry_type = 'end time';
default_trade_store.modules.trade.expiry_time = '12:30';
mockDuration(default_trade_store);
expect(screen.getByDisplayValue('Ends at 12:30 GMT')).toBeInTheDocument();
});
});
Loading

0 comments on commit a46d5c2

Please sign in to comment.