Merge pull request #1178 from alphagov/style-ses-email

Update SES email template with GOV.UK branding and content
alphagov · Feb 10, 2025 · ebb0e78 · ebb0e78
2 parents a8c6b7e + 26bc389
commit ebb0e78
Show file tree

Hide file tree

Showing 8 changed files with 218 additions and 23 deletions.
diff --git a/app/models/question/file.rb b/app/models/question/file.rb
@@ -32,6 +32,12 @@ def show_answer
       original_filename
     end
 
+    def show_answer_in_email
+      return nil if original_filename.blank?
+
+      I18n.t("mailer.submission.file_attached", filename: original_filename)
+    end
+
     def before_save
       if file.blank?
         # set to a blank string so that we serialize the answer correctly when an optional question isn't answered

diff --git a/app/views/aws_ses_form_submission_mailer/submission_email.html.erb b/app/views/aws_ses_form_submission_mailer/submission_email.html.erb
@@ -1,28 +1,27 @@
 <p>
-  This is a completed "<%= @mailer_options.title %>" form.
+  <%= I18n.t("mailer.submission.title", title: @mailer_options.title) %>
 </p>
 <p>
-  This form was submitted at <%= @mailer_options.timestamp.strftime("%l:%M%P").strip %> on <%= @mailer_options.timestamp.strftime("%-d %B %Y") %>
+  <%= I18n.t("mailer.submission.time", time: @mailer_options.timestamp.strftime("%l:%M%P").strip, date: @mailer_options.timestamp.strftime("%-d %B %Y") ) %>
 </p>
 <p>
-  GOV.UK Forms reference number: <%= @mailer_options.submission_reference %><br>
+  <%= I18n.t("mailer.submission.reference", submission_reference: @mailer_options.submission_reference) %>
+</p>
+<p style="margin: 0 0 20px 0; border-left: 10px solid #B1B4B6; padding: 15px;">
+  <%= I18n.t("mailer.submission.check_before_using") %>
 </p>
 
-<hr style="border: 0; height: 1px; background: #B1B4B6; Margin: 30px 0 30px 0;">
+<hr style="border: 0; height: 1px; background: #B1B4B6; margin: 30px 0 30px 0;">
 
 <%= @answer_content.html_safe %>
 
-<hr style="border: 0; height: 1px; background: #B1B4B6; Margin: 30px 0 30px 0;">
+<hr style="border: 0; height: 1px; background: #B1B4B6; margin: 30px 0 30px 0;">
 
-<blockquote
-  style="Margin: 0 0 20px 0; border-left: 10px solid #B1B4B6;
+<div
+  style="margin: 0 0 20px 0; border-left: 10px solid #B1B4B6;
     padding: 15px 0 0.1px 15px; font-size: 19px; line-height: 25px;"
 >
-  <h2>You cannot reply to this email</h2>
-  <p>
-    If you need to contact the person who completed this form, you’ll need to contact them directly.
-  </p>
-  <p>
-    If you’re experiencing a technical issue with this form, <a href="https://www.forms.service.gov.uk/support">contact the GOV.UK Forms team</a> with details of the issue and the form it relates to.
-  </p>
-</blockquote>
+  <h2><%= I18n.t("mailer.submission.cannot_reply.heading") %></h2>
+  <%= I18n.t("mailer.submission.cannot_reply.contact_form_filler").html_safe %>
+  <%= I18n.t("mailer.submission.cannot_reply.contact_forms_team").html_safe %>
+</div>
diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb
@@ -1,13 +1,157 @@
+<!-- BEGIN app/views/layouts/mailer.html.erb -->
+
 <!DOCTYPE html>
-<html>
+<html lang="en">
+
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta content="telephone=no" name="format-detection"> <!-- need to add formatting for real phone numbers -->
+    <meta name="viewport" content="width=device-width">
+    <title>{{ subject }}</title>
+
     <style>
-      /* Email styles need to be inline */
+      @media only screen and (min-device-width: 581px) {
+        .content {
+          width: 580px !important;
+        }
+      }
+      body { margin:0 !important; }
+      div[style*="margin: 16px 0"] { margin:0 !important; }
     </style>
+
+    <!--[if gte mso 9]>
+      <style>
+        li {
+          margin-left: 4px !important;
+        }
+        table {
+          mso-table-lspace: 0pt;
+          mso-table-rspace: 0pt;
+        }
+      </style>
+    <![endif]-->
+
   </head>
 
