Skip to content

Commit e2fa08c

Browse files
TCL735TCL735
authored
feat: add Credit 250 panel to Billing Page for experiment (#4551)
1 parent e3ecca1 commit e2fa08c

File tree

4 files changed

+161
-21
lines changed

4 files changed

+161
-21
lines changed

‎src/billing/components/BillingPage.scss‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,33 @@
1919
------------------------------------------------------------------------------
2020
*/
2121

22+
.cf-grid--container .credit-250-conversion-panel {
23+
margin-top: $cf-marg-d;
24+
padding-bottom: $cf-marg-e;
25+
26+
.credit-250-conversion-panel--message {
27+
margin-top: $cf-text-base-1;
28+
}
29+
30+
.credit-250-conversion-panel--header {
31+
margin-top: $cf-marg-b;
32+
margin-bottom: $cf-marg-b;
33+
}
34+
35+
.credit-250-conversion-upgrade--button {
36+
margin-top: $cf-marg-d;
37+
}
38+
}
39+
2240
.conversion-panel--list {
2341
-webkit-columns: 2 250px;
2442
-moz-columns: 2 250px;
2543
columns: 2 250px;
2644
margin: $cf-text-base-1 0;
2745
}
2846

29-
.conversion-panel--benefits {
47+
.conversion-panel--benefits,
48+
.credit-250-conversion-panel--benefits {
3049
list-style: none;
3150
margin: 0;
3251

@@ -41,9 +60,27 @@
4160
content: '';
4261
position: absolute;
4362
left: 0;
63+
border-radius: 50%;
64+
}
65+
}
66+
}
67+
68+
.credit-250-conversion-panel--benefits {
69+
> li {
70+
&:before {
71+
width: $cf-text-base--1;
72+
height: $cf-text-base--1;
73+
background-color: $cf-white;
74+
top: calc(($cf-text-base--1) * 0.5);
75+
}
76+
}
77+
}
78+
79+
.conversion-panel--benefits {
80+
> li {
81+
&:before {
4482
width: $cf-text-base-1;
4583
height: $cf-text-base-1;
46-
border-radius: 50%;
4784
background-color: $c-pool;
4885
}
4986
}

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

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,56 @@
11
// Libraries
22
import React, {FC} from 'react'
33
import {Grid, Columns} from '@influxdata/clockface'
4-
import FreePanel from 'src/billing/components/Free/FreePanel'
5-
import PAYGConversion from 'src/billing/components/Free/PAYGConversion'
4+
import {
5+
Credit250FreePanel,
6+
FreePanel,
7+
} from 'src/billing/components/Free/FreePanel'
8+
import {PAYGConversion} from 'src/billing/components/Free/PAYGConversion'
69

710
// Components
811
import GetAssetLimits from 'src/cloud/components/GetAssetLimits'
912

10-
const BillingFree: FC = () => (
11-
<Grid>
12-
<Grid.Row>
13-
<Grid.Column widthXS={Columns.Twelve}>
14-
<GetAssetLimits>
15-
<FreePanel />
16-
</GetAssetLimits>
17-
</Grid.Column>
18-
</Grid.Row>
19-
<PAYGConversion />
20-
</Grid>
21-
)
13+
// Utils
14+
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
15+
import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
16+
17+
// Constants
18+
import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
19+
20+
const BillingFree: FC = () => {
21+
const original = (
22+
<Grid>
23+
<Grid.Row>
24+
<Grid.Column widthXS={Columns.Twelve}>
25+
<GetAssetLimits>
26+
<FreePanel />
27+
</GetAssetLimits>
28+
</Grid.Column>
29+
</Grid.Row>
30+
<PAYGConversion />
31+
</Grid>
32+
)
33+
34+
if (isFlagEnabled('credit250Experiment')) {
35+
return (
36+
<GoogleOptimizeExperiment
37+
experimentID={CREDIT_250_EXPERIMENT_ID}
38+
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+
]}
50+
/>
51+
)
52+
}
53+
return original
54+
}
2255

2356
export default BillingFree

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, {FC} from 'react'
22
import {Panel} from '@influxdata/clockface'
33
import OrgLimits from 'src/billing/components/Free/OrgLimits'
4+
import {Credit250PAYGConversion} from 'src/billing/components/Free/PAYGConversion'
45

5-
const FreePanel: FC = () => (
6+
export const FreePanel: FC = () => (
67
<Panel>
78
<Panel.Header>
89
<h4>Your Free Plan</h4>
@@ -13,4 +14,14 @@ const FreePanel: FC = () => (
1314
</Panel>
1415
)
1516

16-
export default FreePanel
17+
export const Credit250FreePanel: FC = () => (
18+
<Panel>
19+
<Panel.Header>
20+
<h4>Your Free Plan</h4>
21+
</Panel.Header>
22+
<Panel.Body>
23+
<OrgLimits />
24+
<Credit250PAYGConversion />
25+
</Panel.Body>
26+
</Panel>
27+
)

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

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,69 @@ import {
1212
Button,
1313
} from '@influxdata/clockface'
1414
import {useHistory} from 'react-router-dom'
15+
import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
16+
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
17+
import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
18+
import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
1519

16-
const PAYGConversion: FC = () => {
20+
const ONE_MILLION = 1_000_000
21+
22+
export const Credit250PAYGConversion: FC = () => {
23+
if (isFlagEnabled('credit250Experiment')) {
24+
return (
25+
<GoogleOptimizeExperiment
26+
experimentID={CREDIT_250_EXPERIMENT_ID}
27+
variants={[
28+
<Grid className="credit-250-conversion-panel" key="1">
29+
<Grid.Column
30+
className="credit-250-conversion-panel--message"
31+
widthSM={Columns.Four}
32+
>
33+
<Heading
34+
className="credit-250-conversion-panel--header"
35+
element={HeadingElement.H3}
36+
weight={FontWeight.Bold}
37+
>
38+
Get free $250 credit
39+
</Heading>
40+
<Heading
41+
className="credit-250-conversion-panel--header"
42+
element={HeadingElement.H5}
43+
weight={FontWeight.Regular}
44+
>
45+
Credit applied to first 30 days of usage
46+
</Heading>
47+
<CloudUpgradeButton
48+
className="credit-250-conversion-upgrade--button"
49+
showPromoMessage={false}
50+
size={ComponentSize.Large}
51+
/>
52+
</Grid.Column>
53+
<Grid.Column widthSM={Columns.Eight}>
54+
<div className="conversion-panel--list">
55+
<ul className="credit-250-conversion-panel--benefits">
56+
<li>Unlimited buckets to store your data</li>
57+
<li>Unlimited storage retention</li>
58+
<li>Unlimited dashboards</li>
59+
<li>Unlimited tasks</li>
60+
<li>Unlimited alert checks and notification rules</li>
61+
<li>HTTP and PagerDuty notifications</li>
62+
<li>
63+
Up to {Intl.NumberFormat().format(ONE_MILLION)} series
64+
cardinality
65+
</li>
66+
</ul>
67+
</div>
68+
</Grid.Column>
69+
</Grid>,
70+
]}
71+
/>
72+
)
73+
}
74+
return null
75+
}
76+
77+
export const PAYGConversion: FC = () => {
1778
const history = useHistory()
1879

1980
const handleClick = () => {
@@ -76,5 +137,3 @@ const PAYGConversion: FC = () => {
76137
</>
77138
)
78139
}
79-
80-
export default PAYGConversion

0 commit comments

Comments
 (0)