Merge pull request #63 from joincivil/nickreynolds/stripe-ga

fix: add GA for stripe payment flow

Author: nickreynolds

src/react/boosts/payments/BoostPayFormStripe.tsx

@@ -8,7 +8,7 @@ import {
   CardCvcElement,
 } from "react-stripe-elements";
 import styled from "styled-components";
-import { colors, fonts, mediaQueries, FullScreenModal } from "@joincivil/components";
+import { colors, fonts, mediaQueries, FullScreenModal, CivilContext, ICivilContext } from "@joincivil/components";
 import { isValidEmail } from "@joincivil/utils";
 import {
   BoostFlexStart,
@@ -170,6 +170,8 @@ export interface BoostPayFormStripeStates {
 }
 
 class BoostPayFormStripe extends React.Component<BoostPayFormStripeProps, BoostPayFormStripeStates> {
+  public static contextType: React.Context<ICivilContext> = CivilContext;
+  public context!: React.ContextType<typeof CivilContext>;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -423,6 +425,12 @@ class BoostPayFormStripe extends React.Component<BoostPayFormStripeProps, BoostP
       this.setState({ paymentProcessing: true });
       if (this.props.stripe) {
         try {
+          this.context.fireAnalyticsEvent(
+            "boosts",
+            "start submit CC support",
+            this.props.boostId,
+            this.props.usdToSpend,
+          );
           const token = await this.props.stripe.createToken({
             name: this.state.name,
             address_country: this.state.country,

src/react/boosts/payments/BoostPayOptions.tsx

@@ -216,7 +216,8 @@ export class BoostPayOptions extends React.Component<BoostPayOptionsProps, Boost
     this.setState({ paymentType: PAYMENT_TYPE.ETH, etherToSpend, usdToSpend });
   };
 
-  private handleStripeNext = () => {
+  private handleStripeNext = (usdToSpend: number) => {
+    this.context.fireAnalyticsEvent("boosts", "continue CC support", this.props.boostId, usdToSpend);
     this.setState({ paymentType: PAYMENT_TYPE.STRIPE });
   };
 

src/react/boosts/payments/BoostPayStripe.tsx

@@ -16,7 +16,7 @@ export interface BoostPayStripeProps {
   paymentType: string;
   optionLabel: string | JSX.Element;
   paymentStarted?: boolean;
-  handleNext(): void;
+  handleNext(usdToSpend: number): void;
   handlePaymentSelected?(paymentType: string): void;
   handlePaymentSuccess(): void;
 }
@@ -63,7 +63,9 @@ export class BoostPayStripe extends React.Component<BoostPayStripeProps, BoostPa
                 </a>
                 .
               </p>
-              {this.props.selected && <BoostButton onClick={() => this.props.handleNext()}>Next</BoostButton>}
+              {this.props.selected && (
+                <BoostButton onClick={() => this.props.handleNext(this.props.usdToSpend)}>Next</BoostButton>
+              )}
             </BoostFlexCenter>
           </BoostPayCardDetails>
         </BoostPayOption>