From 68d56a3a07e64d361d6043f8db5571455d1d00f3 Mon Sep 17 00:00:00 2001
From: John Carroll <johncarroll@Johns-MacBook-Pro.local>
Date: Wed, 7 Dec 2022 22:58:57 -0500
Subject: [PATCH 1/2] reaction box for all templates and wagtail, add
 user-supplied tite,name,location and migration

---
 fec/data/templates/macros/reaction-box.jinja  |  6 +--
 fec/fec/static/js/data-init.js                | 36 +++++++++++++
 fec/fec/static/js/init.js                     | 37 +++++++++++++
 .../js/{pages => modules}/reaction-box.js     | 35 +-----------
 fec/home/blocks.py                            | 12 +++++
 .../migrations/0125_auto_20221207_2254.py     | 30 +++++++++++
 fec/home/models.py                            |  3 +-
 fec/home/templates/blocks/reaction-block.html |  7 +++
 fec/home/templates/home/custom_page.html      |  5 +-
 fec/home/templates/home/home_page.html        |  2 +
 fec/home/templates/home/resource_page.html    |  5 ++
 .../templates/partials/reaction-feedback.html | 42 +++++++++++++++
 fec/home/templatetags/reaction_feedback.py    | 53 +++++++++++++++++++
 13 files changed, 234 insertions(+), 39 deletions(-)
 rename fec/fec/static/js/{pages => modules}/reaction-box.js (76%)
 create mode 100644 fec/home/migrations/0125_auto_20221207_2254.py
 create mode 100644 fec/home/templates/blocks/reaction-block.html
 create mode 100644 fec/home/templates/partials/reaction-feedback.html
 create mode 100644 fec/home/templatetags/reaction_feedback.py

diff --git a/fec/data/templates/macros/reaction-box.jinja b/fec/data/templates/macros/reaction-box.jinja
index 8825ab1ddd..58533e6e49 100644
--- a/fec/data/templates/macros/reaction-box.jinja
+++ b/fec/data/templates/macros/reaction-box.jinja
@@ -1,8 +1,8 @@
-{% macro reaction_box(name, location) %}
+{% macro reaction_box(title, name, location) %}
   <div class="reaction-box js-reaction-box" data-name="{{ name }}" data-location="{{ location }}">
     <form>
       <div class="js-reaction-step-1">
-        <span class="reaction-box__heading">What do you think of this chart?</span>
+        <span class="reaction-box__heading">{{ title }}</span>
         <ul class="list--buttons">
           <li>
             <button type="button" class="button--standard button--informative js-reaction" data-reaction="informative">Informative</button>
@@ -19,7 +19,7 @@
         </ul>
       </div>
       <div class="js-reaction-step-2 u-fade-in" aria-hidden="true">
-        <span class="reaction-box__heading">What do you think of this chart?</span>
+        <span class="reaction-box__heading">{{ title }}</span>
         <p><label for="reaction-more-{{ name }}"></label></p>
         <textarea id="reaction-more-{{ name }}"></textarea>
         <ul class="list--buttons">
diff --git a/fec/fec/static/js/data-init.js b/fec/fec/static/js/data-init.js
index 00a34cf6e3..4c98d0fa43 100644
--- a/fec/fec/static/js/data-init.js
+++ b/fec/fec/static/js/data-init.js
@@ -18,6 +18,7 @@ var dropdown = require('./modules/dropdowns');
 var siteNav = require('./modules/site-nav');
 var skipNav = require('./modules/skip-nav');
 var feedback = require('./modules/feedback');
+var reaction = require('./modules/reaction-box');
 var typeahead = require('./modules/typeahead');
 var toc = require('./modules/toc');
 var Search = require('./modules/search');
@@ -135,6 +136,41 @@ $(document).ready(function() {
     CycleSelect.build($(elm));
   });
 
