Skip to content

Redesign pricing calculator - #84

Open
odthoma wants to merge 4 commits into
developfrom
feature/26745-redesign-pricing-calculator
Open

odthoma wants to merge 4 commits into
developfrom
feature/26745-redesign-pricing-calculator

Conversation

@odthoma

@odthoma odthoma commented Oct 19, 2026 •

Copy link
Copy Markdown

@odthoma
odthoma marked this pull request as ready for review October 26, 2026 11:22
@odthoma
odthoma requested a review from a team as a code owner October 26, 2026 11:22
@odthoma odthoma self-assigned this Oct 26, 2026

@snitzelbread snitzelbread left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot! I'm not gonna be able to read all of this but I left some comments, mostly readability and consistency issues. I'd like them fixed, but also I'm a bit confused as to what the plan is now for the pricing-calculator repository...? Will this be archived/not used anymore? If possible, please figure this out.

Comment thread _i18n/it.yml
Comment on lines +50 to +63
pricing_description: 'Scegli ciò di cui ha bisogno la tua app.<br>Tutti i prezzi in CHF al mese, IVA esclusa.'
pricing_calc_preset_label: 'Carica un modello:'
pricing_calc_preset_hobby: 'Hobby'
pricing_calc_preset_production: 'Produzione'
pricing_calc_preset_scale: 'Scala'
pricing_calc_per_month: '/ mese'
pricing_calc_excl_vat: 'IVA esclusa'
pricing_calc_none: 'Nessuno'
pricing_calc_optional: 'facoltativo'
pricing_calc_decrease: 'Diminuisci'
pricing_calc_increase: 'Aumenta'
pricing_calc_app: 'App'
pricing_calc_app_choose: 'Scegli la quantità per ogni dimensione di istanza'
pricing_calc_app_choose_mobile: 'Scegli una dimensione di istanza'

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can remove the quotes around 99% of these and the other translations. For consistency sake.

Comment thread _assets/css/app.css
Comment on lines +109 to +130
/* The dark minus icon already comes faded, it only shows while the quantity is zero */
.pricing-stepper[data-active='true'] [data-stepper-icon='idle'],
.pricing-stepper:not([data-active='true']) [data-stepper-icon='active'] {
@apply hidden;
}

.pricing-step:disabled [data-stepper-icon='active'] {
@apply opacity-50;
}

.pricing-link {
@apply whitespace-nowrap underline decoration-1 underline-offset-4 transition-opacity hover:opacity-70;
}

.pricing-print {
@apply text-deploio;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}

/* The first page starts at the paper edge so the logo hangs from the top like on the site */

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the comments can be removed

Comment on lines +1 to +4
{% comment %}
One add-on line. Pass `toggle` or `stepper` with the state field the control edits, and either `price_slot` with
`unit_key` or a ready-made `price`. `hint_key` or `hint` and `details` are optional.
{% endcomment %}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont even know what this comment is trying to tell me

Comment on lines +270 to +293
const { addOns } = catalog;
if (state.objectStorage && state.storageGiB > 0 && addOns.object_storage_space) {
const { price } = addOns.object_storage_space;
add('add_ons', strings.object_storage_space, `${formatQuantity(state.storageGiB)} GiB`, state.storageGiB * price);
}
if (state.objectStorage && state.trafficGiB > 0 && addOns.object_storage_traffic) {
const detail = strings.gib_outgoing.replace('{gib}', formatQuantity(state.trafficGiB));
add('add_ons', strings.object_storage_traffic, detail, state.trafficGiB * addOns.object_storage_traffic.price);
}
if (state.staticEgress && addOns.static_egress) {
add('add_ons', strings.static_egress, 'deplo.io', addOns.static_egress.price);
}
if (state.ipv4 > 0 && addOns.ipv4) {
const { price } = addOns.ipv4;
add('add_ons', strings.additional_ipv4, `${state.ipv4} × ${formatAmount(price)}`, state.ipv4 * price);
}
if (state.blockStorage > 0 && addOns.block_storage) {
const { price } = addOns.block_storage;
add('add_ons', strings.block_storage, `${state.blockStorage * 10} GiB`, state.blockStorage * price);
}
if (state.grafana > 0 && addOns.grafana) {
const { price } = addOns.grafana;
add('add_ons', strings.grafana, `${state.grafana} × ${formatAmount(price)}`, state.grafana * price);
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like you're doing the same thing here multiple times. Could be simplified.

all('[data-value-of]').forEach((element) => {
const field = element.dataset.valueOf;
// Block storage is bought in 10 GiB blocks but shown in GiB
showQuantity(element, state[field], field === 'blockStorage' ? state[field] * 10 : state[field]);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does the * 10 stand for? Magic number?

catalog.kvs[entry.key] = slot(entry);
});
config.search.sizes.forEach((size) => {
['single', 'multi'].forEach((level) => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You defined SEARCH_LEVELS, why not use it here? Also, you seem to use the string 'none' a lot in this file. Putting it in a constant would be better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants