Commit 1ee7488e authored by Stephanie Kirtiadi's avatar Stephanie Kirtiadi
Browse files

Rearrange the donate-form.html

For html and js clarity as per code review.

Issue #48613
parent ce9a63c5
lego @ c889cd6f
Subproject commit ac7043380033d2bc2a1bb8392607d718c98c3326
Subproject commit c889cd6f9ebe83056ef456061d8ece5183a66510
<div>
{{ this.intro }}
</div>
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id={{ bag('donate', envvars('ENV'), 'paypalClientId') }}&vault=true"></script>
<script type="text/javascript">
window.reactComponents = [
{
id: 'loading-dialog',
name: 'LoadingDialog',
props: {},
},
{
id: 'giving-form',
name: 'GivingForm',
props: {
'stripePublishableKey': `{{ bag('donate', envvars('ENV'), 'stripePublishableKey') }}`,
'frequencyOptions': `{{ this.frequency }}`,
'pricesOnButtons': {
'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': {
'single': `{{ this.tshirt_pack_perk_single_image }}`,
'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
}
},
],
'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') }}`,
'successRedirectUrl': `{{ this.success_redirect_url }}`,
},
}
];
</script>
<div class="donate-form">
{% if this.counter %}
<div id="campaign-totals-area"></div>
<div id="giving-form"></div>
<div id="loading-dialog"></div>
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id={{ bag('donate', envvars('ENV'), 'paypalClientId') }}&vault=true"></script>
<script type="text/javascript">
window.reactComponents.push(
window.reactComponents = [
{
id: 'loading-dialog',
name: 'LoadingDialog',
props: {},
},
{
id: 'campaign-totals-area',
name: 'CampaignTotals',
id: 'giving-form',
name: 'GivingForm',
props: {
'stripePublishableKey': `{{ bag('donate', envvars('ENV'), 'stripePublishableKey') }}`,
'frequencyOptions': `{{ this.frequency }}`,
'pricesOnButtons': {
'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': {
'single': `{{ this.tshirt_pack_perk_single_image }}`,
'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
}
},
],
'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') }}`,
'successRedirectUrl': `{{ this.success_redirect_url }}`,
},
}
);
];
if (`{{ this.counter }}` == 'True'){
window.reactComponents.push(
{
id: 'campaign-totals-area',
name: 'CampaignTotals',
props: {
'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
},
}
);
}
</script>
{% endif %}
<div id="giving-form"></div>
<div id="loading-dialog"></div>
<script type="text/javascript" src="/static/gen/donate.js"></script>
</div>
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