Set Up

Sync Data from MDM

The first change from our current implementation is to expect all nutrition info to come from MDM. Instead of calculating a per-weight or per-volume value for a given nutrient, that data will be stored in Sanity and will come directly from MDM. How the data is synced is outside the scope of this design review.

The relevant part to understand is that there will now be a row of data keyed by calories and a new row of data keyed by caloriesPer100. If the app is configured to show a table of "Per 100g/100ml" values, it will source that information from the new rows of data with a key like caloriesPer100.

New Sanity Schemas

The following subsections will roughly describe new schemas to support Nutrition 2.0. Keep in mind that the goal of the new configuration will be to give franchisee owners the ability to configure nutrition information in a way that meets legal requirements in their country.

Nutrition Feature

The nutrition 2.0 configuration object will live in a feature singleton. Using a feature singleton makes it easy to cache the information and manage the state.

The singleton will roughly look like:

{
  title: 'Feature Nutrition 2.0',
  name: 'featureNutrition2.0',
  description: 'App-wide nutrition information configuration',
  type: 'document',
  fields: [
    {
      name: 'nutritionTables',
      title: 'Nutrition Tables',
      description: 'The list of tables that contain per-item nutrition information',
      type: 'array',
      of: [{ type: 'nutritionTable' }],
    }
  ]
}

Nutrition Table

In the UK, the nutrition info modal displays two tables: "Per serving" and "Per 100g or ml". In the US, we only display per-serving nutrition info. We want to support one or more tables. Each table will be represented by an object that looks like this:

{
  title: 'Nutrition Table',
  name: 'nutritionTable',
  description: 'Nutrition items (or groups of nutrition items) to show in a given nutrition table',
  type: 'object',
  fields: [
    {
      title: 'Title',
      description: 'The title of the nutrition table, e.g. Per Serving',
      name: 'title',
      type: 'localeString',
      validation: (Rule) => Rule.required(),
    },
    {
      title: 'Items',
      description: 'The items or groups of items that will be shown the table',
      name: 'items',
      type: 'array',
      of: [{ type: 'nutritionItemGroup' }, { type: 'nutritionItem' }],
      validation: (Rule) => Rule.required().min(1),
    }
  ]
}

Nutrition Item Group

We need a way to tell the UI that items should be grouped together. Imagine a UI like:

Fat             12g
  Trans Fat      2g
  Saturated Fat 10g

In this case, we want Trans and Saturated Fats to be grouped visually under the Fat item. This is where Nutrition Item Group comes in. It will have an object that looks like:

Nutrition Item

The final piece of the puzzle is the Nutrition Item. This schema must support:

displaying additional nutrition items side-by-side
localizing units
localizing names

The schema will look like:

Franchisee Knowledge Base

Feature Nutrition Schema