# Customer Satisfaction Input

> **Warning**
> This component is currently [an experimental version](https://github.com/springernature/frontend-elements-docs/blob/main/user-guide/versioning.md#component-state). Please do not use this component on production at this time.

The Customer Satisfaction Input component is the frontend for an overall solution for gathering customer satisfaction feedback, the documentation for which can be found here: https://customer-satisfaction-survey.public.springernature.app/docs/introduction.

The component comprises a set of 5 pictographic radio inputs used to collect a satisfaction score from our customers. The user is able to submit one of the following scores: Awful, Bad, OK, Good, Great.

It is a JavaScript dependent component. When a user interacts with the component an event is dispatched to `window.dataLayer` allowing customer satisfaction score data and context data scraped from the page to be sent to Google Tag Manager and Google Cloud Big Query.

## Usage
This documents how to implement this component on your website. If your project does not use Elements you can still use this component, see refer to the `Projects that do not use Elements` section below.

> **Warning**
> This component violates [the design system rule](https://github.com/springernature/frontend-elements-docs/blob/main/user-guide/dependencies.md#dependencies) that states a component must not have a dependency on another component. Please do not follow this pattern in any other component you are building.

### Sass
Include the necessary Sass files in your project in this order (if they are not already there!):
```sass
@import '@springernature/elements/themes/[YOUR BRAND HERE]/scss/';
@import '@springernature/elements/components/forms/';
@import '@springernature/elements/components/customer-satisfaction-input/';
@import '@springernature/elements/themes/springernature/scss/utilities/hiding.scss';
@import '@springernature/elements/themes/springernature/scss/utilities/spacing.scss';
```

### JavaScript
Include the component JavaScript in your application bundle:
```js
import {customerSatisfactionInput} from '@springernature/elements/components/customer-satisfaction-input/js/';

customerSatisfactionInput();
```

### HTML
Consume the component's Handlebars view template found in the `/view/` directory

If you are unable to consume view templates in your project you can still use this component. Use the component demo to generate the HTML. This can be done as follows:

1. Edit the JSON data file found at `/demo/context.json` and define the data you need for your instance (see below Data section)
2. Run `npm run demo -- -p global-customer-satisfaction-input`
3. Copy the `<aside>` and its contents from the generated demo file at `/demo/dist/index.html` and paste it into the relevant location in your project

### Data
A data model is required to render the component's view template. An example of the data model can be seen in the component's demo. This can be found at `/demo/context.json`.

> **Note**
> Some of the data for this component is considered static, should be copied as defined in this document and should **not** be edited. This concerns all data that is passed to the Forms component. See below section on Forms Data.

#### Configuring the component
The component can be configured using the following data properties:

**userJourneys** (Mandatory)

A string that represents the user journeys that are associated with the placement of the component.

Currently, only the following values are permissible:
* `get prepared to publish`
* `get published`
* `discover relevant scholarly content`
* `manage my editorial work`
* `manage my peer reviews`
* `promote my work`
* `evaluate the performance of scholarly work`
* `manage an apc`
* `buy something`
* `access what i am entitled to`
* `librarian get the information i need`
* `librarian assess the performance and use of my portfolio`
* `librarian buy something`

> **Note**
> Permissible values are managed in the component's javascript file found at: `/js/customer-satisfaction-input.js`. Please do not edit these without consultation with UXD (Niamh Walsh at the time of writing).

Please refer to our guide on [choosing associated user journeys](https://customer-satisfaction-survey.public.springernature.app/docs/getting-started/choosing-associated-user-journeys).

You may define multiple user journeys separated by commas e.g. `"userJourneys":"get published, content discovery"`. If a non-permissible value is entered an error will be logged to the browser console and data will not be sent to the Big Query database. Case handling has been implemented, ensuring any value is converted to lowercase prior to data being sent to Big Query.

**headingLevel** (Mandatory)

A string that represents the heading level number, e.g. `"headingLevel":"3"`. Please ensure the heading level defined is correct for the placement of the component on the page.

**questionUrl** (Optional)

A string that defines the link href for any survey you wish to link to after a user has submitted a customer satisfaction score, e.g. `"questionUrl": "https://www.surveymonkey.com/r/97W8JW7"`. A link will only display if both questionUrl and questionText have been defined.

**questionText** (Optional)

A string that defines the link text for any survey you wish to link to after a user has submitted a customer satisfaction score, e.g. `"questionText": "Tell us why"`. A link will only display if both questionUrl and questionText have been defined.

**additionalInfo** (Optional)

A string that can be used to define additional data that you would like to be captured with the user's customer satisfaction score. This property aims to future-proof this component to ensure we can capture additional meaning if needed.

#### Forms Data (Mandatory)

This component has a dependency on another component: [Forms](https://github.com/springernature/elements/components/forms). See [package.json](https://github.com/springernature/elements/components/customer-satisfaction-input/package.json#L10) which defines the version of Forms that this component is dependent on.

The view template for Customer Satisfaction Input includes the Forms fieldset partial which requires a data model suitable for Forms. The data to support the Forms partial is considered static data. This can be found in `/demo/context.json` as the JSON object `"globalFormData"` and should be defined with the same names, structure and values in your project. The data is also provided [here in JSON](https://gist.github.com/benjclark/8c77fce1ab83a1c3fd8b9ed21be9f366) for your convenience.


> **Warning**
> These approaches are **not** preferred and should only be used in exceptional circumstances where Elements cannot be used in your application. If you use either of these approaches you **must** ensure you have adequate means of staying up to date with any new version releases for this component.

