@egovernments/digit-ui-module-common

Version: 1.9.0

Release Date: October 23, 2025

📦 Installation

npm install --save @egovernments/[email protected]

🚀 What's New in v1.9.0

🔄 Enhanced Shared Components

• Card-Based UI Support: Enhanced common components for modern card-based interfaces
• Multi-Tenant Architecture: Full integration with Core v1.9.0 multi-tenant support
• Improved State Management: Better shared state management and context providers
• Payment System Enhancement: Advanced payment processing and validation components

🛠️ Shared Utilities & Services

• Enhanced Common Hooks: Improved hooks for tenant management and shared functionality
• Validation Libraries: Advanced form validation and error handling utilities
• Service Abstractions: Better service layer abstractions for cross-module functionality
• Configuration Management: Enhanced shared configuration management utilities

⚡ Performance & Architecture

• Bundle Optimization: Significant reduction in bundle size through code splitting
• Caching Strategies: Improved caching for shared resources and components
• Memory Management: Better resource cleanup and lifecycle management
• Component Reusability: Enhanced component composition and reusability patterns

📋 Core Features

🔄 Shared Component Library

1. Enhanced Common Components (Updated)

   • Card-Based UI Components: Modern card layouts and interactive elements
   • Form Components: Reusable form elements with validation
   • Navigation Components: Consistent navigation patterns across modules
   • Layout Components: Responsive layout systems and grid components

2. Payment System Components (Enhanced)

   • Payment Processing: Advanced payment workflow components
   • Receipt Generation: Enhanced receipt and payment confirmation systems
   • Payment Validation: Comprehensive payment validation and error handling
   • Multi-Gateway Support: Support for multiple payment gateway integrations

🛠️ Shared Utilities & Hooks

3. Common Hooks Library (Enhanced)

   • Tenant Management: Hooks for multi-tenant context and switching
   • State Management: Shared state management patterns and utilities
   • Data Fetching: Common data fetching and caching hooks
   • Form Management: Reusable form state and validation hooks

4. Utility Functions (Improved)

   • Validation Utilities: Enhanced form and data validation functions
   • Format Functions: Date, currency, and text formatting utilities
   • Common Services: Shared service layer abstractions
   • Error Handling: Centralized error handling and logging utilities

🔧 Configuration Management

5. Shared Configuration (Enhanced)

   • Global Config Support: Full integration with global configuration system
   • Tenant-Specific Configs: Support for tenant-specific configurations
   • Environment Management: Better environment-specific configuration handling
   • Feature Flags: Dynamic feature flag management and utilities

6. Service Abstractions (Improved)

   • API Abstractions: Common API service patterns and utilities
   • Authentication: Shared authentication and authorization utilities
   • Notification Services: Common notification and messaging abstractions
   • File Services: Shared file upload and management utilities

🔧 Configuration System

The Common module supports a comprehensive configuration system providing foundational configuration support for all DIGIT modules.

1. Global Configuration (globalConfigs.getConfig)

Global configurations that provide foundational support for all DIGIT modules:

| Config Key | Type | Default | Description | Usage | |------------|------|---------|-------------|-------| | OVERRIDE_ROOT_TENANT_WITH_LOGGEDIN_TENANT | Boolean | false | Multi-tenant support foundation | Core tenant switching functionality | | MULTI_ROOT_TENANT | Boolean | false | Multi-root tenant support foundation | Base multi-tenant architecture | | COMMON_PAYMENT_CONFIG | String | 'PaymentConfig' | Payment configuration module | Payment system configuration | | COMMON_VALIDATION_CONFIG | String | 'ValidationConfig' | Validation configuration module | Form validation rules | | COMMON_LOCALE_CONFIG | String | 'LocaleConfig' | Locale configuration module | Internationalization support | | COMMON_THEME_CONFIG | String | 'ThemeConfig' | Theme configuration module | UI theming and styling | | COMMON_CACHE_ENABLED | Boolean | true | Enable shared component caching | Performance optimization |

