[BOT][Accumulators]maryia/bot-1980/feat: Adapt QS form as per new design

[maryia-matskevich-deriv]

Changes:

Acceptance criteria:

• A search field will be provided to enable faster information retrieval.
  If the user searches the trade type like accumulators - we show accumulators as a parent and all its groups with strategies like Martingale and so on.
  if the user searches "Martingale" - we will show all parents/trade types like "Accumulators" and behind it "Martingale"

• The 'Learn More' button, previously integrated into a switcher, will now be an icon button adjacent to the search field. Tapping on it will bring users to the Tutorial page.
  Once the user searches for something on Quick Strategy search and clicks on the icon for the tutorial tab. What we do is redirect to the tutorial page, and show all related material from guidelines, videos, and content.

• Users can filter strategies by trade type. The default setting for this page will display 'All'.

• When the strategy dropdown is expanded, a list of available trade types for that specific strategy will be displayed.

• Once users proceed to the last step, there will be 3 CTAs for desktop version.
  “Run” - this primary CTA will start the bot. In case there is field that is not filled, tapping on the CTA will validate the field and return error.
  “Load” - this secondary CTA is for the users that do not wish to start their bot yet. Clicking on this button will load the strategy to the workspace and users will be able to further edit using blockly and add custom parameters.
  “Back” - tertiary CTA to go back to the previous step and we will save the previous state of the field except if they choose another strategy.

• A stepper will be implemented in the desktop design to clearly guide users on their next steps. Will be implemented in deriv-com/quill-ui

On mobile:

• Tapping the close icon near the stepper will close the entire pop-up, redirecting users to the Bot Builder workspace.
  Once users proceed to the last step, there will be 2 CTAs for responsive version.
• “Run” - this primary CTA will start the bot. In case there is field that is not filled, tapping on the CTA will validate the field and return error.
• “Back” - secondary CTA to go back to the previous step and we will save the previous state of the field except if they choose another strategy.
• A stepper will be implemented in the responsive design to clearly guide users on their next steps using linear progress bar and header with the steps

‼️Small refinement to the scope of the task:
We will show only chips with 'options' since strategies with trade type accumulator and multiplier aren't ready. So, chips such as 'all', 'accumulator', and 'multiplier' will be hidden for now.
It will be changed once the task with accumulators and multipliers is completed.

Screenshots:

Please provide some screenshots of the change.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Oct 17, 2024 2:30pm

[sonarcloud]

Quality Gate passed

Issues
16 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
8.6% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: [BOT][Accumulators]maryia/bot-1980/feat: Adapt QS form as per new design #17016
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-maryia-matskevich-deriv-maryia-bot-1980.binary.sx?qa_server=red.derivws.com&app_id=32878
  • Original: https://deriv-app-git-fork-maryia-matskevich-deriv-maryia-bot-1980.binary.sx
• App ID: 32878

Click here to copy & paste above information.

- **PR**: [https://github.com/deriv-com/deriv-app/pull/17016](https://github.com/deriv-com/deriv-app/pull/17016)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-maryia-matskevich-deriv-maryia-bot-1980.binary.sx?qa_server=red.derivws.com&app_id=32878
    - **Original**: https://deriv-app-git-fork-maryia-matskevich-deriv-maryia-bot-1980.binary.sx
- **App ID**: `32878`

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	35
🟧 Accessibility	70
🟢 Best practices	92
🟧 SEO	77
🟧 PWA	78

Lighthouse ran with https://deriv-app-git-fork-maryia-matskevich-deriv-maryia-bot-1980.binary.sx/

[coveralls]

Pull Request Test Coverage Report for Build 11386293977

Details

• 13 of 125 (10.4%) changed or added relevant lines in 7 files are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage decreased (-0.08%) to 53.596%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/bot-web-ui/src/pages/bot-builder/quick-strategy/form-wrappers/upgraded-qs-v2/qs-stepper.tsx	1	3	33.33%
packages/bot-web-ui/src/pages/bot-builder/quick-strategy/form-wrappers/upgraded-qs-v2/mobile-form-wrapper.tsx	1	23	4.35%
packages/bot-web-ui/src/pages/bot-builder/quick-strategy/form-wrappers/upgraded-qs-v2/strategy-template-picker.tsx	1	23	4.35%
packages/bot-web-ui/src/pages/bot-builder/quick-strategy/form-wrappers/upgraded-qs-v2/strategy-list.tsx	2	31	6.45%
packages/bot-web-ui/src/pages/bot-builder/quick-strategy/form-wrappers/upgraded-qs-v2/desktop-form-wrapper.tsx	2	39	5.13%

Files with Coverage Reduction	New Missed Lines	%
packages/cfd/src/Containers/cfd-password-modal.tsx	1	74.95%

Totals
Change from base Build 11383013039:	-0.08%
Covered Lines:	34909
Relevant Lines:	60593

---

💛 - Coveralls