Allow service contact details to be phone number, email or url

Service contact details are needed if the upload document permission is
enabled - this used to be a link but services can now choose to use a
link, email address or phone number. The form to add or change service
contact details now gives these options and validates the data according
to the type of contact details provided.

When validating phone numbers we can't use the existing validation
because we want to allow landlines too, so there is a basic check that
the phone number is the right length and doesn't include certain
characters.

app/assets/javascripts/main.js

@@ -2,6 +2,9 @@ $(() => $("time.timeago").timeago());
 
 $(() => GOVUK.stickAtTopWhenScrolling.init());
 
+var showHideContent = new GOVUK.ShowHideContent();
+showHideContent.init();
+
 $(() => GOVUK.modules.start());
 
 $(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus'));

app/main/forms.py

@@ -10,6 +10,7 @@ from notifications_utils.columns import Columns
 from notifications_utils.formatters import strip_whitespace
 from notifications_utils.recipients import (
     InvalidPhoneError,
+    normalise_phone_number,
     validate_phone_number,
 )
 from wtforms import (
@@ -592,13 +593,41 @@ class ProviderForm(StripWhitespaceForm):
     priority = IntegerField('Priority', [validators.NumberRange(min=1, max=100, message="Must be between 1 and 100")])
 
 
-class ServiceContactLinkForm(StripWhitespaceForm):
-    url = StringField(
-        "URL",
-        validators=[DataRequired(message='Can’t be empty'),
-                    URL(message='Must be a valid URL')]
+class ServiceContactDetailsForm(StripWhitespaceForm):
+    contact_details_type = RadioField(
+        'Type of contact details',
+        choices=[
+            ('url', 'Link'),
+            ('email_address', 'Email address'),
+            ('phone_number', 'Phone number'),
+        ],
+        validators=[DataRequired()]
     )
 
+    url = StringField("URL")
+    email_address = EmailField("Email address")
+    phone_number = StringField("Phone number")
+
+    def validate(self):
+
+        if self.contact_details_type.data == 'url':
+            self.url.validators = [DataRequired(), URL(message='Must be a valid URL')]
+
+        elif self.contact_details_type.data == 'email_address':
+            self.email_address.validators = [DataRequired(), Length(min=5, max=255), ValidEmail()]
+
+        elif self.contact_details_type.data == 'phone_number':
+            # we can't use the existing phone number validation functions here since we want to allow landlines
+            def valid_phone_number(self, num):
+                try:
+                    normalise_phone_number(num.data)
+                    return True
+                except InvalidPhoneError:
+                    raise ValidationError('Must be a valid phone number')
+            self.phone_number.validators = [DataRequired(), Length(min=5, max=20), valid_phone_number]
+
+        return super().validate()
+
 
 class ServiceReplyToEmailForm(StripWhitespaceForm):
     email_address = email_address(label='Email reply to address', gov_user=False)

app/main/views/service_settings.py

@@ -34,7 +34,7 @@ from app.main.forms import (
     OrganisationTypeForm,
     RenameServiceForm,
     RequestToGoLiveForm,
-    ServiceContactLinkForm,
+    ServiceContactDetailsForm,
     ServiceDataRetentionEditForm,
     ServiceDataRetentionForm,
     ServiceEditInboundNumberForm,
@@ -337,7 +337,7 @@ def service_switch_can_send_precompiled_letter(service_id):
 @login_required
 @user_is_platform_admin
 def service_switch_can_upload_document(service_id):
-    form = ServiceContactLinkForm()
+    form = ServiceContactDetailsForm()
 
     # If turning the permission off, or turning it on and the service already has a contact_link,
     # don't show the form to add the link
@@ -346,9 +346,11 @@ def service_switch_can_upload_document(service_id):
         return redirect(url_for('.service_settings', service_id=service_id))
 
     if form.validate_on_submit():
+        contact_type = form.contact_details_type.data
+
         service_api_client.update_service(
             current_service.id,
-            contact_link=form.url.data
+            contact_link=form.data[contact_type]
         )
         switch_service_permissions(service_id, 'upload_document')
         return redirect(url_for('.service_settings', service_id=service_id))
@@ -397,15 +399,22 @@ def resume_service(service_id):
 @login_required
 @user_has_permissions('manage_service')
 def service_set_contact_link(service_id):
-    form = ServiceContactLinkForm()
+    form = ServiceContactDetailsForm()
 
     if request.method == 'GET':
-        form.url.data = current_service.get('contact_link')
+        contact_details = current_service.get('contact_link')
+        contact_type = check_contact_details_type(contact_details)
+        field_to_update = getattr(form, contact_type)
+
+        form.contact_details_type.data = contact_type
+        field_to_update.data = contact_details
 
     if form.validate_on_submit():
+        contact_type = form.contact_details_type.data
+
         service_api_client.update_service(
             current_service.id,
-            contact_link=form.url.data
+            contact_link=form.data[contact_type]
         )
         return redirect(url_for('.service_settings', service_id=current_service.id))
 
@@ -1058,3 +1067,12 @@ def convert_dictionary_to_wtforms_choices_format(dictionary, value, label):
     return [
         (item[value], item[label]) for item in dictionary
     ]
+
+
+def check_contact_details_type(contact_details):
+    if contact_details.startswith('http'):
+        return 'url'
+    elif '@' in contact_details:
+        return 'email_address'
+    else:
+        return 'phone_number'

app/templates/components/radios.html

@@ -32,8 +32,8 @@
   </div>
 {% endmacro %}
 
-{% macro radio(option, disable=[], option_hints={}) %}
-  <div class="multiple-choice">
+{% macro radio(option, disable=[], option_hints={}, data_target=None) %}
+  <div class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
     <input
       id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
       {% if option.data in disable %}

app/templates/views/service-settings.html

@@ -47,7 +47,7 @@
         {% endcall %}
 
         {% call settings_row(if_has_permission='upload_document') %}
-          {{ text_field('Contact link') }}
+          {{ text_field('Contact details') }}
           {{ text_field(current_service.contact_link, truncate=true) }}
           {{ edit_field(
               'Change',

app/templates/views/service-settings/contact_link.html

@@ -1,24 +1,46 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/radios.html" import radio, radios_wrapper %}
 
 {% block service_page_title %}
-  {{ 'Change link on' if 'upload_document' in current_service.permissions else 'Add link for' }} ‘Download your document’ page
+  {{ 'Change' if 'upload_document' in current_service.permissions else 'Add' }} contact details for ‘Download your document’ page
 {% endblock %}
 
 {% block maincolumn_content %}
   <div class="grid-row">
     <div class="column-five-sixths">
       <h1 class="heading-large">
-        {{ 'Change link on' if 'upload_document' in current_service.permissions else 'Add link for' }} ‘Download your document’ page
+        {{ 'Change' if 'upload_document' in current_service.permissions else 'Add' }} contact details for ‘Download your document’ page
       </h1>
       <p>
-        When you send users a document to download, you need to include a link to your service
+        When you send users a document to download, you need to include the contact details for your service
         on the download page. This is so users can contact you if there’s a problem (for example,
         if the link to download the document has expired).
       </p>
-      <form method="post">
-        {{ textbox(form.url, width='1-1') }}
+      <form method="post" novalidate>
+
+        {% call radios_wrapper(form.contact_details_type, hide_legend=true) %}
+          {% for option in form.contact_details_type %}
+            {% if option.data == 'url' %}
+              {{ radio(option, data_target="url-type") }}
+              <div class="panel panel-border-narrow js-hidden" id="url-type">
+                {{ textbox(form.url, label=' ', width='1-1') }}
+              </div>
+            {% elif option.data == 'email_address' %}
+              {{ radio(option, data_target="email-address-type") }}
+              <div class="panel panel-border-narrow js-hidden" id="email-address-type">
+                {{ textbox(form.email_address, label=' ', width='1-1') }}
+              </div>
+            {% elif option.data == 'phone_number' %}
+              {{ radio(option, data_target="phone-number-type") }}
+              <div class="panel panel-border-narrow js-hidden" id="phone-number-type">
+                {{ textbox(form.phone_number, label=' ', width='1-1') }}
+              </div>
+            {% endif %}
+          {% endfor %}
+        {% endcall %}
+
         {{ page_footer(
           'Save',
           back_link=url_for('.service_settings', service_id=current_service.id),