Smart FAQ
App demo: https://kiwicom.github.io/smart-faq/
Clone the repo git clone git@github.com:kiwicom/smart-faq.git
Install all the dependencies with yarn
In order to be able to login one requires a .env
file at the root of the codebase, with the following content:
GRAPHQL_URI=XXXXXXXX
KIWILOGIN_USER=XXXXXXXX
KIWILOGIN_USER
is only needed for this standalone app to work
Where the value of GRAPHQL_URI
and KIWILOGIN_USER
will be provided privately.
Webpack and particularly dotenv-webpack
package will take care of importing the variables from .env
to your resulting build app or dev-server.
To serve the app on your local environment, run:
yarn start
0.0.0.0:8080 will open automatically in your browser, but you can also open localhost:8080 to view it.
If you would like to view the app on a mobile device, you can do it by visiting {your_local_ip_address}:8080
We use this commit message convention: 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.
- Check out nitrolib docs for more info.
- DOCs for PhraseApp - where the translations are stored for translators
- List of all supported languages is defined by file
src/translations/langInfos.js
import Trans from "@kiwicom/nitro/lib/components/Text";
From Nitrolib docs:
Make sure to wrap translation keys in the global
__
function!
Props:
type Props = {
t: string, // the translation key
values?: Values, // a map of placeholders and their values
html?: boolean, // make it 'true' if your translation string contains HTML elements
};
Example:
const Submit = () => (
<Button>
<Trans t={__("smartfaq.submit_button")} />
</Button>
);
- Download latest translations from PhraseApp via
yarn translations:download
. - Add your keys to
src/translations/enKeys.json
json file. - Upload translations to PhraseApp via
yarn translations:upload
. - Post it on #web-translations, mentioning all keys that needs to be translated.
Use styled-components
' ThemeProvider
for @kiwicom/orbit-components
theming to work. Example:
import { ThemeProvider } from "styled-components";
import { getTokens } from "@kiwicom/orbit-components";
import SmartFAQ from "@kiwicom/smart-faq";
const App = () => (
<ThemeProvider theme={{ orbit: getTokens(/* color palette */) }}>
<SmartFAQ />
</ThemeProvider>
);
See their docs for more info.
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:
- Start smart-faq via
yarn start
if you still don't have it running. - Start up cypress app with
yarn cypress:open
- 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
Test script test-ci
is run on each push
- after each push a circleci
test-ci-and-surge-deploy
script is run - it generates a live preview link on surge ie.
https://smartfaq-branch-name.surge.sh
- After every merge into master, standalone version of this project is published using Github Pages
- Inspired by repository Circle CI and Github Pages and further described on Github
- Deployed on https://kiwicom.github.io/smart-faq/
Done automatically by semantic-release.
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
- 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"}
- Login Strategies:
- Kiwi:
{ action: "clickOnLogin", loginType: "kiwi"}
- Google:
{ action: "clickOnLogin", loginType: "google"}
- Facebook:
{ action: "clickOnLogin", loginType: "facebook"}
- Kiwi:
- 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}
- When smartFAQ is opened:
- Possible payloads
- 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 Baggage button is clicked:
{ action: "clickOnBaggageButton" }
- When Kiwi.com Guarantee chat can be used for customer booking:
{ action: "chatEnabled" }
- When Kiwi.com Guarantee chat is openend by a customer:
{ action: "chatOpened" }
- When Kiwi.com Guarantee chat button is displayed because it matches the criteria to show it:
{ action: "chatDisplayed" }
- Select another booking is clicked:
- 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" }
- Click on category: