zips-react-native-sdk-test/CHANGELOG.md

Lightweight ZIPS Payment Gateway SDK for React Native - Complete payment solution with card payments, wallet payments (AfrMoney & ZApp), netbanking, and native UI design

# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [2.3.9] - 2025-08-21

### 🔄 Redeployment & Quality Assurance

#### Redeployed

- **Package Integrity**: Fresh deployment to ensure all components are properly distributed
- **Build Verification**: Complete rebuild and repackaging of all components
- **Registry Sync**: Fresh npm registry deployment for improved reliability
- **TypeScript Compilation**: Verified all TypeScript compilations and type definitions

#### Validated

- **Component Exports**: Confirmed all component exports are functioning correctly
- **Type Definitions**: Validated all TypeScript types and interfaces
- **Asset Bundling**: Ensured all assets and dependencies are correctly bundled
- **Cross-Platform Support**: Verified compatibility across target platforms

#### Technical

- **Build Process**: Enhanced build process for better reliability
- **Package Structure**: Optimized package structure and file organization
- **Dependency Management**: Enhanced dependency management and bundling
- **Distribution Quality**: Improved package distribution and download stability

## [2.3.8] - 2025-08-21

### 🔧 Enhanced Account Verification Flow

#### Enhanced

- **BankAccountInput Component**: Improved account verification workflow and user experience
- **Account Details Display**: Added conditional rendering for verified account information
- **Button Logic**: Smart button states based on account verification status
- **Flow Optimization**: Better handling of account verification and progression

#### Improved

- **User Experience**: Clearer flow progression between account input and verification
- **Account State Management**: Better handling of verified vs unverified account states
- **Visual Feedback**: Enhanced display of account information when available
- **Flow Control**: Improved navigation logic based on account verification status

#### Technical

- **Conditional Rendering**: Smart UI updates based on account verification state
- **State Management**: Better integration between account input and verification flows
- **Component Logic**: Enhanced button and flow logic for different account states
- **OTPVerification Simplification**: Streamlined OTP component structure

## [2.3.7] - 2025-08-21

### 🔧 UI Polish & Component Refinements

#### Enhanced

- **PaymentMethodSelection Component**: Improved grid layout and styling consistency
- **WalletSelection Component**: Refined wallet selection and interaction patterns
- **NetBanking Component**: Enhanced bank selection grid and responsive behavior

#### Improved

- **Grid Layouts**: Better spacing and alignment across all selection components
- **Visual Consistency**: Unified design language across payment method, wallet, and bank selection
- **User Experience**: Enhanced touch interactions and visual feedback
- **Responsive Design**: Better adaptation to different screen sizes and layouts

#### Technical

- **Component Optimization**: Performance improvements and code refinements
- **Style Consistency**: Unified styling patterns across selection components
- **Layout Calculations**: Improved width calculations and grid responsiveness
- **Code Quality**: Enhanced component structure and maintainability

## [2.3.6] - 2025-08-21

### 🎨 Enhanced Wallet Selection UI

#### Added

- **2-Column Grid Layout**: Redesigned WalletSelection component with modern 2-column grid layout
- **Remote Image Support**: Smart logo handling for both HTTP URLs and fallback text/emoji logos
- **Professional Card Design**: Card-style layout with shadows, rounded corners, and proper spacing
- **Responsive Design**: Dynamic width calculation that adapts to different screen sizes

#### Enhanced

- **Visual Design**: Modern card-based layout similar to NetBanking component styling
- **User Experience**: Clear selection states with blue borders and scale effects
- **Logo Container**: Dedicated 64x64 logo containers with subtle backgrounds and borders
- **Typography**: Improved text hierarchy with proper sizing for names and descriptions

#### Improved

- **Touch Feedback**: Enhanced interaction with activeOpacity and proper touch targets
- **Status Indicators**: Clear selected checkmarks and "Coming Soon" badges positioning
- **Layout Structure**: Professional container with light gray background and rounded corners
- **Spacing Consistency**: Proper margins, padding, and grid spacing throughout

#### Technical

- **Dimensions API**: Dynamic width calculations for responsive 2-column layout
- **Conditional Rendering**: Smart logo rendering for URLs vs text/emoji fallbacks
- **Style Consistency**: Unified design language matching other payment components
- **Performance**: Optimized rendering with proper key props and efficient layouts

## [2.3.5] - 2025-08-20

### 🔧 Enhanced Error Handling & UX Improvements

#### Enhanced

- **BankAccountInput Component**: Improved error handling and user feedback
- **Mutation Error Handling**: Better integration with TanStack Query mutation states
- **Server Error Display**: Enhanced error messaging showing server response details
- **Loading States**: Improved loading state management using mutation pending state

#### Improved

- **Error Messages**: More informative error messages from server responses
- **User Experience**: Better feedback during account verification process
- **Error Logging**: Enhanced error logging with detailed server response data
- **State Management**: Better integration with mutation loading and error states

#### Technical

- **TanStack Query Integration**: Improved usage of mutation error and pending states
- **Error Handling**: Enhanced error catching and display mechanisms
- **Component State**: Better state management for error and loading conditions
- **TypeScript Support**: Maintained type safety with improved error handling

## [2.3.4] - 2025-08-20

### 🔧 Component Refinements & Style Improvements

#### Enhanced

- **BankAccountInput Component**: Updated styling and user experience improvements
- **OTPVerification Component**: Enhanced layout and visual refinements
- **Component Polish**: Manual refinements to improve overall user experience

#### Improved

- **User Interface**: Better visual hierarchy and component styling
- **User Experience**: Enhanced interaction patterns and visual feedback
- **Code Quality**: Component optimizations and refinements

#### Technical

- **Component Maintenance**: Regular updates and improvements to existing components
- **Style Consistency**: Better styling consistency across payment flow components
- **Performance**: Minor optimizations for better component performance

## [2.3.3] - 2025-08-20

### 🎯 Enhanced OTP Verification

#### Added

- **Account Details Display**: OTP verification now shows user's account name and account number
- **Account Information Section**: Added dedicated section displaying verified account details
- **Enhanced User Context**: Users can now see which account they're verifying payment for

#### Improved

- **User Experience**: Better verification flow with account context
- **Visual Design**: Clean account details section with proper styling
- **Information Hierarchy**: Clear separation between bank info and account details

#### Technical

- **Context Integration**: Leverages `accountDetails?.accountName` and `accountDetails?.accountNumber`
- **Conditional Rendering**: Account details only show when both name and number are available
- **Responsive Design**: Consistent styling with the rest of the payment flow

## [2.3.2] - 2025-08-20

### 🔧 Enhanced BankAccountInput Component

#### Improved

- **BankAccountInput Component**: Enhanced user interface and input validation
- **Account Verification Flow**: Improved account verification process with better error handling
- **Input Styling**: Enhanced input field styling and visual feedback
- **Button Styling**: Updated verify button with custom black styling
- **User Experience**: Better visual hierarchy and component layout

#### Technical

- **Component Performance**: Optimized rendering and state management
- **Error Handling**: Improved error state handling and user feedback
- **Input Validation**: Enhanced numeric input validation for account numbers

## [2.3.1] - 2025-08-20

### 🔧 Bug Fixes & Improvements

#### Fixed

- **BankAccountInput Component**: Enhanced input validation and error handling
- **PaymentButton Integration**: Improved context provider integration and state management
- **TypeScript Definitions**: Enhanced type safety and interface definitions
- **Component Performance**: Optimized rendering and state updates

#### Enhanced

- **Development Experience**: Better debugging and error reporting
- **Code Organization**: Improved file structure and component organization
- **Documentation**: Updated inline documentation and code comments

## [2.3.0] - 2025-08-20

### 🎨 SIMPLIFIED CUSTOMIZATION APPROACH

#### Changed

- **PaymentButton Styling Simplified**: Removed 30+ individual customization props in favor of native React Native styling approach
- **Native `style` Prop**: Now supports all TouchableOpacity ViewStyle properties for complete control
- **Native `textStyle` Prop**: Supports all Text TextStyle properties for full text customization
- **Removed Loading Text Customization**: Loading text is no longer customizable - always shows the button text
- **Simplified Interface**: Cleaner, more intuitive API using standard React Native patterns

#### Added

- **Full TouchableOpacity Style Support**: Complete access to all ViewStyle properties
- **Full Text Style Support**: Complete access to all TextStyle properties
- **State-Specific Styling**: `disabledStyle`, `disabledTextStyle`, `loadingStyle` props
- **Enhanced Loading Indicator**: Improved loading indicator with `showLoadingIndicator`, `loadingIndicatorColor`, `loadingIndicatorSize`

#### Removed

- **Individual Style Props**: Removed backgroundColor, borderColor, borderWidth, borderRadius, etc.
- **Text Style Props**: Removed fontSize, fontWeight, textColor, letterSpacing, etc.
- **Loading Text Props**: Removed loadingText, loadingTextColor, loadingTextStyle
- **Complex Variant System**: Removed variant and size prop system
- **Shadow Props**: Now handled through native style prop

#### Migration Guide

```typescript
// Before (v2.2.0)
<PaymentButton
  backgroundColor="#FF6B6B"
  borderColor="#FF5252"
  borderRadius={25}
  textColor="#FFFFFF"
  fontSize={18}
/>

// After (v2.3.0)
<PaymentButton
  style={{
    backgroundColor: "#FF6B6B",
    borderColor: "#FF5252",
    borderRadius: 25,
  }}
  textStyle={{
    color: "#FFFFFF",
    fontSize: 18,
  }}
/>
```

This change provides developers with the familiar React Native styling system while maintaining all the functionality and giving even more control over button appearance.

## [2.2.0] - 2025-08-20

### 🎨 Major PaymentButton Customization Enhancement

- **Complete Style Customization**: PaymentButton now supports extensive customization for every visual aspect

  - **Individual Style Properties**: Granular control over backgroundColor, borderColor, borderWidth, borderRadius, padding, dimensions
  - **Advanced Text Styling**: Full control over fontSize, fontWeight, textColor, textAlign, letterSpacing, lineHeight
  - **Custom Disabled States**: Dedicated styling props for disabled appearance including colors, opacity, and custom styles
  - **Enhanced Loading States**: Customizable loading text, colors, opacity, and optional loading indicator with size/color control
  - **Shadow and Elevation**: Complete shadow customization with shadowColor, shadowOffset, shadowOpacity, shadowRadius, and elevation
  - **Flexible Dimensions**: Support for custom width, height, minHeight with automatic fullWidth handling

- **Enhanced Developer Experience**: Comprehensive customization while maintaining simplicity

  - **Backward Compatibility**: All existing code continues to work unchanged
  - **Custom Variant Support**: New 'custom' variant and size options for complete design freedom
  - **Intelligent Defaults**: Smart fallback to variant/size defaults when custom props are not specified
  - **Style Override Hierarchy**: Logical style application order: defaults → variants → custom props → user styles
  - **TypeScript Support**: Full type safety for all new customization properties

