feat: add additional donation related GA events (#57491)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/src/analytics/call-ga.ts

@@ -32,11 +32,15 @@ type DonationRelatedEventAction =
   | 'Modal Become Supporter Click'
   | 'Donate Page Patreon Payment Redirection'
   | 'Modal Patreon Payment Redirection'
+  | 'Amount Confirmation Clicked'
+  | 'Select Amount Tab Clicked'
+  | 'Edit Amount Clicked'
   | 'Certificate Patreon Payment Redirection';
 
 interface DonationRelatedEvent {
   event: 'donation_related';
   action: DonationRelatedEventAction;
+  amount?: DonationAmount;
 }
 
 type DonationViewEventAction =

client/src/components/Donation/multi-tier-donation-form.tsx

@@ -17,6 +17,7 @@ import {
   defaultTierAmount,
   type DonationAmount
 } from '../../../../shared/config/donation-settings'; // You can further extract these into separate components and import them
+import callGA from '../../analytics/call-ga';
 import { LocalStorageThemes } from '../../redux/types';
 import { formattedAmountLabel, convertToTimeContributed } from './utils';
 import DonateForm from './donate-form';
@@ -45,6 +46,22 @@ function SelectionTabs({
     setDonationAmount(Number(value) as DonationAmount);
   };
   useFeature('aa-test-in-component');
+  const handleAmountConfirmationClick = () => {
+    callGA({
+      event: 'donation_related',
+      action: `Amount Confirmation Clicked`
+    });
+    setShowDonateForm(true);
+  };
+
+  const selectAmountTabClick = (value: DonationAmount) => {
+    callGA({
+      event: 'donation_related',
+      action: `Select Amount Tab Clicked`,
+      amount: value
+    });
+    setDonationAmount(value);
+  };
 
   return (
     <Row
@@ -68,7 +85,7 @@ function SelectionTabs({
               <TabsTrigger
                 key={value}
                 value={value.toString()}
-                onClick={() => setDonationAmount(value)}
+                onClick={() => selectAmountTabClick(value)}
               >
                 ${formattedAmountLabel(value)}
               </TabsTrigger>
@@ -97,7 +114,7 @@ function SelectionTabs({
         <button
           className='text-center confirm-donation-btn donate-btn-group'
           type='submit'
-          onClick={() => setShowDonateForm(true)}
+          onClick={handleAmountConfirmationClick}
         >
           {isAnimationEnabled
             ? t('buttons.confirm-amount')
@@ -122,6 +139,13 @@ function DonationFormRow({
   donationAmount: DonationAmount;
   paymentContext: PaymentContext;
 }) {
+  const editAmountClick = () => {
+    callGA({
+      event: 'donation_related',
+      action: `Edit Amount Clicked`
+    });
+    setShowDonateForm(false);
+  };
   return (
     <Row>
       <Col xs={12}>
@@ -129,7 +153,7 @@ function DonationFormRow({
           handleProcessing={handleProcessing}
           isMinimalForm={isMinimalForm}
           paymentContext={paymentContext}
-          editAmount={() => setShowDonateForm(false)}
+          editAmount={editAmountClick}
           selectedDonationAmount={donationAmount}
         />
         <Spacer size='m' />