Fix: Add New Card Functionality with QR Code Scanner

[munezeromicha]

Overview
This pull request introduces a new feature that allows patients to add a new card within the application. The feature includes a QR code scanner for easy card information entry, and fields for manual input of the cardholder's name, card number, expiry date, and CVV number.

Features Added
QR Code Scanner:

• A QR code scanner button is included at the top right corner of the screen.
• When tapped, it navigates the user to the QR code scanner page for quick card information capture.

Cardholder Name Input:

• A text input field where users can enter the cardholder's name.

Card Number Input:

• A text input field for entering the card number.
• The input automatically formats the card number into groups of four digits for better readability.

Expiry Date Input:

• A date picker for selecting the card's expiry date.
• The expiry date is displayed in a readable format and can be changed by tapping the calendar icon.

CVV Number Input:

• A text input field for entering the CVV number.
• The input restricts the CVV number to a maximum of 3 or 4 digits based on card type.

Styling and Theming:

• The feature is styled to be consistent with the application's dark and light themes.
• Various UI elements adapt their colors based on the current theme.

Technical Changes

New Components and Dependencies:

• Added SvgXml components for rendering SVG icons.
• Used react-native-community/datetimepicker for the date picker.
• Updated imports to include necessary icons and assets.

State Management:

• Added state variables to manage card details (cardNumber, CVVNumber, date).
• Utilized useState for local state and useEffect for side effects.

Event Handlers:

• handleCardNumberChange for formatting card number input.
• handleCVVChange for restricting CVV input length.
• onDateChange for updating the selected expiry date.

UI Improvements:

• Positioned the QR code scanner button for easy access.
• Ensured inputs are user-friendly and clearly labeled.

ScreenShoots:

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 72.22%. Comparing base (3ec9fe1) to head (e70330e).
Report is 9 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #110   +/-   ##
========================================
  Coverage    72.22%   72.22%           
========================================
  Files            3        3           
  Lines           18       18           
  Branches         3        3           
========================================
  Hits            13       13           
  Misses           5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.