@berlitz/class-list NPM

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

@berlitz/button @berlitz/card @berlitz/globals @berlitz/spacer @berlitz/streamline-icons date-fns react-styled-flexboxgrid styled-components-rtl

@infinitebrahmanuniverse/nolb-_ber @everything-registry/sub-chunk-121

2 months ago

3 months ago

8 months ago

8 months ago

7 months ago