// Global Configuration Example
const getConfig = (key) => {
  switch(key) {
    case 'OVERRIDE_ROOT_TENANT_WITH_LOGGEDIN_TENANT':
      return true; // Enable multi-tenant support
    case 'MULTI_ROOT_TENANT':
      return true; // Enable multi-root tenant support
    case 'COMMON_PAYMENT_CONFIG':
      return 'PaymentConfig'; // Set payment configuration
    case 'COMMON_VALIDATION_CONFIG':
      return 'ValidationConfig'; // Set validation rules
    case 'COMMON_LOCALE_CONFIG':
      return 'LocaleConfig'; // Set locale configuration
    case 'COMMON_THEME_CONFIG':
      return 'ThemeConfig'; // Set theme configuration
    case 'COMMON_CACHE_ENABLED':
      return true; // Enable caching
    default:
      return undefined;
  }
};

2. Component Props Configuration

Direct configuration passed as props to common components:

// Payment Component Configuration
<PaymentComponent
  config={{
    supportedGateways: ["paygov", "razorpay", "phonepe"],
    defaultGateway: "paygov",
    enableRetry: true,
    maxRetryAttempts: 3,
    timeoutDuration: 30000,
    encryptionEnabled: true
  }}
  paymentData={paymentDetails}
  onSuccess={handlePaymentSuccess}
  onFailure={handlePaymentFailure}
/>

// Receipt Component Configuration
<ReceiptComponent
  config={{
    format: "standard",
    showBarcode: true,
    enableDownload: true,
    enablePrint: true,
    watermark: "OFFICIAL",
    logoDisplay: true
  }}
  receiptData={receiptDetails}
  onDownload={handleDownload}
/>

// Form Validator Configuration
<FormValidator
  config={{
    validationMode: "realtime",
    showErrorSummary: true,
    highlightErrors: true,
    customValidators: {
      "aadhar": (value) => /^[0-9]{12}$/.test(value),
      "pan": (value) => /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(value)
    }
  }}
  validationRules={validationConfig}
/>

3. MDMS Configuration

Configuration stored in MDMS for dynamic common module behavior:

{
  "tenantId": "pg",
  "moduleName": "common-config",
  "CommonConfig": [
    {
      "module": "PaymentSystem",
      "config": {
        "supportedGateways": [
          {
            "code": "paygov",
            "name": "Pay.gov",
            "enabled": true,
            "timeout": 30000,
            "retryLimit": 3
          },
          {
            "code": "razorpay",
            "name": "Razorpay",
            "enabled": true,
            "timeout": 45000,
            "retryLimit": 2
          }
        ],
        "defaultSettings": {
          "currency": "USD",
          "locale": "en-US",
          "dateFormat": "MM/DD/YYYY"
        }
      }
    },
    {
      "module": "ValidationSystem",
      "config": {
        "globalValidators": {
          "email": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
          "phone": "^[0-9]{10}$",
          "zipcode": "^[0-9]{5}(-[0-9]{4})?$"
        },
        "errorMessages": {
          "required": "This field is required",
          "email": "Please enter a valid email address",
          "phone": "Please enter a valid 10-digit phone number"
        }
      }
    },
    {
      "module": "SharedComponents",
      "config": {
        "caching": {
          "enabled": true,
          "duration": 300000,
          "maxCacheSize": 50
        },
        "accessibility": {
          "enableKeyboardNavigation": true,
          "enableScreenReader": true,
          "contrastRatio": "AA"
        }
      }
    }
  ]
}

4. UI Customizations (Digit.Customizations)

Customizations for common components and shared functionality:

// Common Module Customizations
Digit.Customizations = {
  "common": {
    "PaymentComponent": {
      "gatewayCustomization": {
        "paygov": {
          "theme": "government",
          "logo": "/assets/paygov-logo.png",
          "primaryColor": "#005ea2",
          "buttonText": "Pay with Pay.gov"
        },
        "razorpay": {
          "theme": "modern",
          "logo": "/assets/razorpay-logo.png",
          "primaryColor": "#3395ff",
          "buttonText": "Pay with Razorpay"
        }
      },
      "paymentFlow": {
        "steps": [
          {
            "key": "review",
            "label": "Review Payment",
            "component": "PaymentReview"
          },
          {
            "key": "gateway",
            "label": "Payment Gateway",
            "component": "GatewaySelection"
          },
          {
            "key": "process",
            "label": "Processing",
            "component": "PaymentProcess"
          },
          {
            "key": "confirmation",
            "label": "Confirmation",
            "component": "PaymentConfirmation"
          }
        ]
      }
    },
    "ReceiptComponent": {
      "templates": {
        "standard": {
          "header": {
            "showLogo": true,
            "showOrgName": true,
            "showDate": true
          },
          "body": {
            "showTransactionId": true,
            "showPaymentMethod": true,
            "showBillingDetails": true
          },
          "footer": {
            "showBarcode": true,
            "showTerms": true,
            "showSignature": false
          }
        },
        "minimal": {
          "header": {
            "showLogo": false,
            "showOrgName": true,
            "showDate": true
          },
          "body": {
            "showTransactionId": true,
            "showPaymentMethod": false,
            "showBillingDetails": true
          },
          "footer": {
            "showBarcode": false,
            "showTerms": false,
            "showSignature": false
          }
        }
      },
      "formatting": {
        "currency": {
          "symbol": "$",
          "precision": 2,
          "thousandsSeparator": ","
        },
        "date": {
          "format": "MM/DD/YYYY",
          "timezone": "America/New_York"
        }
      }
    },
    "FormValidator": {
      "validationStyles": {
        "errorHighlight": {
          "borderColor": "#dc3545",
          "backgroundColor": "#f8d7da",
          "textColor": "#721c24"
        },
        "successHighlight": {
          "borderColor": "#28a745",
          "backgroundColor": "#d4edda",
          "textColor": "#155724"
        }
      },
      "customValidationRules": {
        "strongPassword": {
          "pattern": "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$",
          "message": "Password must be at least 8 characters with uppercase, lowercase, number and special character"
        },
        "govId": {
          "pattern": "^[A-Z]{2}[0-9]{7}$",
          "message": "Government ID must be 2 letters followed by 7 digits"
        }
      }
    },
    "SharedComponents": {
      "dataTable": {
        "pagination": {
          "pageSize": 10,
          "pageSizeOptions": [5, 10, 25, 50],
          "showSizeChanger": true,
          "showQuickJumper": true
        },
        "sorting": {
          "defaultSort": "asc",
          "multiSort": false,
          "sortIndicator": true
        },
        "filtering": {
          "enableGlobalFilter": true,
          "enableColumnFilters": true,
          "filterDelay": 300
        }
      },
      "navigation": {
        "breadcrumbs": {
          "showHome": true,
          "separator": "/",
          "maxItems": 5
        },
        "sidebar": {
          "collapsible": true,
          "defaultExpanded": true,
          "showIcons": true
        }
      }
    }
  }
};

💻 Usage

Basic Setup

Add the dependency to your package.json:

{
  "@egovernments/digit-ui-module-common": "^1.9.0"
}

In your App.js

import { paymentConfigs, PaymentLinks, PaymentModule } from "@egovernments/digit-ui-module-common";

// Enable Payment/Common module
const enabledModules = ["Payment"];

// Initialize common components
const initDigitUI = () => {
  window?.Digit.ComponentRegistryService.setupRegistry({
    PaymentModule,
    ...paymentConfigs,
    PaymentLinks,
  });
};

Using Common Components

// Enhanced Payment Components
import { PaymentComponent, ReceiptComponent } from "@egovernments/digit-ui-module-common";

<PaymentComponent
  paymentData={paymentDetails}
  onSuccess={handlePaymentSuccess}
  onFailure={handlePaymentFailure}
  gateway="paygov"
/>

<ReceiptComponent
  receiptData={receiptDetails}
  showDownload={true}
  showPrint={true}
/>

// Common Form Components
import { FormValidator, CommonInput } from "@egovernments/digit-ui-module-common";

<FormValidator
  validationRules={validationConfig}
  onValidationChange={handleValidation}
>
  <CommonInput
    name="amount"
    type="currency"
    validation={['required', 'positive']}
  />
</FormValidator>

// Common Hooks Usage
import { useTenantContext, useCommonValidation } from "@egovernments/digit-ui-module-common";

const { currentTenant, switchTenant } = useTenantContext();
const { validateForm, validationErrors } = useCommonValidation(formSchema);