+    /**
+ **************DONT FORGET TO EDIT THIS FOR HTML AND WAGTAIL !*********************
+ * To implement a reaction box:
+ * Add a reaction-box jinja macro to a template (use quoted strings for the name and location positional arguments)
+ * Include a reference to this JS file in the parent template(preferably in extra JS block)
+ * (The below function will use the name/location values of any
+ *  reaction box on the page to initiate it as a new ReactionBox())
+ */
+
+
+  var reactionBoxes = document.querySelectorAll('.reaction-box');
+
+  //iterate over the reaction box(es)
+  var names = [];
+  for (var box of reactionBoxes) {
+    
+    var name = box.getAttribute('data-name');
+    console.log('name: ',  name);
+    var location = box.getAttribute('data-location');
+    //push name to names array
+    names.push(name);
+    //inititailize new ReactionBox
+    window[name] = new reaction.ReactionBox(
+      `[data-name="${name}"][data-location="${location}"]`
+    );
+  }
+  //use names array to define the submitReaction*() for each
+  console.log('names: ',  names);
+  names.forEach(function(nm) {
+    window['submitReaction' + nm] = function(token) {
+      window[nm].handleSubmit(token);
+    };
+    console.log('nm: ',nm)
+  });
+
   toggle.init();
   download.hydrate();
 });
diff --git a/fec/fec/static/js/init.js b/fec/fec/static/js/init.js
index 388dadf6b9..1b0016ba68 100644
--- a/fec/fec/static/js/init.js
+++ b/fec/fec/static/js/init.js
@@ -12,6 +12,7 @@ var Glossary = require('glossary-panel');
 
 var terms = require('./data/terms');
 var feedback = require('./modules/feedback');
+var reaction = require('./modules/reaction-box');
 var skipNav = require('./modules/skip-nav');
 var siteNav = require('./modules/site-nav');
 var dropdown = require('./modules/dropdowns');
@@ -117,4 +118,40 @@ $(document).ready(function() {
     }
     $p.nextAll().remove()
   });
+
+  /**
+ **************DONT FORGET TO EDIT THIS FOR HTML AND WAGTAIL !*********************
+ * To implement a reaction box:
+ * Add a reaction-box jinja macro to a template (use quoted strings for the name and location positional arguments)
+ * Include a reference to this JS file in the parent template(preferably in extra JS block)
+ * (The below function will use the name/location values of any
+ *  reaction box on the page to initiate it as a new ReactionBox())
+ */
+
+
+  var reactionBoxes = document.querySelectorAll('.reaction-box');
+  var names = [];
+  for (var box of reactionBoxes) {
+    
+    var name = box.getAttribute('data-name');
+    console.log('name: ',  name);
+    var location = box.getAttribute('data-location');
+    //push name to names array
+    names.push(name);
+    //inititailize new ReactionBox
+    window[name] = new reaction.ReactionBox(
+      `[data-name="${name}"][data-location="${location}"]`
+    );
+  }
+  //use names array to define the submitReaction*() for each
+  console.log('names: ',  names);
+  names.forEach(function(nm) {
+    window['submitReaction' + nm] = function(token) {
+      window[nm].handleSubmit(token);
+    };
+    console.log('nm: ',nm)
+  });
+
 });
+
+
diff --git a/fec/fec/static/js/pages/reaction-box.js b/fec/fec/static/js/modules/reaction-box.js
similarity index 76%
rename from fec/fec/static/js/pages/reaction-box.js
rename to fec/fec/static/js/modules/reaction-box.js
index 073029d299..d4de4c6acb 100644
--- a/fec/fec/static/js/pages/reaction-box.js
+++ b/fec/fec/static/js/modules/reaction-box.js
@@ -5,7 +5,7 @@
  * Previously implemented here (ported to this Django project):
  * https://github.com/18F/openFEC-web-app/blob/develop/openfecwebapp/views.py#L302
  */
-var $ = require('jquery');
+//var $ = require('jquery');
 var helpers = require('../modules/helpers');
 var analytics = require('../modules/analytics');
 
@@ -125,36 +125,5 @@ ReactionBox.prototype.handleReset = function() {
   this.$textarea.val('');
 };
 
-/**
- * To implement a reaction box:
- * Add a reaction-box jinja macro to a template (use quoted strings for the name and location positional arguments)
- * Include a reference to this JS file in the parent template(preferably in extra JS block)
- * (The below function will use the name/location values of any
- *  reaction box on the page to initiate it as a new ReactionBox())
- */
 
