chore: migrate routes folder to tsx

packages/components/src/components/contract-card/contract-card-items/contract-card-sell.jsx

@@ -14,24 +14,19 @@ const ContractCardSell = ({ contract_info, getCardLabels, is_sell_requested, onC
         ev.preventDefault();
     };
 
+    if (!should_show_sell) return null;
+    if (!is_valid_to_sell)
+        return <div className='dc-contract-card__no-resale-msg'>{getCardLabels().RESALE_NOT_OFFERED}</div>;
     return (
-        should_show_sell && (
-            <React.Fragment>
-                {is_valid_to_sell ? (
-                    <Button
-                        className={classNames('dc-btn--sell', {
-                            'dc-btn--loading': is_sell_requested,
-                        })}
-                        is_disabled={is_sell_requested}
-                        text={getCardLabels().SELL}
-                        onClick={onClick}
-                        secondary
-                    />
-                ) : (
-                    <div className='dc-contract-card__no-resale-msg'>{getCardLabels().RESALE_NOT_OFFERED}</div>
-                )}
-            </React.Fragment>
-        )
+        <Button
+            className={classNames('dc-btn--sell', {
+                'dc-btn--loading': is_sell_requested,
+            })}
+            is_disabled={is_sell_requested}
+            text={getCardLabels().SELL}
+            onClick={onClick}
+            secondary
+        />
     );
 };
 

packages/components/src/components/label/label.tsx

@@ -18,7 +18,7 @@ const available_sizes = ['regular', 'large'] as const;
 
 type TLabel = {
     mode: typeof available_modes[number];
-    size: typeof available_sizes[number];
+    size?: typeof available_sizes[number];
     className?: string;
 };
 

packages/components/src/components/progress-slider/progress-slider.tsx

@@ -9,11 +9,11 @@ import moment from 'moment';
 type TProgressSliderProps = {
     className?: string;
     current_tick: number;
-    expiry_time: number & string;
+    expiry_time: number;
     getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration
     is_loading: boolean;
     server_time: moment.Moment;
-    start_time: number & string;
+    start_time: number;
     ticks_count: number;
 };
 

packages/reports/build/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = function (env) {
         context: path.resolve(__dirname, '../'),
         devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
         entry: {
-            reports: path.resolve(__dirname, '../src', 'index.jsx'),
+            reports: path.resolve(__dirname, '../src', 'index.tsx'),
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {

packages/reports/src/Components/Elements/ContentLoader/index.js

@@ -1 +1 @@
-export * from './reports-table-row.jsx';
+export * from './reports-table-row';

packages/reports/src/Components/Elements/ContentLoader/positions-card.jsx → packages/reports/src/Components/Elements/ContentLoader/positions-card.tsx

@@ -1,8 +1,11 @@
 import ContentLoader from 'react-content-loader';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const PositionsCardLoader = ({ speed }) => (
+type TPositionCardLoaderProps = {
+    speed?: number;
+};
+
+const PositionsCardLoader = ({ speed }: TPositionCardLoaderProps) => (
     <ContentLoader
         height={173}
         width={218}
@@ -28,8 +31,4 @@ const PositionsCardLoader = ({ speed }) => (
     </ContentLoader>
 );
 
-PositionsCardLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
 export { PositionsCardLoader };

packages/reports/src/Components/Elements/ContentLoader/reports-table-row.jsx → packages/reports/src/Components/Elements/ContentLoader/reports-table-row.tsx

@@ -1,8 +1,11 @@
 import ContentLoader from 'react-content-loader';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const ReportsTableRowLoader = ({ speed }) => (
+type TReportsTableRowLoader = {
+    speed?: number;
+};
+
+const ReportsTableRowLoader = ({ speed }: TReportsTableRowLoader) => (
     <ContentLoader
         height={64}
         width={992}
@@ -21,8 +24,4 @@ const ReportsTableRowLoader = ({ speed }) => (
     </ContentLoader>
 );
 
-ReportsTableRowLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
 export { ReportsTableRowLoader };

packages/reports/src/Components/Errors/error-component.jsx → packages/reports/src/Components/Errors/error-component.tsx

@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { PageError, Dialog } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+import { TErrorComponent } from '../../Types';
 
 const ErrorComponent = ({
     header,
@@ -11,13 +11,15 @@ const ErrorComponent = ({
     redirect_label,
     redirectOnClick,
     should_show_refresh = true,
-}) => {
+}: Partial<TErrorComponent>) => {
     const refresh_message = should_show_refresh ? localize('Please refresh this page to continue.') : '';
 
     return is_dialog ? (
         <Dialog
             title={header || localize('There was an error')}
+            dismissable={false}
             is_visible
+            has_close_icon={false}
             confirm_button_text={redirect_label || localize('Ok')}
             onConfirm={redirectOnClick || (() => location.reload())}
         >
@@ -38,14 +40,4 @@ const ErrorComponent = ({
     );
 };
 
-ErrorComponent.propTypes = {
-    header: PropTypes.string,
-    is_dialog: PropTypes.bool,
-    message: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
-    redirect_label: PropTypes.string,
-    redirectOnClick: PropTypes.func,
-    should_show_refresh: PropTypes.bool,
-    type: PropTypes.string,
-};
-
 export default ErrorComponent;

packages/reports/src/Components/Errors/index.js

@@ -1 +1,3 @@
-export default from './error-component.jsx';
+import ErrorComponent from './error-component';
+
+export default ErrorComponent;

packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+type TCalendarIcon = {
+    onClick: () => void;
+};
+
+const CalendarIcon = ({ onClick }: TCalendarIcon) => (
+    <Icon onClick={onClick} icon='IcCalendarDatefrom' className='inline-icon' />
+);
+
+export default CalendarIcon;

packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx → packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx

@@ -1,11 +1,19 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, DatePicker, Icon, InputField, MobileDialog, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { toMoment } from '@deriv/shared';
 
-export const RadioButton = ({ id, className, selected_value, value, label, onChange }) => {
+type TRadioButtonProps = {
+    id: string;
+    className?: string;
+    selected_value?: string;
+    value?: string;
+    label?: string;
+    onChange: (value: { label?: string; value?: string }) => void;
+};
+
+export const RadioButton = ({ id, className, selected_value, value, label, onChange }: TRadioButtonProps) => {
     return (
         <label
             htmlFor={id}
@@ -34,18 +42,43 @@ export const RadioButton = ({ id, className, selected_value, value, label, onCha
 };
 const CUSTOM_KEY = 'custom';
 
+type TInputDateRange = {
+    value?: string;
+    label?: string;
+    duration?: number;
+    onClick?: () => void;
+};
+
+type TCompositeCalendarMobileProps = {
+    input_date_range: TInputDateRange;
+    current_focus: string;
+    duration_list: Array<TInputDateRange>;
+    onChange: (value: { from: number | null; to: number; is_batch: boolean }, extra_data: { date_range: any }) => void;
+    setCurrentFocus: (focus: string) => void;
+    from: number;
+    to: number;
+};
+
 const CompositeCalendarMobile = React.memo(
-    ({ input_date_range, current_focus, duration_list, onChange, setCurrentFocus }) => {
+    ({
+        input_date_range,
+        current_focus,
+        duration_list,
+        onChange,
+        setCurrentFocus,
+        from,
+        to,
+    }: TCompositeCalendarMobileProps) => {
         const date_range = input_date_range || duration_list.find(range => range.value === 'all_time');
 
-        const [from, setFrom] = React.useState(from && toMoment(from).format('DD MMM YYYY'));
-        const [to, setTo] = React.useState(to && toMoment(to).format('DD MMM YYYY'));
+        const [from_date, setFrom] = React.useState(from && toMoment(from).format('DD MMM YYYY'));
+        const [to_date, setTo] = React.useState(to && toMoment(to).format('DD MMM YYYY'));
         const [is_open, setIsOpen] = React.useState(false);
 
         const [applied_date_range, setAppliedDateRange] = React.useState(date_range);
         const [selected_date_range, setSelectedDateRange] = React.useState(date_range);
 
-        const selectDateRange = (_selected_date_range, is_today) => {
+        const selectDateRange = (_selected_date_range: TInputDateRange, is_today?: boolean) => {
             const new_from = _selected_date_range.duration;
             onChange(
                 {
@@ -65,7 +98,7 @@ const CompositeCalendarMobile = React.memo(
         const selectCustomDateRange = () => {
             const today = toMoment().format('DD MMM YYYY');
 
-            const new_from = from || to || today;
+            const new_from = from_date || to_date || today;
             const new_to = to || today;
 
             const new_date_range = Object.assign(selected_date_range, {
@@ -74,8 +107,8 @@ const CompositeCalendarMobile = React.memo(
 
             onChange(
                 {
-                    from: toMoment(new_from, 'DD MMM YYYY').startOf('day').add(1, 's').unix(),
-                    to: toMoment(new_to, 'DD MMM YYYY').endOf('day').unix(),
+                    from: toMoment(new_from).startOf('day').add(1, 's').unix(),
+                    to: toMoment(new_to).endOf('day').unix(),
                     is_batch: true,
                 },
                 {
@@ -105,7 +138,7 @@ const CompositeCalendarMobile = React.memo(
             setIsOpen(false);
         };
 
-        const selectDate = (e, key) => {
+        const selectDate = (e: React.ChangeEvent<HTMLInputElement>, key: string) => {
             setSelectedDateRange({ value: CUSTOM_KEY });
 
             const value = e.target?.value ? toMoment(e.target.value).format('DD MMM YYYY') : '';
@@ -142,7 +175,7 @@ const CompositeCalendarMobile = React.memo(
             );
         };
 
-        const onDateRangeChange = _date_range => {
+        const onDateRangeChange = (_date_range: TInputDateRange) => {
             setSelectedDateRange(
                 duration_list.find(range => _date_range && range.value === _date_range.value) || _date_range
             );
@@ -154,8 +187,8 @@ const CompositeCalendarMobile = React.memo(
         };
 
         const today = toMoment().format('YYYY-MM-DD');
-        const max_date = to ? toMoment(to, 'DD MMM YYYY').format('YYYY-MM-DD') : today;
-        const min_date = from && toMoment(from, 'DD MMM YYYY').format('YYYY-MM-DD');
+        const max_date = to_date ? toMoment(to_date).format('YYYY-MM-DD') : today;
+        const min_date = from_date && toMoment(from_date).format('YYYY-MM-DD');
 
         return (
             <React.Fragment>
@@ -207,18 +240,18 @@ const CompositeCalendarMobile = React.memo(
                                     className='composite-calendar-modal__custom-date-range-start-date'
                                     is_nativepicker={true}
                                     placeholder={localize('Start date')}
-                                    value={from}
+                                    value={from_date}
                                     max_date={max_date}
-                                    onChange={e => selectDate(e, 'from')}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'from')}
                                 />
                                 <DatePicker
                                     className='composite-calendar-modal__custom-date-range-end-date'
                                     is_nativepicker={true}
                                     placeholder={localize('End date')}
-                                    value={to}
+                                    value={to_date}
                                     max_date={today}
                                     min_date={min_date}
-                                    onChange={e => selectDate(e, 'to')}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'to')}
                                 />
                             </div>
                         </div>
@@ -238,14 +271,4 @@ const CompositeCalendarMobile = React.memo(
 );
 
 CompositeCalendarMobile.displayName = 'CompositeCalendarMobile';
-
-CompositeCalendarMobile.propTypes = {
-    current_focus: PropTypes.string,
-    duration_list: PropTypes.array,
-    from: PropTypes.number,
-    input_date_range: PropTypes.object,
-    onChange: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-    to: PropTypes.number,
-};
 export default CompositeCalendarMobile;

packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx

@@ -5,12 +5,12 @@ import { DesktopWrapper, InputField, MobileWrapper, useOnClickOutside } from '@d
 import { localize } from '@deriv/translations';
 import { daysFromTodayTo, epochToMoment, toMoment } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import CompositeCalendarMobile from './composite-calendar-mobile.jsx';
-import SideList from './side-list.jsx';
-import CalendarIcon from './calendar-icon.jsx';
+import CompositeCalendarMobile from './composite-calendar-mobile';
+import SideList from './side-list';
+import CalendarIcon from './calendar-icon';
 
 const TwoMonthPicker = Loadable({
-    loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker.jsx'),
+    loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker'),
     loading: () => null,
     render(loaded, props) {
         const Component = loaded.default;

packages/reports/src/Components/Form/CompositeCalendar/index.js

@@ -1 +1,3 @@
-export default from './composite-calendar.jsx';
+import CompositeCalendar from './composite-calendar';
+
+export default CompositeCalendar;

packages/reports/src/Components/Form/CompositeCalendar/list-item.jsx → packages/reports/src/Components/Form/CompositeCalendar/list-item.tsx

@@ -1,8 +1,13 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React from 'react';
 
-const ListItem = ({ onClick, is_active, label }) => (
+type TListItem = {
+    label: string | React.ReactElement | Array<string>;
+    is_active: boolean;
+    onClick: () => void;
+};
+
+const ListItem = ({ onClick, is_active, label }: TListItem) => (
     <li
         className={classNames({
             'composite-calendar__prepopulated-list--is-active': is_active,
@@ -13,10 +18,4 @@ const ListItem = ({ onClick, is_active, label }) => (
     </li>
 );
 
-ListItem.propTypes = {
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.array]),
-    is_active: PropTypes.bool,
-    onClick: PropTypes.func,
-};
-
 export default ListItem;