Skip to content

GitLab

Commit 781d96a0 authored by Stephanie Kirtiadi's avatar Stephanie Kirtiadi
Browse files

Implements fields for donation label, img and desc based on frequency. 

Issue #48273
parent 0e45020c
Hide whitespace changes
Inline Side-by-side
content/donate/contents.lr
View file @ 781d96a0
......@@ -2,6 +2,8 @@ _model: donate-form
---
frequency: both
---
default_frequency_for_both: single
---
section:
---
title: Donate
......@@ -10,7 +12,7 @@ _template: layout.html
---
html: donate-form.html
---
intro:
intro:
---
monthly_five: 10000
---
......@@ -31,3 +33,53 @@ single_one: 2500
single_three: 12500
---
single_two: 7500
---
sticker_perk_single_description: A collection of our favorite logo stickers for decorating your stuff and covering your cams.
---
sticker_perk_single_image: /static/images/donate/stickerpack-1.png
---
sticker_perk_single_label: Sticker Pack
---
sticker_perk_monthly_description: A collection of our favorite logo stickers for decorating your stuff and covering your cams (Monthly).
---
sticker_perk_monthly_image: /static/images/donate/stickerpack-1.png
---
sticker_perk_monthly_label: Sticker Pack
---
sweatshirt_perk_single_description: Your generous support of Tor gets you this high-quality zip hoodie.
---
sweatshirt_perk_single_label: Sweatshirt
---
sweatshirt_perk_monthly_description: Your generous support of Tor gets you this high-quality zip hoodie.
---
sweatshirt_perk_monthly_label: Sweatshirt
---
sweatshirt_perk_single_image: /static/images/donate/hoodie-take-back-internet.png
---
sweatshirt_perk_monthly_image: /static/images/donate/hoodie-take-back-internet.png
---
tshirt_pack_perk_single_description: Get this year's Take Back the Internet With Tor t-shirt and the Tor: Strength in Numbers t-shirt.
---
tshirt_pack_perk_single_label: T-Shirt Pack
---
tshirt_perk_single_description: Get our limited edition Take Back the Internet With Tor shirt.
---
tshirt_pack_perk_monthly_description: Get this year's Take Back the Internet With Tor t-shirt and the Tor: Strength in Numbers t-shirt.
---
tshirt_pack_perk_monthly_label: T-Shirt Pack
---
tshirt_perk_monthly_description: Get our limited edition Take Back the Internet With Tor shirt.
---
tshirt_perk_single_label: T-Shirt
---
tshirt_pack_perk_single_image: /static/images/donate/t-shirt-pack-take-back-internet.png
---
tshirt_pack_perk_monthly_image: /static/images/donate/t-shirt-pack-take-back-internet.png
---
tshirt_perk_single_image: /static/images/donate/t-shirt-take-back-internet.png
---
tshirt_perk_monthly_label: T-Shirt
---
tshirt_pack_perk_monthly_image: /static/images/donate/t-shirt-pack-take-back-internet.png
---
tshirt_perk_monthly_image: /static/images/donate/t-shirt-take-back-internet.png
models/donate-form.ini
View file @ 781d96a0
......@@ -8,6 +8,12 @@ type = select
choices = single, monthly, both
choice_labels = Single, Monthly, Both
[fields.default_frequency_for_both]
label = Select the default for when frequency "Both" is selected.
type = select
choices = single, monthly
choice_labels = Single, Monthly
[fields.intro]
label = Intro
type = html
......@@ -32,48 +38,144 @@ type = markdown
[fields.single_one]
label = Single Price 1 (in US cents)
type = string
type = integer
[fields.single_two]
label = Single Price 2 (in US cents)
type = string
type = integer
[fields.single_three]
label = Single Price 3 (in US cents)
type = string
label = Single Price 3, selected as default (in US cents)
type = integer
[fields.single_four]
label = Single Price 4 (in US cents)
type = string
type = integer
[fields.single_five]
label = Single Price 5 (in US cents)
type = string
type = integer
[fields.monthly_one]
label = Monthly Price 1 (in US cents)
type = string
type = integer
[fields.monthly_two]
label = Monthly Price 2 (in US cents)
type = string
type = integer
[fields.monthly_three]
label = Monthly Price 3 (in US cents)
type = string
label = Monthly Price 3, selected as default (in US cents)
type = integer
[fields.monthly_four]
label = Monthly Price 4 (in US cents)
type = string
type = integer
[fields.monthly_five]
label = Monthly Price 5 (in US cents)
type = string
type = integer
[fields.color]
label = Color
type = string
[fields.sticker_perk_single_label]
label = Sticker Perk Label (Single)
type = string
[fields.sticker_perk_single_image]
label = Sticker Perk Image (Single)
type = string
[fields.sticker_perk_single_description]
label = Sticker Perk Description (Single)
type = string
[fields.sticker_perk_montly_label]
label = Sticker Perk Label (Monthly)
type = string
[fields.sticker_perk_monthly_image]
label = Sticker Perk Image (Monthly)
type = string
[fields.sticker_perk_monthly_description]
label = Sticker Perk Description (Monthly)
type = string
[fields.tshirt_perk_single_label]
label = T-Shirt Perk Label (Single)
type = string
[fields.tshirt_perk_single_image]
label = T-Shirt Perk Image (Single)
type = string
[fields.tshirt_perk_single_description]
label = T-Shirt Perk Description (Single)
type = string
[fields.tshirt_perk_monthly_label]
label = T-Shirt Perk Label (Monthly)
type = string
[fields.tshirt_perk_monthly_image]
label = T-Shirt Perk Image (Monthly)
type = string
[fields.tshirt_perk_monthly_description]
label = T-Shirt Perk Description (Monthly)
type = string
[fields.tshirt_pack_perk_single_label]
label = T-Shirt Pack Perk Label (Single)
type = string
[fields.tshirt_pack_perk_single_image]
label = T-Shirt Pack Perk Image (Single)
type = string
[fields.tshirt_pack_perk_single_description]
label = T-Shirt Pack Perk Description (Single)
type = string
[fields.tshirt_pack_perk_monthly_label]
label = T-Shirt Pack Perk Label (Monthly)
type = string
[fields.tshirt_pack_perk_monthly_image]
label = T-Shirt Pack Perk Image (Monthly)
type = string
[fields.tshirt_pack_perk_monthly_description]
label = T-Shirt Pack Perk Description (Monthly)
type = string
[fields.sweatshirt_perk_single_label]
label = Sweatshirt Perk Label (Single)
type = string
[fields.sweatshirt_perk_single_image]
label = Sweatshirt Pack Perk Image (Single)
type = string
[fields.sweatshirt_perk_single_description]
label = Sweatshirt Perk Description (Single)
type = string
[fields.sweatshirt_perk_monthly_label]
label = Sweatshirt Perk Label (Monthly)
type = string
[fields.sweatshirt_perk_monthly_image]
label = Sweatshirt Pack Perk Image (Monthly)
type = string
[fields.sweatshirt_perk_monthly_description]
label = Sweatshirt Perk Description (Monthly)
type = string
[fields.html]
label = Html
type = string
parcel/js/giving_form.jsx
View file @ 781d96a0
......@@ -10,14 +10,14 @@ 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, paymentMethods, shirtFits, sweatshirtSizes, requiredFields, textFields, initialSelectedPrices, displayPerkSelections, initialFrequency, stripeTokenFieldMap} from './settings';
import {paymentMethods, shirtFits, sweatshirtSizes, requiredFields, textFields, displayPerkSelections, stripeTokenFieldMap} from './settings';
import {AppContext} from './app_context';
import {LoadingDialogReactPages} from './loading_dialog_react_pages';
import {FrequencySelector} from './frequency_selector';
export function _GivingForm(props) {
const {stripe, frequencyOptions, pricesOnButtons, donateProccessorBaseUrl} = props;
const [frequency, setFrequency] = useState(initialFrequency[frequencyOptions]);
const {stripe, frequencyOptions, pricesOnButtons, donateProccessorBaseUrl, perks, initialSelectedPrices, defaultFrequencyForBoth} = props;
const [frequency, setFrequency] = useState((frequencyOptions == 'both')? defaultFrequencyForBoth : frequencyOptions);
const displayPerkSelection = displayPerkSelections[frequency];
const [noPerk, setNoPerk] = useState(true);
const [selectedPrice, setSelectedPrice] = useState(initialSelectedPrices[frequency]);
......@@ -118,7 +118,7 @@ export function _GivingForm(props) {
const getPerkFriendlyName = (perkName) => {
for (const perk of perks) {
if (perk.name == perkName) {
return perk.friendly_name;
return perk.friendly_name[frequency];
}
}
return '';
......
parcel/js/perk_image.jsx
View file @ 781d96a0
import React from 'react';
export function PerkImage(props) {
const {perk, perkOption} = props;
const {perk, perkOption, frequency} = props;
let imageSource = perk.image;
let imageSource = perk.image[frequency];
if (perk.options !== null) {
for (const option of perk.options) {
if (option.name == perkOption) {
......@@ -13,6 +13,6 @@ export function PerkImage(props) {
}
return (
<img name={perk.name} src={imageSource} width={perk.img_width} height={perk.img_height} />
<img name={perk.name} src={imageSource} />
);
}
parcel/js/perk_tile.jsx
View file @ 781d96a0
......@@ -25,11 +25,11 @@ export function PerkTile(props) {
<div name={perk.name} className="price-tag-group">
<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>
<h4 name={perk.name} className="perk-label">{perk.friendly_name[frequency]}</h4>
<div name={perk.name} className="slides">
<PerkImage name={perk.name} perk={perk} perkOption={perkOption}/>
<PerkImage name={perk.name} perk={perk} perkOption={perkOption} frequency={frequency} />
</div>
<div name={perk.name} className="perk-desc">{perk.description}</div>
<div name={perk.name} className="perk-desc">{perk.description[frequency]}</div>
<PerkTileDropdown name={perk.name} options={perk.options} setPerkOption={setPerkOption} selectedPerk={selectedPerk} perk={perk}/>
</div>
</React.Fragment>
......
parcel/js/settings.js
View file @ 781d96a0
import React from 'react';
export const perks = [
{
'name': 'stickers',
'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,
'img_height': 225,
'options': null,
'requiredFields': [],
},
{
'name': 't-shirt',
'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,
'img_height': 179,
'options': null,
'requiredFields': ['shirt1Fit', 'shirt1Size'],
},
{
'name': 't-shirt-pack',
'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,
'img_height': 140,
'options': [
{
'name': 'strength-in-numbers',
'friendlyName': 'Strength in Numbers',
'image': '/static/images/donate/t-shirt-pack-take-back-internet.png'
},
],
'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
},
{
'name': 'sweatshirt',
'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,
'img_height': 283,
'options': null,
'requiredFields': ['sweatshirtSize'],
}
];
export const paymentMethods = [
{
'name': 'credit-card',
......@@ -90,41 +25,6 @@ export const shirtFits = {
},
}
},
'pdr': {
'friendly-name': 'Tor: Powering Digital Resistance',
'fits': {
'slim': {
'friendly-name': 'Slim',
'sizes': ['s', 'm', 'l', 'xl', 'xxl']
},
'classic': {
'friendly-name': 'Classic',
'sizes': ['s', 'm', 'l', 'xxl']
},
}
},
'heart-of-internet': {
'friendly-name': "Tor: the Heart of Internet",
'fits': {
'slim': {
'friendly-name': 'Slim',
'sizes': ['s', 'm', 'l', 'xl', 'xxl']
},
'classic': {
'friendly-name': 'Classic',
'sizes': ['s', 'm', 'l', 'xxl']
},
}
},
'ooni': {
'friendly-name': 'Ooni',
'fits': {
'european': {
'friendly-name': 'European',
'sizes': ['s', 'm', 'l', 'xl', 'xxl']
}
}
},
'take-back-internet': {
'friendly-name': 'Take back the Internet with Tor',
'fits': {
......@@ -205,20 +105,8 @@ export const stripeTokenFieldMap = {
'locality': 'address_city',
};
export const initialSelectedPrices = {
'single': 12500,
'monthly': 2500,
'both': 12500,
}
export const displayPerkSelections = {
'single': true,
'monthly': true,
'both': true,
}
export const initialFrequency = {
'single': 'single',
'monthly': 'monthly',
'both': 'single',
}
templates/donate-form.html
View file @ 781d96a0
......@@ -19,8 +19,117 @@
'stripePublishableKey': `{{ bag('donate', envvars('ENV'), 'stripePublishableKey') }}`,
'frequencyOptions': `{{ this.frequency }}`,
'pricesOnButtons': {
'single': [`{{ this.single_one }}`, `{{ this.single_two }}`, `{{ this.single_three }}`, `{{ this.single_four }}`, `{{ this.single_five }}`],
'monthly': [`{{ this.monthly_one }}`, `{{ this.monthly_two }}`, `{{ this.monthly_three }}`, `{{ this.monthly_four }}`, `{{ this.monthly_five }}`]
'single': [
parseInt(`{{ this.single_one }}`),
parseInt(`{{ this.single_two }}`),
parseInt(`{{ this.single_three }}`),
parseInt(`{{ this.single_four }}`),
parseInt(`{{ this.single_five }}`)
],
'monthly': [
parseInt(`{{ this.monthly_one }}`),
parseInt(`{{ this.monthly_two }}`),
parseInt(`{{ this.monthly_three }}`),
parseInt(`{{ this.monthly_four }}`),
parseInt(`{{ this.monthly_five }}`)
]
},
'perks': [
{
'name': 'stickers',
'friendly_name': {
'single': `{{ this.sticker_perk_single_label }}`,
'monthly': `{{ this.sticker_perk_monthly_label }}`
},
'image': {
'single': `{{ this.sticker_perk_single_image }}`,
'monthly': `{{ this.sticker_perk_monthly_image }}`
},
'description': {
'single': `{{ this.sticker_perk_single_description }}`,
'monthly': `{{ this.sticker_perk_monthly_description }}`,
},
'price': {
'single': parseInt(`{{ this.single_one }}`),
'monthly': parseInt(`{{ this.monthly_two }}`),
},
'options': null,
'requiredFields': [],
},
{
'name': 't-shirt',
'friendly_name': {
'single': `{{ this.tshirt_perk_single_label }}`,
'monthly': `{{ this.tshirt_perk_monthly_label }}`
},
'image': {
'single': `{{ this.tshirt_perk_single_image }}`,
'monthly': `{{ this.tshirt_perk_monthly_image }}`
},
'description': {
'single': `{{ this.tshirt_perk_single_description }}`,
'monthly': `{{ this.tshirt_perk_monthly_description }}`,
},
'price': {
'single': parseInt(`{{ this.single_two }}`),
'monthly': parseInt(`{{ this.monthly_three }}`),
},
'options': null,
'requiredFields': ['shirt1Fit', 'shirt1Size'],
},
{
'name': 't-shirt-pack',
'friendly_name': {
'single': `{{ this.tshirt_pack_perk_single_label }}`,
'monthly': `{{ this.tshirt_pack_perk_monthly_label }}`
},
'image': {
'single': `{{ this.tshirt_pack_perk_single_image }}`,
'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
},
'description': {
'single': `{{ this.tshirt_pack_perk_single_description }}`,
'monthly': `{{ this.tshirt_pack_perk_monthly_description }}`,
},
'price': {
'single': parseInt(`{{ this.single_three }}`),
'monthly': parseInt(`{{ this.monthly_four }}`),
},
'options': [
{
'name': 'strength-in-numbers',
'friendlyName': 'Strength in Numbers',
'image': '/static/images/donate/t-shirt-pack-take-back-internet.png'
},
],
'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
},
{
'name': 'sweatshirt',
'friendly_name': {
'single': `{{ this.sweatshirt_perk_single_label }}`,
'monthly': `{{ this.sweatshirt_perk_monthly_label }}`
},
'image': {
'single': `{{ this.sweatshirt_perk_single_image }}`,
'monthly': `{{ this.sweatshirt_perk_monthly_image }}`
},
'description': {
'single': `{{ this.sweatshirt_perk_single_description }}`,
'monthly': `{{ this.sweatshirt_perk_monthly_description }}`,
},
'price': {
'single': parseInt(`{{ this.single_five }}`),
'monthly': parseInt(`{{ this.monthly_five }}`),
},
'options': null,
'requiredFields': ['sweatshirtSize'],
},
],
'defaultFrequencyForBoth': `{{ this.default_frequency_for_both }}`,
'initialSelectedPrices': {
'single': parseInt(`{{ this.single_three }}`),
'monthly': parseInt(`{{ this.monthly_three }}`),
},
'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`
},
......
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