Merge branch 'master' of github.com:binary-com/deriv-app into WALL-35…

…21/fix-cashier-menu-translations

packages/bot-web-ui/package.json

@@ -104,6 +104,7 @@
         "react-router-dom": "^5.2.0",
         "react-toastify": "^9.1.3",
         "react-transition-group": "4.4.2",
+        "html-react-parser": "5.1.12",
         "yup": "^0.32.11"
     }
 }

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

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { TStrategyDescription } from '../types';
+import parse from 'html-react-parser';
 
 const StrategyDescription = observer(({ item, font_size }: TStrategyDescription) => {
     const { ui } = useStore();
@@ -13,23 +14,29 @@ const StrategyDescription = observer(({ item, font_size }: TStrategyDescription)
             const class_names = classNames(`qs__description__content ${class_name}`);
             return (
                 <>
-                    {item?.content?.map((text: string) => (
-                        <div className={class_names} key={text}>
-                            <Text size={font_size} dangerouslySetInnerHTML={{ __html: text }} />
-                        </div>
-                    ))}
+                    {item?.content?.map((text: string) => {
+                        const parsed_text = parse(text);
+                        return (
+                            <div className={class_names} key={text}>
+                                <Text size={font_size}>{parsed_text}</Text>
+                            </div>
+                        );
+                    })}
                 </>
             );
         }
         case 'text_italic': {
             const class_names = classNames(`qs__description__content italic ${class_name}`);
             return (
                 <>
-                    {item?.content?.map((text: string) => (
-                        <div className={class_names} key={text}>
-                            <Text size={font_size} dangerouslySetInnerHTML={{ __html: text }} />
-                        </div>
-                    ))}
+                    {item?.content?.map((text: string) => {
+                        const parsed_text = parse(text);
+                        return (
+                            <div className={class_names} key={text}>
+                                <Text size={font_size}>{parsed_text}</Text>
+                            </div>
+                        );
+                    })}
                 </>
             );
         }

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

@@ -38,7 +38,27 @@ const QSInput: React.FC<TQSInput> = observer(
         const [has_focus, setFocus] = React.useState(false);
         const { setFieldValue, setFieldTouched } = useFormikContext();
         const is_number = type === 'number';
-        const max_value = 999999999999;
+        const max_value = Number.MAX_SAFE_INTEGER;
+        const input_ref = React.useRef<HTMLInputElement>(null);
+
+        React.useEffect(() => {
+            const handleWheel = (event: WheelEvent) => {
+                if (document.activeElement === input_ref.current) {
+                    event.preventDefault();
+                }
+            };
+
+            const el_input = input_ref.current;
+            if (el_input) {
+                el_input.addEventListener('wheel', handleWheel, { passive: false });
+            }
+
+            return () => {
+                if (el_input) {
+                    el_input.removeEventListener('wheel', handleWheel);
+                }
+            };
+        }, []);
 
         const handleButtonInputChange = (e: MouseEvent<HTMLButtonElement>, value: string) => {
             e?.preventDefault();
@@ -140,6 +160,7 @@ const QSInput: React.FC<TQSInput> = observer(
                                         bottom_label={is_exclusive_field ? currency : ''}
                                         max_characters={2}
                                         maxLength={2}
+                                        ref={input_ref}
                                     />
                                 </Popover>
                             </div>

packages/bot-web-ui/src/pages/server-side-bot/add-bot/add-bot.tsx

@@ -10,6 +10,7 @@ import DesktopFormWrapper from './form-wrappers/desktop-form-wrapper';
 import MobileFormWrapper from './form-wrappers/mobile-form-wrapper';
 import LossThresholdWarningDialog from './parts/loss-threshold-warning-dialog';
 import { STRATEGIES } from './config';
+import { SERVER_BOT_FIELDS } from './constants';
 import Form from './form';
 import { TConfigItem, TFormData } from './types';
 import './add-bot.scss';
@@ -51,11 +52,7 @@ export const FormikWrapper: React.FC<TFormikWrapper> = observer(({ children, set
     const getSavedValues = () => {
         let data: TFormData | null = null;
         try {
-            const data = JSON.parse(localStorage.getItem('server-form-fields') || '{}');
-            Object.keys(data).forEach(key => {
-                initial_value[key as keyof TFormData] = data[key];
-                setValue(key, data[key]);
-            });
+            data = JSON.parse(localStorage.getItem(SERVER_BOT_FIELDS) || '{}');
         } catch {
             data = null;
         }
@@ -75,18 +72,17 @@ export const FormikWrapper: React.FC<TFormikWrapper> = observer(({ children, set
             loss: data?.loss ?? '',
             profit: data?.profit ?? '',
             size: data?.size ?? String(qs_config.QUICK_STRATEGY.DEFAULT.size),
+            max_stake: data?.max_stake ?? 10,
         };
         return initial_value;
     };
 
     React.useEffect(() => {
+        initializeLossThresholdWarningData();
+
         return () => {
             is_mounted.current = false;
         };
-    }, []);
-
-    React.useEffect(() => {
-        initializeLossThresholdWarningData();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -179,6 +175,7 @@ export const FormikWrapper: React.FC<TFormikWrapper> = observer(({ children, set
 
     const handleSubmit = (form_data: TFormData) => {
         setFormVisibility(false);
+        localStorage?.setItem(SERVER_BOT_FIELDS, JSON.stringify(form_data));
         createBot(form_data);
     };
 

packages/bot-web-ui/src/pages/server-side-bot/add-bot/constants.ts

@@ -0,0 +1 @@
+export const SERVER_BOT_FIELDS = 'server-form-fields';

packages/bot-web-ui/src/pages/server-side-bot/add-bot/form.tsx

@@ -1,16 +1,17 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useFormikContext } from 'formik';
 import { observer, useStore } from '@deriv/stores';
 import { useDBotStore } from 'Stores/useDBotStore';
-import QSInput from './inputs/qs-input';
-import QSInputLabel from './inputs/qs-input-label';
-import QsTextInput from './inputs/qs-text-input';
-import QSCheckbox from './inputs/qs-toggle-switch';
+import QSInput from './inputs/add-input';
+import QSInputLabel from './inputs/add-input-label';
+import QsTextInput from './inputs/add-text-input';
+import QSCheckbox from './inputs/add-toggle-switch';
 import ContractTypeSelect from './selects/contract-type';
 import DurationTypeSelect from './selects/duration-type';
 import SymbolSelect from './selects/symbol';
 import TradeTypeSelect from './selects/trade-type';
 import { STRATEGIES } from './config';
+import { SERVER_BOT_FIELDS } from './constants';
 import { TConfigItem, TFormData, TShouldHave } from './types';
 import './add-bot.scss';
 
@@ -29,7 +30,7 @@ const QuickStrategyForm = observer(() => {
         window.addEventListener('keydown', handleEnter);
         let data: TFormData | null = null;
         try {
-            data = JSON.parse(localStorage.getItem('server-form-fields') ?? '{}');
+            data = JSON.parse(localStorage.getItem(SERVER_BOT_FIELDS) ?? '{}');
         } catch {
             data = null;
         }

packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/__tests__/qs-input-label.spec.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { mock_ws } from 'Utils/mock';
 import RootStore from 'Stores/root-store';
 import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
-import QSInputLabel from '../qs-input-label';
+import QSInputLabel from '../add-input-label';
 
 jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
 

packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/__tests__/qs-input.spec.tsx

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { mock_ws } from 'Utils/mock';
 import RootStore from 'Stores/root-store';
 import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
-import QSInput from '../qs-input';
+import QSInput from '../add-input';
 
 jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
 

packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/__tests__/qs-toggle-switch.spec.tsx

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 import { mock_ws } from 'Utils/mock';
 import RootStore from 'Stores/root-store';
 import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
-import QSToggleSwitch from '../qs-toggle-switch';
+import QSToggleSwitch from '../add-toggle-switch';
 
 jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
 jest.mock('formik', () => ({

packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/qs-input.tsx → packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/add-input.tsx

@@ -39,6 +39,26 @@ const QSInput: React.FC<TQSInput> = observer(
         const { setFieldValue, setFieldTouched } = useFormikContext();
         const is_number = type === 'number';
         const max_value = Number.MAX_SAFE_INTEGER;
+        const input_ref = React.useRef<HTMLInputElement>(null);
+
+        React.useEffect(() => {
+            const handleWheel = (event: WheelEvent) => {
+                if (document.activeElement === input_ref.current) {
+                    event.preventDefault();
+                }
+            };
+
+            const el_input = input_ref.current;
+            if (el_input) {
+                el_input.addEventListener('wheel', handleWheel, { passive: false });
+            }
+
+            return () => {
+                if (el_input) {
+                    el_input.removeEventListener('wheel', handleWheel);
+                }
+            };
+        }, []);
 
         const handleButtonInputChange = (e: MouseEvent<HTMLButtonElement>, value: string) => {
             e?.preventDefault();
@@ -140,6 +160,7 @@ const QSInput: React.FC<TQSInput> = observer(
                                         bottom_label={is_exclusive_field ? currency : ''}
                                         max_characters={2}
                                         maxLength={2}
+                                        ref={input_ref}
                                     />
                                 </Popover>
                             </div>

packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/qs-text-input.tsx → packages/bot-web-ui/src/pages/server-side-bot/add-bot/inputs/add-text-input.tsx

@@ -3,7 +3,7 @@ import { useFormikContext } from 'formik';
 import { Popover } from '@deriv/components';
 import { useStore } from '@deriv/stores';
 import { TFormData } from 'Stores/server-bot-store';
-import './qs-text-input.scss';
+import './add-text-input.scss';
 
 export default function QsTextInput({ name, field }: { name: string; field: any }) {
     const { values, setFieldTouched, setFieldValue, errors } = useFormikContext<TFormData>();

packages/bot-web-ui/src/pages/server-side-bot/summary/summary.scss

@@ -22,6 +22,8 @@
         padding: 16px;
         height: calc(100vh - (var(--summary-content-height) - 32px));
         overflow-y: auto;
+        overflow-x: hidden;
+
         &__empty {
             background-color: var(--general-section-1);
             padding: 32px;
@@ -76,6 +78,10 @@
         border-radius: 4px;
         margin-bottom: 16px;
 
+        &.slide-in {
+            animation: slide-in 0.5s ease-out forwards;
+        }
+
         &:last-child {
             margin-bottom: 0;
         }
@@ -121,3 +127,14 @@
         }
     }
 }
+
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}

packages/bot-web-ui/src/pages/server-side-bot/summary/summary.tsx

@@ -44,10 +44,16 @@ const Summary: React.FC = observer(() => {
             <div className='ssb-summary__content'>
                 {has_summary ? (
                     <>
-                        {[...txns]?.reverse()?.map(txn => {
+                        {[...txns]?.reverse()?.map((txn, index) => {
                             const status = STATUS[txn.status as keyof typeof STATUS];
+                            const should_animate = index === 0;
                             return (
-                                <div className='ssb-summary__item' key={txn.contract_id}>
+                                <div
+                                    className={classNames('ssb-summary__item', {
+                                        'slide-in': should_animate,
+                                    })}
+                                    key={txn.contract_id}
+                                >
                                     <div className='ssb-summary__item__header'>
                                         <Text size='xs' weight='bold'>
                                             {txn.display_name}

packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx

@@ -5,6 +5,7 @@ import { Localize } from '@deriv/translations';
 import { DBOT_TABS } from 'Constants/bot-contents';
 import { useDBotStore } from 'Stores/useDBotStore';
 import { TDescription } from '../tutorials.types';
+import parse from 'html-react-parser';
 
 type TFAQContent = {
     faq_list: TFAQList[];
@@ -19,7 +20,7 @@ type TFAQList = {
 
 const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) => {
     if (type === 'image') return <img src={src} className={imageclass} />;
-
+    const parsed_content = parse(content);
     return (
         <Text
             as='p'
@@ -28,8 +29,9 @@ const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) =
             className='faq__description'
             weight='normal'
             key={content}
-            dangerouslySetInnerHTML={{ __html: content }}
-        />
+        >
+            {parsed_content}
+        </Text>
     );
 };
 

packages/cashier/build/constants.js

@@ -18,6 +18,7 @@ const {
 } = require('./loaders-config');
 
 const ALIASES = {
+    'react/jsx-runtime': 'react/jsx-runtime.js',
     Assets: path.resolve(__dirname, '../src/assets'),
     Components: path.resolve(__dirname, '../src/components'),
     Config: path.resolve(__dirname, '../src/config'),

packages/cashier/package.json

@@ -37,6 +37,7 @@
         "url": "https://github.com/binary-com/deriv-app/issues"
     },
     "dependencies": {
+        "@deriv-com/ui": "1.29.10",
         "@deriv-com/analytics": "1.11.0",
         "@deriv/api": "^1.0.0",
         "@deriv/api-types": "1.0.172",

packages/cashier/src/components/cashier-container/real/real.scss

@@ -1,22 +1,24 @@
 .real {
-    &__loader {
+    &__iframe {
         width: 100%;
-        height: 80vh;
-    }
+        flex: 1;
 
-    &__iframe {
-        @include mobile {
+        @include mobile-or-tablet-screen {
             position: absolute;
-            height: calc(100% - 3.2rem);
+            height: calc(100% - 6rem);
             inset-inline-end: 0;
             padding: 0 1.6rem;
 
             + .page-container__sidebar--right {
                 position: relative;
-                top: calc(100% + 1.6rem);
+                top: 100%;
                 padding-bottom: 1.6rem;
                 flex: none;
             }
         }
     }
+    &__loader {
+        width: 100%;
+        height: 80vh;
+    }
 }