cc-pricing-*: handle multi-currency, add `state`, typecheck, fix small issues & cleanup #1218

florian-sanders-cc · 2024-10-24T16:54:17Z

What does this PR do?

Adapt pricing components to support currency data coming from the priceSystem endpoint:
- currency is now a simple string ("EUR", "USD", etc.),
- the hard coded change rate has been removed,
- components no longer compute the price related to the selected currency using the hard coded change rate,
- instead they rely on prices provided by the priceSystem endpoint,
- this also means that smart components showing prices (cc-pricing-product, cc-pricing-product-consumption & cc-pricing-estimation) support an optional currency context parameter.
- a cc-pricing-estimation.smart has been created because everytime the currency changed, it used to compute the new prices based on the hard coded change rate,
- now that the change rate is gone, the cc-pricing-estimation relies on the priceSystem to find the product prices for the selected currency and compute the total price based on quantity.
- this also impacts cc-pricing-product-consumption because prices for "countable" products (consumption based products) rely on intervals.
  - Each interval corresponds to a price range to which a specific price applies (check pulsar / cellar products for instance). Some intervals are progressive (like taxes in France) and some are not (as soon as you reach a threshold, the previous threshold no longer applies). Ping me if you need explanation about this but playing with the prod pricing page should help too.
  - All of this means that computing prices for consumption based products is a lot more complex than for others, which is why you'll see that I've reused the whole logic (PricingSimulator class) used by the cc-pricing-product-consumption for the cc-pricing-estimation.
Fix a few other things:
- in cc-pricing-product.smart-addon.js, the addonFeatures was mandatory even though it had a default value which doesn't make sense. It is now optional.
- in every pricing smart component, the zoneId was mandatory even though it had a default value which doesn't make sense. It is now optional.
- Reintroduce apiConfig as an optional context parameter for all pricing smart components:
  - it wasn't possible to add it before because we didn't support optional context params,
  - the apiConfig param is optional because these components require no authentication.
Typecheck everything and move things around (especially for stories, to avoid duplicating too much code).

How to review?

Some stuff was left unchanged, for instance temporality features, responsive & CSS overall.
You should focus on currency, states, smart, and how the components work / interact together when adding / removing product / changing currency, etc.
If you don't have much time, it's better to spend it playing with the component as stated above than actually checking the code thoroughly.

check the code (by commit seems doable but you can do whatever you prefer),
check the stories of each pricing component,
check the demo-smart/cc-pricing-page page (this is where you should play the most with the component).

github-actions · 2024-10-30T09:45:37Z

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/cc-pricing-components/states-typecheck-and-multicurrency/index.html.

This preview will be deleted once this PR is closed.

pdesoyres-cc

What an awesome PR! So much things tackeled in a very complex component. So, well done Florian.

During my tests, I did not encountered any problems.

However, I left some comments (and some questions too).

src/stories/cc-pricing-page-sandbox.js

src/stories/fixtures/price-system.js

src/components/cc-pricing-product-consumption/cc-pricing-product-consumption.smart.md

src/components/cc-pricing-product/cc-pricing-product.smart-addon.md

src/components/cc-pricing-product/cc-pricing-product.smart-runtime.md

src/components/cc-pricing-header/cc-pricing-header.smart.md

src/lib/utils.js

Galimede

Thanks Florian for handling this, that's nice GG! 💪 🤗

No problem found on Safari
Apart of Pierre's nitpicks, I've just a very small one

As we discussed in sync, the +/- buttons on the pricing-estimation lack a cursor: pointer on hover

src/components/cc-pricing-estimation/cc-pricing-estimation.js

Galimede

Small question but LGTM, thanks Florian! 💪

Galimede · 2024-12-02T13:46:14Z

src/components/cc-pricing-estimation/cc-pricing-estimation.smart.md