-  <body>
-    <%= yield %>
+  <body style="font-family: Helvetica, Arial, sans-serif;font-size: 16px;margin: 0;color:#0b0c0c;">
+    <table role="presentation" width="100%" style="border-collapse: collapse;min-width: 100%;width: 100% !important;" cellpadding="0" cellspacing="0" border="0">
+      <tr>
+        <td width="100%" height="53" bgcolor="#0b0c0c">
+          <!--[if (gte mso 9)|(IE)]>
+            <table role="presentation" width="580" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;width: 580px;">
+              <tr>
+                <td>
+          <![endif]-->
+          <table role="presentation" width="100%" style="border-collapse: collapse;max-width: 580px;" cellpadding="0" cellspacing="0" border="0" align="center">
+            <tr>
+              <td width="70" bgcolor="#0b0c0c" valign="middle">
+                <a href="https://www.gov.uk" title="Go to the GOV.UK homepage" style="text-decoration: none;">
+                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
+                    <tr>
+                      <td style="padding-left: 10px">
+                        <img src="https://static.notifications.service.gov.uk/images/govuk-logotype-tudor-crown.png"
+                                                alt=""
+                                                height="32"
+                                                border="0"
+                                                style="Margin-top: 2px;"
+                                                >
+                      </td>
+                      <td style="font-size: 28px; line-height: 1.315789474; Margin-top: 4px; padding-left: 8px;">
+                        <span style="
+                                                font-family: Helvetica, Arial, sans-serif;
+                                                font-weight: 700;
+                                                color: #ffffff;
+                                                text-decoration: none;
+                                                vertical-align:middle;
+                                                display: inline-block;
+                                                ">GOV.UK</span>
+                      </td>
+                    </tr>
+                  </table>
+                </a>
+              </td>
+            </tr>
+          </table>
+          <!--[if (gte mso 9)|(IE)]>
+          </td>
+        </tr>
+      </table>
+          <![endif]-->
+        </td>
+      </tr>
+    </table>
+    <table
+         role="presentation"
+         class="content"
+         align="center"
+         cellpadding="0"
+         cellspacing="0"
+         border="0"
+         style="border-collapse: collapse;max-width: 580px; width: 100% !important;"
+         width="100%"
+         >
+      <tr>
+        <td width="10" height="10" valign="middle"></td>
+        <td>
+          <!--[if (gte mso 9)|(IE)]>
+            <table role="presentation" width="560" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;width: 560px;">
+              <tr>
+                <td height="10">
+          <![endif]-->
+          <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
+            <tr>
+              <td bgcolor="#1D70B8" width="100%" height="10"></td>
+            </tr>
+          </table>
+          <!--[if (gte mso 9)|(IE)]>
+          </td>
+        </tr>
+      </table>
+          <![endif]-->
+        </td>
+        <td width="10" valign="middle" height="10"></td>
+      </tr>
+    </table>
+    <table
+         role="presentation"
+         class="content"
+         align="center"
+         cellpadding="0"
+         cellspacing="0"
+         border="0"
+         style="border-collapse: collapse;max-width: 580px; width: 100% !important;"
+         width="100%"
+         >
+      <tr>
+        <td height="30"><br>
+        </td>
+      </tr>
+      <tr>
+        <td width="10" valign="middle"><br>
+        </td>
+        <td style="font-family: Helvetica, Arial, sans-serif; font-size: 19px; line-height: 1.315789474; max-width: 560px;">
+          <!--[if (gte mso 9)|(IE)]>
+            <table role="presentation" width="560" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;width: 560px;">
+              <tr>
+                <td style="font-family: Helvetica, Arial, sans-serif; font-size: 19px; line-height: 1.315789474;">
+          <![endif]-->
+
+          <%= yield %>
+
+          <!--[if (gte mso 9)|(IE)]>
+          </td>
+        </tr>
+      </table>
+          <![endif]-->
+        </td>
+        <td width="10" valign="middle"><br>
+        </td>
+      </tr>
+      <tr>
+        <td height="30"><br>
+        </td>
+      </tr>
+    </table>
   </body>
 </html>
+<!-- END app/views/layouts/mailer.html.erb -->
diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -70,4 +70,7 @@
   # Allow storing session in cookies. This should only be allowed in local
   # development and testing. In production redis should be used
   config.unsafe_session_storage = true
+
+  # Configure previews for mailers - https://guides.rubyonrails.org/action_mailer_basics.html#previewing-emails
+  config.action_mailer.preview_paths << Rails.root.join("spec/mailers/").to_s
 end
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -192,8 +192,17 @@ en:
         send_confirmation: Do you want to get an email confirming your form has been submitted?
   mailer:
     submission:
