Skip to content

Commit e803d29

Browse files
TCL735TCL735
authored
feat: allow users with certain sign up dates to receive the Credit 250 experience (#4668)
1 parent 2006c28 commit e803d29

File tree

15 files changed

+329
-174
lines changed

15 files changed

+329
-174
lines changed

‎src/billing/components/Free/Free.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Libraries
22
import React, {FC} from 'react'
3+
import {useSelector} from 'react-redux'
34
import {Grid, Columns} from '@influxdata/clockface'
45
import {
56
Credit250FreePanel,
@@ -9,15 +10,18 @@ import {PAYGConversion} from 'src/billing/components/Free/PAYGConversion'
910

1011
// Components
1112
import GetAssetLimits from 'src/cloud/components/GetAssetLimits'
13+
import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
1214

1315
// Utils
16+
import {shouldGetCredit250Experience} from 'src/me/selectors'
1417
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
15-
import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
1618

1719
// Constants
1820
import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
1921

2022
const BillingFree: FC = () => {
23+
const isCredit250ExperienceActive = useSelector(shouldGetCredit250Experience)
24+
2125
const original = (
2226
<Grid>
2327
<Grid.Row>
@@ -31,22 +35,28 @@ const BillingFree: FC = () => {
3135
</Grid>
3236
)
3337

38+
const credit250Experience = (
39+
<Grid key="1">
40+
<Grid.Row>
41+
<Grid.Column widthXS={Columns.Twelve}>
42+
<GetAssetLimits>
43+
<Credit250FreePanel />
44+
</GetAssetLimits>
45+
</Grid.Column>
46+
</Grid.Row>
47+
</Grid>
48+
)
49+
3450
if (isFlagEnabled('credit250Experiment')) {
51+
if (isCredit250ExperienceActive) {
52+
return credit250Experience
53+
}
54+
3555
return (
3656
<GoogleOptimizeExperiment
3757
experimentID={CREDIT_250_EXPERIMENT_ID}
3858
original={original}
39-
variants={[
40-
<Grid key="1">
41-
<Grid.Row>
42-
<Grid.Column widthXS={Columns.Twelve}>
43-
<GetAssetLimits>
44-
<Credit250FreePanel />
45-
</GetAssetLimits>
46-
</Grid.Column>
47-
</Grid.Row>
48-
</Grid>,
49-
]}
59+
variants={[credit250Experience]}
5060
/>
5161
)
5262
}

‎src/billing/components/Free/PAYGConversion.tsx‎

Lines changed: 71 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
// Libraries
12
import React, {FC} from 'react'
3+
import {useSelector} from 'react-redux'
24
import {
35
Panel,
46
ComponentSize,
@@ -12,73 +14,88 @@ import {
1214
Button,
1315
} from '@influxdata/clockface'
1416
import {useHistory} from 'react-router-dom'
17+
18+
// Components
1519
import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
20+
import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
21+
22+
// Utils
23+
import {shouldGetCredit250Experience} from 'src/me/selectors'
1624
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
1725
import {event} from 'src/cloud/utils/reporting'
18-
import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
1926
import {getDataLayerIdentity} from 'src/cloud/utils/experiments'
27+
28+
// Constants
2029
import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
2130

2231
const CARDINALITY_LIMIT = 1_000_000
2332

2433
export const Credit250PAYGConversion: FC = () => {
34+
const isCredit250ExperienceActive = useSelector(shouldGetCredit250Experience)
35+
36+
const credit250Experience = (
37+
<Grid className="credit-250-conversion-panel" key="1">
38+
<Grid.Column
39+
className="credit-250-conversion-panel--message"
40+
widthSM={Columns.Four}
41+
>
42+
<Heading
43+
className="credit-250-conversion-panel--header"
44+
element={HeadingElement.H3}
45+
weight={FontWeight.Bold}
46+
>
47+
Get free $250 credit
48+
</Heading>
49+
<Heading
50+
className="credit-250-conversion-panel--header"
51+
element={HeadingElement.H5}
52+
weight={FontWeight.Regular}
53+
>
54+
Credit applied to first 30 days of usage
55+
</Heading>
56+
<CloudUpgradeButton
57+
className="credit-250-conversion-upgrade--button"
58+
metric={() => {
59+
const identity = getDataLayerIdentity()
60+
event(`billing.conversion.payg.credit-250.upgrade`, {
61+
location: 'billing',
62+
...identity,
63+
experimentId: CREDIT_250_EXPERIMENT_ID,
64+
experimentVariantId: isCredit250ExperienceActive ? '2' : '1',
65+
})
66+
}}
67+
showPromoMessage={false}
68+
size={ComponentSize.Large}
69+
/>
70+
</Grid.Column>
71+
<Grid.Column widthSM={Columns.Eight}>
72+
<div className="conversion-panel--list">
73+
<ul className="credit-250-conversion-panel--benefits">
74+
<li>Unlimited buckets to store your data</li>
75+
<li>Unlimited storage retention</li>
76+
<li>Unlimited dashboards</li>
77+
<li>Unlimited tasks</li>
78+
<li>Unlimited alert checks and notification rules</li>
79+
<li>HTTP and PagerDuty notifications</li>
80+
<li>
81+
Up to {Intl.NumberFormat().format(CARDINALITY_LIMIT)} series
82+
cardinality
83+
</li>
84+
</ul>
85+
</div>
86+
</Grid.Column>
87+
</Grid>
88+
)
89+
2590
if (isFlagEnabled('credit250Experiment')) {
91+
if (isCredit250ExperienceActive) {
92+
return credit250Experience
93+
}
94+
2695
return (
2796
<GoogleOptimizeExperiment
2897
experimentID={CREDIT_250_EXPERIMENT_ID}
29-
variants={[
30-
<Grid className="credit-250-conversion-panel" key="1">
31-
<Grid.Column
32-
className="credit-250-conversion-panel--message"
33-
widthSM={Columns.Four}
34-
>
35-
<Heading
36-
className="credit-250-conversion-panel--header"
37-
element={HeadingElement.H3}
38-
weight={FontWeight.Bold}
39-
>
40-
Get free $250 credit
41-
</Heading>
42-
<Heading
43-
className="credit-250-conversion-panel--header"
44-
element={HeadingElement.H5}
45-
weight={FontWeight.Regular}
46-
>
47-
Credit applied to first 30 days of usage
48-
</Heading>
49-
<CloudUpgradeButton
50-
className="credit-250-conversion-upgrade--button"
51-
metric={() => {
52-
const identity = getDataLayerIdentity()
53-
event(`billing.conversion.payg.credit-250.upgrade`, {
54-
location: 'billing',
55-
...identity,
56-
experimentId: CREDIT_250_EXPERIMENT_ID,
57-
experimentVariantId: '1',
58-
})
59-
}}
60-
showPromoMessage={false}
61-
size={ComponentSize.Large}
62-
/>
63-
</Grid.Column>
64-
<Grid.Column widthSM={Columns.Eight}>
65-
<div className="conversion-panel--list">
66-
<ul className="credit-250-conversion-panel--benefits">
67-
<li>Unlimited buckets to store your data</li>
68-
<li>Unlimited storage retention</li>
69-
<li>Unlimited dashboards</li>
70-
<li>Unlimited tasks</li>
71-
<li>Unlimited alert checks and notification rules</li>
72-
<li>HTTP and PagerDuty notifications</li>
73-
<li>
74-
Up to {Intl.NumberFormat().format(CARDINALITY_LIMIT)} series
75-
cardinality
76-
</li>
77-
</ul>
78-
</div>
79-
</Grid.Column>
80-
</Grid>,
81-
]}
98+
variants={[credit250Experience]}
8299
/>
83100
)
84101
}

‎src/checkout/CancelButton.tsx‎

Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,37 @@
1+
// Libraries
12
import React, {FC, useContext} from 'react'
3+
import {useSelector} from 'react-redux'
24
import {CTAButton, ComponentColor} from '@influxdata/clockface'
3-
import {CheckoutContext} from 'src/checkout/context/checkout'
5+
6+
// Components
47
import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
8+
9+
// Context
10+
import {CheckoutContext} from 'src/checkout/context/checkout'
11+
12+
// Utils
13+
import {shouldGetCredit250Experience} from 'src/me/selectors'
514
import {getDataLayerIdentity} from 'src/cloud/utils/experiments'
6-
import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
715
import {event} from 'src/cloud/utils/reporting'
816
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
917

18+
// Constants
19+
import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
20+
1021
const CancelButton: FC = () => {
1122
const {handleCancelClick} = useContext(CheckoutContext)
23+
const isCredit250ExperienceActive = useSelector(shouldGetCredit250Experience)
24+
25+
const handleCancelCredit250Click = () => {
26+
const identity = getDataLayerIdentity()
27+
event('checkout.cancel.credit-250.upgrade', {
28+
location: 'checkout',
29+
...identity,
30+
experimentId: CREDIT_250_EXPERIMENT_ID,
31+
experimentVariantId: isCredit250ExperienceActive ? '2' : '1',
32+
})
33+
handleCancelClick()
34+
}
1235

1336
const original = (
1437
<CTAButton
@@ -20,32 +43,27 @@ const CancelButton: FC = () => {
2043
/>
2144
)
2245

23-
const handleCancelCredit250Click = () => {
24-
const identity = getDataLayerIdentity()
25-
event('checkout.cancel.credit-250.upgrade', {
26-
location: 'checkout',
27-
...identity,
28-
experimentId: CREDIT_250_EXPERIMENT_ID,
29-
experimentVariantId: '1',
30-
})
31-
handleCancelClick()
32-
}
46+
const credit250Experience = (
47+
<CTAButton
48+
key="1"
49+
color={ComponentColor.Default}
50+
onClick={handleCancelCredit250Click}
51+
text="Cancel"
52+
id="button-cancel" // for google-analytics
53+
testID="checkout-cancel--button"
54+
/>
55+
)
3356

3457
if (isFlagEnabled('credit250Experiment')) {
58+
if (isCredit250ExperienceActive) {
59+
return credit250Experience
60+
}
61+
3562
return (
3663
<GoogleOptimizeExperiment
3764
experimentID={CREDIT_250_EXPERIMENT_ID}
3865
original={original}
39-
variants={[
40-
<CTAButton
41-
key="1"
42-
color={ComponentColor.Default}
43-
onClick={handleCancelCredit250Click}
44-
text="Cancel"
45-
id="button-cancel" // for google-analytics
46-
testID="checkout-cancel--button"
47-
/>,
48-
]}
66+
variants={[credit250Experience]}
4967
/>
5068
)
5169
}

0 commit comments

Comments
 (0)