@berlitz/class-list

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"
    />
)