-/**
- * Document ready function called when document is loaded
- */
-$(document).ready(function() {
-  //find any reaction box(es) on the page
-  var reactionBoxes = document.querySelectorAll('.reaction-box');
-  var names = [];
-  //iterate over the reaction box(es)
-  for (var box of reactionBoxes) {
-    var name = box.getAttribute('data-name');
-    var location = box.getAttribute('data-location');
-    //push name to names array
-    names.push(name);
-    //inititailize new ReactionBox
-    window[name] = new ReactionBox(
-      `[data-name="${name}"][data-location="${location}"]`
-    );
-  }
-  //use names array to define the submitReaction*() for each
-  names.forEach(function(nm) {
-    window['submitReaction' + nm] = function(token) {
-      window[nm].handleSubmit(token);
-    };
-  });
-});
+module.exports = { ReactionBox: ReactionBox };
diff --git a/fec/home/blocks.py b/fec/home/blocks.py
index 81d6fcf119..88cae3f4f7 100644
--- a/fec/home/blocks.py
+++ b/fec/home/blocks.py
@@ -208,6 +208,17 @@ class Meta:
         template = 'blocks/example-paragraph.html'
         icon = 'pilcrow'
 
+class ReactionFeedback(blocks.StructBlock):
+    """Creates a ReactionFeedback box that submits to github
+    """
+    title = blocks.CharBlock(required=False)
+    name = blocks.CharBlock(required=False)
+    location = blocks.CharBlock(required=False)
+
+    class Meta:
+        template = 'blocks/reaction-block.html'
+        icon = 'openquote'
+
 
 class ResourceBlock(blocks.StructBlock):
     """A section of a ResourcePage"""
@@ -249,6 +260,7 @@ class ResourceBlock(blocks.StructBlock):
         ('image', ImageChooserBlock()),
         ('example_image', ExampleImage()),
         ('example_paragraph', ExampleParagraph()),
