# smart-faq

Smart FAQ

## DOCs

**Visit our [Wiki](https://kiwi.wiki/frontend/smart-faq/)** for all necessary info.

**Live DEMO: [current SmartFAQ master + FE booking master](https://master.fe.staging.kiwi.com/en/account?SmartFAQAppBranch=branch-master&ContactFormChatAppBranch=branch-master)**

## Commit message convention

We use this commit message convention: [https://gist.github.com/stephenparish/9941e89d80e2bc58a153#format-of-the-commit-message](https://gist.github.com/stephenparish/9941e89d80e2bc58a153#format-of-the-commit-message)

A git hook will verify your commit message and point out any issues with it.

To make following this convention easier, there's some tooling available. Use

```
git cz
```

to compose your commit message using an interactive command line tool.

To access `git cz` you need to first install commitizen globally using:

```
yarn global add commitizen
```

If you squash your commits when merging a pull request, compose the message of
the squashed commit also according to the convention.

## Theming

Use `styled-components`' `ThemeProvider` for `@kiwicom/orbit-components` theming to work. Example:

```js
import { ThemeProvider } from "styled-components";
import { getTokens } from "@kiwicom/orbit-components";
import SmartFAQApp from "@kiwicom/smart-faq";

const SmartFAQ = () => (
  <ThemeProvider theme={{ orbit: getTokens(/* color palette */) }}>
    <SmartFAQApp />
  </ThemeProvider>
);
```

See their [docs](https://orbit.kiwi/guidelines/theming/) for more info.

## Links to a specific article

- Check first the implementation in `frontend/frontend`, file `src/common/modules/SmartFAQ/services/SmartFAQDuck.js`.
- If the article you want to link to is not present in `articles`, add it to the list.
    - `originalId` is numeric id of article in Knowledgebase
    - `id` is GraphQL opaque id, if unknown, you can get it e.g. by searching for article:
  
```graphql
{
  allFAQs(search: "Title of your article") {
    edges {
      node {
        id
        originalId
        title
      }
    }
  }
}
```

- verify again that article is reachable by FAQs:

```graphql
{
  FAQArticle(id: ID!) {
    id
    originalId
    title
  }
}
```

## Cypress test

In order to be able to run the tests, you need to add the following environment variables to the `.env` file:

```
TEST_USER_EMAIL=XXXXXXXX
TEST_USER_PASSWORD=XXXXXXXX
```

Steps to run Cypress tests:

1.  Start smart-faq via `yarn start` if you still don't have it running.
2.  Start up cypress app with `yarn cypress:open`
3.  Run tests with `yarn cypress:run`

_Note_: If you need to change the baseUrl, you can either change it on `cypress.json` or
set the `CYPRESS_baseUrl` variable before running tests eg. `CYPRESS_baseUrl=http://mybaseUrl:myPort yarn cypress:run` . [More info](https://docs.cypress.io/guides/guides/environment-variables.html)

### Surge Deploy

- Every merge request, `master` and `release` branches are deployed to surge: https://smartfaq-branch-name.surge.sh`

### Release

- **never** use an option to squash commits in Gitlab when creating or merging MR
- release to npm repository is done automatically by [semantic-release](https://github.com/semantic-release/semantic-release) upon changes in `master` branch.
- commits are automatically tagged by semantic release, Gitlab CI then builds all the Apps and uploads them to AWS S3. 
- script is then available on the URL like this: `https://www.kiwi.com/scripts/smartFAQ/${TAG_NAME}/{ProjectName}.js`, e.g. SmartFAQApp.js for SmartFAQs
- main frontend repository then can refer to these urls to download the script in specific version
- Switching between versions, even on production, can be done then by splitster, slack channel #plz-splitster-config
- splitster version settings can be changed on fly by query string param `?splitster_SMART_FAQ_VERSION={version}`
- the whole URL to SmartFAQ apps can be overridden by query param `${AppName}URL`, e.g. `?SmartFAQAppURL=https://...` - ideal for testing SmartFAQ MRs 

## Analytics

These are the events being recorded. Note that additionally to these attributes frontend is also sending additional data such as:

- `browser`
- `device`
- `location`: origin URL.
- `os`: operating system

#### Eventname "smartFAQ"

- Possible payloads
  - When smartFAQ is opened: `{ action: "clickOnHelp", loggedIn: true | false}`
  - When smartFAQ is closed: `{ action: "close", loggedIn: true | false, timeOpen: "number of seconds open"}`
  - Downloading boarding pass: `{ action: "downloadBoardingPass" }`
  - "More info" in boarding pass section is clicked: `{ action: "clickOnMoreInfoBoarding" }`
  - When one of the two intro buttons is clicked: `{ action: "clickOnIntroButton", haveBooking: true | false}`

#### Eventname "smartFAQBookingOverview"

- Possible payloads
  - Booking is loaded in SmartFAQ `{ action: "bookingLoaded", timeToDeparture: hoursToFirstDeparture, timetoSegment: hoursToNearestDeparture }`
  - Select another booking is clicked: `{ action: "selectAnotherBooking"}`
  - Manage my booking is clicked: `{ action: "goToMMB"}`
  - Article is clicked: `{ action: "articleClicked", queriesBeforeClick:"Number of searches the user made before clicking on an article"}`
  - Full FAQ link is clicked: `{ action: "goToOldHelp"}`
  - User clicks sign out: `{ action: "signOut"}`
  - Flight accordion is opened: `{ action: "openFlightCard"}`
  - When smartFAQ is closed: `{ action: "close", timeOpen: "number of seconds open"}`
  - Every search(with a debounce of 250ms by default): `{ action: "search", searchedText: "query being searched"}`
  - When eTicket is clicked: `{ action: "clickOnEticket" }`
  - When BoardingPasses button is clicked: `{ action: "clickOnBoardingPassButton" }`
  - When Add Insurance button is clicked: `{ action: "addInsurance" }`
  - When Baggage button is clicked: `{ action: "clickOnBaggageButton" }`
  - When Kiwi.com Guarantee chat can be used for customer booking: `{ action: "chatEnabled", , where: "smartFAQ" | "contactForm" }`
  - When Kiwi.com Guarantee chat is openend by a customer: `{ action: "chatOpened", where: "smartFAQ" | "contactForm" }`
  - When Kiwi.com Guarantee chat button is displayed because it matches the criteria to show it: `{ action: "chatDisplayed", where: "smartFAQ" | "contactForm" }`

#### Eventname "smartFAQCategories"

- Possible payloads
  - Click on category: `{ action: "clickOnCategory", categoryId:"id of category", categoryName:"category title"}`
  - Enter article: `{ action: "clickOnArticle", articleId:"id of article", articleName:"article title"}`
  - Close article: `{ action: "articleClose", articleId:"id of article", articleName:"article title", timeOpen: "time it remained open"}`
  - Vote on article: `{ action: "upVote" | "downVote" }`
  - Submit feedback on article: `{ action: "submitFeedback", comment: "dontLike" | "confusing" | "notAccurate" | "doesntAnswer" }`
  - Daily feedback comment limit reached: `{ action: "commentLimitReached" }`