feat(client): add patreon ga (#44179)

* feat: add patreon ga

* Apply suggestions from code review

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/Donation/DonateForm.tsx

@@ -131,6 +131,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
     this.resetDonation = this.resetDonation.bind(this);
     this.postStripeDonation = this.postStripeDonation.bind(this);
     this.postStripeCardDonation = this.postStripeCardDonation.bind(this);
+    this.postPatreonRedirect = this.postPatreonRedirect.bind(this);
     this.handlePaymentButtonLoad = this.handlePaymentButtonLoad.bind(this);
   }
 
@@ -241,6 +242,15 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
     });
   }
 
+  postPatreonRedirect() {
+    const { donationAmount: amount, donationDuration: duration } = this.state;
+    this.props.handleProcessing(
+      duration,
+      amount,
+      'Patreon payment redirection'
+    );
+  }
+
   handleSelectAmount(donationAmount: number) {
     this.setState({ donationAmount });
   }
@@ -337,7 +347,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
             onDonationStateChange={this.onDonationStateChange}
             theme={priorityTheme}
           />
-          <PatreonButton />
+          <PatreonButton postPatreonRedirect={this.postPatreonRedirect} />
           {isMinimalForm && (
             <>
               <div className='separator'>{t('donate.or-card')}</div>

client/src/components/Donation/patreon-button.tsx

@@ -10,7 +10,13 @@ const { patreonClientId }: { patreonClientId: string | null } = envData as {
   patreonClientId: string | null;
 };
 
-const PatreonButton = (): JSX.Element | null => {
+interface PatreonButtonProps {
+  postPatreonRedirect: () => void;
+}
+
+const PatreonButton = ({
+  postPatreonRedirect
+}: PatreonButtonProps): JSX.Element | null => {
   if (
     !patreonClientId ||
     !patreonDefaultPledgeAmount ||
@@ -30,6 +36,7 @@ const PatreonButton = (): JSX.Element | null => {
       className='patreon-button link-button'
       data-patreon-widget-type='become-patron-button'
       href={href}
+      onClick={postPatreonRedirect}
       rel='noreferrer'
       target='_blank'
     >