From 1da28fe59fe8afd3ee0d50326e55e1b928627887 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Sat, 19 Jul 2025 19:05:18 +0000
Subject: [PATCH] phone number display

---
 .../phone/phone.component.css                 |  12 +
 .../phone/phone.component.html                |   5 +-
 .../phone/phone.component.ts                  |  48 +-
 frontend/src/app/consts/countries.ts          | 499 +++++++++---------
 frontend/src/app/services/auth.service.ts     |   2 +-
 5 files changed, 313 insertions(+), 253 deletions(-)

diff --git a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.css b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.css
index 9b60ac1dd..e325e57dd 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.css
@@ -2,6 +2,18 @@
   padding-right: 24px;
 }
 
+.phone-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.country-flag {
+  font-size: 16px;
+  cursor: help;
+  user-select: none;
+}
+
 .phone-link {
   text-decoration: none;
   color: var(--primary-color);
diff --git a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.html b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.html
index 1cddbab78..bfbc51f33 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.html
@@ -1,5 +1,8 @@
 <div class="field-display">
-  <a *ngIf="value" [href]="'tel:' + value" class="field-value phone-link">{{ value }}</a>
+  <span *ngIf="value" class="phone-content">
+    <span *ngIf="countryFlag" class="country-flag" [matTooltip]="countryName">{{ countryFlag }}</span>
+    <a [href]="'tel:' + value" class="field-value phone-link">{{ formattedNumber || value }}</a>
+  </span>
   <span *ngIf="!value" class="field-value">—</span>
   <button type="button" mat-icon-button
       class="field-copy-button"
diff --git a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.ts b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.ts
index 0edb98236..e7f25c194 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.ts
@@ -1,10 +1,12 @@
 import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { parsePhoneNumber } from 'libphonenumber-js';
+import { COUNTRIES, getCountryFlag } from '../../../../consts/countries';
 
 @Component({
   selector: 'app-phone-display',
@@ -12,5 +14,47 @@ import { MatTooltipModule } from '@angular/material/tooltip';
   styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './phone.component.css'],
   imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
 })
-export class PhoneDisplayComponent extends BaseTableDisplayFieldComponent {
+export class PhoneDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+  public countryFlag: string = '';
+  public countryName: string = '';
+  public formattedNumber: string = '';
+  
+  ngOnInit(): void {
+    this.parsePhoneNumber();
+  }
+
+  private parsePhoneNumber(): void {
+    if (!this.value || typeof this.value !== 'string') {
+      this.countryFlag = '';
+      this.countryName = '';
+      this.formattedNumber = '';
+      return;
+    }
+
+    try {
+      const phoneNumber = parsePhoneNumber(this.value);
+      
+      if (phoneNumber && phoneNumber.country) {
+        const country = COUNTRIES.find(c => c.code === phoneNumber.country);
+        
+        if (country) {
+          this.countryFlag = getCountryFlag(country.code);
+          this.countryName = country.name;
+          this.formattedNumber = phoneNumber.formatInternational();
+        } else {
+          this.countryFlag = '';
+          this.countryName = '';
+          this.formattedNumber = this.value;
+        }
+      } else {
+        this.countryFlag = '';
+        this.countryName = '';
+        this.formattedNumber = this.value;
+      }
+    } catch (error) {
+      this.countryFlag = '';
+      this.countryName = '';
+      this.formattedNumber = this.value;
+    }
+  }
 }
