Add ability to create WhatsApp shares.

app/assets/stylesheets/member-facing/_colors.scss

@@ -11,6 +11,7 @@ $dark-navy: #1f2533;
 $facebook: #597ac7;
 $twitter: #5dbeec;
 $paypal: #1a9ddb;
+$whatsapp: #25D366;
 
 // grays, named per http://davidwalsh.name/sass-color-variables-dont-suck
 $chalk-gray: #ececec;

app/assets/stylesheets/member-facing/button.scss

@@ -49,15 +49,16 @@ button.button {
 // shareprogress isn't super customization friendly, so we do
 // what we can.
 .button {
-  &--facebook, &--twitter {
-    float: left;
-    width: 145px;
-    &.sp_em_small, &.sp_em_large, &.sp_tw_small, &.sp_tw_large, &.sp_fb_small, &.sp_fb_large {
-      a {
-        width: 100%;
-        max-width: 145px;
-        padding-top: 20px;
-      }
+  &--facebook, &--twitter, &--whatsapp {
+    margin-top: 10px;
+    margin-left: 5px;
+    margin-right: 5px;
+    display: inline-block;
+    width: 135px;
+    a {
+      width: 100%;
+      max-width: 135px;
+      padding-top: 20px;
     }
 
     a::before {
@@ -96,6 +97,15 @@ button.button {
       }
     }
   }
+  &--whatsapp {
+    a {
+      @include button($whatsapp);
+      padding-top: 15px;
+      color: $whatsapp;
+      font-size: 1px;
+      font-size: 0;
+    }
+  }
   &--facebook a::before {
     content: "Share";
   }

app/controllers/pages_controller.rb

@@ -10,6 +10,7 @@ class PagesController < ApplicationController
   before_action :get_page_or_homepage, only: [:show]
   before_action :redirect_unless_published, only: %i[show follow_up]
   before_action :localize, only: %i[show follow_up]
+  before_action :record_tracking, only: %i[show]
 
   def index
     @pages = Search::PageSearcher.search(search_params)
@@ -33,7 +34,8 @@ def new
   end
 
   def edit
-    @variations = @page.shares
+    @sp_variations = @page.shares('sp')
+    @local_variations = @page.shares('local')
     render :edit
   end
 
@@ -126,6 +128,17 @@ def update
 
   private
 
+  def record_tracking
+    # Currently the only use case is to parse query parameters for a whatsapp variant
+    # to see if the member has come from a whatsapp share.
+    return unless params[:src] == 'whatsapp'
+    Share::Whatsapp.find(params[:variant_id]).increment!(:conversion_count)
+  rescue ActiveRecord::RecordNotFound
+    Rails.logger.error(
+      "Conversion count increment attempted on an invalid #{params[:src]} variant ID #{params[:variant_id]}."
+    )
+  end
+
   def get_page
     @page = Page.find(params[:id])
   rescue ActiveRecord::RecordNotFound

app/controllers/share/emails_controller.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 class Share::EmailsController < Share::SharesController
   private
 
@@ -12,7 +13,7 @@ def new_defaults
   def permitted_params
     params
       .require(:share_email)
-      .permit(:subject, :body)
+      .permit(:subject, :body, :name)
   end
 
   def share_class

app/controllers/share/facebooks_controller.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 class Share::FacebooksController < Share::SharesController
   private
 
@@ -16,6 +17,6 @@ def share_class
   def permitted_params
     params
       .require(:share_facebook)
-      .permit(:title, :image_id, :description)
+      .permit(:title, :image_id, :description, :name)
   end
 end

app/controllers/share/shares_controller.rb

@@ -1,10 +1,11 @@
 # frozen_string_literal: true
+
 require 'share_progress'
 
 class Share::SharesController < ApplicationController
   before_action :set_resource
-  before_action :find_page
-  before_action :authenticate_user!
+  before_action :find_page, except: 'track'
+  before_action :authenticate_user!, except: 'track'
 
   def new
     @share = share_class.new(new_defaults)
@@ -22,7 +23,7 @@ def index
   end
 
   def update
-    @share = ShareProgressVariantBuilder.update(
+    @share = ShareVariantBuilder.update(
       params: permitted_params,
       variant_type: @resource.to_sym,
       page: @page,
@@ -40,24 +41,23 @@ def update
 
   def update_url
     @page.share_buttons.each do |button|
-      url = params[button.sp_type.to_sym]
+      url = params[button.share_type.to_sym]
 
       if url
-        ShareProgressVariantBuilder.update_button_url(url, button)
+        ShareVariantBuilder.update_button_url(url, button)
       end
     end
 
     render :update_url_form
   end
 
   def create
-    @share = ShareProgressVariantBuilder.create(
+    @share = ShareVariantBuilder.create(
       params: permitted_params,
       variant_type: @resource.to_sym,
       page: @page,
       url: member_facing_page_url(@page)
     )
-
     respond_to do |format|
       if @share.errors.empty?
         format.html { redirect_to index_path }
@@ -71,7 +71,7 @@ def create
 
   def destroy
     find_share
-    @deleted_share = ShareProgressVariantBuilder.destroy(
+    @deleted_share = ShareVariantBuilder.destroy(
       params: {},
       variant_type: @resource.to_sym,
       page: @page,
@@ -86,17 +86,23 @@ def destroy
     end
   end
 
+  def track
+    params.permit(:variant_type, :variant_id)
+    case params[:variant_type]
+    when 'whatsapp'
+      Share::Whatsapp.find(params[:variant_id]).increment!(:click_count)
+    end
+  end
+
   private
 
   def find_share
     @share = share_class.find params[:id]
   end
 
-  #
-  # Assigns resource name, which is taken from controller's class name.
-  # +Share::TwittersController+ becomes +twitter+
-  #
   def set_resource
+    # Assigns resource name, which is taken from controller's class name.
+    # +Share::TwittersController+ becomes +twitter+
     @resource = self.class.name.demodulize.gsub('Controller', '').downcase.singularize
   end
 

app/controllers/share/twitters_controller.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 class Share::TwittersController < Share::SharesController
   private
 
@@ -9,7 +10,7 @@ def new_defaults
   def permitted_params
     params
       .require(:share_twitter)
-      .permit(:description)
+      .permit(:description, :name)
   end
 
   def share_class

app/controllers/share/whatsapps_controller.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Share::WhatsappsController < Share::SharesController
+  private
+
+  def new_defaults
+    { text: "#{@page.title} {LINK}" }
+  end
+
+  def permitted_params
+    params
+      .require(:share_whatsapp)
+      .permit(:text, :name)
+  end
+
+  def share_class
+    Share::Whatsapp
+  end
+end

app/helpers/pages_helper.rb

@@ -37,6 +37,7 @@ def record_range(page_number, per_page)
   def prefill_link(new_variant)
     new_variant.description = '{LINK}' if new_variant.name == 'twitter'
     new_variant.body = '{LINK}' if new_variant.name == 'email'
+    new_variant.text = '{LINK}' if new_variant.name == 'whatsapp'
     new_variant
   end
 
@@ -155,8 +156,12 @@ def toggle_featured_link(page)
     end
   end
 
-  def share_url(button)
-    "http://sumof.us/99/#{button.sp_id}/#{button.sp_type}"
+  def share_url(variant)
+    if variant.share_progress?
+      "http://sumof.us/99/#{variant.button.sp_id}/#{variant.button.share_type}"
+    else
+      URI.extract(variant.html).first
+    end
   end
 
   def collapse_share_url_form(page)

app/javascript/campaigner_facing/actions_editor.js

@@ -1,5 +1,8 @@
+// @flow
 import $ from 'jquery';
+import ee from '../shared/pub_sub';
 import setupOnce from './setup_once';
+import Backbone from 'backbone';
 
 const ActionsEditor = Backbone.View.extend({
   events: {
@@ -35,6 +38,6 @@ const ActionsEditor = Backbone.View.extend({
   },
 });
 
-$.subscribe('actions:edit', function() {
+ee.on('actions:edit', function() {
   setupOnce('.actions-editor', ActionsEditor);
 });

app/javascript/campaigner_facing/ajax.js

@@ -1,10 +1,13 @@
 import ErrorDisplay from '../shared/show_errors';
+import $ from 'jquery';
 
 $(function() {
   var handleStart = function(e, i) {
     var button = $(e.target).find('.xhr-feedback');
 
-    $(e.target).find('.xhr-feedback-saving').remove();
+    $(e.target)
+      .find('.xhr-feedback-saving')
+      .remove();
 
     button.prop('disabled', true);
 

app/javascript/campaigner_facing/analytics.js

@@ -1,4 +1,5 @@
-'use strict';
+import $ from 'jquery';
+import d3 from 'd3';
 const Y_AXIS_LABEL_LIMIT = 20;
 
 class AnalyticsDashboard {

app/javascript/campaigner_facing/collection_editor.js

@@ -7,8 +7,8 @@
 //
 //   Twitter's typeahead: http://twitter.github.io/typeahead.js/
 //   - Use for autocompleting for setting the field's name value
-
 import $ from 'jquery';
+import ee from '../shared/pub_sub';
 import setupOnce from './setup_once';
 import ErrorDisplay from '../shared/show_errors';
 import GlobalEvents from '../shared/global_events';
@@ -57,7 +57,9 @@ const CollectionEditor = Backbone.View.extend({
     this.makeSortable();
     this.autoComplete();
     this.$el.on('ajax:success', 'a[data-method=delete]', function() {
-      $(this).parents('.list-group-item').fadeOut();
+      $(this)
+        .parents('.list-group-item')
+        .fadeOut();
     });
     GlobalEvents.bindEvents(this);
   },
@@ -149,12 +151,14 @@ const CollectionEditor = Backbone.View.extend({
       i,
       el
     ) {
-      const action = $(el).attr('action').replace(/\d+/, resp.form_id);
+      const action = $(el)
+        .attr('action')
+        .replace(/\d+/, resp.form_id);
       $(el).attr('action', action);
     });
   },
 });
 
-$.subscribe('collection:edit:loaded', function() {
+ee.on('collection:edit:loaded', function() {
   setupOnce('.collection-editor', CollectionEditor);
 });

app/javascript/campaigner_facing/configure_wysiwyg.js

@@ -1,13 +1,16 @@
+// @flow
 import $ from 'jquery';
+import ee from '../shared/pub_sub';
 
 const TALL_EDITORS = ['page_body'];
 
-function configureWysiwyg(e, id) {
+function configureWysiwyg(id) {
   const $editor = $('#' + id);
   if ($editor.length === 0) {
-    return false;
+    return;
   }
 
+  // $FlowIgnore
   $editor.summernote({
     toolbar: [
       ['style', ['bold', 'italic', 'underline', 'clear']],
@@ -28,8 +31,9 @@ function configureWysiwyg(e, id) {
     },
   });
   const $contentField = $('#' + id + '_content');
-
+  // $FlowIgnore
   $editor.summernote('fontSize', '16'); // default
+  // $FlowIgnore
   $editor.summernote('code', $contentField.val());
 
   // In order to make an iframe size down with the containing column
@@ -42,17 +46,23 @@ function configureWysiwyg(e, id) {
     }
     const $html = $(html);
     // addClass is idempotent so we just call it every time we save
-    $html.find('iframe').parent().addClass('iframe-responsive-container');
+    $html
+      .find('iframe')
+      .parent()
+      .addClass('iframe-responsive-container');
     // this little goof is just cause jquery doesn't have $el.outerHtml();
-    return $('<div></div>').append($html).html();
+    return $('<div></div>')
+      .append($html)
+      .html();
   };
 
   const updateContentBeforeSave = function() {
+    // $FlowIgnore
     const content = encapsulateIframes($editor.summernote('code'));
     $contentField.val(content);
   };
 
-  $.subscribe('wysiwyg:submit', updateContentBeforeSave);
+  ee.on('wysiwyg:submit', updateContentBeforeSave);
 }
 
-$.subscribe('wysiwyg:setup', configureWysiwyg);
+ee.on('wysiwyg:setup', configureWysiwyg);