Add method to construct the variant HTML in the Whatsapp model.

app/helpers/pages_helper.rb

@@ -156,12 +156,11 @@ def toggle_featured_link(page)
     end
   end
 
-  def share_url(button)
-    if button.share_progress?
-      "http://sumof.us/99/#{button.sp_id}/#{button.share_type}"
+  def share_url(variant)
+    if variant.share_progress?
+      "http://sumof.us/99/#{variant.button.sp_id}/#{variant.button.share_type}"
     else
-      # Extracts the share URL out of the share_button_html field, which contains the markup for the button.
-      URI.extract(button.share_button_html).first
+      URI.extract(variant.html).first
     end
   end
 

app/javascript/campaigner_facing/shares_editor.js

@@ -94,7 +94,9 @@ const SharesEditor = Backbone.View.extend({
   },
 
   clearFormAndConformView: function(e) {
-    $(e.target).find('input[type="text"], textarea').val('');
+    $(e.target)
+      .find('input[type="text"], textarea')
+      .val('');
     this.setView(this.view); // make new rows conform
   },
 
@@ -138,7 +140,7 @@ $.subscribe('shares:edit', function() {
 $(function() {
   new Clipboard('.share-copy-url');
 
-  $('.shares-editor__existing').on('click', '.share-copy-url', e => {
+  $('.share-copy-url').on('click', e => {
     e.preventDefault();
   });
 });

app/liquid/shares.rb

@@ -12,11 +12,11 @@ def get_all(page)
           css_class: class_from_html(button.share_button_html)
         }
         unless button.share_progress?
+          # TODO: if you're adding more share types, you will need a case here that checks the share type.
+          # This assumes WhatsApp share.
           variant = select_share_variant(button.share_type, page)
           view_params[:variant_id] = variant.id
-          # Prepend the desired query parameters (uri encoded) into the url we want to share
-          url = button.url << ERB::Util.url_encode("?src=whatsapp&variant_id=#{variant.id}")
-          view_params[:link_html] = button.share_button_html.gsub('%7BLINK%7D', url)
+          view_params[:link_html] = variant.html
         end
         shares[button.share_type] = view_params
         shares

app/models/share/whatsapp.rb

@@ -22,4 +22,12 @@ class Share::Whatsapp < ApplicationRecord
   def link?
     errors.add(:text, 'does not contain {LINK}') unless text.match?(/\{LINK\}/)
   end
+
+  def html
+    # Prepend the desired query parameters (uri encoded) into the url we want {LINK} to point to.
+    # Then construct the whole share URL by replacing the {LINK} with that.
+    query = "?src=whatsapp&variant_id=#{id}"
+    copy = text.gsub('{LINK}', "#{button.url}#{query}")
+    button.share_button_html.gsub('{TEXT}', ERB::Util.url_encode(copy))
+  end
 end

app/services/share_variant_builder.rb

@@ -96,8 +96,7 @@ def update_button
     case @variant_type
     when :whatsapp
       @button.update(
-        share_button_html: '<a class="whatsapp_large" href="https://api.whatsapp.com'\
-        "/send?text=#{ERB::Util.url_encode(@variant.text)}\"></a>",
+        share_button_html: '<a class="whatsapp_large" href="https://api.whatsapp.com/send?text={TEXT}"></a>',
         url: @url
       )
     end

app/views/share/_copy_button.html.slim

@@ -1,4 +1,4 @@
 = button_to 'Copy URL', '#',
   class: 'btn btn-default share-copy-url',
-  data: {'clipboard-text' => share_url(share.button)}
+  data: {'clipboard-text' => share_url(share)}
 

spec/helpers/pages_helper_spec.rb

@@ -243,10 +243,16 @@
   end
 
   describe '#share_url' do
-    let(:button) { double(sp_id: '2', share_type: 'facebook', share_progress?: true) }
+    let(:variant) {
+      double(
+        id: 12_342,
+        share_progress?: true,
+        button: double(id: 3, sp_id: '2', share_type: 'facebook')
+      )
+    }
 
     it 'returns share url' do
-      expect(helper.share_url(button)).to eq('http://sumof.us/99/2/facebook')
+      expect(helper.share_url(variant)).to eq('http://sumof.us/99/2/facebook')
     end
   end
 end

spec/models/share/whatsapp_spec.rb

@@ -40,4 +40,13 @@
       expect(whatsapp.share_progress?).to eq false
     end
   end
+
+  describe 'html' do
+    let(:button) { create(:share_button, share_button_html: '<div>{TEXT}</div>', url: 'example.com') }
+    let(:whatsapp) { create(:share_whatsapp, button: button, text: 'Hello: {LINK}') }
+
+    it 'constructs the share HTML from the encoded button URL, parameters and the text' do
+      expect(whatsapp.html).to eq('<div>Hello%3A%20example.com%3Fsrc%3Dwhatsapp%26variant_id%3D1</div>')
+    end
+  end
 end