Quiz UI

This is the UI library for rendering ThirtyMadison quizzes

Note - This library has a dependency on the react-intl package which does not work out of the box with iOS 13.X. Polyfills are needed, see Polyfills section below

Installing

yarn add @thirtymadison/quiz-ui

Usage

import { QuizRoot, TakeQuiz, createQuizTheme } from "@thirtymadison/quiz-ui"

export const SomeComponent = () => (
  <QuizRoot apiUrl="graph/api/url" bucketUrl="bucket/url" theme={createQuizTheme(...)}>
    <TakeQuiz scope="evens" name="sample" onError={(error) => {}} onDidComplete={(quizResponse) => {}} />
  </QuizRoot>
)

<QuizRoot/> props

| name | required | description | | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | apiUrl | true | url of the graph api | | bucketUrl | true | url of the s3 bucket containing quizzes. | | theme | true | a theme object. use the createQuizTheme function to create this. The argument types define what is supported. all values should be styled-system compatible |

<TakeQuiz/> props

| name | type | required | description | | ---------------- | ----------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | scope | string | true | The brand scope (keeps/cove/evens/picnic) | | name | string | true | The identifier of the quiz to take | | version | number | "latest" | false | The quiz version to take. Defaults to the latest version | | persist | boolean | false | Determines whether or not to persist answers as the quiz progresses. Defaults to true | | context | AnyObject | false | An object of arbitrary data to use in quiz config Conditions | | onError | (error) => void | true | A callback to be notified of errors | | onDidComplete | (response: QuizResponse \| CompleteQuizResponseParams) => Promise<string \| void> | true | This will be invoked once the user reaches the end of the quiz. Receives the quizResponse object. If the user session is anonymous, this object won't have an id as it won't be saved to the db. If persist is false, this prop can be used to persist the completed payload to the database | | onDidLoad | (data: { quizResponse?: QuizResponse; meta: QuizMeta }) => void | false | A callback that will be invoked once the quiz has been bootstrapped and is ready for user interaction. If the user is resuming a draft quiz response, that quizResponse will be accessible data. meta has configName, configVersion, and the current progress of the quiz response | | onDidCaptureLead | (data: DidAnswerData) => Promise<number \| string \| void> | false | If the quiz can be started by an anonymous user and has lead capture steps, this callback will be invoked anytime lead information is completed successfully. If the callback returns a promise resolving to a user id (number), the quiz will begin to persist the quizResponse for the provided userId to the database. If the callback returns a promise resolving to a string, the string will be used as an error message. | | onDidAnswer | (data: DidAnswerData) => Promise<string \| void> \| void | false | Invoked after each step the user completes. If persist is false, this prop can be used to persist quiz questions to the database. If the callback returns a promise resolving to a string, that string will be used as an error message. | | onDidSave | (quizResponse: QuizResponse) => void | false | Invoked with the updated quizResponse after answers are persisted |

Recipes

The <QuizRoot/> and some required props are left out of these examples for brevity.

Kick off other actions such as journey transitions when the user starts the quiz

Because each answer will be persisted to the db, onDidSave will be called first when a record has been created

const SomeComponent = () => {
  const doOtherThing = (quizResponse) => {
    // start journey transition, etc.
  }

  return <TakeQuiz onDidSave={doOtherThing} />
}

Lead capture when quiz can be initiated anonymously

const SomeComponent = () => {
  const leadRef = useRef({})

  return (
    <TakeQuiz
      onDidCaptureLead={async (field, value) => {
        leadRef.current[field] = value

        if (leadRef.current.email && leadRef.current.firstName && leadRef.current.lastName) {
          const { data } = await createUser({ variables: { user: { ...leadRef.current, eCommerceUser: true } } })
          return data?.createUser.id
        }
        return
      }}
    />
  )
}

Hide until ready

const SomeComponent = () => {
  const [quizReady, setQuizReady] = useState(false)

  return (
    <>
      {!quizReady && <CoolLoadingScreen />}
      <Box hidden={!quizReady}>
        <TakeQuiz onDidLoad={() => setQuizReady(true)} />
      </Box>
    </>
  )
}

Polyfills

See the docs here and here

Install the polyfills needed:

yarn add @formatjs/intl-getcanonicallocales @formatjs/intl-locale

Import the polyfills somewhere at the root of your application, such as index.tsx or app.tsx

import "@formatjs/intl-locale/polyfill"
import "@formatjs/intl-getcanonicallocales/polyfill"