+        ('reaction_feedback', ReactionFeedback()),
     ])
 
     aside = blocks.StreamBlock([
diff --git a/fec/home/migrations/0125_auto_20221207_2254.py b/fec/home/migrations/0125_auto_20221207_2254.py
new file mode 100644
index 0000000000..45005fe92d
--- /dev/null
+++ b/fec/home/migrations/0125_auto_20221207_2254.py
@@ -0,0 +1,30 @@
+# Generated by Django 3.2.16 on 2022-12-08 03:54
+
+from django.db import migrations
+import home.blocks
+import wagtail.contrib.table_block.blocks
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.documents.blocks
+import wagtail.images.blocks
+import wagtail.snippets.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0124_auto_20220706_0036'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='custompage',
+            name='body',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.CharBlock(form_classname='full title', icon='title')), ('paragraph', wagtail.core.blocks.RichTextBlock()), ('html', wagtail.core.blocks.RawHTMLBlock()), ('example_image', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=False)), ('caption', wagtail.core.blocks.RichTextBlock(required=True)), ('image', wagtail.images.blocks.ImageChooserBlock(required=True))])), ('image', wagtail.images.blocks.ImageChooserBlock()), ('table', wagtail.contrib.table_block.blocks.TableBlock(table_options={'renderer': 'html'})), ('example_paragraph', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('paragraph', wagtail.core.blocks.RichTextBlock(required=True))])), ('example_forms', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('forms', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('url', wagtail.core.blocks.URLBlock()), ('media_type', wagtail.core.blocks.CharBlock()), ('text', wagtail.core.blocks.CharBlock())])))])), ('reporting_example_cards', wagtail.core.blocks.StructBlock([('card_width', wagtail.core.blocks.ChoiceBlock(choices=[(2, '1/2'), (3, '1/3')], help_text='Control the width of the cards')), ('cards', wagtail.core.blocks.ListBlock(wagtail.core.blocks.PageChooserBlock(), icon='doc-empty'))])), ('contact_info', wagtail.core.blocks.StructBlock([('label', wagtail.core.blocks.CharBlock(icon='title', required=False)), ('contact_items', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('item_label', wagtail.core.blocks.CharBlock(required=False)), ('item_icon', wagtail.core.blocks.ChoiceBlock(choices=[('email', 'Email'), ('fax', 'Fax'), ('hand', 'Hand delivery'), ('phone', 'Phone'), ('mail', 'Mail'), ('github', 'Github'), ('question-bubble', 'Question')])), ('item_info', wagtail.core.blocks.RichTextBlock(required=True))])))])), ('internal_button', wagtail.core.blocks.StructBlock([('internal_page', wagtail.core.blocks.PageChooserBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('external_button', wagtail.core.blocks.StructBlock([('url', wagtail.core.blocks.URLBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('reaction_feedback', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=False)), ('name', wagtail.core.blocks.CharBlock(required=False)), ('location', wagtail.core.blocks.CharBlock(required=False))])), ('contribution_limits_table', wagtail.snippets.blocks.SnippetChooserBlock('home.EmbedSnippet', icon='table', template='blocks/embed-table.html')), ('informational_message', wagtail.snippets.blocks.SnippetChooserBlock('home.EmbedSnippet', icon='warning', template='blocks/embed-info-message.html')), ('document_list', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())]), icon='doc-empty', template='blocks/document-list.html')), ('simple_document_list', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())]), icon='doc-empty', template='blocks/simple-document-list.html'))], null=True),
+        ),
+        migrations.AlterField(
+            model_name='resourcepage',
+            name='sections',
+            field=wagtail.core.fields.StreamField([('sections', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('hide_title', wagtail.core.blocks.BooleanBlock(help_text='Should the section title be displayed?', required=False)), ('content', wagtail.core.blocks.StreamBlock([('text', wagtail.core.blocks.RichTextBlock(blank=False, icon='pilcrow', null=False, required=False)), ('documents', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('url', wagtail.core.blocks.URLBlock()), ('media_type', wagtail.core.blocks.CharBlock()), ('text', wagtail.core.blocks.CharBlock())]), icon='doc-empty', template='blocks/section-documents.html')), ('contact_info', wagtail.core.blocks.StructBlock([('label', wagtail.core.blocks.CharBlock(icon='title', required=False)), ('contact_items', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('item_label', wagtail.core.blocks.CharBlock(required=False)), ('item_icon', wagtail.core.blocks.ChoiceBlock(choices=[('email', 'Email'), ('fax', 'Fax'), ('hand', 'Hand delivery'), ('phone', 'Phone'), ('mail', 'Mail'), ('github', 'Github'), ('question-bubble', 'Question')])), ('item_info', wagtail.core.blocks.RichTextBlock(required=True))])))])), ('internal_button', wagtail.core.blocks.StructBlock([('internal_page', wagtail.core.blocks.PageChooserBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('external_button', wagtail.core.blocks.StructBlock([('url', wagtail.core.blocks.URLBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('page', wagtail.core.blocks.PageChooserBlock(template='blocks/page-links.html')), ('disabled_page', wagtail.core.blocks.CharBlock(blank=False, help_text='Name of a disabled link', icon='placeholder', null=False, required=False, template='blocks/disabled-page-links.html')), ('document_list', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())]), icon='doc-empty', template='blocks/document-list.html')), ('simple_document_list', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())]), icon='doc-empty', template='blocks/simple-document-list.html')), ('current_commissioners', home.blocks.CurrentCommissionersBlock()), ('fec_jobs', home.blocks.CareersBlock()), ('mur_search', home.blocks.MURSearchBlock()), ('audit_search', home.blocks.AuditSearchBlock()), ('af_search', home.blocks.AFSearchBlock()), ('table', wagtail.contrib.table_block.blocks.TableBlock(table_options={'renderer': 'html'})), ('custom_table', wagtail.core.blocks.StructBlock([('custom_table', wagtail.core.blocks.StreamBlock([('title', wagtail.core.blocks.CharBlock(icon='title', required=False)), ('table_intro', wagtail.core.blocks.RichTextBlock(required=False)), ('table', wagtail.contrib.table_block.blocks.TableBlock(table_options={'colHeaders': True, 'height': 108, 'language': 'en', 'renderer': 'html', 'rowHeaders': True, 'startCols': 6, 'startRows': 7})), ('footnote', wagtail.core.blocks.CharBlock(icon='superscript', required=False))]))])), ('html', wagtail.core.blocks.RawHTMLBlock()), ('reporting_example_cards', wagtail.core.blocks.StructBlock([('card_width', wagtail.core.blocks.ChoiceBlock(choices=[(2, '1/2'), (3, '1/3')], help_text='Control the width of the cards')), ('cards', wagtail.core.blocks.ListBlock(wagtail.core.blocks.PageChooserBlock(), icon='doc-empty'))])), ('contribution_limits_table', wagtail.snippets.blocks.SnippetChooserBlock('home.EmbedSnippet', icon='table', template='blocks/embed-table.html')), ('informational_message', wagtail.snippets.blocks.SnippetChooserBlock('home.EmbedSnippet', icon='warning', template='blocks/embed-info-message.html')), ('image', wagtail.images.blocks.ImageChooserBlock()), ('example_image', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=False)), ('caption', wagtail.core.blocks.RichTextBlock(required=True)), ('image', wagtail.images.blocks.ImageChooserBlock(required=True))])), ('example_paragraph', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('paragraph', wagtail.core.blocks.RichTextBlock(required=True))])), ('reaction_feedback', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=False)), ('name', wagtail.core.blocks.CharBlock(required=False)), ('location', wagtail.core.blocks.CharBlock(required=False))]))])), ('aside', wagtail.core.blocks.StreamBlock([('title', wagtail.core.blocks.CharBlock(icon='title', required=False)), ('document', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('url', wagtail.core.blocks.URLBlock()), ('media_type', wagtail.core.blocks.CharBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('link', wagtail.core.blocks.StructBlock([('link_type', wagtail.core.blocks.ChoiceBlock(choices=[('calculator', 'Calculator'), ('calendar', 'Calendar'), ('record', 'Record'), ('search', 'Search')], help_text='Set an icon', icon='link', required=False)), ('url', wagtail.core.blocks.URLBlock()), ('text', wagtail.core.blocks.CharBlock(required=True)), ('coming_soon', wagtail.core.blocks.BooleanBlock(required=False))]))], icon='placeholder', required=False, template='blocks/section-aside.html'))]))], blank=True, null=True),
+        ),
+    ]
diff --git a/fec/home/models.py b/fec/home/models.py
index c4be98066a..cb0a52f18a 100644
--- a/fec/home/models.py
+++ b/fec/home/models.py
@@ -33,7 +33,7 @@
     DocumentFeedBlurb, ExampleForms, ExampleImage, ExampleParagraph,
     ExternalButtonBlock, InternalButtonBlock, LinkBlock, OptionBlock,
     ReportingExampleCards, ResourceBlock, SnippetChooserBlock,