- **Advanced Customization Features**: Professional-grade styling capabilities

  - **Loading Indicator Control**: Optional ActivityIndicator with customizable size and color
  - **State-Specific Styling**: Separate styling for normal, disabled, and loading states
  - **Multi-Level Customization**: Support for both individual properties and complete style objects
  - **Responsive Design Support**: Flexible width/height handling for different screen sizes
  - **Accessibility Maintained**: All customizations preserve accessibility features and labels

### 📚 Documentation and Developer Resources

- **Comprehensive Customization Guide**: New CUSTOMIZATION_GUIDE.md with detailed examples and best practices
- **Migration Examples**: Clear examples showing how to migrate from basic to advanced customization
- **Best Practices**: Guidelines for effective button customization and accessibility considerations
- **Complete API Reference**: Detailed documentation of all 30+ new customization properties

### 🔧 Technical Improvements

- **Enhanced Type System**: Expanded TypeScript interfaces with optional customization properties
- **Optimized Rendering**: Efficient style computation with smart property resolution
- **Performance Optimized**: Minimal re-renders with intelligent style caching
- **Cross-Platform Compatibility**: All customizations work consistently on iOS and Android

### 🎯 New Customization Properties (30+ Options)

#### Main Styling

- `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`
- `paddingVertical`, `paddingHorizontal`, `minHeight`, `width`, `height`

#### Text Styling

- `fontSize`, `fontWeight`, `textColor`, `textAlign`, `letterSpacing`, `lineHeight`

#### Disabled State

- `disabledStyle`, `disabledTextStyle`, `disabledBackgroundColor`, `disabledBorderColor`, `disabledTextColor`, `disabledOpacity`

#### Loading State

- `loadingStyle`, `loadingTextStyle`, `loadingText`, `loadingBackgroundColor`, `loadingTextColor`, `loadingOpacity`
- `showLoadingIndicator`, `loadingIndicatorColor`, `loadingIndicatorSize`

#### Shadow & Elevation

- `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`, `elevation`

### 🔄 Legacy Support

- **Full Backward Compatibility**: All existing `variant`, `size`, `style`, and `textStyle` props continue to work
- **Gradual Migration**: Developers can adopt new features incrementally without breaking changes
- **Enhanced Variants**: Existing variants now work alongside new customization options

## [2.1.7] - 2025-08-20

### 📱 Responsive Design & Mobile Optimization

- **Enhanced Responsive Bank Grid**: Made bank selection grid fully responsive for small mobile screens

  - **Smart Column Detection**: Automatically adjusts between 2-column and 3-column layout based on screen width
  - **Small Screen Support**: Enhanced support for very small screens (iPhone SE, etc.) with 2-column layout
  - **Responsive Width Calculations**: Dynamic bank item width calculation based on screen size and column count
  - **Adaptive UI Elements**: Logo containers and font sizes adjust automatically for optimal viewing

- **Improved Bank Item Sizing**: Better visual adaptation for different screen sizes

  - **Dynamic Bank Item Width**: Bank items automatically resize based on available screen space
  - **Responsive Logo Containers**: Logo containers scale appropriately for smaller screens
  - **Adaptive Text Sizing**: Font sizes adjust for better readability in 2-column layouts
  - **Optimized Spacing**: Better margin and padding calculations for compact screens

- **Enhanced Mobile Experience**: Better usability on small devices

  - **Touch Target Optimization**: Larger touch targets for easier interaction on small screens
  - **Improved Visual Hierarchy**: Better content organization for limited screen space
  - **Adaptive Loading States**: Shimmer loading counts adjust based on column layout
  - **Better Grid Justification**: Smart spacing distribution for both 2-column and 3-column layouts

### 🔧 Technical Improvements

- **Responsive Functions**: Added utility functions for screen size detection and width calculations
- **Dynamic Styling**: Enhanced styling system that adapts to screen dimensions
- **Performance Optimization**: Efficient calculations for responsive layout rendering
- **Cross-Device Compatibility**: Better support for various device sizes and orientations

### 📐 Layout Enhancements

- **Breakpoint System**: Intelligent breakpoints at 350px and 400px screen widths
- **Flexible Grid System**: Grid layout that adapts seamlessly to different screen sizes
- **Optimized Content Density**: Better content organization for space-constrained devices
- **Enhanced Visual Balance**: Improved visual balance across all supported screen sizes

## [2.1.6] - 2025-08-20

### 🔧 Enhanced State Management & Modal Handling

- **Improved PaymentButton Component**: Enhanced modal close handling and state cleanup

  - **Better Modal Close Handler**: Enhanced `handleModalClose` function with proper state cleanup
  - **Enhanced NetBanking Integration**: Better integration with NetBankingProvider context
  - **Improved State Reset**: Added proper cleanup of bank selection and account details on modal close
  - **Enhanced Type Safety**: Added Bank type import for better TypeScript support

- **Better Context Integration**: Enhanced integration with NetBankingProvider

  - **State Cleanup**: Proper reset of selected bank and account details when modal closes
  - **Better Data Flow**: Enhanced data flow between PaymentButton and NetBanking components
  - **Improved User Experience**: Cleaner state management for better user experience
  - **Enhanced Modal Behavior**: Better modal state handling and cleanup

### 🎨 User Experience Improvements

- **Modal State Management**: Better handling of modal open/close states
- **Data Persistence**: Improved data cleanup when users close the payment modal
- **Navigation Flow**: Enhanced navigation experience with proper state reset
- **Error Prevention**: Better error prevention through proper state cleanup

### 🔧 Technical Enhancements

