[FEAT] COMPONENT > Notification Card

[Mat-icon]

Description:

Create a reusable notification confirmation card to enable users to confirm their actions before proceeding or to give information.

Acceptance Criteria:

1. The card should include a "Approve" button that dismisses the card on click.
2. The card should include a "View" button that reveals more of the message on click.
3. The card should be closed a timeout of 5 seconds
4. The card should be responsive and function correctly on all devices (mobile, tablet, desktop).
5. Unit tests should cover all key functionalities.

Expected Outcome:

A fully functional notification card that provides feedback to users after a successful verification. . It should meet all acceptance criteria.

Purpose:

A fully functional notification card that provides feedback to users after a successful verification, It should meet all acceptance criteria. providing a clear and positive user experience.

Requirement:

1. Design implementation as per the provided Figma designs.
2. Include a "Approve" button that dismisses the card on click.
3. Set timeout to close it after 5 seconds.
4. Ensure the card is responsive across different screen sizes.

Testing:

1. Unit tests for card visibility and dismissal functionality.
2. Manual testing across different devices to ensure responsiveness.

Task:

• [x] Set up the notification card component.
• [x] Display a success message in the card.
• [x] Add a "Continue" button that dismisses the modal on click.
• [x] Implement setTimeout functionality to close the card.
• [x] Ensure the card is responsive across all devices.

Picture of the corresponding component/page of the ticket from the Figma:

Figma Link:

• Figma Link

[mminuwaali]

Feature has been implemented and tested