-    ThumbnailBlock, FeedDocumentBlock
+    ThumbnailBlock, FeedDocumentBlock, ReactionFeedback
 )
 
 logger = logging.getLogger(__name__)
@@ -606,6 +606,7 @@ class CustomPage(Page):
         ('contact_info', ContactInfoBlock()),
         ('internal_button', InternalButtonBlock()),
         ('external_button', ExternalButtonBlock()),
+        ('reaction_feedback', ReactionFeedback()),
         ('contribution_limits_table', SnippetChooserBlock(
             'home.EmbedSnippet',
             template='blocks/embed-table.html', icon='table')),
diff --git a/fec/home/templates/blocks/reaction-block.html b/fec/home/templates/blocks/reaction-block.html
new file mode 100644
index 0000000000..2cbd6511ff
--- /dev/null
+++ b/fec/home/templates/blocks/reaction-block.html
@@ -0,0 +1,7 @@
+{% load wagtailcore_tags %}
+{% load filters %}
+{% load static %}
+{% load reaction_feedback %}
+
+{% reaction_box page.content_type.model page.id %}
+
diff --git a/fec/home/templates/home/custom_page.html b/fec/home/templates/home/custom_page.html
index f6f0a3145a..7e68fcbd89 100644
--- a/fec/home/templates/home/custom_page.html
+++ b/fec/home/templates/home/custom_page.html
@@ -20,9 +20,9 @@ <h1>{{ self.title }}</h1>
         {% for block in self.body %}
         <div class="block-{{ block.block_type }}">
           {% if block.block_type == 'paragraph' %}
