Skip to content

Commit 7dee63c

Browse files
florian-sanders-ccflorian-sanders-cc
committed
feat(pricing): update Pulsar plan intervals and pricing logic
- Renamed service keys to use dot notation (e.g., pulsar.throughput.in) - Added progressive flag to inbound/outbound traffic and storage sections - Updated interval ranges and prices for Pulsar traffic and storage plans - Changed hot/cold storage pricing formulas for consistency - Improved variable naming in interval rendering logic for clarity
1 parent c73ffeb commit 7dee63c

File tree

8 files changed

+2293
-1480
lines changed

8 files changed

+2293
-1480
lines changed

‎demo-smart/cc-pricing-page/index.html‎

Lines changed: 151 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,166 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
8-
/>
9-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
10-
<link rel="stylesheet" href="../../src/styles/default-theme.css" />
11-
<title>Pricing Page test</title>
12-
<style>
13-
body {
14-
max-width: min(100%, 1450px);
15-
margin-inline: auto;
16-
padding: 1em;
17-
font-family:
18-
'Nunito Sans',
19-
-apple-system,
20-
'.SFNSText-Regular',
21-
'San Francisco',
22-
BlinkMacSystemFont,
23-
'Segoe UI',
24-
'Helvetica Neue',
25-
Helvetica,
26-
Arial,
27-
sans-serif;
28-
}
293

30-
.header {
31-
margin-inline: auto;
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport"
7+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
9+
<link rel="stylesheet" href="../../src/styles/default-theme.css" />
10+
<title>Pricing Page test</title>
11+
<style>
12+
body {
13+
max-width: min(100%, 1450px);
14+
margin-inline: auto;
15+
padding: 1em;
16+
font-family:
17+
'Nunito Sans',
18+
-apple-system,
19+
'.SFNSText-Regular',
20+
'San Francisco',
21+
BlinkMacSystemFont,
22+
'Segoe UI',
23+
'Helvetica Neue',
24+
Helvetica,
25+
Arial,
26+
sans-serif;
27+
}
28+
29+
.header {
30+
margin-inline: auto;
31+
}
32+
33+
.main-content {
34+
display: flex;
35+
gap: 1em;
36+
margin-block: 2em;
37+
}
38+
39+
cc-pricing-estimation {
40+
--shadow-color: 45deg 3% 46%;
41+
42+
position: sticky;
43+
z-index: 10;
44+
top: 0;
45+
height: max-content;
46+
max-height: 80vh;
47+
min-width: 18em;
48+
flex: 0 1 25em;
49+
padding: 1em;
50+
background-color: #fff;
51+
box-shadow:
52+
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 36%),
53+
0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 36%),
54+
2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 36%),
55+
5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 36%);
56+
margin-block: 2em;
57+
overflow-y: scroll;
58+
}
59+
60+
.product-list {
61+
flex: 1 1 auto;
62+
order: -1;
63+
}
64+
65+
@media (max-width: 81.25em) {
66+
.main-content {
67+
flex-direction: column;
3268
}
3369

34-
.main-content {
35-
display: flex;
36-
gap: 1em;
37-
margin-block: 2em;
70+
.product-list {
71+
padding-inline: 1em;
3872
}
3973

4074
cc-pricing-estimation {
41-
--shadow-color: 45deg 3% 46%;
42-
43-
position: sticky;
44-
z-index: 10;
45-
top: 0;
46-
height: max-content;
47-
max-height: 80vh;
48-
min-width: 18em;
49-
flex: 0 1 25em;
50-
padding: 1em;
51-
background-color: #fff;
52-
box-shadow:
53-
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 36%),
54-
0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 36%),
55-
2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 36%),
56-
5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 36%);
57-
margin-block: 2em;
58-
overflow-y: scroll;
75+
bottom: 0;
76+
overflow: auto;
77+
flex: 0 0 auto;
78+
order: 2;
5979
}
80+
}
81+
</style>
82+
<script type="module">
83+
import '../../src/components/cc-pricing-page/cc-pricing-page.js';
84+
import {addTranslations, setLanguage} from '../../src/lib/i18n/i18n.js';
85+
import {lang, translations} from '../../src/translations/translations.fr.js';
86+
import '../../src/components/cc-pricing-product/cc-pricing-product.smart-addon.js';
87+
import '../../src/components/cc-pricing-product/cc-pricing-product.smart-runtime.js';
88+
import '../../src/components/cc-pricing-product-consumption/cc-pricing-product-consumption.smart.js';
89+
import '../../src/components/cc-pricing-estimation/cc-pricing-estimation.smart.js';
90+
import '../../src/components/cc-pricing-header/cc-pricing-header.smart.js';
91+
92+
addTranslations(lang, translations);
93+
setLanguage(lang);
94+
</script>
95+
<script defer>
96+
let cart;
97+
98+
addEventListener('load', () => {
99+
cart = document.querySelector('cc-pricing-estimation');
100+
cart.isToggleEnabled = window.matchMedia('(max-width: 81.25em)').matches;
101+
});
102+
103+
const mediaQueryList = window.matchMedia('(max-width: 81.25em)');
104+
105+
mediaQueryList.addEventListener('change', switchCartLayout);
106+
107+
function switchCartLayout(e) {
108+
cart.isToggleEnabled = e.matches;
109+
}
110+
</script>
111+
</head>
112+
113+
<body>
114+
<cc-smart-container
115+
context='{ "apiConfig": {"API_HOST": "https://api.clever-cloud.com"},"addonFeatures":["cpu","memory","max-db-size","disk-size","connection-limit","version","databases","has-logs","has-metrics"] }'>
116+
<cc-pricing-page>
117+
<div class="header">
118+
<cc-pricing-header currencies='["EUR", "USD"]'
119+
temporalities='[{"type":"second","digits":7},{"type":"minute","digits":5},{"type":"hour","digits":3},{"type":"day","digits":2},{"type":"30-days","digits":2}]'></cc-pricing-header>
120+
</div>
121+
<div class="main-content">
122+
<div class="product-list">
123+
<div class="product">
124+
<cc-smart-container context='{"productId":"php"}'>
125+
<h2>PHP</h2>
126+
<cc-pricing-product mode="runtime" action="add"></cc-pricing-product>
127+
</cc-smart-container>
128+
</div>
60129

