From cd9c57a8c55f866682c7bce16ac0d942d8679f26 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Mon, 13 Dec 2021 19:25:21 +0300
Subject: [PATCH] feat(client): optimize donation form for holiday alert
 (#44482)

* feat(client): optmize donation form for holiday alert

* feat: remove key from i18n
---
 client/i18n/locales/english/translations.json  |  1 -
 client/src/components/Donation/donate-form.tsx | 17 +++++++++++++----
 client/src/components/Intro/index.tsx          |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 2a4ac07f1f..373bc45cf3 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -32,7 +32,6 @@
     "profile": "Profile",
     "news": "News",
     "donate": "Donate",
-    "support-our-nonprofit": "Support our non-profit",
     "update-settings": "Update my account settings",
     "sign-me-out": "Sign me out of freeCodeCamp",
     "flag-user": "Flag This User's Account for Abuse",
diff --git a/client/src/components/Donation/donate-form.tsx b/client/src/components/Donation/donate-form.tsx
index e41389ca5e..58f5f6d90a 100644
--- a/client/src/components/Donation/donate-form.tsx
+++ b/client/src/components/Donation/donate-form.tsx
@@ -16,6 +16,7 @@ import {
 } from '../../../../config/donation-settings';
 import {
   isSignedInSelector,
+  isDonatingSelector,
   signInLoadingSelector,
   donationFormStateSelector,
   addDonation,
@@ -70,6 +71,7 @@ type DonateFormProps = {
   donationFormState: DonateFormState;
   isMinimalForm?: boolean;
   isSignedIn: boolean;
+  isDonating: boolean;
   showLoading: boolean;
   t: (
     label: string,
@@ -82,15 +84,18 @@ type DonateFormProps = {
 const mapStateToProps = createSelector(
   signInLoadingSelector,
   isSignedInSelector,
+  isDonatingSelector,
   donationFormStateSelector,
   userSelector,
   (
     showLoading: DonateFormProps['showLoading'],
     isSignedIn: DonateFormProps['isSignedIn'],
+    isDonating: DonateFormProps['isDonating'],
     donationFormState: DonateFormState,
     { email, theme }: { email: string; theme: Themes }
   ) => ({
     isSignedIn,
+    isDonating,
     showLoading,
     donationFormState,
     email,
@@ -310,7 +315,8 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
       theme,
       t,
       isMinimalForm,
-      isSignedIn
+      isSignedIn,
+      isDonating
     } = this.props;
     const priorityTheme = defaultTheme ? defaultTheme : theme;
     const isOneTime = donationDuration === 'onetime';
@@ -318,6 +324,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
       isOneTime ? 'donate.wallet-label' : 'donate.wallet-label-1',
       { usd: donationAmount / 100 }
     )}:`;
+    const showMinimalPayments = isMinimalForm || !isDonating;
 
     return (
       <>
@@ -342,14 +349,16 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
             donationDuration={donationDuration}
             handlePaymentButtonLoad={this.handlePaymentButtonLoad}
             handleProcessing={handleProcessing}
-            isMinimalForm={isMinimalForm}
+            isMinimalForm={showMinimalPayments}
             isPaypalLoading={loading.paypal}
             isSignedIn={isSignedIn}
             onDonationStateChange={this.onDonationStateChange}
             theme={priorityTheme}
           />
-          <PatreonButton postPatreonRedirect={this.postPatreonRedirect} />
-          {isMinimalForm && (
+          {(!loading.stripe || !loading.paypal) && (
+            <PatreonButton postPatreonRedirect={this.postPatreonRedirect} />
+          )}
+          {showMinimalPayments && (
             <>
               <div className='separator'>{t('donate.or-card')}</div>
               <StripeCardForm
diff --git a/client/src/components/Intro/index.tsx b/client/src/components/Intro/index.tsx
index a80a0f150b..c3d801401e 100644
--- a/client/src/components/Intro/index.tsx
+++ b/client/src/components/Intro/index.tsx
@@ -92,7 +92,7 @@ const Intro = ({
               sameTab={false}
               to='/donate'
             >
-              {t('buttons.support-our-nonprofit')}
+              {t('buttons.donate')}
             </Link>
           </p>
         </Alert>