-          <div class="rich-text">{{ block }}</div>
+          <div class="rich-text">{% include_block block %}</div>
           {% else %}
-          {{ block }}
+          {% include_block block %}
           {% endif %}
         </div>
         {% endfor %}
@@ -129,5 +129,6 @@ <h4 class="sidebar__title">Legal citations</h4>
 {% block extra_js %}
 {% if self.conditional_js %}
 <script type="text/javascript" src="{% asset_for_js self.get_conditional_js_display %}"></script>
+ <script> window.BASE_PATH = '/data' </script>
 {% endif %}
 {% endblock %}
diff --git a/fec/home/templates/home/home_page.html b/fec/home/templates/home/home_page.html
index 68107c3594..b9f6649706 100644
--- a/fec/home/templates/home/home_page.html
+++ b/fec/home/templates/home/home_page.html
@@ -28,11 +28,13 @@ <h2 id="hero-heading">Protecting the integrity of the campaign finance process</
         </div>
       {% endif %}
     {% endfor %}
+
     <div class="container">
       <div class="heading--section heading--with-action">
         <h2 class="heading__left">News and announcements</h2>
         <a class="button--cta button--updates heading__right" href="/updates">All news</a>
       </div>
+  
 
       {% home_page_news %}
 
diff --git a/fec/home/templates/home/resource_page.html b/fec/home/templates/home/resource_page.html
index 92bd2c400a..af68e02fc5 100644
--- a/fec/home/templates/home/resource_page.html
+++ b/fec/home/templates/home/resource_page.html
@@ -1,5 +1,6 @@
 {% extends "long_page.html" %}
 {% load wagtailcore_tags %}
+{% load filters %}
 {% load static %}
 {% block body_class %}template-{{ self.get_verbose_name | slugify }}{% endblock %}
 
@@ -97,3 +98,7 @@ <h2>Related topics</h2>
   {% endfor %}
 </div>
 {% endblock %}
