ITEP-32025 Improve FuxNotification component [PART 1]

[romanowska]

📝 Description

Improve FuxNotification component to better resemble the soon-to-be deprecated CoachMark component. On this PR only the case of notification without the Dismiss all option was improved. The existing Credit Button notification was fixed to correctly use the new implementation.

On next PRs:
Fix implementation for more advanced notifications
Use FuxNotification implementation instead of CoachMark

JIRA: ITEP-32025

✨ Type of Change

Select the type of change your PR introduces:

• 🐞 Bug fix – Non-breaking change which fixes an issue
• 🚀 New feature – Non-breaking change which adds functionality
• 🔨 Refactor – Non-breaking change which refactors the code base
• 💥 Breaking change – Changes that break existing functionality
• 📚 Documentation update
• 🔒 Security update
• 🧪 Tests

🧪 Testing Scenarios

Describe how the changes were tested and how reviewers can test them too:

• ✅ Tested manually
• 🤖 Run automated end-to-end tests

✅ Checklist

Before submitting the PR, ensure the following:

• 🔍 PR title is clear and descriptive
• 📝 For internal contributors: If applicable, include the JIRA ticket number (e.g., ITEP-123456) in the PR title. Do not include full URLs
• 💬 I have commented my code, especially in hard-to-understand areas
• 📄 I have made corresponding changes to the documentation
• ✅ I have added tests that prove my fix is effective or my feature works

[Copilot]

Pull Request Overview

This PR refactors the FuxNotification component to drive its content and behavior from a shared utility based on FUX_NOTIFICATION_KEYS, updates the styling, and wires up the credit-balance button to use the new implementation without the “Dismiss all” option.

• Introduce getFuxNotificationData to centralize header/description/link/flow settings
• Update FuxNotification to consume settingsKey and customDocUrl and branch UI for simple dialogs
• Adjust styles and propagate the new props in credit-balance-button, and register the new key in user-settings

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
web_ui/src/shared/components/header/credit-balance/fux-notification/utils.ts	Add getFuxNotificationData mapping each FUX_NOTIFICATION_KEYS to dialog content
web_ui/src/shared/components/header/credit-balance/fux-notification/fux-notification.module.scss	New styles for .dialogWrapper, .fuxDivider, .dialogDescription, etc.
web_ui/src/shared/components/header/credit-balance/fux-notification/fux-notification.component.tsx	Refactor component to use settingsKey/customDocUrl and data util
web_ui/src/shared/components/header/credit-balance/credit-balance-button.component.tsx	Pass settingsKey and customDocUrl to FuxNotification
web_ui/src/shared/components/header/credit-balance/credits-to-consume.module.scss	Change .threeDotsFlashing to inline-flex
web_ui/src/core/user-settings/utils.ts	Register default config for CREDIT_BALANCE_BUTTON
web_ui/src/core/user-settings/dtos/user-settings.interface.ts	Add new enum value CREDIT_BALANCE_BUTTON to FUX_NOTIFICATION_KEYS

Comments suppressed due to low confidence (3)

web_ui/src/shared/components/header/credit-balance/fux-notification/utils.ts:13

• Consider adding unit tests for getFuxNotificationData to validate that each FUX_NOTIFICATION_KEYS case returns the correct configuration.

export const getFuxNotificationData = (fuxNotificationId: string): FuxNotificationData => {

web_ui/src/shared/components/header/credit-balance/credit-balance-button.component.tsx:120

• Missing import for FUX_NOTIFICATION_KEYS in this file. Please add import { FUX_NOTIFICATION_KEYS } from '../../../../../core/user-settings/dtos/user-settings.interface'; at the top.

                    settingsKey={FUX_NOTIFICATION_KEYS.CREDIT_BALANCE_BUTTON}

web_ui/src/shared/components/header/credit-balance/fux-notification/fux-notification.component.tsx:35

• [nitpick] The destructured docUrl here shadows the imported useDocsUrl hook namespace. Consider renaming to dataDocUrl or similar to improve clarity.

    const { header, description, nextStepId, previousStepId, showDismissAll, docUrl } =