Commit 6a919d73 authored by Stephanie Kirtiadi's avatar Stephanie Kirtiadi Committed by peterh-gr
Browse files

Bringing react elements to prepare for single, monthly & both donations

In preparation to bring donate site to the main Tor lektor site.
Doesn't include styling and payment processing.

Issue #45541
parent b1c40acc
_model: donate-form
---
_template: layout.html
frequency: both
---
color: primary
section:
---
title: Donate
--
frequency: both
---
intro:
<div class="left-column">
<h4 class="end-of-year-2019-campaign-header-subtitle">Intro!</h4>
</div>
_template: layout.html
---
html: donate-form.html
---
body:
### Body!
_model: donate-form
---
frequency: monthly
---
section:
---
title: Donate - Monthly
---
_template: layout.html
---
html: donate-form.html
_model: donate-form
---
_template: layout.html
---
color: primary
---
title: Single Donation
--
frequency: single
---
intro:
<div class="left-column">
<h4 class="end-of-year-2019-campaign-header-subtitle">Single!</h4>
</div>
_template: layout.html
---
html: donate-form.html
---
body:
### Body!
title: Donate - Single
......@@ -8,10 +8,8 @@ export function _ChampionsOfPrivacyGivingForm(props) {
return(
<React.Fragment>
<GivingForm
frequency='champions-of-privacy'
templateFrequency='champions-of-privacy'
stripe={stripe}
initialSelectedPrice={100000}
displayPerkSelection={false}
/>
</React.Fragment>
);
......
......@@ -5,7 +5,7 @@ import {showCommaForThousands} from '/number';
export function DonationInformation(props) {
const {selectedPrice, frequency} = props;
let label = '$ ' + showCommaForThousands(selectedPrice / 100);
let label = ' $' + showCommaForThousands(selectedPrice / 100);
if (frequency == 'monthly') {
label += ' per month';
}
......
import React from 'react';
export function FrequencyOptionButton(props) {
const {frequency, onFrequencySelection, name} = props;
var label = 'Once';
if (name == 'monthly') {
label = 'Monthly';
}
var classes = ['btn'];
if (name == frequency) {
classes.push('selected');
}
return (
<React.Fragment>
<button
name={name}
className={classes.join(' ')}
onClick={() => onFrequencySelection(name)}
>
Donate <span className="bold">{label}</span>
</button>
</React.Fragment>
);
}
import React from 'react';
import {FrequencyOptionButton} from './frequency_option_button';
export function FrequencySelector(props) {
const {templateFrequency, frequency, onFrequencySelection} = props;
const renderButtons = () => {
if (templateFrequency != 'both') {
return null;
}
return (
<div className="donate-options">
<FrequencyOptionButton
frequency={frequency}
onFrequencySelection={onFrequencySelection}
name="single"
/>
<FrequencyOptionButton
frequency={frequency}
onFrequencySelection={onFrequencySelection}
name="monthly"
/>
</div>
);
};
return renderButtons();
}
......@@ -10,15 +10,17 @@ import {PaymentOptionButton} from './payment_option_button';
import {PerkSelectionSection} from './perk_selection_section';
import {GivingInfoForm} from './giving_info_form';
import {GivingErrorContainer} from './giving_error_container';
import {perks, pricesOnButtons, paymentMethods, shirtFits, sweatshirtSizes, requiredFields, textFields} from './settings';
import {perks, pricesOnButtons, paymentMethods, shirtFits, sweatshirtSizes, requiredFields, textFields, initialSelectedPrices, displayPerkSelections, initialFrequency, stripeTokenFieldMap} from './settings';
import {AppContext} from './app_context';
import {LoadingDialogReactPages} from './loading_dialog_react_pages';
import {stripeTokenFieldMap} from './settings';
import {FrequencySelector} from './frequency_selector';
export function _GivingForm(props) {
const {frequency, stripe, initialSelectedPrice, displayPerkSelection} = props;
const {stripe, templateFrequency} = props;
const [frequency, setFrequency] = useState(initialFrequency[templateFrequency]);
const displayPerkSelection = displayPerkSelections[frequency];
const [noPerk, setNoPerk] = useState(true);
const [selectedPrice, setSelectedPrice] = useState(initialSelectedPrice);
const [selectedPrice, setSelectedPrice] = useState(initialSelectedPrices[frequency]);
const [selectedPerk, setSelectedPerk] = useState(null);
const [perkOption, setPerkOption] = useState('strength-in-numbers');
const [paymentMethod, setPaymentMethod] = useState('credit-card');
......@@ -378,8 +380,19 @@ export function _GivingForm(props) {
}
}
const onFrequencySelection = (newFrequency) => {
setFrequency(newFrequency);
setSelectedPrice(initialSelectedPrices[newFrequency]);
};
return(
<React.Fragment>
<FrequencySelector
templateFrequency={templateFrequency}
frequency={frequency}
onFrequencySelection={onFrequencySelection}
/>
<form action="/donate" method="POST" id="donationForm" onSubmit={onSubmit}>
<div className="donation-selection-area">
<DonationPrices
......
......@@ -107,7 +107,7 @@ export function GivingInfoForm(props) {
<textarea id="donate-comments" name="comments" aria-label="Comments" placeholder="Comments" onChange={onInputFieldChange} ></textarea>
</div>
<div className="donate-submit-area">
Donating:
Donating:
<DonationInformation
selectedPrice={selectedPrice}
frequency={frequency}
......
......@@ -2,7 +2,7 @@ import '../sass/style.scss';
import 'babel-polyfill';
import {CryptocurrencyForm} from './cryptocurrency_form';
import {LoadingDialog} from './loading_dialog';
import {MonthlyGivingForm} from './monthly_giving_form';
import {GivingForm} from './giving_form';
import {ChampionsOfPrivacyGivingForm} from './champions_of_privacy_giving_form';
import {PaymentController, GiftMatchingController} from './payment_controller'
import React from 'react';
......@@ -14,7 +14,7 @@ const reactCallbacks = {};
const availableComponents = {
'CryptocurrencyForm': CryptocurrencyForm,
'LoadingDialog': LoadingDialog,
'MonthlyGivingForm': MonthlyGivingForm,
'GivingForm': GivingForm,
'ChampionsOfPrivacyGivingForm': ChampionsOfPrivacyGivingForm,
};
......
import React, {useState, useRef, useContext, useEffect} from 'react';
import {injectStripe} from 'react-stripe-elements';
import {GivingForm} from './giving_form';
export function _MonthlyGivingForm(props) {
const {stripe} = props;
return(
<React.Fragment>
<GivingForm
frequency='monthly'
stripe={stripe}
initialSelectedPrice={2500}
displayPerkSelection={true}
/>
</React.Fragment>
);
}
export const MonthlyGivingForm = injectStripe(_MonthlyGivingForm);
......@@ -14,11 +14,16 @@ export function PerkTile(props) {
classes.push('selected');
}
var pricePrefix = "Once";
if (frequency == 'monthly') {
pricePrefix = 'Monthly';
}
return (
<React.Fragment>
<div name={perk.name} className={classes.join(" ")} price-in-cents={perk.price['frequency']} onClick={(e) => onPerkSelection(event, perk)}>
<div name={perk.name} className="price-tag-group">
<div name={perk.name} className="price-tag">${perk.price[frequency]/100}</div>
<div name={perk.name} className="price-tag">{pricePrefix} ${perk.price[frequency]/100}</div>
</div>
<h4 name={perk.name} className="perk-label">{perk.friendly_name}</h4>
<div name={perk.name} className="slides">
......
......@@ -3,10 +3,11 @@ import React from 'react';
export const perks = [
{
'name': 'stickers',
'image': '/images/Stickerpack-1.png',
'image': '/static/images/donate/stickerpack-1.png',
'friendly_name': 'Sticker Pack',
'description': 'A collection of our favorite logo stickers for decorating your stuff and covering your cams.',
'price': {
'single': 2500,
'monthly': 1000,
},
'img_width': 300,
......@@ -16,10 +17,11 @@ export const perks = [
},
{
'name': 't-shirt',
'image': '/images/t-shirt-take-back-internet.png',
'image': '/static/images/donate/t-shirt-take-back-internet.png',
'friendly_name': 'T-Shirt',
'description': 'Get our limited edition Take Back the Internet With Tor shirt.',
'price': {
'single': 7500,
'monthly': 2500,
},
'img_width': 214,
......@@ -29,10 +31,11 @@ export const perks = [
},
{
'name': 't-shirt-pack',
'image': '/images/t-shirt-pack-take-back-internet.png',
'image': '/static/images/donate/t-shirt-pack-take-back-internet.png',
'friendly_name': 'T-Shirt Pack',
'description': "Get this year's Take Back the Internet With Tor t-shirt and the Tor: Strength in Numbers t-shirt.",
'price': {
'single': 12500,
'monthly': 5000,
},
'img_width': 198,
......@@ -41,17 +44,18 @@ export const perks = [
{
'name': 'strength-in-numbers',
'friendlyName': 'Strength in Numbers',
'image': '/images/t-shirt-pack-take-back-internet.png'
'image': '/static/images/donate/t-shirt-pack-take-back-internet.png'
},
],
'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
},
{
'name': 'sweatshirt',
'image': '/images/hoodie-take-back-internet.png',
'image': '/static/images/donate/hoodie-take-back-internet.png',
'friendly_name': 'Sweatshirt',
'description': 'Your generous support of Tor gets you this high-quality zip hoodie.',
'price': {
'single': 50000,
'monthly': 10000,
},
'img_width': 400,
......@@ -62,6 +66,7 @@ export const perks = [
];
export const pricesOnButtons = {
'single': [2500, 7500, 12500, 25000, 50000],
'monthly': [500, 1000, 2500, 5000, 10000],
'champions-of-privacy': [100000, 500000, 1000000],
};
......@@ -73,7 +78,7 @@ export const paymentMethods = [
},
{
'name': 'paypal',
'label': (<img name="paypal" className="paypal paypal-png" src="/images/PayPal.svg.png" />),
'label': (<img name="paypal" className="paypal paypal-png" src="/static/images/donate/PayPal.svg.png" />),
}
];
......@@ -205,3 +210,24 @@ export const stripeTokenFieldMap = {
'streetAddress': 'address_line1',
'locality': 'address_city',
};
export const initialSelectedPrices = {
'single': 12500,
'monthly': 2500,
'both': 12500,
'champions-of-privacy': 100000
}
export const displayPerkSelections = {
'single': true,
'monthly': true,
'both': true,
'champions-of-privacy': false
}
export const initialFrequency = {
'single': 'single',
'monthly': 'monthly',
'both': 'single',
'champions-of-privacy': 'champions-of-privacy'
}
......@@ -37,7 +37,7 @@ export function StripeCreditCardForm(props) {
{...createOptions('Card Number', 'card-number')}
onChange={onStripeFieldChange}
/>
<img className='credit-cards' src='/images/credit-cards.png'/>
<img className='credit-cards' src='/static/images/donate/credit-cards.png'/>
</div>
<div className="field-row">
<CardExpiryElement
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment