Farabi/bot-1859/fix--quick-strategy-flow-and-functions

src/components/shared_ui/input/input.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Text } from '@deriv-com/ui';
 import Field from '../field';
+import Text from '../text';
 
 export type TInputProps = {
     autoComplete?: string;

src/components/shared_ui/modal/index.ts

@@ -1,5 +1,4 @@
 import Modal from './modal';
-
 import './modal.scss';
 
 export default Modal;

src/components/shared_ui/select-native/select-native.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { Icon } from '@/utils/tmp/dummy';
 import { LabelPairedChevronDownLgRegularIcon } from '@deriv/quill-icons';
-import { Text } from '@deriv-com/ui';
 import Field from '../field/field';
+import Text from '../text';
 
 type TSelectNative = {
     className?: string;

src/components/shared_ui/toggle-switch/index.ts

@@ -0,0 +1,4 @@
+import ToggleSwitch from './toggle-switch';
+import './toggle-switch.scss';
+
+export default ToggleSwitch;

src/components/shared_ui/toggle-switch/toggle-switch.scss

@@ -0,0 +1,35 @@
+.dc-toggle-switch {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+
+    &__label {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        margin-right: 1.6rem;
+        padding-left: 0.4rem;
+        cursor: pointer;
+        width: 4.9rem;
+        height: 2.52rem;
+        background: var(--general-disabled);
+        border-radius: 4.9rem;
+        transition: background-color 0.25s;
+    }
+
+    &__button {
+        width: 1.9rem;
+        height: 1.9rem;
+        border-radius: 1.9rem;
+        transition: transform 0.25s;
+        background: var(--text-colored-background);
+    }
+
+    &:checked + &__label {
+        background: var(--text-profit-success);
+    }
+
+    &:checked + &__label &__button {
+        transform: translateX(2.25rem);
+    }
+}

src/components/shared_ui/toggle-switch/toggle-switch.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+type TToggleSwitch = {
+    className?: string;
+    classNameButton?: string;
+    classNameLabel?: string;
+    handleToggle: () => void;
+    id: string;
+    is_enabled: boolean;
+    name?: string;
+};
+
+const ToggleSwitch = ({
+    className,
+    classNameButton,
+    classNameLabel,
+    handleToggle,
+    id,
+    is_enabled,
+    name = 'toggle_switch',
+}: TToggleSwitch) => {
+    return (
+        <React.Fragment>
+            <input
+                aria-label={name}
+                className={classNames('dc-toggle-switch', className)}
+                id={id}
+                type='checkbox'
+                checked={is_enabled}
+                onChange={handleToggle}
+            />
+            <label className={classNames('dc-toggle-switch__label', classNameLabel)} htmlFor={id}>
+                <span className={classNames('dc-toggle-switch__button', classNameButton)} />
+            </label>
+        </React.Fragment>
+    );
+};
+
+export default ToggleSwitch;

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

@@ -1,5 +1,5 @@
 import { config as qs_config } from '@/external/bot-skeleton';
-import { localize } from '@deriv-com/translations';
+import { localize } from '@/utils/tmp/dummy';
 import {
     D_ALEMBERT,
     MARTINGALE,

src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
+import Text from '@/components/shared_ui/text';
 import { useStore } from '@/hooks/useStore';
-import { Text } from '@deriv-com/ui';
 import { TStrategyDescription } from '../types';
 
 const StrategyDescription = observer(({ item, font_size }: TStrategyDescription) => {
@@ -37,7 +37,7 @@ const StrategyDescription = observer(({ item, font_size }: TStrategyDescription)
             const class_names = classNames(`qs__description__image ${class_name}`);
             return (
                 <div className={class_names} style={item?.styles}>
-                    <img src={is_dark_mode_on ? item.dark_src ?? item.src : item.src} alt={item.alt} />
+                    <img src={is_dark_mode_on ? (item.dark_src ?? item.src) : item.src} alt={item.alt} />
                 </div>
             );
         }

src/pages/bot-builder/quick-strategy/form-wrappers/desktop-form-wrapper.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import { observer } from 'mobx-react-lite';
+import Button from '@/components/shared_ui/button';
+import Text from '@/components/shared_ui/text';
 import ThemedScrollbars from '@/components/shared_ui/themed-scrollbars';
 import { useStore } from '@/hooks/useStore';
 import { LegacyClose1pxIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
-import { Button, Text } from '@deriv-com/ui';
 import {
     rudderStackSendQsEditStrategyEvent,
     rudderStackSendQsRunStrategyEvent,

src/pages/bot-builder/quick-strategy/form-wrappers/form-tabs.tsx

@@ -1,7 +1,7 @@
 import React, { KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { Text } from '@deriv-com/ui';
+import Text from '@/components/shared_ui/text';
 import { FORM_TABS } from '../config';
 import { TDescriptionItem } from '../types';
 

src/pages/bot-builder/quick-strategy/form-wrappers/mobile-form-wrapper.tsx

@@ -7,7 +7,7 @@ import SelectNative from '@/components/shared_ui/select-native';
 import Text from '@/components/shared_ui/text';
 import ThemedScrollbars from '@/components/shared_ui/themed-scrollbars';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import {
     rudderStackSendQsRunStrategyEvent,
     rudderStackSendQsSelectedTabEvent,

src/pages/bot-builder/quick-strategy/form.tsx

@@ -20,11 +20,22 @@ const QuickStrategyForm = observer(() => {
     const { quick_strategy } = useStore();
     const { selected_strategy, setValue, form_data } = quick_strategy;
     const config: TConfigItem[][] = STRATEGIES[selected_strategy]?.fields;
-    const { is_mobile } = ui;
+    const { is_desktop } = ui;
     const { values, setFieldTouched, setFieldValue } = useFormikContext<TFormData>();
-    const { current_duration_min_max, is_enabled_toggle_switch, setIsEnabledToggleSwitch } = quick_strategy;
+    const { current_duration_min_max } = quick_strategy;
+
+    const [isEnabledToggleSwitch, setIsEnabledToggleSwitch] = React.useState(false);
+
     React.useEffect(() => {
         window.addEventListener('keydown', handleEnter);
+        let data: TFormData | null = null;
+        try {
+            data = JSON.parse(localStorage.getItem('qs-fields') ?? '{}');
+        } catch {
+            data = null;
+        }
+        setIsEnabledToggleSwitch(!!data?.boolean_max_stake);
+
         return () => {
             window.removeEventListener('keydown', handleEnter);
         };
@@ -50,6 +61,10 @@ const QuickStrategyForm = observer(() => {
             return values[item.key as keyof TFormData] === item.value;
         });
 
+    const toggleSwitch = () => {
+        setIsEnabledToggleSwitch(prev => !prev);
+    };
+
     const renderForm = () => {
         return config.map((group, group_index) => {
             if (!group?.length) return null;
@@ -59,8 +74,8 @@ const QuickStrategyForm = observer(() => {
                         const key = `${field.name || field.type} + ${field_index}`;
 
                         if (
-                            (is_mobile && field.hide?.includes('mobile')) ||
-                            (!is_mobile && field.hide?.includes('desktop'))
+                            (!is_desktop && field.hide?.includes('mobile')) ||
+                            (is_desktop && field.hide?.includes('desktop'))
                         ) {
                             return null;
                         }
@@ -84,7 +99,7 @@ const QuickStrategyForm = observer(() => {
                                 }
                                 const should_validate = field.should_have;
                                 if (should_validate && field.name === 'max_stake') {
-                                    min = +(form_data?.stake ?? 0);
+                                    min = +form_data?.stake;
                                     if (isNaN(min)) {
                                         min = +initial_stake;
                                     }
@@ -102,7 +117,7 @@ const QuickStrategyForm = observer(() => {
                                     max = 9;
                                 }
                                 if (should_have?.length) {
-                                    if (!should_enable && (is_mobile || hide_without_should_have)) {
+                                    if (!should_enable && (!is_desktop || hide_without_should_have)) {
                                         return null;
                                     }
                                     return (
@@ -148,8 +163,8 @@ const QuickStrategyForm = observer(() => {
                                         key={key}
                                         name={field.name as string}
                                         label={field.label as string}
-                                        isEnabledToggleSwitch={!!is_enabled_toggle_switch}
-                                        setIsEnabledToggleSwitch={setIsEnabledToggleSwitch}
+                                        isEnabledToggleSwitch={!!isEnabledToggleSwitch}
+                                        setIsEnabledToggleSwitch={toggleSwitch}
                                     />
                                 );
                             // Dedicated components only for Quick-Strategy

src/pages/bot-builder/quick-strategy/inputs/qs-input-label.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Popover from '@/components/shared_ui/popover';
-import { Text } from '@deriv-com/ui';
+import Text from '@/components/shared_ui/text';
 
 type TQSInputLabel = {
     children?: React.ReactNode;

src/pages/bot-builder/quick-strategy/inputs/qs-input.tsx

@@ -2,9 +2,9 @@ import React, { MouseEvent } from 'react';
 import classNames from 'classnames';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { observer } from 'mobx-react-lite';
+import Input from '@/components/shared_ui/input';
 import Popover from '@/components/shared_ui/popover';
 import { useStore } from '@/hooks/useStore';
-import { Input } from '@deriv-com/ui';
 
 type TQSInput = {
     name: string;

src/pages/bot-builder/quick-strategy/inputs/qs-toggle-switch.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { Field, useFormikContext } from 'formik';
 import Popover from '@/components/shared_ui/popover';
-import { localize } from '@/utils/tmp/dummy';
-import { Text, ToggleSwitch } from '@deriv-com/ui';
+import Text from '@/components/shared_ui/text';
+import ToggleSwitch from '@/components/shared_ui/toggle-switch';
+import { localize } from '@deriv-com/translations';
 import { TFormData } from '../types';
 
 type TQSToggleSwitch = {

src/pages/bot-builder/quick-strategy/parts/loss-threshold-warning-dialog.tsx

@@ -1,7 +1,8 @@
 import { observer } from 'mobx-react-lite';
+import Checkbox from '@/components/shared_ui/checkbox';
+import Dialog from '@/components/shared_ui/dialog';
 import { useStore } from '@/hooks/useStore';
-import { Localize, localize } from '@/utils/tmp/dummy';
-import { Checkbox, Dialog } from '@deriv-com/ui';
+import { Localize, localize } from '@deriv-com/translations';
 import useQsSubmitHandler from '../form-wrappers/useQsSubmitHandler';
 import './loss-threshold-warning-dialog.scss';
 

src/pages/bot-builder/quick-strategy/quick-strategy.scss

@@ -31,13 +31,13 @@
         @include flex-center(space-between);
 
         border-bottom: 1px solid var(--border-divider);
+        background-color: var(--general-section-1);
 
         &__title {
             @extend .x-center;
 
             padding: 0 2.4rem;
             height: var(--header-height);
-            background-color: var(--general-section-1);
             width: var(--sidebar-width);
         }