+{% block extra_js %}
+  <script> window.BASE_PATH = '/data' </script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/fec/home/templates/partials/reaction-feedback.html b/fec/home/templates/partials/reaction-feedback.html
new file mode 100644
index 0000000000..27729fbaae
--- /dev/null
+++ b/fec/home/templates/partials/reaction-feedback.html
@@ -0,0 +1,42 @@
+{% load wagtailcore_tags %}
+PAGE:{{ template }}
+PID:{{ pid }}
+
+<div class="reaction-box js-reaction-box" data-name="fees-section" data-location="{{ location }}">
+    <form>
+      <div class="js-reaction-step-1">
+        <span class="reaction-box__heading">{{ title }}</span>
+        <ul class="list--buttons">
+          <li>
+            <button type="button" class="button--standard button--informative js-reaction" data-reaction="informative">Informative</button>
+          </li>
+          <li>
+            <button type="button" class="button--standard button--confusing js-reaction" data-reaction="confusing">Confusing</button>
+          </li>
+          <li>
+            <button type="button" class="button--standard button--not-interested js-reaction" data-reaction="not-interested">Not interested</button>
+          </li>
+          <li>
+            <button type="button" class="button--standard js-reaction" data-reaction="none">None of the above</button>
+          </li>
+        </ul>
+      </div>
+      <div class="js-reaction-step-2 u-fade-in" aria-hidden="true">
+        <span class="reaction-box__heading">{{ title }}</span>
+        <p><label for="reaction-more-fees-section"></label></p>
+        <textarea id="reaction-more-fees-section"></textarea>
+        <ul class="list--buttons">
+          <li><button data-sitekey="6Lc0uGwUAAAAALGRGXt3mTteJeb_lbse2frNdWjv" data-callback="submitReactionfees-section" class="g-recaptcha button--standard js-skip" data-badge="bottomleft">Skip</button></li>
+          <li><button data-sitekey="6Lc0uGwUAAAAALGRGXt3mTteJeb_lbse2frNdWjv" data-callback="submitReactionfees-section" class="g-recaptcha button--cta" data-badge="bottomleft">Submit</button></li>
+      </div>
+    </form
+    >
+    <div class="message message--success message--inverse-alt message--small js-reaction-success u-fade-in" aria-hidden="true">
+      Thanks for helping us improve!
+    </div>
+    <div class="message message--error message--inverse-alt message--small js-reaction-error u-fade-in" aria-hidden="true">
+      <p>Uh oh. Something went wrong. Please try again.</p>
+      <button type="button" class="js-reset button--cta">Start over</button>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/fec/home/templatetags/reaction_feedback.py b/fec/home/templatetags/reaction_feedback.py
new file mode 100644
index 0000000000..2675023ce3
--- /dev/null
+++ b/fec/home/templatetags/reaction_feedback.py
@@ -0,0 +1,53 @@
+from django import template
+from django.contrib.contenttypes.models import ContentType
+from django.contrib.contenttypes.models import ContentTypeManager
+from wagtail.core.models import Page
+
+register = template.Library()
+
+
+@register.inclusion_tag('partials/reaction-feedback.html')
+def reaction_box(template, pid, **kwargs):
+    
+    #Docs for below: https://docs.djangoproject.com/en/4.1/ref/contrib/contenttypes/#methods-on-contenttype-instances
+    if not kwargs:
+        page_type = ContentType.objects.get(app_label='home', model=template)
+
+        page = page_type.get_object_for_this_type(id=pid)
+        #page = page_type.objects.get(id=pid)
+        
+    # NOTE: CANNOT HAVE TWO ON SAME PAGE USING WAGTAIL BECAUSE 'name', 'title', location get set on the second iteration
+    #...EVEN IF YOU USE ONE AS A BLOCK AND ONE AS HTML
+
+    # TO HARDCODE INTO TEMPLATE IMPORT AT TOP AND THEN LIKE THIS: {% reaction_box page.content_type.model page.id title='Do you like these buttons' location='home' name='home_buttons'%}
+        if template == 'resourcepage':
+            # Get the raw_data from the main 'sections' StreamField (formerly stream_data)
+            all_sections = page.sections.raw_data
+
+            for section in all_sections:
+                for item in section.get('value').get('content'):
+                    if item.get('type') =='reaction_feedback':
+                        title = item.get('value').get('title')
+                        name = item.get('value').get('name')
+                        location = item.get('value').get('location')
+
+        elif template == 'custompage':
+            body = page.body.raw_data
+            for item in body:
+                if item.get('type') =='reaction_feedback':
+                    title = item.get('value').get('title', '')
+                    name = item.get('value').get('name')
+                    location = item.get('value').get('location')
+    
+    else:
+        title = kwargs['title']
+        name = kwargs['name']
+        location = kwargs['location']
+
+    return {
+        'title': title,
+        'name': name,
+        'location': location,
+        #'template': template,
+        #'pid' : pid,
+    }
\ No newline at end of file

From c5b86b4e5ee81f7eeffdf2de6f2bb62bf1d65673 Mon Sep 17 00:00:00 2001
From: John Carroll <johncarroll@Johns-MacBook-Pro.local>
Date: Tue, 13 Dec 2022 22:16:06 -0500
Subject: [PATCH 2/2] reqire jquery fix comments

---
 fec/fec/static/js/modules/reaction-box.js  |  3 +--
 fec/home/blocks.py                         |  1 +
 fec/home/templatetags/reaction_feedback.py | 27 +++++++++++-----------
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/fec/fec/static/js/modules/reaction-box.js b/fec/fec/static/js/modules/reaction-box.js
index d4de4c6acb..e9dfd9b72a 100644
--- a/fec/fec/static/js/modules/reaction-box.js
+++ b/fec/fec/static/js/modules/reaction-box.js
@@ -5,7 +5,7 @@
  * Previously implemented here (ported to this Django project):
  * https://github.com/18F/openFEC-web-app/blob/develop/openfecwebapp/views.py#L302
  */
