Skip to main content

Parent Transactions

📋 Overview​

The Parent Transactions feature provides a comprehensive view of all financial transactions made by parents, including appointment bookings and subscription purchases. Parents can view transaction history, filter transactions, and generate detailed receipts for successful payments.

🏗️ Architecture​

Core Components​

  • ParentTransactions.tsx: Main transaction listing screen
  • TransactionCard: Individual transaction display component
  • ParentTransactionsFilter: Advanced filtering modal
  • Invoice Generation: PDF receipt creation system

Data Flow​

Parent Transactions Screen
├── Transaction List (FlatList)
├── Filter Modal (BottomSheet)
├── Invoice Generation (PDF)
└── Transaction Details (Navigation)

🧭 Navigation Flow​

Transaction Access​

  • Entry Point: Parent Profile → Transactions
  • Navigation: parent/transactions route
  • Back Navigation: Returns to previous screen
  • Filter Access: Header filter icon opens bottom sheet

Transaction Details Flow​

  • Transaction Card Tap: Opens invoice generation
  • Successful Payments: Generates PDF receipt
  • Failed Payments: Shows error message
  • PDF Viewer: Navigates to parent/view-report

💳 Transaction Management​

Transaction Data Fetching​

Initial Data Load:

  • Fetches transactions with pagination (10 items per page)
  • Uses GraphQL query with cache-and-network policy
  • Implements infinite scroll for large transaction lists
  • Handles loading states and error scenarios

Data Structure:

  • Payment Status: Successful, Failed, Refunded, Pending, Expired
  • Payment Types: Appointment, Subscription, Refund
  • Transaction Details: Amount, date, method, invoice ID
  • Related Data: Child info, therapist info, subscription details
// ParentTransactions.tsx - Transaction data fetching with pagination
const ParentTransactions = ({ navigation }) => {
  const [offset, setOffset] = useState(0);
  const ITEMS_PER_PAGE = 10;

  const data = useGetParentTransactionsQuery({
    variables: {
      offset: 0,
      whereCondition: { status: { _is_null: false } },
      limit: ITEMS_PER_PAGE,
    },
    notifyOnNetworkStatusChange: false,
    fetchPolicy: 'cache-and-network',
  });

  const { data: transactionsData, loading, error, refetch, fetchMore } = data;
};

Transaction Display Logic​

Transaction Card Information:

  • Amount: Transaction amount with currency formatting
  • Status: Visual status indicator
  • Date: Transaction timestamp with formatted display
  • Type: Appointment or Subscription transaction
  • Details: Child name, therapist name, or subscription plan
  • Method: Payment method (App Store, Google Play, etc.)

Status-Based Display:

  • Successful: Green status, clickable for invoice
  • Failed: Red status, non-clickable
  • Pending: Yellow status, non-clickable
  • Refunded: Blue status, clickable for refund receipt
// Transaction card rendering with status-based logic
const renderTransactionCard = (transaction) => {
  const isSuccessful = transaction?.status === Payment_Status_Enum.Successful;
  const isClickable = isSuccessful;
  
  return (
    <TouchableOpacity
      onPress={() => {
        if (isSuccessful) {
          generateInvoice(transaction);
        } else {
          toast.show({ text: t('invoiceNotAvailable') });
        }
      }}
      disabled={!isClickable}
    >
      <TransactionCard
        amount={transaction?.amount}
        status={transaction?.status}
        transactionType={transaction?.type}
        // Additional transaction details...
      />
    </TouchableOpacity>
  );
};

🔍 Advanced Filtering System​

Filter Categories​

Status Filtering:

  • Successful: Completed payments
  • Failed: Failed payment attempts
  • Refunded: Refunded transactions
  • Pending: Pending payment status
  • Expired: Expired payment links

Type Filtering:

  • Appointments: Therapy session payments
  • Subscriptions: Subscription plan payments

Date Range Filtering:

  • From Date: Start date for transaction search
  • To Date: End date for transaction search
  • Date Validation: Ensures logical date ranges

