Merge pull request #377 from 18F/feature/contact-email-template

Update email templates and move contact form to standard template.
18F · Oct 8, 2014 · 87ac9db · 87ac9db
2 parents 7e2b9f9 + 20849dc
commit 87ac9db
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 79 deletions.
diff --git a/app/assets/javascripts/myusa.js b/app/assets/javascripts/myusa.js
@@ -137,8 +137,13 @@ $(document).ready(function () {
       $('.contact-flash').removeClass('hidden');
       btn.button('reset');
       btn.prop('disabled', false);
+      form[0].reset();
+    }).fail(function (error) {
+      $('.contact-flash .message').text("Whoops! Something went wrong.  We're really sorry.  Try emailing us at <a href='mailto:[email protected]'>[email protected]</a>.");
+      $('.contact-flash').removeClass('hidden');
+      btn.button('reset');
+      btn.prop('disabled', false);
     });
-    form[0].reset();
   });
 
 });
diff --git a/app/assets/stylesheets/mailers.css.scss b/app/assets/stylesheets/mailers.css.scss
@@ -52,14 +52,11 @@ body, #bodyTable{
 	background-color:#ffffff;
 }
 #bodyCell{
-	border-top:4px solid #BBBBBB;
 }
 #templateContainer{
-	border:1px solid #BBBBBB;
 }
 #templatePreheader{
 	background-color:#F4F4F4;
-	border-bottom:1px solid #CCCCCC;
 }
 .preheaderContent{
 	color:#808080;
@@ -75,8 +72,6 @@ body, #bodyTable{
 }
 #templateHeader{
 	background-color:#F4F4F4;
-	border-top:1px solid #FFFFFF;
-	border-bottom:1px solid #CCCCCC;
 }
 .headerContent{
 	color:#505050;
@@ -106,8 +101,6 @@ body, #bodyTable{
 /* ========== Body Styles ========== */
 #templateBody{
 	background-color:#F4F4F4;
-	border-top:1px solid #FFFFFF;
-	border-bottom:1px solid #CCCCCC;
 }
 .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
 	color:$blue-dark;
