Skip to content

Commit

Permalink
Suisin/utkarsha/upm819/phone verification flow (#16882)
Browse files Browse the repository at this point in the history
* chore: update code to fix demo session bugs

* chore: remove is_mobile from ui-store and update to latest useDevice

* chore: fix test case failling and update code based on comments

* chore: remove phone_number_verify?.verified logic check in personal details

* chore: fix test case and remove unused imports

* chore: update to fix test case

* chore: update code based on comments

* chore: update test case

* chore: update code based on comments

* chore: revert icons file

* chore: update code based on comments

* chore: update packages version and fix useSetting based on comments

* chore: update code based on comments

* chore: update verify-button.spec.tsx based on comment

* chore: update quill-ui version and code based on comments

* chore: update positions test case with scrollTo fix

* chore: remove @ts-expected-error

* fix: console log verified not found issue and clear otp after click resend code

* chore: fix authorize issue

* chore: update quill-ui version for console log fix

* chore: fix verification link expired rerendering issue

* fix: clicks on resend link or send via whatsapp redirect user back to confirm phone number page

* chore: have to include color black in button so the underline will be black

* chore: update quill-ui version

* chore: update to include type number in InputGroupButton

* chore: update useVerifyEmail hooks to fix button disabled issue

* chore: should run timer also if error is returned from BE

* fix: console error on clicking verify button in personal details section

* chore: fix unmounted console log issue

* chore: use useEffect directly from react package

* chore: fix test case fail issue

* chore: fix link-expired-modal cause added a boolean value in the hooks

* chore: replace TextField with TextFieldAddOn for confirm your phone number page

* chore: create new functional call in useVerifyEmail and remove deprecated tag

* chore: fix console log issue after clicking on verify button

* fix: legacywonicon not displaying properly by updating the version

* chore: update quill-ui version to fix input validation issue

* chore: update quill-ui verison to fix dark mode + issue

* chore: use lazyLoading for phone number verification

* chore: fix verify-button test case based on comment

* chore: update codes based on comment

* fix: resolve conflicts

* chore: revert phone number verification changes with master

* chore: make verify button disabled once user edit personal details and added growthbook

* chore: scss changes to fix tablet view issue

* chore: hide notification and show demo message when user is in demo account

* chore: implement growthbook in AppContent and added client store for it

* chore: change to redirect user back to personal details once they switch to demo

* chore: move popover tablet view from right to top

* chore: hide verify button when phone number changes

* chore: update growthbook usage based on comment

* chore: update useEffect in AppContent

* Suisin/utkarsha/upm819/phone verification flow (#16157)

* feat: move timer to diff component

* refactor: replace timer code with component

* test: testcase for resend-code-timer

* chore: add test case on cancel phone verification modal and move to a seperate component

* chore: update test case for phone-verification-page

* chore: update codes based on comments

* chore: update data testid

* fix: change text for email and phone, add TODOs

* chore: edit testcases

* chore: change prop to text

* test: update testcase

* chore: use ReturnType instead of NodeJS.timer

* chore: update quill-ui package and remove previous build config edits

* feat: integrate phone number challenge api

* chore: add comments

* chore: add ThemeProvider in phone verification

* chore: use states instead of useRef and update testcase

* test: added testcases for the hook

* chore: add phone otp screen

* chore: update based on comments

* chore: remove unused store in test case

* chore: add sms and whatsapp to 1 constant file

* chore: update code based on comments

* test: add tescases for counter change and title change

* chore: update code based on comments

* test: use useRealTimers

* test: mock useGetPhoneNumberOTP

* chore: update TODO comments

* chore: update code

* chore: update function for WhatsApp display

* chore: fix test case fail for confirm-phone-number

* chore: resolve failling test case

* chore: resolve conflicts otp-verification-component

* fix: prettier issue scss format

* chore: add phone verification successful modal

* chore: edit classname for verified modal

* chore: update test case describe name and ui store value

* chore: move successful modal inside phone-number-verification-page

* chore: update phone-number-verified-modal and remove ui store values

* chore: revert unused changes

* chore: add routes to personal details

* chore: fix matchMedia failling in test case

* chore: update test case title

* chore: replace modal with quill-ui modal

* chore: update test case to pass first for phone number verified modal

* fix: test case

* chore: update code base on comments

* chore: resolve integration test failling

* chore: update code based on comments

* chore: add didnt get the code modal for phone verification

* chore: update test case and files for didnt get the code modal

* chore: update code based on comments

* chore: update test case based on comments

* chore: update helpers.ts based on comments

* chore: update based on comments

* chore: move convertPhoneTypeDisplay to correct folders

* chore: update resend-code-timer test case to use jest.advanceTimer

* chore: update show to show_otp_verification

* chore: update to use localise function

* chore: create verification-link-expired-modal

* chore: update all quill-ui packages

* chore: update test case title

* chore: update package version for quill-ui

* chore: create useGetEmailVerificationOTP hooks

* chore: implement callback for hooks

* chore: try to add InputGroupButton for phone-verification

* chore: update code based on comments

* chore: remove useGetEmailVerificationOTP and use useVerifyEmail instead

* chore: remove Input field from component and use quill-ui TextField and InputGroupButton

* chore: update scss

* chore: fix test failing for resend-code-timer.spec.tsx

* chore: implement phone number otp api hooks

* chore: update test case for useSendOTPVerificationCode

* chore: update otp-verification.spec.tsx

* chore: update title for otp verification and add test for Phone number verified modal

* chore: update naming to is_phone_number_verified based on comment

* chore: update localize in hooks

* fix: type error

* chore: resolve build fail issue

* chore: add localize at useSendOTPVerificationCode

* chore: implement error status when phone number is invalid

* chore: fix test case for confirm phone number

* chore: rename test case title and hooks based on comment

* chore: moved validePhoneNumber to a constant file

* chore: add error screens for email otp invalid

* chore: remove unused package in hooks

* chore: added useSetSettings hooks and change logic using new implemented hooks

* chore: update test case and localStorage setItem

* chore: rename handleError to formatError

* chore: change useSetSettings to useSettings and modify the hooks

* chore: update based on comments

* chore: remove conditional check for handleError and make it into 2 different formatError

* chore: include comments in hooks for requestSMS and requestWhatsapp

* chore: update useSEndOTPVerificationCode test case

* chore: add routing from email verification link

* chore: remove comments

* chore: implement timer from BE

* chore: update code based on comment

* chore: use 1 useState for otp request

* chore: move to 1 useState based on comment

* chore: rename phone_number_verification and move setIsLoading in if else statement based on comment

* chore: move setTimer useState into otp-verification

* chore: need to use React.useCallback to solve blinking issue for reInitalizeGetSettings

* chore: remove setIsButtonDisabled in validate next_email_otp_request function

* chore: update code based on comments

* chore: update to use is_email_verified

* chore: add WS call when redirect from notification tray

* chore: remove unused comment

* chore: update quill-ui in package.json

* chore: added Math.round for minutes timer

* chore: update code to have better user flow

* chore: realign code for BE integration

* chore: add timer to personal-details, expired modal and notification

* chore: remove unused dayjs in account package

* chore: update quill-ui version and updated codes for expired-link-modal

* chore: update verification link expired modal

* chore: add timer countdown snackbar in confirm your phone number page

* chore: update commented paragraph and remove TODOs

* chore: update test case and remove ts-expect-error

* chore: remove unused ...rest

* chore: include !! to phone_number_verification.verified

* chore: update verify button to clear all possible stored value

* chore: update code to fix demo session bugs

* chore: remove is_mobile from ui-store and update to latest useDevice

* chore: fix test case failling and update code based on comments

* chore: remove phone_number_verify?.verified logic check in personal details

* chore: fix test case and remove unused imports

* chore: update to fix test case

* chore: update code based on comments

* chore: update test case

* chore: update code based on comments

* chore: revert icons file

* chore: update code based on comments

* chore: update packages version and fix useSetting based on comments

* chore: update code based on comments

* chore: update verify-button.spec.tsx based on comment

* chore: update quill-ui version and code based on comments

* chore: update positions test case with scrollTo fix

* chore: remove @ts-expected-error

* fix: console log verified not found issue and clear otp after click resend code

* chore: fix authorize issue

* chore: update quill-ui version for console log fix

* chore: fix verification link expired rerendering issue

* fix: clicks on resend link or send via whatsapp redirect user back to confirm phone number page

* chore: have to include color black in button so the underline will be black

* chore: update quill-ui version

* chore: update to include type number in InputGroupButton

* chore: update useVerifyEmail hooks to fix button disabled issue

* chore: should run timer also if error is returned from BE

* fix: console error on clicking verify button in personal details section

* chore: fix unmounted console log issue

* chore: use useEffect directly from react package

* chore: fix test case fail issue

* chore: fix link-expired-modal cause added a boolean value in the hooks

* chore: replace TextField with TextFieldAddOn for confirm your phone number page

* chore: create new functional call in useVerifyEmail and remove deprecated tag

* chore: fix console log issue after clicking on verify button

* fix: legacywonicon not displaying properly by updating the version

* chore: update quill-ui version to fix input validation issue

* chore: update quill-ui verison to fix dark mode + issue

* chore: use lazyLoading for phone number verification

* chore: fix verify-button test case based on comment

* chore: update codes based on comment

* fix: resolve conflicts

* chore: revert phone number verification changes with master

* chore: make verify button disabled once user edit personal details and added growthbook

* chore: scss changes to fix tablet view issue

* chore: hide notification and show demo message when user is in demo account

* chore: implement growthbook in AppContent and added client store for it

* chore: change to redirect user back to personal details once they switch to demo

* chore: move popover tablet view from right to top

* chore: hide verify button when phone number changes

* chore: update growthbook usage based on comment

* chore: update useEffect in AppContent

---------

Co-authored-by: utkarsha-deriv <utkarsha@regentmarkets.com>
Co-authored-by: amina-deriv <amina@regentmarkets.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>

* chore: update growthbook value in AppContent

* chore: remove is_phone_number_verification_enabled

* chore: solve redirect not working issue

* chore: update packages for deriv-com/quill-ui

* Suisin/utkarsha/upm819/phone verification flow (#16243)

* fix: change text for email and phone, add TODOs

* chore: edit testcases

* chore: change prop to text

* test: update testcase

* chore: use ReturnType instead of NodeJS.timer

* chore: update quill-ui package and remove previous build config edits

* feat: integrate phone number challenge api

* chore: add comments

* chore: add ThemeProvider in phone verification

* chore: use states instead of useRef and update testcase

* test: added testcases for the hook

* chore: add phone otp screen

* chore: update based on comments

* chore: remove unused store in test case

* chore: add sms and whatsapp to 1 constant file

* chore: update code based on comments

* test: add tescases for counter change and title change

* chore: update code based on comments

* test: use useRealTimers

* test: mock useGetPhoneNumberOTP

* chore: update TODO comments

* chore: update code

* chore: update function for WhatsApp display

* chore: fix test case fail for confirm-phone-number

* chore: resolve failling test case

* chore: resolve conflicts otp-verification-component

* fix: prettier issue scss format

* chore: add phone verification successful modal

* chore: edit classname for verified modal

* chore: update test case describe name and ui store value

* chore: move successful modal inside phone-number-verification-page

* chore: update phone-number-verified-modal and remove ui store values

* chore: revert unused changes

* chore: add routes to personal details

* chore: fix matchMedia failling in test case

* chore: update test case title

* chore: replace modal with quill-ui modal

* chore: update test case to pass first for phone number verified modal

* fix: test case

* chore: update code base on comments

* chore: resolve integration test failling

* chore: update code based on comments

* chore: add didnt get the code modal for phone verification

* chore: update test case and files for didnt get the code modal

* chore: update code based on comments

* chore: update test case based on comments

* chore: update helpers.ts based on comments

* chore: update based on comments

* chore: move convertPhoneTypeDisplay to correct folders

* chore: update resend-code-timer test case to use jest.advanceTimer

* chore: update show to show_otp_verification

* chore: update to use localise function

* chore: create verification-link-expired-modal

* chore: update all quill-ui packages

* chore: update test case title

* chore: update package version for quill-ui

* chore: create useGetEmailVerificationOTP hooks

* chore: implement callback for hooks

* chore: try to add InputGroupButton for phone-verification

* chore: update code based on comments

* chore: remove useGetEmailVerificationOTP and use useVerifyEmail instead

* chore: remove Input field from component and use quill-ui TextField and InputGroupButton

* chore: update scss

* chore: fix test failing for resend-code-timer.spec.tsx

* chore: implement phone number otp api hooks

* chore: update test case for useSendOTPVerificationCode

* chore: update otp-verification.spec.tsx

* chore: update title for otp verification and add test for Phone number verified modal

* chore: update naming to is_phone_number_verified based on comment

* chore: update localize in hooks

* fix: type error

* chore: resolve build fail issue

* chore: add localize at useSendOTPVerificationCode

* chore: implement error status when phone number is invalid

* chore: fix test case for confirm phone number

* chore: rename test case title and hooks based on comment

* chore: moved validePhoneNumber to a constant file

* chore: add error screens for email otp invalid

* chore: remove unused package in hooks

* chore: added useSetSettings hooks and change logic using new implemented hooks

* chore: update test case and localStorage setItem

* chore: rename handleError to formatError

* chore: change useSetSettings to useSettings and modify the hooks

* chore: update based on comments

* chore: remove conditional check for handleError and make it into 2 different formatError

* chore: include comments in hooks for requestSMS and requestWhatsapp

* chore: update useSEndOTPVerificationCode test case

* chore: add routing from email verification link

* chore: remove comments

* chore: implement timer from BE

* chore: update code based on comment

* chore: use 1 useState for otp request

* chore: move to 1 useState based on comment

* chore: rename phone_number_verification and move setIsLoading in if else statement based on comment

* chore: move setTimer useState into otp-verification

* chore: need to use React.useCallback to solve blinking issue for reInitalizeGetSettings

* chore: remove setIsButtonDisabled in validate next_email_otp_request function

* chore: update code based on comments

* chore: update to use is_email_verified

* chore: add WS call when redirect from notification tray

* chore: remove unused comment

* chore: update quill-ui in package.json

* chore: added Math.round for minutes timer

* chore: update code to have better user flow

* chore: realign code for BE integration

* chore: add timer to personal-details, expired modal and notification

* chore: remove unused dayjs in account package

* chore: update quill-ui version and updated codes for expired-link-modal

* chore: update verification link expired modal

* chore: add timer countdown snackbar in confirm your phone number page

* chore: update commented paragraph and remove TODOs

* chore: update test case and remove ts-expect-error

* chore: remove unused ...rest

* chore: include !! to phone_number_verification.verified

* chore: update verify button to clear all possible stored value

* chore: update code to fix demo session bugs

* chore: remove is_mobile from ui-store and update to latest useDevice

* chore: fix test case failling and update code based on comments

* chore: remove phone_number_verify?.verified logic check in personal details

* chore: fix test case and remove unused imports

* chore: update to fix test case

* chore: update code based on comments

* chore: update test case

* chore: update code based on comments

* chore: revert icons file

* chore: update code based on comments

* chore: update packages version and fix useSetting based on comments

* chore: update code based on comments

* chore: update verify-button.spec.tsx based on comment

* chore: update quill-ui version and code based on comments

* chore: update positions test case with scrollTo fix

* chore: remove @ts-expected-error

* fix: console log verified not found issue and clear otp after click resend code

* chore: fix authorize issue

* chore: update quill-ui version for console log fix

* chore: fix verification link expired rerendering issue

* fix: clicks on resend link or send via whatsapp redirect user back to confirm phone number page

* chore: have to include color black in button so the underline will be black

* chore: update quill-ui version

* chore: update to include type number in InputGroupButton

* chore: update useVerifyEmail hooks to fix button disabled issue

* chore: should run timer also if error is returned from BE

* fix: console error on clicking verify button in personal details section

* chore: fix unmounted console log issue

* chore: use useEffect directly from react package

* chore: fix test case fail issue

* chore: fix link-expired-modal cause added a boolean value in the hooks

* chore: replace TextField with TextFieldAddOn for confirm your phone number page

* chore: create new functional call in useVerifyEmail and remove deprecated tag

* chore: fix console log issue after clicking on verify button

* fix: legacywonicon not displaying properly by updating the version

* chore: update quill-ui version to fix input validation issue

* chore: update quill-ui verison to fix dark mode + issue

* chore: use lazyLoading for phone number verification

* chore: fix verify-button test case based on comment

* chore: update codes based on comment

* fix: resolve conflicts

* chore: revert phone number verification changes with master

* chore: make verify button disabled once user edit personal details and added growthbook

* chore: scss changes to fix tablet view issue

* chore: hide notification and show demo message when user is in demo account

* chore: implement growthbook in AppContent and added client store for it

* chore: change to redirect user back to personal details once they switch to demo

* chore: move popover tablet view from right to top

* chore: hide verify button when phone number changes

* chore: update growthbook usage based on comment

* chore: update useEffect in AppContent

* Suisin/utkarsha/upm819/phone verification flow (#16157)

* feat: move timer to diff component

* refactor: replace timer code with component

* test: testcase for resend-code-timer

* chore: add test case on cancel phone verification modal and move to a seperate component

* chore: update test case for phone-verification-page

* chore: update codes based on comments

* chore: update data testid

* fix: change text for email and phone, add TODOs

* chore: edit testcases

* chore: change prop to text

* test: update testcase

* chore: use ReturnType instead of NodeJS.timer

* chore: update quill-ui package and remove previous build config edits

* feat: integrate phone number challenge api

* chore: add comments

* chore: add ThemeProvider in phone verification

* chore: use states instead of useRef and update testcase

* test: added testcases for the hook

* chore: add phone otp screen

* chore: update based on comments

* chore: remove unused store in test case

* chore: add sms and whatsapp to 1 constant file

* chore: update code based on comments

* test: add tescases for counter change and title change

* chore: update code based on comments

* test: use useRealTimers

* test: mock useGetPhoneNumberOTP

* chore: update TODO comments

* chore: update code

* chore: update function for WhatsApp display

* chore: fix test case fail for confirm-phone-number

* chore: resolve failling test case

* chore: resolve conflicts otp-verification-component

* fix: prettier issue scss format

* chore: add phone verification successful modal

* chore: edit classname for verified modal

* chore: update test case describe name and ui store value

* chore: move successful modal inside phone-number-verification-page

* chore: update phone-number-verified-modal and remove ui store values

* chore: revert unused changes

* chore: add routes to personal details

* chore: fix matchMedia failling in test case

* chore: update test case title

* chore: replace modal with quill-ui modal

* chore: update test case to pass first for phone number verified modal

* fix: test case

* chore: update code base on comments

* chore: resolve integration test failling

* chore: update code based on comments

* chore: add didnt get the code modal for phone verification

* chore: update test case and files for didnt get the code modal

* chore: update code based on comments

* chore: update test case based on comments

* chore: update helpers.ts based on comments

* chore: update based on comments

* chore: move convertPhoneTypeDisplay to correct folders

* chore: update resend-code-timer test case to use jest.advanceTimer

* chore: update show to show_otp_verification

* chore: update to use localise function

* chore: create verification-link-expired-modal

* chore: update all quill-ui packages

* chore: update test case title

* chore: update package version for quill-ui

* chore: create useGetEmailVerificationOTP hooks

* chore: implement callback for hooks

* chore: try to add InputGroupButton for phone-verification

* chore: update code based on comments

* chore: remove useGetEmailVerificationOTP and use useVerifyEmail instead

* chore: remove Input field from component and use quill-ui TextField and InputGroupButton

* chore: update scss

* chore: fix test failing for resend-code-timer.spec.tsx

* chore: implement phone number otp api hooks

* chore: update test case for useSendOTPVerificationCode

* chore: update otp-verification.spec.tsx

* chore: update title for otp verification and add test for Phone number verified modal

* chore: update naming to is_phone_number_verified based on comment

* chore: update localize in hooks

* fix: type error

* chore: resolve build fail issue

* chore: add localize at useSendOTPVerificationCode

* chore: implement error status when phone number is invalid

* chore: fix test case for confirm phone number

* chore: rename test case title and hooks based on comment

* chore: moved validePhoneNumber to a constant file

* chore: add error screens for email otp invalid

* chore: remove unused package in hooks

* chore: added useSetSettings hooks and change logic using new implemented hooks

* chore: update test case and localStorage setItem

* chore: rename handleError to formatError

* chore: change useSetSettings to useSettings and modify the hooks

* chore: update based on comments

* chore: remove conditional check for handleError and make it into 2 different formatError

* chore: include comments in hooks for requestSMS and requestWhatsapp

* chore: update useSEndOTPVerificationCode test case

* chore: add routing from email verification link

* chore: remove comments

* chore: implement timer from BE

* chore: update code based on comment

* chore: use 1 useState for otp request

* chore: move to 1 useState based on comment

* chore: rename phone_number_verification and move setIsLoading in if else statement based on comment

* chore: move setTimer useState into otp-verification

* chore: need to use React.useCallback to solve blinking issue for reInitalizeGetSettings

* chore: remove setIsButtonDisabled in validate next_email_otp_request function

* chore: update code based on comments

* chore: update to use is_email_verified

* chore: add WS call when redirect from notification tray

* chore: remove unused comment

* chore: update quill-ui in package.json

* chore: added Math.round for minutes timer

* chore: update code to have better user flow

* chore: realign code for BE integration

* chore: add timer to personal-details, expired modal and notification

* chore: remove unused dayjs in account package

* chore: update quill-ui version and updated codes for expired-link-modal

* chore: update verification link expired modal

* chore: add timer countdown snackbar in confirm your phone number page

* chore: update commented paragraph and remove TODOs

* chore: update test case and remove ts-expect-error

* chore: remove unused ...rest

* chore: include !! to phone_number_verification.verified

* chore: update verify button to clear all possible stored value

* chore: update code to fix demo session bugs

* chore: remove is_mobile from ui-store and update to latest useDevice

* chore: fix test case failling and update code based on comments

* chore: remove phone_number_verify?.verified logic check in personal details

* chore: fix test case and remove unused imports

* chore: update to fix test case

* chore: update code based on comments

* chore: update test case

* chore: update code based on comments

* chore: revert icons file

* chore: update code based on comments

* chore: update packages version and fix useSetting based on comments

* chore: update code based on comments

* chore: update verify-button.spec.tsx based on comment

* chore: update quill-ui version and code based on comments

* chore: update positions test case with scrollTo fix

* chore: remove @ts-expected-error

* fix: console log verified not found issue and clear otp after click resend code

* chore: fix authorize issue

* chore: update quill-ui version for console log fix

* chore: fix verification link expired rerendering issue

* fix: clicks on resend link or send via whatsapp redirect user back to confirm phone number page

* chore: have to include color black in button so the underline will be black

* chore: update quill-ui version

* chore: update to include type number in InputGroupButton

* chore: update useVerifyEmail hooks to fix button disabled issue

* chore: should run timer also if error is returned from BE

* fix: console error on clicking verify button in personal details section

* chore: fix unmounted console log issue

* chore: use useEffect directly from react package

* chore: fix test case fail issue

* chore: fix link-expired-modal cause added a boolean value in the hooks

* chore: replace TextField with TextFieldAddOn for confirm your phone number page

* chore: create new functional call in useVerifyEmail and remove deprecated tag

* chore: fix console log issue after clicking on verify button

* fix: legacywonicon not displaying properly by updating the version

* chore: update quill-ui version to fix input validation issue

* chore: update quill-ui verison to fix dark mode + issue

* chore: use lazyLoading for phone number verification

* chore: fix verify-button test case based on comment

* chore: update codes based on comment

* fix: resolve conflicts

* chore: revert phone number verification changes with master

* chore: make verify button disabled once user edit personal details and added growthbook

* chore: scss changes to fix tablet view issue

* chore: hide notification and show demo message when user is in demo account

* chore: implement growthbook in AppContent and added client store for it

* chore: change to redirect user back to personal details once they switch to demo

* chore: move popover tablet view from right to top

* chore: hide verify button when phone number changes

* chore: update growthbook usage based on comment

* chore: update useEffect in AppContent

---------

Co-authored-by: utkarsha-deriv <utkarsha@regentmarkets.com>
Co-authored-by: amina-deriv <amina@regentmarkets.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>

* chore: update growthbook value in AppContent

* chore: remove is_phone_number_verification_enabled

* chore: solve redirect not working issue

* chore: update packages for deriv-com/quill-ui

---------

Co-authored-by: utkarsha-deriv <utkarsha@regentmarkets.com>
Co-authored-by: amina-deriv <amina@regentmarkets.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>

* master update (#16253)

* fix: removed clean urls from vercel dr json (#16249)

* Revert "[WALL] george / WALL-4522 / Add ce_cashier_deposit_onboarding_form an…" (#16246)

This reverts commit a10f85ced2d3ac9f29137bb1f1a72c5309074651.

* [DTRA] Maryia/DTRA-1546/fix: [V2] style & animation for Digits Current spot price + active_symbols request (#16225)

* fix: styles & animation for current spot for digit trade types

* fix: active_symbols call for rise/fall and higher/lower

* fix: useActiveSymbols usage

* fix: active_symbols call with relevant barrier_category + error handling same like in prod

---------

Co-authored-by: nada-deriv <122768621+nada-deriv@users.noreply.github.com>
Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com>

* chore: update usePhoneNumberVerificationSetTimer to use useServerTime

* chore: update to use useGrowthbookGetFeatureFlag

* Suisin/utkarsha/upm819/phone verification flow (#16266)

* test: added testcases for the hook

* chore: add phone otp screen

* chore: update based on comments

* chore: remove unused store in test case

* chore: add sms and whatsapp to 1 constant file

* chore: update code based on comments

* test: add tescases for counter change and title change

* chore: update code based on comments

* test: use useRealTimers

* test: mock useGetPhoneNumberOTP

* chore: update TODO comments

* chore: update code

* chore: update function for WhatsApp display

* chore: fix test case fail for confirm-phone-number

* chore: resolve failling test case

* chore: resolve conflicts otp-verification-component

* fix: prettier issue scss format

* chore: add phone verification successful modal

* chore: edit classname for verified modal

* chore: update test case describe name and ui store value

* chore: move successful modal inside phone-number-verification-page

* chore: update phone-number-verified-modal and remove ui store values

* chore: revert unused changes

* chore: add routes to personal details

* chore: fix matchMedia failling in test case

* chore: update test case title

* chore: replace modal with quill-ui modal

* chore: update test case to pass first for phone number verified modal

* fix: test case

* chore: update code base on comments

* chore: resolve integration test failling

* chore: update code based on comments

* chore: add didnt get the code modal for phone verification

* chore: update test case and files for didnt get the code modal

* chore: update code based on comments

* chore: update test case based on comments

* chore: update helpers.ts based on comments

* chore: update based on comments

* chore: move convertPhoneTypeDisplay to correct folders

* chore: update resend-code-timer test case to use jest.advanceTimer

* chore: update show to show_otp_verification

* chore: update to use localise function

* chore: create verification-link-expired-modal

* chore: update all quill-ui packages

* chore: update test case title

* chore: update package version for quill-ui

* chore: create useGetEmailVerificationOTP hooks

* chore: implement callback for hooks

* chore: try to add InputGroupButton for phone-verification

* chore: update code based on comments

* chore: remove useGetEmailVerificationOTP and use useVerifyEmail instead

* chore: remove Input field from component and use quill-ui TextField and InputGroupButton

* chore: update scss

* chore: fix test failing for resend-code-timer.spec.tsx

* chore: implement phone number otp api hooks

* chore: update test case for useSendOTPVerificationCode

* chore: update otp-verification.spec.tsx

* chore: update title for otp verification and add test for Phone number verified modal

* chore: update naming to is_phone_number_verified based on comment

* chore: update localize in hooks

* fix: type error

* chore: resolve build fail issue

* chore: add localize at useSendOTPVerificationCode

* chore: implement error status when phone number is invalid

* chore: fix test case for confirm phone number

* chore: rename test case title and hooks based on comment

* chore: moved validePhoneNumber to a constant file

* chore: add error screens for email otp invalid

* chore: remove unused package in hooks

* chore: added useSetSettings hooks and change logic using new implemented hooks

* chore: update test case and localStorage setItem

* chore: rename handleError to formatError

* chore: change useSetSettings to useSettings and modify the hooks

* chore: update based on comments

* chore: remove conditional check for handleError and make it into 2 different formatError

* chore: include comments in hooks for requestSMS and requestWhatsapp

* chore: update useSEndOTPVerificationCode test case

* chore: add routing from email verification link

* chore: remove comments

* chore: implement timer from BE

* chore: update code based on comment

* chore: use 1 useState for otp request

* chore: move to 1 useState based on comment

* chore: rename phone_number_verification and move setIsLoading in if else statement based on comment

* chore: move setTimer useState into otp-verification

* chore: need to use React.useCallback to solve blinking issue for reInitalizeGetSettings

* chore: remove setIsButtonDisabled in validate next_email_otp_request function

* chore: update code based on comments

* chore: update to use is_email_verified

* chore: add WS call when redirect from notification tray

* chore: remove unused comment

* chore: update quill-ui in package.json

* chore: added Math.round for minutes timer

* chore: update code to have better user flow

* chore: realign code for BE integration

* chore: add timer to personal-details, expired modal and notification

* chore: remove unused dayjs in account package

* chore: update quill-ui version and updated codes for expired-link-modal

* chore: update verification link expired modal

* chore: add timer countdown snackbar in confirm your phone number page

* chore: update commented paragraph and remove TODOs

* chore: update test case and remove ts-expect-error

* chore: remove unused ...rest

* chore: include !! to phone_number_verification.verified

* chore: update verify button to clear all possible stored value

* chore: update code to fix demo session bugs

* chore: remove is_mobile from ui-store and update to latest useDevice

* chore: fix test case failling and update code based on comments

* chore: remove phone_number_verify?.verified logic check in personal details

* chore: fix test case and remove unused imports

* chore: update to fix test case

* chore: update code based on comments

* chore: update test case

* chore: update code based on comments

* chore: revert icons file

* chore: update code based on comments

* chore: update packages version and fix useSetting based on comments

* chore: update code based on comments

* chore: update verify-button.spec.tsx based on comment

* chore: update quill-ui version and code based on comments

* chore: update positions test case with scrollTo fix

* chore: remove @ts-expected-error

* fix: console log verified not found issue and clear otp after click resend code

* chore: fix authorize issue

* chore: update quill-ui version for console log fix

* chore: fix verification link expired rerendering issue

* fix: clicks on resend link or send via whatsapp redirect user back to confirm phone number page

* chore: have to include color black in button so the underline will be black

* chore: update quill-ui version

* chore: update to include type number in InputGroupButton

* chore: update useVerifyEmail hooks to fix button disabled issue

* chore: should run timer also if error is returned from BE

* fix: console error on clicking verify button in personal details section

* chore: fix unmounted console log issue

* chore: use useEffect directly from react package

* chore: fix test case fail issue

* chore: fix link-expired-modal cause added a boolean value in the hooks

* chore: replace TextField with TextFieldAddOn for confirm your phone number page

* chore: create new functional call in useVerifyEmail and remove deprecated tag

* chore: fix console log issue after clicking on verify button

* fix: legacywonicon not displaying properly by updating the version

* chore: update quill-ui version to fix input validation issue

* chore: update quill-ui verison to fix dark mode + issue

* chore: use lazyLoading for phone number verification

* chore: fix verify-button test case based on comment

* chore: update codes based on comment

* fix: resolve conflicts

* chore: revert phone number verification changes with master

* chore: make verify button disabled once user edit personal details and added growthbook

* chore: scss changes to fix tablet view issue

* chore: hide notification and show demo message when user is in demo account

* chore: implement growthbook in AppContent and added client store for it

* chore: change to redirect user back to personal details once they switch to demo

* chore: move popover tablet view from right to top

* chore: hide verify button when phone number changes

* chore: update growthbook usage based on comment

* chore: update useEffect in AppContent

* Suisin/utkarsha/upm819/phone verification flow (#16157)

* feat: move timer to diff component

* refactor: replace timer code with component

* test: testcase for resend-code-timer

* chore: add test case on cancel phone verification modal and move to a seperate component

* chore: update test case for phone-verification-page

* chore: update codes based on comments

* chore: update data testid

* fix: change text for email and phone, add TODOs

* chore: edit testcases

* chore: change prop to text

* test: update testcase

* chore: use ReturnType instead of NodeJS.timer

* chore: update quill-ui package and remove previous build config edits

* feat: integrate phone number challenge api

* chore: add comments

* chore: add ThemeProvider in phone verification

* chore: use states instead of useRef and update testcase

* test: added testcases for the hook

* chore: add phone otp screen

* chore: update based on comments

* chore: remove unused store in test case

* chore: add sms and whatsapp to 1 constant file

* chore: update code based on comments

* test: add tescases for counter change and title change

* chore: update code based on comments

* test: use useRealTimers

* test: mock useGetPhoneNumberOTP

* chore: update TODO comments

* chore: update code

* chore: update function for WhatsApp display

* chore: fix test case fail for confirm-phone-number

* chore: resolve failling test case

* chore: resolve conflicts otp-verification-component

* fix: prettier issue scss format

* chore: add phone verification successful modal

* chore: edit classname for verified modal

* chore: update test case describe name and ui store value

* chore: move successful modal inside phone-number-verification-page

* chore: update phone-number-verified-modal and remove ui store values

* chore: revert unused changes

* chore: add routes to personal details

* chore: fix matchMedia failling in test case

* chore: update test case title

* chore: replace modal with quill-ui modal

* chore: update test case to pass first for phone number verified modal

* fix: test case

* chore: update code base on comments

* chore: resolve integration test failling

* chore: update code based on comments

* chore: add didnt get the code modal for phone verification

* chore: update test case and files for didnt get the code modal

* chore: update code based on comments

* chore: update test case based on comments

* chore: update helpers.ts based on comments

* chore: update based on comments

* chore: move convertPhoneTypeDisplay to correct folders

* chore: update resend-code-timer test case to use jest.advanceTimer

* chore: update show to show_otp_verification

* chore: update to use localise function

* chore: create verification-link-expired-modal

* chore: update all quill-ui packages

* chore: update test case title

* chore: update package version for quill-ui

* chore: create useGetEmailVerificationOTP hooks

* chore: implement callback for hooks

* chore: try to add InputGroupButton for phone-verification

* chore: update code based on comments

* chore: remove useGetEmailVerificationOTP and use useVerifyEmail instead

* chore: remove Input field from component and use quill-ui TextField and InputGroupButton

* chore: update scss

* chore: fix test failing for resend-code-timer.spec.tsx

* chore: implement phone number otp api hooks

* chore: update test case for useSendOTPVerificationCode

* chore: update otp-verification.spec.tsx

* chore: update title for otp verification and add test for Phone number verified modal

* chore: update naming to is_phone_number_verified based on comment

* chore: update localize in hooks

* fix: type error

* chore: resolve build fail issue

* chore: add localize at useSendOTPVerificationCode

* chore: implement error status when phone number is invalid

* chore: fix test case for confirm phone number

* chore: rename test case title and hooks based on comment

* chore: moved validePhoneNumber to a constant file

* chore: add error screens for email otp invalid

* chore: remove unused package in hooks

* chore: added useSetSettings hooks and change logic using new implemented hooks

* chore: update test case and localStorage setItem

* chore: rename handleError to formatError

* chore: change useSetSettings to useSettings and modify the hooks

* chore: update based on comments

* chore: remove conditional check for handleError and make it into 2 different formatError

* chore: include comments in hooks for requestSMS and requestWhatsapp

* chore: update useSEndOTPVerificationCode test case

* chore: add routing from email verification link

* chore: remove comments

* chore: implement timer from BE

* chore: update code based on comment

* chore: use 1 useState for otp request

* chore: move to 1 useState based on comment

* chore: rename phone_number_verification and move setIsLoading in if else statement based on comment

* chore: move setTimer useState into otp-verification

* chore: need to use React.useCallback to solve blinking issue for reInitalizeGetSettings

* chore: remove setIsButtonDisabled in validate next_email_otp_request function

* chore: update code based on comments

* chore: update to use is_email_verified

* chore: add WS call when redirect from notification tray

* chore: remove unused comment

* chore: update quill-ui in package.json

* chore: added Math.round for minutes timer

* chore: update code to have better user flow

* chore: realign code for BE integration

* chore: add timer to personal-details, expired modal and notification

* chore: remove unused dayjs in account package

* chore: update quill-ui version and updated codes for expired-link-modal

* chore: update verification link expired modal

* chore: add timer countdown snackbar in confirm your phone number page

* chore: update commented paragraph and remove TODOs

* chore: update test case and remove ts-expect-error

* chore: remove unused ...rest

* chore: include !! to phone_number_verification.verified

* chore: update verify button to clear all possible stored value

* chore: update code to fix demo session bugs

* chore: remove is_mobile from ui-store and update to latest useDevice

* chore: fix test case failling and update code based on comments

* chore: remove phone_number_verify?.verified logic check in personal details

* chore: fix test case and remove unused imports

* chore: update to fix test case

* chore: update code based on comments

* chore: update test case

* chore: update code based on comments

* chore: revert icons file

* chore: update code based on comments

* chore: update packages version and fix useSetting based on comments

* chore: update code based on comments

* chore: update verify-button.spec.tsx based on comment

* chore: update quill-ui version and code based on comments

* chore: update positions test case with scrollTo fix

* chore: remove @ts-expected-error

* fix: console log verified not found issue and clear otp after click resend code

* chore: fix authorize issue

* chore: update quill-ui version for console log fix

* chore: fix verification link expired rerendering issue

* fix: clicks on resend link or send via whatsapp redirect user back to confirm phone number page

* chore: have to include color black in button so the underline will be black

* chore: update quill-ui version

* chore: update to include type number in InputGroupButton

* chore: update useVerifyEmail hooks to fix button disabled issue

* chore: should run timer also if error is returned from BE

* fix: console error on clicking verify button in personal details section

* chore: fix unmounted console log issue

* chore: use useEffect directly from react package

* chore: fix test case fail issue

* chore: fix link-expired-modal cause added a boolean value in the hooks

* chore: replace TextField with TextFieldAddOn for confirm your phone number page

* chore: create new functional call in useVerifyEmail and remove deprecated tag

* chore: fix console log issue after clicking on verify button

* fix: legacywonicon not displaying properly by updating the version

* chore: update quill-ui version to fix input validation issue

* chore: update quill-ui verison to fix dark mode + issue

* chore: use lazyLoading for phone number verification

* chore: fix verify-button test case based on comment

* chore: update codes based on comment

* fix: resolve conflicts

* chore: revert phone number verification changes with master

* chore: make verify button disabled once user edit personal details and added growthbook

* chore: scss changes to fix tablet view issue

* chore: hide notification and show demo message when user is in demo account

* chore: implement growthbook in AppContent and added client store for it

* chore: change to redirect user back to personal details once they switch to demo

* chore: move popover tablet view from right to top

* chore: hide verify button when phone number changes

* chore: update growthbook usage based on comment

* chore: update useEffect in AppContent

---------

Co-authored-by: utkarsha-deriv <utkarsha@regentmarkets.com>
Co-authored-by: amina-deriv <amina@regentmarkets.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>

* chore: update growthbook value in AppContent

* chore: remove is_phone_number_verification_enabled

* chore: solve redirect not working issue

* chore: update packages for deriv-com/quill-ui

* fix: removed clean urls from vercel dr json (#16249)

* Revert "[WALL] george / WALL-4522 / Add ce_cashier_deposit_onboarding_form an…" (#16246)

This reverts commit a10f85ced2d3ac9f29137bb1f1a72c5309074651.

* [DTRA] Maryia/DTRA-1546/fix: [V2] style & animation for Digits Current spot price + active_symbols request (#16225)

* fix: styles & animation for current spot for digit trade types

* fix: active_symbols call for rise/fall and higher/lower

* fix: useActiveSymbols usage

* fix: active_symbols call with relevant barrier_category + error handling same like in prod

* chore: replace localize import with new library (#16140)

* chore: replace localize import with new library

* chore: removed unused component

* chore: update usePhoneNumberVerificationSetTimer to use useServerTime

* [WALL] Lubega / WALL-4549 / Wallets initial translations setup (#16158)

* feat: draft wallet translations

* feat: initial wallets translations setup

* chore: clean up code

* fix: resolve error

* fix: resolve error

* chore: update text component

* fix: env variables and language switcher

* [WALL] Lubega/ WALL-4549 / Wallets multi language support (#16069)

* feat: draft wallet translations

* feat: initial wallets translations setup

* chore: clean up code

* fix: resolve error

* fix: resolve error

* chore: update text component

* fix: env variables and language switcher

* fix: update locked scenarios

* [WALL] Lubega / Wallets translations update (#16112)

* feat: draft wallet translations

* feat: initial wallets translations setup

* chore: clean up code

* fix: resolve error

* fix: resolve error

* chore: update text component

* fix: env variables and language switcher

* Suisin/fix: text not bold in email and password page (#16094)

* fix: text not bold in email and password page

* chore: update package version to use specific version

* Fasih/COJ-1275/ Implemented lazy load (#16020)

* chore: implemented lazy load on financial assessment and trading assesment

* chore: working on personal details

* chore: removed lazy load from personal details

---------

Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>

* [WALL] george / WALL-4402 / feat(wallets): ✨ add analytics to track wallets events  (#16004)

* feat(wallets): :sparkles: add wallet migration analytic

* chore: :mute: suppress ts error

* chore: align with master

* fix: prettified code

* chore: fix isOpen condition appear twice

* fix: update locked scenarios

---------

Co-authored-by: Sui Sin <103026762+suisin-deriv@users.noreply.github.com>
Co-authored-by: fasihali-deriv <121229483+fasihali-deriv@users.noreply.github.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>
Co-authored-by: George Usynin <103181646+heorhi-deriv@users.noreply.github.com>

* fix: update github workflow

* fix: getWalletHeaderButtons format

* Update index.js

* Update index.js

* Update index.js

* Update index.js

* Update index.js

* chore: remove eslint auto format

* chore: test remove line

* chore: test remove line

* chore: test remove line

* chore: test remove line

* chore: test remove line

* chore: update deriv-com/translations version

---------

Co-authored-by: Sui Sin <103026762+suisin-deriv@users.noreply.github.com>
Co-authored-by: fasihali-deriv <121229483+fasihali-deriv@users.noreply.github.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>
Co-authored-by: George Usynin <103181646+heorhi-deriv@users.noreply.github.com>
Co-authored-by: nijil-deriv <nijil@deriv.com>

* translations: 📚 sync translations with crowdin (#16262)

Co-authored-by: DerivFE <fe-access@regentmarkets.com>

* ci: change env usage (#16264)

* Ako/ override installCommand of vercel (#16257)

* build: override installcommand of vercel

* build: override installcommand of vercel (#16256)

* ci: fix the staging vercel env

* chore: update to use useGrowthbookGetFeatureFlag

---------

Co-authored-by: utkarsha-deriv <utkarsha@regentmarkets.com>
Co-authored-by: amina-deriv <amina@regentmarkets.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>
Co-authored-by: nada-deriv <122768621+nada-deriv@users.noreply.github.com>
Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Co-authored-by: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com>
Co-authored-by: fasihali-deriv <121229483+fasihali-deriv@users.noreply.github.com>
Co-authored-by: George Usynin <103181646+heorhi-deriv@users.noreply.github.com>
Co-authored-by: nijil-deriv <nijil@deriv.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <fe-access@regentmarkets.com>
Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@deriv.com>

* chore: move setLoading to top of the function

* chore: update to use WS instead of useServerTimer

* chore: fix cd /Users/suisin/Documents/deriv-apppersonal-details-form test case

* chore: update otp-verification test case

* chore: fix notification tray not closing issue

* Suisin/utkarsha/upm819/phone verification flow (#16313)

* chore: fix test case fail for confirm-phone-number

* chore: resolve failling test case

* chore: resolve conflicts otp-verification-component

* fix: prettier issue scss format

* chore: add phone verification successful modal

* chore: edit classname for verified modal

* chore: update test case describe name and ui store value

* chore: move successful modal inside phone-number-verification-page

* chore: update phone-number-verified-modal and remove ui store values

* chore: revert unused changes

* chore: add routes to personal details

* chore: fix matchMedia failling in test case

* chore: update test case title

* chore: replace modal with quill-ui modal

* chore: update test case to pass first for phone number verified modal

* fix: test case

* chore: update code base on comments

* chore: resolve integration test failling

* chore: update code based on comments

* chore: add didnt get the code modal for phone verification

* chore: update test case and files for didnt get the code modal

* chore: update code based on comments

* chore: update test case based on comments

* chore: update helpers.ts based on comments

* chore: update based on comments

* chore: move convertPhoneTypeDisplay to correct folders

* chore: update resend-code-timer test case to use jest.advanceTimer

* chore: update show to show_otp_verification

* chore: update to use localise function

* chore: create verification-link-expired-modal

* chore: update all quill-ui packages

* chore: update test case title

* chore: update package version for quill-ui

* chore: create useGetEmailVerificationOTP hooks

* chore: implement callback for hooks

* chore: try to add InputGroupButton for phone-verification

* chore: update code based on comments

* chore: remove useGetEmailVerificationOTP and use useVerifyEmail instead

* chore: remove Input field from component and use quill-ui TextField and InputGroupButton

* chore: update scss

* chore: fix test failing for resend-code-timer.spec.tsx

* chore: implement phone number otp api hooks

* chore: update test case for useSendOTPVerificationCode

* chore: update otp-verification.spec.tsx

* chore: update title for otp verification and add test for Phone number verified modal

* chore: update naming to is_phone_number_verified based on comment

* chore: update localize in hooks

* fix: type error

* chore: resolve build fail issue

* chore: add localize at useSendOTPVerificationCode

* chore: implement error status when phone number is invalid

* chore: fix test case for confirm phone number

* chore: rename test case title and hooks based on comment

* chore: moved validePhoneNumber to a constant file

* chore: add error screens for email otp invalid

* chore: remove unused package in hooks

* chore: added useSetSettings hooks and change logic using new implemented hooks

* chore: update test case and localStorage setItem

* chore: rename handleError to formatError

* chore: change useSetSettings to useSettings and modify the hooks

* chore: update based on comments

* chore: remove conditional check for handleError and make it into 2 different formatError

* chore: include comments in hooks for requestSMS and requestWhatsapp

* chore: update useSEndOTPVerificationCode test case

* chore: add routing from email verification link

* chore: remove comments

* chore: implement timer from BE

* chore: update code based on comment

* chore: use 1 useState for otp request

* chore: move to 1 useState based on comment

* chore: rename phone_number_verification and move setIsLoading in if else statement based on comment

* chore: move setTimer useState into otp-verification

* chore: need to use React.useCallback to solve blinking issue for reInitalizeGetSettings

* chore: remove setIsButtonDisabled in validate next_email_otp_request function

* chore: update code based on comments

* chore: update to use is_email_verified

* chore: add WS call when redirect from notification tray

* chore: remove unused comment

* chore: update quill-ui in package.json

* chore: added Math.round for minutes timer

* chore: update code to have better user flow

* chore: realign code for BE integration

* chore: add timer to personal-details, expired modal and notification

* chore: remove unused dayjs in account package

* chore: update quill-ui version and updated codes for expired-link-modal

* chore: update verification link expired modal

* chore: add timer countdown snackbar in confirm your phone number page

* chore: update commented paragraph and remove TODOs

* chore: update test case and remove ts-expect-error

* chore: remove unused ...rest

* chore: include !! to phone_number_verification.verified

* chore: update verify button to clear all possible stored value

* chore: update code to fix demo session bugs

* chore: remove is_mobile from ui-store and update to latest useDevice

* chore: fix test case failling and update code based on comments

* chore: remove phone_number_verify?.verified logic check in personal details

* chore: fix test case and remove unused imports

* chore: update to fix test case

* chore: update code based on comments

* chore: update test case

* chore: update code based on comments

* chore: revert icons file

* chore: update code based on comments

* chore: update packages version and fix useSetting based on comments

* chore: update code based on comments

* chore: update verify-button.spec.tsx based on comment

* chore: update quill-ui version and code based on comments

* chore: update positions test case with scrollTo fix

* chore: remove @ts-expected-error

* fix: console log verified not found issue and clear otp after click resend code

* chore: fix authorize issue

* chore: update quill-ui version for console log fix

* chore: fix verification link expired rerendering issue

* fix: clicks on resend link or send via whatsapp redirect user back to confirm phone number page

* chore: have to include color black in button so the underline will be black

* chore: update quill-ui version

* chore: update to include type number in InputGroupButton

* chore: update useVerifyEmail hooks to fix button disabled issue

* chore: should run timer also if error is returned from BE

* fix: console error on clicking verify button in personal details section

* chore: fix unmounted console log issue

* chore: use useEffect directly from react package

* chore: fix test case fail issue

* chore: fix link-expired-modal cause added a boolean value in the hooks

* chore: replace TextField with TextFieldAddOn for confirm your phone number page

* chore: create new functional call in useVerifyEmail and remove deprecated tag

* chore: fix console log issue after clicking on verify button

* fix: legacywonicon not displaying properly by updating the version

* chore: update quill-ui version to fix input validation issue

* chore: update quill-ui verison to fix dark mode + issue

* chore: use lazyLoading for phone number verification

* chore: fix verify-button test case based on comment

* chore: update codes based on comment

* fix: resolve conflicts

* chore: revert phone number verification changes with master

* chore: make verify button disabled once user edit personal details and added growthbook

* chore: scss changes to fix tablet view issue

* chore: hide notification and show demo message when user is in demo account

* chore: implement growthbook in AppContent and added client store for it

* chore: change to redirect user back to personal details once they switch to demo

* chore: move popover tablet view from right to top

* chore: hide verify button when phone number changes

* chore: update growthbook usage based on comment

* chore: update useEffect in AppContent

* Suisin/utkarsha/upm819/phone verification flow (#16157)

* feat: move timer to diff component

* refactor: replace timer code with component

* test: testcase for resend-code-timer

* chore: add test case on cancel phone verification modal and move to a seperate component

* chore: update test case for phone-verification-page

* chore: update codes based on comments

* chore: update data testid

* fix: change text for email and phone, add TODOs

* chore: edit testcases

* chore: change prop to text

* test: update testcase

* chore: use ReturnType instead of NodeJS.timer

*…
  • Loading branch information
18 people committed Sep 18, 2024
1 parent 6672c90 commit 438f1ac
Show file tree
Hide file tree
Showing 88 changed files with 4,195 additions and 74 deletions.
9 changes: 5 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions packages/account/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ module.exports = {
...baseConfigForPackages,
preset: 'ts-jest',
moduleNameMapper: {
'\\.css$': '<rootDir>/../../__mocks__/styleMock.js',
'\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
'\\.(s(c|a)ss|css|less)$': '<rootDir>/../../__mocks__/styleMock.js',
'^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
'@deriv-com/translations': '<rootDir>/../../__mocks__/translation.mock.js',
'^Assets/(.*)$': '<rootDir>/src/Assets/$1',
Expand Down
2 changes: 1 addition & 1 deletion packages/account/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"@binary-com/binary-document-uploader": "^2.4.8",
"@deriv-com/analytics": "1.14.0",
"@deriv-com/translations": "1.3.5",
"@deriv-com/utils": "^0.0.25",
"@deriv-com/utils": "0.0.33",
"@deriv-com/ui": "1.35.0",
"@deriv/api": "^1.0.0",
"@deriv-com/quill-ui": "1.16.9",
Expand Down
7 changes: 2 additions & 5 deletions packages/account/src/Configs/personal-details-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,9 @@ export const personal_details_config = ({
['phone', localize('Phone is not in a proper format.')],
[
(value: string) => {
// phone_trim uses regex that trims non-digits
const phone_trim = value.replace(/\D/g, '');
// minimum characters required is 9 numbers (excluding +- signs or space)
return validLength(phone_trim, { min: PHONE_NUMBER_LENGTH.MIN, max: PHONE_NUMBER_LENGTH.MAX });
return validLength(value, { min: PHONE_NUMBER_LENGTH.MIN, max: PHONE_NUMBER_LENGTH.MAX });
},
localize('You should enter {{min}}-{{max}} numbers.', {
localize('You should enter {{min}}-{{max}} characters.', {
min: PHONE_NUMBER_LENGTH.MIN,
max: PHONE_NUMBER_LENGTH.MAX,
}),
Expand Down
2 changes: 1 addition & 1 deletion packages/account/src/Constants/personal-details.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const PHONE_NUMBER_LENGTH = {
MIN: 9,
MAX: 35,
MAX: 20,
};
11 changes: 11 additions & 0 deletions packages/account/src/Constants/routes-config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ const Passwords = makeLazyLoader(
() => <Loading />
)();

const PhoneVerificationPage = makeLazyLoader(
() => moduleLoader(() => import('../Sections/Profile/PhoneVerification')),
() => <Loading />
)();

const Passkeys = makeLazyLoader(
() => moduleLoader(() => import('../Sections/Security/Passkeys')),
() => <Loading />
Expand Down Expand Up @@ -109,6 +114,12 @@ const initRoutesConfig = () => [
getTitle: () => localize('Profile'),
icon: 'IcUserOutline',
subroutes: [
{
path: routes.phone_verification,
component: PhoneVerificationPage,
getTitle: () => localize('Phone number verification'),
is_hidden: true,
},
{
path: routes.personal_details,
component: PersonalDetails,
Expand Down
13 changes: 13 additions & 0 deletions packages/account/src/Containers/__tests__/routes.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,19 @@ jest.mock('@deriv/components', () => ({
}));

describe('<Routes />', () => {
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // Deprecated
removeListener: jest.fn(), // Deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
const history = createBrowserHistory();

const mock_root_store = mockStore({
Expand Down
11 changes: 8 additions & 3 deletions packages/account/src/Containers/routes.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
import React from 'react';
import { withRouter } from 'react-router';
import { observer, useStore } from '@deriv/stores';
import { BinaryRoutes } from '../Components/Routes';
import ErrorComponent from '../Components/error-component';
import { ThemeProvider } from '@deriv-com/quill-ui';

const Routes = observer(() => {
const { client, common } = useStore();
const { client, common, ui } = useStore();
const { is_logged_in, is_logging_in } = client;
const { error, has_error } = common;
const { is_dark_mode_on } = ui;
if (has_error) {
return <ErrorComponent {...error} />;
}

return <BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} />;
return (
<ThemeProvider theme={is_dark_mode_on ? 'dark' : 'light'}>
<BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} />
</ThemeProvider>
);
});

// need to wrap withRouter
Expand Down
7 changes: 7 additions & 0 deletions packages/account/src/Helpers/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
getIDVNotApplicableOption,
IDV_ERROR_STATUS,
AUTH_STATUS_CODES,
VERIFICATION_SERVICES,
} from '@deriv/shared';
import { localize } from '@deriv-com/translations';
import { getIDVDocuments } from '../Configs/idv-document-config';
Expand Down Expand Up @@ -277,3 +278,9 @@ export const verifyFields = (status: TIDVErrorStatus) => {

export const isSpecialPaymentMethod = (payment_method_icon: string) =>
['IcOnlineNaira', 'IcAstroPayLight', 'IcAstroPayDark'].some(icon => icon === payment_method_icon);

export const convertPhoneTypeDisplay = (phone_verification_type: string) => {
if (phone_verification_type === VERIFICATION_SERVICES.SMS) return phone_verification_type.toUpperCase();

return 'WhatsApp';
};
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { APIProvider } from '@deriv/api';
import userEvent from '@testing-library/user-event';
import { StoreProvider, mockStore } from '@deriv/stores';
import PersonalDetailsForm from '../personal-details-form';
import { useResidenceList } from '@deriv/hooks';
import { useGrowthbookGetFeatureValue, useResidenceList } from '@deriv/hooks';

afterAll(cleanup);
jest.mock('@deriv/components', () => ({
Expand All @@ -16,6 +16,7 @@ jest.mock('@deriv/components', () => ({

jest.mock('@deriv/shared/src/services/ws-methods', () => ({
WS: {
send: jest.fn().mockResolvedValue({ time: 1620000000 }),
wait: (...payload: []) => Promise.resolve([...payload]),
},
useWS: () => undefined,
Expand All @@ -32,6 +33,7 @@ jest.mock('@deriv/hooks', () => ({
...jest.requireActual('@deriv/hooks'),
useStatesList: jest.fn(() => ({ data: residence_list, isLoading: false })),
useResidenceList: jest.fn(() => ({ data: residence_list, isLoading: false })),
useGrowthbookGetFeatureValue: jest.fn(),
}));

describe('<PersonalDetailsForm />', () => {
Expand All @@ -44,6 +46,9 @@ describe('<PersonalDetailsForm />', () => {
place_of_birth: 'Thailand',
citizen: 'Thailand',
email_consent: 1,
phone_number_verification: {
verified: 0,
},
},
},
});
Expand All @@ -60,15 +65,15 @@ describe('<PersonalDetailsForm />', () => {
);
};

beforeEach(() => {
(useGrowthbookGetFeatureValue as jest.Mock).mockReturnValue([true]);
});

it('should render successfully', async () => {
renderComponent();
expect(screen.queryByText(/Loading/)).not.toBeInTheDocument();
await waitFor(() => {
expect(
screen.getByText(
/Please make sure your information is correct or it may affect your trading experience./i
)
).toBeInTheDocument();
expect(screen.getByText(/Ensure your information is correct./i)).toBeInTheDocument();
});
});

Expand Down Expand Up @@ -176,14 +181,14 @@ describe('<PersonalDetailsForm />', () => {
).toBeInTheDocument();
});

it('should update user profile after clicking on submit', () => {
it('should update user profile after clicking on Save changes', () => {
renderComponent();
const first_name = screen.getByTestId('dt_first_name') as HTMLInputElement;
expect(first_name.value).toBe('John');
userEvent.clear(first_name);
userEvent.type(first_name, 'James');
const submit_button = screen.getByRole('button', { name: /Submit/ });
userEvent.click(submit_button);
const save_changes_button = screen.getByRole('button', { name: /Save changes/ });
userEvent.click(save_changes_button);
expect(first_name.value).toBe('James');
});

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import React from 'react';
import { Router } from 'react-router';
import { createBrowserHistory } from 'history';
import { screen, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { usePhoneNumberVerificationSetTimer, useVerifyEmail } from '@deriv/hooks';
import { routes } from '@deriv/shared';
import { StoreProvider, mockStore } from '@deriv/stores';
import { VerifyButton } from '../verify-button';

jest.mock('@deriv/hooks', () => ({
...jest.requireActual('@deriv/hooks'),
usePhoneNumberVerificationSetTimer: jest.fn(),
useVerifyEmail: jest.fn(() => ({
sendPhoneNumberVerifyEmail: jest.fn(),
WS: {},
error: null,
})),
useSettings: jest.fn(() => ({
refetch: jest.fn(),
})),
}));

describe('VerifyButton', () => {
beforeEach(() => {
(usePhoneNumberVerificationSetTimer as jest.Mock).mockReturnValue({ next_otp_request: '' });
});
const history = createBrowserHistory();
const mock_store = mockStore({
client: {
account_settings: {
phone_number_verification: {
verified: 0,
},
},
},
});
let mock_next_email_otp_request_timer = 0;
const mock_set_status = jest.fn();

const renderWithRouter = () => {
return render(
<Router history={history}>
<StoreProvider store={mock_store}>
<VerifyButton
is_verify_button_disabled={false}
next_email_otp_request_timer={mock_next_email_otp_request_timer}
setStatus={mock_set_status}
/>
</StoreProvider>
</Router>
);
};

beforeEach(() => {
mock_next_email_otp_request_timer = 0;
});

it('should render Verify Button', () => {
renderWithRouter();
expect(screen.getByText('Verify')).toBeInTheDocument();
});

it('should redirect user to phone-verification page when clicked on Verify Button', () => {
(useVerifyEmail as jest.Mock).mockReturnValue({
sendPhoneNumberVerifyEmail: jest.fn(),
WS: {
isSuccess: true,
},
});
renderWithRouter();
const verifyButton = screen.getByText('Verify');
userEvent.click(verifyButton);
expect(history.location.pathname).toBe(routes.phone_verification);
});

it('should setStatus with error returned by WS', () => {
(useVerifyEmail as jest.Mock).mockReturnValue({
sendPhoneNumberVerifyEmail: jest.fn(),
WS: {
isSuccess: false,
},
error: {
message: 'Phone Taken',
code: 'PhoneNumberTaken',
},
});
renderWithRouter();
const verifyButton = screen.getByText('Verify');
userEvent.click(verifyButton);
expect(mock_set_status).toBeCalledWith({ msg: 'Phone Taken', code: 'PhoneNumberTaken' });
});

it('should render Verify Button with timer if next_otp_request has value', () => {
mock_next_email_otp_request_timer = 2;
renderWithRouter();
expect(screen.getByText('Verify in 2s')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Verify in 2s' })).toBeDisabled();
});

it('should render Verified text', () => {
if (mock_store.client.account_settings.phone_number_verification)
mock_store.client.account_settings.phone_number_verification.verified = 1;
renderWithRouter();
expect(screen.getByText('Verified')).toBeInTheDocument();
});
});
Loading

0 comments on commit 438f1ac

Please sign in to comment.