Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DTRA]Ahmad/ Hour Picker and Other fixes #17168

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
+240 −112
Open

[DTRA]Ahmad/ Hour Picker and Other fixes #17168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
a3e9ef3
chore: hour picker
ahmadtaimoor-deriv Oct 14, 2024
ac27537
chore: fixes snackbar on datepicker
ahmadtaimoor-deriv Oct 15, 2024
161e00b
chore: removing disabled on close
ahmadtaimoor-deriv Oct 15, 2024
4bdf91b
chore: fix on limiting error
ahmadtaimoor-deriv Oct 15, 2024
41ef3f4
chore: fix on disable
ahmadtaimoor-deriv Oct 15, 2024
0c0c4d8
fix: days
ahmadtaimoor-deriv Oct 15, 2024
ce1a12f
fix: fix
ahmadtaimoor-deriv Oct 15, 2024
3e14f36
fix: test case
ahmadtaimoor-deriv Oct 15, 2024
9bfdba1
fix: test case
ahmadtaimoor-deriv Oct 15, 2024
a860515
fix: disabled fix
ahmadtaimoor-deriv Oct 15, 2024
e3fd76a
chore: review fix
ahmadtaimoor-deriv Oct 16, 2024
4d929de
fix: review fix
ahmadtaimoor-deriv Oct 16, 2024
ab0b87d
fix: review fix
ahmadtaimoor-deriv Oct 16, 2024
501badc
fix: add condition
ahmadtaimoor-deriv Oct 16, 2024
c1831cb
fix: add condition
ahmadtaimoor-deriv Oct 16, 2024
6c75862
fix: failing test cases
ahmadtaimoor-deriv Oct 16, 2024
70541e9
fix: renaming wheelpicker
ahmadtaimoor-deriv Oct 16, 2024
824e578
chore: trigger
ahmadtaimoor-deriv Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/trader/src/AppV2/Components/TradeParameters/Duration/__tests__/duration.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { mockStore } from '@deriv/stores';
import { TCoreStores } from '@deriv/stores/types';
import userEvent from '@testing-library/user-event';
import { useSnackbar } from '@deriv-com/quill-ui';
import moment from 'moment';
Copy link
Contributor

@wojciech-deriv wojciech-deriv Oct 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in wallets, we recently removed moment due to its size,
as much as I like moment (and I personally still use it in non-client-facing projects), I'm wondering if it shouldn't be deprecated and not being added anymore, in favour of something more modern and more treeshakeable

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In V2 , we are not actually using moment . The server_time is handled in store primarily used in V1 and is handled via moment . So in order to utilize that I had to use the moment .

import { toMoment } from '@deriv/shared';

global.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
Expand Down Expand Up @@ -35,7 +37,7 @@ jest.mock('@deriv/shared', () => ({
...jest.requireActual('@deriv/shared'),
toMoment: jest.fn(() => ({
clone: jest.fn(),
isSame: jest.fn(),
isSame: jest.fn(() => true),
})),
}));

Expand Down Expand Up @@ -64,6 +66,9 @@ describe('Duration', () => {
symbol: 'EURUSD',
},
},
common: {
server_time: moment('2024-10-10T11:23:10.895Z'),
},
});
});

Expand Down
16 changes: 4 additions & 12 deletions ...rader/src/AppV2/Components/TradeParameters/Duration/__tests__/duration_container.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { TCoreStores } from '@deriv/stores/types';
import TraderProviders from '../../../../../trader-providers';
import userEvent from '@testing-library/user-event';
import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
import moment from 'moment';

global.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
Expand Down Expand Up @@ -81,6 +82,9 @@ describe('DurationActionSheetContainer', () => {
symbol: '1HZ100V',
},
},
common: {
server_time: moment('2024-10-10T11:23:10.895Z'),
},
});
});

Expand Down Expand Up @@ -165,7 +169,6 @@ describe('DurationActionSheetContainer', () => {
expect(screen.getByText('1 min')).toBeInTheDocument();
userEvent.click(screen.getByText('hours'));
expect(screen.getByText('1 h')).toBeInTheDocument();
userEvent.click(screen.getByText('End Time'));
});

