[tor-commits] [donate-static/master] Added ability to edit counter labels

[peterh at torproject.org]

commit e5aefae7dc7cdd85e099289594c78e9e3b8e360e
Author: Peter Haight <peterh at giantrabbit.com>
Date:   Fri Oct 9 16:22:40 2020 -0700

    Added ability to edit counter labels
    
    Three new HTML fields for editing the counter lables. They want to be
    able to include links so they aren't just strings.
    
    Issue #48277
---
 content/donate/contents.lr    |  6 ++++++
 models/donate-form.ini        | 12 ++++++++++++
 parcel/js/campaign_totals.jsx | 20 +-------------------
 parcel/js/counter.jsx         |  4 +++-
 templates/donate-form.html    | 17 +++++++++++++++++
 5 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/content/donate/contents.lr b/content/donate/contents.lr
index 9a178119..8b9a2e94 100644
--- a/content/donate/contents.lr
+++ b/content/donate/contents.lr
@@ -93,3 +93,9 @@ counter: yes
 tshirt_pack_second_shirt_options_label: Take back the Internet with Tor
 ---
 tshirt_perk_options_label: Tor: Strength in Numbers
+---
+number_of_donations_counter_label: Number of Donations
+---
+total_donated_counter_label: Total Donated
+---
+total_matched_counter_label: Total Raised with Mozilla's Match
diff --git a/models/donate-form.ini b/models/donate-form.ini
index cd1027cb..943f775d 100644
--- a/models/donate-form.ini
+++ b/models/donate-form.ini
@@ -196,6 +196,18 @@ type = string
 label = T-Shirt Pack Second Shirt Options Label
 type = string
 
+[fields.number_of_donations_counter_label]
+label = Number of Donations Counter Label
+type = html
+
+[fields.total_donated_counter_label]
+label = Total Donated Counter Label
+type = html
+
+[fields.total_matched_counter_label]
+label = Total Matched Counter Label
+type = html
+
 [fields.html]
 label = Html
 type = string
diff --git a/parcel/js/campaign_totals.jsx b/parcel/js/campaign_totals.jsx
index d377c876..5fc548c2 100644
--- a/parcel/js/campaign_totals.jsx
+++ b/parcel/js/campaign_totals.jsx
@@ -2,26 +2,8 @@ import React, {useState} from 'react';
 import {Counter} from './counter';
 import {useInterval} from './use_interval';
 
-const counters = [
-  {
-    'cssClass': 'supporters',
-    'field': 'totalDonations',
-    'label': 'Number of Donations',
-  },
-  {
-    'cssClass': 'total-donated',
-    'field': 'totalAmount',
-    'label': 'Total Donated',
-  },
-  {
-    'cssClass': 'total-matched',
-    'field': 'amountWithMozilla',
-    'label': "Total Raised with Mozilla's Match",
-  }
-];
-
 export function CampaignTotals(props) {
-  const {donateProccessorBaseUrl} = props;
+  const {donateProccessorBaseUrl, counters} = props;
   const [amounts, setAmounts] = useState({
     'totalDonations': 0,
     'totalAmount': 0,
diff --git a/parcel/js/counter.jsx b/parcel/js/counter.jsx
index 773673b2..7c48dd30 100644
--- a/parcel/js/counter.jsx
+++ b/parcel/js/counter.jsx
@@ -70,12 +70,14 @@ export function Counter(props) {
     );
   }
 
+  const labelHtml = {__html: label};
+
   return (
     <div className={cssClass}>
       <div className="characters">
         {characterStates.map((character, index) => renderCharacter(character, index))}
       </div>
-      <div className="label">{label}</div>
+      <div className="label" dangerouslySetInnerHTML={labelHtml}></div>
     </div>
   );
 }
diff --git a/templates/donate-form.html b/templates/donate-form.html
index e263936b..ccd4b5ad 100644
--- a/templates/donate-form.html
+++ b/templates/donate-form.html
@@ -172,6 +172,23 @@
         name: 'CampaignTotals',
         props: {
           'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
+          'counters': [
+            {
+              'cssClass': 'supporters',
+              'field': 'totalDonations',
+              'label': `{{ this.number_of_donations_counter_label }}`,
+            },
+            {
+              'cssClass': 'total-donated',
+              'field': 'totalAmount',
+              'label': `{{ this.total_donated_counter_label }}`,
+            },
+            {
+              'cssClass': 'total-matched',
+              'field': 'amountWithMozilla',
+              'label': `{{ this.total_matched_counter_label }}`,
+            }
+          ],
         },
       }
     );