Commit 11631615 authored by peterh-gr's avatar peterh-gr
Browse files

Cleaned up some javascript stuff

Added 'Accept: application/json' to the fetch headers which causes Slim
to return errors as JSON so we can output the errors nicely.

Added --no-hmr to the parcel watch because it's not working and I don't
want to spend time to figure it out right now.

Moved all the Javascript in donate-form out of the div that gets used
for the React component because that gets entirely replaced by the React
component which has been working, but I think it's weird and for
debugging its nicer if you can see the original Javascript in the DOM in
the browser.
parent b5b85c4f
......@@ -263,6 +263,7 @@ export function _GivingForm(props) {
const options = {
headers: {
'Content-Type': 'application/json; charset=UTF-8',
'Accept': 'application/json, text/html',
},
method: 'POST',
body: JSON.stringify({
......@@ -312,6 +313,7 @@ export function _GivingForm(props) {
const options = {
credentials: 'include',
headers: {
'Accept': 'application/json, text/html',
'Content-Type': 'application/json',
},
method: 'POST',
......
......@@ -27,6 +27,7 @@ export function PayPalButton(props) {
const options = {
credentials: 'include',
headers: {
'Accept': 'application/json, text/html',
'Content-Type': 'application/json',
},
method: 'POST',
......
......@@ -30,6 +30,6 @@
},
"scripts": {
"build": "NODE_ENV=production parcel build --out-dir ../assets/static/gen --out-file=donate.js --public-url=./assets/ js/index.js",
"watch": "NODE_ENV=development parcel watch --out-dir ../assets/static/gen --out-file=donate.js --public-url=./assets/ js/index.js"
"watch": "NODE_ENV=development parcel watch --no-hmr --out-dir ../assets/static/gen --out-file=donate.js --public-url=./assets/ js/index.js"
}
}
......@@ -3,139 +3,139 @@
</div>
<div id="giving-form" class="donate-form">
<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 = [
{
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': '/static/images/donate/t-shirt-pack-take-back-internet.png'
},
],
'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
},
</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': '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'],
'name': 'strength-in-numbers',
'friendlyName': 'Strength in Numbers',
'image': '/static/images/donate/t-shirt-pack-take-back-internet.png'
},
],
'defaultFrequencyForBoth': `{{ this.default_frequency_for_both }}`,
'initialSelectedPrices': {
'single': parseInt(`{{ this.single_three }}`),
'monthly': parseInt(`{{ this.monthly_three }}`),
'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
},
{
'name': 'sweatshirt',
'friendly_name': {
'single': `{{ this.sweatshirt_perk_single_label }}`,
'monthly': `{{ this.sweatshirt_perk_monthly_label }}`
},
'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
'successRedirectUrl': `{{ this.success_redirect_url }}`,
},
}
];
</script>
<script type="text/javascript" src="/static/gen/donate.js"></script>
</div>
'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>
<script type="text/javascript" src="/static/gen/donate.js"></script>
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