ProductDetail

See react-router's documentation for explanation on the useNavigation hook, useLocation hook and the Outlet component.

The productDetail object is used throughout MMA to get information about the currently viewed product when updating payment details, adding holiday stops, altering delivery addresses, etc.

An example productDetail object

When navigating these different journeys (i.e.: updating payment details, adding holiday stops, etc...), if the correct productDetail object is not already in the application state, the MembersDataApiAsyncLoader will fetch it, example here.

productDetail objects are set using Context which wraps react-router's Outlet in a Provider

Some nested routes may then set the productDetail in state when navigating between routes by using react-router's useNavigation hook like so. The productDetail can then be retrieved using react-router's useLocation hook