- **Context Integration**: Enhanced integration with NetBankingProvider context
- **State Management**: Better state management and cleanup functionality
- **Type Safety**: Improved TypeScript support with proper type imports
- **Code Organization**: Better separation of concerns and component responsibilities

## [2.1.5] - 2025-08-20

### 🚀 Performance & Code Optimizations

- **Enhanced PaymentButton Component**: Improved loading states and error handling

  - **Better Loading Management**: Enhanced loading state management with external and internal loading states
  - **Improved Button Variants**: Enhanced button styling with better variant handling
  - **Optimized State Management**: Better integration with ZipsProvider context
  - **Enhanced Error Handling**: Improved error propagation and user feedback

- **Optimized NetBanking Component**: Enhanced bank selection with better performance

  - **Improved Bank Grid Layout**: Better three-column grid with optimized calculations
  - **Enhanced Bank Item Rendering**: Optimized bank logo and name display
  - **Better Navigation Flow**: Smoother transitions between bank selection and account input
  - **Improved Error States**: Better error handling and user feedback

- **Enhanced PaymentModal Component**: Better keyboard handling and scroll behavior

  - **Improved KeyboardAvoidingView**: Enhanced keyboard handling across all payment steps
  - **Optimized ScrollView**: Better scroll behavior with proper content management
  - **Better Step Rendering**: Optimized step rendering with improved performance
  - **Enhanced Modal Presentation**: Better modal presentation and closing behavior

- **Refined PaymentMethodSelection**: Enhanced grid layout and selection indicators

  - **Optimized Grid Calculations**: Better two-column grid with improved spacing
  - **Enhanced Selection States**: Better visual feedback for selected payment methods
  - **Improved Touch Targets**: Better accessibility and touch interaction
  - **Optimized Card Sizing**: Better card sizing calculations for different screen sizes

- **Enhanced ZipsProvider Context**: Improved state management and data flow

  - **Better State Initialization**: Improved initial state setup and management
  - **Enhanced Context Safety**: Better error handling for context usage
  - **Optimized State Updates**: More efficient state updates and re-rendering
  - **Improved Reset Functionality**: Better state reset and cleanup functionality

### 🔧 Technical Improvements

- **Code Organization**: Better component structure and separation of concerns
- **Performance Optimization**: Reduced unnecessary re-renders and improved efficiency
- **Type Safety**: Enhanced TypeScript definitions and better type checking
- **Error Boundaries**: Better error handling and graceful degradation

### 🎨 Visual Enhancements

- **Consistent Styling**: Better styling consistency across all components
- **Enhanced Animations**: Smoother transitions and better user experience
- **Improved Accessibility**: Better screen reader support and keyboard navigation
- **Responsive Design**: Better adaptation to different screen sizes and orientations

## [2.1.4] - 2025-08-20

### 🎨 UI & Component Updates

- **Enhanced PaymentHeader**: Improved header design and branding

  - **ZIPS Gateway branding**: Updated header with logo and gateway title
  - **Sandbox indicator**: Clear visual distinction for sandbox environment
  - **Better close button**: Enhanced close button design and accessibility
  - **Improved amount display**: Better typography and layout for payment amount
  - **Professional styling**: Enhanced visual hierarchy and spacing

- **Component Refinements**: Minor improvements and optimizations

  - **PaymentMethodSelection**: Continued grid layout optimizations
  - **OTPVerification**: Enhanced user experience refinements
  - **Better consistency**: Improved styling consistency across components

### 🔧 Technical Improvements

- **Logo Integration**: Proper logo asset handling and display
- **Environment Indicators**: Clear visual feedback for sandbox vs production
- **Enhanced Accessibility**: Better touch targets and screen reader support

## [2.1.3] - 2025-08-20

### ⌨️ Enhanced Keyboard & Input Handling

- **Improved OTP Verification**: Fixed backspace functionality and enhanced user experience

  - **Fixed handleKeyPress function**: Proper backspace handling for clearing digits
  - **Enhanced navigation**: Smart focus management between OTP input fields
  - **Better validation**: Numeric-only input with visual feedback
  - **Improved styling**: Visual states for filled vs empty OTP fields
  - **Auto-focus behavior**: Seamless navigation between input fields

- **Enhanced Bank Account Input**: Better numeric input validation

  - **Numeric-only validation**: Automatic filtering of non-numeric characters
  - **Improved keyboard behavior**: Proper return key and blur handling
  - **Better focus management**: Enhanced user interaction flow

- **Improved Card Input Forms**: Enhanced keyboard navigation

  - **Smart return key handling**: Next/Done buttons for smooth field navigation
  - **Auto-correct disabled**: Prevents unwanted text corrections on card details
  - **Better focus flow**: Improved transition between card number, expiry, CVV, and name fields
  - **Enhanced validation**: Real-time formatting and validation feedback

- **Enhanced Wallet Input**: Better phone number and PIN input handling

  - **Numeric validation**: Automatic filtering for phone numbers and PINs
  - **Improved keyboard types**: Optimized keyboard layouts for each field
  - **Better return key behavior**: Smooth navigation between fields

- **Enhanced KeyboardAvoidingView**: Better keyboard handling across all screens

  - **Platform-specific behavior**: Optimized for both iOS and Android
  - **Keyboard offset adjustment**: Better content visibility when keyboard is open
  - **Scroll behavior**: Enhanced scrolling with keyboard interactions

### 🎨 Visual & UX Improvements

- **OTP Input Visual States**: Enhanced feedback for user interactions
- **Better Input Focus States**: Clear visual indicators for active input fields
- **Improved Error Handling**: Better error states and validation feedback
- **Enhanced Accessibility**: Better screen reader support and keyboard navigation

## [2.1.2] - 2025-08-20

### 🔧 Grid Layout & Shimmer Fixes

- **Fixed PaymentMethodSelection Two-Column Grid**: Resolved single column display issue

  - **Corrected width calculations**: Account for parent container padding
  - **Removed duplicate padding**: Eliminated conflicting padding between components
  - **Optimized spacing**: Better visual alignment for two-column layout
  - **Formula**: `width: (screenWidth - 40) / 2` to account for PaymentModal padding

- **Fixed BankShimmer Three-Column Layout**: Aligned shimmer with actual bank grid

  - **Matched bank item calculations**: `width: (screenWidth - 112) / 3`
  - **Synchronized styling**: Shimmer items now match real bank item appearance
  - **Improved visual consistency**: Loading state reflects actual content layout
  - **Better user experience**: Realistic loading placeholders

### 🎨 Visual Improvements

- **Consistent Grid Layouts**: All grid components now display proper column counts
- **Enhanced Loading States**: Shimmer animations match actual content structure
- **Better Responsive Design**: Improved adaptation to different screen sizes

## [2.1.1] - 2025-08-20

### 🐛 Grid Layout & Navigation Fixes

- **Fixed PaymentMethodSelection Grid**: Resolved two-column grid layout issue

  - **Removed conflicting gap property**: Grid now properly displays two columns
  - **Optimized width calculations**: Better spacing for payment method cards
  - **Improved container padding**: Enhanced visual alignment

- **Fixed ScrollView Behavior**: Enhanced PaymentModal scrolling experience

  - **Simplified ScrollView logic**: Consistent scrolling across all steps
  - **Better content padding**: Improved spacing and visual hierarchy
  - **Enhanced keyboard handling**: Better user experience with keyboard interactions

- **Enhanced Bank Selection Flow**: Automatic navigation after bank selection

  - **Auto-navigation**: Automatically moves to account input after bank selection
  - **Visual feedback**: 300ms delay for better user experience
  - **Improved bank grid**: Better three-column layout without gap conflicts

### 🔧 Technical Improvements

- **Grid Layout Optimization**: Fixed flexbox calculations for proper multi-column layouts
- **Navigation Flow**: Smoother transitions between payment steps
- **Responsive Design**: Better adaptation to different screen sizes

## [2.1.0] - 2025-08-20

### 🎨 UI/UX Improvements & Bank Integration

- **Enhanced Bank Selection Interface**: Complete redesign of NetBanking component

  - **Updated Bank Type Structure**: Aligned with API response format

    - Added `bankName`, `bankLogo`, `location` fields
    - Maintained backward compatibility with legacy `name` and `logo` fields
    - Enhanced type safety with proper TypeScript definitions

  - **Improved Grid Layout**: Better bank selection UI
    - Three-column responsive grid layout with proper spacing
    - Enhanced visual hierarchy with improved typography
    - Better touch targets and selection indicators
    - Added bank location display for better context

- **Shimmer Loading States**: Professional loading experience

  - **BankShimmer Component**: Realistic loading placeholders for bank selection
  - **PaymentMethodShimmer**: Loading states for payment method selection
  - Smooth animation effects with proper opacity transitions
  - Responsive design matching actual content layout

- **Enhanced Payment Method Selection**: Improved grid layout

  - Better spacing and typography for payment method cards
  - Increased card size and improved visual hierarchy
  - Enhanced selection indicators and hover states
  - Improved responsive design across different screen sizes

- **Error Handling**: Better user experience for failed states

  - Elegant error messages for bank loading failures
  - Clear feedback when network requests fail
  - Improved user guidance for retry actions

### 🔧 Technical Improvements

- **Type Safety**: Enhanced TypeScript integration

  - Updated Bank interface to match API response structure
  - Better type checking and IDE support
  - Improved developer experience with proper type definitions

- **Component Architecture**: Better separation of concerns
  - Reusable shimmer loader components
  - Improved component composition and modularity
  - Better state management integration

## [2.0.9] - 2025-08-20

### 🚀 Enhanced Redeployment

- **Updated Component Distribution**: Latest version deployment with all recent enhancements

  - Fresh compilation of all React Native components
  - Updated TypeScript definitions and type exports
  - Enhanced component reliability and performance
  - Optimized package distribution for better availability

- **Build System Improvements**: Enhanced compilation and packaging process

  - Verified all component dependencies and exports
  - Improved build consistency and reliability
  - Enhanced error handling and validation
  - Optimized package size and structure

- **Quality Enhancement**: Comprehensive testing and validation
  - Verified all payment flow components
  - Confirmed cross-platform compatibility
  - Enhanced component integration and interaction
  - Improved overall SDK stability and performance

### 🛠️ Technical Updates

- **Component Integrity**: All payment components verified and optimized
- **Type Safety**: Enhanced TypeScript definitions and exports
- **Asset Management**: Improved resource bundling and distribution
- **Platform Support**: Confirmed iOS and Android compatibility

### 📦 Distribution Quality

- **Registry Sync**: Fresh npm registry deployment
- **Package Optimization**: Enhanced download reliability and speed
- **Version Consistency**: Proper semantic versioning and changelog updates
- **Developer Experience**: Improved installation and integration process

## [2.0.8] - 2025-08-20

### 🔄 Redeployment & Stability

- **Package Redeployment**: Fresh deployment to ensure all components are properly distributed

  - Complete rebuild and repackaging of all components
  - Verified all TypeScript compilations and type definitions
  - Ensured all assets and dependencies are correctly bundled
  - Fresh npm registry deployment for improved reliability

