@preply/marketing-personas-wizard

Overview

This package contains components for Marketing Personas Wizard.

Staging

To verify the package version on node-ssr - go to https://stage40.preply.org/.ssr-release (replace your stage number on link) and on the rest of FE apps type window.__PREPLY_DEPS in console.

Release

Follow this readme

Fixing Renovate PRs

After many PRs executing the same command, I'll be pasting it to be executed from this directory

yarn && cd ../node-ssr && nvm use & yarn && cd ../edu-frontend && nvm use & yarn && cd ../yarn-workspace/packages/shared && nvm use && yarn && yarn push

Usage

yarn add @preply/marketing-personas-wizard -E

Examples

Every Wizard instance needs to be wrapped by <WizardConfig>, which provides the main context to the component.

Each step can be added to the Wizard as a child component, in the order that they will be shown.

Persona Wizard

// Persona Wizard
import { Header, ModalWizard, WizardConfig } from `@preply/marketing-personas-wizard`
<WizardConfig id="persona_wizard" language={language} subject={subject} source={source}>
    <ModalWizard
        {...{ isOpen, onRequestClose, onComplete, OnCompleteScreen: <ThankYou /> }}
    >
        <StudentPersona stepName='StudentGoalPersona'>
    </ModalWizard>
</WizardConfig>

Props

WizardConfig

id: string - unique id of the Wizard instance
language: string - current page language
subject: WizardSubject | null - subject associated to the student intent
currentUserId: number (optional) - current user id
source: StudentGoalSourceEnum (optional) - source according to whom is using the Wizard

ModalWizard

The ModalWizard component extends Wizard, wrapping the content into a pop-up.

isOpen: boolean - flag to control whether modal Wizard is open or not
onComplete: (clientIntent: Maybe) => void - callback for when user completes the Wizard. Parameter clientIntent contains the user's answers.
onRequestClose: (clientIntent?: Maybe) => void - callback for when user requests to close the modal. Parameter clientIntent is optional.
OnCompleteScreen: JSX.Element (optional) - component to be shown once Wizard is completed.
preventClosing: boolean (optional) - if true prevents any manner of closing the modal, such as hitting the ESC key or clicking outside of the modal, also hides the cross x button that closes the modal.

WizardSubject

Prop Types

    {
      "id": number,                # subject id
      "alias": "string",            # subject alias
      "translatedAlias": "string",  # subject translated alias
      "translatedName": "string",   # subject translated name
      "languageCode": "string",     # subject language code
    }

Example

{
    "id": 1,
    "alias": "english",
    "translatedAlias": "angliyskogo",
    "translatedName": "Английский язык",
    "languageCode": "en"
}

StepConfigValues

Props

```javascript
    interface StepConfigValues {
        clientIntent?: Maybe<ClientIntentNode>;
        clientIntentData?: Maybe<ClientIntentNode>;
        clientIntentId?: number;
        currentStepIndex?: number;
        totalStepsCount?: number;
        allowSkip?: boolean;
        isEditMode?: boolean;
        autoSubmit?: boolean;
        hideNavigation?: boolean;
        hideNavigationNext?: boolean;
        hideNavigationPrev?: boolean;
        required?: boolean;
        hideIfPropertyExists?: string;
        wizardLayout?: WizardLayout;
        preventClosing?: boolean;
        onNext?(clientIntent?: ClientIntentNode): void;
        onPrevious?(clientIntent?: ClientIntentNode): void;
        onCancelEdit?(clientIntent?: ClientIntentNode): void;
        onConfirmEdit?(clientIntent?: ClientIntentNode): void;
        onRequestClose?(stepId: string, timeOnStep: number): void;
        onRequestSkip?(stepId: string, timeOnStep: number): void;
    }
```

Steps

PersonalisedCurrentLevel

    {
        "stepName": "CurrentLevel",
        "showNeedHelpButton": boolean,
        "onNeedHelpClick": (e: React.MouseEvent) => {},
        ...StepConfigValues
    }

Example

<PersonalisedCurrentLevel
    hideIfPropertyExists="currentLevel"
    stepName="CurrentLevel"
    showNeedHelpButton
    onNeedHelpClick={(e: React.MouseEvent) => {
        // Callback action body
    }}
/>

Styles

This package uses LESS to create stylesheets, in order to allow compatibility with server-side rendering.

i18n

1. Navigate to TransMaster
2. Execute Rebuild Last
3. Navigate to Preply space in Crowdin and filter by the ticket number, e.g. CRMP-123

TODO

• [ ] Do not use global API_HOST
• [ ] Full-screen Wizard - this code was implemented to support both modal and full-screen formats of the Wizard, but since we are currently only using the modal version, full-screen layout has not been implemented yet.