-//var $ = require('jquery');
+var $ = require('jquery');
 var helpers = require('../modules/helpers');
 var analytics = require('../modules/analytics');
 
@@ -125,5 +125,4 @@ ReactionBox.prototype.handleReset = function() {
   this.$textarea.val('');
 };
 
-
 module.exports = { ReactionBox: ReactionBox };
diff --git a/fec/home/blocks.py b/fec/home/blocks.py
index 88cae3f4f7..88d2bce1d2 100644
--- a/fec/home/blocks.py
+++ b/fec/home/blocks.py
@@ -208,6 +208,7 @@ class Meta:
         template = 'blocks/example-paragraph.html'
         icon = 'pilcrow'
 
+
 class ReactionFeedback(blocks.StructBlock):
     """Creates a ReactionFeedback box that submits to github
     """
diff --git a/fec/home/templatetags/reaction_feedback.py b/fec/home/templatetags/reaction_feedback.py
index 2675023ce3..4443912729 100644
--- a/fec/home/templatetags/reaction_feedback.py
+++ b/fec/home/templatetags/reaction_feedback.py
@@ -1,32 +1,31 @@
 from django import template
 from django.contrib.contenttypes.models import ContentType
-from django.contrib.contenttypes.models import ContentTypeManager
-from wagtail.core.models import Page
 
 register = template.Library()
 
 
 @register.inclusion_tag('partials/reaction-feedback.html')
 def reaction_box(template, pid, **kwargs):
-    
-    #Docs for below: https://docs.djangoproject.com/en/4.1/ref/contrib/contenttypes/#methods-on-contenttype-instances
+
+    # Docs for below: https://docs.djangoproject.com/en/4.1/ref/contrib/contenttypes/#methods-on-contenttype-instances
     if not kwargs:
         page_type = ContentType.objects.get(app_label='home', model=template)
 
         page = page_type.get_object_for_this_type(id=pid)
-        #page = page_type.objects.get(id=pid)
-        
+        # page = page_type.objects.get(id=pid)
+
     # NOTE: CANNOT HAVE TWO ON SAME PAGE USING WAGTAIL BECAUSE 'name', 'title', location get set on the second iteration
-    #...EVEN IF YOU USE ONE AS A BLOCK AND ONE AS HTML
+    # ...EVEN IF YOU USE ONE AS A BLOCK AND ONE AS HTML
 
-    # TO HARDCODE INTO TEMPLATE IMPORT AT TOP AND THEN LIKE THIS: {% reaction_box page.content_type.model page.id title='Do you like these buttons' location='home' name='home_buttons'%}
+    # TO HARDCODE INTO TEMPLATE IMPORT AT TOP AND THEN LIKE THIS:
+    # {% reaction_box page.content_type.model page.id title='Do you like?' location='home' name='home_buttons' %}
         if template == 'resourcepage':
             # Get the raw_data from the main 'sections' StreamField (formerly stream_data)
             all_sections = page.sections.raw_data
 
             for section in all_sections:
                 for item in section.get('value').get('content'):
-                    if item.get('type') =='reaction_feedback':
+                    if item.get('type') == 'reaction_feedback':
                         title = item.get('value').get('title')
                         name = item.get('value').get('name')
                         location = item.get('value').get('location')
@@ -34,11 +33,11 @@ def reaction_box(template, pid, **kwargs):
         elif template == 'custompage':
             body = page.body.raw_data
             for item in body:
-                if item.get('type') =='reaction_feedback':
+                if item.get('type') == 'reaction_feedback':
                     title = item.get('value').get('title', '')
                     name = item.get('value').get('name')
                     location = item.get('value').get('location')
-    
+
     else:
         title = kwargs['title']
         name = kwargs['name']
@@ -48,6 +47,6 @@ def reaction_box(template, pid, **kwargs):
         'title': title,
         'name': name,
         'location': location,
-        #'template': template,
-        #'pid' : pid,
-    }
\ No newline at end of file
+        # 'template': template,
+        # 'pid' : pid,
+    }