smartxtrader 3.8.1-xm.0

package/src/javascript/app/pages/form/form-component.jsx

@@ -0,0 +1,786 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    TextField,
+    TextFieldAddon,
+    DatePickerDropdown,
+    Checkbox,
+    SectionMessage,
+    BreakpointProvider,
+} from '@deriv-com/quill-ui';
+import moment from 'moment';
+import { CurrencyDropdown } from './currency-dropdown.jsx';
+import { NumbersDropdown } from './numbers-dropdown.jsx';
+import BarrierFields from './barrier-fields.jsx';
+import { TimePickerDropdown } from './time-selection.jsx';
+import { DropdownComponent } from './dropdown-component.jsx';
+import Defaults, { PARAM_NAMES } from '../trade/defaults.js';
+import {
+    useSessionChange,
+    useTradeChange,
+    eventDispatcher,
+    useMarketChange,
+    useContractChange,
+} from '../../hooks/events.js';
+import common_functions from '../../../_common/common_functions.js';
+import { localize } from '../../../_common/localize.js';
+import dataManager from '../../common/data_manager.js';
+import { setDefaultParams } from '../../common/helpers.js';
+import { isCryptocurrency, getMinPayout } from '../../../_common/base/currency_base.js';
+import Client from '../../base/client';
+
+const Cookies = require('js-cookie');
+
+export const FormComponent = () => {
+    const [trade_data, setTradeData] = useState({});
+
+    const has_trade_change = useTradeChange();
+    const has_market_change = useMarketChange();
+    const has_contract_change = useContractChange();
+    const has_session_change = useSessionChange();
+
+    useEffect(() => {
+        setTradeData((old_data) => ({
+            ...old_data,
+            ...dataManager.getAllTrades(),
+        }));
+    }, [has_market_change, has_contract_change, has_trade_change, has_session_change]);
+
+    const form_name = Defaults.get(PARAM_NAMES.FORM_NAME);
+    const expiry_type = Defaults.get(PARAM_NAMES.EXPIRY_TYPE) || 'duration';
+    const date_start = Defaults.get(PARAM_NAMES.DATE_START);
+    const time_start = Defaults.get(PARAM_NAMES.TIME_START);
+    const duration_amount = Defaults.get(PARAM_NAMES.DURATION_AMOUNT) || 5;
+    const duration_units = Defaults.get(PARAM_NAMES.DURATION_UNITS) || 't';
+    const expiry_date = Defaults.get(PARAM_NAMES.EXPIRY_DATE);
+    const expiry_time = Defaults.get(PARAM_NAMES.EXPIRY_TIME);
+    const amount_type = Defaults.get(PARAM_NAMES.AMOUNT_TYPE);
+    const amount = Defaults.get(PARAM_NAMES.AMOUNT);
+    const currency = Defaults.get(PARAM_NAMES.CURRENCY);
+    const min_payout = getMinPayout(currency);
+    const amount_crypto = Defaults.get('amount_crypto') ?? min_payout;
+    const is_equal = Defaults.get(PARAM_NAMES.IS_EQUAL) ?? 1;
+    const prediction = Defaults.get(PARAM_NAMES.PREDICTION);
+    const selected_tick = Defaults.get(PARAM_NAMES.SELECTED_TICK) || 5;
+    const multiplier = Defaults.get(PARAM_NAMES.MULTIPLIER);
+
+    const {
+        start_dates,
+        expiry_type_options,
+        duration_data,
+        duration_options,
+        endtime_data,
+        currency_list,
+        reset_message,
+        show_allow_equals,
+    } = trade_data;
+
+    const [is_advanced_open, setIsAdvancedOpen] = useState(false);
+    const quick_stake_values = [0.35, 3, 5, 7, 10, 15, 20, 30, 50, 100, 200, 300, 400, 500, 700, 1000];
+    const advanced_content_id = useRef(
+        `advanced-content-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+    ).current;
+    const quick_panel_ref = useRef(null);
+    const quick_panel_animation_timeout = useRef(null);
+    const [is_quick_panel_visible, setIsQuickPanelVisible] = useState(false);
+    const [is_quick_panel_expanded, setIsQuickPanelExpanded] = useState(false);
+    const [quick_panel_animation, setQuickPanelAnimation] = useState('');
+    const QUICK_PANEL_ANIMATION_DURATION = 500;
+    const [selected_quick_index, setSelectedQuickIndex] = useState(0);
+
+    const contract_forms = [
+        'risefall',
+        'callputequal',
+        'touchnotouch',
+        'higherlower',
+        'endsinout',
+        'staysinout',
+        'matchdiff',
+        'evenodd',
+        'overunder',
+        'asian',
+        'lookbackhigh',
+        'lookbacklow',
+        'lookbackhighlow',
+        'reset',
+        'highlowticks',
+        'runs',
+    ];
+
+    const onExpiryDateChange = (value) => {
+        const element = common_functions.getElementById('expiry_date');
+        const new_date = moment(value).format('YYYY-MM-DD');
+        if (new_date !== expiry_date) {
+            if (!endtime_data.show_datepicker) {
+                Array.from(element.options).map((option) => {
+                    if (moment(option.text).format('YYYY-MM-DD') === value) {
+                        option.setAttribute('selected', true);
+                        option.setAttribute('data-value', new_date);
+                    } else {
+                        option.setAttribute('selected', false);
+                        option.setAttribute('data-value', new_date);
+                    }
+                });
+            } else {
+                element.setAttribute('data-value', new_date);
+            }
+            eventDispatcher(element, 'change');
+        }
+    };
+
+    const updateFormField = (element_id, value, event_type) => {
+        const element = common_functions.getElementById(element_id);
+        if (element_id === 'callputequal') {
+            element.checked = !+is_equal;
+        } else {
+            element.value = value;
+        }
+        eventDispatcher(element, event_type);
+    };
+
+    const getMessage = (form) => {
+        if (form === 'highlowticks') {
+            return localize('This contract type only offers 5 ticks');
+        }
+        return null;
+    };
+
+    const handleAmountChange = (e, id) => {
+        updateFormField(id, e.target.value, 'input');
+        setDefaultParams(id, e.target.value);
+    };
+
+    const handleQuickStakeSelect = (value) => {
+        updateFormField('amount', value, 'input');
+        setDefaultParams('amount', value);
+    };
+
+    const handleAmountAdjust = (multiplier) => {
+        const current_amount = Number(amount_value) || 0;
+        const adjusted_amount = Math.max(Number(min_payout) || 0, Number((current_amount * multiplier).toFixed(2)));
+
+        handleQuickStakeSelect(adjusted_amount);
+    };
+
+    const handleMaxBet = () => {
+        const balance = Number(Client.get('balance') ?? 0);
+        const max_allowance = Math.min(balance, 26000);
+        const formatted_value = Number(max_allowance.toFixed(2));
+
+        handleQuickStakeSelect(formatted_value);
+        closeQuickPanel();
+    };
+
+    const resetQuickPanelAnimation = () => {
+        if (quick_panel_animation_timeout.current) {
+            clearTimeout(quick_panel_animation_timeout.current);
+            quick_panel_animation_timeout.current = null;
+        }
+
+        setQuickPanelAnimation('');
+    };
+
+    const setQuickPanelAnimationWithTimeout = (animation_class, on_complete) => {
+        if (quick_panel_animation_timeout.current) {
+            clearTimeout(quick_panel_animation_timeout.current);
+        }
+
+        setQuickPanelAnimation(animation_class);
+
+        if (animation_class) {
+            quick_panel_animation_timeout.current = setTimeout(() => {
+                setQuickPanelAnimation('');
+                quick_panel_animation_timeout.current = null;
+                if (on_complete) {
+                    on_complete();
+                }
+            }, QUICK_PANEL_ANIMATION_DURATION);
+        } else if (on_complete) {
+            on_complete();
+        }
+    };
+
+    const openQuickPanel = () => {
+        setIsQuickPanelVisible(true);
+        setIsQuickPanelExpanded(true);
+        setQuickPanelAnimationWithTimeout('aui-flip-in-x');
+    };
+
+    const closeQuickPanel = () => {
+        if (!is_quick_panel_visible) return;
+
+        const prefers_reduced_motion =
+            typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)')?.matches;
+
+        setIsQuickPanelExpanded(false);
+        if (prefers_reduced_motion) {
+            resetQuickPanelAnimation();
+            setIsQuickPanelVisible(false);
+            return;
+        }
+
+        setQuickPanelAnimationWithTimeout('aui-flip-out-x', () => setIsQuickPanelVisible(false));
+    };
+
+    const toggleQuickPanel = () => {
+        if (is_quick_panel_expanded) {
+            closeQuickPanel();
+        } else {
+            openQuickPanel();
+        }
+    };
+
+    const amount_value = !isCryptocurrency(currency)
+        ? (!amount || +amount === +min_payout ? 5 : amount)
+        : amount_crypto;
+
+    useEffect(() => {
+        const quick_index = quick_stake_values.findIndex((value) => +value === +amount_value);
+
+        if (quick_index >= 0) {
+            setSelectedQuickIndex(quick_index);
+        }
+    }, [amount_value]);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (quick_panel_ref.current && !quick_panel_ref.current.contains(event.target)) {
+                closeQuickPanel();
+            }
+        };
+
+        if (is_quick_panel_visible) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [is_quick_panel_visible]);
+
+    useEffect(() => () => resetQuickPanelAnimation(), []);
+
+    const findTextByValue = (arr, value) => arr.find(item => item.value === value)?.text || null;
+
+    const isEmpty = (obj) => Object.keys(obj).length === 0;
+
+    const has_advanced_fields = contract_forms.includes(form_name);
+
+    useEffect(() => {
+        if (isEmpty(trade_data)) return;
+
+        if (!isCryptocurrency(currency) && (!amount || +amount === +min_payout)) {
+            updateFormField('amount', 5, 'input');
+            setDefaultParams(PARAM_NAMES.AMOUNT, 5);
+        }
+        if (!Defaults.get(PARAM_NAMES.AMOUNT_TYPE)) {
+            setDefaultParams(PARAM_NAMES.AMOUNT_TYPE, 'stake');
+        }
+        if (!Defaults.get(PARAM_NAMES.DURATION_AMOUNT)) {
+            updateFormField('duration_amount', 5, 'input');
+            setDefaultParams(PARAM_NAMES.DURATION_AMOUNT, 5);
+        }
+        if (!Defaults.get(PARAM_NAMES.DURATION_UNITS)) {
+            updateFormField('duration_units', 't', 'change');
+            setDefaultParams(PARAM_NAMES.DURATION_UNITS, 't');
+        }
+        if (!Defaults.get(PARAM_NAMES.SELECTED_TICK)) {
+            updateFormField('selected_tick', 5, 'change');
+            setDefaultParams(PARAM_NAMES.SELECTED_TICK, 5);
+        }
+        if (!Defaults.get(PARAM_NAMES.EXPIRY_TYPE)) {
+            updateFormField('expiry_type', 'duration', 'change');
+            setDefaultParams(PARAM_NAMES.EXPIRY_TYPE, 'duration');
+        }
+        if (Defaults.get(PARAM_NAMES.IS_EQUAL) === undefined) {
+            setDefaultParams(PARAM_NAMES.IS_EQUAL, 1);
+        }
+    }, [amount, currency, min_payout, trade_data]);
+
+    if (isEmpty(trade_data)) {
+        return null;
+    }
+
+    const getMinMaxDate = () => {
+        const { minDate: min, maxDate: max } = endtime_data.datepicker_config;
+        const today = new Date();
+    
+        const minDate = new Date(today);
+        minDate.setDate(today.getDate() + min);
+    
+        const maxDate = new Date(today);
+        maxDate.setDate(today.getDate() + max);
+    
+        return { minDate, maxDate };
+    };
+
+    const payout_type_options = [
+        { text: localize('Stake'), value: 'stake' },
+        { text: localize('Payout'), value: 'payout' },
+    ];
+
+    const formatEndDate = (date) => {
+        const expriry_date_obj = endtime_data.options.find(obj => obj.value === date);
+        if (expriry_date_obj) {
+            return moment(date).format('ddd - DD MMM, YYYY');
+        }
+        return moment(endtime_data.options[0].value).format('ddd - DD MMM, YYYY');
+    };
+
+    const lang = Cookies.get('language').replace('_','-').toLowerCase() || 'en';
+    const is_lookback_form = ['lookbackhigh', 'lookbacklow', 'lookbackhighlow'].includes(form_name);
+
+    const amountFields = !is_lookback_form ? (
+        <div className='quill-form-row'>
+            <div className='form_field field-pb'>
+                <DropdownComponent
+                    options={payout_type_options}
+                    value={findTextByValue(payout_type_options, amount_type || 'stake')}
+                    onUpdate={updateFormField}
+                    elementId='amount_type'
+                />
+            </div>
+            {currency_list ? (
+                <React.Fragment>
+                    <div className='form_field field-pb'>
+                        <TextField
+                            value={amount_value}
+                            type='number'
+                            allowDecimals={true}
+                            onChange={(e) => handleAmountChange(e, 'amount')}
+                        />
+                    </div>
+                    <div className='form_field field-pb'>
+                        <CurrencyDropdown
+                            currency_list={currency_list}
+                            currency={currency}
+                            onUpdate={updateFormField}
+                            elementId='currency'
+                        />
+                    </div>
+                </React.Fragment>
+            ) : (
+                <div className='form_field field-pb'>
+                    <TextFieldAddon
+                        type='number'
+                        allowDecimals
+                        onChange={(e) => handleAmountChange(e, 'amount')}
+                        value={amount_value}
+                        addonLabel={currency}
+                        addOnPosition='right'
+                    />
+                </div>
+            )}
+        </div>
+    ) : (
+        <div className='quill-form-row'>
+            {currency_list ? (
+                <React.Fragment>
+                    <div className='form_field field-pb'>
+                        <TextField
+                            value={multiplier}
+                            label={localize('Multiplier')}
+                            type='number'
+                            allowDecimals={true}
+                            onChange={(e) => handleAmountChange(e, 'multiplier')}
+                        />
+                    </div>
+                    <div className='form_field field-pb'>
+                        <CurrencyDropdown
+                            currency_list={currency_list}
+                            currency={currency}
+                            onUpdate={updateFormField}
+                            elementId='multiplier_currency'
+                        />
+                    </div>
+                </React.Fragment>
+            ) : (
+                <div className='form_field field-pb'>
+                    <TextFieldAddon
+                        addonLabel={currency}
+                        addOnPosition='right'
+                        label={localize('Multiplier')}
+                        value={multiplier}
+                        type='number'
+                        allowDecimals={true}
+                        onChange={(e) => handleAmountChange(e, 'multiplier')}
+                    />
+                </div>
+            )}
+        </div>
+    );
+
+    const renderDurationFields = () => (
+        <React.Fragment>
+            <div className='quill-form-row duration-selection'>
+                <div className='form_field field-pb'>
+                    <DropdownComponent
+                        options={expiry_type_options}
+                        value={findTextByValue(expiry_type_options, expiry_type)}
+                        onUpdate={updateFormField}
+                        elementId='expiry_type'
+                    />
+                </div>
+                {expiry_type === 'duration' && (
+                    <div className={`form_field ${!duration_data?.message ? 'field-pb' : ''}`}>
+                        <TextField
+                            type='number'
+                            value={duration_amount}
+                            message={duration_data?.message || ''}
+                            status={duration_data?.status || 'neutral'}
+                            onChange={(e) => {
+                                updateFormField(
+                                    'duration_amount',
+                                    e.target.value,
+                                    'input'
+                                );
+                                setDefaultParams('duration_amount', e.target.value);
+                            }}
+                        />
+                    </div>
+                )}
+                {expiry_type === 'endtime' && (
+                    <React.Fragment>
+                        {endtime_data && (
+                            <div className='form_field field-pb'>
+                                {endtime_data.show_datepicker ? (
+                                    <DatePickerDropdown
+                                        value={moment(expiry_date).format('DD/MM/YYYY')}
+                                        datePickerProps={{
+                                            minDate  : getMinMaxDate().minDate,
+                                            maxDate  : getMinMaxDate().maxDate,
+                                            locale   : lang,
+                                            formatDay: (locale, date) =>
+                                                moment(date).format('D').replace(/\D/g, ''),
+                                        }}
+                                        onSelectDate={(value) => {
+                                            onExpiryDateChange(value);
+                                        }}
+                                    />
+                                ) : (
+                                    <DropdownComponent
+                                        options={endtime_data.options}
+                                        value={formatEndDate(expiry_date)}
+                                        onUpdate={onExpiryDateChange}
+                                        elementId='expiry_date'
+                                    />
+                                )}
+                            </div>
+                        )}
+                    </React.Fragment>
+                )}
+            </div>
+            {expiry_type === 'duration' && (
+                <div className='quill-form-row duration-units-row'>
+                    <div className='form_field field-pb form_field--spacer' aria-hidden='true' />
+                    <div className='form_field field-pb'>
+                        <DropdownComponent
+                            options={duration_options}
+                            value={findTextByValue(duration_options, duration_units)}
+                            onUpdate={updateFormField}
+                            elementId='duration_units'
+                        />
+                    </div>
+                </div>
+            )}
+            {expiry_type === 'endtime' && expiry_time && (
+                <div className='quill-form-row'>
+                    <div className='form_field field-pb'>
+                        <TimePickerDropdown
+                            time={expiry_time}
+                            onUpdate={updateFormField}
+                            elementId='expiry_time'
+                        />
+                    </div>
+                </div>
+            )}
+        </React.Fragment>
+    );
+
+    return (
+        <BreakpointProvider>
+            <div className='quill-form-container'>
+                {contract_forms.includes(form_name) ? (
+                    <React.Fragment>
+                        {form_name === 'highlowticks' && (
+                            <div className='section-msg-container'>
+                                <SectionMessage status='info' message={getMessage(form_name)} />
+                            </div>
+                        )}
+                        {form_name === 'reset' && reset_message && (
+                            <div className='section-msg-container'>
+                                <SectionMessage status='info' message={reset_message} />
+                            </div>
+                        )}
+                        <div className='quill-form-rows'>
+                            {['matchdiff', 'overunder'].includes(form_name) && (
+                                <div className='quill-form-row'>
+                                    <div className='form_field field-pb'>
+                                        <NumbersDropdown
+                                            value={prediction}
+                                            label={localize('Last Digit Prediction')}
+                                            start={0}
+                                            end={9}
+                                            elementId='prediction'
+                                            onUpdate={updateFormField}
+                                        />
+                                    </div>
+                                </div>
+                            )}
+                            <BarrierFields
+                                form_name={form_name}
+                                handleAmountChange={handleAmountChange}
+                            />
+                            {has_advanced_fields && (
+                                <div className={`advanced-accordion ${is_advanced_open ? 'is-open' : ''}`}>
+                                    <button
+                                        type='button'
+                                        className='advanced-accordion__header'
+                                        aria-expanded={is_advanced_open}
+                                        aria-controls={advanced_content_id}
+                                        id={`${advanced_content_id}-header`}
+                                        onClick={() => setIsAdvancedOpen(!is_advanced_open)}
+                                    >
+                                        <span>{localize('Advanced')}</span>
+                                        <span className='advanced-accordion__chevron' aria-hidden='true'>
+                                            <svg
+                                                className='advanced-accordion__chevron-icon'
+                                                viewBox='0 0 24 24'
+                                                role='presentation'
+                                                focusable='false'
+                                            >
+                                                <path
+                                                    d='M6 9l6 6 6-6'
+                                                    fill='none'
+                                                    stroke='currentColor'
+                                                    strokeWidth='2'
+                                                    strokeLinecap='round'
+                                                    strokeLinejoin='round'
+                                                />
+                                            </svg>
+                                        </span>
+                                    </button>
+                                    {is_advanced_open && (
+                                        <div
+                                            className='advanced-accordion__content'
+                                            id={advanced_content_id}
+                                            role='region'
+                                            aria-labelledby={`${advanced_content_id}-header`}
+                                        >
+                                            <div className='advanced-accordion__item'>
+                                                <div className='quill-form-row stake-duration-row'>
+                                                    <div className='stake-duration-row__column stake-duration-row__column--stake'>
+                                                        {amountFields}
+                                                    </div>
+                                                    <div className='stake-duration-row__column stake-duration-row__column--quick-stake'>
+                                                        <div className='quick-stake' ref={quick_panel_ref}>
+                                                            <div className='quick-stake__controls'>
+                                                                <button
+                                                                    type='button'
+                                                                    className='quick-stake__adjust quick-stake__adjust--decrease'
+                                                                    aria-label={localize('Halve amount')}
+                                                                    onClick={() => handleAmountAdjust(0.5)}
+                                                                >
+                                                                    ½×
+                                                                </button>
+                                                                <button
+                                                                    type='button'
+                                                                    className={`quick-stake__trigger ${
+                                                                        is_quick_panel_visible ? 'is-open' : ''
+                                                                    }`}
+                                                                    aria-expanded={is_quick_panel_expanded}
+                                                                    aria-controls='quick-stake-panel'
+                                                                    aria-label={localize('Cyber quick stake')}
+                                                                    onClick={toggleQuickPanel}
+                                                                >
+                                                                    <span className='quick-stake__trigger-icon' aria-hidden='true'>
+                                                                        <svg
+                                                                            width='18'
+                                                                            height='18'
+                                                                            viewBox='0 0 18 18'
+                                                                            fill='none'
+                                                                            xmlns='http://www.w3.org/2000/svg'
+                                                                        >
+                                                                            <path
+                                                                                d='M10.227 1.5 4.5 10.227h3.545L7.773 16.5l5.727-8.727H10.5L10.227 1.5Z'
+                                                                                fill='url(#quick-stake-icon-gradient)'
+                                                                            />
+                                                                            <defs>
+                                                                                <linearGradient
+                                                                                    id='quick-stake-icon-gradient'
+                                                                                    x1='4.5'
+                                                                                    y1='1.5'
+                                                                                    x2='14.25'
+                                                                                    y2='16.5'
+                                                                                    gradientUnits='userSpaceOnUse'
+                                                                                >
+                                                                                    <stop stopColor='#7CE7FF' />
+                                                                                    <stop offset='1' stopColor='#FF00C6' />
+                                                                                </linearGradient>
+                                                                            </defs>
+                                                                        </svg>
+                                                                    </span>
+                                                                    <span className='quick-stake__trigger-value'>
+                                                                        {`${amount_value || quick_stake_values[0]} ${currency || ''}`.trim()}
+                                                                    </span>
+                                                                </button>
+                                                                <button
+                                                                    type='button'
+                                                                    className='quick-stake__adjust quick-stake__adjust--increase'
+                                                                    aria-label={localize('Double amount')}
+                                                                    onClick={() => handleAmountAdjust(2)}
+                                                                >
+                                                                    2×
+                                                                </button>
+                                                            </div>
+                                                            <div
+                                                                id='quick-stake-panel'
+                                                                className={`quick-stake__panel ${
+                                                                    is_quick_panel_visible ? 'is-open' : ''
+                                                                }`.trim()}
+                                                                role='dialog'
+                                                                aria-label={localize('Quick stake console')}
+                                                            >
+                                                                <div
+                                                                    className={`quick-stake__panel-inner aui-animated aui-faster ${quick_panel_animation}`.trim()}
+                                                                >
+                                                                    <div className='quick-stake__panel-header'>
+                                                                        <span className='quick-stake__panel-title'>
+                                                                            {localize('Instant stakes')}
+                                                                        </span>
+                                                                        <div className='quick-stake__panel-actions'>
+                                                                            <button
+                                                                                type='button'
+                                                                                className='quick-stake__max'
+                                                                                onClick={handleMaxBet}
+                                                                            >
+                                                                                {localize('Max bet')}
+                                                                            </button>
+                                                                            <button
+                                                                                type='button'
+                                                                                className='quick-stake__close'
+                                                                                aria-label={localize('Close quick stake panel')}
+                                                                                onClick={closeQuickPanel}
+                                                                            >
+                                                                                ×
+                                                                            </button>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div className='quick-stake__section'>
+                                                                        <div className='quick-stake__section-header'>
+                                                                            <span>{localize('Micro / turbo stakes')}</span>
+                                                                            <span className='quick-stake__readout'>
+                                                                                {`${quick_stake_values[selected_quick_index]} ${
+                                                                                    currency || ''
+                                                                                }`.trim()}
+                                                                            </span>
+                                                                        </div>
+                                                                        <input
+                                                                            type='range'
+                                                                            min='0'
+                                                                            max={quick_stake_values.length - 1}
+                                                                            step='1'
+                                                                            value={selected_quick_index}
+                                                                            onChange={(event) => {
+                                                                                const new_index = Number(event.target.value);
+                                                                                setSelectedQuickIndex(new_index);
+                                                                                handleQuickStakeSelect(quick_stake_values[new_index]);
+                                                                            }}
+                                                                            className='quick-stake__slider'
+                                                                        />
+                                                                        <div className='quick-stake__scale'>
+                                                                            {quick_stake_values.map((value, index) => (
+                                                                                <button
+                                                                                    key={`quick-${value}`}
+                                                                                    type='button'
+                                                                                    className={`quick-stake__pill ${
+                                                                                        selected_quick_index === index
+                                                                                            ? 'is-active'
+                                                                                            : ''
+                                                                                    }`}
+                                                                                    onClick={() => {
+                                                                                        setSelectedQuickIndex(index);
+                                                                                        handleQuickStakeSelect(value);
+                                                                                    }}
+                                                                                >
+                                                                                    {value}
+                                                                                </button>
+                                                                            ))}
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    {form_name !== 'highlowticks' && (
+                                                        <div className='stake-duration-row__column stake-duration-row__column--duration'>
+                                                            {renderDurationFields()}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+                                            {['risefall', 'callputequal'].includes(form_name) && start_dates && date_start && (
+                                                <div className='advanced-accordion__item'>
+                                                    <div className='quill-form-row'>
+                                                        <div className='form_field field-pb'>
+                                                            <DropdownComponent
+                                                                label={localize('Start Time')}
+                                                                options={start_dates.options}
+                                                                value={findTextByValue(start_dates.options, date_start)}
+                                                                onUpdate={updateFormField}
+                                                                elementId='date_start'
+                                                            />
+                                                        </div>
+                                                        {date_start !== 'now' && (
+                                                            <div className='form_field field-pb'>
+                                                                <TimePickerDropdown
+                                                                    time={time_start}
+                                                                    onUpdate={updateFormField}
+                                                                    elementId='time_start'
+                                                                />
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            )}
+                                            {form_name === 'highlowticks' && (
+                                                <div className='advanced-accordion__item'>
+                                                    <NumbersDropdown
+                                                        value={selected_tick}
+                                                        label={localize('Ticks')}
+                                                        start={1}
+                                                        end={5}
+                                                        elementId='selected_tick'
+                                                        onUpdate={updateFormField}
+                                                    />
+                                                    <p className='advanced-accordion__text'>{getMessage(form_name)}</p>
+                                                </div>
+                                            )}
+                                            {show_allow_equals && (
+                                                <div className='advanced-accordion__item advanced-accordion__item--checkbox'>
+                                                    <Checkbox
+                                                        label={localize('Allow equals')}
+                                                        id='allow_equals'
+                                                        onChange={(e) => {
+                                                            updateFormField('callputequal', e, 'change');
+                                                        }}
+                                                        size='md'
+                                                        checked={+is_equal === 1}
+                                                        infoIconMessage={localize(
+                                                            'Win payout if exit spot is also equal to entry spot.'
+                                                        )}
+                                                    />
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </React.Fragment>
+                ) : null}
+            </div>
+        </BreakpointProvider>
+    );
+};
+
+export default FormComponent;