ClassList 
The Class List component displays a list of language classes offered at a Berlitz language center. Users can request more info about a class or register immediately by adding it to their shopping cart. Content editors can optionally provide promo messages to display below each session. If a session is sold out, the "Request Info" CTA is removed and the "Add to Cart" CTA is disabled.
Installation
yarn add @berlitz/class-list
Props
| Prop | Type | Required | Default | Notes |
|---|---|---|---|---|
| classData | Array of objects | X | Class and session data to display | |
| location | String | Location name to display to user (e.g. "New York City Language Center") | ||
| salesforceLocation | String | Location name as stored in Salesforce (e.g. "Rockefeller Center") | ||
| productId | String | Product ID for eCommerce | ||
| handleRequestInfo | Func | Function to execute when user requests info about a class | ||
| addToCartLink | Func | Function to execute when user wants to register for a class | ||
| requestInfoLabel | String | Label for CTA to request info about a class | ||
| addToCartLabel | String | Label for CTA to register for a class | ||
| soldOutLabel | String | Label for disabled CTA when a class is sold out | ||
| languageColLabel | String | X | Label for language column header | |
| levelColLabel | String | X | Label for level column header | |
| daysColLabel | String | X | Label for days column header | |
| classTimesColLabel | String | X | Label for class times column header | |
| sessionsColLabel | String | X | Label for sessions column header |
Usage
import React from 'react'
import ClassList from '@berlitz/class-list'
const MyApp = () => (
<ClassList
classData={data}
location="New York City Language Center"
salesforceLocation="Rockefeller Center"
productId="289"
handleRequestInfo={handleRequestInfo}
addToCartLink={addToCartLink}
requestInfoLabel="Request Info"
addToCartLabel="Register"
soldOutLabel="Sold Out"
languageColLabel="Language"
levelColLabel="Level"
daysColLabel="Days"
classTimesColLabel="Class Times"
sessionsColLabel="Sessions"
/>
)