it('should call onChangeMultiple with correct data with seconds', () => {
Expand Down Expand Up @@ -244,19 +247,8 @@ describe('DurationActionSheetContainer', () => {

it('should show End Time Screen on selecting the days unit', () => {
renderDurationContainer(default_trade_store, 'd');

const date_input = screen.getByTestId('dt_date_input');
const time_input = screen.getByDisplayValue('23:59:59 GMT');
expect(date_input).toBeInTheDocument();
expect(time_input).toBeInTheDocument();
});

it('should open timepicker on clicking on time input in the days page', () => {
renderDurationContainer(default_trade_store, 'd');
const time_input = screen.getByDisplayValue('23:59:59 GMT');
expect(time_input).toBeInTheDocument();
userEvent.click(time_input);
expect(screen.getByText('Pick an end time'));
});

it('should open datepicker on clicking on date input in the days page', () => {
Expand Down
27 changes: 14 additions & 13 deletions packages/trader/src/AppV2/Components/TradeParameters/Duration/container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { Localize } from '@deriv/translations';
import { useTraderStore } from 'Stores/useTraderStores';
import { observer } from '@deriv/stores';
import DurationChips from './chips';
import DurationWheelPicker from './wheelpicker';
import DurationWheelPicker from './duration-wheel-picker';
import DayInput from './day';
import { DURATION_UNIT } from 'AppV2/Utils/trade-params-utils';

const DurationActionSheetContainer = observer(
({
Expand Down Expand Up @@ -33,23 +34,23 @@ const DurationActionSheetContainer = observer(
}) => {
const { duration, duration_units_list, onChangeMultiple } = useTraderStore();
const [selected_time, setSelectedTime] = useState([duration]);
const [temp_expiry_time, setTempExpiryTime] = React.useState(expiry_time_string);
const [expiry_time_input, setExpiryTimeInput] = React.useState(expiry_time_string);

const onAction = () => {
setExpiryTimeString(temp_expiry_time);
if (unit === 'h') {
setExpiryTimeString(expiry_time_input);
if (unit === DURATION_UNIT.HOURS) {
const minutes = selected_hour[0] * 60 + selected_hour[1];
const hour = Math.floor(duration / 60);
const min = duration % 60;
setSelectedHour([hour, min]);
setEndTime('');
onChangeMultiple({
duration_unit: 'm',
duration_unit: DURATION_UNIT.MINUTES,
duration: Number(minutes),
expiry_time: null,
expiry_type: 'duration',
});
} else if (unit === 'd') {
} else if (unit === DURATION_UNIT.DAYS) {
const difference_in_time = end_date.getTime() - new Date().getTime();
const difference_in_days = Math.ceil(difference_in_time / (1000 * 3600 * 24));
setSelectedHour([]);
Expand All @@ -61,7 +62,7 @@ const DurationActionSheetContainer = observer(
} else {
setEndTime('');
onChangeMultiple({
duration_unit: 'd',
duration_unit: DURATION_UNIT.DAYS,
duration: Number(difference_in_days),
expiry_time: null,
expiry_type: 'duration',
Expand All @@ -83,7 +84,7 @@ const DurationActionSheetContainer = observer(
(value: string) => {
setUnit(value);
setSelectedTime([]);
if (value !== 'h') {
if (value !== DURATION_UNIT.HOURS) {
setSelectedHour([]);
}
},
Expand All @@ -92,7 +93,7 @@ const DurationActionSheetContainer = observer(

const setWheelPickerValue = (index: number, value: string | number) => {
const num_value = Number(value);
if (unit === 'h') {
if (unit === DURATION_UNIT.HOURS) {
const arr = selected_hour;
arr[index] = num_value;
setSelectedHour(arr);
Expand All @@ -105,7 +106,7 @@ const DurationActionSheetContainer = observer(
<div className='duration-container'>
<ActionSheet.Header title={<Localize i18n_default_text='Duration' />} />
<DurationChips duration_units_list={duration_units_list} onChangeUnit={onChangeUnit} unit={unit} />
{unit !== 'd' && (
{unit !== DURATION_UNIT.DAYS && (
<DurationWheelPicker
unit={unit}
setWheelPickerValue={setWheelPickerValue}
Expand All @@ -114,14 +115,14 @@ const DurationActionSheetContainer = observer(
/>
)}

{unit === 'd' && (
{unit === DURATION_UNIT.DAYS && (
<DayInput
setEndTime={setEndTime}
setEndDate={setEndDate}
end_date={end_date}
end_time={end_time}
setTempExpiryTime={setTempExpiryTime}
temp_expiry_time={temp_expiry_time}
setExpiryTimeInput={setExpiryTimeInput}
expiry_time_input={expiry_time_input}
/>
)}
<ActionSheet.Footer
Expand Down
Loading
Loading