-The new fetch is triggered by changing the context of their common smart container when the zone or currency changes.
+The typical HTML for a basic `cc-pricing-page` implementation looks like this:
+```html
+<cc-smart-container context='{


question: now that apiConfig is mandatory, shouldn't it appear here too?

Nice catch, forgot about that, thanks!

src/components/cc-pricing-header/cc-pricing-header.smart.md

pdesoyres-cc

LGTM. well done for this huge work!

Fixes #1222

Fixes #1223

BREAKING CHANGE: the component no longer supports hard coded change rate Prices displayed in pricing components are no longer computed based on hard coded change rate. Prices related to the selected currency come from the API priceSytem endpoint. This means that some types for the component properties have changed: - `currency` is now a `string` (ISO 4217 currency code), - `selectedCurrency` is now a `string` (ISO 4217 currency code). Fixes #1167

Smart components: - The `addonFeatures` context parameter of the `cc-pricing-product.smart-addon` component is now optional as it should always have been (default value: `[]` meaning that all features are displayed by default). - The `zoneId` context parameter of both `cc-pricing-product.smart-addon` & `cc-pricing-product.smart-runtime` is now optional (default value: `'par'`). BREAKING CHANGE: the component no longer supports hard coded change rate Prices displayed in pricing components are no longer computed based on hard coded change rate. Prices related to the selected currency come from the API priceSytem endpoint. The component also relies on the new `state` prop for data coming from the API. This means that some types for the component properties have changed: - `currency` is now a `string` (ISO 4217 currency code), - `product` has been removed, - `state` has been added to replace `product`, - `product.state` is now `state.type`. The payload type of the `cc-pricing-product:add-plan` dispatched event has changed. Plans must now include a `priceId` property to be handled by the `cc-pricing-estimation` correctly. This also means that custom products / plans can no longer be added to the estimation because they are not part of the priceSystem and have no `priceId`. The payload type of the `cc-pricing-product:add-plan` dispatched event has changed. Plans must now include a `priceId` property to be handled by the `cc-pricing-estimation` correctly. This also means that custom products / plans can no longer be added to the estimation because they are not part of the priceSystem and have no `priceId`. Fixes #1167 Fixes #1109 Fixes #1174 Fixes #1176

…urrency Smart components: - The `zoneId` context parameter of `cc-pricing-product-consumption.smart` is now optional (default value: `'par'`). BREAKING CHANGE: the component no longer supports hard coded change rate Prices displayed in pricing components are no longer computed based on hard coded change rate. Prices related to the selected currency come from the API priceSytem endpoint. The component also relies on the new `state` prop for data coming from the API. This means that some types for the component properties have changed: - `currency` is now a `string` (ISO 4217 currency code), - `product` has been removed, - `state` has been added to replace `product`, - `product.state` is now `state.type`. The type of the payload dispatched with the event `cc-pricing-product:add-plan` has changed: - `sections` (`Array<PricingSection>`) are now part of the payload so that prices can be computed by the `cc-pricing-estimation` component everytime the currency changes. Fixes #1167 Fixes #1176 Fixes #1109

…em currency BREAKING CHANGE: the component no longer supports hard coded change rate Prices displayed in pricing components are no longer computed based on hard coded change rate. Prices related to the selected currency come from the API priceSytem endpoint. This means the component now has a dedicated smart component ( `cc-pricing-estimation.smart`) to fetch the `priceSystem` corresponding to the selected currency everytime it changes. The component also relies on the new `state` prop for data coming from the API. This means that some types for the component properties have changed: - `selectedCurrency` is now a `string` (ISO 4217 currency code), - `currency` is now a `string` (ISO 4217 currency code), - `state` has been added to receive data from the `priceSystem`. Fixes #1167

BREAKING CHANGE: the component no longer supports hard coded change rate Prices displayed in pricing components are no longer computed based on hard coded change rate. Prices related to the selected currency come from the API priceSytem endpoint. This means that some types for the component properties have changed: - `selectedCurrency` is now a `string` (ISO 4217 currency code), - `selectedPlans` now handles plans differently (they must have a `priceId` if they come from `cc-pricing-product` or `sections` if they come from `cc-pricing-product-consumption`). Fixes #1167

…rrency

… components

florian-sanders-cc self-assigned this Oct 24, 2024

florian-sanders-cc marked this pull request as draft October 24, 2024 16:54

florian-sanders-cc force-pushed the cc-pricing-components/states-typecheck-and-multicurrency branch 6 times, most recently from 3666269 to 62af712 Compare October 30, 2024 09:35

florian-sanders-cc force-pushed the cc-pricing-components/states-typecheck-and-multicurrency branch 4 times, most recently from aa58745 to b6f5fed Compare October 30, 2024 10:44

florian-sanders-cc requested review from Galimede, hsablonniere, roberttran-cc, pdesoyres-cc and HeleneAmouzou October 30, 2024 11:07

florian-sanders-cc marked this pull request as ready for review October 30, 2024 11:09

florian-sanders-cc closed this Oct 30, 2024

florian-sanders-cc force-pushed the cc-pricing-components/states-typecheck-and-multicurrency branch from b6f5fed to 1430178 Compare October 30, 2024 11:15

florian-sanders-cc changed the title ~~--wip-- [skip ci]~~ cc-pricing-*: handle multi-currency, add state, typecheck, fix small issues & cleanup Oct 30, 2024

florian-sanders-cc reopened this Oct 30, 2024

pdesoyres-cc reviewed Oct 31, 2024

View reviewed changes

florian-sanders-cc force-pushed the cc-pricing-components/states-typecheck-and-multicurrency branch 2 times, most recently from 1a54752 to 09730b7 Compare November 25, 2024 17:14

florian-sanders-cc mentioned this pull request Nov 26, 2024

lit: upgrade to 3.2.1 #1249

Merged

Galimede reviewed Nov 27, 2024

View reviewed changes

src/components/cc-pricing-estimation/cc-pricing-estimation.js Outdated Show resolved Hide resolved

florian-sanders-cc force-pushed the cc-pricing-components/states-typecheck-and-multicurrency branch 2 times, most recently from e1760e4 to af21fd9 Compare November 29, 2024 16:22

florian-sanders-cc force-pushed the cc-pricing-components/states-typecheck-and-multicurrency branch 2 times, most recently from 373e4c6 to abed39d Compare November 29, 2024 16:39

florian-sanders-cc requested review from Galimede and pdesoyres-cc November 29, 2024 16:48

Galimede approved these changes Dec 2, 2024

View reviewed changes

pdesoyres-cc approved these changes Dec 3, 2024

View reviewed changes

florian-sanders-cc added 11 commits December 4, 2024 10:19

fix(smart components): allow optional apiConfig context params

0138cf5

Fixes #1222

fix(cc-pricing-*): restore currency symbol display inside dropdowns

4ca85cd

Fixes #1223

refactor(demo-smart/cc-pricing-page): adapt to support priceSystem cu…

d81de06

…rrency

chore(tsconfig.ci.json): enable typechecking for all libs and pricing…

b48a84c

… components

refactor(cc-addon-admin.stories): remove unused type

492bec6

chore(shoelace): upgrade to 2.18.0

458dce3

florian-sanders-cc force-pushed the cc-pricing-components/states-typecheck-and-multicurrency branch from abed39d to 458dce3 Compare December 4, 2024 09:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

cc-pricing-*: handle multi-currency, add `state`, typecheck, fix small issues & cleanup #1218

cc-pricing-*: handle multi-currency, add `state`, typecheck, fix small issues & cleanup #1218

florian-sanders-cc commented Oct 24, 2024 •

edited

Loading

github-actions bot commented Oct 30, 2024

pdesoyres-cc left a comment

Galimede left a comment

Galimede left a comment

Galimede Dec 2, 2024

florian-sanders-cc Dec 2, 2024

pdesoyres-cc left a comment

cc-pricing-*: handle multi-currency, add state, typecheck, fix small issues & cleanup #1218

Are you sure you want to change the base?

cc-pricing-*: handle multi-currency, add state, typecheck, fix small issues & cleanup #1218

Conversation

florian-sanders-cc commented Oct 24, 2024 • edited Loading

What does this PR do?

How to review?

github-actions bot commented Oct 30, 2024

pdesoyres-cc left a comment

Choose a reason for hiding this comment

Galimede left a comment

Choose a reason for hiding this comment

Galimede left a comment

Choose a reason for hiding this comment

Galimede Dec 2, 2024

Choose a reason for hiding this comment

florian-sanders-cc Dec 2, 2024

Choose a reason for hiding this comment

pdesoyres-cc left a comment

Choose a reason for hiding this comment

cc-pricing-*: handle multi-currency, add `state`, typecheck, fix small issues & cleanup #1218

cc-pricing-*: handle multi-currency, add `state`, typecheck, fix small issues & cleanup #1218

florian-sanders-cc commented Oct 24, 2024 •

edited

Loading