Filter Implementation Logic​

Filter State Management:

  • Maintains filter state across component lifecycle
  • Applies filters to GraphQL query variables
  • Handles complex filter combinations
  • Resets filters to default state

Filter Application Process:

  • Single Filter: Applies individual filter criteria
  • Multiple Filters: Combines filter conditions with AND logic
  • Date Range: Filters transactions within specified date range
  • Status + Type: Combines payment status and transaction type
  • All Filters: Applies status, type, and date range simultaneously
// ParentTransactionsFilter.tsx - Filter application logic
const applyFilters = () => {
  let localFilter = { status: { _is_null: false } };
  const { status, type, dateRange } = filter;

  // Complex filter combination logic
  if (type.length > 0 && status.length > 0) {
    localFilter = {
      type: { _in: type },
      status: { _in: status },
    };
  } else if (status.length > 0) {
    localFilter = { status: { _in: status } };
  } else if (type.length > 0) {
    localFilter = {
      type: { _in: type },
      status: { _is_null: false },
    };
  } else if (dateRange.from && dateRange.to) {
    localFilter = {
      updated_at: { _gte: dateRange.from, _lte: dateRange.to },
      status: { _is_null: false },
    };
  }

  refetch({ whereCondition: localFilter });
};

📄 Invoice Generation System​

Invoice Creation Process​

Invoice Generation Logic:

  • Successful Payments Only: Only successful transactions can generate invoices
  • PDF Creation: Uses react-native-html-to-pdf for PDF generation
  • HTML Template: Custom HTML template with company branding
  • Data Processing: Extracts transaction details for invoice content

Invoice Content Structure:

  • Header: Company information and logo
  • Transaction Details: Invoice ID, date, payment method
  • Child Information: Child name and parent details
  • Billing Breakdown: Service fees, taxes, platform charges
  • Total Amount: Final amount with currency formatting

Invoice Data Processing​

Transaction Type Detection:

  • Appointment Transactions: Extracts appointment-specific data
  • Subscription Transactions: Extracts subscription-specific data
  • Refund Transactions: Handles refund-specific invoice generation
  • Data Validation: Ensures all required fields are present

Billing Information Extraction:

  • Service Fee: Platform service charges
  • Taxes: GST and other applicable taxes
  • Other Charges: Additional fees and discounts
  • Platform Charges: Platform-specific fees
  • Refund Amount: Refund calculations for cancelled transactions
// Invoice generation with comprehensive data processing
const generateInvoice = async (transactionDetails) => {
  const transactionType = transactionDetails.type === 'APPOINTMENT' 
    ? 'Appointment' : 'Subscription';
  
  const isRefund = transactionDetails?.type === Payment_Type_Enum.AppointmentRefund ||
                   transactionDetails?.status === 'REFUNDED';
  
  const isSubscriptionPayment = transactionDetails?.type !== Payment_Type_Enum.Appointment &&
                                transactionDetails?.type !== 'APPOINTMENT_REFUND';

  // Extract transaction-specific data
  let invoiceId, childName, permAddress, issuedTo, taxes, otherCharges = [];
  let serviceFee, mainFee, serviceName, platformCharges, gst, netTotal = 0;
  let refundAmount = 0, cancelledBy = '', cancellationCharges = 0;

  if (isSubscriptionPayment) {
    // Subscription-specific data extraction
    const sub = transactionDetails?.child_subscription_payments?.[0]?.child_subscription;
    invoiceId = transactionDetails?.invoice_id;
    childName = sub?.child?.name;
    // Additional subscription data processing...
  } else {
    // Appointment-specific data extraction
    const appt = transactionDetails?.appointment_payments?.[0]?.appointment;
    invoiceId = transactionDetails?.appointment_payments?.[0]?.payment?.invoice_id;
    childName = appt?.child?.name;
    // Additional appointment data processing...
  }
};

PDF Generation Process​