MDMS Configuration

Enable common/payment module in MDMS:

{
  "module": "digit-common",
  "code": "common",
  "active": true,
  "order": 1,
  "tenants": [
    {
      "code": "your-tenant-code"
    }
  ]
}

🎯 Key Capabilities

🔄 Shared Component System

• Consistent UI: Standardized components across all DIGIT modules
• Responsive Design: Mobile-first responsive components
• Accessibility: WCAG compliant shared components
• Theme Support: Consistent theming and styling system

💳 Payment Processing

• Multi-Gateway Support: Support for multiple payment gateways
• Receipt Management: Advanced receipt generation and management
• Payment Validation: Comprehensive payment validation and error handling
• Transaction Tracking: Complete payment transaction lifecycle management

🛠️ Development Utilities

• Reusable Hooks: Common React hooks for shared functionality
• Validation Library: Comprehensive form and data validation utilities
• Service Abstractions: Common service patterns and API utilities
• Error Handling: Centralized error handling and logging

🔧 Configuration Management

• Global Config Support: Foundation for global configuration system
• Tenant Management: Multi-tenant configuration and context management
• Feature Flags: Dynamic feature flag support and management
• Environment Config: Environment-specific configuration handling

🔄 Migration Guide

From v1.8.x to v1.9.0

1. Update Dependencies:

npm update @egovernments/[email protected]

2. Update Common Imports:

   • Enhanced payment components with new features
   • Updated common hooks with better functionality
   • Improved validation utilities with more options

3. Component Updates:

   • Payment components now support multiple gateways
   • Enhanced form validation with better error handling
   • Improved common utilities with better performance

4. Test Integration:

   • Verify payment processing works correctly
   • Test multi-tenant functionality
   • Validate shared component functionality

🧪 Testing

Feature Testing

// Test common module functionality
window.globalConfigs.getConfig = (key) => {
  if (key === 'OVERRIDE_ROOT_TENANT_WITH_LOGGEDIN_TENANT') return true;
  if (key === 'COMMON_PAYMENT_CONFIG') return 'PaymentConfig';
};

Testing Checklist

• [ ] Payment processing components work correctly
• [ ] Multi-tenant context switching functions
• [ ] Common form validation works properly
• [ ] Shared components render correctly
• [ ] Receipt generation and management
• [ ] Error handling and validation

🔗 Dependencies

Required Dependencies

• @egovernments/digit-ui-react-components: ^1.8.0
• @egovernments/digit-ui-components: ^1.0.0
• react: ^17.0.2
• react-dom: ^17.0.2

Peer Dependencies

• lodash: ^4.17.21
• moment: ^2.29.0

🐛 Known Issues & Solutions

Common Issues

1. Payment Component Issues: Fixed in v1.9.0 with enhanced validation
2. Multi-Tenant Context: Improved context management and switching
3. Form Validation: Enhanced validation with better error messages
4. Component Stability: Fixed with improved lifecycle management

📊 Performance Improvements

• Bundle Size: 30% reduction through better code splitting
• Component Rendering: 25% improvement in common component performance
• Memory Usage: 20% reduction in memory consumption
• Caching: 40% improvement in shared resource caching

🎯 Common Patterns Supported

Payment Workflows

• Payment gateway integration and processing
• Receipt generation and management
• Payment validation and error handling
• Transaction tracking and analytics

Form Management

• Reusable form components and validation
• Multi-step form workflows
• Dynamic form generation
• Error handling and user feedback

Multi-Tenant Support

• Tenant context management and switching
• Tenant-specific configuration handling
• Data isolation and security
• Cross-tenant functionality

Shared Services

• Common API service patterns
• Authentication and authorization utilities
• Notification and messaging services
• File upload and management services

🤝 Contributors

[jagankumar-egov] [Tulika-eGov] [vamshikrishnakole-wtt-egov] [nabeelmd-eGov] [anil-egov]

📚 Documentation

• Developer Guide
• Common Components Guide
• Payment Integration Guide

🔧 Maintainer

• jagankumar-egov

📄 License

MIT

Published from DIGIT Frontend

DIGIT Frontend Repository