feat: add checkout query param2 (#3277)

* feat: add checkout query param for credit for experiment users

* chore: change from remaining to used days

* chore: remove debug logs

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

Author: subirjolly

src/checkout/context/checkout.tsx

@@ -87,6 +87,8 @@ export const CheckoutContext = React.createContext<CheckoutContextType>(
   DEFAULT_CONTEXT
 )
 
+const CHECKOUT_PARAM_CODE = '757vMPJiCMdTFkO4'
+
 export const CheckoutProvider: FC<Props> = React.memo(({children}) => {
   const dispatch = useDispatch()
 
@@ -256,9 +258,12 @@ 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 =
     isFlagEnabled('paygCheckoutCredit') &&
-    getExperimentVariantId(PAYG_CREDIT_EXPERIMENT_ID) === '1'
+    getExperimentVariantId(PAYG_CREDIT_EXPERIMENT_ID) === '1' &&
+    checkoutCode === CHECKOUT_PARAM_CODE
 
   const handleSubmit = useCallback(
     async (paymentMethodId: string) => {

src/me/components/UsagePanelDetails.tsx

@@ -11,7 +11,7 @@ import {PAYG_CREDIT_DAYS, PAYG_MAX_CREDIT} from 'src/shared/constants'
 // Types
 
 const UsagePanelDetails: FC = () => {
-  const {creditUsage, creditDaysRemaining} = useContext(UsageContext)
+  const {creditUsage, creditDaysUsed} = useContext(UsageContext)
 
   return (
     <>
@@ -25,19 +25,17 @@ const UsagePanelDetails: FC = () => {
         maxText={`$${PAYG_MAX_CREDIT} credit`}
       />
       <ProgressBar
-        value={PAYG_CREDIT_DAYS - creditDaysRemaining}
+        value={creditDaysUsed}
         max={PAYG_CREDIT_DAYS}
         barGradient={
-          creditDaysRemaining > 15
-            ? Gradients.HotelBreakfast
-            : Gradients.DangerDark
+          creditDaysUsed <= 15 ? Gradients.HotelBreakfast : Gradients.DangerDark
         }
         color={
-          creditDaysRemaining > 15 ? InfluxColors.Wasabi : InfluxColors.Curacao
+          creditDaysUsed <= 15 ? InfluxColors.Wasabi : InfluxColors.Curacao
         }
         label="Credit Period"
-        valueText={`${creditDaysRemaining}`}
-        maxText={`${PAYG_CREDIT_DAYS} days remaining`}
+        valueText={`${creditDaysUsed}`}
+        maxText={`${PAYG_CREDIT_DAYS} days used`}
       />
     </>
   )

src/usage/context/usage.tsx

@@ -52,7 +52,7 @@ export interface UsageContextType {
   usageStatsStatus: RemoteDataState
   usageVectors: UsageVector[]
   creditUsage: Usage
-  creditDaysRemaining: number
+  creditDaysUsed: number
   paygCreditEnabled: boolean
 }
 
@@ -70,7 +70,7 @@ export const DEFAULT_CONTEXT: UsageContextType = {
   usageStatsStatus: RemoteDataState.NotStarted,
   usageVectors: [],
   creditUsage: DEFAULT_USAGE,
-  creditDaysRemaining: 0,
+  creditDaysUsed: 0,
   paygCreditEnabled: false,
 }
 
@@ -100,17 +100,15 @@ export const UsageProvider: FC<Props> = React.memo(({children}) => {
     DEFAULT_USAGE_TIME_RANGE
   )
   const {quartzMe} = useSelector(getMe)
-  const creditDaysRemaining = useMemo(() => {
+  const creditDaysUsed = useMemo(() => {
     const startDate = new Date(quartzMe?.paygCreditStartDate)
     const current = new Date()
     const diffTime = Math.abs(current.getTime() - startDate.getTime())
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-
-    return PAYG_CREDIT_DAYS - diffDays
+    return Math.floor(diffTime / (1000 * 60 * 60 * 24))
   }, [quartzMe?.paygCreditStartDate])
 
   const paygCreditEnabled =
-    creditDaysRemaining > 0 && creditDaysRemaining <= PAYG_CREDIT_DAYS
+    creditDaysUsed >= 0 && creditDaysUsed < PAYG_CREDIT_DAYS
 
   const handleSetTimeRange = useCallback(
     (range: SelectableDurationTimeRange) => {
@@ -338,7 +336,7 @@ export const UsageProvider: FC<Props> = React.memo(({children}) => {
         usageStatsStatus,
         usageVectors,
         creditUsage,
-        creditDaysRemaining,
+        creditDaysUsed,
         paygCreditEnabled,
       }}
     >