# Cockpit Notifications

<center>
  <img src="./docs/cockpit.svg" width="462" height="100" style="background-color: white; border-radius: 5px;"/>
</center>

---

## Builds Status

#### Master:

[![pipeline status](https://gitlab.com/laborit/webmotors-cockpit-notifications-client/badges/master/pipeline.svg)](https://gitlab.com/laborit/webmotors-cockpit-notifications-client/commits/master)

#### Development:

[![pipeline status](https://gitlab.com/laborit/webmotors-cockpit-notifications-client/badges/develop/pipeline.svg)](https://gitlab.com/laborit/webmotors-cockpit-notifications-client/commits/develop)

## Test Coverage

#### Master:

[![coverage report](https://gitlab.com/laborit/webmotors-cockpit-notifications-client/badges/master/coverage.svg)](https://gitlab.com/laborit/webmotors-cockpit-notifications-client/commits/master)

#### Development:

[![coverage report](https://gitlab.com/laborit/webmotors-cockpit-notifications-client/badges/develop/coverage.svg)](https://gitlab.com/laborit/webmotors-cockpit-notifications-client/commits/develop)

---

## About

Receive and distribute notifications across the network of retailers using the WM Cockpit suite of products. These products include:

  - [Cockpit (Root)](https://cockpit.webmotors.com.br)

  - [Gearbox](https://gb.webmotors.com.br/)

  - [CRM](https://crm.webmotors.com.br)

  - [Comprar Veículos](https://comprarveiculos.webmotors.com.br)

  - [Estoque](https://estoque.webmotors.com.br)

  - [Mais Fidelidade](https://maisfidelidade.webmotors.com.br/)

  - [AutoGuru](https://autoguru.webmotors.com.br)

  - [Universidade](https://universidade.webmotors.com.br)

### Who are the end users?

  - Tenants who have access to the Cockpit. (Only receive messages / notifications)

  - WebMotors administrators (Create messages / notifications)

  - Systems integrated via HTTP API.

---

### Requirements

- nvm v0.35.0 ([install details](https://github.com/nvm-sh/nvm#installation-and-update))

- Node v12.17.0 ([install details](https://github.com/nvm-sh/nvm#nvmrc))

- npm v6.14.4

---

### Stack

- [Node](https://nodejs.org/en/)

- [Webpack](https://webpack.js.org/)

- [Rollup](https://rollupjs.org/guide/en/)

- [Storybook](https://storybook.js.org/)

- [ES6 (Babel)](https://babeljs.io/)

- [React](https://reactjs.org/)

- [PostCSS](https://postcss.org/) / [SASS](https://sass-guidelin.es/pt/)

- [Jest](https://jestjs.io/en/) / [Enzyme](https://enzymejs.github.io/enzyme/) / [Chai](https://www.chaijs.com/)

- [Editorconfig](https://editorconfig.org/)

- [Prettier](https://prettier.io)

- [ESLint](https://eslint.org/)

---

### Peer Dependencies

- `react`
- `react-dom`
- `prop-types`

---


## Installation

```bash
$ npm install @laborit-dev/cockpit-notifications --save
```

---

## Usage

Please, refer to the main file [`USAGE.md`](./USAGE.md) to instructions on how to use this library on your project.

---

## Local development setup

This application is integrate with [`WM Cockpit React Library`](https://bitbucket.org/webmotors/webmotors.react.pj/src/master/), so we are required to run this application on a subdomain of `*.webmotors.com.br` so the authentication integration can properly work.

This can be achived by editing your `/etc/hosts` file and including:

```
127.0.0.1  cdn-dev.webmotors.com.br
```

You can use [nvm](https://github.com/nvm-sh/nvm) to install the current NodeJS version utilized on this project.

```bash
$ git clone git@gitlab.com:laborit/webmotors-cockpit-notifications-client.git
$ cd webmotors-cockpit-notifications-client/
$ cp .env.sample .env
$ nvm use # Only if you have nvm installed on your machine
$ npm install
$ npm run build
$ npm run test
$ npm run dev
```

You should be able to access the application at:

- `http://localhost:4000`
- `http://cdn-dev.webmotors.com.br:4000`

---

### Demo Application

You can run a demo application by running `npm run dev` on the root folder of this project. The application will be acessible at `http://localhost:4000`

You should use an `.env` file to set the following environment variables:

Hint: This project includes an `.env.sample` which you can use as start point.

```
- NODE_ENV
- FIREBASE_MESSAGING_SENDER_ID
- FIREBASE_API_KEY
- FIREBASE_PROJECT_ID
- FIREBASE_APP_ID
- FIREBASE_PUBLIC_VAPID_KEY
- BASE_API_URL
```

### Proxy application for development (CORS)

You may encounter [`Cross-Origin Resource Sharing (CORS)`](https://developer.mozilla.org/pt-PT/docs/Web/HTTP/CORS) problems when integrating with the remote HTTP API in your development environment, this is why we provide the command `npm run dev:proxy`

Make sure your `.env` has the following configuration to use the `HK HTTP API` to test in your local `NODE_ENV=development` environment:

```sh
# .env
BASE_PROXY_API_URL='https://hkcomprarveiculos.webmotors.com.br'
BASE_API_URL='http://localhost:4000/api/central-de-notificacao/'
```

Make sure that all `OPTIONS` requests to the local API actually enable CORS:

```
$ npm run dev:proxy
$ curl -vvv -X OPTIONS http://localhost:4000/api/central-de-notificacao/v1/notifications/unread_count

< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Headers: *

{"cors":"enabled"}
```

Now all requests in the demo application at `http://cdn-dev.webmotors.com.br:4000` or `http://localhost:4000` should be able to be perfomed without CORS restrictions.

#### Chrome with Web Security Disabled

Another option that you can use, it's to run your `Chrome Browser` with `Web Security` disabled. **This is not our recommended solution**, but it can be useful at some point when you need to test the application running `npm run dev` (and not `npm run dev:proxy`).

The commands for Linux, Mac, and Windows are the following: [[source]](https://alfilatov.com/posts/run-chrome-without-cors/):


```sh
# Linux
$ google-chrome --disable-web-security --user-data-dir=/tmp/chrome_dev_test
```

```sh
# Mac
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
```

```sh
# Windows 10 or newer
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp
```


---

### Storybook

You can use Storybook to follow and document the library's components, just run:

```bash
$ nvm use # Make sure you're using Node > 10
$ npm run storybook
```

Access it on: `http://localhost:6006`

---

## Code Development

### Required setup on your favorite code editor

First of all, note that we use some formatters/plugins to make sure our codebase is following a very strict standard and patterns.

Before actually writing code, you should install the following on your code editor or IDE:

### EditorConfig

- https://editorconfig.org/ (Supports VSCode, Sublime Text, Vim, Atom and others)

**Why?**

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. Some editors actually support it by default (Ex: RubyMine)

---

### Prettier

- https://prettier.io/ (Supports VSCode, Sublime Text, Vim, Atom and others)

**Why?**

It removes all original styling and ensures that all outputted code conforms to a consistent style.


As you can see, these two tools we make sure our codebase is consistent across all developers, IDE's and operating systems. Make sure you have them properly configurated on your IDE before starting writing code.


### Optional (but recommended) plugins

To make your life easier during code development and testing we recommend the following plugins/extensions to be used on your editor*.

### VSCode Jest

- https://github.com/jest-community/vscode-jest

**Why?**

This extension allows you to quickly run your tests within VSCode, it also show the current code coverage and gives you a lot of auto complete on the intelise.nse

---

### Majestic Jest GUI

- https://github.com/Raathigesh/majestic (Majestic is a GUI for Jest)

This is useful if you want to navigate through our test suite by using an interface, it can useful for better debugging .

 You can simply start it by running:

```
$ npx majestic
```

PS*: Most of us use `VSCode` for Javascript development, some plugins might be supported on every IDE and you could probably look for some equivalent extension to your editor.

---

## Test suite

You can run all automated tests and generate a HTML report by running:

```bash
$ npm run test:coverage
```

This will generate a HTML report in `coverage/index.html` folder.

Open it using:

```bash
# Linux
$ xdg-open coverage/index.html
# Mac
$ open coverage/index.html
# Windows
$ start coverage/index.html
```

If you just want to run the tests but not generate the report, just run:

```bash
$ npm run test
```

---


## Optimizers

### SVGO

```bash
$ npm run optimize:svg
```

This command check all files with `SVGO` using installation is globally `npm install -g svgo`.

## Code Linting

### ESLint

```bash
$ npm run lint
```

This command check all files with `eslint` using the configurations in `.eslintrc` file.

### Prettier

```bash
$ npm run prettier:check
```

This command check all files using `prettier` with the configurations in `.prettierrc` file.

```bash
$ npm run prettier:write
```

This command update all files which are not formatted by `prettier` using the configurations on `.prettierc` file.

---

## Build library and application

### Build library to production

```bash
$ nvm use # Make sure you're using Node > 10
$ npm run build
```

This will generate the following files:

- `dist/index.csj.js` (CommonJS)
- `dist/index.esm.js` (Module/ES)
- `dist/index.js` (Browser/UMD)

---

### Build demo application:

```bash
$ nvm use # Make sure you're using Node > 10
$ npm run build:webpack
```

This will generate a static HTML application in `dist/demo`, the most relevant generated files are:

- `dist/demo/index.html`
- `dist/demo/main.[hash].js`
- `dist/demo/firebase-messaging-sw.js`
- `dist/demo/serviceWorkerEnv.js`

### Build Storybook

```sh
$ nvm use # Make sure you're using Node > 10
$ npm run build-storybook
```

This will generate a static HTML application in `dist/storybook` folder.


---

## Deploy

### NPM

Set the npm token on [Gitlab CI](https://docs.gitlab.com/ee/ci/variables/) using the environment variable `NPM_TOKEN`

PS: Before releasing a new version to `master` branch, make sure you update the version of the release.

### Deploy to production

An automatic deploy will start when any code reaches the `master` branch.

### Deploy to HK/Staging

An automatic deploy will start when any code reaches the `develop` branch.

---

### Gitlab Pages

### Deploy demo application on Gitlab Pages

Every time a commit reaches the `deploy-pages` branch, a new job will start to deploy the demo application to `http://dev-notifications.laborit.com.br/`.

You can start a new deploy anytime by replacing/sending your current branch to Gitlab using:

```bash
$ git push <gitlab_origin> <branch>:deploy-pages
```

---

## Useful references & links

- http://gitlab.com/laborit/webmotors-cockpit-notifications-client/

- https://gitlab.com/laborit/webmotors-notification-api

- https://hkcdn.webmotors.com.br (Demo application hosted on `*.webmotors.com.br`)

- http://dev-notifications.laborit.com.br/ (Demo application)

- https://dev-notifications.laborit.com.br/e619230f5c/coverage/ (Atual code coverage do projeto)

- https://dev-notifications.laborit.com.br/e619230f5c/docs/ (Storybook do projeto)

- https://dev-notifications.laborit.com.br/e619230f5c/stats (Analise de bundle atual do projeto)

- https://drive.google.com/open?id=1c1PIBMtj1bCg2AU4dVedjjcgfYafVivM (Cenários de testes do produto desenvolvidos pela equipe de Q/A da Lab)

- https://projects.invisionapp.com/share/JHUP4ZB523V (Invision com layout do projeto)

- https://www.figma.com/file/2faw2qKFevKxWI7PsIBP0Z/Cockpit-%5BD%5D?node-id=702%3A17441 (Central de Notificações: Projeto Figma)

- https://docs.google.com/presentation/d/16--ReK0nyKn7usS6bn7WkcYfSSbfiCjAUUgXWgggM8o (Apresentação de Produto
do Cockpit Notifications)

- https://glebbahmutov.com/blog/configure-prettier-in-vscode/ (How to configure Prettier on VSCOde)

- https://editorconfig.org/

- https://prettier.io/docs/en/index.html (What is Prettier?)

- https://github.com/Raathigesh/majestic (Majestic GUI)

- https://docs.npmjs.com/cli/publish (NPM Publish)

- https://docs.gitlab.com/ee/user/project/pages/ (Gitlab Pages)

- https://github.com/rollup/rollup/ (Rollup)

- https://storybook.js.org/ (Storybook)

- https://github.com/nvm-sh/nvm

- https://github.com/FiloSottile/mkcert (HTTPS Certificates for localhost)

- https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https (Webpack HTTPS)

- https://developer.mozilla.org/pt-PT/docs/Web/HTTP/CORS

- https://enable-cors.org/

- https://alfilatov.com/posts/run-chrome-without-cors/