Clean up state level refactor + fix its styles

Author: esoterik

app/assets/javascripts/application/tools/email.js

@@ -26,7 +26,7 @@ $(document).on('ready', function() {
       }
       update_tabs(1, 2);
       $(".progress-striped").hide();
-      $form.remove();
+      $(".address-lookup").remove();
     } else if (data.responseText) {
       show_error(data.responseText, $form);
     } else {

app/assets/stylesheets/application/action_page.scss

@@ -1316,3 +1316,9 @@ html.js #affiliations {
   }
 }
 
+.state-email-body {
+  padding: 0.5rem 1.5rem;
+  form {
+    padding: 0;
+  }
+}

app/views/tools/_lookup_state_rep.html.erb

@@ -1,43 +1,40 @@
-<div class="state-rep-lookup">
+<div class="address-lookup">
   <p>Enter your address below and we'll help you email your representatives (US addresses only).</p>
-  <div class="address-lookup">
-    <%= form_tag(tools_state_reps_path, method: :post, remote: true, class: "form state-rep-lookup") do %>
-      <%= hidden_field_tag :email_campaign_id, @actionPage.email_campaign.id %>
+  <%= form_tag(tools_state_reps_path, method: :post, remote: true, class: "form state-rep-lookup") do %>
+    <%= hidden_field_tag :email_campaign_id, @actionPage.email_campaign.id %>
 
-      <fieldset id="lookup-address">
-        <h3>
-          <span class="customize-message-popover" data-toggle="tooltip" data-trigger="hover">?
-            <span class="tooltiptext">We'll use your address to find your state representatives.</span>
-          </span>
-          Look up your state representatives
-        </h3>
-        <div id="errors"></div>
+    <fieldset id="lookup-address">
+      <h3>
+        <span class="customize-message-popover" data-toggle="tooltip" data-trigger="hover">?
+          <span class="tooltiptext">We'll use your address to find your state representatives.</span>
+        </span>
+        Look up your state representatives
+      </h3>
+      <div id="errors"></div>
 
-        <div class="form-group">
-          <%= text_field_tag :street_address, (current_user && current_user.street_address),
-            placeholder: "Street Address", "aria-label": "Street Address",
-            required: true, class: "form-control" %>
-        </div>
+      <div class="form-group">
+        <%= text_field_tag :street_address, (current_user && current_user.street_address),
+          placeholder: "Street Address", "aria-label": "Street Address",
+          required: true, class: "form-control" %>
+      </div>
 
-        <div class="form-group">
-          <%= text_field_tag :zipcode, (current_user && current_user.zipcode),
-            placeholder: "Zip Code", "aria-label": "Zip Code", required: true,
-            class: "form-control", title: "Must be 5 numeric numbers",
-            pattern: "\\d{5}", maxlength: 5 %>
-        </div>
+      <div class="form-group">
+        <%= text_field_tag :zipcode, (current_user && current_user.zipcode),
+          placeholder: "Zip Code", "aria-label": "Zip Code", required: true,
+          class: "form-control", title: "Must be 5 numeric numbers",
+          pattern: "\\d{5}", maxlength: 5 %>
+      </div>
 
-        <div class="form-errors info-circle error hidden"></div>
+      <div class="form-errors info-circle error hidden"></div>
 
-        <p class="privacy-notice">Uses <a href="https://developers.google.com/terms/api-services-user-data-policy" target="_blank">Google</a>'s APIs (
+      <p class="privacy-notice">Uses <a href="https://developers.google.com/terms/api-services-user-data-policy" target="_blank">Google</a>'s APIs (
         <span class="privacy-notice-popover" data-toggle="tooltip" data-trigger="hover">why?
           <!-- Attribution Guidelines: https://developers.google.com/civic-information/docs/data_guidelines?hl=en#data-availability -->
           <span class="tooltiptext">Representative information powered by the Civic Information API.</span>
         </span>).