- **Quality Assurance**: Comprehensive verification of package integrity

  - Confirmed all component exports are functioning correctly
  - Validated all TypeScript types and interfaces
  - Verified all styling and layout implementations
  - Ensured cross-platform compatibility and performance

- **Deployment Optimization**: Enhanced package distribution
  - Optimized build process for better reliability
  - Improved package structure and file organization
  - Enhanced dependency management and bundling
  - Better npm registry synchronization

### 🛠️ Technical Verification

- **Build System**: Confirmed successful compilation without errors
- **Type Safety**: Validated all TypeScript definitions and exports
- **Component Integrity**: Verified all payment components are properly packaged
- **Asset Management**: Ensured all assets and resources are correctly included

### 📦 Package Quality

- **Distribution**: Fresh npm package deployment for optimal availability
- **Reliability**: Enhanced package integrity and download stability
- **Compatibility**: Confirmed support across all target platforms
- **Performance**: Optimized package size and loading efficiency

## [2.0.7] - 2025-08-19

### 🎨 Optimized Grid Layout

- **Simplified Gap Implementation**: Streamlined grid spacing for better performance

  - Removed complex `rowGap` and `columnGap` properties for broader compatibility
  - Maintained consistent spacing with optimized `gap: 12` implementation
  - Kept `marginBottom: 16` for reliable cross-platform spacing
  - Enhanced visual consistency across all devices and React Native versions

- **Performance Optimization**: Improved grid rendering efficiency

  - Simplified CSS properties for faster rendering
  - Better memory management with streamlined styling
  - Enhanced compatibility across different React Native versions
  - Optimized for both iOS and Android platforms

- **Cross-Platform Consistency**: Ensured uniform behavior across devices
  - Verified spacing consistency on different screen sizes
  - Enhanced responsive behavior for various orientations
  - Improved touch target accessibility and interaction
  - Optimized visual balance and card distribution

### 🛠️ Technical Improvements

- **Code Optimization**: Cleaner and more maintainable styling approach
- **Compatibility**: Enhanced support for different React Native versions
- **Performance**: Faster grid rendering with simplified properties

### 🔧 Build & Quality

- **Compilation**: Verified successful build with optimized implementation
- **Cross-Platform**: Tested compatibility across iOS and Android
- **Performance**: Enhanced grid rendering efficiency

## [2.0.6] - 2025-08-19

### 🎨 Final Grid Layout Polish

- **Perfected Grid Spacing**: Final refinements to the two-column grid layout

  - Enhanced gap properties implementation for consistent spacing
  - Optimized `rowGap` and `columnGap` for perfect visual alignment
  - Removed redundant spacing properties in favor of modern gap-based approach
  - Final polish on card distribution and visual balance

- **ScrollView Optimization**: Finalized scrolling behavior improvements

  - Maintained optimal conditional ScrollView implementation
  - Enhanced keyboard interaction and content management
  - Perfected content container styling for consistent user experience
  - Final optimization of scroll indicators and performance

- **Visual Polish**: Final touches to design system consistency
  - Perfect spacing calculations across all grid components
  - Optimized visual hierarchy with consistent gap-based spacing
  - Enhanced responsive behavior for all screen sizes and orientations
  - Final refinement of touch targets and interaction areas

### 🛠️ Technical Finalizations

- **Layout System**: Completed CSS Grid-like behavior with gap properties
- **Performance**: Final optimization of grid rendering and spacing calculations
- **Code Quality**: Polished styling approach with modern layout techniques

### 🔧 Build & Release

- **Compilation**: Verified successful build with all enhancements
- **Type Safety**: Enhanced TypeScript support with improved definitions
- **Quality Assurance**: Final code review and optimization

## [2.0.5] - 2025-08-19

### 🎨 Enhanced Grid Layout & Spacing

- **Improved Grid Layout**: Enhanced two-column grid with better spacing and visual consistency

  - Added CSS `gap` properties for consistent spacing between grid items
  - Enhanced `rowGap: 12` and `columnGap: 12` for perfect grid alignment
  - Removed redundant `marginBottom` in favor of gap-based spacing
  - Better visual balance with improved card distribution

- **Refined ScrollView Implementation**: Further optimized scrolling behavior

  - Maintained conditional ScrollView for optimal performance
  - Enhanced keyboard interaction handling
  - Improved content container styling with consistent spacing
  - Better scroll indicators and user experience optimization

- **Visual Consistency Improvements**: Enhanced design system consistency
  - Better spacing calculations across all grid elements
  - Improved visual hierarchy with consistent gap spacing
  - Enhanced responsive behavior for different screen sizes
  - Optimized touch targets and interaction areas

### 🛠️ Technical Refinements

- **Layout System**: Enhanced CSS Grid-like behavior with gap properties
- **Performance**: Optimized grid rendering with better spacing calculations
- **Code Quality**: Cleaner styling approach with modern layout techniques

### 🔧 Developer Experience

- **Maintainability**: Simplified spacing system with gap-based layouts
- **Consistency**: Unified spacing approach across grid components
- **Build Quality**: Verified compilation success with enhanced TypeScript support

## [2.0.4] - 2025-08-19

### 🎨 Major UI Layout Improvements

- **Two-Column Grid Payment Methods**: Redesigned PaymentMethodSelection with modern grid layout

  - Replaced horizontal scrolling with responsive two-column grid
  - Better space utilization and improved visual balance
  - Enhanced card sizing with dynamic width calculation
  - Improved accessibility and touch targets

- **Enhanced PaymentModal ScrollView**: Optimized scrolling behavior and content management

  - Conditional ScrollView for better performance on method selection
  - Added proper keyboard handling with `keyboardShouldPersistTaps="handled"`
  - Improved content container styling for better spacing
  - Enhanced scroll indicators and user experience

