Fix qs bugs

src/components/layout/header/header.tsx

@@ -12,7 +12,6 @@
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Header, useDevice, Wrapper } from '@deriv-com/ui';
 import { Tooltip } from '@deriv-com/ui';
-import { isDotComSite } from '../../../utils';
 import { AppLogo } from '../app-logo';
 import AccountsInfoLoader from './account-info-loader';
 import AccountSwitcher from './account-switcher';
@@ -35,7 +34,7 @@
 
     const { isSingleLoggingIn } = useOauth2();
 
     const { featureFlagValue } = useGrowthbookGetFeatureValue<any>({ featureFlag: 'hub_enabled_country_list' });
 
     const renderAccountSection = () => {
         if (isAuthorizing || isSingleLoggingIn) {
@@ -122,21 +121,19 @@
                             const query_param_currency =
                                 sessionStorage.getItem('query_param_currency') || currency || 'USD';
                             try {
-                                if (isDotComSite()) {
-                                    await requestOidcAuthentication({
-                                        redirectCallbackUri: `${window.location.origin}/callback`,
-                                        ...(query_param_currency
-                                            ? {
-                                                  state: {
-                                                      account: query_param_currency,
-                                                  },
-                                              }
-                                            : {}),
-                                    }).catch(err => {
-                                        // eslint-disable-next-line no-console
-                                        console.error(err);
-                                    });
-                                }
+                                await requestOidcAuthentication({
+                                    redirectCallbackUri: `${window.location.origin}/callback`,
+                                    ...(query_param_currency
+                                        ? {
+                                              state: {
+                                                  account: query_param_currency,
+                                              },
+                                          }
+                                        : {}),
+                                }).catch(err => {
+                                    // eslint-disable-next-line no-console
+                                    console.error(err);
+                                });
                             } catch (error) {
                                 // eslint-disable-next-line no-console
                                 console.error(error);

src/components/layout/index.tsx

@@ -5,7 +5,6 @@ import { Outlet } from 'react-router-dom';
 import { api_base } from '@/external/bot-skeleton';
 import { requestOidcAuthentication } from '@deriv-com/auth-client';
 import { useDevice } from '@deriv-com/ui';
-import { isDotComSite } from '../../utils';
 import { crypto_currencies_display_order, fiat_currencies_display_order } from '../shared';
 import Footer from './footer';
 import AppHeader from './header';
@@ -124,7 +123,7 @@ const Layout = () => {
         const checkOIDCEnabledWithMissingAccount = !isEndpointPage && !isCallbackPage && !clientHasCurrency;
 
         if (
-            (isDotComSite() && isLoggedInCookie && !isClientAccountsPopulated && !isEndpointPage && !isCallbackPage) ||
+            (isLoggedInCookie && !isClientAccountsPopulated && !isEndpointPage && !isCallbackPage) ||
             checkOIDCEnabledWithMissingAccount
         ) {
             const query_param_currency = sessionStorage.getItem('query_param_currency') || currency || 'USD';

src/components/shared_ui/input/input.tsx

@@ -94,6 +94,17 @@ const Input = React.forwardRef<HTMLInputElement & HTMLTextAreaElement, TInputPro
         ref?
     ) => {
         const [counter, setCounter] = React.useState(0);
+        const [, setIsDropdownOpen] = React.useState(false);
+
+        const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+            setIsDropdownOpen(true);
+            props.onFocus?.(e);
+        };
+
+        const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+            setIsDropdownOpen(false);
+            props.onBlur?.(e);
+        };
 
         React.useEffect(() => {
             if (initial_character_count || initial_character_count === 0) {
@@ -102,26 +113,8 @@ const Input = React.forwardRef<HTMLInputElement & HTMLTextAreaElement, TInputPro
         }, [initial_character_count]);
 
         const changeHandler: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> = e => {
-            let input_value = e.target.value;
+            const input_value = e.target.value;
 
-            // Special handling for tick_count - completely prevent decimal input
-            if (e.target.name === 'tick_count') {
-                // Remove any decimal point and everything after it
-                const decimal_index = input_value.indexOf('.');
-                if (decimal_index !== -1) {
-                    input_value = input_value.substring(0, decimal_index);
-                }
-            }
-            // For other inputs, limit to 2 decimal places
-            else {
-                const decimal_index = input_value.indexOf('.');
-                if (decimal_index !== -1) {
-                    const decimal_part = input_value.substring(decimal_index + 1);
-                    if (decimal_part.length > 2) {
-                        input_value = input_value.substring(0, decimal_index + 3);
-                    }
-                }
-            }
             setCounter(input_value.length);
             e.target.value = input_value;
             props.onChange?.(e);
@@ -171,8 +164,8 @@ const Input = React.forwardRef<HTMLInputElement & HTMLTextAreaElement, TInputPro
                                 className={classNames('dc-input__field', field_className, {
                                     'dc-input__field--placeholder-visible': !label && placeholder,
                                 })}
-                                onFocus={props.onFocus}
-                                onBlur={props.onBlur}
+                                onFocus={handleFocus}
+                                onBlur={handleBlur}
                                 onChange={changeHandler}
                                 onKeyDown={props.onKeyDown}
                                 onMouseDown={props.onMouseDown}

src/components/shared_ui/popover/popover.tsx

@@ -1,6 +1,6 @@
 import React, { RefObject } from 'react';
 import classNames from 'classnames';
-import { ArrowContainer, Popover as TinyPopover } from 'react-tiny-popover';
+import { ArrowContainer, Popover as TinyPopover, PopoverState } from 'react-tiny-popover';
 import { useHover, useHoverCallback } from '@/hooks/useHover';
 import {
     LabelPairedCircleDotCaptionFillIcon,
@@ -101,7 +101,15 @@ const Popover = ({
                     {...(relative_render
                         ? {
                               parentElement: popover_ref,
-                              contentLocation: ({ childRect, popoverRect, nudgedLeft }) => {
+                              contentLocation: ({
+                                  childRect,
+                                  popoverRect,
+                                  nudgedLeft,
+                              }: {
+                                  childRect: DOMRect;
+                                  popoverRect: DOMRect;
+                                  nudgedLeft: number;
+                              }) => {
                                   const screen_width = document.body.clientWidth;
                                   const total_width = childRect.right + (popoverRect.width - childRect.width / 2);
                                   let top_offset = 0;
@@ -155,8 +163,87 @@ const Popover = ({
                               },
                           }
                         : { containerStyle: { zIndex } })}
-                    content={({ position, childRect, popoverRect }) => {
-                        return (
+                    content={(popoverState: PopoverState): JSX.Element => {
+                        const { position, childRect, popoverRect } = popoverState;
+                        const modalContent = document.querySelector('.qs__body__content');
+                        const modalHeader = document.querySelector('.modal__header');
+                        const modalFooter = document.querySelector('.modal__footer');
+
+                        const contentRect = modalContent?.getBoundingClientRect();
+                        const headerRect = modalHeader?.getBoundingClientRect();
+                        const footerRect = modalFooter?.getBoundingClientRect();
+
+                        // Add safety margins
+                        const safetyMargin = 8;
+                        // Initialize offsets
+                        let offsetTop = 0;
+                        let offsetLeft = 0;
+
+                        // Only proceed if we have all required elements
+                        if (contentRect && childRect) {
+                            // Define safe zone between header and footer
+                            const safeTop = headerRect ? headerRect.bottom + safetyMargin : contentRect.top;
+                            const safeBottom = footerRect ? footerRect.top - safetyMargin : contentRect.bottom;
+
+                            // Check if input is outside safe zone
+                            const isOutsideSafeZone =
+                                childRect.bottom < safeTop ||
+                                childRect.top > safeBottom ||
+                                childRect.right < contentRect.left + safetyMargin ||
+                                childRect.left > contentRect.right - safetyMargin;
+
+                            if (isOutsideSafeZone) {
+                                return <div style={{ display: 'none' }} />;
+                            }
+
+                            // If popover exists, adjust its position if needed
+                            if (popoverRect) {
+                                // Adjust vertical position
+                                if (popoverRect.top < safeTop) {
+                                    offsetTop = safeTop - popoverRect.top;
+                                } else if (popoverRect.bottom > safeBottom) {
+                                    offsetTop = safeBottom - popoverRect.bottom;
+                                }
+
+                                // Adjust horizontal position
+                                if (popoverRect.left < contentRect.left + safetyMargin) {
+                                    offsetLeft = contentRect.left + safetyMargin - popoverRect.left;
+                                } else if (popoverRect.right > contentRect.right - safetyMargin) {
+                                    offsetLeft = contentRect.right - safetyMargin - popoverRect.right;
+                                }
+                            }
+                        }
+
+                        // Create the popover content
+                        const PopoverContent = () => (
+                            <div
+                                id={id}
+                                onMouseEnter={onMouseEnter}
+                                onMouseLeave={onMouseLeave}
+                                className={classNames(classNameBubble, 'dc-popover__bubble', {
+                                    'dc-popover__bubble--error': has_error,
+                                })}
+                                ref={bubble_hover_ref as (node: HTMLDivElement) => void}
+                            >
+                                {!disable_message_icon && icon === 'info' && (
+                                    <i className='dc-popover__bubble__icon'>
+                                        <LabelPairedCircleInfoCaptionRegularIcon />
+                                    </i>
+                                )}
+                                {(has_error && (
+                                    <Text size='xxs' color='colored-background'>
+                                        {message}
+                                    </Text>
+                                )) || (
+                                    <Text lineHeight='md' size='xxs' className='dc-popover__bubble__text'>
+                                        {message}
+                                    </Text>
+                                )}
+                            </div>
+                        );
+
+                        // Create the arrow container with content
+                        const ArrowContainerWithContent = () => (
                             <ArrowContainer
                                 position={position}
                                 childRect={childRect}
@@ -183,32 +270,23 @@ const Popover = ({
                                           }
                                 }
                             >
-                                <div
-                                    id={id}
-                                    onMouseEnter={onMouseEnter}
-                                    onMouseLeave={onMouseLeave}
-                                    className={classNames(classNameBubble, 'dc-popover__bubble', {
-                                        'dc-popover__bubble--error': has_error,
-                                    })}
-                                    ref={bubble_hover_ref as (node: HTMLDivElement) => void}
-                                >
-                                    {!disable_message_icon && icon === 'info' && (
-                                        <i className='dc-popover__bubble__icon'>
-                                            <LabelPairedCircleInfoCaptionRegularIcon />
-                                        </i>
-                                    )}
-                                    {(has_error && (
-                                        <Text size='xxs' color='colored-background'>
-                                            {message}
-                                        </Text>
-                                    )) || (
-                                        <Text lineHeight='md' size='xxs' className='dc-popover__bubble__text'>
-                                            {message}
-                                        </Text>
-                                    )}
-                                </div>
+                                <PopoverContent />
                             </ArrowContainer>
                         );
+
+                        // Return with or without transform wrapper
+                        return offsetTop !== 0 || offsetLeft !== 0 ? (
+                            <div
+                                style={{
+                                    transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
+                                    transition: 'transform 0.2s ease-out',
+                                }}
+                            >
+                                <ArrowContainerWithContent />
+                            </div>
+                        ) : (
+                            <ArrowContainerWithContent />
+                        );
                     }}
                 >
                     <div data-testid={data_testid} className={classNames('dc-popover', className)} id={id}>

src/hooks/auth/useOauth2.ts

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 import Cookies from 'js-cookie';
 import RootStore from '@/stores/root-store';
 import { OAuth2Logout, requestOidcAuthentication } from '@deriv-com/auth-client';
-import { isDotComSite } from '../../utils';
 
 /**
  * Provides an object with properties: `oAuthLogout`, `retriggerOAuth2Login`, and `isSingleLoggingIn`.
@@ -73,15 +72,13 @@ export const useOauth2 = ({
     };
     const retriggerOAuth2Login = async () => {
         try {
-            if (isDotComSite()) {
-                await requestOidcAuthentication({
-                    redirectCallbackUri: `${window.location.origin}/callback`,
-                    postLogoutRedirectUri: window.location.origin,
-                }).catch(err => {
-                    // eslint-disable-next-line no-console
-                    console.error('Error during OAuth2 login retrigger:', err);
-                });
-            }
+            await requestOidcAuthentication({
+                redirectCallbackUri: `${window.location.origin}/callback`,
+                postLogoutRedirectUri: window.location.origin,
+            }).catch(err => {
+                // eslint-disable-next-line no-console
+                console.error('Error during OAuth2 login retrigger:', err);
+            });
         } catch (error) {
             // eslint-disable-next-line no-console
             console.error('Error during OAuth2 login retrigger:', error);

src/pages/bot-builder/quick-strategy/config.ts

@@ -75,7 +75,7 @@ const TAKE_PROFIT = (): TConfigItem => ({
         'ceil',
         {
             type: 'min',
-            value: 0.35,
+            value: 1,
             getMessage: (min: string | number) => localize('Minimum take profit allowed is {{ min }}', { min }),
         },
     ],
@@ -156,9 +156,9 @@ const STAKE = (): TConfigItem => ({
         'ceil',
         {
             type: 'min',
-            value: 0.35,
+            value: 1,
             getMessage: (min: string | number) => localize('Minimum stake allowed is {{ min }}', { min }),
-            getDynamicValue: (store: any) => store.quick_strategy?.additional_data?.min_stake || 0.35,
+            getDynamicValue: (store: any) => store.quick_strategy?.additional_data?.min_stake || 1,
         },
         {
             type: 'max',

src/pages/bot-builder/quick-strategy/form-wrappers/strategy-template-picker.scss

@@ -47,6 +47,12 @@
             &__wrapper__variant--outline {
                 background-color: unset;
                 border: none;
+                border: 1px solid var(--general-section-6);
+                padding-right: 0;
+            }
+
+            &__wrapper--has-value.quill-input__wrapper__variant--outline {
+                padding-right: 0.8rem !important;
             }
         }
     }