fix: update usage panel to use Credit 250 experiment (#4600)

Author: TCL735

src/checkout/CheckoutForm.tsx

@@ -39,10 +39,7 @@ import {CheckoutContext} from 'src/checkout/context/checkout'
 import {event} from 'src/cloud/utils/reporting'
 
 // Constants
-import {
-  CREDIT_250_EXPERIMENT_ID,
-  PAYG_CREDIT_EXPERIMENT_ID,
-} from 'src/shared/constants'
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
 
 // Utils
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
@@ -82,7 +79,7 @@ const CheckoutForm: FC = () => {
           >
             Upgrade to Usage-Based Account
           </h1>
-          {isFlagEnabled('credit250Experiment') && (
+          {isFlagEnabled('credit250Experiment') && !isPaygCreditActive && (
             <GoogleOptimizeExperiment
               experimentID={CREDIT_250_EXPERIMENT_ID}
               variants={[
@@ -124,7 +121,7 @@ const CheckoutForm: FC = () => {
 
               {isPaygCreditActive && (
                 <GoogleOptimizeExperiment
-                  experimentID={PAYG_CREDIT_EXPERIMENT_ID}
+                  experimentID={CREDIT_250_EXPERIMENT_ID}
                   variants={[
                     <div
                       className="checkout-form--banner"

src/checkout/context/checkout.tsx

@@ -24,9 +24,9 @@ import {
 } from 'src/shared/copy/notifications'
 import {
   BALANCE_THRESHOLD_DEFAULT,
+  CREDIT_250_EXPERIMENT_ID,
   EMPTY_ZUORA_PARAMS,
 } from 'src/shared/constants'
-import {PAYG_CREDIT_EXPERIMENT_ID} from 'src/shared/constants'
 
 // Types
 import {CreditCardParams, RemoteDataState} from 'src/types'
@@ -87,8 +87,6 @@ export const CheckoutContext = React.createContext<CheckoutContextType>(
   DEFAULT_CONTEXT
 )
 
-const CHECKOUT_PARAM_CODE = '757vMPJiCMdTFkO4'
-
 export const CheckoutProvider: FC<Props> = React.memo(({children}) => {
   const dispatch = useDispatch()
 
@@ -258,11 +256,8 @@ export const CheckoutProvider: FC<Props> = React.memo(({children}) => {
     return errs.length
   }
 
-  const query = new URLSearchParams(window.location.search)
-  const checkoutCode = query.get('c')
   const isPaygCreditActive =
-    getExperimentVariantId(PAYG_CREDIT_EXPERIMENT_ID) === '1' &&
-    checkoutCode === CHECKOUT_PARAM_CODE
+    getExperimentVariantId(CREDIT_250_EXPERIMENT_ID) === '1'
 
   const handleSubmit = useCallback(
     async (paymentMethodId: string) => {

src/usage/context/usage.test.ts

@@ -0,0 +1,47 @@
+import {calculateCreditDaysUsed} from 'src/usage/context/usage'
+
+describe('calculateCreditDaysUsed', () => {
+  const ONE_DAY_MILLSECONDS = 1000 * 60 * 60 * 24
+
+  it('handles falsy values as invalid date', () => {
+    expect(calculateCreditDaysUsed(undefined)).toEqual(NaN)
+    expect(calculateCreditDaysUsed(null)).toEqual(NaN)
+    expect(calculateCreditDaysUsed('')).toEqual(NaN)
+  })
+
+  it('handles valid dates in the past', () => {
+    const yesterday = new Date(Date.now() - ONE_DAY_MILLSECONDS).toISOString()
+    const twoDaysAgo = new Date(
+      Date.now() - 2 * ONE_DAY_MILLSECONDS
+    ).toISOString()
+    const oneWeekAgo = new Date(
+      Date.now() - 7 * ONE_DAY_MILLSECONDS
+    ).toISOString()
+    const thirtyDaysAgo = new Date(
+      Date.now() - 30 * ONE_DAY_MILLSECONDS
+    ).toISOString()
+
+    expect(calculateCreditDaysUsed(yesterday)).toEqual(1)
+    expect(calculateCreditDaysUsed(twoDaysAgo)).toEqual(2)
+    expect(calculateCreditDaysUsed(oneWeekAgo)).toEqual(7)
+    expect(calculateCreditDaysUsed(thirtyDaysAgo)).toEqual(30)
+  })
+
+  it('handles valid dates in the future', () => {
+    const tomorrow = new Date(Date.now() + ONE_DAY_MILLSECONDS).toISOString()
+    const twoDaysFromNow = new Date(
+      Date.now() + 2 * ONE_DAY_MILLSECONDS
+    ).toISOString()
+    const oneWeekFromNow = new Date(
+      Date.now() + 7 * ONE_DAY_MILLSECONDS
+    ).toISOString()
+    const thirtyDaysFromNow = new Date(
+      Date.now() + 30 * ONE_DAY_MILLSECONDS
+    ).toISOString()
+
+    expect(calculateCreditDaysUsed(tomorrow)).toEqual(-1)
+    expect(calculateCreditDaysUsed(twoDaysFromNow)).toEqual(-2)
+    expect(calculateCreditDaysUsed(oneWeekFromNow)).toEqual(-7)
+    expect(calculateCreditDaysUsed(thirtyDaysFromNow)).toEqual(-30)
+  })
+})

src/usage/context/usage.tsx

@@ -16,6 +16,7 @@ import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 // Constants
 import {PAYG_CREDIT_DAYS} from 'src/shared/constants'
 import {DEFAULT_USAGE_TIME_RANGE} from 'src/shared/constants/timeRanges'
+import {MILLISECONDS_IN_ONE_DAY} from 'src/utils/datetime/constants'
 
 // Types
 import {
@@ -79,6 +80,16 @@ export const UsageContext = React.createContext<UsageContextType>(
   DEFAULT_CONTEXT
 )
 
+export const calculateCreditDaysUsed = (creditStartDate: string): number => {
+  if (!creditStartDate) {
+    return NaN
+  }
+  const startDate = new Date(creditStartDate)
+  const current = new Date()
+  const diffTime = current.getTime() - startDate.getTime()
+  return Math.floor(diffTime / MILLISECONDS_IN_ONE_DAY)
+}
+
 export const UsageProvider: FC<Props> = React.memo(({children}) => {
   const [billingDateTime, setBillingDateTime] = useState('')
   const [usageVectors, setUsageVectors] = useState([])
@@ -103,12 +114,12 @@ export const UsageProvider: FC<Props> = React.memo(({children}) => {
   const {quartzMe} = useSelector(getMe)
   const parser = isFlagEnabled('fastFromFlux') ? fastFromFlux : fromFlux
 
-  const creditDaysUsed = useMemo(() => {
-    const startDate = new Date(quartzMe?.paygCreditStartDate)
-    const current = new Date()
-    const diffTime = Math.abs(current.getTime() - startDate.getTime())
-    return Math.floor(diffTime / (1000 * 60 * 60 * 24))
-  }, [quartzMe?.paygCreditStartDate])
+  const paygCreditStartDate = quartzMe?.paygCreditStartDate ?? ''
+
+  const creditDaysUsed = useMemo(
+    () => calculateCreditDaysUsed(paygCreditStartDate),
+    [paygCreditStartDate]
+  )
 
   const paygCreditEnabled =
     creditDaysUsed >= 0 && creditDaysUsed < PAYG_CREDIT_DAYS

src/utils/datetime/constants.ts

@@ -5,3 +5,5 @@ export const RFC3339_PATTERN = /(\d\d\d\d)(-)?(\d\d)(-)?(\d\d)(\s|T)?(\d\d)(:)?(
 // Hard-coded dates required by the backend for caching purposes
 export const CACHING_REQUIRED_START_DATE = '1677-09-21T00:12:43.145224194Z'
 export const CACHING_REQUIRED_END_DATE = '2262-04-11T23:47:16.854775806Z'
+
+export const MILLISECONDS_IN_ONE_DAY = 1000 * 60 * 60 * 24