HTML Template Creation:

  • Responsive Design: Mobile-optimized invoice layout
  • Company Branding: Logo and company information
  • Professional Styling: Clean, professional invoice design
  • Print Optimization: Optimized for PDF generation

Content Generation:

  • Dynamic Content: Transaction-specific information
  • Billing Tables: Itemized billing breakdown
  • Footer Information: Company contact details
  • Legal Text: Computer-generated invoice disclaimer

PDF Options:

  • File Naming: Uses invoice ID or transaction ID
  • Base64 Encoding: Enables PDF sharing and storage
  • File Path: Returns generated PDF file path
  • Navigation: Opens PDF in viewer screen
// PDF generation with HTML template and options
const html = `<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>${isRefund ? 'Refund Receipt' : 'Invoice'} - Communicaids</title>
    <style>
        /* Professional invoice styling */
        .invoice-container { display: flex; flex-direction: column; min-height: 100vh; }
        .invoice-header { background-color: ${isRefund ? '#fff5f5' : '#f8f9fa'}; }
        .total-section { background-color: ${isRefund ? '#fef2f2' : '#f8f9fa'}; }
        /* Additional CSS styling... */
    </style>
</head>
<body>
    <div class="invoice-container">
        <!-- Invoice header with company info -->
        <!-- Transaction details -->
        <!-- Billing breakdown table -->
        <!-- Footer with contact information -->
    </div>
</body>
</html>`;

const options = {
  html: html,
  fileName: fileName + '.pdf',
  base64: true,
};

const file = await RNHTMLtoPDF.convert(options);
if (file?.filePath) {
  navigation.navigate('parent/view-report', {
    uri: file?.filePath,
    name: fileName + '.pdf',
    base64: file.base64,
  });
}

🔄 Data Refresh and Pagination​

Pull-to-Refresh Implementation​

Refresh Logic:

  • Pull Gesture: Triggers data refresh on pull-down
  • Loading State: Shows refresh indicator during data fetch
  • Error Handling: Handles refresh failures gracefully
  • State Reset: Resets pagination offset on refresh

Refresh Process:

  • Resets offset to 0 for fresh data load
  • Triggers GraphQL refetch with current filters
  • Updates loading state during refresh
  • Maintains filter state across refresh
// Pull-to-refresh implementation
const onRefresh = () => {
  setOffset(0);
  setRefreshing(true);
  refetch().then(() => {
    setRefreshing(false);
  });
};

Infinite Scroll Pagination​

Load More Logic:

  • Threshold Detection: Triggers load more at 50% scroll
  • Pagination Control: Prevents loading when filters applied
  • Offset Management: Tracks current pagination offset
  • Data Merging: Appends new data to existing list

Pagination Constraints:

  • Filter Restrictions: Disables pagination when filters active
  • Data Validation: Ensures sufficient data for pagination
  • Loading States: Prevents multiple simultaneous loads
  • Error Handling: Handles pagination failures
// Infinite scroll pagination with filter constraints
const loadMore = useCallback(() => {
  if (
    transactionsData &&
    (transactionsData?.transactions_count?.aggregate?.count ?? 0) > offset + ITEMS_PER_PAGE
  ) {
    setOffset(prev => prev + ITEMS_PER_PAGE);
    fetchMore({
      variables: {
        offset: offset + ITEMS_PER_PAGE,
        whereCondition,
        limit: ITEMS_PER_PAGE,
      },
    });
  }
}, [fetchMore, offset, transactionsData, whereCondition]);

// Pagination control based on filter state
let loadMoreAllowed = true;
if (filter?.status?.length > 0 || filter?.type?.length > 0 || 
    filter?.dateRange?.from || filter?.dateRange?.to) {
  loadMoreAllowed = false;
}

🎯 Transaction Status Management​

Status-Based Functionality​

Successful Transactions:

  • Invoice Generation: Can generate PDF receipts
  • Clickable Cards: Interactive transaction cards
  • Full Details: Complete transaction information
  • Receipt Access: PDF viewer navigation

