Farabi/grwt-9079/add-positions-banner-and-modal

[farabi-deriv]

This pull request introduces a new "positions banner" feature that notifies users about the upcoming Deriv Bot upgrade and prompts them to review and close their positions before the scheduled date. The implementation includes desktop and mobile banners, a mobile-only modal, and logic to defer onboarding tours and guides until the user has seen or dismissed the upgrade notice.

Key changes:

Positions Banner Feature

• Added PositionsBanner (desktop), PositionsBannerMobile (mobile), and PositionsBannerModal (mobile modal) components, each displaying upgrade information and linking to the reports page. The modal is shown only once per browser and persists its seen state in localStorage.
• Added corresponding SCSS files for desktop and modal variants for consistent styling.

State Management and Integration

• Introduced usePositionsBannerSeen hook and markPositionsBannerSeen utility for tracking and broadcasting the modal's seen state across components and tabs. (use-positions-banner-seen.ts src/components/positions-banner/use-positions-banner-seen.tsR1-R40)
• Integrated the banners and modal into the main layout, ensuring they are conditionally rendered based on device type, authentication, and page context.

Onboarding and Tour Deferral

• Updated onboarding tour and info panel logic to defer their display until after the user has seen or dismissed the positions banner modal, ensuring the upgrade notice receives priority attention on mobile.

These changes ensure all users are clearly notified about the upcoming system upgrade and are guided to review their positions, while also preventing onboarding distractions until the notice has been seen.

[github-actions]

Preview Link: https://farabi-grwt-9079-add.bot-65f.pages.dev

Name	Result
Build status	Completed ✅
Preview URL	Visit Preview
Action URL	Visit Action