Product Types

One of the core themes in manage-frontend is that all the things that are different between our vast array of products, such as how they're displayed, what names they have and what user flows exist for each are controlled in ONE PLACE - /app/shared/productTypes.tsx

IF YOU WANT TO ADD A FEATURE WHICH HAS DIFFERENCES PER PRODUCT THEN THOSE DIFFERENCES SHOULD BE CODIFIED IN /app/shared/productTypes.tsx.

You will notice quite a number of exports in this file, but the two most important ones are...

PRODUCT_TYPES map

This is the main list of specific product types, currently...

• membership
• contributions (conceptually refers to 'recurring contributions', as one-offs don't live in Zuora)
• homedelivery
• voucher
• newspaper (this is legacy, from when homedelivery and voucher were one, but there are things which need to happen in Braze before this can be removed)
• digitalvoucher
• guardianweekly
• digipack

... each of which conforms to the TS type ProductType which has a number of mandatory fields (e.g. productTitle, urlPart etc.) plus some optional fields (such as cancellation: CancellationFlowProperties for example, which is an object which codifies the per-product differences within the cancellation flow, and its presence at all determines if there is an online cancellation flow for that product type).

GROUPED_PRODUCT_TYPES map

We have three top level categories of product...

• membership
• contributions
• subscriptions

...which given a ProductDetail from members-data-api we can convert to a GroupedProductType using the mmaCategory (see members-data-api#429).

These GroupedProductTypes are used to specify functionality that is common to all the specific product types beneath it and the TS type has a few extra properties beyond a regular ProductType most notably the mapGroupedToSpecific: (productDetail: ProductDetail) => ProductType property which lets us work out the specific product type from a ProductDetail.

The entries in GROUPED_PRODUCT_TYPES are mapped to the sections we see on the 'Account overview' page.