Localization & Currency

Localization & Currency Settings

RentifyNow provides comprehensive localization support, allowing users to customize their experience with their preferred language, currency, date/time formats, and regional settings.

Language Support

RentifyNow supports the following languages:

Changing Language

Users can change the application language in two ways:

1. Header Language Selector: Click the globe icon in the header to quickly switch languages
2. Settings Page: Go to Settings > Appearance > Language for a full language selector

Language preferences are saved locally and persist across sessions.

Currency Support

RentifyNow supports over 20 currencies for displaying monetary values:

Supported Currencies

Changing Currency

To change the default display currency:

1. Go to Settings > Appearance
2. Find the Currency setting
3. Select your preferred currency from the dropdown
4. The change takes effect immediately across all pages

Currency Display

Currencies are formatted according to their locale conventions:

• USD: $1,234.56
• EUR: 1.234,56 €
• PLN: 1 234,56 zł
• JPY: ¥1,235 (no decimal places)

Using the Currency Pipe in Templates

For developers, the currencyFormat pipe provides dynamic currency formatting:

<!-- Use global currency setting -->
{{ amount | currencyFormat }}

<!-- Use compact notation for large numbers -->
{{ amount | currencyFormat:'compact' }}

<!-- Override with specific currency -->
{{ amount | currencyFormat:'EUR' }}

Currency Service API

The CurrencyService provides programmatic access:

import { CurrencyService } from '@app/services/currency.service';

// Get current currency
const currency = currencyService.getCurrentCurrency();
// { code: 'USD', symbol: '#39;, name: 'US Dollar', locale: 'en-US', decimalPlaces: 2 }

// Change currency
currencyService.setCurrency('EUR');

// Format a number
const formatted = currencyService.format(1234.56);
// "$1,234.56" or "1.234,56 €" depending on current currency

// Format with specific currency (doesn't change global setting)
const eurFormatted = currencyService.formatWithCurrency(1234.56, 'EUR');

Date & Time Formats

Users can customize date and time display formats:

Date Formats

• MM/DD/YYYY (US style)
• DD/MM/YYYY (European style)
• YYYY-MM-DD (ISO style)

Time Formats

• 12-hour (AM/PM)
• 24-hour

Display Preferences

Additional display settings available:

• Theme: Light, Dark, or System preference
• Contrast Color: Customize the primary accent color
• Compact Mode: Reduce spacing for more content
• Animations: Enable/disable UI animations

Backend Storage

User preferences are stored in two places:

1. Local Storage: For immediate access and offline support
2. Backend API: For syncing across devices (optional)

API Endpoints

GET  /api/users/me/preferences     - Get user display preferences
PUT  /api/users/me/preferences     - Update user display preferences

Preferences JSON Structure

{
  "display": {
    "theme": "light",
    "contrastColor": "blue",
    "language": "en",
    "dateFormat": "MM/DD/YYYY",
    "timeFormat": "12h",
    "currency": "USD",
    "compactMode": false,
    "animationsEnabled": true
  }
}

Migration Guide

Updating Existing Components

To use dynamic currency in your components:

1. Replace Angular's currency pipe with currencyFormat:

<!-- Before -->
{{ amount | currency }}

<!-- After -->
{{ amount | currencyFormat }}

2. Import the pipe in your component:

import { CurrencyFormatPipe } from '@app/pipes/currency-format.pipe';

@Component({
  imports: [CurrencyFormatPipe]
})

Handling Fixed Currencies

For data that must be displayed in a specific currency (e.g., historical records):

<!-- Always show in EUR regardless of user setting -->
{{ historicalAmount | currencyFormat:'EUR' }}