(WIP) Add "localizePrice" helper

[bookernath]

What? Why?

Adds a new localizePrice helper which can be used to automatically configure the display of prices with the magic of JavaScript's Internationalization API.

This helper will override the behavior of store currency settings, and display prices differently according to the provided shopper locale - which can be supplied from browser language header we receive and make available via request.locale, or it can be specified statically in the theme. The helper will fall back to the normal stencil "formatted" price if we get any funky input.

The idea is that this will provide "magical" localization capabilities to Stencil, at least where we render pricing.

Since we're just using vanillaJS here, we can perfectly port this method to the frontend as well - for example where we render PDP pricing from an API call. So there's an opportunity for parity there.

Depends on:

https://github.com/bigcommerce/bigcommerce/pull/30545
https://github.com/bigcommerce/bigcommerce/pull/30582

Usage example

---

Assume a price object that looks like this:

  "price": {
    "tax_label": "GST",
    "without_tax": {
      "formatted": "$23.00",
      "value": 23,
      "currency": "USD"
    }
  }

And a request object that looks like this:

  "request": {
    "absolute_path": "\/",
    "host": "ezra-haucks-store.my-staging.zone",
    "is_crawler": false,
    "locale": "en_US",
    "referer": false,
    "user_agent": "Mozilla\/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/75.0.3770.100 Safari\/537.36"
  }

Usage would look like this: {{localizePrice price.without_tax request.locale}}

And output would be: $23.00

But if the request.locale changed to fr-FR, or if I manually specified it as such, this would output:

23,00 $US

How was it tested?

---

Looking for feedback on approach before I add tests.

cc @bigcommerce/storefront-team @megdesko @bigcommerce/multi-currency @davidchin

[software-artificer]

should we return original data without modification here instead?..

[bookernath]

In this case the assumption is that the theme developer is passing us something incorrect (a completely invalid object, a product image, something else) so we typically "fail" to give the theme developer some clue that they've done something wrong - and protect ourselves against attacks and stuff. That's the pattern in other helpers, but we don't have to follow it here.

I do consider prices to be "mission critical" for rendering a page, so perhaps a behavior that always tries to return something intelligible is better.

@mattolson @junedkazi interested in your perspective.

[carsonreinke]

👍 to failing over blind defaults

[mattolson]

Agree that if a user calls localizePrice with an invalid price object, we should fail. In the handlebars helper world, that means returning empty string (for consistency with behavior of other helpers, for example https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/money.js#L25).

[mattolson]

Need semicolon

[davidchin]

@bookernath it's looking promising :)

[davidchin]

Does the locale value (coming from Stencil context) takes into consideration of the locale support by the theme? i.e.: The browser could forward an accept-language header that the theme could not fulfil. In that case, the price would be localized according to the locale value but not the rest of the page. But I guess it's not really a big issue (as it's understandable by the shopper)?

[bookernath]

No, it wouldn't take that into account; it's a straight representation of our parsed result of the browser's Accept-Language header.

That being said, I don't think that's a bad thing - localizing price display is a different task than localizing all human-readable language, and perhaps we can consider those tasks separately?

[mattolson]

Seems reasonable to me. Please update with tests, and add a ticket to make sure we have NODE_ICU_DATA available to Renderer.

[mattolson]

Agree that if a user calls localizePrice with an invalid price object, we should fail. In the handlebars helper world, that means returning empty string (for consistency with behavior of other helpers, for example https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/money.js#L25).

[mattolson]

Need semicolon

[slsriehl]

@bookernath what are the implications here for open ticket DEVDOCS-1003, handlebars-helpers-reference | Update with localizePrice Helper (Pending Merge)?

[bookernath]

Hi @slsriehl ,

In general it means we should not document this capability until it's actually live. This PR is sort of just a prototype for now, and might not be live for a while. So it effectively remains "on hold" for now from a documentation perspective. If that's clogging up tubes on your end, feel free to close things as "won't do" for now and we can create a new documentation ticket later when it's needed.

[slsriehl]

DEVDOCS-1003