+      cannot_reply:
+        contact_form_filler: "<p>If you need to contact the person who completed this form, you’ll need to contact them directly.</p>"
+        contact_forms_team: <p>If you’re experiencing a technical issue with this form, <a href="https://www.forms.service.gov.uk/support">contact the GOV.UK Forms team</a> with details of the issue and the form it relates to.</p>
+        heading: You cannot reply to this email
+      check_before_using: Check that this data looks safe before you use it
+      file_attached: "%{filename} (attached to this email)"
       from: GOV.UK Forms <%{email_address}>
+      reference: 'GOV.UK Forms reference number: %{submission_reference}'
       subject: 'Form submission: %{form_title} - reference: %{reference}'
+      time: This form was submitted at %{time} on %{date}
+      title: This is a completed “%{title}” form.
   mode:
     phase_banner_tag_preview-archived: Archived preview
     phase_banner_tag_preview-draft: Draft preview

diff --git a/spec/mailers/aws_ses_form_submission_mailer_preview.rb b/spec/mailers/aws_ses_form_submission_mailer_preview.rb
@@ -0,0 +1,12 @@
+class AwsSesFormSubmissionMailerPreview < ActionMailer::Preview
+  def submission_email
+    AwsSesFormSubmissionMailer.submission_email(answer_content: "<h2>What's your email address?</h2><p>[email protected]</p>",
+                                                submission_email_address: "[email protected]",
+                                                mailer_options: FormSubmissionService::MailerOptions.new(title: "Form 1",
+                                                                                                         preview_mode: false,
+                                                                                                         timestamp: Time.zone.now,
+                                                                                                         submission_reference: Faker::Alphanumeric.alphanumeric(number: 8).upcase,
+                                                                                                         payment_url: nil),
+                                                files: {})
+  end
+end
diff --git a/spec/mailers/aws_ses_form_submission_mailer_spec.rb b/spec/mailers/aws_ses_form_submission_mailer_spec.rb
@@ -26,12 +26,34 @@
       expect(mail.subject).to eq("Form submission: #{title} - reference: #{submission_reference}")
     end
 
+    it "has a link to GOV.UK" do
+      expect(mail.body).to have_link("GOV.UK", href: "https://www.gov.uk")
+    end
+
     it "includes the answers" do
       expect(mail.body).to match(answer_content)
     end
 
+    it "includes the form title text" do
+      expect(mail.body).to have_css("p", text: I18n.t("mailer.submission.title", title:))
+    end
+
+    it "includes text about the submission time" do
+      expect(mail.body).to have_css("p", text: I18n.t("mailer.submission.time", time: submission_timestamp.strftime("%l:%M%P").strip, date: submission_timestamp.strftime("%-d %B %Y")))
+    end
+
     it "includes the submission reference" do
-      expect(mail.body).to match("reference number: #{submission_reference}")
+      expect(mail.body).to have_css("p", text: I18n.t("mailer.submission.reference", submission_reference:))
+    end
+
+    it "includes text about checking the answers" do
+      expect(mail.body).to have_css("p", text: I18n.t("mailer.submission.check_before_using"))
+    end
+
+    it "includes the warning about not replying" do
+      expect(mail.body).to have_css("h2", text: I18n.t("mailer.submission.cannot_reply.heading"))
+      expect(mail.body).to include(I18n.t("mailer.submission.cannot_reply.contact_form_filler"))
+      expect(mail.body).to include(I18n.t("mailer.submission.cannot_reply.contact_forms_team"))
     end
 
     describe "submission date/time" do

diff --git a/spec/services/aws_ses_submission_service_spec.rb b/spec/services/aws_ses_submission_service_spec.rb
@@ -88,7 +88,7 @@
           service.submit
 
           expect(AwsSesFormSubmissionMailer).to have_received(:submission_email).with(
-            { answer_content: "<h2>#{question.question_text}</h2><p>#{question.original_filename}</p>",
+            { answer_content: "<h2>#{question.question_text}</h2><p>#{I18n.t('mailer.submission.file_attached', filename: question.original_filename)}</p>",
               submission_email_address: submission_email,
               mailer_options: instance_of(FormSubmissionService::MailerOptions),
               files: { question.original_filename => file_content } },
@@ -148,7 +148,7 @@
               expected_csv_content = "Reference,Submitted at,#{question.question_text}\n#{submission_reference},2022-09-14T08:00:00Z,#{question.original_filename}\n"
 
               expect(AwsSesFormSubmissionMailer).to have_received(:submission_email).with(
-                { answer_content: "<h2>#{question.question_text}</h2><p>#{question.original_filename}</p>",
+                { answer_content: "<h2>#{question.question_text}</h2><p>#{I18n.t('mailer.submission.file_attached', filename: question.original_filename)}</p>",
                   submission_email_address: submission_email,
                   mailer_options: instance_of(FormSubmissionService::MailerOptions),
                   files: {