-
Notifications
You must be signed in to change notification settings - Fork 299
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[BOT][Accumulators]maryia/bot-1980/feat: Adapt QS form as per new des…
…ign (#17016) * feat: Adapt QS form as per new design * refactor: desktop form wrapper component * refactor: desktop form wrapper component(2) * fix: btn back on the desktop * refactor: add useCallback for renderContent * refactor: strategy list component * fix: test cases of quick strategy * refactor: change logic as per new configuration of QS * add Stepper component from Quill, install quill libraries, update the version * chore: add temp stepper.scss * chore: merge master, resolve conflicts(part2) * fix: UI Bugs while creating a quick strategy * chore: update package-lock file * fix: eslint issues * style: fix margin strategy-template-picker * fix: tablet version bugs and rtl * fix: search option and change the color * fix: tooltip text * Delete packages/bot-web-ui/package-lock.json * chore: remove server bot icons and parameters --------- Co-authored-by: Sandeep Rajput <[email protected]>
- Loading branch information
1 parent
7905927
commit 2d1bbd7
Showing
19 changed files
with
995 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
220 changes: 220 additions & 0 deletions
220
...rc/pages/bot-builder/quick-strategy/form-wrappers/upgraded-qs-v2/desktop-form-wrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,220 @@ | ||
| import React from 'react'; | ||
| import { useFormikContext } from 'formik'; | ||
| import { Button, Text, ThemedScrollbars } from '@deriv/components'; | ||
| import Icon from '@deriv/components/src/components/icon/icon'; | ||
| import { observer } from '@deriv/stores'; | ||
| import { localize } from '@deriv/translations'; | ||
| import { useDBotStore } from 'Stores/useDBotStore'; | ||
| import { rudderStackSendQsEditStrategyEvent } from '../../../../../analytics/rudderstack-quick-strategy'; | ||
| import { STRATEGIES } from '../../config'; | ||
| import { TFormData, TFormValues } from '../../types'; | ||
| import StrategyTabContent from '../strategy-tab-content'; | ||
| import useQsSubmitHandler from '../useQsSubmitHandler'; | ||
| import QSStepper from './qs-stepper'; | ||
| import StrategyTemplatePicker from './strategy-template-picker'; | ||
| import { QsSteps } from './trade-constants'; | ||
| import '../../quick-strategy.scss'; | ||
|
|
||
| type TDesktopFormWrapper = { | ||
| children: React.ReactNode; | ||
| current_step: QsSteps; | ||
| setCurrentStep: (current_step: QsSteps) => void; | ||
| onClickClose: () => void; | ||
| selected_trade_type: string; | ||
| setSelectedTradeType: (selected_trade_type: string) => void; | ||
| }; | ||
|
|
||
| const QuickSelectionPanel = ({ | ||
| selected_trade_type, | ||
| selected_startegy_label, | ||
| children, | ||
| }: Pick<TDesktopFormWrapper, 'selected_trade_type' | 'children'> & { selected_startegy_label: string }) => ( | ||
| <> | ||
| <div className='qs__selected-options'> | ||
| <div className='qs__selected-options__item'> | ||
| <Text size='xs' line_height='s'> | ||
| {localize('Trade type')} | ||
| </Text> | ||
| <Text size='xs' weight='bold' line_height='s'> | ||
| {selected_trade_type} | ||
| </Text> | ||
| </div> | ||
| <div className='qs__selected-options__item'> | ||
| <Text size='xs' line_height='s'> | ||
| {localize('Strategy')} | ||
| </Text> | ||
| <Text size='xs' weight='bold' line_height='s'> | ||
| {selected_startegy_label} | ||
| </Text> | ||
| </div> | ||
| </div> | ||
| <StrategyTabContent formfields={children} active_tab={'TRADE_PARAMETERS'} /> | ||
| </> | ||
| ); | ||
|
|
||
| const FormWrapper = observer( | ||
| ({ | ||
| children, | ||
| current_step, | ||
| setCurrentStep, | ||
| onClickClose, | ||
| selected_trade_type, | ||
| setSelectedTradeType, | ||
| }: TDesktopFormWrapper) => { | ||
| const scroll_ref = React.useRef<HTMLDivElement & SVGSVGElement>(null); | ||
| const { submitForm, isValid, setFieldValue, validateForm, values } = useFormikContext<TFormValues>(); | ||
| const { quick_strategy } = useDBotStore(); | ||
| const { selected_strategy, onSubmit, is_stop_bot_dialog_open } = quick_strategy; | ||
| const { handleSubmit } = useQsSubmitHandler(); | ||
|
|
||
| const selected_startegy_label = STRATEGIES[selected_strategy as keyof typeof STRATEGIES].label; | ||
| const is_selected_strategy_step = current_step === QsSteps.StrategySelect; | ||
|
|
||
| React.useEffect(() => { | ||
| if (isValid && current_step === QsSteps.StrategyVerified) { | ||
| setCurrentStep(QsSteps.StrategyCompleted); | ||
| } | ||
| if (!isValid && current_step === QsSteps.StrategyCompleted) { | ||
| setCurrentStep(QsSteps.StrategyVerified); | ||
| } | ||
| }, [isValid, current_step]); | ||
|
|
||
| React.useEffect(() => { | ||
| validateForm(); | ||
| }, [selected_strategy, validateForm]); | ||
|
|
||
| const onEdit = async () => { | ||
| await setFieldValue('action', 'EDIT'); | ||
| validateForm(); | ||
| submitForm().then((form_data: TFormData | void) => { | ||
| if (isValid && form_data) { | ||
| rudderStackSendQsEditStrategyEvent({ | ||
| form_values: values, | ||
| selected_strategy, | ||
| }); | ||
| onSubmit(form_data); // true to load and run the bot | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const onRun = () => { | ||
| handleSubmit(); | ||
| }; | ||
|
|
||
| const onBack = () => { | ||
| setCurrentStep(QsSteps.StrategySelect); | ||
| }; | ||
|
|
||
| const renderContent = React.useCallback(() => { | ||
| switch (current_step) { | ||
| case QsSteps.StrategySelect: | ||
| return ( | ||
| <StrategyTemplatePicker | ||
| setCurrentStep={setCurrentStep} | ||
| setSelectedTradeType={setSelectedTradeType} | ||
| /> | ||
| ); | ||
| case QsSteps.StrategyVerified: | ||
| return ( | ||
| <QuickSelectionPanel | ||
| selected_trade_type={selected_trade_type} | ||
| selected_startegy_label={selected_startegy_label} | ||
| > | ||
| {children} | ||
| </QuickSelectionPanel> | ||
| ); | ||
| case QsSteps.StrategyCompleted: | ||
| return ( | ||
| <QuickSelectionPanel | ||
| selected_trade_type={selected_trade_type} | ||
| selected_startegy_label={selected_startegy_label} | ||
| > | ||
| {children} | ||
| </QuickSelectionPanel> | ||
| ); | ||
| default: | ||
| return null; | ||
| } | ||
| }, [ | ||
| current_step, | ||
| selected_trade_type, | ||
| selected_startegy_label, | ||
| children, | ||
| setCurrentStep, | ||
| setSelectedTradeType, | ||
| ]); | ||
|
|
||
| return ( | ||
| !is_stop_bot_dialog_open && ( | ||
| <div className='qs'> | ||
| <div className='qs__head'> | ||
| <div className='qs__head__title'> | ||
| <Text weight='bold'>{localize('Quick Strategy')}</Text> | ||
| </div> | ||
| <div className='qs__head__action'> | ||
| <span | ||
| data-testid='qs-desktop-close-button' | ||
| onClick={onClickClose} | ||
| tabIndex={0} | ||
| onKeyDown={(e: React.KeyboardEvent) => { | ||
| if (e.key === 'Enter') { | ||
| onClickClose(); | ||
| } | ||
| }} | ||
| > | ||
| <Icon icon='IcCross' /> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div className='qs__body'> | ||
| <div className='qs__body__sidebar'> | ||
| <div className='qs__body__sidebar__subtitle'> | ||
| <Text size='xs'> | ||
| {localize('Choose a template below and set your trade parameters.')} | ||
| </Text> | ||
| </div> | ||
| <QSStepper current_step={current_step} /> | ||
| </div> | ||
| <div className='qs__body__content'> | ||
| <ThemedScrollbars | ||
| className='qs__form__container qs__form__container--no-footer' | ||
| autohide={false} | ||
| refSetter={scroll_ref} | ||
| > | ||
| {renderContent()} | ||
| </ThemedScrollbars> | ||
| {!is_selected_strategy_step && ( | ||
| <div className='qs__body__content__footer'> | ||
| <Button | ||
| transparent | ||
| classNameSpan='qs__body__content__footer--back' | ||
| disabled={is_selected_strategy_step} | ||
| onClick={onBack} | ||
| > | ||
| {localize('Back')} | ||
| </Button> | ||
| <Button secondary disabled={!isValid} onClick={onEdit}> | ||
| {localize('Load')} | ||
| </Button> | ||
| <Button | ||
| data-testid='qs-run-button' | ||
| primary | ||
| onClick={e => { | ||
| e.preventDefault(); | ||
| onRun(); | ||
| }} | ||
| disabled={!isValid} | ||
| > | ||
| {localize('Run')} | ||
| </Button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export default React.memo(FormWrapper); |
Oops, something went wrong.