UI: Implement 'enrollment-code-product-info' message


This was more complex than expected.

First, the server needs to send an “course about URL” back to the client along with the message. and I agreed that this would be sent back as part of the product.

That means the client will need to grab it out of the product when it wants to display the message. The way this is implemented below, that part (getting the URL from the product) should be straightforward.

Separately, the difficulty with doing this is that react-intl doesn’t give us a good place to put <FormattedMessage>-based messages except somewhere in our components. We can’t put them in a messages.js file and use them later, to my knowledge, and certainly not if we want to include any variables in them (like the above)

Instead, I was working on a message templating system for AlertList which would allow you to include “AlertMessageTemplate” children in it with a code attribute, and if it came across that code, it would display that child as an alert.

It’s here: https://github.com/edx/frontend-app-payment/pull/61

It mostly works. It has a problem where if a message as a code in it, it assumes that it must be a server-side code that it needs to render with one of these templates, but that’s not always the case. Sometimes a server-side code could be resolved with an entry in messages. It should first look for a child template and if it can’t find one, also look at the messages in the messages.js file. That way we can use the templates as overrides to default handling, essentially.

If we can find a more generic way of providing JSX for a message key, then that might be preferable to this. I’m not sure how that’d work.

Story Points



Adam Butterworth


David Joy