Extract component to render verification info

We're also adding tests showing the current behavior, which we're about
to change.

app/assets/stylesheets/account/verify-account.scss

@@ -0,0 +1,15 @@
+.verify-account {
+  padding-right: $line-height / 2;
+
+  .already-verified {
+    color: $check;
+    line-height: $line-height * 2;
+
+    .icon-check {
+      color: $text-medium;
+      font-size: rem-calc(24);
+      line-height: rem-calc(45);
+      vertical-align: middle;
+    }
+  }
+}

app/assets/stylesheets/layout.scss

@@ -1228,10 +1228,6 @@ form {
     margin-right: $line-height / 2;
   }
 
-  .verify-account {
-    padding-right: $line-height / 2;
-  }
-
   .final-votes-info {
     background: $warning-bg;
     border: 1px solid $warning-border;
@@ -1270,16 +1266,6 @@ form {
   vertical-align: top;
 }
 
-.user-permissions {
-
-  p {
-    span {
-      color: $text-medium;
-      font-size: rem-calc(12);
-    }
-  }
-}
-
 .notifications-list {
   position: relative;
 
@@ -1666,21 +1652,6 @@ table {
   }
 }
 
-.verify-account {
-  padding-right: $line-height / 2;
-
-  .already-verified {
-    color: $check;
-    line-height: $line-height * 2;
-
-    .icon-check {
-      font-size: rem-calc(24);
-      line-height: rem-calc(45);
-      vertical-align: middle;
-    }
-  }
-}
-
 .verify {
   margin-bottom: $line-height * 2;
   margin-top: $line-height;

app/components/account/verify_account_component.html.erb

@@ -0,0 +1,22 @@
+<div class="verification-info">
+  <p>
+    <%= t("account.show.user_permission_verify") %>
+  </p>
+
+  <% unless account.organization? %>
+    <div>
+      <span class="verify-account">
+        <% if account.level_three_verified? %>
+          <p class="already-verified">
+            <span class="icon-check"></span>
+            <%= t("account.show.verified_account") %>
+          </p>
+        <% elsif account.level_two_verified? %>
+          <%= link_to t("account.show.finish_verification"), verification_path, class: "button success" %>
+        <% else %>
+          <%= link_to t("account.show.verify_my_account"), verification_path, class: "button success" %>
+        <% end %>
+      </span>
+    </div>
+  <% end %>
+</div>

app/components/account/verify_account_component.rb

@@ -0,0 +1,7 @@
+class Account::VerifyAccountComponent < ApplicationComponent
+  attr_reader :account
+
+  def initialize(account)
+    @account = account
+  end
+end

app/views/account/show.html.erb

@@ -94,27 +94,7 @@
           <p><%= t("account.show.user_permission_info") %></p>
 
           <%= render Account::PermissionsListComponent.new(current_user) %>
-
+          <%= render Account::VerifyAccountComponent.new(@account) %>
-          <p>
-            <%= t("account.show.user_permission_verify") %>
-          </p>
-
-          <% unless @account.organization? %>
-            <div>
-              <span class="verify-account">
-                <% if current_user.level_three_verified? %>
-                  <p class="already-verified">
-                    <span class="icon-check"></span>
-                    <%= t("account.show.verified_account") %>
-                  </p>
-                <% elsif current_user.level_two_verified? %>
-                  <%= link_to t("account.show.finish_verification"), verification_path, class: "button success" %>
-                <% else %>
-                  <%= link_to t("account.show.verify_my_account"), verification_path, class: "button success" %>
-                <% end %>
-              </span>
-            </div>
-          <% end %>
         </div>
       </div>
     <% end %>

spec/components/account/verify_account_component_spec.rb

@@ -0,0 +1,41 @@
+require "rails_helper"
+
+describe Account::VerifyAccountComponent do
+  it "shows a link to verify account to unverified users" do
+    account = User.new
+
+    render_inline Account::VerifyAccountComponent.new(account)
+
+    expect(page).to have_content "To perform all the actions verify your account."
+    expect(page).to have_link "Verify my account"
+  end
+
+  it "shows a link to complete verification to level two verified users" do
+    account = User.new(level_two_verified_at: Time.current)
+
+    render_inline Account::VerifyAccountComponent.new(account)
+
+    expect(page).to have_content "To perform all the actions verify your account."
+    expect(page).to have_link "Complete verification"
+  end
+
+  it "shows information about a verified account to level three verified users" do
+    account = User.new(verified_at: Time.current)
+
+    render_inline Account::VerifyAccountComponent.new(account)
+
+    expect(page).to have_content "To perform all the actions verify your account."
+    expect(page).to have_content "Account verified"
+  end
+
+  it "does not show verification info to organizations" do
+    account = User.new(organization: Organization.new)
+
+    render_inline Account::VerifyAccountComponent.new(account)
+
+    expect(page).to have_content "To perform all the actions verify your account."
+    expect(page).not_to have_link "Verify my account"
+    expect(page).not_to have_link "Complete verification"
+    expect(page).not_to have_content "Account verified"
+  end
+end