@lightspeed/cirrus-nps

Nps

The NPS component allows you to display a small pop-up window that asks user's to rate a particular subject.

There is no actual call to an API done, you'll need to integrate that yourself!

Installation

First, make sure you have been through the install steps steps required to add Flame in your application. Although it's not required to have Flame installed to use Logo, you will need to install its peer dependencies.

If using Yarn:

yarn add @lightspeed/cirrus-nps

Or using npm:

npm i -S @lightspeed/cirrus-nps

React Component

Props

Prop	Type	Description
onSubmit	(score: number, message: string) => void	Callback function invoked on submit. It receives the user inputted score and message as parameters.
onIgnore	() => void	Callback that is invoked when the "ignore" button is clicked.
translations	Object	The translation object. By default, an english version is bundled. You may of course use your own sets of translations. See further below for an example of the translation object.

Example

import * as React from 'react';
import { Nps } from '@lightspeed/cirrus-nps';

const myTranslations = {
  // Insert translations here...
};

const MyComponent: React.FC = () => (
  <div>
    <Nps
      onIgnore={() => {
        console.log('The person chose to ignore the NPS');
      }}
      onSubmit={(score, message) => {
        console.log('submitting:', score, message);
      }}
      translations={myTranslations}
    />
  </div>
);

export default MyComponent;

Translation Object

The translation object has the following shape:

interface Translation {
  NPS_SUBJECT: string;
  NOT_NOW: string;
  ZERO_VERY_UNSATISFIED: string;
  TEN_VERY_SATISFIED: string;
  CHANGE_YOUR_ANSWER: string;
  SUBMIT: string;
  REASONING_FOR_SCORE: string | (score: number) => void;
  THANK_YOU_MESSAGE: string;
}

Since REASONING_FOR_SCORE is dynamic, you may input either a static string or a function that generates a string.

Here is an example implementation of the translation object.

const translation: Translation = {
  NPS_SUBJECT: 'How likely are you to recommend "Lightspeed" to a friend in the retail industry?',
  NOT_NOW: 'Not now',
  ZERO_VERY_UNSATISFIED: 'Not likely',
  TEN_VERY_SATISFIED: 'Very likely',
  CHANGE_YOUR_ANSWER: 'Change your answer',
  SUBMIT: 'Submit',
  THANK_YOU_MESSAGE: 'Thanks for your feedback!',
  REASONING_FOR_SCORE: (score: any) => `Tell us a bit more about why you chose ${score}?`,
};

A defaultTranslation object is provided, should you choose to override only certain properties...

import * as React from 'react';
import { Nps, defaultTranslation } from '@lightspeed/cirrus-nps';

const myTranslations = {
  ...defaultTranslation,
  NPS_SUBJECT: 'How do you like the new emoji pricing feature?',
};

const MyComponent: React.FC = () => (
  <div>
    <Nps
      translations={myTranslations}
      onIgnore={() => {
        /* insert some functionality here */
      }}
      onSubmit={(score, message) => {
        /* insert some functionality here */
      }}
    />
  </div>
);

export default MyComponent;