npm package: @lightspeed/cirrus-nps
Description: Lightspeed Nps component
Author: Lightspeed
Latest version: 1.0.4

# 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](https://github.com/lightspeed/flame#installing) 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](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-nps
```

Or using [npm](https://www.npmjs.com/):

```sh
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

```tsx
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:

```tsx
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.

```tsx
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...

```tsx
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;
```