fix(client): avoid calling the api for signed out users (#42383)

* feat(client): call api for singed in paypal subs

* feat(client): update tests

* feat(client): add kebab case

* fix: clarify tests

client/src/components/Donation/DonateForm.tsx

@@ -273,7 +273,8 @@ class DonateForm extends Component<DonateFormProps, DonateFromComponentState> {
       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<DonateFormProps, DonateFromComponentState> {
             handlePaymentButtonLoad={this.handlePaymentButtonLoad}
             handleProcessing={handleProcessing}
             isPaypalLoading={loading.paypal}
+            isSignedIn={isSignedIn}
             onDonationStateChange={this.onDonationStateChange}
             theme={defaultTheme ? defaultTheme : theme}
           />

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<PaypalButton>;
   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);
     }
 

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('<Paypal Button/>', () => {
+  it('does not call addDonate api on payment approval when user is not signed ', () => {
+    const ref = React.createRef<PaypalButton>();
+    const isSubscription = true;
+    const addDonation = jest.fn();
+    render(
+      <PaypalButton
+        {...commonProps}
+        addDonation={addDonation}
+        isSignedIn={false}
+        ref={ref}
+      />
+    );
+
+    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<PaypalButton>();
+    const isSubscription = true;
+    const addDonation = jest.fn();
+    render(
+      <PaypalButton
+        {...commonProps}
+        addDonation={addDonation}
+        isSignedIn={true}
+        ref={ref}
+      />
+    );
+
+    ref.current?.handleApproval(donationData, isSubscription);
+    expect(addDonation).toBeCalledTimes(1);
+  });
+});