- **Responsive Design Improvements**: Better adaptation to different screen sizes
  - Dynamic card width calculation: `(screenWidth - 64) / 2`
  - Improved padding and spacing across components
  - Better visual hierarchy and content organization

### 🛠️ Technical Enhancements

- **Component Architecture**: Cleaner separation between scrollable and non-scrollable content
- **Performance Optimization**: Conditional rendering to prevent unnecessary ScrollView nesting
- **Layout Management**: Better handling of keyboard interactions and content flow

### 🔧 Developer Experience

- **Code Structure**: Simplified component layout with cleaner styling approach
- **Maintainability**: Better organized styles and component structure
- **Build Process**: Verified compilation success with enhanced TypeScript support

## [2.0.3] - 2025-08-19

### 🎨 UI/UX Enhancements

- **Enhanced PaymentModal Navigation**: Improved modal flow with better step management

  - Added proper method selection step handling
  - Enhanced ScrollView wrapper for better content scrolling
  - Improved keyboard handling and layout adjustments

- **Card Input Improvements**: Enhanced card payment form experience

  - Better input validation and formatting
  - Improved user interaction and form handling
  - Enhanced error states and validation feedback

- **Wallet Input Enhancements**: Improved wallet payment flow

  - Better input validation for wallet providers
  - Enhanced user experience with improved forms
  - Better error handling and user feedback

- **Card Confirmation Updates**: Enhanced payment confirmation flow

  - Improved confirmation screen layout
  - Better payment summary display
  - Enhanced user confirmation experience

- **Wallet Selection Improvements**: Better wallet provider selection
  - Enhanced wallet provider cards and selection
  - Improved visual feedback and user interaction
  - Better responsive design for different screen sizes

### 🛠️ Technical Improvements

- **Component Architecture**: Better separation of concerns across payment components
- **State Management**: Improved context usage and state flow
- **Performance Optimizations**: Enhanced rendering and reduced unnecessary re-renders

### 🔧 Developer Experience

- **Code Quality**: Improved code structure and maintainability
- **Type Safety**: Enhanced TypeScript definitions and interfaces
- **Build Process**: Better compilation and error handling

## [2.0.2] - 2025-08-19

### 🎨 UI/UX Improvements

- **Enhanced PaymentMethodSelection**: Redesigned payment method selection with horizontal scrollable cards

  - Modern card-based layout with dynamic width based on screen size
  - Improved visual hierarchy with better spacing and typography
  - Added selection indicators with smooth scaling effects
  - Better mobile responsiveness with optimized touch targets

- **Improved PaymentModal Layout**: Enhanced modal design for better user experience
  - Reduced horizontal padding for more screen real estate
  - Better content spacing and visual balance
  - Improved keyboard handling and layout adjustments

### 🛠️ Technical Improvements

- **Enhanced Type Definitions**: Improved TypeScript interfaces for better developer experience
- **Component Architecture**: Better separation of concerns in payment components
- **Performance Optimizations**: Reduced re-renders and improved component efficiency

### 🔧 Developer Experience

- **Better Documentation**: Updated component props and usage examples
- **Improved Build Process**: Enhanced compilation and type checking
- **Code Quality**: Better linting and formatting consistency

## [2.0.1] - 2025-08-19

### 🐛 Bug Fixes

- **Critical PaymentButton Fix**: Resolved issue where `useZipsContext` hook was being called outside the Zips provider
  - Split PaymentButton into wrapper and inner components
  - Fixed provider context scope to ensure hooks are called within provider tree
  - Prevented runtime errors when components are used without proper provider setup
  - Improved error handling for context usage validation

### 🛠️ Technical Improvements

- **Component Architecture**: Enhanced PaymentButton with proper provider/consumer pattern
- **Context Safety**: Ensured all context hooks are called within appropriate provider scope
- **Build Validation**: Verified compilation success with no TypeScript errors after fixes

### 🔧 Developer Experience

- **Better Error Messages**: Improved error handling for missing provider setup
- **Provider Architecture**: Clearer separation between provider wrapper and consumer components
- **Type Safety**: Enhanced TypeScript support for provider/consumer patterns

## [2.0.0] - 2025-08-19

### 🎉 Major Release: Context Architecture & Advanced State Management

### 🚨 Breaking Changes

- **Context-Based Architecture**: Complete redesign with React Context API
  - New provider-based architecture for better state management
  - Breaking change: Components now require provider wrapping
  - Enhanced component isolation and reusability

### ✨ Added

- **React Query Integration**: Added @tanstack/react-query for data fetching

  - Advanced caching and synchronization capabilities
  - Automatic background refetching and error handling
  - Optimistic updates and offline support
  - Query client configuration with proper defaults

- **Context Providers**: Comprehensive context system

  - `ZipsProvider`: Main application state management
  - `NetBankingProvider`: Banking payment flow state
  - `WalletProvider`: Wallet payment management
  - `CardProvider`: Card payment processing state
  - Each provider manages specific payment method logic

- **TypeScript SDK Integration**: Native integration with zips-typescript-sdk

  - Server-side functionality accessible from React Native
  - Type-safe API interactions
  - Unified payment processing across platforms

- **Enhanced Type System**: Improved TypeScript definitions

  - Better type safety across all components
  - Enhanced IntelliSense support
  - Proper generic type constraints

- **Constants System**: Organized constant definitions
  - `paymentMethods.ts`: Payment method configurations
  - `wallets.ts`: Wallet provider definitions
  - Centralized configuration management

