Use social-share-button whatsapp icon

We were using a custom icon because in the past social-share-button
didn't have support for whatsapp. But now that it does, we can remove
our custom icon.

Note we're using the `_app` suffix because that's the name of the icon
meant for mobile devices.

app/assets/javascripts/social_share.js

@@ -3,7 +3,7 @@
   App.SocialShare = {
     initialize: function() {
       $(".social-share-button a").each(function() {
-        $(this).append("<span class='show-for-sr'>" + ($(this).data("site")) + "</span>");
+        $(this).append("<span class='show-for-sr'>" + ($(this).data("site").replace(/_app$/, "")) + "</span>");
       });
     },
     destroy: function() {

app/assets/stylesheets/icons.scss

@@ -186,10 +186,6 @@
   font-weight: normal;
 }
 
-.icon-whatsapp::before {
-  content: "\f232";
-}
-
 .icon-zip::before {
   content: "\f1c6";
   font-weight: normal;
@@ -285,7 +281,6 @@
 .icon-instagram,
 .icon-telegram,
 .icon-twitter,
-.icon-whatsapp,
 .icon-youtube {
 
   &::before {

app/assets/stylesheets/layout.scss

@@ -1571,7 +1571,8 @@ table {
 
 .ssb-facebook,
 .ssb-telegram,
-.ssb-twitter {
+.ssb-twitter,
+.ssb-whatsapp_app {
   background-image: none !important;
   color: #fff;
   height: $line-height * 2 !important;
@@ -1673,10 +1674,24 @@ table {
   }
 }
 
+.ssb-whatsapp_app {
+  background: #43d854;
+
+  &::before {
+    content: "P";
+  }
+
+  &:hover,
+  &:focus {
+    color: #43d854;
+  }
+}
+
 @include breakpoint(medium) {
 
   .button.button-telegram,
-  .ssb-telegram {
+  .ssb-telegram,
+  .ssb-whatsapp_app {
     display: none !important;
   }
 }

app/assets/stylesheets/participation.scss

@@ -355,18 +355,6 @@
     display: inline;
   }
 
-  .whatsapp::before {
-    background-color: #43d854;
-    color: #fff;
-    display: inline-block;
-    font-size: rem-calc(30);
-    height: rem-calc(48);
-    padding-top: rem-calc(9);
-    text-align: center;
-    vertical-align: top;
-    width: rem-calc(48);
-  }
-
   .debate-info,
   .proposal-info,
   .investment-project-info,

app/views/shared/_social_share.html.erb

@@ -1,7 +1,5 @@
 <% description = local_assigns.fetch(:description, "") %>
 <% description = truncate(ActionView::Base.full_sanitizer.sanitize(description), length: 140) %>
-<% mobile = local_assigns[:mobile] %>
-<% mobile_url = mobile.present? ? "#{mobile.gsub(/\s+/, "%20")}%20" : "" %>
 
 <% if local_assigns[:share_title].present? %>
   <div id="social-share" class="sidebar-divider"></div>
@@ -13,10 +11,6 @@
                               image: local_assigns.fetch(:image_url, ""),
                               desc: description,
                               "data-twitter-title": local_assigns[:mobile],
-                              "data-telegram-title": local_assigns[:mobile]) %>
+                              "data-telegram-title": local_assigns[:mobile],
-  <a href="whatsapp://send?text=<%= mobile_url %><%= url %>"
+                              "data-whatsapp_app-title": local_assigns[:mobile]) %>
-     class="show-for-small-only" data-action="share/whatsapp/share">
-    <span class="icon-whatsapp whatsapp"></span>
-    <span class="show-for-sr"><%= t("social.whatsapp") %></span>
-  </a>
 </div>

config/initializers/social_share_button.rb

@@ -1,3 +1,3 @@
 SocialShareButton.configure do |config|
-  config.allow_sites = %w[twitter facebook telegram]
+  config.allow_sites = %w[twitter facebook telegram whatsapp_app]
 end

config/locales/en/general.yml

@@ -784,7 +784,6 @@ en:
     facebook: "%{org} Facebook"
     twitter: "%{org} Twitter"
     youtube: "%{org} YouTube"
-    whatsapp: WhatsApp
     telegram: "%{org} Telegram"
     instagram: "%{org} Instagram"
   stats:

config/locales/en/social_share_button.yml

@@ -17,3 +17,4 @@ en:
     pinterest: "Pinterest"
     email: "Email"
     telegram: "Telegram"
+    whatsapp_app: "WhatsApp"

config/locales/es/general.yml

@@ -784,7 +784,6 @@ es:
     facebook: "Facebook de %{org}"
     twitter: "Twitter de %{org}"
     youtube: "YouTube de %{org}"
-    whatsapp: WhatsApp
     telegram: "Telegram de %{org}"
     instagram: "Instagram de %{org}"
   stats:

config/locales/es/social_share_button.yml

@@ -17,3 +17,4 @@ es:
     pinterest: "Pinterest"
     email: "Correo electrónico"
     telegram: "Telegram"
+    whatsapp_app: "WhatsApp"

spec/system/debates_spec.rb

@@ -93,9 +93,43 @@ describe "Debates" do
     expect(page).to have_content I18n.l(debate.created_at.to_date)
     expect(page).to have_selector(avatar(debate.author.name))
     expect(page.html).to include "<title>#{debate.title}</title>"
+  end
+
+  describe "Social share buttons", :js do
+    context "On desktop browsers" do
+      scenario "Shows links to share on facebook and twitter" do
+        visit debate_path(create(:debate))
 
         within(".social-share-button") do
-      expect(page.all("a").count).to be(3) # Twitter, Facebook, Telegram
+          expect(page.all("a").count).to be(2)
+          expect(page).to have_link "Share to Facebook"
+          expect(page).to have_link "Share to Twitter"
+        end
+      end
+    end
+
+    context "On small devices" do
+      let!(:window_size) { Capybara.current_window.size }
+
+      before do
+        Capybara.current_window.resize_to(639, 479)
+      end
+
+      after do
+        Capybara.current_window.resize_to(*window_size)
+      end
+
+      scenario "Shows links to share on telegram and whatsapp too" do
+        visit debate_path(create(:debate))
+
+        within(".social-share-button") do
+          expect(page.all("a").count).to be(4)
+          expect(page).to have_link "Share to Facebook"
+          expect(page).to have_link "Share to Twitter"
+          expect(page).to have_link "Share to Telegram"
+          expect(page).to have_link "Share to WhatsApp"
+        end
+      end
     end
   end
 

spec/system/proposals_spec.rb

@@ -138,9 +138,43 @@ describe "Proposals" do
     expect(page.html).to include "<title>#{proposal.title}</title>"
     expect(page).not_to have_selector ".js-flag-actions"
     expect(page).not_to have_selector ".js-follow"
+  end
+
+  describe "Social share buttons", :js do
+    context "On desktop browsers" do
+      scenario "Shows links to share on facebook and twitter" do
+        visit proposal_path(create(:proposal))
 
         within(".social-share-button") do
-      expect(page.all("a").count).to be(3) # Twitter, Facebook, Telegram
+          expect(page.all("a").count).to be(2)
+          expect(page).to have_link "Share to Facebook"
+          expect(page).to have_link "Share to Twitter"
+        end
+      end
+    end
+
+    context "On small devices" do
+      let!(:window_size) { Capybara.current_window.size }
+
+      before do
+        Capybara.current_window.resize_to(639, 479)
+      end
+
+      after do
+        Capybara.current_window.resize_to(*window_size)
+      end
+
+      scenario "Shows links to share on telegram and whatsapp too" do
+        visit proposal_path(create(:proposal))
+
+        within(".social-share-button") do
+          expect(page.all("a").count).to be(4)
+          expect(page).to have_link "Share to Facebook"
+          expect(page).to have_link "Share to Twitter"
+          expect(page).to have_link "Share to Telegram"
+          expect(page).to have_link "Share to WhatsApp"
+        end
+      end
     end
   end