Suisin/phone number verification (deriv-com#16886)

* update master (#16881)

* [UPM-1474]/evgeniy/passkey remove without verification (#16764)

* chore: [UPM-1474]/evgeniy/passkey remove without verification

* fix: import and typo

* fix: error modal overlapping, no paskey page show when no passkey after removing

* chore: test cases

* refactor: remove usequery from getpasskeys

* fix: failing test

* fix: failing tests

* fix: test

* fix: wrong condition to save empty passkey array

* feat(cashier): :sparkles: support crypto withdrawal transaction redirection from deriv go (#16802)

---------

Co-authored-by: yauheni-deriv <[email protected]>
Co-authored-by: George Usynin <[email protected]>

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

* 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 <[email protected]>
Co-authored-by: amina-deriv <[email protected]>
Co-authored-by: amina-deriv <[email protected]>

* 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 <[email protected]>
Co-authored-by: amina-deriv <[email protected]>
Co-authored-by: amina-deriv <[email protected]>

* 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 <[email protected]>
Co-authored-by: amina-deriv <[email protected]>
Co-authored-by: amina-deriv <[email protected]>

* 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 <[email protected]>
Co-authored-by: Maryia <[email protected]>

* 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 <[email protected]>
Co-authored-by: amina-deriv <[email protected]>
Co-authored-by: amina-deriv <[email protected]>

* 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 <[email protected]>

* [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 <[email protected]>
Co-authored-by: fasihali-deriv <[email protected]>
Co-authored-by: amina-deriv <[email protected]>
Co-authored-by: George Usynin <[email protected]>

* 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 <[email protected]>
Co-authored-by: fasihali-deriv <[email protected]>
Co-authored-by: amina-deriv <[email protected]>
Co-authored-by: George Usynin <[email protected]>
Co-authored-by: nijil-deriv <[email protected]>

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

Co-authored-by: DerivFE <[email protected]>

* 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 <[email protected]>
Co-authored-by: amina-deriv <[email protected]>
Co-authored-by: amina-deriv <[email protected]>
Co-authored-by: nada-deriv <[email protected]>
Co-authored-by: Maryia <[email protected]>
Co-authored-by: Likhith Kolayari <[email protected]>
Co-authored-by: lubega-deriv <[email protected]>
Co-authored-by: fasihali-deriv <[email protected]>
Co-authored-by: George Usynin <[email protected]>
Co-authored-by: nijil-deriv <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <[email protected]>
Co-authored-by: Ali(Ako) Hosseini <[email protected]>

* 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 ta…

packages/account/jest.config.js

@@ -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',

packages/account/src/Configs/personal-details-config.ts

@@ -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,
                     }),

packages/account/src/Constants/personal-details.ts

@@ -1,4 +1,4 @@
 export const PHONE_NUMBER_LENGTH = {
     MIN: 9,
-    MAX: 35,
+    MAX: 20,
 };

packages/account/src/Constants/routes-config.tsx

@@ -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 />
@@ -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,

packages/account/src/Containers/__tests__/routes.spec.tsx

@@ -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({

packages/account/src/Containers/routes.tsx

@@ -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

packages/account/src/Helpers/utils.tsx

@@ -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';
@@ -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';
+};

packages/account/src/Sections/Profile/PersonalDetails/__tests__/personal-details-form.spec.tsx

@@ -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', () => ({
@@ -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,
@@ -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 />', () => {
@@ -44,6 +46,9 @@ describe('<PersonalDetailsForm />', () => {
                 place_of_birth: 'Thailand',
                 citizen: 'Thailand',
                 email_consent: 1,
+                phone_number_verification: {
+                    verified: 0,
+                },
             },
         },
     });
@@ -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();
         });
     });
 
@@ -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');
     });
 

packages/account/src/Sections/Profile/PersonalDetails/__tests__/verify-button.spec.tsx

@@ -0,0 +1,130 @@
+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';
+import { GetSettings, ResidenceList, StatesList } from '@deriv/api-types';
+
+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(),
+        mutation: {
+            mutateAsync: jest.fn(() => Promise.resolve()),
+            isLoading: false,
+        },
+    })),
+}));
+
+const mockAccountSettings: GetSettings = {
+    immutable_fields: ['place_of_birth'],
+    place_of_birth: 'UK',
+    tax_residence: 'UK',
+    tax_identification_number: '12345',
+    account_opening_reason: 'Hedging',
+};
+
+const mockResidenceList: ResidenceList = [
+    { value: 'UK', text: 'United Kingdom' },
+    { value: 'US', text: 'United States' },
+];
+
+const mockStatesList: StatesList = [];
+
+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}
+                        values={mockAccountSettings}
+                        residence_list={mockResidenceList}
+                        states_list={mockStatesList}
+                        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();
+    });
+});