@@ -128,7 +121,7 @@ body, #bodyTable{
 	a.btn-myusa{
 	  font: bold 15px Arial;
 	  text-decoration: none;
-	  background-color: $blue-dark;
+	  background-color: $blue;
 
 	  padding: 4px 12px 4px 12px;
 	  border-top: 1px solid #CCCCCC;
@@ -149,7 +142,6 @@ body, #bodyTable{
 /* ========== Footer Styles ========== */
 #templateFooter{
 	background-color:#F4F4F4;
-	border-top:1px solid #FFFFFF;
 }
 .footerContent{
 	color:#808080;

diff --git a/app/mailers/contact_mailer.rb b/app/mailers/contact_mailer.rb
@@ -1,10 +1,13 @@
 class ContactMailer < ActionMailer::Base
+  layout 'mailers/notification_template'
   def contact_us(from, return_email, message)
     @from = from
     @message = message
+    @return_email = return_email
+    attachments.inline['logo.png'] = File.read('app/assets/images/myusa-logo.png')
     mail(
-      reply_to: return_email,
-      subject: t('email.contact_us.subject')
+      reply_to: @return_email,
+      subject: I18n.t('email.contact_us.subject', from: @from)
     )
   end
 end
diff --git a/app/mailers/notification_mailer.rb b/app/mailers/notification_mailer.rb
@@ -1,13 +1,12 @@
 class NotificationMailer < ActionMailer::Base
+  layout 'mailers/notification_template'
   def notification_email(notification)
     @notification = notification
     @app = @notification.app
     @user = User.find @notification.user_id
     attachments.inline['logo.png'] = File.read('app/assets/images/myusa-logo.png')
     mail(
       to: @user.email,
-      from: @notification.email_from_address,
-      reply_to: '[email protected]',
       subject: @notification.subject
     )
   end

diff --git a/app/models/notification.rb b/app/models/notification.rb
@@ -16,11 +16,6 @@ def view!
     self.update_attribute :viewed_at, Time.now
   end
 
-  def email_from_address
-    url = app.url.blank? ? app.redirect_uri : app.url
-    "no-reply@#{URI(url).host}"
-  end
-
   private
 
   def deliver_notification

diff --git a/app/views/contact_mailer/contact_us.html.erb b/app/views/contact_mailer/contact_us.html.erb
@@ -1,12 +1,44 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
-  </head>
-  <body>
-    <h1>New message from <%= @from %></h1>
-    <p>
-      <%= @message %>
-    </p>
-  </body>
-</html>
+<tr>
+  <td align="center" valign="top">
+    <!-- BEGIN HEADER // -->
+    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
+      <tr>
+        <td valign="top" class="headerContent">
+          <h1 class="left-20" >New message from <%= @from %></h1>
+        </td>
+        <td valign="top" class="headerContent"></td>
+      </tr>
+    </table>
+    <!-- // END HEADER -->
+  </td>
+</tr>
+<tr>
+  <td align="center" valign="top">
+    <!-- BEGIN BODY // -->
+    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
+      <tr>
+        <td valign="top" class="bodyContent" mc:edit="body_content">
+          <p>
+            From: <%= @from %>
+            <br/>
+            Email: <%= @return_email %>
+          </p>
+          <p><%= @message %></p>
+        </td>
+      </tr>
+    </table>
+    <!-- // END BODY -->
+  </td>
+</tr>
+<tr>
+  <td align="center" valign="top">
+    <!-- BEGIN FOOTER // -->
+    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
+      <tr>
+        <td valign="top" class="footerContent" style="padding-top:0; padding-bottom:40px;" mc:edit="footer_content02">
+        </td>
+      </tr>
+    </table>
+    <!-- // END FOOTER -->
+  </td>
+</tr>
diff --git a/app/views/devise_mailer/authentication_instructions.html.erb b/app/views/devise_mailer/authentication_instructions.html.erb
@@ -36,7 +36,7 @@
                                     <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
                                         <tr>
                                             <td valign="top" class="headerContent">
-                                            <%= image_tag attachments['logo.png'].url, alt: 'Sent by MyUSA', class: 'photo', height: '150', width: '200', class: 'left-20' -%>
+                                            <%= image_tag attachments['logo.png'].url, alt: 'Sent by MyUSA', class: 'photo', height: '38', width: '134', class: 'left-20' %>
                                             </td>
                                         </tr>
                                     </table>
@@ -51,8 +51,10 @@
                                             <td valign="top" class="bodyContent" mc:edit="body_content">
                                                 <p>Hello there <%= @resource.email %> </p>
                                                 <p>Below is your requested <%= link_to 'access link', new_user_session_url(email: @resource.email, token: @token.raw).html_safe %> to connect to MyUSA.</p>
+                                                <p>
                                                 <%= link_to 'Connect to MyUSA', new_user_session_url(email: @resource.email, token: @token.raw).html_safe, :class => 'btn-myusa'  %>
-                                                <p>If you do not want to connect to MyUSA from this email account, just ignore this message. </p>
+                                                </p>
+                                                <p>If you do not want to connect to MyUSA from this email account, just ignore this message.</p>
                                                 <p>Thanks!</p>
                                                 <p>- The MyUSA team</p>
                                             </td>

diff --git a/app/views/layouts/mailers/notification_template.html.erb b/app/views/layouts/mailers/notification_template.html.erb
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>*|MC:SUBJECT|*</title>
+    <%= stylesheet_link_tag "mailers" %>
+  </head>
+  <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
+    <center>
+      <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
+        <tr>
+          <td align="center" valign="top" id="bodyCell">
+            <!-- BEGIN TEMPLATE // -->
+            <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
+              <tr>
+              <td align="center" valign="top">
+                <!-- BEGIN PREHEADER // -->
+                  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
+                    <tr>
+                      <td valign="top" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;" mc:edit="preheader_content00">
+                      <%= link_to image_tag(attachments['logo.png'].url, alt: 'Sent from MyUSA', height: '25', width: '88', alt: 'Sent from MyUSA'), root_url %>
+                      </td>
+                      <!-- *|IFNOT:ARCHIVE_PAGE|* -->
+                      <td valign="top" width="180" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:0;" mc:edit="preheader_content01"></td>
+                      <!-- *|END:IF|* -->
+                    </tr>
+                  </table>
+                  <!-- // END PREHEADER -->
+                </td>
+              </tr>
+              <%= yield %>
+            </table>
+            <!-- // END TEMPLATE -->
+          </td>
+        </tr>
+      </table>
+    </center>
+  </body>
+</html>
diff --git a/app/views/marketing/_contact.html.erb b/app/views/marketing/_contact.html.erb
@@ -23,7 +23,7 @@
               <%= f.label 'Return Email:' %>
               <%= f.text_field :return_email, class: 'form-control', placeholder: 'What is your email address?' %>
             </div>
-            <%= f.submit 'Send Us Your Message', id: 'contact_submit', 'data-loading-text' => "Sending your message...",  class: 'btn btn-primary width-100' %>
+            <%= f.submit 'Send Us Your Message', id: 'contact_submit', 'data-loading-text' => "Sending your message...", class: 'btn btn-primary width-100' %>
           <% end %>
         </div>
       </div>

diff --git a/app/views/notification_mailer/notification_email.html.erb b/app/views/notification_mailer/notification_email.html.erb
@@ -1,33 +1,3 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-        <title>*|MC:SUBJECT|*</title>
-        <%= stylesheet_link_tag "mailers" %>
-    </head>
-    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
-      <center>
-          <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
-              <tr>
-                  <td align="center" valign="top" id="bodyCell">
-                      <!-- BEGIN TEMPLATE // -->
-                      <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
-                          <tr>
-                              <td align="center" valign="top">
-                                  <!-- BEGIN PREHEADER // -->
-                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
-                                        <tr>
-                                            <td valign="top" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;" mc:edit="preheader_content00">
-                                            <%= link_to image_tag(attachments['logo.png'].url, height: '50', width: '100', alt: 'Sent from MyUSA'), root_url -%>
-                                            </td>
-                                            <!-- *|IFNOT:ARCHIVE_PAGE|* -->
-                                            <td valign="top" width="180" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:0;" mc:edit="preheader_content01"></td>
-                                            <!-- *|END:IF|* -->
-                                        </tr>
-                                    </table>
-                                    <!-- // END PREHEADER -->
-                                </td>
-                            </tr>
                           <tr>
                               <td align="center" valign="top">
                                   <!-- BEGIN HEADER // -->
@@ -69,12 +39,4 @@
                                     </table>
                                     <!-- // END FOOTER -->
                                 </td>
-                            </tr>
-                        </table>
-                        <!-- // END TEMPLATE -->
-                    </td>
-                </tr>
-            </table>
-        </center>
-    </body>
-</html>
+                            </tr>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -213,7 +213,7 @@ en:
 
   email:
     contact_us:
-      subject: 'Contact - MyUSA marketing page'
+      subject: MyUSA question from %{from}
 
   mobile_confirmation:
     bad_token: 'Please check the number sent to your mobile and re-enter that code. If that seems to match, you can also <a href="%{resend_link}">resend a code</a> or <a href=''%{reenter_link}''>re-enter your mobile number</a>.'

diff --git a/spec/mailers/contact_mailer_spec.rb b/spec/mailers/contact_mailer_spec.rb
@@ -8,10 +8,9 @@
 
     subject { ContactMailer.contact_us('User Name', email, message) }
 
-    its(:subject) { should eql 'Contact - MyUSA marketing page' }
+    its(:subject) { should eql 'MyUSA question from User Name' }
     its(:reply_to) { should contain_exactly email }
-    # its('body.encoded') { should include message }
-    its(:body) { should include message }
-    its(:body) { should include 'User Name'}
+    its('body.encoded') { should include message }
+    its('body.encoded') { should include 'User Name'}
   end
 end
diff --git a/spec/mailers/notification_mailer_spec.rb b/spec/mailers/notification_mailer_spec.rb
@@ -17,7 +17,7 @@
     end
 
     subject { NotificationMailer.notification_email(notification) }
-    its(:from) { should eql ['no-reply@example.com'] }
+    its(:from) { should eql ['no-reply@' + ActionMailer::Base.default_url_options[:host]] }
     its(:subject) { should eql notification.subject }
     its(:reply_to) { should contain_exactly '[email protected]' }
     its('body.encoded') { should have_content notification.body }