commit e5aefae7dc7cdd85e099289594c78e9e3b8e360e Author: Peter Haight peterh@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 }}`, + } + ], }, } );