DTRA / Vinu, Kate / DTRA-1670 / Onboarding Guide [DTrader-V2] #16589

kate-deriv · 2024-08-24T16:00:09Z

Changes:

User onboarding guide is controlled via guide_dtrader_v2 _(trade_page or positions_page) flag in localStorage. By default it's equal to false, but when user complete or skip the guide, it will be set to true. Guide will be shown only for logged in users with guide_dtrader_v2 _(trade_page or positions_page) === false.

Added react-joyride package to trader npm package
Created OnboardingGuide component, which include Modal from Quill UI (for staring guide) and GuideContainer. Inside this component we extract guide_dtrader_v2 _(trade_page or positions_page) flag from localStorage and if it's === false, then after 800ms we will show Modal. When Modal is opened user have to opportunities: to skip the guide (by clicking on overlay) or to start it (by clicking on "Let's begin" button). Modal also includes looped mp4 video (OnboardingVideo). Modal content depends on pass prop called 'type' (can be 'trade_page' | 'positions_page').
Created GuideContainer component, which includes library component Joyride and data for it (steps aka config) and data handlers. Here we are also passing a custom component for Tooltip (tooltipComponent={GuideTooltip}).
Created GuideTooltip component (based on Quill components) in order to have opportunity to use custom tooltip instead of library default one. Clicking on cross icon will stop and skip the guide and set guide_dtrader_v2 _(trade_page or positions_page) equal to true. Clicking on 'Next' button will take to net step. If the step is the last one, then button label will be replaced with 'Done' and clicking on it will set guide_dtrader_v2 _(trade_page or positions_page) equal to true.
Added conditional rendering of OnboardingGuide inside of Trade (packages/trader/src/AppV2/Containers/Trade/trade.tsx) in order not to load the video if user has already passed the guide.

Screenshots:

…r starting guide

vercel · 2024-08-24T16:00:15Z

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

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Sep 3, 2024 9:59am

github-actions · 2024-08-24T16:23:02Z

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

