Cavai Docs

Appearance

Phone Input Country Codes ​

This document describes the enhanced phone input country code functionality implemented across the Cavai platform.

Overview ​

The phone input component has been enhanced with the following features:

  • Country codes grouped by geographic region
  • Option to set a fixed country code that cannot be changed by users
  • Support for custom country code lists
  • Improved validation and error handling

Implementation Details ​

Country Code Constants ​

Country codes are centralized in Creative-Engine's countryCodesConstants.ts file. Each country code includes:

  • Code (e.g., "+47")
  • Name (e.g., "Norway")
  • Flag emoji (e.g., "🇳🇴")
  • Region (e.g., "Europe")
  • Popular flag (for frequently used countries)

Key Functions ​

getGroupedCountryCodes(includePopularGroup = true) ​

Returns country codes grouped by region, with an optional "Popular" group for frequently used countries.

getFilteredGroupedCountryCodes(includePopularGroup = true, allowedCodes = null) ​

Returns country codes grouped by region, filtered by an optional list of allowed codes.

filterCountryCodes(countryCodes, allowedCodes) ​

Filters an array of country codes to only include those in the allowedCodes list.

Configuration Options ​

In the PhoneInputConfiguration component, users can:

  1. Set a fixed country code:

    • When enabled, the country code selector is disabled
    • A "Fixed" badge appears next to the selector
    • The country code cannot be changed by end users

  2. Create custom country code lists:

    • Enable "Use custom country list" option
    • Add/remove specific countries from the dropdown
    • Countries are displayed grouped by region
    • Only selected countries will appear in the form

Usage ​

Basic Phone Input ​

javascript
// Default phone input with all country codes
{
  type: 'tel',
  countryCode: '+47',
  showCountryCode: true
}

Fixed Country Code ​

javascript
// Phone input with fixed Norwegian country code
{
  type: 'tel',
  countryCode: '+47',
  showCountryCode: true,
  fixedCountryCode: true
}

Custom Country List ​

javascript
// Phone input with only specific countries
{
  type: 'tel',
  countryCode: '+47',
  showCountryCode: true,
  useCustomCountryList: true,
  allowedCountryCodes: ['+47', '+46', '+45', '+358']
}

Integration Points ​

  1. Creative-Engine:

    • Exports country code constants and utility functions
    • Handles validation logic for phone inputs

  2. Application-Frontend:

    • Imports country code utilities from Creative-Engine
    • Provides UI for configuring phone inputs
    • Implements country code selection UI with region grouping

Best Practices ​

  1. Use the fixed country code option when targeting specific regions
  2. Create custom country lists for region-specific campaigns
  3. Always include the most relevant countries for your target audience
  4. Consider using popular countries as defaults

Technical Notes ​

  • Country codes are exported from Creative-Engine's entry point
  • PhoneInputConfiguration.vue handles all UI for country code configuration
  • Type safety is ensured through TypeScript interfaces
  • Validation includes country code-specific rules

Internal documentation

Cavai