From 273f88ab145643f9e2d7c54e1aecd4ca07fe652d Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Mon, 3 Jun 2024 12:03:25 -0600
Subject: [PATCH] Format phone on readonly

---
 src/registrar/assets/sass/_theme/_buttons.scss       |  1 +
 src/registrar/forms/user_profile.py                  |  4 ++++
 src/registrar/templates/includes/readonly_input.html |  6 +++++-
 src/registrar/templatetags/custom_filters.py         | 12 ++++++++++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss
index 9252fd5cf..6b08f9b35 100644
--- a/src/registrar/assets/sass/_theme/_buttons.scss
+++ b/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 {
diff --git a/src/registrar/forms/user_profile.py b/src/registrar/forms/user_profile.py
index 55e72fc16..f12ed0f5f 100644
--- a/src/registrar/forms/user_profile.py
+++ b/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)
 
 
diff --git a/src/registrar/templates/includes/readonly_input.html b/src/registrar/templates/includes/readonly_input.html
index 59a55090c..ebd5d788e 100644
--- a/src/registrar/templates/includes/readonly_input.html
+++ b/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>
diff --git a/src/registrar/templatetags/custom_filters.py b/src/registrar/templatetags/custom_filters.py
index 798558355..b5bb37b2c 100644
--- a/src/registrar/templatetags/custom_filters.py
+++ b/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