PR: DTRA / Vinu, Kate / DTRA-1670 / Onboarding Guide [DTrader-V2] #16589
URLs:
- w/ App ID + Server: https://deriv-app-git-fork-kate-deriv-vinu-katedtra-1670useronbo-37ef85.binary.sx?qa_server=red.derivws.com&app_id=31586
- Original: https://deriv-app-git-fork-kate-deriv-vinu-katedtra-1670useronbo-37ef85.binary.sx
App ID: 31586

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/16589](https://github.com/binary-com/deriv-app/pull/16589)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-kate-deriv-vinu-katedtra-1670useronbo-37ef85.binary.sx?qa_server=red.derivws.com&app_id=31586
    - **Original**: https://deriv-app-git-fork-kate-deriv-vinu-katedtra-1670useronbo-37ef85.binary.sx
- **App ID**: `31586`

github-actions · 2024-08-24T16:24:07Z

🚨 Lighthouse report for the changes in this PR:

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

Lighthouse ran with https://deriv-app-git-fork-kate-deriv-vinu-katedtra-1670useronbo-37ef85.binary.sx/

coveralls · 2024-08-24T17:00:58Z

coverage: 47.114% (+0.03%) from 47.082%
when pulling 7d7d951 on kate-deriv:vinu/kate/DTRA-1670/user_onboarding_guide
into bada74a on binary-com:master.

…ding_guide

packages/trader/src/AppV2/Components/OnboardingGuide/guide-container.tsx

ahmadtaimoor-deriv · 2024-09-03T05:01:08Z

packages/trader/src/AppV2/Components/OnboardingGuide/guide-tooltip.tsx

+const GuideTooltip = ({ isLastStep, primaryProps, skipProps, step, tooltipProps, setStepIndex }: GuideTooltipProps) => {
+    const swipe_handlers = useSwipeable({
+        onSwipedUp: () => {
+            document.querySelector('.trade__chart')?.scrollIntoView();


just curious to ask if it can be done via ref?

Hmmm, but trade chart is 'too far away', so it will be a long props drilling

packages/trader/src/AppV2/Components/OnboardingGuide/onboarding-guide.tsx

packages/trader/src/AppV2/Components/OnboardingGuide/onboarding-video.tsx

sonarcloud · 2024-09-03T09:29:33Z

Quality Gate passed

Issues
5 New issues
0 Accepted issues

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

See analysis details on SonarCloud

henry-deriv · 2024-09-04T05:27:22Z

packages/trader/src/AppV2/Containers/Trade/trade.tsx

+                        </TradeParametersContainer>
+                        <PurchaseButton />
+                    </div>
+                    {!guide_dtrader_v2 && is_logged_in && <OnboardingGuide type='trade_page' />}


are we meant to not show guide when logged out ?

Yes, I think it doesn't make sense to show the guide to non-logged in users. Plus, there is also Guide for Positions page and we won't show Positions Page itself to logged out users

feat: add npm package, prepare local store and create a base modal fo…

9856fb8

…r starting guide

boring-cyborg bot added the Trader label Aug 24, 2024

kate-deriv temporarily deployed to Preview August 24, 2024 16:00 — with GitHub Actions Inactive

kate-deriv deployed to Preview August 24, 2024 16:01 — with GitHub Actions View deployment

feat: add guide container and tooltip component

9aed763

kate-deriv temporarily deployed to Preview August 24, 2024 16:34 — with GitHub Actions Inactive

kate-deriv had a problem deploying to Preview August 24, 2024 16:35 — with GitHub Actions Failure

refactor: tooltip componnet

83a4576

kate-deriv temporarily deployed to Preview August 24, 2024 17:27 — with GitHub Actions Inactive

kate-deriv had a problem deploying to Preview August 24, 2024 17:28 — with GitHub Actions Failure

refactor: set flag to trye on finish and styling

ef212e6

kate-deriv temporarily deployed to Preview August 24, 2024 18:07 — with GitHub Actions Inactive

kate-deriv deployed to Preview August 24, 2024 18:08 — with GitHub Actions View deployment

Merge branch 'binary-com:master' into vinu/kate/DTRA-1670/user_onboar…

a076f2d

…ding_guide

kate-deriv had a problem deploying to Preview August 27, 2024 08:36 — with GitHub Actions Failure

kate-deriv deployed to Preview August 27, 2024 08:36 — with GitHub Actions View deployment

fix: close and skip functionality

4a76802

kate-deriv had a problem deploying to Preview August 27, 2024 13:48 — with GitHub Actions Failure

kate-deriv deployed to Preview August 27, 2024 13:48 — with GitHub Actions View deployment

feat: add the video

26c38bb

boring-cyborg bot added the Core label Aug 27, 2024

kate-deriv temporarily deployed to Preview August 27, 2024 14:31 — with GitHub Actions Inactive

kate-deriv deployed to Preview August 27, 2024 14:31 — with GitHub Actions View deployment

feat: add step 3 and inprove tooltip width

c4a6956

kate-deriv temporarily deployed to Preview August 27, 2024 15:07 — with GitHub Actions Inactive

kate-deriv deployed to Preview August 27, 2024 15:07 — with GitHub Actions View deployment

kate-deriv marked this pull request as ready for review August 30, 2024 13:57

kate-deriv requested review from matin-deriv, maryia-deriv, ali-hosseini-deriv, amina-deriv, balakrishna-deriv, yashim-deriv and wojciech-deriv as code owners August 30, 2024 13:57

kate-deriv changed the title ~~DTRA / Vinu, Kate / DTRA-1670 / Onboarding Guide [DTrader-V2] [WIP]~~ DTRA / Vinu, Kate / DTRA-1670 / Onboarding Guide [DTrader-V2] Aug 30, 2024

Merge branch master into vinu/kate/DTRA-1670/user_onboarding_guide

c21fe2d

kate-deriv had a problem deploying to Preview September 2, 2024 06:43 — with GitHub Actions Failure

kate-deriv deployed to Preview September 2, 2024 06:43 — with GitHub Actions View deployment

ahmadtaimoor-deriv reviewed Sep 3, 2024

View reviewed changes

packages/trader/src/AppV2/Components/OnboardingGuide/guide-container.tsx Outdated Show resolved Hide resolved

ahmadtaimoor-deriv reviewed Sep 3, 2024

View reviewed changes

packages/trader/src/AppV2/Components/OnboardingGuide/guide-container.tsx Outdated Show resolved Hide resolved

packages/trader/src/AppV2/Components/OnboardingGuide/guide-container.tsx Outdated Show resolved Hide resolved

ahmadtaimoor-deriv reviewed Sep 3, 2024

View reviewed changes

packages/trader/src/AppV2/Components/OnboardingGuide/onboarding-guide.tsx Outdated Show resolved Hide resolved

ahmadtaimoor-deriv reviewed Sep 3, 2024

View reviewed changes

packages/trader/src/AppV2/Components/OnboardingGuide/onboarding-video.tsx Outdated Show resolved Hide resolved

refactor: apply suggestions

aac21ac

kate-deriv temporarily deployed to Preview September 3, 2024 08:54 — with GitHub Actions Inactive

kate-deriv deployed to Preview September 3, 2024 08:55 — with GitHub Actions View deployment

kate-deriv added 2 commits September 3, 2024 12:13

chore: update quill

5206668

Merge branch master into vinu/kate/DTRA-1670/user_onboarding_guide

7d7d951

kate-deriv had a problem deploying to Preview September 3, 2024 09:27 — with GitHub Actions Failure

kate-deriv deployed to Preview September 3, 2024 09:27 — with GitHub Actions View deployment

ahmadtaimoor-deriv approved these changes Sep 3, 2024

View reviewed changes

balakrishna-deriv approved these changes Sep 4, 2024

View reviewed changes

henry-deriv reviewed Sep 4, 2024

View reviewed changes

henry-deriv approved these changes Sep 4, 2024

View reviewed changes

vinu-deriv merged commit 122e4d5 into deriv-com:master Sep 4, 2024
7 of 8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DTRA / Vinu, Kate / DTRA-1670 / Onboarding Guide [DTrader-V2] #16589

DTRA / Vinu, Kate / DTRA-1670 / Onboarding Guide [DTrader-V2] #16589

kate-deriv commented Aug 24, 2024 •

edited

Loading

vercel bot commented Aug 24, 2024 •

edited

Loading

github-actions bot commented Aug 24, 2024 •

edited

Loading

github-actions bot commented Aug 24, 2024 •

edited

Loading

coveralls commented Aug 24, 2024 •

edited

Loading

ahmadtaimoor-deriv Sep 3, 2024

kate-deriv Sep 3, 2024 •

edited

Loading

sonarcloud bot commented Sep 3, 2024

henry-deriv Sep 4, 2024

kate-deriv Sep 4, 2024

DTRA / Vinu, Kate / DTRA-1670 / Onboarding Guide [DTrader-V2] #16589

DTRA / Vinu, Kate / DTRA-1670 / Onboarding Guide [DTrader-V2] #16589

Conversation

kate-deriv commented Aug 24, 2024 • edited Loading

Changes:

Screenshots:

vercel bot commented Aug 24, 2024 • edited Loading

github-actions bot commented Aug 24, 2024 • edited Loading

github-actions bot commented Aug 24, 2024 • edited Loading

coveralls commented Aug 24, 2024 • edited Loading

ahmadtaimoor-deriv Sep 3, 2024

Choose a reason for hiding this comment

kate-deriv Sep 3, 2024 • edited Loading

Choose a reason for hiding this comment

sonarcloud bot commented Sep 3, 2024

Quality Gate passed

henry-deriv Sep 4, 2024

Choose a reason for hiding this comment

kate-deriv Sep 4, 2024

Choose a reason for hiding this comment

kate-deriv commented Aug 24, 2024 •

edited

Loading

vercel bot commented Aug 24, 2024 •

edited

Loading

github-actions bot commented Aug 24, 2024 •

edited

Loading

github-actions bot commented Aug 24, 2024 •

edited

Loading

coveralls commented Aug 24, 2024 •

edited

Loading

kate-deriv Sep 3, 2024 •

edited

Loading