Components

Owned by Artiaga, Patricia
Oct 01, 2021
4 min read

Overview

The Components folder is meant to hold a 1:1 mapping of all the React frontend components in the app. This section is universal so all components will show for all brands and regions. Components are best used for major components of the app that can be generalizable for multiple brands & regions, need to be shown in multiple places in the app, and need to be dynamic.

How to Use

Components are like individual widgets you can set up so they are available in the Feature section. Creating a component alone will not make it appear anywhere on the app. After you create a component with all the required fields, you will need to reference the component in the Feature pages where you want it to appear.

If any of your components was built under a LaunchDarkly flag, you will need to make sure the corresponding flag is turned on in order to see the component in the Feature page it’s referred on.

Below is an example of two components (COVID-19 Alert and a Marketing Tile Group) being shown in the Home Page. The Feature Home Page section contains references to the two components that are stored in the Components folder. See the Features guide for more detail on this section.

To create a new component in a predefined component type, go to the folder of the type you want to create and click the + on the top right. This will bring up the predefined fields that you will need to complete to create the component. Different components can be referenced in different places in the app or can be defined in the Feature references to only show to certain user groups. Below is an example of Marketing Tile Groups which are only shown on the homepage, but there are four versions because we show different marketing tiles depending on whether users are on web or app and logged in or not.

Examples

Alerts

Alerts are an example of a simple, customizable front end component for important messages.

 

Marketing Tiles

Marketing tiles are individual marketing prompts that hold an image, text, and Call to Action

For more details, see

Marketing Tile Groups

Marketing Tile Groups are a block of marketing tiles that are grouped together so they can be referenced as a block. This is useful when you have a set of marketing tiles that should always be shown together.

For more details, see

Main Hero

This is for the hero banner images on the home page

 

 

Offers Section

Some components that were added onto existing sections of the app may appear with only a name field since they are only wrappers holding the embedded content. Offers section is one example of this

App Downloads

App Downloads are used for prompts to download the app. These should only be shown to web users.

 

Developer Notes for Setting Up Components

Make sure to complete both steps for any new components. Any sanity fields and their required configuration will need to be defined when setting up the component.

Sanity Implementation

  1. Create the component document `cms/schemas/components/documents/yourNewComponent.js

  2. Add your file to cms/schemas/schema.js

  3. Add your component to the array of available components as a reference in cms/schemas/components/documents/homePageConfiguration.jse.g.

    { title: 'Referenced New Component', name: 'yourNewComponent', description: ( <span> Your New Component to be added here must be created first in the{' '} <Link href={'/desk/components;yourNewComponent'}>Your New Component</Link> </span> ), type: 'reference', to: [{ type: 'mainHero' }], },

For an example look at cms/schemas/components/documents/brazeContentCards.js

Front End implementation

  1. After updating Sanity run (to update frontend/src/generated/sanity-graphql.tsx)

    cd frontend yarn apollo:generate

  2. Create a component in the folder /features/component/recent-items that wraps component/your-component

  3. Add your component to frontend/src/components/features/home-page/home-page.view.tsx switch statement

For an example look at frontend/src/components/features/components/braze-content-cards/index.tsx

Â