61-
.product-list {
62-
flex: 1 1 auto;
63-
order: -1;
64-
}
130+
<div class="product">
131+
<cc-smart-container context='{"productId":"redis-addon"}'>
132+
<h2>Redis</h2>
133+
<cc-pricing-product mode="addon" action="add"></cc-pricing-product>
134+
</cc-smart-container>
135+
</div>
65136

66-
@media (max-width: 81.25em) {
67-
.main-content {
68-
flex-direction: column;
69-
}
70-
71-
.product-list {
72-
padding-inline: 1em;
73-
}
74-
75-
cc-pricing-estimation {
76-
bottom: 0;
77-
overflow: auto;
78-
flex: 0 0 auto;
79-
order: 2;
80-
}
81-
}
82-
</style>
83-
<script type="module">
84-
import '../../src/components/cc-pricing-page/cc-pricing-page.js';
85-
import { addTranslations, setLanguage } from '../../src/lib/i18n/i18n.js';
86-
import { lang, translations } from '../../src/translations/translations.fr.js';
87-
import '../../src/components/cc-pricing-product/cc-pricing-product.smart-addon.js';
88-
import '../../src/components/cc-pricing-product/cc-pricing-product.smart-runtime.js';
89-
import '../../src/components/cc-pricing-product-consumption/cc-pricing-product-consumption.smart.js';
90-
import '../../src/components/cc-pricing-estimation/cc-pricing-estimation.smart.js';
91-
import '../../src/components/cc-pricing-header/cc-pricing-header.smart.js';
92-
93-
addTranslations(lang, translations);
94-
setLanguage(lang);
95-
</script>
96-
<script defer>
97-
let cart;
98-
99-
addEventListener('load', () => {
100-
cart = document.querySelector('cc-pricing-estimation');
101-
cart.isToggleEnabled = window.matchMedia('(max-width: 81.25em)').matches;
102-
});
103-
104-
const mediaQueryList = window.matchMedia('(max-width: 81.25em)');
105-
106-
mediaQueryList.addEventListener('change', switchCartLayout);
107-
108-
function switchCartLayout(e) {
109-
cart.isToggleEnabled = e.matches;
110-
}
111-
</script>
112-
</head>
113-
<body>
114-
<cc-smart-container
115-
context='{ "apiConfig": {"API_HOST": "https://api.clever-cloud.com"},"addonFeatures":["cpu","memory","max-db-size","disk-size","connection-limit","version","databases","has-logs","has-metrics"] }'
116-
>
117-
<cc-pricing-page>
118-
<div class="header">
119-
<cc-pricing-header
120-
currencies='["EUR", "USD"]'
121-
temporalities='[{"type":"second","digits":7},{"type":"minute","digits":5},{"type":"hour","digits":3},{"type":"day","digits":2},{"type":"30-days","digits":2}]'
122-
></cc-pricing-header>
123-
</div>
124-
<div class="main-content">
125-
<div class="product-list">
126-
<div class="product">
127-
<cc-smart-container context='{"productId":"php"}'>
128-
<h2>PHP</h2>
129-
<cc-pricing-product mode="runtime" action="add"></cc-pricing-product>
130-
</cc-smart-container>
131-
</div>
132-
133-
<div class="product">
134-
<cc-smart-container context='{"productId":"redis-addon"}'>
135-
<h2>Redis</h2>
136-
<cc-pricing-product mode="addon" action="add"></cc-pricing-product>
137-
</cc-smart-container>
138-
</div>
139-
140-
<div class="product">
141-
<cc-smart-container context='{"productId":"mongodb-addon"}'>
142-
<h2>MongoDB</h2>
143-
<cc-pricing-product mode="addon" action="add"></cc-pricing-product>
144-
</cc-smart-container>
145-
</div>
146-
147-
<div class="product">
148-
<cc-smart-container context='{ "productId": "cellar" }'>
149-
<h2>Cellar</h2>
150-
<cc-pricing-product-consumption></cc-pricing-product-consumption>
151-
</cc-smart-container>
152-
</div>
137+
<div class="product">
138+
<cc-smart-container context='{"productId":"mongodb-addon"}'>
139+
<h2>MongoDB</h2>
140+
<cc-pricing-product mode="addon" action="add"></cc-pricing-product>
141+
</cc-smart-container>
142+
</div>
143+
144+
<div class="product">
145+
<cc-smart-container context='{ "productId": "cellar" }'>
146+
<h2>Cellar</h2>
147+
<cc-pricing-product-consumption></cc-pricing-product-consumption>
148+
</cc-smart-container>
153149
</div>
154150

