Format phone on readonly

src/registrar/assets/sass/_theme/_buttons.scss

@@ -1,4 +1,5 @@
 @use "uswds-core" as *;
+@use "cisa_colors" as *;
 
 /* Make "placeholder" links visually obvious */
 a[href$="todo"]::after {

src/registrar/forms/user_profile.py

@@ -60,6 +60,10 @@ class UserProfileForm(forms.ModelForm):
         }
         self.fields["phone"].error_messages["required"] = "Enter your phone number."
 
+        if self.instance and self.instance.phone:
+            print(f"what is the instace? {self.instance.phone}")
+            self.fields["phone"].initial = self.instance.phone.as_national
+
         DomainHelper.disable_field(self.fields["email"], disable_required=True)
 
 

src/registrar/templates/includes/readonly_input.html

@@ -1,4 +1,4 @@
-{% load static field_helpers url_helpers %}
+{% load static field_helpers url_helpers custom_filters %}
 
 <div id="{{field.name}}__edit-button-readonly" class="margin-top-2 margin-bottom-1 input-with-edit-button {% if not field.value and field.field.required %}input-with-edit-button__error{% endif %}">
     <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
@@ -9,6 +9,10 @@
         {%endif %}
     </svg>
     <div class="display-inline padding-left-05 margin-left-3 readonly-field {% if not field.field.required %}text-base{% endif %}">
+        {% if field.name != "phone" %}
         {{ field.value }}
+        {% else %}
+        {{ field.value|format_phone }}
+        {% endif %}
     </div>
 </div>

src/registrar/templatetags/custom_filters.py

@@ -2,6 +2,8 @@ import logging
 from django import template
 import re
 from registrar.models.domain_request import DomainRequest
+from phonenumber_field.phonenumber import PhoneNumber
+from phonenumber_field.widgets import RegionalPhoneNumberWidget
 
 register = template.Library()
 logger = logging.getLogger(__name__)
@@ -133,3 +135,13 @@ def get_region(state):
         return regions.get(state.upper(), "N/A")
     else:
         return None
+
+@register.filter
+def format_phone(value):
+    """Converts a phonenumber to a national format"""
+    if value:
+        phone_number = value
+        if isinstance(value, str):
+            phone_number = PhoneNumber.from_string(value)
+        return phone_number.as_national
+    return value