Skip to content

Commit ef7b6ff

Browse files
farhan-nurzi-derivfarhan-nurzi-deriv
authored
Merge 530e305 into 04457bd 
2 parents 04457bd + 530e305 commit ef7b6ff

File tree

62 files changed

+989
-815
lines changed

Some content is hidden

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

62 files changed

+989
-815
lines changed

‎packages/components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
},
7474
"dependencies": {
7575
"@contentpass/zxcvbn": "^4.4.3",
76+
"@deriv/hooks": "^1.0.0",
7677
"@deriv/shared": "^1.0.0",
7778
"@deriv/stores": "^1.0.0",
7879
"@deriv/translations": "^1.0.0",

‎packages/components/src/components/date-picker/date-picker.tsx‎

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from 'react';
2-
import { addDays, daysFromTodayTo, toMoment, convertDateFormat, getPosition, isMobile } from '@deriv/shared';
2+
import { addDays, daysFromTodayTo, toMoment, convertDateFormat, getPosition } from '@deriv/shared';
33
import Input from './date-picker-input';
44
import Calendar from './date-picker-calendar';
55
import Native from './date-picker-native';
6-
import MobileWrapper from '../mobile-wrapper';
7-
import DesktopWrapper from '../desktop-wrapper';
86
import { useOnClickOutside } from '../../hooks/use-onclickoutside';
97
import moment, { MomentInput } from 'moment';
108
import { TDatePickerOnChangeEvent } from '../types';
9+
import { useDevice } from '@deriv/hooks';
1110

1211
type TDatePicker = Omit<
1312
React.ComponentProps<typeof Native> & React.ComponentProps<typeof Input> & React.ComponentProps<typeof Calendar>,
@@ -72,6 +71,7 @@ const DatePicker = React.memo((props: TDatePicker) => {
7271
const [duration, setDuration] = React.useState<number | null | string>(daysFromTodayTo(value));
7372
const [is_datepicker_visible, setIsDatepickerVisible] = React.useState(false);
7473
const [is_placeholder_visible, setIsPlaceholderVisible] = React.useState(!!placeholder && !value);
74+
const { isMobile } = useDevice();
7575

7676
useOnClickOutside(
7777
datepicker_ref,
@@ -197,7 +197,7 @@ const DatePicker = React.memo((props: TDatePicker) => {
197197
const getInputValue = (): string | number => (mode === 'duration' ? duration || 0 : date);
198198

199199
const getCalendarValue = (new_date: string | null): string | null => {
200-
if (!new_date) return isMobile() ? null : toMoment(start_date || max_date).format(date_format);
200+
if (!new_date) return isMobile ? null : toMoment(start_date || max_date).format(date_format);
201201
return convertDateFormat(new_date, display_format, date_format);
202202
};
203203

@@ -216,60 +216,58 @@ const DatePicker = React.memo((props: TDatePicker) => {
216216
...other_props,
217217
};
218218

219+
if (isMobile) {
220+
return (
221+
<Native
222+
id={id}
223+
name={name}
224+
onBlur={onBlur}
225+
onFocus={onFocus}
226+
onSelect={onSelectCalendarNative}
227+
value={getCalendarValue(date)} // native picker accepts date format yyyy-mm-dd
228+
disabled={disabled}
229+
data_testid={data_testid}
230+
{...common_props}
231+
/>
232+
);
233+
}
234+
219235
return (
220-
<React.Fragment>
221-
<MobileWrapper>
222-
<Native
223-
id={id}
236+
<div id={id} className='dc-datepicker' data-value={getInputValue()}>
237+
<div ref={datepicker_ref}>
238+
<Input
239+
{...common_props}
240+
disabled={disabled}
224241
name={name}
242+
onClick={handleVisibility}
243+
onChangeInput={onChangeInput}
244+
is_placeholder_visible={is_placeholder_visible}
225245
onBlur={onBlur}
226-
onFocus={onFocus}
227-
onSelect={onSelectCalendarNative}
228-
value={getCalendarValue(date)} // native picker accepts date format yyyy-mm-dd
229-
disabled={disabled}
230-
data_testid={data_testid}
246+
required={required}
247+
type={type}
248+
value={getInputValue()}
249+
data-testid={data_testid}
250+
/>
251+
<Calendar
252+
ref={calendar_ref}
253+
calendar_el_ref={calendar_el_ref}
254+
parent_ref={datepicker_ref}
255+
keep_open={keep_open}
256+
alignment={alignment}
257+
is_datepicker_visible={is_datepicker_visible}
258+
onHover={has_range_selection ? onHover : undefined}
259+
onSelect={onSelectCalendar}
260+
onChangeCalendarMonth={onChangeCalendarMonth}
261+
has_today_btn={has_today_btn}
262+
placement={placement}
263+
style={style}
264+
value={getCalendarValue(date) || ''} // Calendar accepts date format yyyy-mm-dd
265+
start_date=''
266+
has_range_selection={has_range_selection}
231267
{...common_props}
232268
/>
233-
</MobileWrapper>
234-
<DesktopWrapper>
235-
<div id={id} className='dc-datepicker' data-value={getInputValue()}>
236-
<div ref={datepicker_ref}>
237-
<Input
238-
{...common_props}
239-
disabled={disabled}
240-
name={name}
241-
onClick={handleVisibility}
242-
onChangeInput={onChangeInput}
243-
// onClickClear={this.onClickClear}
244-
is_placeholder_visible={is_placeholder_visible}
245-
onBlur={onBlur}
246-
required={required}
247-
type={type}
248-
value={getInputValue()}
249-
data-testid={data_testid}
250-
/>
251-
<Calendar
252-
ref={calendar_ref}
253-
calendar_el_ref={calendar_el_ref}
254-
parent_ref={datepicker_ref}
255-
keep_open={keep_open}
256-
alignment={alignment}
257-
is_datepicker_visible={is_datepicker_visible}
258-
onHover={has_range_selection ? onHover : undefined}
259-
onSelect={onSelectCalendar}
260-
onChangeCalendarMonth={onChangeCalendarMonth}
261-
has_today_btn={has_today_btn}
262-
placement={placement}
263-
style={style}
264-
value={getCalendarValue(date) || ''} // Calendar accepts date format yyyy-mm-dd
265-
start_date=''
266-
has_range_selection={has_range_selection}
267-
{...common_props}
268-
/>
269-
</div>
270-
</div>
271-
</DesktopWrapper>
272-
</React.Fragment>
269+
</div>
270+
</div>
273271
);
274272
});
275273

‎packages/components/src/components/modal/modal.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @define dc-modal; weak */
22
.dc-modal {
33
&__container {
4-
@include tablet {
4+
@include tablet-screen {
55
width: unset !important;
66
right: 0;
77
}
@@ -31,7 +31,7 @@
3131
&--is-vertical-top {
3232
top: $HEADER_HEIGHT;
3333
position: absolute;
34-
@include mobile {
34+
@include mobile-screen {
3535
top: $MOBILE_HEADER_HEIGHT;
3636
left: 1.6rem;
3737
width: calc(100vw - 3.2rem) !important;
@@ -40,7 +40,7 @@
4040
&--is-vertical-bottom {
4141
bottom: $FOOTER_HEIGHT;
4242
position: absolute;
43-
@include mobile {
43+
@include mobile-screen {
4444
left: 1.6rem;
4545
width: calc(100vw - 3.2rem) !important;
4646
}
@@ -87,7 +87,7 @@
8787
min-width: 440px !important;
8888
max-height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT}) !important;
8989
}
90-
@include mobile {
90+
@include mobile-screen {
9191
max-width: calc(100vw - 3.2rem) !important;
9292
}
9393
}

‎packages/core/src/App/AppContent.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
22
import Cookies from 'js-cookie';
33
import { useRemoteConfig } from '@deriv/api';
4-
import { DesktopWrapper } from '@deriv/components';
5-
import { useFeatureFlags } from '@deriv/hooks';
4+
import { useDevice, useFeatureFlags } from '@deriv/hooks';
65
import { getAppId, LocalStore, useIsMounted } from '@deriv/shared';
76
import { observer, useStore } from '@deriv/stores';
87
import { getLanguage } from '@deriv/translations';
@@ -25,7 +24,7 @@ import initDatadog from '../Utils/Datadog';
2524
const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }) => {
2625
const { is_next_wallet_enabled } = useFeatureFlags();
2726
const store = useStore();
28-
27+
const { isDesktop } = useDevice();
2928
const isMounted = useIsMounted();
3029
const { data } = useRemoteConfig(isMounted());
3130
const { marketing_growthbook, tracking_datadog, tracking_rudderstack } = data;
@@ -79,9 +78,7 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
7978
<Routes passthrough={passthrough} />
8079
</AppContents>
8180
</ErrorBoundary>
82-
<DesktopWrapper>
83-
<Footer />
84-
</DesktopWrapper>
81+
{isDesktop && <Footer />}
8582
<ErrorBoundary root_store={store}>
8683
<AppModals />
8784
</ErrorBoundary>

‎packages/core/src/App/Components/Layout/Header/account-actions.jsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import * as PropTypes from 'prop-types';
22
import React from 'react';
3-
import { Button, DesktopWrapper, Icon, MobileWrapper, Popover } from '@deriv/components';
3+
import { Button, Icon, Popover } from '@deriv/components';
44
import { routes, formatMoney, PlatformContext, moduleLoader } from '@deriv/shared';
55
import { localize, Localize } from '@deriv/translations';
66
import { LoginButton } from './login-button.jsx';
77
import { SignupButton } from './signup-button.jsx';
88
import ToggleNotifications from './toggle-notifications.jsx';
99
import { BinaryLink } from '../../Routes';
1010
import 'Sass/app/_common/components/account-switcher.scss';
11+
import { useDevice } from '@deriv/hooks';
1112

1213
const AccountInfo = React.lazy(() =>
1314
moduleLoader(() =>
@@ -39,37 +40,12 @@ const AccountActions = React.memo(
3940
toggleNotifications,
4041
}) => {
4142
const { is_appstore } = React.useContext(PlatformContext);
43+
const { isDesktop } = useDevice();
4244

4345
if (is_logged_in) {
44-
return (
45-
<React.Fragment>
46-
<MobileWrapper>
47-
<ToggleNotifications
48-
count={notifications_count}
49-
is_visible={is_notifications_visible}
50-
toggleDialog={toggleNotifications}
51-
/>
52-
<React.Suspense fallback={<div />}>
53-
<AccountInfo
54-
acc_switcher_disabled_message={acc_switcher_disabled_message}
55-
account_type={account_type}
56-
balance={
57-
typeof balance === 'undefined' ? balance : formatMoney(currency, balance, true)
58-
}
59-
is_disabled={is_acc_switcher_disabled}
60-
disableApp={disableApp}
61-
enableApp={enableApp}
62-
is_eu={is_eu}
63-
is_virtual={is_virtual}
64-
is_mobile
65-
currency={currency}
66-
country_standpoint={country_standpoint}
67-
is_dialog_on={is_acc_switcher_on}
68-
toggleDialog={toggleAccountsDialog}
69-
/>
70-
</React.Suspense>
71-
</MobileWrapper>
72-
<DesktopWrapper>
46+
if (isDesktop) {
47+
return (
48+
<React.Fragment>
7349
<ToggleNotifications
7450
count={notifications_count}
7551
is_visible={is_notifications_visible}
@@ -124,10 +100,38 @@ const AccountActions = React.memo(
124100
primary
125101
/>
126102
)}
127-
</DesktopWrapper>
103+
</React.Fragment>
104+
);
105+
}
106+
107+
return (
108+
<React.Fragment>
109+
<ToggleNotifications
110+
count={notifications_count}
111+
is_visible={is_notifications_visible}
112+
toggleDialog={toggleNotifications}
113+
/>
114+
<React.Suspense fallback={<div />}>
115+
<AccountInfo
116+
acc_switcher_disabled_message={acc_switcher_disabled_message}
117+
account_type={account_type}
118+
balance={typeof balance === 'undefined' ? balance : formatMoney(currency, balance, true)}
119+
is_disabled={is_acc_switcher_disabled}
120+
disableApp={disableApp}
121+
enableApp={enableApp}
122+
is_eu={is_eu}
123+
is_virtual={is_virtual}
124+
is_mobile
125+
currency={currency}
126+
country_standpoint={country_standpoint}
127+
is_dialog_on={is_acc_switcher_on}
128+
toggleDialog={toggleAccountsDialog}
129+
/>
130+
</React.Suspense>
128131
</React.Fragment>
129132
);
130133
}
134+
131135
return (
132136
<React.Fragment>
133137
<LoginButton className='acc-info__button' />

‎packages/core/src/App/Components/Layout/Header/menu-links.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { BinaryLink } from '../../Routes';
55
import { observer, useStore } from '@deriv/stores';
66
import { routes } from '@deriv/shared';
77
import { localize } from '@deriv/translations';
8-
import { useP2PNotificationCount, useIsRealAccountNeededForCashier, useFeatureFlags } from '@deriv/hooks';
8+
import { useP2PNotificationCount, useIsRealAccountNeededForCashier, useFeatureFlags, useDevice } from '@deriv/hooks';
99
import './menu-links.scss';
1010
import { useHistory } from 'react-router';
1111

@@ -89,17 +89,17 @@ const CashierTab = observer(() => {
8989

9090
const MenuLinks = observer(({ is_traders_hub_routes = false }) => {
9191
const { i18n } = useTranslation();
92-
const { client, ui } = useStore();
92+
const { client } = useStore();
9393
const { is_logged_in } = client;
94-
const { is_mobile } = ui;
9594
const { is_next_wallet_enabled } = useFeatureFlags();
95+
const { isDesktop } = useDevice();
9696

9797
if (!is_logged_in) return <></>;
9898

9999
return (
100100
<div key={`menu-links__${i18n.language}`} className='header__menu-links'>
101101
{!is_traders_hub_routes && <ReportTab />}
102-
{!is_mobile && !is_next_wallet_enabled && <CashierTab />}
102+
{isDesktop && !is_next_wallet_enabled && <CashierTab />}
103103
</div>
104104
);
105105
});

0 commit comments

Comments
 (0)