diff --git a/frontend/src/app/consts/countries.ts b/frontend/src/app/consts/countries.ts
index c25680735..05e8c18fa 100644
--- a/frontend/src/app/consts/countries.ts
+++ b/frontend/src/app/consts/countries.ts
@@ -1,6 +1,7 @@
 export interface Country {
   code: string;
   name: string;
+  dialCode?: string;
 }
 
 export function getCountryFlag(countryCode: string): string {
@@ -13,253 +14,253 @@ export function getCountryFlag(countryCode: string): string {
 }
 
 export const COUNTRIES: Country[] = [
-  { code: 'AD', name: 'Andorra' },
-  { code: 'AE', name: 'United Arab Emirates' },
-  { code: 'AF', name: 'Afghanistan' },
-  { code: 'AG', name: 'Antigua and Barbuda' },
-  { code: 'AI', name: 'Anguilla' },
-  { code: 'AL', name: 'Albania' },
-  { code: 'AM', name: 'Armenia' },
-  { code: 'AO', name: 'Angola' },
-  { code: 'AQ', name: 'Antarctica' },
-  { code: 'AR', name: 'Argentina' },
-  { code: 'AS', name: 'American Samoa' },
-  { code: 'AT', name: 'Austria' },
-  { code: 'AU', name: 'Australia' },
-  { code: 'AW', name: 'Aruba' },
-  { code: 'AX', name: 'Åland Islands' },
-  { code: 'AZ', name: 'Azerbaijan' },
-  { code: 'BA', name: 'Bosnia and Herzegovina' },
-  { code: 'BB', name: 'Barbados' },
-  { code: 'BD', name: 'Bangladesh' },
-  { code: 'BE', name: 'Belgium' },
-  { code: 'BF', name: 'Burkina Faso' },
-  { code: 'BG', name: 'Bulgaria' },
-  { code: 'BH', name: 'Bahrain' },
-  { code: 'BI', name: 'Burundi' },
-  { code: 'BJ', name: 'Benin' },
-  { code: 'BL', name: 'Saint Barthélemy' },
-  { code: 'BM', name: 'Bermuda' },
-  { code: 'BN', name: 'Brunei Darussalam' },
-  { code: 'BO', name: 'Bolivia' },
-  { code: 'BQ', name: 'Bonaire, Sint Eustatius and Saba' },
-  { code: 'BR', name: 'Brazil' },
-  { code: 'BS', name: 'Bahamas' },
-  { code: 'BT', name: 'Bhutan' },
-  { code: 'BV', name: 'Bouvet Island' },
-  { code: 'BW', name: 'Botswana' },
-  { code: 'BY', name: 'Belarus' },
-  { code: 'BZ', name: 'Belize' },
-  { code: 'CA', name: 'Canada' },
-  { code: 'CC', name: 'Cocos (Keeling) Islands' },
-  { code: 'CD', name: 'Congo, Democratic Republic of the' },
-  { code: 'CF', name: 'Central African Republic' },
-  { code: 'CG', name: 'Congo' },
-  { code: 'CH', name: 'Switzerland' },
-  { code: 'CI', name: 'Côte d\'Ivoire' },
-  { code: 'CK', name: 'Cook Islands' },
-  { code: 'CL', name: 'Chile' },
-  { code: 'CM', name: 'Cameroon' },
-  { code: 'CN', name: 'China' },
-  { code: 'CO', name: 'Colombia' },
-  { code: 'CR', name: 'Costa Rica' },
-  { code: 'CU', name: 'Cuba' },
-  { code: 'CV', name: 'Cape Verde' },
-  { code: 'CW', name: 'Curaçao' },
-  { code: 'CX', name: 'Christmas Island' },
-  { code: 'CY', name: 'Cyprus' },
-  { code: 'CZ', name: 'Czech Republic' },
-  { code: 'DE', name: 'Germany' },
-  { code: 'DJ', name: 'Djibouti' },
-  { code: 'DK', name: 'Denmark' },
-  { code: 'DM', name: 'Dominica' },
-  { code: 'DO', name: 'Dominican Republic' },
-  { code: 'DZ', name: 'Algeria' },
-  { code: 'EC', name: 'Ecuador' },
-  { code: 'EE', name: 'Estonia' },
-  { code: 'EG', name: 'Egypt' },
-  { code: 'EH', name: 'Western Sahara' },
-  { code: 'ER', name: 'Eritrea' },
-  { code: 'ES', name: 'Spain' },
-  { code: 'ET', name: 'Ethiopia' },
-  { code: 'FI', name: 'Finland' },
-  { code: 'FJ', name: 'Fiji' },
-  { code: 'FK', name: 'Falkland Islands (Malvinas)' },
-  { code: 'FM', name: 'Micronesia, Federated States of' },
-  { code: 'FO', name: 'Faroe Islands' },
-  { code: 'FR', name: 'France' },
-  { code: 'GA', name: 'Gabon' },
-  { code: 'GB', name: 'United Kingdom' },
-  { code: 'GD', name: 'Grenada' },
-  { code: 'GE', name: 'Georgia' },
-  { code: 'GF', name: 'French Guiana' },
-  { code: 'GG', name: 'Guernsey' },
-  { code: 'GH', name: 'Ghana' },
-  { code: 'GI', name: 'Gibraltar' },
-  { code: 'GL', name: 'Greenland' },
-  { code: 'GM', name: 'Gambia' },
-  { code: 'GN', name: 'Guinea' },
-  { code: 'GP', name: 'Guadeloupe' },
-  { code: 'GQ', name: 'Equatorial Guinea' },
-  { code: 'GR', name: 'Greece' },
-  { code: 'GS', name: 'South Georgia and the South Sandwich Islands' },
-  { code: 'GT', name: 'Guatemala' },
-  { code: 'GU', name: 'Guam' },
-  { code: 'GW', name: 'Guinea-Bissau' },
-  { code: 'GY', name: 'Guyana' },
-  { code: 'HK', name: 'Hong Kong' },
-  { code: 'HM', name: 'Heard Island and McDonald Islands' },
-  { code: 'HN', name: 'Honduras' },
-  { code: 'HR', name: 'Croatia' },
-  { code: 'HT', name: 'Haiti' },
-  { code: 'HU', name: 'Hungary' },
-  { code: 'ID', name: 'Indonesia' },
-  { code: 'IE', name: 'Ireland' },
-  { code: 'IL', name: 'Israel' },
-  { code: 'IM', name: 'Isle of Man' },
-  { code: 'IN', name: 'India' },
-  { code: 'IO', name: 'British Indian Ocean Territory' },
-  { code: 'IQ', name: 'Iraq' },
-  { code: 'IR', name: 'Iran, Islamic Republic of' },
-  { code: 'IS', name: 'Iceland' },
-  { code: 'IT', name: 'Italy' },
-  { code: 'JE', name: 'Jersey' },
-  { code: 'JM', name: 'Jamaica' },
-  { code: 'JO', name: 'Jordan' },
-  { code: 'JP', name: 'Japan' },
-  { code: 'KE', name: 'Kenya' },
-  { code: 'KG', name: 'Kyrgyzstan' },
-  { code: 'KH', name: 'Cambodia' },
-  { code: 'KI', name: 'Kiribati' },
-  { code: 'KM', name: 'Comoros' },
-  { code: 'KN', name: 'Saint Kitts and Nevis' },
-  { code: 'KP', name: 'Korea, Democratic People\'s Republic of' },
-  { code: 'KR', name: 'Korea, Republic of' },
-  { code: 'KW', name: 'Kuwait' },
-  { code: 'KY', name: 'Cayman Islands' },
-  { code: 'KZ', name: 'Kazakhstan' },
-  { code: 'LA', name: 'Lao People\'s Democratic Republic' },
-  { code: 'LB', name: 'Lebanon' },
-  { code: 'LC', name: 'Saint Lucia' },
-  { code: 'LI', name: 'Liechtenstein' },
-  { code: 'LK', name: 'Sri Lanka' },
-  { code: 'LR', name: 'Liberia' },
-  { code: 'LS', name: 'Lesotho' },
-  { code: 'LT', name: 'Lithuania' },
-  { code: 'LU', name: 'Luxembourg' },
-  { code: 'LV', name: 'Latvia' },
-  { code: 'LY', name: 'Libya' },
-  { code: 'MA', name: 'Morocco' },
-  { code: 'MC', name: 'Monaco' },
-  { code: 'MD', name: 'Moldova, Republic of' },
-  { code: 'ME', name: 'Montenegro' },
-  { code: 'MF', name: 'Saint Martin (French part)' },
-  { code: 'MG', name: 'Madagascar' },
-  { code: 'MH', name: 'Marshall Islands' },
-  { code: 'MK', name: 'North Macedonia' },
-  { code: 'ML', name: 'Mali' },
-  { code: 'MM', name: 'Myanmar' },
-  { code: 'MN', name: 'Mongolia' },
-  { code: 'MO', name: 'Macao' },
-  { code: 'MP', name: 'Northern Mariana Islands' },
-  { code: 'MQ', name: 'Martinique' },
-  { code: 'MR', name: 'Mauritania' },
-  { code: 'MS', name: 'Montserrat' },
-  { code: 'MT', name: 'Malta' },
-  { code: 'MU', name: 'Mauritius' },
-  { code: 'MV', name: 'Maldives' },
-  { code: 'MW', name: 'Malawi' },
-  { code: 'MX', name: 'Mexico' },
-  { code: 'MY', name: 'Malaysia' },
-  { code: 'MZ', name: 'Mozambique' },
-  { code: 'NA', name: 'Namibia' },
-  { code: 'NC', name: 'New Caledonia' },
-  { code: 'NE', name: 'Niger' },
-  { code: 'NF', name: 'Norfolk Island' },
-  { code: 'NG', name: 'Nigeria' },
-  { code: 'NI', name: 'Nicaragua' },
-  { code: 'NL', name: 'Netherlands' },
-  { code: 'NO', name: 'Norway' },
-  { code: 'NP', name: 'Nepal' },
-  { code: 'NR', name: 'Nauru' },
-  { code: 'NU', name: 'Niue' },
-  { code: 'NZ', name: 'New Zealand' },
-  { code: 'OM', name: 'Oman' },
-  { code: 'PA', name: 'Panama' },
-  { code: 'PE', name: 'Peru' },
-  { code: 'PF', name: 'French Polynesia' },
-  { code: 'PG', name: 'Papua New Guinea' },
-  { code: 'PH', name: 'Philippines' },
-  { code: 'PK', name: 'Pakistan' },
-  { code: 'PL', name: 'Poland' },
-  { code: 'PM', name: 'Saint Pierre and Miquelon' },
-  { code: 'PN', name: 'Pitcairn' },
-  { code: 'PR', name: 'Puerto Rico' },
-  { code: 'PS', name: 'Palestine, State of' },
-  { code: 'PT', name: 'Portugal' },
-  { code: 'PW', name: 'Palau' },
-  { code: 'PY', name: 'Paraguay' },
-  { code: 'QA', name: 'Qatar' },
-  { code: 'RE', name: 'Réunion' },
-  { code: 'RO', name: 'Romania' },
-  { code: 'RS', name: 'Serbia' },
-  { code: 'RU', name: 'Russian Federation' },
-  { code: 'RW', name: 'Rwanda' },
-  { code: 'SA', name: 'Saudi Arabia' },
-  { code: 'SB', name: 'Solomon Islands' },
-  { code: 'SC', name: 'Seychelles' },
-  { code: 'SD', name: 'Sudan' },
-  { code: 'SE', name: 'Sweden' },
-  { code: 'SG', name: 'Singapore' },
-  { code: 'SH', name: 'Saint Helena, Ascension and Tristan da Cunha' },
-  { code: 'SI', name: 'Slovenia' },
-  { code: 'SJ', name: 'Svalbard and Jan Mayen' },
-  { code: 'SK', name: 'Slovakia' },
-  { code: 'SL', name: 'Sierra Leone' },
-  { code: 'SM', name: 'San Marino' },
-  { code: 'SN', name: 'Senegal' },
-  { code: 'SO', name: 'Somalia' },
-  { code: 'SR', name: 'Suriname' },
-  { code: 'SS', name: 'South Sudan' },
-  { code: 'ST', name: 'Sao Tome and Principe' },
-  { code: 'SV', name: 'El Salvador' },
-  { code: 'SX', name: 'Sint Maarten (Dutch part)' },
-  { code: 'SY', name: 'Syrian Arab Republic' },
-  { code: 'SZ', name: 'Eswatini' },
-  { code: 'TC', name: 'Turks and Caicos Islands' },
-  { code: 'TD', name: 'Chad' },
-  { code: 'TF', name: 'French Southern Territories' },
-  { code: 'TG', name: 'Togo' },
-  { code: 'TH', name: 'Thailand' },
-  { code: 'TJ', name: 'Tajikistan' },
-  { code: 'TK', name: 'Tokelau' },
-  { code: 'TL', name: 'Timor-Leste' },
-  { code: 'TM', name: 'Turkmenistan' },
-  { code: 'TN', name: 'Tunisia' },
-  { code: 'TO', name: 'Tonga' },
-  { code: 'TR', name: 'Turkey' },
-  { code: 'TT', name: 'Trinidad and Tobago' },
-  { code: 'TV', name: 'Tuvalu' },
-  { code: 'TW', name: 'Taiwan, Province of China' },
-  { code: 'TZ', name: 'Tanzania, United Republic of' },
-  { code: 'UA', name: 'Ukraine' },
-  { code: 'UG', name: 'Uganda' },
-  { code: 'UM', name: 'United States Minor Outlying Islands' },
-  { code: 'US', name: 'United States' },
-  { code: 'UY', name: 'Uruguay' },
-  { code: 'UZ', name: 'Uzbekistan' },
-  { code: 'VA', name: 'Holy See (Vatican City State)' },
-  { code: 'VC', name: 'Saint Vincent and the Grenadines' },
-  { code: 'VE', name: 'Venezuela' },
-  { code: 'VG', name: 'Virgin Islands, British' },
-  { code: 'VI', name: 'Virgin Islands, U.S.' },
-  { code: 'VN', name: 'Viet Nam' },
-  { code: 'VU', name: 'Vanuatu' },
-  { code: 'WF', name: 'Wallis and Futuna' },
-  { code: 'WS', name: 'Samoa' },
-  { code: 'YE', name: 'Yemen' },
-  { code: 'YT', name: 'Mayotte' },
-  { code: 'ZA', name: 'South Africa' },
-  { code: 'ZM', name: 'Zambia' },
-  { code: 'ZW', name: 'Zimbabwe' }
+  { code: 'AD', name: 'Andorra', dialCode: '+376' },
+  { code: 'AE', name: 'United Arab Emirates', dialCode: '+971' },
+  { code: 'AF', name: 'Afghanistan', dialCode: '+93' },
+  { code: 'AG', name: 'Antigua and Barbuda', dialCode: '+1268' },
+  { code: 'AI', name: 'Anguilla', dialCode: '+1264' },
+  { code: 'AL', name: 'Albania', dialCode: '+355' },
+  { code: 'AM', name: 'Armenia', dialCode: '+374' },
+  { code: 'AO', name: 'Angola', dialCode: '+244' },
+  { code: 'AQ', name: 'Antarctica', dialCode: '+672' },
+  { code: 'AR', name: 'Argentina', dialCode: '+54' },
+  { code: 'AS', name: 'American Samoa', dialCode: '+1684' },
+  { code: 'AT', name: 'Austria', dialCode: '+43' },
+  { code: 'AU', name: 'Australia', dialCode: '+61' },
+  { code: 'AW', name: 'Aruba', dialCode: '+297' },
+  { code: 'AX', name: 'Åland Islands', dialCode: '+358' },
+  { code: 'AZ', name: 'Azerbaijan', dialCode: '+994' },
+  { code: 'BA', name: 'Bosnia and Herzegovina', dialCode: '+387' },
+  { code: 'BB', name: 'Barbados', dialCode: '+1246' },
+  { code: 'BD', name: 'Bangladesh', dialCode: '+880' },
+  { code: 'BE', name: 'Belgium', dialCode: '+32' },
+  { code: 'BF', name: 'Burkina Faso', dialCode: '+226' },
+  { code: 'BG', name: 'Bulgaria', dialCode: '+359' },
+  { code: 'BH', name: 'Bahrain', dialCode: '+973' },
+  { code: 'BI', name: 'Burundi', dialCode: '+257' },
+  { code: 'BJ', name: 'Benin', dialCode: '+229' },
+  { code: 'BL', name: 'Saint Barthélemy', dialCode: '+590' },
+  { code: 'BM', name: 'Bermuda', dialCode: '+1441' },
+  { code: 'BN', name: 'Brunei Darussalam', dialCode: '+673' },
+  { code: 'BO', name: 'Bolivia', dialCode: '+591' },
+  { code: 'BQ', name: 'Bonaire, Sint Eustatius and Saba', dialCode: '+599' },
+  { code: 'BR', name: 'Brazil', dialCode: '+55' },
+  { code: 'BS', name: 'Bahamas', dialCode: '+1242' },
+  { code: 'BT', name: 'Bhutan', dialCode: '+975' },
+  { code: 'BV', name: 'Bouvet Island', dialCode: '+47' },
+  { code: 'BW', name: 'Botswana', dialCode: '+267' },
+  { code: 'BY', name: 'Belarus', dialCode: '+375' },
+  { code: 'BZ', name: 'Belize', dialCode: '+501' },
+  { code: 'CA', name: 'Canada', dialCode: '+1' },
+  { code: 'CC', name: 'Cocos (Keeling) Islands', dialCode: '+61' },
+  { code: 'CD', name: 'Congo, Democratic Republic of the', dialCode: '+243' },
+  { code: 'CF', name: 'Central African Republic', dialCode: '+236' },
+  { code: 'CG', name: 'Congo', dialCode: '+242' },
+  { code: 'CH', name: 'Switzerland', dialCode: '+41' },
+  { code: 'CI', name: 'Côte d\'Ivoire', dialCode: '+225' },
+  { code: 'CK', name: 'Cook Islands', dialCode: '+682' },
+  { code: 'CL', name: 'Chile', dialCode: '+56' },
+  { code: 'CM', name: 'Cameroon', dialCode: '+237' },
+  { code: 'CN', name: 'China', dialCode: '+86' },
+  { code: 'CO', name: 'Colombia', dialCode: '+57' },
+  { code: 'CR', name: 'Costa Rica', dialCode: '+506' },
+  { code: 'CU', name: 'Cuba', dialCode: '+53' },
+  { code: 'CV', name: 'Cape Verde', dialCode: '+238' },
+  { code: 'CW', name: 'Curaçao', dialCode: '+599' },
+  { code: 'CX', name: 'Christmas Island', dialCode: '+61' },
+  { code: 'CY', name: 'Cyprus', dialCode: '+357' },
+  { code: 'CZ', name: 'Czech Republic', dialCode: '+420' },
+  { code: 'DE', name: 'Germany', dialCode: '+49' },
+  { code: 'DJ', name: 'Djibouti', dialCode: '+253' },
+  { code: 'DK', name: 'Denmark', dialCode: '+45' },
+  { code: 'DM', name: 'Dominica', dialCode: '+1767' },
+  { code: 'DO', name: 'Dominican Republic', dialCode: '+1' },
+  { code: 'DZ', name: 'Algeria', dialCode: '+213' },
+  { code: 'EC', name: 'Ecuador', dialCode: '+593' },
+  { code: 'EE', name: 'Estonia', dialCode: '+372' },
+  { code: 'EG', name: 'Egypt', dialCode: '+20' },
+  { code: 'EH', name: 'Western Sahara', dialCode: '+212' },
+  { code: 'ER', name: 'Eritrea', dialCode: '+291' },
+  { code: 'ES', name: 'Spain', dialCode: '+34' },
+  { code: 'ET', name: 'Ethiopia', dialCode: '+251' },
+  { code: 'FI', name: 'Finland', dialCode: '+358' },
+  { code: 'FJ', name: 'Fiji', dialCode: '+679' },
+  { code: 'FK', name: 'Falkland Islands (Malvinas)', dialCode: '+500' },
+  { code: 'FM', name: 'Micronesia, Federated States of', dialCode: '+691' },
+  { code: 'FO', name: 'Faroe Islands', dialCode: '+298' },
+  { code: 'FR', name: 'France', dialCode: '+33' },
+  { code: 'GA', name: 'Gabon', dialCode: '+241' },
+  { code: 'GB', name: 'United Kingdom', dialCode: '+44' },
+  { code: 'GD', name: 'Grenada', dialCode: '+1473' },
+  { code: 'GE', name: 'Georgia', dialCode: '+995' },
+  { code: 'GF', name: 'French Guiana', dialCode: '+594' },
+  { code: 'GG', name: 'Guernsey', dialCode: '+44' },
+  { code: 'GH', name: 'Ghana', dialCode: '+233' },
+  { code: 'GI', name: 'Gibraltar', dialCode: '+350' },
+  { code: 'GL', name: 'Greenland', dialCode: '+299' },
+  { code: 'GM', name: 'Gambia', dialCode: '+220' },
+  { code: 'GN', name: 'Guinea', dialCode: '+224' },
+  { code: 'GP', name: 'Guadeloupe', dialCode: '+590' },
+  { code: 'GQ', name: 'Equatorial Guinea', dialCode: '+240' },
+  { code: 'GR', name: 'Greece', dialCode: '+30' },
+  { code: 'GS', name: 'South Georgia and the South Sandwich Islands', dialCode: '+500' },
+  { code: 'GT', name: 'Guatemala', dialCode: '+502' },
+  { code: 'GU', name: 'Guam', dialCode: '+1671' },
+  { code: 'GW', name: 'Guinea-Bissau', dialCode: '+245' },
+  { code: 'GY', name: 'Guyana', dialCode: '+592' },
+  { code: 'HK', name: 'Hong Kong', dialCode: '+852' },
+  { code: 'HM', name: 'Heard Island and McDonald Islands', dialCode: '+672' },
+  { code: 'HN', name: 'Honduras', dialCode: '+504' },
+  { code: 'HR', name: 'Croatia', dialCode: '+385' },
+  { code: 'HT', name: 'Haiti', dialCode: '+509' },
+  { code: 'HU', name: 'Hungary', dialCode: '+36' },
+  { code: 'ID', name: 'Indonesia', dialCode: '+62' },
+  { code: 'IE', name: 'Ireland', dialCode: '+353' },
+  { code: 'IL', name: 'Israel', dialCode: '+972' },
+  { code: 'IM', name: 'Isle of Man', dialCode: '+44' },
+  { code: 'IN', name: 'India', dialCode: '+91' },
+  { code: 'IO', name: 'British Indian Ocean Territory', dialCode: '+246' },
+  { code: 'IQ', name: 'Iraq', dialCode: '+964' },
+  { code: 'IR', name: 'Iran, Islamic Republic of', dialCode: '+98' },
+  { code: 'IS', name: 'Iceland', dialCode: '+354' },
+  { code: 'IT', name: 'Italy', dialCode: '+39' },
+  { code: 'JE', name: 'Jersey', dialCode: '+44' },
+  { code: 'JM', name: 'Jamaica', dialCode: '+1876' },
+  { code: 'JO', name: 'Jordan', dialCode: '+962' },
+  { code: 'JP', name: 'Japan', dialCode: '+81' },
+  { code: 'KE', name: 'Kenya', dialCode: '+254' },
+  { code: 'KG', name: 'Kyrgyzstan', dialCode: '+996' },
+  { code: 'KH', name: 'Cambodia', dialCode: '+855' },
+  { code: 'KI', name: 'Kiribati', dialCode: '+686' },
+  { code: 'KM', name: 'Comoros', dialCode: '+269' },
+  { code: 'KN', name: 'Saint Kitts and Nevis', dialCode: '+1869' },
+  { code: 'KP', name: 'Korea, Democratic People\'s Republic of', dialCode: '+850' },
+  { code: 'KR', name: 'Korea, Republic of', dialCode: '+82' },
+  { code: 'KW', name: 'Kuwait', dialCode: '+965' },
+  { code: 'KY', name: 'Cayman Islands', dialCode: '+1345' },
+  { code: 'KZ', name: 'Kazakhstan', dialCode: '+7' },
+  { code: 'LA', name: 'Lao People\'s Democratic Republic', dialCode: '+856' },
+  { code: 'LB', name: 'Lebanon', dialCode: '+961' },
+  { code: 'LC', name: 'Saint Lucia', dialCode: '+1758' },
+  { code: 'LI', name: 'Liechtenstein', dialCode: '+423' },
+  { code: 'LK', name: 'Sri Lanka', dialCode: '+94' },
+  { code: 'LR', name: 'Liberia', dialCode: '+231' },
+  { code: 'LS', name: 'Lesotho', dialCode: '+266' },
+  { code: 'LT', name: 'Lithuania', dialCode: '+370' },
+  { code: 'LU', name: 'Luxembourg', dialCode: '+352' },
+  { code: 'LV', name: 'Latvia', dialCode: '+371' },
+  { code: 'LY', name: 'Libya', dialCode: '+218' },
+  { code: 'MA', name: 'Morocco', dialCode: '+212' },
+  { code: 'MC', name: 'Monaco', dialCode: '+377' },
+  { code: 'MD', name: 'Moldova, Republic of', dialCode: '+373' },
+  { code: 'ME', name: 'Montenegro', dialCode: '+382' },
+  { code: 'MF', name: 'Saint Martin (French part)', dialCode: '+590' },
+  { code: 'MG', name: 'Madagascar', dialCode: '+261' },
+  { code: 'MH', name: 'Marshall Islands', dialCode: '+692' },
+  { code: 'MK', name: 'North Macedonia', dialCode: '+389' },
+  { code: 'ML', name: 'Mali', dialCode: '+223' },
+  { code: 'MM', name: 'Myanmar', dialCode: '+95' },
+  { code: 'MN', name: 'Mongolia', dialCode: '+976' },
+  { code: 'MO', name: 'Macao', dialCode: '+853' },
+  { code: 'MP', name: 'Northern Mariana Islands', dialCode: '+1670' },
+  { code: 'MQ', name: 'Martinique', dialCode: '+596' },
+  { code: 'MR', name: 'Mauritania', dialCode: '+222' },
+  { code: 'MS', name: 'Montserrat', dialCode: '+1664' },
+  { code: 'MT', name: 'Malta', dialCode: '+356' },
+  { code: 'MU', name: 'Mauritius', dialCode: '+230' },
+  { code: 'MV', name: 'Maldives', dialCode: '+960' },
+  { code: 'MW', name: 'Malawi', dialCode: '+265' },
+  { code: 'MX', name: 'Mexico', dialCode: '+52' },
+  { code: 'MY', name: 'Malaysia', dialCode: '+60' },
+  { code: 'MZ', name: 'Mozambique', dialCode: '+258' },
+  { code: 'NA', name: 'Namibia', dialCode: '+264' },
+  { code: 'NC', name: 'New Caledonia', dialCode: '+687' },
+  { code: 'NE', name: 'Niger', dialCode: '+227' },
+  { code: 'NF', name: 'Norfolk Island', dialCode: '+672' },
+  { code: 'NG', name: 'Nigeria', dialCode: '+234' },
+  { code: 'NI', name: 'Nicaragua', dialCode: '+505' },
+  { code: 'NL', name: 'Netherlands', dialCode: '+31' },
+  { code: 'NO', name: 'Norway', dialCode: '+47' },
+  { code: 'NP', name: 'Nepal', dialCode: '+977' },
+  { code: 'NR', name: 'Nauru', dialCode: '+674' },
+  { code: 'NU', name: 'Niue', dialCode: '+683' },
+  { code: 'NZ', name: 'New Zealand', dialCode: '+64' },
+  { code: 'OM', name: 'Oman', dialCode: '+968' },
+  { code: 'PA', name: 'Panama', dialCode: '+507' },
+  { code: 'PE', name: 'Peru', dialCode: '+51' },
+  { code: 'PF', name: 'French Polynesia', dialCode: '+689' },
+  { code: 'PG', name: 'Papua New Guinea', dialCode: '+675' },
+  { code: 'PH', name: 'Philippines', dialCode: '+63' },
+  { code: 'PK', name: 'Pakistan', dialCode: '+92' },
+  { code: 'PL', name: 'Poland', dialCode: '+48' },
+  { code: 'PM', name: 'Saint Pierre and Miquelon', dialCode: '+508' },
+  { code: 'PN', name: 'Pitcairn', dialCode: '+64' },
+  { code: 'PR', name: 'Puerto Rico', dialCode: '+1787' },
+  { code: 'PS', name: 'Palestine, State of', dialCode: '+970' },
+  { code: 'PT', name: 'Portugal', dialCode: '+351' },
+  { code: 'PW', name: 'Palau', dialCode: '+680' },
+  { code: 'PY', name: 'Paraguay', dialCode: '+595' },
+  { code: 'QA', name: 'Qatar', dialCode: '+974' },
+  { code: 'RE', name: 'Réunion', dialCode: '+262' },
+  { code: 'RO', name: 'Romania', dialCode: '+40' },
+  { code: 'RS', name: 'Serbia', dialCode: '+381' },
+  { code: 'RU', name: 'Russian Federation', dialCode: '+7' },
+  { code: 'RW', name: 'Rwanda', dialCode: '+250' },
+  { code: 'SA', name: 'Saudi Arabia', dialCode: '+966' },
+  { code: 'SB', name: 'Solomon Islands', dialCode: '+677' },
+  { code: 'SC', name: 'Seychelles', dialCode: '+248' },
+  { code: 'SD', name: 'Sudan', dialCode: '+249' },
+  { code: 'SE', name: 'Sweden', dialCode: '+46' },
+  { code: 'SG', name: 'Singapore', dialCode: '+65' },
+  { code: 'SH', name: 'Saint Helena, Ascension and Tristan da Cunha', dialCode: '+290' },
+  { code: 'SI', name: 'Slovenia', dialCode: '+386' },
+  { code: 'SJ', name: 'Svalbard and Jan Mayen', dialCode: '+47' },
+  { code: 'SK', name: 'Slovakia', dialCode: '+421' },
+  { code: 'SL', name: 'Sierra Leone', dialCode: '+232' },
+  { code: 'SM', name: 'San Marino', dialCode: '+378' },
+  { code: 'SN', name: 'Senegal', dialCode: '+221' },
+  { code: 'SO', name: 'Somalia', dialCode: '+252' },
+  { code: 'SR', name: 'Suriname', dialCode: '+597' },
+  { code: 'SS', name: 'South Sudan', dialCode: '+211' },
+  { code: 'ST', name: 'Sao Tome and Principe', dialCode: '+239' },
+  { code: 'SV', name: 'El Salvador', dialCode: '+503' },
+  { code: 'SX', name: 'Sint Maarten (Dutch part)', dialCode: '+1721' },
+  { code: 'SY', name: 'Syrian Arab Republic', dialCode: '+963' },
+  { code: 'SZ', name: 'Eswatini', dialCode: '+268' },
+  { code: 'TC', name: 'Turks and Caicos Islands', dialCode: '+1649' },
+  { code: 'TD', name: 'Chad', dialCode: '+235' },
+  { code: 'TF', name: 'French Southern Territories', dialCode: '+262' },
+  { code: 'TG', name: 'Togo', dialCode: '+228' },
+  { code: 'TH', name: 'Thailand', dialCode: '+66' },
+  { code: 'TJ', name: 'Tajikistan', dialCode: '+992' },
+  { code: 'TK', name: 'Tokelau', dialCode: '+690' },
+  { code: 'TL', name: 'Timor-Leste', dialCode: '+670' },
+  { code: 'TM', name: 'Turkmenistan', dialCode: '+993' },
+  { code: 'TN', name: 'Tunisia', dialCode: '+216' },
+  { code: 'TO', name: 'Tonga', dialCode: '+676' },
+  { code: 'TR', name: 'Turkey', dialCode: '+90' },
+  { code: 'TT', name: 'Trinidad and Tobago', dialCode: '+1868' },
+  { code: 'TV', name: 'Tuvalu', dialCode: '+688' },
+  { code: 'TW', name: 'Taiwan, Province of China', dialCode: '+886' },
+  { code: 'TZ', name: 'Tanzania, United Republic of', dialCode: '+255' },
+  { code: 'UA', name: 'Ukraine', dialCode: '+380' },
+  { code: 'UG', name: 'Uganda', dialCode: '+256' },
+  { code: 'UM', name: 'United States Minor Outlying Islands', dialCode: '+1' },
+  { code: 'US', name: 'United States', dialCode: '+1' },
+  { code: 'UY', name: 'Uruguay', dialCode: '+598' },
+  { code: 'UZ', name: 'Uzbekistan', dialCode: '+998' },
+  { code: 'VA', name: 'Holy See (Vatican City State)', dialCode: '+379' },
+  { code: 'VC', name: 'Saint Vincent and the Grenadines', dialCode: '+1784' },
+  { code: 'VE', name: 'Venezuela', dialCode: '+58' },
+  { code: 'VG', name: 'Virgin Islands, British', dialCode: '+1284' },
+  { code: 'VI', name: 'Virgin Islands, U.S.', dialCode: '+1340' },
+  { code: 'VN', name: 'Viet Nam', dialCode: '+84' },
+  { code: 'VU', name: 'Vanuatu', dialCode: '+678' },
+  { code: 'WF', name: 'Wallis and Futuna', dialCode: '+681' },
+  { code: 'WS', name: 'Samoa', dialCode: '+685' },
+  { code: 'YE', name: 'Yemen', dialCode: '+967' },
+  { code: 'YT', name: 'Mayotte', dialCode: '+262' },
+  { code: 'ZA', name: 'South Africa', dialCode: '+27' },
+  { code: 'ZM', name: 'Zambia', dialCode: '+260' },
+  { code: 'ZW', name: 'Zimbabwe', dialCode: '+263' }
 ];
\ No newline at end of file
diff --git a/frontend/src/app/services/auth.service.ts b/frontend/src/app/services/auth.service.ts
index 2733a0625..5b96b293b 100644
--- a/frontend/src/app/services/auth.service.ts
+++ b/frontend/src/app/services/auth.service.ts
@@ -31,7 +31,7 @@ export class AuthService {
         map(res => {
           if ((environment as any).saas) {
             // @ts-ignore
-            fbq('trackCustom', 'Signup');
+            window.fbq?.('trackCustom', 'Signup');
           }
           this._notifications.showSuccessSnackbar(`Confirmation email has been sent to you.`);
           this.auth.next(res);