feat(client): remove donation button label (#51106)

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>

client/i18n/locales/english/translations.json

@@ -421,10 +421,10 @@
     "no-halo": "If you don't see a gold halo around your profile picture, contact donors@freecodecamp.org.",
     "gift-frequency": "Select gift frequency:",
     "gift-amount": "Select gift amount:",
-    "confirm": "Confirm your donation",
-    "confirm-2": "Confirm your one-time donation of ${{usd}}",
-    "confirm-3": "Confirm your donation of ${{usd}} / month",
-    "confirm-4": "Confirm your donation of ${{usd}} / year",
+    "confirm": "Confirm your donation:",
+    "confirm-one-time": "Confirm your one-time donation of ${{usd}}:",
+    "confirm-monthly": "Confirm your donation of ${{usd}} / month:",
+    "confirm-yearly": "Confirm your donation of ${{usd}} / year:",
     "wallet-label": "${{usd}} donation to freeCodeCamp",
     "wallet-label-1": "${{usd}} / month donation to freeCodeCamp",
     "your-donation": "Your ${{usd}} donation will provide {{hours}} hours of learning to people around the world.",

client/src/components/Donation/donate-form.tsx

@@ -150,7 +150,6 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
     this.state = { ...initialAmountAndDuration };
 
     this.onDonationStateChange = this.onDonationStateChange.bind(this);
-    this.getDonationButtonLabel = this.getDonationButtonLabel.bind(this);
     this.resetDonation = this.resetDonation.bind(this);
     this.postPayment = this.postPayment.bind(this);
     this.handlePaymentButtonLoad = this.handlePaymentButtonLoad.bind(this);
@@ -179,26 +178,6 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
     });
   }
 
-  getDonationButtonLabel() {
-    const { donationAmount, donationDuration } = this.state;
-    const { t } = this.props;
-    const usd = formattedAmountLabel(donationAmount);
-    let donationBtnLabel = t('donate.confirm');
-    if (donationDuration === 'one-time') {
-      donationBtnLabel = t('donate.confirm-2', {
-        usd: usd
-      });
-    } else {
-      donationBtnLabel =
-        donationDuration === 'month'
-          ? t('donate.confirm-3', {
-              usd: usd
-            })
-          : t('donate.confirm-4', { usd: usd });
-    }
-    return donationBtnLabel;
-  }
-
   postPayment = ({
     paymentProvider,
     data,
@@ -252,7 +231,9 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
     return (
       <>
         <b className={isMinimalForm ? 'donation-label-modal' : ''}>
-          {this.getDonationButtonLabel()}:
+          {t('donate.confirm-monthly', {
+            usd: formattedAmountLabel(donationAmount)
+          })}
         </b>
         <Spacer size='medium' />
         <fieldset className={'donate-btn-group security-legend'}>

cypress/e2e/default/learn/donate/donate-page-default.ts

@@ -1,5 +1,5 @@
 describe('Donate page', () => {
-  it('Should render correctly', () => {
+  it('Should render the donation page correctly', () => {
     cy.visit('/donate');
     cy.title().should('eq', 'Support our charity | freeCodeCamp.org');