feat: add checkout query param (#3207)

* feat: add checkout query param

* chore: remove unused import

* chore: updated to use inbuilt lib function/obj

* chore: remove credit if upgrading

* chore: switched to google experiment

* chore: added key for variant

* style: fix formatting issue

* chore: use PAYG_CREDIT_EXPERIMENT_ID from env

* style: fix formatting error

* chore: add Google Experiment Var

* chore: remove and add in another pr

Co-authored-by: Subir Jolly <subirjolly@Subirs-MacBook-Pro.local>

Author: subirjolly

src/checkout/CheckoutForm.tsx

@@ -17,6 +17,7 @@ import {
   JustifyContent,
   Panel,
 } from '@influxdata/clockface'
+import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
 
 // Components
 import ContactForm from 'src/checkout/utils/ContactForm'
@@ -31,16 +32,20 @@ import {CheckoutContext} from 'src/checkout/context/checkout'
 
 // Events
 import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+// Constants
+import {PAYG_CREDIT_EXPERIMENT_ID} from 'src/shared/constants'
 
 // Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const CheckoutForm: FC = () => {
   const {
     handleFormValidation,
     zuoraParams,
     handleSubmit,
     setIsDirty,
+    isSubmitting,
   } = useContext(CheckoutContext)
 
   const onSubmit = () => {
@@ -58,8 +63,6 @@ const CheckoutForm: FC = () => {
     }
   }
 
-  const {isSubmitting} = useContext(CheckoutContext)
-
   return (
     <Form noValidate onSubmit={onSubmit}>
       <AppWrapper type="funnel">
@@ -88,11 +91,20 @@ const CheckoutForm: FC = () => {
                 </a>
                 .
               </p>
+
               {isFlagEnabled('paygCheckoutCredit') && (
-                <div className="checkout-form--banner">
-                  <strong className="checkout-banner--credit">$250</strong>
-                  <p>credit applied</p>
-                </div>
+                <GoogleOptimizeExperiment
+                  experimentID={PAYG_CREDIT_EXPERIMENT_ID}
+                  variants={[
+                    <div
+                      className="checkout-form--banner"
+                      key="checkout-form-banner"
+                    >
+                      <strong className="checkout-banner--credit">$250</strong>
+                      <p>credit applied</p>
+                    </div>,
+                  ]}
+                />
               )}
             </Panel.Body>
           </Panel>

src/checkout/context/checkout.tsx

@@ -3,6 +3,9 @@ import React, {FC, useCallback, useEffect, useState} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {useHistory} from 'react-router-dom'
 
+// Components
+import {getExperimentVariantId} from 'src/cloud/utils/experiments'
+
 // Utils
 import {notify} from 'src/shared/actions/notifications'
 import {
@@ -23,10 +26,12 @@ import {
   BALANCE_THRESHOLD_DEFAULT,
   EMPTY_ZUORA_PARAMS,
 } from 'src/shared/constants'
+import {PAYG_CREDIT_EXPERIMENT_ID} from 'src/shared/constants'
 
 // Types
 import {CreditCardParams, RemoteDataState} from 'src/types'
 import {getErrorMessage} from 'src/utils/api'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 export type Props = {
   children: JSX.Element
@@ -59,6 +64,7 @@ export interface CheckoutContextType {
   isSubmitting: boolean
   setIsDirty: (_: boolean) => void
   zuoraParams: CreditCardParams
+  isPaygCreditActive: boolean
 }
 
 export const DEFAULT_CONTEXT: CheckoutContextType = {
@@ -74,6 +80,7 @@ export const DEFAULT_CONTEXT: CheckoutContextType = {
   isSubmitting: false,
   setIsDirty: (_: boolean) => {},
   zuoraParams: EMPTY_ZUORA_PARAMS,
+  isPaygCreditActive: false,
 }
 
 export const CheckoutContext = React.createContext<CheckoutContextType>(
@@ -249,6 +256,10 @@ export const CheckoutProvider: FC<Props> = React.memo(({children}) => {
     return errs.length
   }
 
+  const isPaygCreditActive =
+    isFlagEnabled('paygCheckoutCredit') &&
+    getExperimentVariantId(PAYG_CREDIT_EXPERIMENT_ID) === '1'
+
   const handleSubmit = useCallback(
     async (paymentMethodId: string) => {
       if (isDirty === false) {
@@ -283,8 +294,11 @@ export const CheckoutProvider: FC<Props> = React.memo(({children}) => {
         delete formData.intlSubdivision
         delete formData.shouldNotify
 
-        const paymentInformation = {...formData, paymentMethodId}
-
+        const paymentInformation = {
+          ...formData,
+          paymentMethodId,
+          isPaygCreditActive,
+        }
         const response = await postCheckout({data: paymentInformation})
 
         if (response.status !== 201) {
@@ -328,6 +342,7 @@ export const CheckoutProvider: FC<Props> = React.memo(({children}) => {
         isSubmitting,
         setIsDirty,
         zuoraParams,
+        isPaygCreditActive,
       }}
     >
       {children}

src/shared/constants/index.ts

@@ -164,3 +164,4 @@ export const GLOBALSEARCH_API_KEY = formatConstant(
 
 export const PAYG_CREDIT_DAYS = 30
 export const PAYG_MAX_CREDIT = 250
+export const PAYG_CREDIT_EXPERIMENT_ID = process.env.PAYG_CREDIT_EXPERIMENT_ID