Failed Transactions:

  • No Invoice: Cannot generate receipts
  • Error Message: Shows "Invoice not available" message
  • Non-Interactive: Cards are not clickable
  • Status Display: Clear failed status indication

Pending Transactions:

  • Awaiting Payment: Payment in progress
  • No Invoice: Cannot generate receipts yet
  • Status Tracking: Monitors payment completion
  • Auto-Update: Refreshes when status changes

Transaction Type Handling​

Appointment Transactions:

  • Therapist Information: Shows assigned therapist details
  • Session Details: Appointment date and time
  • Service Fee: Consultation and platform fees
  • Billing Breakdown: Detailed cost structure

Subscription Transactions:

  • Plan Information: Subscription plan details
  • Child Association: Linked child information
  • Recurring Billing: Subscription payment tracking
  • Plan Benefits: Subscription feature access

Refund Transactions:

  • Refund Amount: Calculated refund value
  • Cancellation Reason: Reason for refund
  • Refund Date: When refund was processed
  • Original Transaction: Links to original payment

🔧 Error Handling and Edge Cases​

Data Loading Errors​

Network Error Handling:

  • Retry Mechanism: Allows data refetch
  • Error Display: Shows user-friendly error messages
  • Fallback UI: Error box with retry option
  • Loading States: Prevents UI freezing during errors

Data Validation:

  • Null Checks: Handles missing transaction data
  • Type Validation: Ensures correct data types
  • Array Safety: Prevents crashes on empty arrays
  • Field Validation: Validates required fields exist

Filter Edge Cases​

Empty Results:

  • No Data Component: Shows "No transactions found" message
  • Filter Reset: Option to clear filters
  • Search Suggestions: Suggests alternative filter combinations
  • Date Range Validation: Prevents invalid date selections

Filter State Management:

  • State Persistence: Maintains filter state across navigation
  • Clear Functionality: Resets all filters to default
  • Apply Validation: Ensures valid filter combinations
  • Performance: Optimizes filter queries

📱 Mobile-Specific Features​

Touch Interactions​

Card Interactions:

  • Tap Feedback: Visual feedback on card press
  • Loading States: Prevents multiple taps during processing
  • Error Handling: Graceful handling of failed interactions
  • Accessibility: Screen reader support for transaction cards

Filter Modal:

  • Bottom Sheet: Native bottom sheet implementation
  • Gesture Support: Pan-to-close functionality
  • Backdrop: Semi-transparent backdrop overlay
  • Safe Area: Respects device safe areas

Performance Optimizations​

List Performance:

  • FlatList Optimization: Efficient list rendering
  • Item Recycling: Reuses list items for performance
  • Lazy Loading: Loads data as needed
  • Memory Management: Prevents memory leaks

Data Caching:

  • GraphQL Cache: Apollo Client caching
  • Offline Support: Cached data for offline access
  • Cache Updates: Automatic cache invalidation
  • Network Optimization: Reduces unnecessary network calls

🔐 Security and Privacy​

Data Protection​

Transaction Security:

  • Secure Display: Masks sensitive information
  • Access Control: Parent-only transaction access
  • Data Encryption: Secure data transmission
  • Privacy Compliance: GDPR and privacy regulation compliance

Invoice Security:

  • PDF Protection: Secure PDF generation
  • Data Sanitization: Prevents data injection
  • Access Logging: Tracks invoice access
  • Secure Storage: Encrypted local storage

Error Prevention​

Input Validation:

  • Date Range Validation: Prevents invalid date selections
  • Filter Validation: Ensures valid filter combinations
  • Data Type Checking: Validates data types before processing
  • Null Safety: Handles null and undefined values

User Experience:

  • Loading Indicators: Clear loading states
  • Error Messages: User-friendly error descriptions
  • Success Feedback: Confirmation of successful actions
  • Progressive Enhancement: Graceful degradation for errors