From 56a60700b7e999548262e3827b80d09fdf201ad2 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Tue, 16 Nov 2021 17:26:56 +0300
Subject: [PATCH] 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     | 12 +++++++++++-
 client/src/components/Donation/patreon-button.tsx |  9 ++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Donation/DonateForm.tsx b/client/src/components/Donation/DonateForm.tsx
index 1c1582fc81..72f2026105 100644
--- a/client/src/components/Donation/DonateForm.tsx
+++ b/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>
diff --git a/client/src/components/Donation/patreon-button.tsx b/client/src/components/Donation/patreon-button.tsx
index 61df8a3b52..7ea2702dcf 100644
--- a/client/src/components/Donation/patreon-button.tsx
+++ b/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'
     >