diff --git a/client/src/components/Donation/DonateForm.tsx b/client/src/components/Donation/DonateForm.tsx index 63f4e8d92d..f941b3aae2 100644 --- a/client/src/components/Donation/DonateForm.tsx +++ b/client/src/components/Donation/DonateForm.tsx @@ -273,7 +273,8 @@ class DonateForm extends Component { defaultTheme, theme, t, - isMinimalForm + isMinimalForm, + isSignedIn } = this.props; const paymentButtonsLoading = loading.stripe && loading.paypal; const priorityTheme = defaultTheme ? defaultTheme : theme; @@ -307,6 +308,7 @@ class DonateForm extends Component { handlePaymentButtonLoad={this.handlePaymentButtonLoad} handleProcessing={handleProcessing} isPaypalLoading={loading.paypal} + isSignedIn={isSignedIn} onDonationStateChange={this.onDonationStateChange} theme={defaultTheme ? defaultTheme : theme} /> diff --git a/client/src/components/Donation/PaypalButton.tsx b/client/src/components/Donation/PaypalButton.tsx index 39bb89a9bb..30c4f5e2f9 100644 --- a/client/src/components/Donation/PaypalButton.tsx +++ b/client/src/components/Donation/PaypalButton.tsx @@ -2,7 +2,7 @@ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ /* eslint-disable camelcase */ -import React, { Component } from 'react'; +import React, { Component, Ref } from 'react'; import { withTranslation } from 'react-i18next'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; @@ -17,6 +17,7 @@ import PayPalButtonScriptLoader from './PayPalButtonScriptLoader'; type PaypalButtonProps = { addDonation: (data: AddDonationData) => void; + isSignedIn: boolean; donationAmount: number; donationDuration: string; handleProcessing: ( @@ -39,6 +40,7 @@ type PaypalButtonProps = { isPaypalLoading: boolean; skipAddDonation?: boolean; t: (label: string) => string; + ref?: Ref; theme: string; isSubscription?: boolean; handlePaymentButtonLoad: (provider: 'stripe' | 'paypal') => void; @@ -106,10 +108,10 @@ export class PaypalButton extends Component< handleApproval = (data: AddDonationData, isSubscription: boolean): void => { const { amount, duration } = this.state; - const { skipAddDonation = false } = this.props; + const { isSignedIn = false } = this.props; - // Skip the api if user is not signed in or if its a one-time donation - if (!skipAddDonation || isSubscription) { + // If the user is signed in and the payment is subscritipn call the api + if (isSignedIn && isSubscription) { this.props.addDonation(data); } diff --git a/client/src/components/Donation/paypal-button.test.tsx b/client/src/components/Donation/paypal-button.test.tsx new file mode 100644 index 0000000000..43c21b0727 --- /dev/null +++ b/client/src/components/Donation/paypal-button.test.tsx @@ -0,0 +1,60 @@ +import { render } from '@testing-library/react'; +import React from 'react'; + +import { PaypalButton } from './PaypalButton'; + +const commonProps = { + donationAmount: 500, + donationDuration: 'month', + handleProcessing: () => null, + isDonating: false, + onDonationStateChange: () => null, + isPaypalLoading: true, + t: jest.fn(), + theme: 'night', + handlePaymentButtonLoad: jest.fn() +}; + +const donationData = { + redirecting: false, + processing: false, + success: false, + error: null +}; + +jest.mock('../../analytics'); + +describe('', () => { + it('does not call addDonate api on payment approval when user is not signed ', () => { + const ref = React.createRef(); + const isSubscription = true; + const addDonation = jest.fn(); + render( + + ); + + ref.current?.handleApproval(donationData, isSubscription); + expect(addDonation).toBeCalledTimes(0); + }); + it('calls addDonate api on payment approval when user is signed in', () => { + const ref = React.createRef(); + const isSubscription = true; + const addDonation = jest.fn(); + render( + + ); + + ref.current?.handleApproval(donationData, isSubscription); + expect(addDonation).toBeCalledTimes(1); + }); +});