-        </p>
-      </fieldset>
-      <input type="submit" class="eff-button" value="Find your reps">
-      <%= render "tools/loading" -%>
-  </div>
-<% end %>
+      </p>
+    </fieldset>
+    <input type="submit" class="eff-button" value="Find your reps">
+    <%= render "tools/loading" -%>
+  <% end %>
 </div>
-<div class="state-reps"></div>

app/views/tools/_state_leg_email.html.erb

@@ -9,8 +9,9 @@
       <h2 class="tool-title">Take action</h2>
     </div>
 
-    <div class="state-email-body">
+    <div class="tool-body state-email-body">
       <%= render 'tools/lookup_state_rep' %>
+      <div class="state-reps"></div>
     </div>
   </div>
 </div>

app/views/tools/_state_reps.html.erb

@@ -1,13 +1,15 @@
 <div class="state-rep-names-and-emails">
-  <%= "This action is for the #{legislative_level_from_state_representative_info(@email_campaign.leg_level)}." %>
+  <p><%= "This action is for the #{legislative_level_from_state_representative_info(@email_campaign.leg_level)}." %></p>
   <% @state_reps.each do |sr| %>
     <div>
+      <p>
       <%= "Your representative is #{sr['name']}" %>.
       <% if sr["emails"].present? %>
         <%= "They can be reached at: #{sr['emails'].join(', ')}" %>
       <% else %>
         <%= "We could not find their email address." %>
       <% end %>
+      </p>
     </div>
   <% end %>
 </div>

spec/controllers/tools_controller_spec.rb

@@ -80,26 +80,6 @@
       expect(response).to redirect_to(uri)
     end
   end
-
-  describe "#state_reps" do
-    let(:email_campaign) { FactoryBot.create(:email_campaign, :state_leg) }
-    let(:address) { "815 Eddy St 94109" }
-    let(:json_parseable_state_officials) { '{"officials": [{"name": "Sponge Bob", "party": "Sandy Party", "emails": ["[email protected]"]}]}' }
-
-    before do
-      Rails.application.config.google_civic_api_url = "http://civic.example.com"
-      Rails.application.secrets.google_civic_api_key = "test-key-for-civic-api"
-
-      stub_request(:get, "http://civic.example.com/?address=%20&includeOffices=true&key=test-key-for-civic-api&levels=administrativeArea1&roles=legislatorUpperBody")
-        .to_return(status: 200, body: json_parseable_state_officials, headers: {})
-    end
-
-    it "should render JSON with the state officials array" do
-      get :state_reps, params: { email_campaign_id: email_campaign.action_page.email_campaign_id }
-
-      expect(response).to have_http_status(200)
-    end
-  end
 end
 
 def create_signature_and_have_user_sign

spec/requests/tools_spec.rb

@@ -18,23 +18,22 @@
     }
   end
   let!(:address) { "#{params[:street_address]} #{params[:zipcode]}" }
+  let!(:headers) { { "CONTENT_TYPE" => "application/javascript" } }
 
   before do
     Rails.application.config.google_civic_api_url = "https://civic.example.com"
     Rails.application.secrets.google_civic_api_key = "test-key-for-civic-api"
   end
 
-  describe "GET tools/state_reps" do
-    # TODO: should this be a POST?
+  describe "POST tools/state_reps" do
     it "returns json containing rep data for a given address" do
-      # mock civic api
       civic_api = class_double("CivicApi")
         .as_stubbed_const(transfer_nested_constants: true)
       allow(civic_api).to receive(:state_rep_search)
         .with(address, campaign.leg_level)
         .and_return(officials)
 
-      get "/tools/state_reps", params: params
+      post "/tools/state_reps", params: params, xhr: true
 
       expect(response).to have_http_status(200)
       expect(response.body).to include(officials.first["name"])

spec/system/action_pages/state_leg_email_action_spec.rb

@@ -28,7 +28,7 @@
 
     fill_in "street_address", with: "815 Eddy St"
     fill_in "zipcode", with: "94109"
-    click_on "See Your Representatives"
+    click_on "Find your reps"
 
     expect(page).to have_content("Sponge Bob")
     expect(page).not_to have_content("Thank You!")