### 🛠️ Changed

- **State Management**: Migrated from prop drilling to Context API

  - Global state accessible across all components
  - Improved performance with selective context consumption
  - Better debugging and development experience

- **Component Architecture**: Enhanced component design
  - Provider-wrapped components for better isolation
  - Improved error boundaries and error handling
  - Enhanced component reusability

### 📦 Dependencies

- **Added**: `@tanstack/react-query@^5.85.3` for advanced data fetching
- **Added**: `zips-typescript-sdk@^1.1.0` for server-side integration
- **Added**: `@types/react-redux@^7.1.34` for Redux type support

### 🔧 Fixed

- **PaymentSuccess Component**: Fixed context data access
  - Updated to use `transactionDetails` from context
  - Proper error handling for missing transaction data

### 📚 Migration Guide

#### From v1.x to v2.0.0

**Provider Setup (Required)**:

```tsx
// Wrap your app with providers
import {
  ZipsProvider,
  NetBankingProvider,
  WalletProvider,
  CardProvider,
} from 'zips-react-native-sdk-test';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from 'zips-react-native-sdk-test/tanstack-query';

<QueryClientProvider client={queryClient}>
  <ZipsProvider>
    <NetBankingProvider>
      <WalletProvider>
        <CardProvider>
          <YourApp />
        </CardProvider>
      </WalletProvider>
    </NetBankingProvider>
  </ZipsProvider>
</QueryClientProvider>;
```

**Context Usage**:

```tsx
// Access state via hooks
import { useZipsContext } from 'zips-react-native-sdk-test';

const { paymentDetails, setPaymentDetails, isLoading } = useZipsContext();
```

### 🚀 Performance Improvements

- **Selective Re-rendering**: Context-based updates only affect consuming components
- **Query Optimization**: Intelligent caching reduces API calls
- **Bundle Optimization**: Tree-shakable imports for smaller bundle size

## [1.9.0] - 2025-08-18

### 🎉 Major Updates: HTTP Client & Currency Standardization

### ✨ Added

- **Axios Integration**: Added axios as HTTP client for enhanced API communication
  - Better error handling and request/response interceptors
  - Improved network reliability and timeout management
  - Standardized HTTP client across all payment operations

### 🛠️ Changed

- **Default Currency Standardization**: Set GMD as the default currency across all components
  - Added `getDefaultCurrency()` helper utility function
  - Updated all payment components to use GMD as fallback currency
  - Enhanced currency type safety with optional currency fields
- **Complete Tailwind Removal**: Eliminated all Tailwind/NativeWind dependencies
  - Removed `tailwind.config.js` configuration file
  - Updated documentation to reflect pure React Native styling approach
  - Cleaner package with no external styling dependencies

### 🔧 Fixed

- **TypeScript Improvements**: Enhanced type safety for optional currency fields
- **Build Optimization**: Reduced bundle size by removing Tailwind dependencies

### 📚 Documentation

- **Updated README**: Reflected new pure React Native styling approach
- **Migration Guide**: Updated for new currency defaults and styling approach

## [1.6.0] - 2025-08-14

### 🎉 Major Feature Addition: Digital Wallet Payments

### ✨ Added

- **Complete Wallet Payment System**: Full-featured wallet payment integration with AfrMoney and ZApp
- **WalletSelection Component**: Modern wallet provider selection screen
  - AfrMoney wallet support with logo and description
  - ZApp wallet support with logo and description
  - Clean, intuitive wallet selection interface
  - Coming soon indicators for future wallet providers
- **WalletInput Component**: Comprehensive wallet details input form
  - Gambian phone number validation (+220 + 7 digits)
  - Secure PIN input with masking
  - Real-time form validation and error feedback
  - Wallet-specific instructions and messaging
  - Professional loading states and error handling
- **WalletConfirmation Component**: Secure payment review screen
  - Masked phone number display for privacy
  - Payment amount confirmation with currency formatting
  - Wallet-specific payment flow messaging
  - Security notices and help information
- **Enhanced PaymentModal Integration**: Seamless wallet flow integration
  - New PaymentFlowStep types: 'wallet-selection', 'wallet-input', 'wallet-confirmation'
  - Wallet-specific state management and navigation
  - Proper error handling and loading states for wallet payments
- **WalletData and Wallet Interfaces**: Comprehensive TypeScript support

### 🏦 Wallet Providers Supported

- **AfrMoney**: Digital wallet for African payments with PIN authentication
- **ZApp**: Fast and secure mobile payments with PIN authentication

### 🔄 Enhanced Payment Flow

- **Unified Payment Methods**: Wallet payments now available alongside netbanking and card payments
- **Wallet-Specific Validation**: Custom validation rules for each wallet provider
- **Secure Authentication**: PIN-based authentication for wallet transactions
- **Payment Confirmation**: Comprehensive review screen with masked sensitive data

### 🎨 UI/UX Improvements

- **Professional Wallet Interface**: Modern, clean wallet selection and input forms
- **Real-time Validation**: Instant feedback on phone number and PIN validation
- **Loading States**: Beautiful shimmer effects during wallet validation and processing
- **Security Messaging**: Clear security notices and help information
- **Responsive Design**: Optimized for all screen sizes and orientations

### 🛠️ Technical Enhancements

- **TypeScript Integration**: Full type safety with WalletData and Wallet interfaces
- **State Management**: Wallet data state integrated into existing PaymentModal architecture
- **Error Handling**: Comprehensive validation and error display system for wallet payments
- **Navigation Flow**: Proper back/forward navigation between wallet payment steps
- **Payment Processing**: Wallet payment simula