155-
<cc-pricing-estimation
156-
currencies='["EUR", "USD"]'
157-
temporalities='[{"type":"second","digits":7},{"type":"minute","digits":5},{"type":"hour","digits":3},{"type":"day","digits":2},{"type":"30-days","digits":2}]'
158-
></cc-pricing-estimation>
151+
<div class="product">
152+
<cc-smart-container context='{ "productId": "pulsar" }'>
153+
<h2>Pulsar</h2>
154+
<cc-pricing-product-consumption></cc-pricing-product-consumption>
155+
</cc-smart-container>
156+
</div>
159157
</div>
160-
</cc-pricing-page>
161-
</cc-smart-container>
162-
</body>
158+
159+
<cc-pricing-estimation currencies='["EUR", "USD"]'
160+
temporalities='[{"type":"second","digits":7},{"type":"minute","digits":5},{"type":"hour","digits":3},{"type":"day","digits":2},{"type":"30-days","digits":2}]'></cc-pricing-estimation>
161+
</div>
162+
</cc-pricing-page>
163+
</cc-smart-container>
164+
</body>
165+
163166
</html>

‎src/components/cc-pricing-product-consumption/cc-pricing-product-consumption.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const THIRTY_DAYS_IN_HOURS = 24 * 30;
3333

3434
const ICONS = {
3535
storage: iconDisk,
36+
'cold-storage': iconDisk,
37+
'hot-storage': iconDisk,
3638
'inbound-traffic': iconArrowsRight,
3739
'outbound-traffic': iconArrowsLeft,
3840
'private-users': iconUser,
@@ -100,6 +102,10 @@ export class CcPricingProductConsumption extends LitElement {
100102
switch (type) {
101103
case 'storage':
102104
return i18n('cc-pricing-product-consumption.storage.title');
105+
case 'cold-storage':
106+
return i18n('cc-pricing-product-consumption.cold-storage.title');
107+
case 'hot-storage':
108+
return i18n('cc-pricing-product-consumption.hot-storage.title');
103109
case 'inbound-traffic':
104110
return i18n('cc-pricing-product-consumption.inbound-traffic.title');
105111
case 'outbound-traffic':
@@ -117,12 +123,16 @@ export class CcPricingProductConsumption extends LitElement {
117123
* Returns the translated label depending on the section type
118124
*
119125
* @param {SectionType} type - the type of the pricing section
120-
* @return {string} the translated label corresponding to the given section type
126+
* @return {string|Node} the translated label corresponding to the given section type
121127
*/
122128
_getLabel(type) {
123129
switch (type) {
124130
case 'storage':
125131
return i18n('cc-pricing-product-consumption.storage.label');
132+
case 'cold-storage':
133+
return i18n('cc-pricing-product-consumption.cold-storage.label');
134+
case 'hot-storage':
135+
return i18n('cc-pricing-product-consumption.hot-storage.label');
126136
case 'inbound-traffic':
127137
return i18n('cc-pricing-product-consumption.inbound-traffic.label');
128138
case 'outbound-traffic':
@@ -236,7 +246,7 @@ export class CcPricingProductConsumption extends LitElement {
236246
* @return {boolean} true if values from this section are expressed in bytes, false otherwise
237247
*/
238248
_isTypeBytes(type) {
239-
return ['storage', 'inbound-traffic', 'outbound-traffic'].includes(type);
249+
return ['storage', 'hot-storage', 'cold-storage', 'inbound-traffic', 'outbound-traffic'].includes(type);
240250
}
241251

242252
/**
@@ -493,8 +503,8 @@ export class CcPricingProductConsumption extends LitElement {
493503
_renderIntervalList({ type, progressive, intervals, maxInterval }) {
494504
return intervals.map((interval, intervalIndex) => {
495505
const maxIntervalIndex = intervals.indexOf(maxInterval);
496-
const foo = progressive && intervalIndex <= maxIntervalIndex;
497-
const highlighted = interval === maxInterval || foo;
506+
const isInProgressiveRange = progressive && intervalIndex <= maxIntervalIndex;
507+
const highlighted = interval === maxInterval || isInProgressiveRange;
498508

499509
const minRange = this._getMinRange(type, interval.minRange);
500510
const maxRange = this._getMaxRange(type, interval.maxRange);

0 commit comments

Comments
 (0)