Commit 78cfd0ed authored by Stephanie Kirtiadi's avatar Stephanie Kirtiadi
Browse files

Added loading dialog after paypal approval before thank you page.

Before redirecting to thank you page, we have a loading modal
after successful paypal payment on the initial donate.torproject.org
non-react landing page. We want to also include that.

Issue #48515
parent ac41e110
......@@ -477,6 +477,7 @@ export function _GivingForm(props) {
displayPerkSelection={displayPerkSelection}
donateProccessorBaseUrl={donateProccessorBaseUrl}
successRedirectUrl={normalizedSuccessRedirectUrl}
setLoading={setLoading}
/>
</div>
<GivingErrorContainer errors={errors} />
......
......@@ -14,7 +14,7 @@ import {StripeCreditCardForm} from './stripe_credit_card_form';
import {DonationInformation} from './donation_information';
export function GivingInfoForm(props) {
const {paymentMethod, mailingListOptIn, onMailingListOptInCheckboxChange, selectedPerk, perkOption, perkOptionProperties, shirtFits, sweatshirtSizes, frequency, selectedPrice, noPerk, selectedPerkFriendlyName, requiredFields, errors, textFields, priceOtherRef, formData, countryChanged, regionChanged, onInputFieldChange, fitsAndSizes, updateFitsAndSizes, stripeSubmitHandle, stripe, isValidEmail, validateRequiredFieldsAndDonationAmount, preparePerkData, prepareFieldsData, createBillingAgreement, onStripeFieldChange, addError, displayPerkSelection, donateProccessorBaseUrl, successRedirectUrl} = props;
const {paymentMethod, mailingListOptIn, onMailingListOptInCheckboxChange, selectedPerk, perkOption, perkOptionProperties, shirtFits, sweatshirtSizes, frequency, selectedPrice, noPerk, selectedPerkFriendlyName, requiredFields, errors, textFields, priceOtherRef, formData, countryChanged, regionChanged, onInputFieldChange, fitsAndSizes, updateFitsAndSizes, stripeSubmitHandle, stripe, isValidEmail, validateRequiredFieldsAndDonationAmount, preparePerkData, prepareFieldsData, createBillingAgreement, onStripeFieldChange, addError, displayPerkSelection, donateProccessorBaseUrl, successRedirectUrl, setLoading} = props;
const donationInformation = () => {
if (displayPerkSelection) {
......@@ -144,6 +144,7 @@ export function GivingInfoForm(props) {
addError={addError}
donateProccessorBaseUrl={donateProccessorBaseUrl}
successRedirectUrl={successRedirectUrl}
setLoading={setLoading}
/>
</React.Fragment>
);
......
import 'babel-polyfill';
import {LoadingDialog} from './loading_dialog';
import {GivingForm} from './giving_form';
import {CampaignTotals} from './campaign_totals';
import {CryptocurrencyForm} from './cryptocurrency_form';
......@@ -10,7 +9,6 @@ import {StripeProvider, Elements} from 'react-stripe-elements';
const reactCallbacks = {};
const availableComponents = {
'LoadingDialog': LoadingDialog,
'GivingForm': GivingForm,
'CampaignTotals': CampaignTotals,
'CryptocurrencyForm': CryptocurrencyForm,
......
import React from 'react';
import {useState} from 'react';
export function LoadingDialog(props) {
const [open, setOpen] = useState(false);
props.callbacks.setLoadingDialogOpen = setOpen;
if (open) {
return (
<React.Fragment>
<div className="overlay">
<div className="dialog-area">
<div className="dialog">
<div className="dots">
<div className="dot"></div>
<div className="focus dot"></div>
<div className="dot"></div>
<div className="dot"></div>
<div className="dot"></div>
</div>
<h5 className="message">
One moment while we shovel coal into our servers.
</h5>
</div>
</div>
</div>
</React.Fragment>
);
} else {
return null;
}
}
......@@ -5,7 +5,7 @@ import {NamedError} from './named_error';
import {LoadingDialogReactPages} from './loading_dialog_react_pages';
export function PayPalButton(props) {
const {paymentMethod, amount, perk, frequency, formData, noPerkCheckbox, fitsAndSizes, perkOption, requiredFields, addError, givingFormError, textFields, priceOtherRef, isValidEmail, validateRequiredFieldsAndDonationAmount, preparePerkData, prepareFieldsData, createBillingAgreement, donateProccessorBaseUrl, successRedirectUrl} = props;
const {paymentMethod, amount, perk, frequency, formData, noPerkCheckbox, fitsAndSizes, perkOption, requiredFields, addError, givingFormError, textFields, priceOtherRef, isValidEmail, validateRequiredFieldsAndDonationAmount, preparePerkData, prepareFieldsData, createBillingAgreement, donateProccessorBaseUrl, successRedirectUrl, setLoading} = props;
const PayPalButton = paypal.Buttons.driver('react', {React, ReactDOM});
......@@ -17,13 +17,8 @@ export function PayPalButton(props) {
const fieldsData = prepareFieldsData();
const perkData = preparePerkData();
const toggleLoading = (displayLoading) => {
return (
<LoadingDialogReactPages open={displayLoading} />
);
};
const onApprove = async (paypalResponse, actions) => {
setLoading(true);
const options = {
credentials: 'include',
headers: {
......@@ -47,7 +42,7 @@ export function PayPalButton(props) {
if (response_data['errors'].length > 0) {
const errorMessage = response_data['errors'].join("\n");
addError(new NamedError('paypalError', errorMessage));
toggleLoading(false);
setLoading(false);
throw new Error(errorMessage);
} else {
document.location = successRedirectUrl;
......@@ -56,7 +51,7 @@ export function PayPalButton(props) {
};
const onCancel = (data, actions) => {
toggleLoading(false);
setLoading(false);
};
if (paymentMethod == 'paypal') {
......
......@@ -4,17 +4,11 @@
<div class="donate-form">
<div id="campaign-totals-area"></div>
<div id="giving-form"></div>
<div id="loading-dialog"></div>
</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',
......
Markdown is supported
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